:root {

  /* Colors */
  --red-crayola: hsl(341, 100%, 49%);
  --eerie-black: hsl(240, 6%, 10%);
  --light-gray: hsl(0, 0%, 80%);
  --cultured-2: hsl(210, 60%, 98%);
  --black_10: hsla(0, 0%, 0%, 0.1);
  --black_5: hsla(0, 0%, 0%, 0.05);
  --white-1: hsl(0, 0%, 100%);
  --white-2: hsl(0, 14%, 98%);

  /* Accent (used in logo & nav hover) */
  --accent: #54c758;

  /* Greens (actually used in buttons, labels, etc.) */
  --green-primary: #4CAF50;
  --green-dark: #388E3C;
  --green-light: #81C784;
  --green-deep: #2E7D32;

  /* Typography */
  --ff-roboto: 'Roboto', sans-serif;
  --ff-league-spartan: 'League Spartan', sans-serif;

  --fs-1: 3.5rem;
  --fs-2: 3rem;
  --fs-3: 2.1rem;
  --fs-6: 1.3rem;

  --fw-700: 700;

  /* Spacing */
  --section-padding: 60px;

  /* Shadow */
  --shadow-1: 0 6px 24px var(--black_5);

  /* Border Radius */
  --radius-2: 2px;
  --radius-5: 5px;

  /* Transition */
  --transition-1: 0.25s ease;

}




/* ----------------RESET-------------- */


*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


li { list-style: none;}

a { text-decoration:none;
    color: inherit;}

a,img,span,time,label,input,button,textarea,ion-icon{
    display: block;
}

img {
    height: auto;
}

input,button,textarea{
    background: none;
    border: none;
    font: inherit;

}

input, textarea {
    width: 100%;
}

button {
    cursor: pointer;
}

ion-icon{
    pointer-events: none;
}

address {
    font-style: none;
}

html {
    font-family: var(--ff-roboto);
    font-size: 10px;
    scroll-behavior: smooth;
}

body {
    background-color:  var(--white-1);
    color: var(--gray-web) ;
    font-size: 1.6rem;
    line-height: 1.8;
   
}

 ::-webkit-scrollbar{ width: 10px;}


 ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%);}

 ::-webkit-scrollbar-thumb{
    background-color: hsl(0, 0%, 80%);
 }
 ::-webkit-scrollbar-thumb:hover{
    background-color: hsl(0, 0%, 70%);
 }

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

 

 
 
 
 /* ---------------- REUSED--------------- */

 .container {
    padding-inline: 15px;
 }

 .btn {
    max-width: max-content;
    color: var(--white-1);
    font-size: var(--fs-6);
    font-weight: var(--fw-700);
    padding: 10px 30px;
    border-radius: var(--radius-5);
    transition: var(--transition-1);
    background-color: var(--green-primary);

 }
 


 .btn-primary{
    /* background-color: var(--green-primary); */
    background-size: 1000%;
 }

 .btn-primary:is(:hover, :focus) {
    background-position: bottom right;
 }

 .btn-secondary {
    background-color: var(--white-1);
    color: var(--eerie-black);

 }


 .btn-secondary:is(:hover, :focus){
    background-color: var(--eerie-black);
    color: var(--white-1); 
 }


 .section{
    padding-block: var(--section-padding);
 }

 .h1,.h2,.h3{
    color: var(--green-dark);
    font-family: var(--ff-league-spartan);
    line-height: 1.2;
 }

 .h1{
    font-size: var(--fs-1);
 }
 .h2{
    font-size: var(--fs-2);
 }
 .h3{
    font-size: var(--fs-3);
 }

 

 .w-100{
    width: 100%;
 }



 .section-title,
 .section-text{text-align: center;}

 .section-text{font-size: var(--fs-6);}

 .grid-list{
    display: grid;
    gap:30px;
 }

 .img-holder{
    aspect-ratio: var(--width)/var(--height);
    background-color: var(--light-gray);
 }

 .img-cover{
    width: 100%;
    height: 100%;
    object-fit: cover;
 }


 











  


/*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/





.contact{background-color: var(--white-2);}

.contact .section-text {margin-block: 5px 35px;}

.contact-form{
    background-color: var(--white-1);
    padding: 20px;
    border-radius: var(--radius-2);
    margin-block-end: 30px;
    box-shadow: var(--shadow-1);

}

.input-field {
    background-color: var(--white-2);
    color: var(--eerie-black);
    font-size: 15px;
    padding: 15px;
    border-radius: var(--radius-2);
    outline: 1px solid transparent;
    outline-offset: 0;
    margin-block-end: 15px;
}

.input-field::-webkit-inner-spin-button{display: none;}

.input-field:focus{outline-color: var(--red-crayola);}

.input-field::placeholder{ transition: var(--transition-1);}

.input-field:focus::placeholder { opacity: 0;}

textarea.input-field {
    resize: vertical;
    min-height: 80px;
    height: 100px;
    max-height: 200px;
    overscroll-behavior: contain;
}

.checkbox {
    width: max-content;
    margin-inline-start: 5px;
    accent-color: var(--green-light);
}

.label-link{
    display: inline-block;
    color: var(--green-deep);
}

.label-link:is(:hover, :focus){text-decoration: underline;}


.checkbox-wrapper{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-block-end: 15px;

}


.contact-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 25px;

}

.contact-item{
    min-width: 100%;
}

.contact-card{
    background-color:var(--white-1) ;
    padding: 20px;
    border-radius: var(--radius-2) ;
    box-shadow: var(--shadow-1);
    display: flex;
    align-items: flex-start;
    gap: 15px;
}


.contact-card .card-icon{
    background-color: var(--cultured-2);
    color: var(--red-crayola);
    font-size: 25px;
    padding: 13px;
    border-radius: 50%;
    transition:var(--transition-1) ;

}

.contact-card:is(:hover, :focus) .card-icon {
    background-color: var(--red-crayola);
    color: var(--white-1);
}

.contact-card .card-title {
    margin-block-end:5px;
}

.contact-card:is(.card-link, .card-address){
    font-size: var(--fs-6);
    transition: var(--transition-1);
}

.contact-card .card-link:is(:hover, :focus){color: var(--red-crayola);}

 
  

 

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





/*----------- RESPONSIVE LARGER THAN SIZE 575PX SECREEN --------------*/




@media(min-width: 575px){


/*--------- REUSED STYLE ----------*/



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

}



.grid-list{
    grid-template-columns: 1fr 1fr;
    column-gap: 25px;
}

 

/*--------- Contact----------*/

.input-wrapper{
    display: flex;
    gap: 15px;
}

.contact-item{ min-width: calc(50% - 18px);}







}




 


/*----------- RESPONSIVE LARGER THAN SIZE 768PX SECREEN --------------*/




@media(min-width: 768px){


    /*--------- Custome Property ---------*/
    
    
    
    :root {
        
        /*--------- Typography ---------*/


        --fs-1: 4.5rem;
        --fs-2: 3.7rem;
        --fs-3: 2.3rem;
        --fs-4: 1.8rem;
        --fs-5: 1.5rem;
        --fs-6: 1.4rem;

    }
    
 

    .container{ max-width: 720px;}


    .section-text{
        max-width: 65ch;
        margin-inline: auto;
    }

 

    .contact-form{padding: 30px;}

    .contact-item { min-width: calc(50% - 12.5px);}
    
}







/*----------- RESPONSIVE LARGER THAN SIZE 992PX SECREEN --------------*/




@media(min-width: 992px){


    /*--------- Custome Property ---------*/
    
    
    
    :root {
        
        /*--------- Typography ---------*/


        --fs-1: 5rem;
        --fs-2: 4rem;
        --fs-3: 2.5rem;
        

    
    
        /*--------- Spacing  ---------*/

     --section-padding: 100px;


    }





   /*--------- RESUED ---------*/

    .container{ max-width: 960px;}


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

    
   /*---------  Contact  ------------  */

   .checkbox-wrapper {margin-block: 20px;}

   .contact-item{min-width: calc(33.33% - 16.66px);}

   .contact-card{padding: 30px;}

   .contact-card.card-icon{ font-size: 32px;}

}

 
/*----------- RESPONSIVE LARGER THAN SIZE 1200PX SECREEN --------------*/




@media(min-width: 1200px) {

     /*--------- Custome Property ---------*/
    
    
    
     :root {
        
        /*--------- Typography ---------*/


        --fs-1: 6.8rem;
        --fs-2: 4.5rem;
        --fs-4: 1.9rem;
        --fs-5: 1.6rem;
        --fs-6: 1.6rem;
 

    }



   /*--------- RESUED ---------*/

   .container{ max-width: 1140px;}

    .btn{ --fs-6: 1.5rem;}
 

    /* ------ CONTACT -------- */

    .contact-form { padding: 50px;}


    .contact-card { gap: 20px;}

    .contact-card .card-icon{ padding: 15px;}


}