:root {
    --fontSize: 16px;
    --white:white;
    --black:black;
    --darkBlue:#00296B;
    --blue:#003F88;
    --ligherBlue:#00509D;
  --yellow:#FFD500;
  --darkYellow:#FDC500;
  
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  font-family: sans-serif;
  scroll-behavior: smooth;
  
  }
  
  body {
    width: 100%;
    background-color: var(--darkBlue);
    font-family: sans-serif;
  }
  
  
  
  /* HEADER */
  
  
  header {
    width: 70%;
    margin: auto;
    background-image: linear-gradient(rgba(0,63,136,0.3),rgba(0,63,136,0.9)),url("image-of-phones.jpg");
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 93%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 20rem;
    
  }
  
  
  header img {
    width: 8rem;
    border-radius: 15px;
    transition: linear 0.15s;
    cursor: pointer;
  }
  
  
  
  header nav {
    display: flex;
    align-items: center;
    column-gap: 12rem;
    background-color: rgba(0, 80, 157,0.8);
    padding: 15px;
    border-radius: 1rem;
  }
  
  header nav li {
    font-size: 1.4rem;
    list-style-type: none;
    cursor: pointer;
  
  
  }
  
  
  
  header nav li a {
  
    border-radius: 10px;
    padding: 15px;
    text-decoration: none;
    color: var(--darkYellow);
    transition: linear 0.12s;
  }
  
  header nav li a:hover {
  background-color: var(--darkYellow);
  color: rgb(0,80,157);
  }


  .current-nav {
    background-color: var(--darkYellow);
  color: rgb(0,80,157);
  }





  .site-name-slogan {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(rgba(0,63,136,0.3),rgba(0,63,136,0.9)),url(phones.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    margin-bottom: 3rem;
  
  }



  .site-name-slogan p {
    color: var(--darkYellow);
    font-size: 3rem;
  }












  /* Phone nav */

  @keyframes slideInLeft {

    from {
    transform: translateY(-40px);
    }
    
    
    to{
    transform: translateY(0);
    }
    
   
    }
  
  
  /* PHONE NAV */
  
  .phone-nav img {
  width: 40%;
  transform: scale(0.5);
  display: none;
  
  }
  
  #nav-phone-list {
    display: none;
  }
  
  .phone-nav-lista {
    display: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    list-style: none;
    font-size: 1.3rem;
    row-gap: 1rem;
    background-color: #00509D;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 1.2rem;
    border-radius: 1.2rem;
    animation: slideInLeft 0.75s ease-in-out forwards;
  }
  
  .phone-nav-lista li {
    
    padding: 1.1rem;
    
  }









/* MAIN */



main {
    width: 70%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }


  h1 {
    color: var(--darkYellow);
    padding: 3rem;
    font-size: 3rem;
  }


  form {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #00509D;
    border-radius: 2rem;
    padding: 2rem;
  }


  form label {
    color: var(--darkYellow);
    font-size: 1.4rem;
  }

  form input,
  form textarea,
  form button {
    padding: 0.5rem;
    font-size: 1.4rem;
  }

  form button {
    cursor: pointer;
    background-color: #00296B;
    border: none;
    color: var(--darkYellow);
    transition: all 0.15s;
  }

  form button:hover {
    background-color: var(--darkYellow);
  
    color: #00296B;
  }




  .contact-via-mail {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 80%;
    margin-top: 4rem;
  }

  .contact-via-mail img {
    width: 5%;
  }


  h2 {
    font-size: 1.4rem;
    color: var(--darkYellow);
  }




  .contact-us-wallpaper {
    width: 60%;
    margin-top: 4rem;
  }


  .contact-us-wallpaper img {
    width: 100%;
    background-size: cover;
    border-radius: 2rem;
  }



/* FOOTER */

footer {

    width: 70%;
    margin: 2rem auto 0;
    background-image: linear-gradient(rgba(0,63,136,0.3),rgba(0,63,136,0.9)),url("image-of-phones.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 36rem;
  
  
  
  
  
    
  }
  
  
  
  
  .socials,
  .upper-footer,
  .lower-footer {
  
  
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  
  
  }
  
  
  .lower-footer {
    align-items: flex-start;
  }
  
  
  
  
  .info-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background-color: rgba(0, 80, 157,0.8); */
    padding: 5px;
  }
  
  
  .info-container img {
    width: 50px;
    height: 50px;
  }
  
  
  .info-container a {
    text-decoration: none;
    margin-top: 0.5rem;
    color: #FDC500;
    font-size: 1.2rem;
  }
  
  
  .info-container-link {
    transition: 0.2s ease;
    
  }
  
  
  .info-container-link:hover {
    opacity: 0.6;
  }
  
  
  hr {
    width: 90%;
    margin: 0 auto;
    color: #FDC500;
    margin-top: 20px;
    
  }
  
  
  .lower-footer {
    margin-top: 1.2rem;
    
  }
  
  
  
  footer .lower-footer ul {
    list-style: none;
    /* background-color: rgba(0, 80, 157,0.8); */
    padding: 10px;
  
    
  
  }
  
  
  
  footer .lower-footer ul li {
    margin-bottom: 1.2rem;
    color: #FDC500;
    font-size: 1.2rem;
  }
  
  
  .ul-heading {
    width: 900;
    background-color: rgba(0, 41, 107,0.8);
    width: fit-content;
    padding: 10px;
    border-radius: 10px;
  }
  
  
  ul li a {
    text-decoration: none;
    color: #FDC500;
    transition: 0.2s ease;
  }
  
  ul li a:hover {
    opacity: 0.6 ;
  }
  
  
  .socials {
    background-color: rgba(0, 41, 107,0.8);
    padding: 15px 0;
  
  }
  
  
  .socials p {
    color: #FDC500;
  padding: 10px;
  font-size: 1.2rem;
  }
  
  
  .socials img {
    width: 30px;
    transition: 0.2s ease;
  }
  
  
  .socials img:hover {
    opacity: 0.6;
  }
  
  
  h3 {
    color: var(--darkYellow);
    font-size: 1.5rem;
    margin-top: 100px;
    margin-bottom: 60px;
    background-color: #00509D;
    width: 100%;
    text-align: center;
    padding: 10px;
    border-radius: 1rem;
    
  }
  



  .arrow-up {
    opacity: 0;
    width: 1.5%;
    position: fixed;
    bottom: 2rem;
    right: 4rem;
    transition: opacity 0.5s ease-in-out;
   
  
  }
  
  .arrow-up.visible {
    opacity: 1;
   
  }





  @keyframes slideInLeft {

    from {
    transform: translateX(-200px);
    }
    
    
    to{
    transform: translateX(0);
    }
    
   
    }



main {

 animation: slideInLeft 0.75s ease-in-out forwards;

}


















  /* MEDIA QUERY */


  @media(max-width:768px) {



    header nav {
        display: none;
      }
      
      
      header {
      
        width: 100%;
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 93%);
        
      
      }
      
      main {
        width: 90%;

      }


  

      h2 {
        font-size: 1rem;
      
      }

      
      .current-nav {
        padding: 1rem;
        border-radius: 1rem;
      }

form {
  width: 90%;
}


      
.phone-nav{
    width: 50%;
  }
  
  header a {
  padding: 2rem;
  }
  
  
  
  
      .phone-nav img {
        width: 100%;
        transform: scale(0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  
      }
  
  
      header nav {
        display: none;
      }

      



      .site-name-slogan{
  
        text-align: center;
      }
      
      
      .site-name-slogan p {
        font-size: 2rem;
      }
      




      form label {
        color: var(--darkYellow);
        font-size: 1rem;
      }
    
      form input,
      form textarea,
      form button {
        padding: 0.5rem;
        font-size: 1rem;
      }



      .contact-via-mail img {
        width: 10%;
      }


      .arrow-up {
        width: 5%;
        position: fixed;
        bottom: 2rem;
        right: 2rem;
       
      
      }


      
footer {

    width: 100%;
    margin: auto;
   margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: fit-content;
  
  
    
  }
  
  
  
  
  .socials,
  .upper-footer
   {
  
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  row-gap: 40px;
  
  
  }
  
  
  footer .lower-footer ul li {
    font-size: 10px;
  }
  
  div.socials {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    
  }
  
  
  .socials p {
    font-size: 10px;
  }
  
  .socials img {
    width: 20px;
  }
  
















  }