/*
--- 01 TYPOGRAPHY SYSTEM

- Font size (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98


-SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

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

html{
  font-size: 62.5%;
}

body{
  color: #13183F;
  font-weight:500 ;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
/* GENERAL STYLINGS */
.container{
  width: 91%;
  margin: 0 auto;
}
.btn{
 border-radius: 28px;
 font-size: 1.6rem;

   
 }

 
/* HEADER SECTION */


.header-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.8rem;
  margin-top: 16px;
}
.logo{
  
  font-size: 2.8rem;
}

.btn a{
  text-decoration: none;
  color: #FFFFFF;
}

.btn-nav{
  background-color: #13183F;
  padding: 1.2rem 2.4rem;
}

.btn-nav:hover{
  background-color: #666CA3;
}
/* 
@media(min-width:37.5rem){
  .header.container{
   width: 89%;
   max-width: 689px;
   margin-top: 2.4rem;
  }
}

@media(min-width:76.8rem){
 .header.container{
   width: 78%;
   max-width: 1110px;
   margin-top: 2.4rem;
  }

  .btn{
    font-size: 1.8rem;
  }

  .logo{
    font-size: 3.6rem;
  }
} */

/* HERO SECTION */
.hero{
  margin-top: 3.8rem;
}
.heading-primary{
  font-size: 4rem;

}

.hero-desc{
  font-size: 1.6rem;
  font-weight: 100;
  color: #83869A;
  line-height: 2;
  margin-top:2.6rem ;
}

.btn-hero{
  display:inline-block;
  background-image: linear-gradient(to bottom, #FF6F48,#F02AA6);
  padding: 1.5rem 3.8rem;
  margin-top: 2.4rem;
}

.btn-hero:hover{
  opacity: 50%;
}

.hero-img-box{
  height: 60rem;
  background-image: url("assets/image-hero-mobile.png");
  background-position: center;
  background-size: cover;
  background-clip: border-box;
  margin-top: 7rem;
}

@media(min-width: 733px){
  .hero-box{
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    gap: 4.8rem;
  }

  .hero-img-box{
    height: 40rem;
    background-image: url("assets/image-hero-mobile.png");
    /* background-position: center; */
    /* background-size: cover; */
    /* background-clip: border-box; */
    /* margin-top: 7rem; */
  }
}

@media( min-width: 900px){

  .heading-primary{
    font-size: 5.6rem;
  }
 
  .hero-desc{
    font-size: 1.8rem;
  }

  .btn-hero{
    font-size: 1.8rem;
  }
  .hero-box{
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    gap: 4.8rem;
  }
  .hero-img-box{
    height: 80rem;
    width: 100%;
    background-image: url("assets/image-hero-mobile.png");
    /* background-position: center; */
    /* background-size: cover; */
    /* background-clip: border-box; */
    /* margin-top: 7rem; */
  }

 
}

/* SERVICES */
.services{
  margin-top: 9rem;
}


.services-heading--box{
  background-image: linear-gradient(to bottom, #FF6F48,#F02AA6);
  text-align:left;
  padding:2.4rem 2.9rem 3.2rem 2.8rem ;
  border-radius: 9px;
}

.services-heading{
 color: #FFFFFF;
 font-size: 2.4rem;
}
.services-item{
  margin-top: 4rem;
  padding: 0 2.9rem 3.2rem 2.8rem;
  box-shadow:1px 0px 5px #F5F5F5 ;
  border-radius: 15px;
}
.services-icon{
  position: relative;
  top: -25px;
}
.services-title{
  font-size: 2rem;
  color: #13183F;
  margin-bottom: 1.6rem;
}

.services-desc{
  font-size: 1.6rem;
  line-height: 2;
  color: #83869A;
  margin-bottom: 2.4rem;
  width: 28.6rem;
}

.services-action{
 font-size: 1.8rem;
 color: #F74780;
}

@media( min-width: 768px){

  .hero-box{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
   
   }

   .hero-text{
     width: 45rem;
   }
   

  .grid{
    display: grid;
    gap: 1rem;
  }
  .grid-col{
    grid-template-columns: repeat(2, 1fr);
  }

  
  .services-heading--box{
    margin-top: 2.5rem;
    height: 34rem;
    padding:5.6rem 2.1rem  12.4rem 3.2rem ;

  }
}
@media( min-width: 900px){
  .grid-col{
    grid-template-columns: repeat(3, 1fr);
  }

  .services-heading{
    font-size: 3.2rem;
   }

   .services-title{
    font-size: 2.4rem;
    /* margin-bottom: 1.6rem; */
  }

  .services-desc{
    font-size: 1.8rem;
    /* margin-bottom: 2.4rem; */
   
  }

  
}
/* FOOTER */

.footer{
  background-color: #13183F;
  margin-top: 8rem;
  padding: 3.2rem 1.6rem;
}

.btn-footer{
  background-image: linear-gradient(to bottom,#F02AA6, #4851FF);
  padding:.9rem 2.4rem ;
  text-align: center;
}

.btn-footer:hover{
  filter: brightness(2);
  opacity: 100%;
}
.footer-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}