/* =========================
   HERO SECTION
========================= */

section .hero-section{
    position:relative;
    background-image: linear-gradient(to right, rgb(243, 234, 218), rgb(152, 152, 147), rgb(173, 236, 173));    background-size:cover;
    background-position:center;
    justify-content: space-between;
}

  .hero-section{
     padding-top: 60px;
    min-height:90vh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:linear-gradient(to right,#f9efe4,#d9f0d8);
    overflow:hidden;
}
.box{
    justify-content: center;
}
.banner-content{
    width: 100%;
    position: relative;
    justify-content: space-around;
    color:black;
    animation: fadeIn 3s ease;
  }
  
.main-content h1{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    width: 100%;
    font-size:70px;
}
.main-content h2{
   font-size:30px;
    padding-top: 25px;
}
.main-content p{
    font-size:20px;
    width: 100%;
    line-height:1.9;
    padding-top: 20px;
    font-family: 'Times New Roman', Times, serif;

}
.hero-buttons{
    padding-top: 60px;
    justify-content: center;
    display:flex;
    gap:65px;
}
.btn{
    padding:14px 80px;
    text-decoration:none;
    border-radius:6px;
}


 .btn-secondary{
    background-color:#1d6b46;
    color: white;
}
.img-section{
    flex:1;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
}
.img-section img{
    width:100%;
    max-width:860px;     /* Increase image size */
    height:auto;
    display:block;
}
/*.............Responsiveness..............*/

@media (max-width:1440px){
    .banner-content{
    padding: 25px 35px;
  }
}
@media (max-width:1024px){
    .hero-section{
     padding-top: 60px;
    min-height:65vh;
}
    .banner-content{
    padding: 15px 10px;
  }   
  .main-content h1{
    width: 100%;
    font-size:65px;
}

   
}
@media (max-width:920px){
     section{
        width: 100%;
    }
    .hero-section{
     padding-top: 60px;
    min-height:60vh;
}
  section .hero-section{
    padding-top: 45px;
    position:relative;
    
}

  .hero-section{
    
    min-height:60vh;
    display:flex;
    align-items:right;
}
.box{
    justify-content: center;
}
.banner-content{
    width: 100%;
    position: relative;
    padding: 10px 0px 0px 10px;
    justify-content: space-around;
    color:black;
    animation: fadeIn 3s ease;
  }
 
.main-content h1{
    width: 100%;
    font-size:65px;
}
.main-content h2{
   font-size:22px;
    padding-top: 25px;
}
.main-content p{
    font-size:18px;
    width: 100%;
    line-height:1.9;
    padding-top: 15px;

}
.hero-buttons{
    padding-top: 50px;
    justify-content: center;
    display:flex;
    gap:30px;
}
div .btn{
    padding:10px 50px;
    text-decoration:none;
    border-radius:5px;
}


div .btn-secondary{
    background-color:#1d6b46;
    color: white;
}
.img-section{
    flex:1;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
}
.img-section img{
    width:100%;
    max-width:820px;     /* Increase image size */
    height:auto;
    display:block;
}
}

@media (max-width:768px){
     section{
        width: 100%;
    }
  section .hero-section{
    padding-top: 45px;
    position:relative;
    
}

  .hero-section{
    
    min-height:60vh;
    display:flex;
    align-items:right;
}
.box{
    justify-content: center;
}
.banner-content{
    width: 100%;
    position: relative;
    padding: 10px 0px 0px 10px;
    justify-content: space-around;
    color:black;
    animation: fadeIn 3s ease;
  }
 
.main-content h1{
    width: 100%;
    font-size:60px;
}
.main-content h2{
   font-size:20px;
    padding-top: 25px;
}
.main-content p{
    font-size:14px;
    width: 100%;
    line-height:1.9;
    padding-top: 15px;

}
.hero-buttons{
    padding-top: 50px;
    justify-content: center;
    display:flex;
    gap:30px;
}
div .btn{
    padding:10px 50px;
    text-decoration:none;
    border-radius:5px;
}


div .btn-secondary{
    background-color:#1d6b46;
    color: white;
}
.img-section{
    flex:1;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
}
.img-section img{
    width:100%;
    max-width:820px;     /* Increase image size */
    height:auto;
    display:block;
}
}

@media (max-width:425px){

  .hero-section{
    min-height:60vh;
    }
    
.banner-content{
    
    padding: 45px 5px;
    justify-content: space-around;
    color:black;
    animation: fadeIn 3s ease;
  }

.site_heading{
    display: none;
}
.main-content h2{
   font-size:22px;
    padding-top: 10px;
}
.main-content p{
    font-size:16px;
    line-height:1.7;
    padding-top: 15px;

}
.hero-buttons{
    justify-content: center;
    display:flex;
    font-size: 13px;
}
.img-section{
    flex:1;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
}
.img-section img{    
    max-height: 100%;
    /* Increase image size */
    display:block;
}

}

@media (max-width:380px){
    section{
        width: 100%;
    }

  .hero-section{
    min-height:60vh;
    display:flex;
    align-items:right;
}

.banner-content{
    position: relative;
    padding: 16px 1px;
    justify-content: space-around;
    color:black;
    animation: fadeIn 3s ease;
  }
  

.site_heading{
    display: none;
}
.main-content h2{
   font-size:20px;
    padding-top: 25px;
}
.main-content p{
    font-size:14px;

    line-height:1.9;
    padding-top: 15px;

}
.hero-buttons{
    padding-top: 50px;
    justify-content: center;
    display:flex;
    gap:30px;
}
div .btn{
    padding:10px 50px;
    text-decoration:none;
    border-radius:5px;
}


div .btn-secondary{
    background-color:#1d6b46;
    color: white;
}
.img-section{
    flex:1;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
}
.img-section img{
    width:100%;
    max-width:720px;     /* Increase image size */
    height:auto;
    display:block;
}
}

@media (max-width:320px){
    section{
        width: 100%;
    }

  .hero-section{
    min-height:50vh;
    display:flex;
    align-items:right;
}

.banner-content{
    position: relative;
    padding: 16px 1px;
    justify-content: space-around;
    color:black;
    animation: fadeIn 3s ease;
  }
  

.site_heading{
    display: none;
}
.main-content h2{
   font-size:20px;
    padding-top: 25px;
}
.main-content p{
    font-size:14px;

    line-height:1.9;
    padding-top: 15px;

}
.hero-buttons{
    padding-top: 50px;
    justify-content: center;
    display:flex;
    gap:30px;
}
div .btn{
    padding:10px 50px;
    text-decoration:none;
    border-radius:5px;
}


div .btn-secondary{
    background-color:#1d6b46;
    color: white;
}
.img-section{
    flex:1;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
}
.img-section img{
    width:100%;
    max-width:720px;     /* Increase image size */
    height:auto;
    display:block;
}
}