/*
- Red 400: hsl(7, 99%, 70%)
- Yellow 500: hsl(51, 100%, 49%)
- Green 800 (graphic design text): hsl(167, 40%, 24%)
- Blue 800 (photography text): hsl(198, 62%, 26%)
- Green 500 (footer): hsl(167, 34%, 41%)

### Neutral

- Grey 950: hsl(212, 27%, 19%)
- Grey 600: hsl(213, 9%, 39%)
- Grey 550: hsl(232, 10%, 55%)
- Grey 400: hsl(210, 4%, 67%)
- White: hsl(0, 100%, 100%)


*/

/*--------------------GENERAL--------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
html{
      overflow-x: hidden;
      font-size: 62.5%;
        max-width: 100%;
}
body{
font-family: 'barlow', sans-serif;
line-height: 1;
font-size: 1.8rem;
font-weight:600 ;
  overflow-x: hidden;
 margin: 0 auto;
  max-width: 100%;

}

.container{
margin: 0 auto ;
padding: 0 3.2rem;
max-width: 144rem;

}

.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.flex{
    display: flex;
}
.col2-grid{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}

/*--------------------NAVBAR--------------------*/

.header{
    background-color:rgba(62,191,255,255);
    
}
.navbar{
    justify-content: space-between;
      padding: 2rem 6rem;
  margin: 0 auto;

}
.nav-logo{
    width: 24rem;
}

.listoflink {
    gap: 5rem;
     list-style: none;
    
   
}
.listoflink li a{
    color: white;
    text-decoration: none;
    font-size: 2.1rem;

}
.listoflink li a:hover{
    color: hsl(212, 27%, 19%);
    text-decoration: none;
    font-size: 2.1rem;

}

.listoflink li {
 margin: auto;

}

.nav-btn {
    background-color:white ;
    padding: 2rem 4rem;
    border-radius: 5rem;
    

}
.nav-btn:hover {
    
    background-color: rgba(255, 255, 255, 0.685);
    transition: 0.6s ease-in-out; 
    color:white ; 
     transform: scale(1.1)

}
.nav-btn a:hover{
  
}
.nav-btn A {
    color:hsl(212, 27%, 19%) !important ;

}
.btn-mobile-nav{
     border: none;
  background: none;
 cursor: pointer;
  display: none;
   
}

.icon-mobile-nav{
color: #EEEEEE;
width: 4.8rem;
height: 4.8rem;
   
}




/*--------------------HERO--------------------*/
.hero{
    padding: 12rem 10rem;

}


.heroh1{
    text-transform: uppercase;
    color: hsl(0, 100%, 100%);
    font-size: 7rem;
       margin-bottom: 16rem;
}
.hero-section{
    background-image: url(../img/desktop/image-header.jpg);
      text-align: center;
   background-position: center;
    background-size: cover;
background-repeat: no-repeat;
    height: 75vh;
    width: 100%;

}
.hero img{
     transition: all 0.3s ease;
}
.hero img:hover{


 transform: scale(1.55) rotate(0deg);
}

.hero-content{
     width: 100%;

align-self: center;
padding: 0rem 8rem;


}

.hero-content h2{
color:hsl(212, 27%, 19%) ;
font-size: 4.7rem;
margin-bottom: 2.9rem;
}
.hero-content p{
color:hsl(213, 9%, 39%);
font-size: 1.8rem;
line-height: 1.6;
margin-bottom: 2.9rem;
}
.hero-content a{
color:hsl(212, 27%, 19%) ;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
font-size: 2.2rem;


}

.hero-content a:hover{
    border-bottom: 3px solid hsl(7, 99%, 70%);
      padding-bottom: 2px;
     
      transition: 0.1s;
}


.hero-img{
     width: 100%;
}


/*--------------------CONTENT--------------------*/

.back-img-hero1{
background-image: url(../img/desktop/image-graphic-design.jpg);
   width: 100%;
height: 59.966rem;
}
.back-img-hero2{
    background-image: url(../img/desktop/image-photography.jpg);
width: 100%;
height: 59.966rem;
}
.hero-back-content{
    width: 50%;
    padding: 40rem 0rem 0rem 0rem;
justify-self: center;
text-align: center;
}


.content-section{
    margin-bottom: 25rem;
}

.hero-back-content h2:first-child{
color: hsl(167, 40%, 24%);
margin-bottom: 2.9rem;


}

.hero-back-content p:first-child{
    color:hsl(167, 34%, 41%) ;
    margin-bottom: 2.9rem;
    line-height: 1.6;

}
.hero-back-content h2:last-child{
color: hsl(198, 62%, 26%)
;
margin-bottom: 2.9rem;
}

.hero-back-content p:last-child{
color: hsl(198, 62%, 26%)
;
margin-bottom: 2.9rem;
line-height: 1.6;
}
/*--------------------TESTEMONIAL--------------------*/
.testemonial-section{
     margin-bottom: 25rem;
     text-align: center;
}

.testemonial-section div h2{
    grid-column: 1/4;
    color:hsl(210, 4%, 67%) ;
    text-transform: uppercase;

}

.test-content{
    gap: 5rem;
}
.test-content div{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.test-img{
    width: 20%;
    border-radius: 50%;
    align-self: center;
}
.test-content div p{
    color: hsl(213, 9%, 39%);
    line-height: 1.6;
}
.test-content div h3{
   color: hsl(198, 62%, 26%)
}

/*--------------------GALARY--------------------*/
.galary-section{
 margin-bottom: 25rem;

}

.galary-section h2{
  color: hsl(198, 62%, 26%);
  margin-bottom: 5rem;
  text-align: center;
      text-transform: uppercase;

}
.gallery-item img{
    width: 100%;

}
.gallery-item img:hover{
    transform: scale(1.1);
    transition: all 0.5s;

}
.image-gal{
justify-content: space-between;
display:flex
}


.gallery-item{
  overflow: hidden;
}


/*--------------------FOOTER--------------------*/

.footer{
    background-color: hsl(167, 53%, 57%) ;;
color:hsl(167, 40%, 24%);
text-align: center;
    padding: 13rem 0;

}
.footer-logo{
width: 31rem;
margin-bottom: 2.6rem;
}
.footer-link{
display: flex;
align-items: center;
gap: 5rem;
justify-content: center;
margin-bottom: 5.6rem;
}
.footer-link span:hover{
    color: aliceblue;
    cursor: pointer;
}
.logos{
display: flex;
gap: 2rem;
justify-content: center
}
.logos img{


    cursor: pointer;

}


/*--------------------MEDIA QUERIES--------------------*/
@media (max-width: 120rem) {

 
  html {
    overflow-x: hidden;
    font-size: 56.25%; /* Slightly smaller base font size for mobile */
  }

  body {
    font-size: 1.6rem;
  }

  .container {
    padding: 0 2rem;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .grid,
  .col2-grid {
    grid-template-columns: 1fr; /* Single column layout for mobile */
  }

  /*--------------------NAVBAR--------------------*/
  .btn-mobile-nav {
    display: block;
  }

  .navbar {
    padding: 2rem;
    position: relative;
  }

  .nav-logo {
    width: 18rem;
  }

  .listoflink {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .links {
    position: absolute;
    background-color: rgb(255, 255, 255);
    height: 40vh;
    width: 80%;
    max-width: calc(100% - 2rem);
    right: 1rem;
    top: 13rem;
    padding-top: 7rem;
    margin: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: all 0.3s ease;
  }

  .links.nav-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  .btn-mobile-nav .icon-mobile-nav[name="menu-outline"] {
    display: block;
  }

  .btn-mobile-nav .icon-mobile-nav[name="close-outline"] {
    display: none;
  }

  .nav-btn {
    background-color: hsl(51, 100%, 49%);
    border: solid 1px hsl(51, 100%, 49%);
  }

  .listoflink li a {
    color: hsl(213, 9%, 39%);
    font-size: 3rem;
  }

  .listoflink li a:hover {
    font-size: 3.1rem;
  }

  .icon-mobile-nav {
    position: absolute;
    top: 10px;
    right: 30px;
  }

  /*--------------------HERO--------------------*/
  .hero {
    padding: 8rem 2rem;
  }

  .hero-section {
    background-image: url(../img/mobile/image-header.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 75vh;
    width: 100%;
  }

  .heroh1 {
    font-size: 4.5rem;
    margin-bottom: 2rem;
    text-align: center;
  }

  .hero-content {
    padding: 0 2rem;
    margin: 5rem 0;
    width: 100%;
    text-align: center;
  }

  .hero-content h2 {
    font-size: 3.5rem;
  }

  .hero-back-content {
    width: 100%;
    padding: 2rem 0;
  }

  /*--------------------CONTENT--------------------*/
  .test-content {
    display: flex;
    flex-direction: column;
    padding: 0 5rem;
  }

  .test-header {
    font-size: 3.3rem;
    margin: -15rem 0 6rem 0;
  }

  .image-gal {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
   .container{
    padding: 0;
    margin: 0;
  }
  .back-img-hero1{
height: 35.966rem;
  }
    .back-img-hero2{
height: 35.966rem;
  }
.hero-back-content{padding: 11rem 0;}

.image-box{
  grid-row: 2 / 3;
}
.listoflink {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
        .links {
        
        padding-top: 4rem;}
}