: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);
}


/* MAIN */

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


.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;

}


h1 {
  color: var(--darkYellow);
  font-size: 6rem;
 margin-bottom: 3.4rem;
}


.android-ios-main-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
   width: 100%;
 margin: auto;
 column-gap: 3rem;

 
}




.ios-container,
.android-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 3rem;
  width: 100%;

 
}




h2 {
  color: var(--darkYellow);
  letter-spacing: 0.1rem;
}





.parent {
  width: 100%;
  height: 25rem;
  overflow: hidden;
  margin: 0;
  
}

.child {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: linear 0.15s;
  filter: grayscale(50%);
}


.android-image {
  background-image: url(android-phones.jpg);
}


.ios-image {
  background-image: url(ios-phones.jpg);
}


.parent:hover .child {
transform: scale(1.1);
filter: grayscale(0);
}


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





@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;
  
}

















/* 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;
  
}


.section-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  vertical-align: top;
 
 
}


.news-container {
  display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border: 2px solid transparent;
transition: 0.3s ease;

}






.news-container:hover {
  border: 2px solid var(--darkYellow);
}


.news-author-and-day {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}


.news-image {
  width: 100%;
  height: 300px;
 

}


.news-arrow {
  transform: rotate(-45deg);
  width: 40px;
  height: 40px;
  border: 2px solid var(--darkYellow);
  border-radius: 100%;
  transition: 0.3s ease;
  margin: 10px;
  
}


.news-container:hover .news-arrow {
background: var(--ligherBlue);
}


.news-container p {
  color: var(--darkYellow);
  
}


.news-container a {
  text-decoration: none;
  width: 100%
}

.bottom-news-arrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.news-text {
  width: 90%;
  margin: auto;
  margin-top: 10px;
  flex: 1 1 auto;
}




.news-image-container {
  flex: 1 1 auto;
}








@keyframes slideInLeft {

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



main {

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

}

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


/* ARROW UP */



.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;
 
}




/* 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%;
}



h1 {
 
  font-size: 3rem;
 margin-bottom: 2rem;
}


.site-name-slogan{
  
  text-align: center;
}


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




.android-ios-main-container {
  flex-direction: column;
  row-gap: 100px;
}

.android-container h2 {
  order: -1;
}




.ios-container h2 {
  order: -1;
}

.section-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 60px;
}



.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;
    }



/* ARROW UP */

.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;
}


}