/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

--rich-black-fogra-29-1: hsl(215, 31%, 14%);
--rich-black-fogra-29-2: hsl(230, 14%, 8%);
--rich-black-fogra-39: hsl(158, 29%, 5%);
--granite-gray: hsl(0, 0%, 40%);
--go-green_50: hsla(145, 63%, 42%, 0.5);
--go-green_8: hsla(145, 63%, 42%, 0.08);
--go-green_5: hsla(145, 63%, 42%, 0.05);
--light-gray: hsl(0, 0%, 80%);
--mint-cream: hsl(160, 100%, 98%);
--cultured: hsl(0, 0%, 93%);
--go-green: hsl(145, 63%, 42%);
--white: hsl(0, 0%, 100%);
--jet: hsl(0, 0%, 18%);
--light-grey: hsl(0, 0%, 100%, 0.7);


/*typography*/

--ff-poppins: 'Poppins', sans-serif;
--ff-cuprum: 'Cuprum', sans-serif;

--fs-1: 4.5rem;
--fs-2: 3.6rem;
--fs-3: 3.5rem;
--fs-4: 3.2rem;
--fs-5: 2.5rem;
--fs-6: 2.4rem;
--fs-7: 2.2rem;
--fs-8: 2rem;
--fs-9: 1.8rem;
--fs-10: 1.5rem;
--fs-11: 1.4rem;
--fs-12: 1.3rem;

--fw-600: 600;
--fw-500: 500;

/*Spacing*/

--section-padding: 80px;

/*Shadow*/

--shadow-1: 3px 4px 30px hsla(0, 0%, 53%, 0.1);
--shadow-2: 5px 3px 40px hsla(191, 100%, 17%, 0.1);

/*Border Radius*/

--radius-5: 5px;

/*Transition*/

--transition-1: 0.25s ease;
--transition-2: 0.5s ease;
--cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);

}


/*-----------------------------------*\
  #RESET
\*-----------------------------------*/
*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
li{
  list-style: none;
}
a{
  color:inherit;
  text-decoration:none;
}
a,
img,
span,
input,
button,
ion-icon{
  display: block;
}
img{
  height: auto;
}

input,
button{
  color: inherit;
  background: none;
  font-size: 10px;
  border: none;
}

input{
  width: 100%;
}
button{
  cursor: pointer;
}
ion-icon{
  pointer-events:none;
}
address{font-style: normal;}

html{
  font-family: var(--ff--poppins);
  font-size: 10px;
  scroll-behavior: smooth;
}
body{
  background-color: var(--white);
  color: var(--granite-gray);
  font-size:1.6rem;
  line-height: 1.7;
}

:focus-visible {outline-offset: 4px; }

::-webkit-scrollbar {
  width: 15px;
  height:8px;
  background-color: #e9e9e9;
}
::-webkit-scrollbar-thumb {
  background: #8f8d8d;
}
::-webkit-scrollbar-thumb:hover{
  background-color: #767474;
}


/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.custom-container{padding-inline:15px;}

.section{
  padding-block:var(--section-padding);
}
.has-before,
.has-after{
  position: relative;
  z-index: 1;
}

.has-before::before,
.has-after::after{
  content: "";
  position: absolute;
}

.h1,
.h2,
.h3-sm{
  font-family: var(--ff-cuprum);
  color: var(--rich-black-fogra-29-1); 
}

.h1{
  font-size: var(--fs-1);
  line-height: 1.1;
}
.h2,
.h3
.h2-sm{
  line-height: 1.3;
}
.h2{
  font-size: var(--fs-1);
}
.h2-sm{
  font-size: var(--fs-3);
}
.h3{
 font-size: var(--fs-3);
}

.btn-group{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.btn-grp{
  font-weight: var(--fw-600);
  text-transform: uppercase;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: var(--radius-5);
  max-width: max-content;
  transition: var(--transition-2);
  margin-bottom:25px;
}
.btn-primary{
  background-color:var(--go-green);
  color: var(--white);
}
.btn-primary:is(:hover, :focus){
  background-color: var(--rich-black-fogra-29-1);
  color: var(--white);
}
.flex-btn{
  display: flex;
  align-items: center;
  column-gap: 20px;
  font-size: 16px;
  font-weight: var(--fw-600);
}
.img-holder{
  background-color: var(--light-gray);
  aspect-ratio:var(--width) / var(--height);
}
.cover-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.w-100{
  width: 100%;
}
.text-center{
  text-align: center;
}
.section-subtitle{
  color: var(--go-green);
  font-weight: var(--fw-500);
  font-size: 20px;
}
.grid-list{
  display: grid;
  grid-gap: 20px;
}
.btn-link{
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 5px;
  color: var(--rich-black-fogra-29-1); 
  font-size: var(--fs-12);
  transition: var(--transition-1);
  text-decoration: none;
}



/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/


.btn-outline{display: none;}

.header{
  position: fixed;
  top:0;
  left:0;
  padding-block:15px;
  width:100%;
  z-index: 4;
}
.header.active{
  background-color: var(--white);
  box-shadow: var(--shadow-2)
}
.header .custom-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo{
  color: var(--rich-black-fogra-29-1);
  font-family: var(--ff-cuprum);
  font-size: 33px;
  font-weight: var(--fw-500);
  line-height: 1;
}
.nav-open-btn{
  color: var(--rich-black-fogra-29-1);
  font-size: 35px;
}

.navbar{
  position: fixed;
  top:0;
  left: -280px;
  max-width: 280px;
  width:100%;
  height:100%;
  background-color: var(--rich-black-fogra-39);
  color: var(--white);
  padding:30px 20px;  
  display:block;
  visibility: hidden;
  transition: 0.5s;
  z-index: 4;
}
.navbar.active{
  visibility: visible;
  transform: translateX(280px);
  transition: 0.5s;
}
.navbar .logo,
.nav-close-btn{
  color: var(--white);
}
.navbar .wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 35px;
}
.nav-close-btn{
  font-size: 30px;
}
.navbar-link{
  padding: 10px;
  transition: var(--transition-1)
}
.navbar-link:is(:hover, :focus){
  color: var(--go-green);
}
.overlay{
  position: fixed;
  inset: 0;
  background-color: var(--light-grey);
  visibility: hidden;
  opacity: 0;
  transition: var(--transition-1);
  z-index: 3;
}
.overlay.active{
  visibility: visible;
  opacity: 1;
}







/*-----------------------------------*\
  #HERO
\*-----------------------------------*/

.hero{
  background-color: var(--mint-cream);
  padding-block-start: calc(var(--section-padding) + 50px);
  text-align: center;
  overflow: hidden;
}
.hero .custom-container{
  display: grid;
  grid-gap: 50px;
}
  
.hero-subtitle{
  color: var(--go-green);
  font-size: var(--fs-12);
  font-weight: var(--fw-500);
  z-index: 0;
}
.hero-subtitle::before{
 top: 9px;
    left: 77px;
    height: 2px;
    width: 17px;
    background-color: var(--go-green);
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin-right: 1px;
}
.hero-title{
  margin-block:10px 15px;
}
.hero-text{
  color: var(--rich-black-fogra-29-1); 
}
.hero .btn-group{
  margin-block: 40px; 
}

.hero .btn-icon{
  padding: 15px;
  background-color: var(--go-green);
  border-radius: 50%;
  color: var(--white);
  font-size: 30px;
  animation: pulse 2s ease infinite;
}

@keyframes pulse{
  0% {
    box-shadow: 0 0 0 0 var(--go-green);
  }
  100%{
   box-shadow: 0 0 30px var(--go-green); 
  }
} 
.hero .flex-btn .span{
  color: var(--go-green);
  font-size: var(--fs-9);
  font-weight: var(--fw-500);
}

.hero-banner,
.hero-banner img{
  border-radius: 50%;
}

.hero-banner::before{
  top: 50%;
  left: 50%;
  height: 120%;
  width: 120%;
  transform: translate(-50%, -50%);
  background: url(../img/hero-pattern.svg) no-repeat center center;
  z-index: -1;
}

/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

.about .custom-container{
  display: grid;
  grid-gap: 30px;
}
.about-banner{
  filter: drop-shadow(2px 2px 8px #000);
}
.about .section-text{
  margin-block:20px 13px;
}
.about-list{margin-block: 50px;}

.about-list .has-before{
  font-family: var(--fm-cuprum);
  font-size: var(--fs-8);
  font-weight: var(--fw-600);
  padding-linline-start: 20px;
  line-height: 1.5; 
}
.about-list .has-before:not(:last-child){margin-block-end: 15px;}

.about-list .has-before::before{
  top:10px;
  left: -20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--go-green);
}
.about .btn-group{
  justify-content: flex-start;
  align-items: inherit;
}
.about .btn-group .flex-btn{
  column-gap: 10px;
}
.about .btn-icon{
  font-size: 40px;
  color: var(--go-green);
}
.about .span{
  color: var(--go-green);
  font-size: var(--fs-6);
  font-weight: var(--fw-600);
  font-family: var(--fm-cuprum);
}

/*-----------------------------------*\
  #SERVICE
\*-----------------------------------*/

.services .section-text{
  margin-block:15px 50px;
}
.services .grid-list{
  margin-block-end: 50px;
}
.service-card{
  height: 100%;
  padding: 30px 25px;
  text-align: center;
  box-shadow: var(--shadow-1)
}
.service-card::after{
  bottom:0;
  left:0;
  background-color:var(--go-green);
  height:2px;
  width:0;
  transition: var(--transition-2); 
}
.service-card:is(:hover,:focus-within)::after{
  width: 100%;
}
.service-card .card-icon{
  margin-inline: auto;
  margin-block-end:10px;
}
.service-card .card-icon img{
  margin-inline: auto;
  margin-block-end:10px;  
}
.service-card .img{transition: var(--transition-1);}

.service-card:hover .img{transform: scale(1.5);}

.service-card .card-text{margin-block: 5px 13px;  }

.services .btn-grp{margin-inline:auto;}

/*-----------------------------------*\
  #FEATURES
\*-----------------------------------*/

.features .section-text{
  margin-block:15px 50px;
}
.features-card{
    padding-block-start: 40px;
    margin-block-start: 40px;
    box-shadow: var(--shadow-1);
    transition: var(--transition-1);
    background: var(--white);
    padding: 25px;
    position: relative; 
}
.features-card:hover{
  background-color: var(--go-green); 
}
.features-card .card-number{
  position: absolute;
  top:0;
  left: 25px;
  transform: translateY(-50%);
  font-size: var(--fs-5);
  padding-block:5px;
  text-align: center;
  border-radius: var(--radius-5);
  background-color: var(--cultured);
  min-width:50px;
  font-weight: var(--fw-600);
}
.features-card:hover .card-number{color: var(--go-green)}
.features-card .card-title{
  margin-block-start:15px;
  margin-block-end:5px;
  color: var(--rich-black-fogra-29-1);
  font-size: var(--fs-7);
}
.features-card:is(.card-title, .card-text){transition: var(--transition-1);}

.features-card:hover :is(.card-title, .card-text){color: var(--white);}
/*-----------------------------------*\
  #FAQ
\*-----------------------------------*/

.faq .custom-container{
  display: grid;
  grid-gap: 20px;
}
.faq .title-wrapper{
  padding: 30px 25px;
  background-color: var(--white);
  box-shadow: var(--shadow-1);
}
.faq .section-title{
  font-size:var(--fs-4);
  margin-block-end:30px;
}
.faq-card{
  background-color: var(--go-green_5);
  border-radius: var(--radius-5);
  overflow: hidden;
}
.faq-card .card-action{
  
  background-color: var(----action-bg);
  color: var(--color);
  display: flex;
  align-items:center;
  justify-content: space-between;
  padding: 20px 30px;
  column-gap: 20px;
  transition: var(--transition-1);
  width: 100%;
}
.faq-card .card-action:is(:hover, :focus, .active){
  background-color: var(--go-green);
  color:var(--white);
}
.faq-card .card-title{
  color:var(--color);
  font-size: var(--fs-8);
  transition: var(--transition-1)
}
.faq-card .card-action.active .open,
.faq-card .card-action .close{display:none;}

.faq-card .card-action .open,
.faq-card .card-action.active .close{display:block;}

.faq-card .card-content{
  font-size:var(--fs-10);
  padding-inline:25px;
  max-height: 0;
  overflow: hidden;
  transition: var(--transition-1);
}
.faq-card .card-content p{
  margin-block:15px;
}
.faq-card .card-action.active + .card-content{max-height: 500px;}

.faq-card .action-icon{
  font-size:var(--fs-7);
  font-weight: var(--fw-600);
}

/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/
.footer{
  background-color: var(--rich-black-fogra-29-2);
  color: var(--cultured);
}
.footer-top .custom-container{
  display: grid;
  grid-gap: 40px;
}
.footer .logo{
  color: var(--white);
}
.footer-text{
  margin-block:25px 25px;
}
.newsletter-form{
  max-width: 350px;
  position: relative;
}
.email-field{
  color: var(--white);
  padding: 15px;
  border-radius: var(--radius-5);
  border: 1px solid var(--granite-gray);
  font-size: var(--fs-11);
}
.footer .btn-form{
  background-color: var(--go-green);
  font-size: 24px;
  position: absolute;
  top:6px;
  right:6px;
  padding:10px;
  border-radius: var(--radius-5);
}
.footer-list-title{
  font-family: var(--ff-cuprum);
  font-size: var(--fs-5);
  font-weight: var(--fw-600);
  line-height: 1.2;
  margin-block-end:;
}
.footer-link{
  margin-block-start: 15px;
  transition: var(--transition-1);
}
.footer-link:is(:hover, :focus){
  color:var(--go-green);
}
.footer-item,
.social-list{
  display: flex;
  align-items: flex-start;
  column-gap: 10px;
}
.footer-item{margin-block-start: 15px;/*color: var(--go-green)*/;}

.footer-item > ion-icon{
  flex-shrink: 0;
  color: var(--go-green);
  font-size: 20px;
  margin-block-start:3px;
}
.contact-link{transition: var(--transition-1);}

.contact-link:not(.address)(:hover, :focus){
  color: var(--go-green);
}
.footer-item:last-child{
 margin-block-start:;
 padding-block-start:;
 border-block-start:1px solid var(--granite-gray); 
}

.social-link{
  font-size: 14px;
  border: 1px solid var(--go-green);
  padding: 10px;
  transition: var(--transition-1);
  margin-block-start:20px;
}

.social-link:is(:hover, :focus){
  background-color: var(--go-green);
  border-color: var(--go-green);
  color: var(--white); 
}

.footer-bottom{
  padding-block:15px;
  border-block-start: 1px solid var(--jet); 
}
.copyright{text-align: center;}
.copyright-link{
  display: inline-block;
  color: var(--go-green);
  font-weight: 500;
}
.copyright-link:is(:hover, :focus){
  color:var(--go-green);  
}
.footer-bottom-list{
  display: flex;
  justify-content: center;
  column-gap: 20px;
}
.footer-bottom-link{
  font-size: var(--fs-11);
  transition:var(--transition-1);
}
.footer-bottom-link:is(:hover, :focus){color:var(--go-green);}







/*-----------------------------------*\
  #MEDIA QUERIES 
\*-----------------------------------*/


@media(min-width: 575px){

  /*custom porperty*/
  :root{

    /*typography*/

    --fs-1: 5.4rem;

  }

  /*reused style*/

  .custom-container{
    max-width: 540px;
    width: 100%;
    margin-inline:auto;
  }

  /*Header*/

  .header .custom-container{
    max-width: unset;
  }

  /*Services*/

  .services .grid-list{
    grid-template-columns: 1fr 1fr;
  }
   .service-card{
    text-align: left;
  }
  .service-card .card-icon{
    margin-inline:0;
  }
  .service-card .btn-link{
    justify-content: flex-start;
  }

  .hero-subtitle::before{
    left: 160px;
  }
  .service-card{
    padding: 30px 15px;
  }

  .btn-group{
    flex-direction: inherit;
    column-gap: 40px;
  }
  
  .btn-grp {
    margin-bottom: 0; 

  }

}

@media(min-width: 768px){

  /*custom porperty*/
  :root{

    /*typography*/

    --fs-1: 7rem;
    --fs-2: 4rem;
    --fs-3:3.5rem;

  }

  /*reused style*/

  .custom-container{
    max-width: 720px;
  }
  .btn-grp{
    padding: 16px 32px;
  }
  .section-text.text-center{
    max-width: 50ch;
    margin-inline: auto;
  }
  .btn-link{
   --fs-12: 1.4rem; 
  }

  /*Hero*/
  .hero-subtitle{
    --fs-12:1rem;
  }


  /*Features*/
  .features .grid-list{
    grid-template-columns: 1fr 1fr;
  }

  /*footer*/
  .footer .custom-container{
    grid-template-columns: 1fr 1fr;
  }
}

@media(min-width: 992px){
  .custom-container{
    max-width: 960px;
  }
  .btn-grp{
    padding: 16px 15px;
  }

  /*header*/
  .nav-open-btn,
  .navbar .wrapper,
  .overlay{display: none;}

  .header{padding: 20px;}
  .navbar,
  .navbar.active{all:unset;}
  .navbar .navbar-list{
    display:flex;
    column-gap: 25px;
  }
  .navbar.link{
    color: var(--rich-black-fogra-29-1);
    font-weight: var(--fs-500);
    padding-block:0; 
  }
  .header .btn-outline{
    display: block;
    color: var(--go-green);
    font-weight: var(--fw-600);
    border: 1px solid var(--go-green);
    padding: 7px 15px;
    transition: var(--transition-1);
    text-transform: uppercase;
  }
  .header .btn-outline:is(:hover, :focus){
    background-color: var(--go-green);
    color: var(--white);
  }

  /*hero*/

  .hero{text-align: left;}

  .hero .custom-container{
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .hero-subtitle{
    margin-inline:25px 0;
  }
  .hero .btn-group{
    justify-content: flex-start;
  }

  /*about*/

  .about .custom-container{
     grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .about .btn-group{
    align-items: flex-start;
  }

  /*Services*/

  .service-card{
    display: flex;
    align-items: flex-start;
    column-gap: 10px;
  }

  /*feature*/

  .features .grid-list{
    grid-template-columns: repeat(3, 1fr);
  }

  /*FAQ*/

  .faq .custom-container{
    
  }
}