:root {
    --primary:#A9CF46;
    --secondar:#ACACAC;
}
body{
    background-color: #F5F6F8;
}
#hero{
    background-color:white ;
    padding: 0px 50px;
}
#hero img{
    width: 80%;
}
#hero h3{
    font-weight: bold;
    font-size: 40px;
}
#hero h2{
    font-weight: bold;
    font-size: 60px;
    color: var(--primary);
}
   
p{
    color: var(--secondar);
}
.button1{
    background-color: var(--primary);
    padding: 8px 30px;
    color: white;
    border-radius: 10px;
}
.button2{
    background-color: white;
    padding: 8px 30px;
    color: var(--primary);
    border-radius: 10px;
    border: 1px solid var(--primary);
}
#hero img{
    padding: 30px;
}
#about{
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
}
#about h4{
    font-weight: bold;
}
.card1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    height: 250px;
    gap: 20px;
   
}
.card1 p{

color: var(--primary);
text-transform: uppercase;
font-weight: 600;
}
#services{
    margin-top: 40px;
}
#services h3{ 
  text-align: center;
  font-weight: bold; 
  text-transform: uppercase; 
  color: var(--primary);
}
.service_card{
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    height: 300px;
    padding: 20px;
    margin-top: 20px;
}
.service_card h5{
    
    font-weight: bold;
    color: var(--primary);
}
.service_card img{
    height: 60px;
    margin-bottom: 10px;
}
#whyChoose{
    margin-top: 0px;

    padding: 80px 150px;
}
#whyChoose h1{
    font-weight: bolder;
    color: var(--primary);
    font-size: 60px;
    text-transform: uppercase;
}
#whyChoose h5{

 }
#whyChoose p{
   color: var(--secondar);
}
#whyChoose img{
    width: 100%;
 }
 #whatCustomersSay h1{
    font-weight: bolder;
    color: var(--primary);
    font-size: 60px;
    text-transform: uppercase;
 }
 nav{
    background-color: white!important;
    padding: 20px 20px !important;
 }
 section{
    margin-top: 30px;
    padding: 30px 100px;
 }
 .testi{
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    height: 300px;
    padding: 20px;
    margin-top: 20px;
 }
 .testi img{
    margin-bottom: 10px;
 }
 #cta{
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
    height: 400px;
 }
 #cta h1{
    font-size: 40px;
    font-weight: bold;
    color: white;
 }
 #cta p{
    color:white;
 }
 .aboutHero{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    height: 300px;
    padding:40px 100px ;
    background-color: white;
 }
 .aboutHero h1{
    text-transform: uppercase;

    color: var(--primary);
    font-weight: bolder;
    font-size: 50px;
 }
 .aboutHero h3{
    text-transform: uppercase;
    font-weight: bold;

 }
 .servicesHero{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    height: 300px;
    padding:40px 100px ;
    background-color: white;

 }
 .servicesHero h1{
    text-transform: uppercase;

    font-size: 50px;

    color: var(--primary);
    font-weight: bolder;
 }
 .servicesHero h3{
    text-transform: uppercase;
    font-weight: bold;

 }

 #about h1{
    color: var(--primary);
    font-weight: bold;
    text-transform: uppercase;

    font-size: 50px;
 }
 #franchiseBenefits{
    background-color: #A9CF46;
    color: white;
 }
 #franchiseBenefits h1{
    text-transform: uppercase;
margin-bottom: 40px;
    font-size: 50px;

    color: white;
    font-weight: bolder;
 }
 #franchiseBenefits h2{
    text-transform: uppercase;

    font-size: 30px;

    color: white;
    font-weight: bolder;
 }
 #franchiseBenefits p{
   color: #EDEDED;
 }
 .ml40{
    margin-left: -100px;
 }
 
 #cta2{
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #F3F8E5;
    height: 400px;
 }
 #cta2 h1{
    font-size: 40px;
    font-weight: bold;
    color: var(--primary);
 }
 #cta2 p{
    color:#959595;
 }
 .mt-30{
    margin-top: 60px;
 }
 .active{
    color: var(--primary)!important;
    font-weight: bold;
 }
 @media( max-width:500px){
    section{

        padding: 10px 20px;
    }
    h1{
        font-size: 2em!important;

    }
    h2{
        font-size: 1.5em!important;

    }
    p{
        font-size: 1em!important;
        
    }
    #whyChoose {
        
        padding: 80px 20px;
    }
    .aboutHero {
        height: min-content;
        padding: 40px 20px;

    }
    .servicesHero {
        height: min-content;
        padding: 40px 20px;

    }
    .franchiseHero {
        height: min-content;
        padding: 40px 20px;

    }
    
    .ml40{
margin-left: 0px!important;
    }
    #cta2 {
        padding: 10px;
        text-align: center;
    }
    #franchiseBenefits {
        padding: 10px 20px!important;
    }
    .align-column{
        flex-direction: column-reverse;
    }
    #hero{
        height: max-content;
        padding: 20px 20px;
    }
    .gaaap{
        gap: 10px;
    }
 }