:root{
  --c1:#01a65c;
  --y:#f0d62b;
  --c2:red;
  --c3:#494747;
  --c4:#f0d62b90;
  --mix:linear-gradient(90deg, rgba(120,216,255,1) 0%, rgba(105,118,255,1) 40%, rgba(0,61,255,1) 100%);
  /* --c4:#8f2800; */
}
@font-face {
  font-family: lora;
  src: url(../Lora-Regular.ttf);
}

.c1{
  color: var(--c1) !important;
}
.c2{
  color: var(--c2) !important;
}
.c3{
  color: var(--c3) !important;
}
.c4{
  color: var(--c4) !important;
}
/* .c5{
  color: var(--c5) !important;
} */
.w{
  color: #fff !important;
}
.b{
  color: black !important;
}
a{
  text-decoration: none !important;
}
.ls{
  letter-spacing: 1px;
}
.lh{
  line-height: 2rem !important;
}

@font-face {
  font-family: Poppins;
  src: url(../Poppins-Regular.ttf);
}
body{
  margin: 0% !important;
  padding: 0% !important;
  font-family: Poppins !important;
}
*{
  box-sizing: border-box;
}


/* ----------------- navbar --------------------------*/
/* navbar */

.nav-bx{
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.search-btn{
  /* transform: translateX(-150%); */
  background-color: #000 !important;
  color: #FFF !important;
}

.nav-icon{
  width: 40px;
}
.icon-top-count{
  background-color: #ffffff;
  color: #000 !important;
}
/* nav bar */
.navbar{
  transition: all .5s;
  background-color: var(--c4);
  box-shadow: -10px -10px 25px rgba(255,255,255,.08), 10px 10px 25px rgba(0,0,0,.08);
  border-bottom: 2px solid var(--c1);
}
.logo{
  /* width: 180px; */
  height: 60px;
}
.nav-menus {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.newnav{
  position: fixed !important;
  top: 0% !important;
  left: 0%;
  width: 100%;
  z-index: 50;
  background: #ffffff !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  animation: mymove .5s ;
  border-bottom: 1px solid var(--c1);
}
@keyframes mymove {
  0% {
      transform: translateY(-50%);
  }
  100% {
      transform: translatey(0%);
  }
}
.dropdown-item{
  color: black !important;
}

.search-bx{
  width: 40%;
}
.serc-btn{
  background-color: var(--c1) !important;
  color: #fff !important;
}
.nav-item{
  padding: 0px 10px;
}
.nav-link{
  color: var(--c1) !important;
  /* font-weight: bold !important; */
  letter-spacing: 1px;
  /* font-family: Arial, Helvetica, sans-serif !important; */
}
.nav-active{
  color: var(--c2) !important;
  font-weight: bold !important;
}
.nv-icon{
  /* background-color: #ff6f00; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-div img{
  width: 40px;
}
/* .icon-div img{
width: 50px;
} */
.icon-div i{
font-size: 20px;
}
.nv-icon p{
  margin-bottom: 0% !important;
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: unset !important;
}
.dropdown:hover .dropdown-menu {
  transform: scale(1);
  /* background-color: var(--c2); */
}
.dropdown-item{
  background-color: unset !important;
  transition: all .5s;
  font-size: 14px;
  color: var(--c4) !important;
  /* font-family: Arial, Helvetica, sans-serif !important; */
}
.dropdown-item i{
  margin-right: 6px;

}
.dropdown-item:hover{
  transform: translateX(10px);
  transition: all .5s;
}
@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}
.animate {
  animation-duration: 1s;
  -webkit-animation-duration:1s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
.btn-search{
  background-color: var(--c2) !important;
  
}
.nav-gift{
  width: 20px;
}

/* mukulathor top section */
.first-sec{
  background-color: #f6f6f6;
}
.g{
  background: #01A65C !important;
background: linear-gradient(to right, #01A65C 0%, #F0D72B 58%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.heading{
  font-size: 25px;
  font-weight: bold;
  background: #01A65C;
background: linear-gradient(to right, #01A65C 0%, #F0D72B 58%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.txt-type{
  font-size: 25px;
  font-weight: bold;
  color: var(--c1);
  height: 40px;
}
.ac{
  color: var(--c2) !important;
}
.new-head{
  font-size: 18px;
}
.d-100{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* தோற்றம்  */
.line-txt-bx{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.line{
  width: 10%;
}
.sm-heading{
  font-size: 30px;
  font-weight: bold;
  background: #01A65C;
background: linear-gradient(to right, #01A65C 0%, #F0D72B 58%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.ab-side{
  /* display: flex !important;
  justify-content: center;
  align-items: center; */
  position: relative;
}
.ab-side img{
  height: 280px;
  width: 300px;
  background-color: #fff;
  padding: 2%;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.ab1{
  position: absolute;
  top: 20%;
  left: 0%;
  /* height: 200px;
  width: 250px; */
  object-fit: cover;
  z-index: 4;
  animation-name: floatinglrr;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.ab2{
  position: absolute;
  top: 0%;
  left: 30%;
  /* height: 200px;
  width: 250px; */
  object-fit: cover;
  z-index: 3;
  animation-name: floatingup;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.ab3{
  position: absolute;
  top: 30%;
  right: 0%;
  /* height: 200px;
  width: 250px; */
  object-fit: cover;
  z-index: 1;
  animation-name: floatinglrr;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.ab4{
  position: absolute;
  bottom: 0%;
  left: 30%;
  /* height: 200px;
  width: 250px; */
  object-fit: cover;
  z-index: 2;
  animation-name: floatingup;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floatinglrr {
  0% { transform: translateX(0%); }
  /* 50%  { transform: translateX(0%); } */
  50%   { transform: translateX(15%); }  
  100% { transform: translateX(0%); }  
}
.floating-up {  
  animation-name: floatingup;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-left: 30px;
  margin-top: 5px;
}

@keyframes floatingup {
  0% { transform: translateY(0%); }
  /* 50%  { transform: translateX(0%); } */
  50%   { transform: translateY(15%); }  
  100% { transform: translateY(0%); }  
}

/* team */
.team{
  /* background: rgb(15, 15, 15,.8); */
  position: relative;
/* background: linear-gradient(180deg, rgba(255,255,255,0.9136904761904762) 24%, rgba(0,0,0,0.571953781512605) 100%); */
background: rgb(1,166,92);
background: linear-gradient(90deg, rgba(1,166,92,0.7848389355742297) 24%, rgba(240,214,43,0.7848389355742297) 100%);
}
.team::after{
  content: '';
  background-image: url(../images/crowd.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0%;
  z-index: -1;
}
.team-crd{
  width: 100%;
  height: 450px;
  overflow: hidden;
  position: relative;
  background-color: #FFF;
}
.team-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .5s;
}
.team-crd:hover .team-img{
  transform: scale(1.1);
  transition: all .5s;
}
.name-team{
  position: absolute;
  bottom: 0%;
  /* background-color: var(--c1); */
  background-color: rgb(0, 0, 0,0.8);
  /* color: var(--c4); */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}
.team-h{
  color: var(--c2) !important;
}
.name{
  /* font-size: 14px; */
  color: var(--y);
}
.post{
  font-size: 12px;
  color: var(--y);
}

/* mukulathor cards */
.mk-card{
  width: 100%;
  position: relative;
  background-color: #fff;
  /* background-color: var(--c4); */
  /* background: rgb(1,166,92);
background: linear-gradient(180deg, rgba(1,166,92,0.7848389355742297) 24%, rgba(240,214,43,0.7848389355742297) 100%); */
}
.mk-img{
  width: 25%;
  /* height: 100px; */
  object-fit: cover;
  position: absolute;
  top: -15%;
  left: -3%;
  border-right: 5px solid #ffff;
  border-bottom: 5px solid #ffff;
}
.floating {  
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  from { transform: translate(0,  0px); }
  65%  { transform: translate(0, 15px); }
  to   { transform: translate(0, -0px); }    
}
.mt-title-bx{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 150px;
  /* background-color: #000; */
}
.mk-main{
  min-height: 450px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.go-btn{
  background-color: var(--c2) !important;
  color: #FFF !important;
  border-radius: 0% !important;
}

/* படங்கள் */
  .sim-pro{
    position: relative;
  }
  .owl-nav{
    width: 102% !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 40%;
    left: -1%;
  }
  .sim-arrow{
    background-color: var(--c1) !important;
    border:2px solid #fff ;
    border-radius: 50% !important;
    height: 35px;
    width: 35px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    transition: all 1s !important;
  }
  
  /* .sim-pro:hover .sim-arrow{
    transform: scale(1.3);
    transition: all 1s !important;
  } */
  .sim-card .name{
    width: 80%;
  }
  .isim-btn{
    background-color: var(--c1) !important;
    color: #fff !important;
    font-weight: 500 !important;
  }
  .sim-img{
    display: flex;
    justify-content: center;
    align-items: center;
  }
.hg-img{
  width: 100%;
  height: 300px;
  object-fit: cover;
}
/* --- footer ---- */
.footer{
  background-color: var(--c1);
}
.f-logo{
  width: 40%;
}
.f-bx1{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.f-head{
  color: var(--y);
  font-weight: bold;
  letter-spacing: 1px;
}
.f-p{
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
}
.fbx{
  display: flex;
  align-items: flex-start;
}
.f-icon{
  width: 26px;
}
.end-footer{
  background-color: #02361f;
}
/* அகமுடையார்  page*/
.hero2{
  background-color: #f6f6f6;
}
.hero-head2{
  font-size: 35px;
  font-weight: bold;
  /* color: var(--mix); */
  background: #01A65C !important;
  background: linear-gradient(to right, #01A65C 0%, #F0D72B 28%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.agam-box{
  border: 1px solid var(--c1);
  min-height: 435px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.agam-box li{
  font-size: 14px;
}

/* gallery section */
.gal-box{
  width: 100%;
  height: 310px;
  overflow: hidden;
  position: relative;
  transition: all .5s;
}
.gal-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.g-ov-lay{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 110%;
  background-color: #00000096;
  transition: all .5s;
}
.clik-zoom{
  color: #fff;
}
.gal-box:hover .g-ov-lay{
  top: 0%;
  transition: all .5s;
}
/* ul{
  list-style-image: url('../images/kedayam.png');
} */
.title-img{
  width: 30px;
}
/* --------------------------contact page ----------------------- */
.con-box {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.con-box img {
  width: 40px;
}
.con-right {
  background-color: #fff;
  box-shadow: -10px -10px 25px rgba(255, 255, 255, 0.08),
    10px 10px 25px rgba(0, 0, 0, 0.08);
}
.chat {
  width: 50px;
}
.area-text {
  background-color: #f6f6f6 !important;
}
.btn-primary {
  background-color: var(--c1) !important;
  color: #fff !important;
}

.oter-top .navbar{
  background-color: #000 !important;
}
/* .whats-app-click{
  font-size: 28px;
} */
.click-box{
  background-color: #000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  width: 80px;
}
.click-box p{
  font-size: 13px;
  color: #fff;
}
.click-box i{
  color: #fff;
  font-size: 28px;
}
.detai-box{
  display: flex;
  align-items: center;
align-items: center;
}
.detail-img-box{
  display: flex;
  align-items: center;
}
.detail-img-box img{
  width: 20px;
}
.side-txt{
  font-size: 15px;
}
.left-d{
  width: 100px;
}
.bg-f6{
  background-color: #f6f6f6;
}

/* --- contact page -------- */
.con-img{
  height: 100%;
  object-fit: contain;
}
.con-frm input::placeholder {
  font-size: 12px; /* Adjust the font size as needed */
  color: #888; /* Optional: Change the color of the placeholder text */
}
  /* --------------------------------------make it responsive------------------------ */
  @media screen and (max-width:1300px) {
    .mt-title-bx {
      height: 117px;
    }
    .mk-main {
      min-height: 444px;
  }
  .nav-link{
    font-size: 12px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  }
@media screen and (max-width:1025px) {
          /* navbar */
          .top-nav-one{
            display: none;
        }
        .menu {
          width: 42px;
      }
        /* .logo{
            width: 77px;
        } */
        .logo {
          /* width: 180px; */
          height: 51px;
      }
      .nav-link{
        font-size: 12px !important;
      }
        .nav-menus {
            display:flex;
            align-items: unset !important;
            justify-content: unset;
    
        }
        /* .nav-link{
            color: #000 !important;
        } */
        .offcanvas{
            width: 80% !important;
        }
        .dropdown-item {
          white-space: unset !important;
          font-size: 12px;
        }
    
        .menu{
          width: 52px;
        }
        .offcanvas-header{
          background-color: var(--c2);
        }

        /* தோற்றம்  */
        .s-p{
          font-size: 13px;
          text-align: justify;
          hyphens: auto;
          -webkit-hyphens: auto;
          word-spacing: -0.05em;
        }

}

@media (min-width:920px) and (max-width:1030px) {
  body{
    overflow-x: hidden !important;
  }
p{
  font-size: 13px;
}
.mt-title-bx {
  height: 90px;
  /* background-color: #000; */
}
.mk-main {
  min-height: 362px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.navbar .btn-success{
  font-size: 12px !important;
}

}

  @media screen and (max-width:920px) {
    html,body{
      overflow-x: hidden;
      width: 100vw !important;

    }
    .sm-js{
      text-align: justify !important;
    }
        /* navbar */
        .top-nav-one{
          display: none;
      }
      .s-p{
        font-size: 15px;

      }
      .menu {
        width: 42px;
    }
      /* .logo{
          width: 77px;
      } */
      .nav-menus {
          display:flex;
          align-items: unset !important;
          justify-content: unset;
  
      }
      .nav-link{
          color: #000 !important;
      }
      .ac{
        color: var(--c2) !important;
      }
      .offcanvas{
          width: 80% !important;
      }
      .dropdown-item {
        white-space: unset !important;
        font-size: 12px;
      }
  
      .menu{
        width: 52px;
      }
      .offcanvas-header{
        background-color: var(--y);
      }

    .sm-heading{
      text-align: center;
    }

        /* about */
        .ab-side{
          height: 470px;
          width: 100% !important;
          overflow: hidden;
          margin-top: 15% !important;
        }
        .ab1{
          animation-name: unset;
        }
        .ab2{
          animation-name: unset;
        }
        .ab3{
          animation-name: unset;
        }
        .ab4{
          animation-name: unset;
          left: 17%;
        }

    /* footer */
    .f-bx1{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .f-head {
      color: var(--y);
      font-weight: bold;
      letter-spacing: 1px;
      font-size: 22px;
  }

  .mk-main {
    min-height: 381px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.mk-img {
  width: 22%;
}
  }

  @media screen and (max-width:720px) {

  }

  @media screen and (max-width:660px) {
/* fisrt section */
.heading{
  font-size: 20px;
}
.line {
  width: 17%;
}
.sm-p{
  font-size: 18px;
}
/* footer */
.f-bx2{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.f-p{
  font-size: 12px;
}

.ab-side img {
  height: 202px;
  width: 50%;
  background-color: #fff;
  padding: 2%;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}


.mt-title-bx {
  height: 96px;
}
.mk-img {
width: 30%;
  top: -12%;
}
.mt-title-bx h3{
  font-size: 20px;
}

}




  @media screen and (max-width:380px) {
    .f-p{
      font-size: 11px;
    }
    .mt-title-bx {
      height: 73px;
    
    }

  }

  @media screen and (max-width:320px) {

}

  @media screen and (min-width:321px) and (max-width:425px) {

}

