@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Lato&family=Poppins&display=swap');

.navbar .nav-item:hover 
{
    background-color: #428103;
}
.navbar .nav-item:hover .nav-link
{
    color: white;
}
.navbar .navbar-toggler 
{
    border: none;
}


/* swiper */

.myswiper  {

    width: 100%;
    height: 100;
    --swiper-pagination-color: white;
    --swiper-navigation-color: white;
    --swiper-navigation-size: 25px;

  }

  .myswiper swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 800px;
  }

  .myswiper swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .myswiper swiper-slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
  }

  .myswiper swiper-slide .absbtn button
  {
    background-color: rgba(255, 255, 255, 0.923);
    padding: 10px;
    border: none;
    color: #000000;
    font-size: 16px;
  }
  .myswiper swiper-slide .swipe-cap h1
  {
    font-size: 45px;
    color: white;
  }

  .myswiper swiper-slide .sub-ttl
  {
    background: #ffffff;
    border-radius: 8px;
    padding: 8px;
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 13px;
 }


 /* about */


 .about 
 {
   font-family: 'Lato', sans-serif;
 }

 .about #welcome 
 {
   color: #5cac6c;
 }
 .about h3 
 {
   color: #386641;
   font-weight: bold;
 }
 .about #abt-cont 
 {
   color: rgb(63, 63, 63);
 }
 .about button 
 {
   background-color: #386641 ;
   border: none;   
   padding: 8px;
   color: white;
 }
 .about img 
 {
   max-width: 300px;
 }

 /* services */


 .services 
  {
    font-family: 'Lato', sans-serif;
    background-color: #70e00032;
  }
  .services .ser-item 
  {
    background-color: white;
    padding: 10px;
    width: 300px;
    text-align: center;
  }
  .services .ser-item h4
  {
    color: #386641 ;
  }
  .services .ser-item hr 
  {
    border-style: dotted;
  }
  .services .ser-item p, .bank p, .enquiry #cap {
    color: #777777;
  }
  .services .ser-item button 
  {
    background-color:transparent ;
    border: 1px solid #386641 ;   
    padding: 8px;
    color: #386641 ;
  }

  /* portfolio */

  .portfolio 
  {
    font-family: 'Lato', sans-serif;
  }

  .portfolio .port-item 
  {
    width: 300px;
    padding: 10px;
    border-radius: 4px;
  }

  .portfolio #p1 
  {
    background-color: #386641;
    color: white;
  }
  .portfolio #p2
  {
    background-color: #6a994e;
    color: white;
  }
  .portfolio #p3
  {
    background-color: #a7c957;
    color: white;
  }
  .portfolio #p4 
  {
    background-color: #bc4749;
    color: white;
  }


  /* projects */

  .projects
  {
    font-family: 'Lato', sans-serif;
  }


  .projects p 
  {
    color: rgb(63, 63, 63);
  }
  .projects .p-item img,.projects .p-item video
  {
    width: 300px;
  }
  
  .projects button 
  {
    color: rgb(0, 0, 0);
    border: 1px solid;
    background-color: transparent; 
    padding: 8px;
  }

  /* cont-bg */

  .cont-bg 
  {
    background-image: url(cont-bg.jpg);
    background-size:cover;
    background-position: center;
  }

  .cont-bg h3 
  {
    color: white;
    font-family: 'Lato', sans-serif;
  }
  .cont-bg p
  {
    color: white;
    font-family: 'Lato', sans-serif;
  }
  .cont-bg button 
  {

    background-color: #61c002;
    color: white;
    padding: 8px;
    border: none;
  }
  

  
  /* choose */

  .choose 
  {
    font-family: 'Lato', sans-serif;
    background-color: #70e00032;

  }

  .choose .choose-title span
  {
    color:#386641 ;
  }
  
  .choose .chose 
  {
    width: 18rem;
    text-align: center;
    background-color: white;
    padding: 12px;
  } 
  .choose .chose p 
  {
    color: #777777;
  }
  .choose .chose button 
  {
    background-color: transparent;
    border: 1px solid;
    padding: 8px;
  }
  .choose .chose hr 
  {
    border-style: dotted;
  }


  /* contact */

  .enquiry
  {
    font-family: 'Lato', sans-serif;
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #ffffff00;
   border-radius: 20px;
    position: relative;
  }
  
  .title {
    font-size: 28px;
    background-color: #386641;
    padding: 10px;
    color:white;
    font-weight: 600;
    letter-spacing: -1px;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 30px;
    border-radius: 8px;
  }
  
  .title::before,.title::after {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    border-radius: 50%;
    left: 5px;
    background-color: #ffffff;
    padding: 5px;
  }
  
  .title::before {
    width: 18px;
    height: 18px;
    background-color: #d7d9d8;
  }
  
  .title::after {
    width: 18px;
    height: 18px;
    animation: pulse 1s linear infinite;
  }
  .flex {
    display: flex;
    width: 100%;
    gap: 6px;
  }
  
  .form label {
    position: relative;
  }
  
  .form label .input {
    width: 100%;
    padding: 10px 10px 20px 10px;
    outline: 0;
    border: 1px solid rgba(105, 105, 105, 0.397);
    border-radius: 10px;
  }
  
  .form label .input + span {
    position: absolute;
    left: 10px;
    top: 15px;
    color: grey;
    font-size: 0.9em;
    cursor: text;
    transition: 0.3s ease;
  }
  
  .form label .input:placeholder-shown + span {
    top: 15px;
    font-size: 0.9em;
  }
  
  .form label .input:focus + span,.form label .input:valid + span {
    top: 30px;
    font-size: 0.7em;
    font-weight: 600;
  }
  
  .form label .input:valid + span {
    color: green;
  }
  
  .submit {
    border: 1px solid black;
    outline: none;
    padding: 10px;
    background-color: transparent;
    border-radius: 10px;
    color: #000000;
    font-size: 16px;
    transform: .3s ease;
  }
  
  .submit:hover {
    background-color: rgb(46, 184, 0);
    border:none;
  }

  /* contact */

  .footer 
  {
    background-color: #386641;
    padding: 5px;
    color: white;
    font-family: 'Lato', sans-serif;
    overflow-x: hidden;
  }

  .footer h4 
  {
    font-weight: bold;
  }

  .footer li, .footer li a, .footer p 
  {
    color: rgb(212, 208, 208);
    text-decoration: none;
    font-size: 15px;

  }

  
.footer .social-icons li
{
    padding: 15px;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer .social-icons li a 
{
  color:#345e3c;
  font-size: 20px;
}



@media (max-width:767px) {
    
    .myswiper swiper-slide 
    {
        height: 100%;
    }

    .myswiper swiper-slide .swipe-cap h1
    {
        font-size: 6dvw;
    }

  }

  @media (min-width:767px ) and (max-width:991px)
  {
    .projects .p-item img, .projects .p-item video 
  {
    width: 320px;
  }
  }

  @media (max-width:991px)
{

  .navbar .offcanvas
{
background-color: #ffffff;
border-left: 1px solid rgb(255, 255, 255);

}

.navbar .offcanvas-body .nav-item 
{
    background-color: #428103;
    padding: 8px;
    margin: 5px;
    border-radius: 5px;
}

.navbar .offcanvas-body .nav-item .nav-link 
{
color: rgb(255, 255, 255);
font-weight: bold;
display: inline-block;
}
 
}







   /* sep-abt */

   .sep-abt 
   {
     font-family: 'Lato', sans-serif;
   }
 
   .sep-abt .cont h4 
   {
     font-weight: bold;
   }
   .sep-abt .cont p
   {
     color: #666565;
   }
   .sep-abt .cont li 
   {
    color: #386641;
    font-weight: bold;
   }
   .sep-abt #f-cont 
   {
     color: rgb(1, 13, 83);
  
   }
 
   .sep-abt #f-cont p 
   {
     color: rgb(224, 221, 221);
   }
 
   .sep-abt #f-cont button 
   {
     background-color: #03045e;
     padding: 8px;
     border: none;
     color: white;
   }