@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/*COMMON CSS==================================================*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
html {font-size: 10px;width: 100%;height: 100%;overflow-x: hidden;}
body {
  height: 100%;width: 100%;  font-family: "Inter", serif;  color: #006d6d ;font-size: 1.6rem; background-image: url(../images/body-bg1.png);
background-repeat:no-repeat; background-size: contain; background-position: top; background-color: rgba(241, 240, 246, 1);}

body, html, div, p, span, ul, li, ol, a, img, label, form, iframe, i, h1, h2, h3, h4, h5, h6 {
  margin: 0px;padding: 0px;outline: 0px;border: 0px;text-decoration: none;list-style-type: none;
}
body.home{background-image: url(../images/body-bg.png); background-repeat:no-repeat; background-size: contain; background-position: top;}


/*--------------------*/
a {
 -webkit-transition: all ease-in-out 0.3s;-o-transition: all ease-in-out 0.3s;transition: all ease-in-out 0.3s;display: inline-block;
}


h1,h2,h3,h4,h5,h6 {
  display: inline-block;width: 100%;font-weight: 500; line-height: normal;padding: 0 ;width: 100%;color: black;
} 
h1{ font-size: 6rem;}
h2{font-size: 3.2rem;}
h3{font-size: 2.4rem;line-height: 2.8rem;}
h4{font-size: 2rem;}
h5{font-size: 1.8rem;line-height:2.4rem;}
h6{font-size: 1.4rem;}
p{margin-bottom: 15px;padding: 0;font-size: 1.5rem;width: 100%; line-height: 2.2rem; font-weight: 300;color: black;}
a{display: inline-block; cursor: pointer;}
/*--------------------*/


label {
  display: inline-block;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 10px;
  text-transform: capitalize;
}

a.button, input.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: "Inter", serif;
  background: linear-gradient(to right, teal, #00796b, #004d40);
  color: #ffffff;
  cursor: pointer;

  transition: all ease-in-out 0.3s;
  text-align: center;
  border-radius: 4px;
  border: 0px ;
padding: 8px 18px;border-radius: 20px;text-decoration: none;font-size: 14px;font-weight: bold;
}
a.button:hover, input.button:hover{background-color: transparent; border-color:teal ;}
input[type='text'],
div.select-box,
div.select-box select,
input[type='password'],
input[type='email'],
input[type='search'],
input[type='number'],
textarea {
  width: 100%;
  font-size: 1.4rem;
  line-height: 2rem;
  color: rgba(57, 57, 63, 0.6);
  padding: 12px 15px;
  resize: none;
  background-color: #F1F0F6;
  -webkit-transition: all ease-in-out 0.3s;
  -o-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
  outline: none;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  border: 0px solid #D0D5DD;
  border-radius: 8px;
  margin: 0;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  transform: scale(1);
  -webkit-transform: scale(1);
}

input[type='text']+p,
div.select-box+p,
input[type='password']+p,
input[type='email']+p,
input[type='number']+p,
textarea+p {
  margin: 6px 0 0;
}

input[type='search'] {
  padding-left: 45px;
  /* background-image: url(../images/icons/search-icon.svg); */
  background-size: 20px;
  background-position: 15px center;
  background-repeat: no-repeat;
}

::placeholder {
  color: rgba(57, 57, 63, 0.6);
  opacity: 1;
}

::-ms-input-placeholder {
  color: rgba(57, 57, 63, 0.6);
}


.disabled em {
  border-color: #D0D5DD;
}

/*PROGRESS BAR==================================================*/
div.mxdialog,
div#mxloader {position: fixed;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-y: auto;
  scrollbar-width: thin;
  right: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10011;
  background: rgba(0, 0, 0, 0.75);}
div#mxloader {display: block;z-index: 99;}
div#mxmsg {display: none;min-height: 30px;min-width: 100%;padding: 10px;text-align: center;vertical-align: middle;font-size: 2.0rem;color: #ee3c2d;background-color: #FFF;}
div.progress {display: block;width: 100%;height: 1px;margin: 0;padding: 0;position: absolute;top: 50%;background: rgba(0, 0, 0, 0.50);display: none;}
.spinner {width: 100%;height: 100%;background-image: url(../images/loader.svg);background-repeat: no-repeat;background-position: center;font-size: 1.8rem;line-height: 1.8rem;text-align: right;vertical-align: top;color: #dc0000;padding: 3px;}
.spinner div {display: none;}


/*SELECT BOX CSS==================================================*/
div.select-box {
  padding: 0 !important;
  border: 0 !important;
}

div.select-box select {
  appearance: none;
  position: relative;
  z-index: 2;
}


div.select-box::after {
  content: '';
  aspect-ratio: 1;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(0%);
  background-image: url(../images/icons/down-icon.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px;
  z-index: 1;
}

textarea {
  height: 120px;
}

input:-webkit-autofill {
  -webkit-text-fill-color: #667085 !important;
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  box-shadow: 0 0 0 1000px white inset !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #EF258A;
}

form {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}
ul.form-list {
  display: flex;
  flex-flow: row wrap;
  position: relative;
  gap: 0;
  padding: 0;
}

ul.form-list>li {
  margin-bottom: 20px;
  width: 100%;
  position: relative;
  transition: all ease-in-out 0.3s;
}

ul.form-list>li label{display: none;}

/*--------------------*/
/* file upload ---- */
div.mx-file-upload {
 float: left;
    min-width: 100px;
    width: 100%;
    padding: 4px;
    border: 1px solid #edeff4;
    background: #f5f5f5;
    height: 50px;
}

div.mx-file-upload div.drop {
 
  float: right;
    width: 42px;
    height: 42px;
    text-align: center;
    vertical-align: middle;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    background-color: #EF258A;

}

div.mx-file-upload div.drop a {
 float: left;
    width: 100%;
    height: 100%;
    color: transparent !important;
    line-height: 200px;
    padding: 4px;
    cursor: pointer;
    background-image: url(../images/ico-upload-file.png);
    background-repeat: no-repeat;
    background-size: 26px;
    background-position: center center;
    overflow: hidden;
}

div.mx-file-upload div.drop input {
  display: none;
}
div.mx-file-upload ul {
    float: left;
    height: 100%;
    width: calc(100% - 64px);
}
div.mx-file-upload ul li {
    float: left;
    width: 42px;
    height: 42px;
    margin: 0px 6px 8px 0px;
    padding: 0;
    position: relative;
}
a.del.rs {
    width: 15px;
    height: 15px;
    right: -7px;
    top: -7px;
}
a.del.rl, a.del.rs {
    border-radius: 100%;
    -webkit-border-radius: 100%;
    position: absolute;
}
div.mx-file-upload ul li a {
    float: left;
    width: 100%;
    height: 40px;
    overflow: hidden;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    border: 1px solid #790000;
}
/*ERROR MESSAGE==================================================*/
p.e,
label.error {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1.6rem;
  color: #B42318;
  text-align: left;
}

img {
  vertical-align: middle;
}

/* .img-box {
  width: 100%;

} */

.img-box img {
  max-width: 100%;
}

/*COMMON CSS ENDS====================================*/
button {
  -webkit-transition: all ease-in-out 0.3s;
  -o-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}


button:hover,
.btn-light:hover,
.btn:hover,
.btn-outline:hover,
a.btn:hover {
  background: #D6BBFB;
  border-color: #D6BBFB;
  color: #344054;
}

.btn:hover svg path {
  stroke: #344054;
}

.disable {
  opacity: .6;
  cursor: not-allowed;
}


/*MX SCROLLBAR CSS==================================================*/
::-webkit-scrollbar {
  width: 2px;
  height: 1px;
}

::-webkit-scrollbar-track {
  background: #D0D5DD;
}

::-webkit-scrollbar-thumb {
  background: #3a31a0;
  padding: 0px 0px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(16, 24, 40, 0.051);
  background: #D0D5DD;
}

/*MX SCROLLBAR CSS==================================================*/

/*MXDIALOG CSS==================================================*/

div#mxalert,
div.mxdialog,
div.mxpopup {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 49999 !important;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  background-color: rgba(52, 64, 84, 0.7);
  backdrop-filter: blur(16px)
}

div#mxalert div.body,
div.mxdialog div.body,
div.mxpopup div.body {
  max-width: 600px;
  padding: 20px;
  background: #FFFFFF;
  box-shadow: 0px 8px 8px -4px #10182808;
  box-shadow: 0px 20px 24px -4px #10182814;
  border: 0;
  border-radius: 12px;
  text-align: center;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div.mxdialog h2 {
  margin: 0;
  font-size: 1.8rem;
  line-height: 2.6rem;
  margin-bottom: 5px;
}

div.mxdialog div.body>p {
  padding: 0 15px 10px;
}

div.mxdialog div.content {
  max-height: 60vh;
  padding: 15px;
  overflow: auto;
}

div.mxdialog.alert-popup div.body {
  width: 600px;
}

div.mxdialog.alert-popup div.content {
  color:#000;
  text-align: center;
}

div.mxdialog div.content .mx-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 30px;
}

div.mxdialog div.content .mx-btn .btn {
  margin: 0;
}

div.mxdialog.alert-popup div.content p {
  line-height: 2rem;
  text-align: left;
}

.mx-list {
  display: flex;
  flex-flow: row wrap;
  gap: 16px;
}

div.mxdialog .popup-heding {
  padding: 0;
}



/*CUSTOM RADIO AND CHECKBOX CSS==================================================*/
i.rdo,
i.chk {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  vertical-align: top;
  min-width: 14px;
  min-height: 14px;
  position: relative;
  font-style: normal;
  position: relative;
  z-index: 1;
  cursor: pointer;
  -webkit-user-select: none;
  text-transform: none !important;
  line-height: 2.4rem;
  padding: 0;
  padding-left: 28px;
  color: #1D2939;
  border-radius: 8px;
}



i.rdo input,
i.chk input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

i.rdo em,
i.chk em {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  z-index: 0;
  font-style: normal;
  border: 1px solid #D0D5DD;
  border-radius: 4px;
}


i.rdo em,
i.chk em {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  z-index: 0;
  font-style: normal;
  border-radius: 6px;
  border: 1px solid #111111;
}

i.rdo em:after,
i.chk em:after {
  content: '';
  position: absolute;
  display: none;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 12px;
  border-width: 0 2px 2px 0;
  border-style: solid;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-color: #EF258A;
}

i.chk input:checked~em,
i.rdo input:checked~em {
  border-color: #EF258A;
  background: #F9F5FF;
}

i.chk input:checked~em:after {
  display: block;
}

i.rdo input:checked~em:after {
  display: block;
  background-color: #EF258A;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

i.rdo input[type='radio']~em {
  border-radius: 100%;
  -webkit-border-radius: 100%;
}

i.rdo input[type='radio']~em:after {
  top: 4px;
  left: 4px;
}


.hide-lable label {
  display: none;
}


/*----------*/

a.close,
a.del {
  width: 40px;
  height: 40px;
  text-align: center;
  position: absolute;
  right: 15px;
  top: 15px;
  border: 0;
  transition: all ease-in-out 0.3s;
}

a.close:before,
a.del:before {
  transform: rotate(45deg);
}

a.close:after,
a.del:after {
  transform: rotate(-45deg);
}

a.close:before,
a.close:after,
a.del:before,
a.del:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transition: all ease-in-out 0.3s;
  width: 2px;
  border-radius: 2px;
  height: 20px;
  margin-left: -1px;
  margin-top: -9px;
  background: #667085;
}

a.close:hover:before,
a.del:hover:before {
  transform: rotate(-45deg);
}

a.close:hover:after,
a.del:hover:after {
  transform: rotate(45deg);
}



header {
  position: fixed;top: 0;width: 100%;height: 80px;background: rgba(255,255,255,0.8);backdrop-filter: blur(6px);display: flex;justify-content: space-between;align-items: center;padding: 0 30px;z-index: 100; }
.header-wrap { width: 100%;display: flex;align-items: center;padding: 0px 0;}
.logo {display: inline-block;max-width: 150px;}
.logo img {width: 100%;}
/* .nav-contact-header{margin-left: 500px;  } */
.menu-wrap {flex: 1; display: flex;justify-content: center; margin-left: 300px; }
@media (max-width: 768px) {
    header .header-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 15px;
    }

    /* Logo Control */
    .header-wrap .logo img {
        max-width: 120px;   /* mobile size */
        height: auto;
	padding-left: 20px;
    }

    /* Navigation icon adjustment */
    #nav-icon {
        margin-left: auto;
    }

    /* Menu push down properly */
    .menu-wrap {
        width: 100%;
        margin-top: 10px;
    }
}
@media (max-width: 480px) {

    .header-wrap .logo img {
        max-width: 120px; /* smaller logo for tiny screens */
    }

    #nav-icon {
        transform: scale(0.9);
    }

    .nav-contact-header {
        font-size: 12px;
        padding: 10px 12px;
    }
}
ul.menu-list {width: 100%;display: flex;flex-flow: row wrap; justify-content: space-between;;}
ul.menu-list>li {display: inline-block; position: relative;}
ul.menu-list>li:hover:before{visibility: visible; opacity: 1; width: 100%; transition: all ease-in-out 0.5s;}
ul.menu-list li a {display: inline-block;padding: 30px 15px;color: #000000;font-size: 1.4rem; cursor: pointer;}
ul.menu-list li a{background-image: url(../images/chevron-down.png); background-repeat: no-repeat; background-size: 14px; display: inline-block; background-position: right center;}
ul.menu-list li:first-child a{background-image: none;}
ul.menu-list li a:hover, ul.menu-list li a.active {color: teal;font-weight: bold;}
ul.sub-menu { min-width: 205px;  position: absolute;top: 100%;padding: 12px 0; background-color: #fff; border-radius: 0px; visibility: hidden;opacity: 0;transition: opacity calc(300* 1ms) cubic-bezier(0.42, 0.01, 0.58, 1); display:none;}

ul.sub-menu li a {padding: 8px 20px; font-size: 14px; background-image: none;}
ul.menu-list>li:hover>ul.sub-menu { opacity: 1;visibility: visible;}



/* Heambeger menu ----- */

#nav-icon {
  position: relative;
  width: 30px;
  height: 20px;
  cursor: pointer;
  z-index: 98;
  display: none;
  position: absolute;
  left: 20px;
  text-align: center;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 50%;
  background: #1A1717;
  opacity: 1;
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
  -webkit-transition: all 0.35s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#nav-icon span:nth-child(even) {
  left: 50%;
}

#nav-icon span:nth-child(odd) {
  left: 0;
}

#nav-icon span:nth-child(1),
#nav-icon span:nth-child(2) {
  top: 0;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(6){display:none;}
#nav-icon.active span:nth-child(2),#nav-icon.active span:nth-child(6){display:block;}
#nav-icon span:nth-child(1),#nav-icon span:nth-child(5){left: 50%;transform: translateX(-50%);}
#nav-icon span:nth-child(3),
#nav-icon span:nth-child(4) {
  top: 8px;
}

#nav-icon span:nth-child(5),
#nav-icon span:nth-child(6) {
  top: 16px;
}

#nav-icon.active span {
  background: #1A1717;
}

#nav-icon.active span:nth-child(1),
#nav-icon.active span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.active span:nth-child(2),
#nav-icon.active span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.active span:nth-child(1) {
  left: 4px;
  top: 5px;
}

#nav-icon.active span:nth-child(2) {
  left: calc(50% - 4px);
  top: 5px;
}

#nav-icon.active span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

#nav-icon.active span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

#nav-icon.active span:nth-child(5) {
  left: 4px;
  top: 12px;
}

#nav-icon.active span:nth-child(6) {
  left: calc(50% - 4px);
  top: 12px;
}

/* Desktop Default */
/* .menu-wrap {
  display: block;
} */
#nav-icon {
  display: none;
}

@media (max-width: 991px) {
  .menu-wrap {
    display: none; 
    position: absolute;
    top: 80px; 
    right: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    padding: 20px 0;
    z-index: 97;
  }

  .menu-wrap.active {
    display: flex; 
  }

  #nav-icon {
    display: block; 
  }

  ul.menu-list {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  ul.menu-list li a {
    padding: 15px;
    width: 100%;
    text-align: center;
  }
}

/* Home PAGE */

.home-carousel-container {background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));position: relative;width: 100%;height: 100vh;overflow: hidden; margin-top: 80px;}
.home-carousel-slides {display: flex;height: 100%;transition: transform 0.5s ease-in-out;}
.home-carousel-slide {min-width: 100%;height: 100%;position: relative;}
.home-carousel-slide img {width: 100%;height: 100%;object-fit: cover;}
/* Overlay */
.home-overlay {position: absolute;inset: 0;background: rgba(0,0,0,0.4);color: white;display: flex;flex-direction: column;justify-content: center;padding: 0 5%;}
.home-overlay h2 {color: #D0D5DD; font-weight: bold;margin-bottom: 0.5rem;}
.home-overlay p { color: #d1d5db; max-width: 500px;margin-bottom: 1rem;}
.home-carouset-btn {background: linear-gradient(to right, teal, #006d6d, #004d4d);padding: 0.6rem 1.5rem;border-radius: 30px;color: white;text-decoration: none;font-weight: bold; width: 13rem;}
/* Buttons */
.carousel-btn {position: absolute;top: 50%;transform: translateY(-50%);background: teal;border: none;color: white;font-size: 2rem;padding: 0.5rem 0.8rem;border-radius: 50%;cursor: pointer;z-index: 2;}
.carousel-btn:hover {background: gray;}
.prev {left: 10px;}
.next {right: 10px;}

/* Responsive */
@media (max-width: 768px) {
  .home-overlay h2 {
    font-size: 1.7rem;
  }
  .home-overlay p {
    font-size: 1.5rem;
  }
}


/* Home About Section */
.home-about-section {background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1)); padding: 1.5rem;padding-top: 50px;}
.home-about-grid {display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 1200px; margin: auto; padding: 1rem;}
@media (min-width: 768px) {
  .home-about-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.home-about-card img {height: 30rem;width: 100%;object-fit: cover;border-radius: 0.5rem;}
.home-about-text h2.home-about-subtitle {font-size: 2rem; line-height: 1.75rem; color: #134e4a;font-weight: bold;text-align: left;}
.home-about-text h2.home-about-title {font-size: 2.1rem; color: #0d9488;font-weight: bold;  margin-bottom: 1.5rem; text-align: left;}
.home-company-name { font-size: 2rem; font-weight: 300; margin-bottom: 1.5rem;}
.home-about-text p {color: #4b5563;text-align: justify}
.home-founder-info {margin-top: 4rem;}
.home-founder-info h2 {font-size: 1.5rem; color: #0a0b0b;font-weight: bold;margin-bottom: 0.5rem;}
.about-experience {padding-top: 2rem;}
.home-experience-years {font-size: 10rem;font-weight: 700;color: #1f2937;margin: 0;}
.home-experience-text {font-size: 2rem;font-weight: 700;margin-bottom: 2rem; ;}
.home-commitment-card { background:#2dd4bf; padding:1rem; border-radius:0.5rem; box-shadow:0 5px 15px rgba(0,0,0,0.2); position:relative; height:24rem; }
.home-commitment-card .icon-handshake {font-size: 4rem;color: white;}
.home-commitment-card h2 {font-size: 1.25rem;font-weight: bold;margin: 0.5rem 0;}
.home-commitment-card p { text-align: justify;}
.certifications {position: absolute;bottom: -1rem;right: 2rem;}
.certifications-btn {background: #115e59;color: white;padding: 0.5rem 1rem;border-radius: 0.5rem;cursor: pointer;position: relative;}
.certifications-hover {position: absolute;top: 100%;right: 0;margin-top: 0.5rem;width: 18rem;background: white;color: #0f766e;border-radius: 0.5rem;box-shadow: 0 5px 15px rgba(0,0,0,0.2);padding: 1rem;transform: scale(0);transform-origin: top left;transition: transform 0.3s ease-in-out;z-index: 10;}
.certifications-btn:hover .certifications-hover {transform: scale(1);}
.certifications-hover h4 {font-weight: bold;margin-bottom: 0.5rem;text-align: center;}
.certifications-hover ul {list-style: none; padding: 0;margin: 0;}
.certifications-hover li {font-size: 0.9rem;margin-bottom: 0.25rem;}
/* HOme TPE Section  */
.home-section-title {font-weight: bold;text-align: center;color: #064e3b; /* teal-800 */margin-bottom: 2rem;padding: 1rem;}
.home-tpe-section {background: #ccfbf1; /* teal-100 */padding: 5rem 0;}
/* Grid layout */
.home-grid {display: grid;gap: 1rem;margin: 0 auto;max-width: 1280px;}
.home-first-grid {grid-template-columns: repeat(1, 1fr);background: #14b8a6; /* teal-500 */  padding: 1rem;}
.home-second-grid {grid-template-columns: repeat(1, 1fr);background: #14b8a6; /* teal-500 */padding: 1rem;}
@media (min-width: 640px) {
  .home-first-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-second-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .home-first-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .home-second-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card styles */
.home-grid-card {background: #99f6e4; /* teal-200 */border-radius: 0.5rem;padding: 1rem;  box-shadow: 0 4px 10px rgba(0,0,0,0.15);}
.home-grid-card h2 {font-size: 2.2rem;font-weight: bold;color: #064e3b;}
.home-grid-card p, .home-grid-card li {color: #0f766e; /* teal-700 */}
.home-grid-card ul {padding-left: 1.25rem;list-style: disc;}
.home-card-italic {font-style: italic; font-weight: 900; margin-top: 0.5rem;}
/* Image card */
.home-image-card {background: #99f6e4;border-radius: 0.5rem;overflow: hidden;box-shadow: 0 4px 10px rgba(0,0,0,0.15);}
.home-image-card img {width: 100%;height: 100%;object-fit: cover;}
.home-grid-card ul li {list-style: disc;}

/* Span helpers for larger layouts */
@media (min-width: 768px) {
  .home-span-2-cols {
    grid-column: span 2;
  }
  .home-span-3-cols {
    grid-column: span 3;
  }
  .home-span-2-rows {
    grid-row: span 2;
  }
}
/* HOme Industry */
.industries-section {background-color: #f3f4f6; /* gray-100 */padding: 4rem 1rem;text-align: center;}
/* Title Styling */
.industries-section-title {font-weight: bold;color: #115e59; /* teal-800 */margin-bottom: 0.5rem;}
.industries-section-subtitle { max-width: 700px; margin: 0 auto 2rem;font-weight: 600;color: #14b8a6; /* teal-500 */}
/* Grid Layout */
.industry-grid {max-width: 1200px;margin: auto;display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 1rem;}
/* Cards */
.industry-card { background: linear-gradient(to bottom left, #14b8a6, #0d9488 60%); border-radius: 1rem; padding: 1.5rem; height: 40rem; color: white; text-align: left; display: flex; flex-direction: column; justify-content: flex-start; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.industry-card  p { color: rgb(255 255 255 / var(--tw-text-opacity, 1)); font-weight:400; }
/* Hover Effect */
.industry-card:hover {transform: scale(1.03); box-shadow: 0 6px 18px rgba(0,128,128,0.3);}
 .industry-id {font-size: 9rem; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); margin-bottom: 0.5rem;} 
 .industry-title {font-size: 2rem; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); font-weight: 600;}
  .industry-desc  {margin-top: 1rem; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); line-height: 1.4;}
/* Home product  */
.home-key-products {padding: 5rem 1rem;}
.home-product-title-container {text-align: center; margin-bottom: 1.5rem;}
.home-product-main-title {text-align: center; font-weight: bold;color: #134e4a; margin-bottom: 0.5rem;}
.home-product-subtitle {text-align: center;font-weight: 600;color: #14b8a6;}
.home-product-grid {display: grid;grid-template-columns: 1fr;gap: 1rem;max-width: 1200px;margin: 2rem auto;}
@media (min-width: 640px) {
  .home-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .home-product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.home-product-card {padding: 1.5rem;border-radius: 0.5rem;box-shadow: 0 4px 8px rgba(0,0,0,0.1);cursor: pointer;transition: transform 0.3s ease;}
.home-product-card:hover {transform: scale(1.05);}
.bg-light {background: #ccfbf1;}
.bg-dark {background: #2dd4bf;}
.home-product-card img {width: 100%;max-height: 20rem;object-fit: cover;border-radius: 0.5rem;background: #f3f4f6;}
.home-product-card h3 {font-size: 1.25rem;font-weight: 600;color: #1f2937;margin: 1rem 0;}
/* Alternate Backgrounds */
.home-product-card:nth-child(odd) {background-color: rgb(204 251 241 / 1); /* teal-100 */}
.home-product-card:nth-child(even) { background-color: rgb(45 212 191 / 1);  /* teal-400 */color: #fff; /* White text for contrast */ }
.home-product-card:nth-child(even) h3,
.home-product-card:nth-child(even) p {color: #fff; /* Text contrast for dark cards */}
.view-more-btn {display: inline-block;color: white;background: linear-gradient(to right, #14b8a6, #0f766e, #134e4a);padding: 0.5rem 1.25rem;border-radius: 1.5rem;font-weight: 500;text-decoration: none;  transition: transform 0.2s ease;}
.view-more-btn:hover {  transform: scale(1.1);}
.button-container {text-align: center;}

/* Fade Up Animation */
.fade-up {opacity: 0;transform: translateY(40px);animation: fadeInUp 0.6s ease-out forwards;}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Product Grid Container */
.home-product-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 1.5rem;padding: 2rem;/*background-color: #f1f5f5; /* Light teal-gray */}
/* Individual Product Card */
.home-product-card {background-color: #e6fffa; /* Light teal tone */border-radius: 12px;overflow: hidden;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);padding: 1rem;text-align: center;transition: transform 0.3s ease, box-shadow 0.3s ease;}
/* Hover Effect */
.home-product-card:hover {transform: translateY(-6px);box-shadow: 0 6px 18px rgba(0, 128, 128, 0.2);}
/* Product Image */
.home-product-image {  width: 100%;  height: 200px;  object-fit: cover;  border-radius: 8px;  background-color: #f8fafc; /* fallback */margin-bottom: 1rem;}
/* Product Title */
.home-product-title {  font-size: 1.2rem;  font-weight: bold;color: #134e4a; /* dark teal */margin-bottom: 0.5rem;}
/* Product Description */
.home-product-desc {font-size: 0.95rem;color: #4b5563; /* gray-600 */margin-bottom: 1rem;}
/* View More Button */
.view-more {display: inline-block;padding: 0.5rem 1rem;background: linear-gradient(to right, #14b8a6, #0f766e);color: white;font-size: 0.9rem;font-weight: 500;border-radius: 20px;text-decoration: none;transition: background 0.3s ease, transform 0.2s ease;}
.view-more:hover {background: linear-gradient(to right, #0d9488, #115e59);transform: scale(1.05);}

/* Why Choose Section */
.why-choose-section {background-color: #ccfbf1; /* teal-100 */padding: 4rem 1rem;}
.why-choose-section .why-choose-container {max-width: 1200px;margin: auto;}
.why-choose-section .why-choose-title {    font-weight: bold;color: #115e59; /* teal-800 */margin-bottom: 0.5rem;}
.why-choose-section .why-choose-subtitle {    margin-bottom: 2rem;  color: #0f766e; /* teal-700 */}
/* List Styling */
.why-list {  list-style: none;  padding: 0;  margin: 0;  display: grid;  grid-template-columns: 1fr;  gap: 1.5rem;}
.why-list li {  display: flex;  align-items: flex-start;  gap: 1rem;  transition: transform 0.3s ease;}
.why-list li:hover {  transform: translateX(5px);}

/* Icon Styling */
.icon {margin-top: 4px;  transition: transform 0.3s ease;}
.why-list li:hover .icon {transform: scale(1.2);}
/* Icon Colors */
.icon.green {color: #15803d;}
.icon.blue {color: #2563eb;}
.icon.yellow { color: #facc15;}
.icon.pink { color: #be185d;}
.icon.indigo { color: #4f46e5;}
.icon.red {color: #dc2626;}
.icon.gray {color: #374151;}
.why-list h3 {font-weight: bold;color: #115e59;}
.why-list p {color: #0f766e;}
/* HOME Contact button */
.home-contact-section {background: #ccfbf1; /* teal-100 */text-align: center;padding-bottom: 2.5rem;}
.home-contact-btn { background: linear-gradient(to right, #14b8a6, #0f766e, #134e4a); color: white; padding: 0.6rem 1.5rem; border-radius: 1.5rem; font-size: 1.125rem; font-weight: 500; text-decoration: none; display: inline-block; box-shadow: 0 4px 12px rgba(20,184,166,0.5); }
.home-contact-btn:hover {background: linear-gradient(to right, #0f766e, #134e4a);}
 
/* Footer */
.footer {background: linear-gradient(to bottom, #14b8a6, #0f766e 90%, #134e4a);color: white;font-size: 0.9rem;}
.footer-container {max-width: 1200px; color: white; margin: auto;padding: 3rem 1.5rem;display: grid;grid-template-columns: 1fr;  gap: 2rem;}
.footer-logo {  width: 80px;  margin-bottom: 1rem;}
.footer-column p {  line-height: 2; color: white; margin-bottom: 1rem;  font-size: 1.5rem; }
.footer-title {  font-size: 2.5rem;  font-weight: 900;  margin-bottom: 1.6rem;}
.footer-column ul {  list-style: none;  padding: 0;}
.footer-column ul li {  margin-bottom: 1rem;}
.footer-column ul li a {  color: white; font-size: 1.6rem; text-decoration: none;  transition: color 0.3s ease;}
.footer-column ul li a:hover {color: #5eead4; /* teal-300 */}
/* Social Icons */
.social-icons {display: flex;  gap: 1rem; margin-top: 0.5rem;}
.social-icons a {  color: white;  font-size: 1.2rem;  transition: color 0.3s ease;}
.social-icons a.facebook:hover {  color: #1877f2;}
.social-icons a.instagram:hover {color: #e1306c;}
.social-icons a.linkedin:hover {color: #0077b5;}

/* Bottom Section */
.footer-bottom { border-top: 1px solid #0d9488; text-align: center;padding: 1rem;font-size: 0.85rem;margin-top: 1rem;}
/* Responsive */
@media (min-width: 640px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-container {
    grid-template-columns: repeat(4, 1fr);
  }
}



/* About PAGE Section */
.about-section {margin-top:70px; background: #e6f7f7; /*padding: 40px 20px;*/text-align: center;}
/* Top Banner */
/* .about-top-banner { font-size: larger; width: 100%; background: #5eead4; padding: 60px;  display: flex;  flex-direction: column;  align-items: center;  gap: 15px;} */
/* Typing Text Effect */
/* .about-typing-text {font-size: 2.4rem;font-weight: bold;color: #004d4d;border-right: 3px solid #004d4d;white-space: nowrap;overflow: hidden;width: 20ch; animation: typing 3s steps(20) infinite alternate, blink 0.7s step-end infinite;} */

/* @keyframes typing {
  from { width: 0; }
  to { width: 20ch; }
}

@keyframes blink {
  50% { border-color: transparent; }
} */
.about-top-banner {
    font-size: larger;
    width: 100%;
    background: #5eead4;
    padding: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.about-typing-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.typing-line {
    font-size: 2.2rem;
    font-weight: bold;
    color: #004d4d;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    border-right: 3px solid #004d4d; /* cursor while typing only */
}

/* --- LINE 1 --- */
.line1 {
    animation: type1 2s steps(25) forwards,
               blink .5s step-end infinite;
}

/* Remove cursor when animation completes */
.line1.finished {
    border-right: 0;
}

/* --- LINE 2 --- */
.line2 {
    opacity: 0;
    animation: showLine2 0s 2.1s forwards,
               type2 2s steps(30) 2.1s forwards,
               blink .5s step-end infinite 2.1s;
}

.line2.finished {
    border-right: 0;
}

/* --- LINE 3 --- */
.line3 {
    opacity: 0;
    animation: showLine3 0s 4.3s forwards,
               type3 2s steps(25) 4.3s forwards,
               blink .5s step-end infinite 4.3s;
}

.line3.finished {
    border-right: 0;
}

/* Keyframes */
@keyframes type1 { from { width: 0; } to { width: 22ch; } }
@keyframes type2 { from { width: 0; } to { width: 28ch; } }
@keyframes type3 { from { width: 0; } to { width: 25ch; } }

@keyframes showLine2 { to { opacity: 1; } }
@keyframes showLine3 { to { opacity: 1; } }

@keyframes blink { 50% { border-color: transparent; } }
/* logo */
.tiger-logo {
    width: 120px;
    border-radius: 8px;
    transition: transform 0.3s ease;
}
.tiger-logo:hover { transform: scale(1.05); }

/* Logo */
/* .tiger-logo { width: 120px;border-radius: 8px;transition: transform 0.3s ease;}
.tiger-logo:hover {transform: scale(1.05);} */

.about-content h2 {font-size: 5rem; font-weight: bolder; margin-bottom: 15px; margin-top: 15px;}
.about-content p {  font-size: 1.5rem; max-width: 700px; font-weight: 300; margin: auto; color: #555; line-height: 1.6; text-align: justify;}

/* Key Points */
.about-key-points {  max-width: 700px;  margin: auto;  display: flex;  flex-direction: column;  gap: 20px;}
.about-point {  display: flex;  align-items: flex-start;  gap: 10px; padding-top: 15px;}
.about-circle { flex-shrink: 0; background: #80d4d4; color: #004d4d;font-weight: bold;width: 30px;height: 30px;  border-radius: 50%;display: flex;align-items: center;  justify-content: center;}
.about-point p {  margin: 0;  font-size: 1.5rem;  color: #444;  line-height: 1.5; text-align: justify; }
@media (max-width: 768px) {
  .about-section {
    padding: 30px 15px; /* mobile par side gap */
  }
  .about-content p,
  .about-key-points {
    padding: 0 10px; /* extra safety */
  }
}
/* Mission */
.mission-section {background: #e6f7f7;padding: 60px 20px;}
.mission-container {max-width: 1100px;margin: auto;text-align: center;}
.mission {padding: 40px 20px;background: #ffffff;text-align: center;}
.mission h2 {font-size: 2rem;margin-bottom: 10px;}
.mission-cards-grid {display: grid; grid-template-columns: 1fr;gap: 20px;}
@media (min-width: 640px) {
  .mission-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .about-top-banner {
    flex-direction: row;
    justify-content: space-evenly;
  }
}
.mission-card {background: #fff;padding: 25px 20px;border-radius: 10px;box-shadow: 0 5px 10px rgba(0,0,0,0.1);cursor: pointer;transition: transform 0.3s ease, box-shadow 0.3s ease;}
.mission-card:hover {transform: scale(1.05);box-shadow: 0 8px 16px rgba(0,0,0,0.15);background: #007777;   /* blue-600 */color: #ffffff;        /* white text */ }
.mission-icon {font-size: 5rem;color: #007777;margin-bottom: 15px;}
.mission-card:hover .mission-icon{font-size: 5rem;color: white;margin-bottom: 15px;}
.mission-card h2 {font-size: 2rem;color: #004d4d;margin: 0;}
.mission-card:hover h2 {font-size: 2rem;color:white;margin: 0;}
.content-box {margin-top: 30px;padding: 20px;  background: #008080;color: white;border-radius: 8px;min-height: 80px;font-size: 2rem;transition: transform 0.3s ease, opacity 0.3s ease;  white-space: pre-line;}

.content-box.active {  transform: scale(1.05);  opacity: 1;}

/* Video Section */
.video-section {  position: relative;  height: 400px;  overflow: hidden;  color: white;  text-align: center;}
.video-section video {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  object-fit: cover;}
.video-overlay {  position: relative;  z-index: 1;  background: rgba(0, 0, 0, 0.5);  padding: 60px 20px;}
.video-overlay h2 {  font-size: 4rem;  margin-bottom: 10px; color: white;}
.video-overlay p {  font-size: 2rem;  margin-bottom: 10px; color: white;}

/* Certifications Section */
.certifications-section {background-color: #f0fdfa; padding: 80px 50px 30px 50px; text-align: center;}
.certifications-section h2 {font-size: 4rem;font-weight: bold;margin-bottom: 10px;}
.certifications-section  p {  font-size: 2.5rem;  margin-bottom: 40px;  color: #444;}

.scroll-container { overflow: hidden;  width: 100%;}
.scroll-content {  display: flex;  gap: 20px;  animation: scroll-left 10s linear infinite; }
.scroll-container:hover .scroll-content {animation-play-state: paused; }
.cert-card {  background: white;  padding: 20px; border: 2px solid #0d9488; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);  min-width: 300px;  max-width: 450px; flex: 0 0 auto;  text-align: left;}
.cert-card h3 {font-size: 1.9rem;color: #0f766e;margin-bottom: 4px;}
.cert-card small {  display: block;  font-size: 1.4rem;  color: #0d9488;  margin-bottom: 10px;}
.cert-card p {  font-size: 1.3rem;  color: #333;  margin-bottom: 8px;}
.cert-card .tagline {  display: block;  font-size: 1.3rem; font-style: italic; font-weight: bold;color: #777;}
.cert-card .tagline::before { content: '“'; }
.cert-card .tagline::after  { content: '”'; }
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 600px) {
  .cert-card {
    min-width: 90%;   /* screen ka 90% le */
    max-width: 90%;
    margin: 0 auto;   /* center align */
  }
}

/* Expect Section */
.expect {  padding: 50px 20px;  background: #f9f9f9;  text-align: center;}
.expect h2 {  font-size: 4rem; color: #004d40; font-weight: bold; margin-bottom: 30px;}
.expect-grid {  display: grid;  gap: 20px;  grid-template-columns: repeat(2, 550px);   justify-content: center; }
.expect-card {  background: white;  padding: 20px;  border-radius: 10px;  box-shadow: 0 4px 8px rgba(0,0,0,0.1);  transition: transform 0.3s;}
.expect-card:hover { box-shadow: 0 8px 10px -5px rgba(69, 144, 125, 0.2), inset 0 -5px 10px rgba(42, 166, 180, 0.1); transform: translateY(-5px);}
.expect-card i {  font-size: 2rem;  color: teal;  margin-bottom: 10px;}
.expect-card h3 {  font-size: 2rem;  color:#004d40;  margin-bottom: 10px;}
expect-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
  .expect-grid {
    grid-template-columns: 1fr;
  }
}
/* Made in India */
.india-section {  background: #dff5f5;  padding: 50px 20px;  text-align: center;}
.india-section h2 {   margin-bottom: 10px; color: #004d40;}
/* .india-section p {  font-size: 1.3rem;  margin-bottom: 10px;} */
.india-section p {
  font-size: 1.5rem;
  font-weight: 700; /* ✅ bold kar diya */
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* max 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .india-section p {font-size: 1.5rem; font-weight: 300; margin-bottom: 10px;display: -webkit-box;  -webkit-line-clamp: 2;  max 2 lines-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;} */
.india-img {  margin-top: 20px;  max-width: 300px;  width: 100%;}

@media (max-width: 600px) {
    .india-section h2 {
        font-size: 2.2rem;
    }

    .india-section p {
        font-size: 1.2rem;
        padding: 0 10px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        display: block;
    }

    .india-section .india-img {
        width: 80%;
        max-width: 250px;
        margin: 20px auto 0;
        display: block;
    }
}

/* Contact Page */

.contact-section { min-height: 45rem;background-color: #ccfbf1; /* teal-100 */display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 6rem 1rem 2rem;text-align: center;}
.contact-section .heading {margin-top: 70px;  font-size: 5rem;  font-weight: bold;color: #004d40; /* teal-900 */  margin-bottom: 1rem;}
.contact-section .sub-heading {  font-size: 2rem;  max-width: 700px;  color: #0f766e; /* teal-700 */  margin-bottom: 2rem;}
.address-contact-grid {  display: grid;  grid-template-columns: 1fr;  gap: 2rem;  width: 100%;  max-width: 1200px;  padding-top: 2rem;}
@media (min-width: 640px) {
  .address-contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .address-contact-grid { grid-template-columns: repeat(3, 1fr); }
}

.contact-card {  display: flex;  flex-direction: column;  align-items: center; text-align: center; padding: 2.5rem;border-radius: 1rem;color: white;box-shadow: 0 6px 16px rgba(0,0,0,0.15); transition: transform 0.3s ease;}
.contact-card:hover {transform: translateY(-8px);}
.contact-card .icon {font-size: 2.5rem;}
.contact-card h3 {   font-weight: 600;  margin-top: 1rem;  margin-bottom: 1rem; color: white;}
.contact-card p, .contact-card a { margin-top: 0.5rem;color: white; text-decoration: none;}
.contact-card a:hover {  color:#004d40}
.social-links {  display: flex;  gap: 1.5rem;  margin-top: 1rem;}
.social-links a {  color: white;  font-size: 1rem;transition: color 0.3s;}
.social-links a:hover {color: #fef08a; /* yellow-200 hover effect */}

/* Background variants */
.teal-400 { background-color: #2dd4bf; }
.teal-500 { background-color: #14b8a6; }
.teal-600 { background-color: #0d9488; }

/* Header */
.contact-header a {text-align: right;padding: 60px 20px;background: #f9fafb;}
.contact-header h1 {font-size: 2.5rem;color: #065f46;}
.contact-header p {  max-width: 600px;  margin: 10px auto 0;  color: #4b5563;}
/* Grid */
.contact-grid {  display: grid;  grid-template-columns: 1fr;  gap: 30px;  padding: 60px 20px;  background: #f3f4f6;}
.contact-map iframe {  width: 100%;  min-height: 350px;  border: none;  border-radius: 12px;}
@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    padding: 80px 60px;
  }
}

/* Contact Form */
.contact-form {  background: #fff;  padding: 25px;  border-radius: 12px;  box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
.contact-form h2 {  margin-bottom: 15px;  color: #065f46;}
.contact-form label {  display: block;  margin-top: 10px;  font-weight: bold;  color: #374151;}
.contact-form input,
.contact-form textarea {  width: 100%;  padding: 10px;  margin-top: 6px;  border: 1px solid #d1d5db;  border-radius: 6px;  font-size: 1rem;}
.contact-form button {  margin-top: 15px;  padding: 12px 20px;  background: #0d9488;  color: #fff;  border: none;  border-radius: 30px;  cursor: pointer;  font-size: 1rem;}
.contact-form button:hover {background: #374151;}
/* Business Hours */
.business-hours {  background: #ccfbf1;  padding: 60px 20px;  text-align: center;}
.business-hours h2 {  font-size: 2.2rem;  color: #115e59;}
.business-hours p {  max-width: 600px;  margin: 15px auto 30px;color: #0f766e;}
.hours-table {  max-width: 500px;  margin: 0 auto;  background: #fff;  padding: 20px;  border-radius: 12px;  box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
.hours-table table {  width: 100%;  border-collapse: collapse;}
.hours-table th,
.hours-table td {  padding: 12px 15px;  border-bottom: 1px solid #e5e7eb;}
.hours-table tr:hover {background: #2dd4bf;color: white;}

/* Thank You */
.thank-you {  background: #ccfbf1;  padding: 60px 20px;  text-align: center;}
.thank-you h2 {  font-size: 2rem;  color: #134e4a;}
.thank-you-buttons {  margin-top: 30px;    flex-direction: column;  gap: 15px;  align-items: center;}
@media (min-width: 640px) {
  .thank-you-buttons {
    flex-direction: row;
  }
}
.contactp-btn {  display: inline-block;  padding: 12px 25px;  background: #0d9488;  color: #fff;  border-radius: 999px;  text-decoration: none;  font-weight: bold;}
.contactp-btn:hover {background: #374151;}
/* End */
/* Sustanbiliy Page */

/* ==============================
   Sustainability Section
============================== */
.sustainability-section {background: #ccfbf1; /* teal-100 */padding: 100px 20px 60px;}
.sustainability-container {max-width: 1200px;margin: 0 auto;}
.sustainability-header {  text-align: center;  margin-bottom: 50px;}
.sustainability-header h2 {  font-size: 32px;  font-weight: bold;  color: #134e4a;  margin-bottom: 20px;}
.sustainability-header p {  font-size: 18px;  max-width: 900px;  margin: 0 auto;  color: #0f766e;  line-height: 1.6;}
.sustainability-flex {  display: flex;  flex-direction: column;  gap: 30px; align-items: center;}
.sustainability-image img {  width: 100%;  border-radius: 16px;  box-shadow: 0 6px 15px rgba(0,0,0,0.15);  object-fit: cover;}
.sustainability-content {  background: #ffffff;  padding: 30px;  border-radius: 16px;  box-shadow: 0 6px 15px rgba(0,0,0,0.15);}
.sustainability-content h2 {  font-size: 24px;  font-weight: 600;  margin-bottom: 15px;}
.sustainability-content p {  font-size: 18px;  color: #0f766e;  margin-bottom: 20px;}
.sustainability-content ul { padding: 15px; }
.sustainability-content ul li { padding: 5px; list-style: disc;}
.sustainability-properties h3 {  font-size: 20px;  font-weight: 500;  margin-bottom: 15px;  color: #115e59;}
.sustainability-properties ul {  list-style: disc inside;  color: #0f766e;  font-size: 16px;  line-height: 1.6;}
.sustainability-properties li {  margin-bottom: 10px;}
@media (min-width: 768px) {
  .sustainability-flex {
    flex-direction: row;
  }
  .sustainability-image,
  .sustainability-content {
    width: 50%;
  }
}

/* ==============================
   Environment Section
============================== */
.environment-section {  background: #f9fafb; /* gray-50 */  padding: 80px 20px;}
.environment-container {  max-width: 1200px;  margin: 0 auto;  display: flex;  flex-direction: column;  gap: 80px;}
.environment-row {display: flex;  flex-direction: column;  gap: 30px;  align-items: center;}.environment-row--reverse {flex-direction: column-reverse;}
.environment-content {  flex: 1;}
.environment-content h2 {  font-size: 28px;  font-weight: bold;  margin-bottom: 16px;}
.environment-content p {  font-size: 18px;  line-height: 1.6;  color: #374151;}
.environment-content ul  { padding: 15px; font-size: 16px;  line-height: 1.6;  color: #374151;}
.environment-content ul li {list-style:circle; }
.environment-image {flex: 1;}
.environment-image img {width: 100%;border-radius: 16px;box-shadow: 0 6px 15px rgba(0,0,0,0.15);object-fit: cover;}
@media (min-width: 768px) {
  .environment-row {flex-direction: row;}
  .environment-row--reverse {flex-direction: row-reverse;}
  .environment-content, .environment-image { width: 50%;}
}

/* ==============================
   Approach Section
============================== */
.approach-section {background: #ccfbf1; /* teal-100 */padding: 80px 20px;}
.approach-container {max-width: 1200px;  margin: 0 auto;}
.approach-header {  text-align: center;  margin-bottom: 60px;}
.approach-header h2 {  font-size: 32px;  font-weight: bold;  color: #134e4a;  margin-bottom: 15px;}
.approach-header p {  max-width: 800px;  margin: 0 auto;  font-size: 18px;  color: #0f766e;  line-height: 1.6;}
.approach-grid {  display: grid;  grid-template-columns: 1fr;  gap: 30px;}
.approach-item {display: flex;align-items: flex-start;gap: 20px;}
.approach-icon {  background: #99f6e4;  padding: 15px;  border-radius: 50%;  font-size: 24px;  flex-shrink: 0;}
.approach-item h4 {  font-size: 20px;  font-weight: bold;color: #115e59;margin-bottom: 8px;}
.approach-item p {  font-size: 16px;  color: #0f766e;  line-height: 1.6;}
@media (min-width: 640px) {
  .approach-grid {grid-template-columns: 1fr 1fr;}
}

/* ==============================
   Future Section
============================== */
.future-section {  background: #f3f4f6; /* gray-100 */padding: 80px 20px;}
.future-container {  max-width: 1200px;  margin: 0 auto;}
.future-header {  text-align: center; margin-bottom: 40px;}
.future-header h2 {font-size: 32px;font-weight: bold;  margin-bottom: 20px;}
.future-header p {font-size: 18px;line-height: 1.6; max-width: 900px;margin: 0 auto;}
.future-grid {display: grid;grid-template-columns: 1fr;gap: 30px;align-items: center;}
.future-image img {  width: 100%;  border-radius: 16px;  box-shadow: 0 4px 10px rgba(0,0,0,0.1);  object-fit: cover;}
.future-text p {font-size: 18px;line-height: 1.6;}
@media (min-width: 768px) {
  .future-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==============================
   Animations
============================== */
.fade-up {  opacity: 0;  transform: translateY(30px);  animation: fadeUp 1s ease-out forwards;}
.fade-left {  opacity: 0;  transform: translateX(-60px);  animation: fadeLeft 1s ease-out forwards;}
.fade-right {opacity: 0;transform: translateX(60px);animation: fadeRight 1s ease-out forwards;}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  to { opacity: 1; transform: translateX(0); }
}
.fade-in-up {  opacity: 0;  transform: translateY(40px);  transition: all 0.6s ease-out;}
.fade-in-up.show {  opacity: 1;  transform: translateY(0);}

/* EnD */
 /* === product-banner === */
.product-banner {overflow: hidden;background: #ccfbf1;padding: 10px 0; margin-top: 70px; }
.product-banner-track {display: flex; animation: scroll 10s linear infinite;}
.product-banner-track img { height: 120px; margin: 0 15px; border-radius: 10px;}
    @keyframes scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .product-banner-track {
    display: flex;
    animation: productScroll 10s linear infinite;
}

@keyframes productScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

    /* === HEADING === */
.product-heading {text-align: center;padding: 40px 20px;}
.product-heading h2 {font-size: 2.5rem;color: #134e4a;margin-bottom: 20px;}
.product-heading p { max-width: 700px; margin: 0 auto; color: #0d9488;}
  /* === PRODUCT GRID === */
  .product-grid {
    max-width: 1200px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 992px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .product-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* .product-grid {max-width: 1200px;margin: 40px auto;display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 20px;padding: 0 0px;} */
/* .product-card { background-color: #99f6e4; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s;}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 6px 15px rgba(0,0,0,0.15);}
.product-card img { width: 100%; height: 220px; object-fit: cover;  max-width: 1200px; /* padding: 20px; }
/* .product-card h3 { background: white; color: #115e59; padding: 12px 0; font-size: 1.2rem; font-weight: bold;} */
/* .product-card p {background: #0d9488;color: white;max-width: 1200px; padding: 20px 0;width: 100%; } */ */
.product-card {
  background-color: #99f6e4;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column; 
  height: 100%; 
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.product-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.product-card h3 {
  background: white;
  color: #115e59;
  padding: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  flex-shrink: 0; 
}

    /* === FEATURED PRODUCT === */
.featured-product {max-width: 600px; margin: 60px auto;position: relative;}
.featured-card {background: #99f6e4; z-index: 10; box-shadow: 0 8px 20px rgba(0,0,0,0.2);}
.featured-card img {width: 100%; height: 300px; object-fit: cover; /*padding: 20px; */ position: relative;
    z-index: 5;}
.featured-card h3 {  background: white;  color: #115e59; padding: 12px 0;  font-weight: bold; position: relative;
    z-index: 5;}
.featured-card p { background: #0d9488; color: white;  padding: 8px 0;}
.featured-info { width: 250px; background: white;padding: 15px;box-shadow: 0 2px 6px rgba(0,0,0,0.15);position: absolute; z-index: 20; top: 50%; transform: translateY(-50%);opacity: 0;transition: opacity 0.3s, transform 0.3s;}
/* .featured-info.left { left: -280px; }
.featured-info.right {  right: -280px;}
.featured-product:hover .featured-info {  opacity: 1;  transform: translateY(-50%) scale(1.05);} */
.featured-info {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  opacity: 0;
  transition: 0.4s;
  width: 250px;
}

.featured-info.left { left: -280px; }
.featured-info.right { right: -280px; }

.featured-product:hover .featured-info {
  opacity: 1;
  transform: translateY(-50%) scale(1.05);
}
@media (max-width: 767px) {
  .featured-product {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
  }

  .featured-info {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100%;
    text-align: center;
  }

  .featured-info.left,
  .featured-info.right {
    left: auto !important;
    right: auto !important;
  }
}


.wrap-share {width: 100%;margin-top: 10px; 
  background: #0d9488;
  color: white;
  padding: 10px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  margin-top: auto; 
}
div.wrap-share button{width: 30px; height: 30px;}
div.wrap-share button {border: 0;margin: 0px;padding: 3px;width: 34px;height: 34px;border-radius: 5px;}
div.wrap-share button img {width: 100%;height: auto;margin: 0;}

/* === TIMELINE === */
.timeline-section {background: #99f6e4; padding: 4rem 1rem; text-align: center; }
.timeline-section h2 { font-size: 2rem; font-weight: bold; color: #134e4a;}
.timeline-subtitle {margin-top: 1.5rem;color: #374151;max-width: 600px;margin-left: auto;margin-right: auto;font-size: 1rem;  line-height: 1.5;}
.timeline {position: relative; margin-top: 3rem; padding-left: 20px;}
.timeline::before { content: ""; position: absolute; left: 50%;top: 0; bottom: 0; width: 4px; background: #0f766e;  transform: translateX(-50%);}
.timeline-item {position: relative;width: 50%; padding: 1rem 2rem;  box-sizing: border-box;}
.timeline-item:nth-child(odd) { left: 0;  text-align: right;}
.timeline-item:nth-child(even) {left: 50%;}
.timeline-item::before {content: ""; position: absolute; top: 1.2rem;width: 16px;height: 16px; background: #14b8a6; border-radius: 50%; border: 3px solid white;  z-index: 1;}
.timeline-item:nth-child(odd)::before {  right: -8px;}
.timeline-item:nth-child(even)::before { left: -8px;}
.timeline-content {background: white;padding: 1rem;border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.05);}

/* ====Product DETAILS ====== */
.product-detail-container { max-width: 100%; margin-top: 80px auto; background: #f0fdfa; border-radius: 12px; padding: 20px;text-align: center;}
.product-detail-title {font-size: 2.5rem;font-weight: bold;color: #115e59; /* teal-800 */padding-top: 100px;  margin-bottom: 20px;}
/* product-detail-carousel */
/* .product-detail-carousel {width: 100%;max-width: 700px;margin: 0 auto 40px;overflow: hidden;border-radius: 8px;box-shadow: 0 6px 14px rgba(0,0,0,0.15);}
.product-detail-slides {  display: flex;  width: 300%; }
.product-detail-slides img {width: 100%;height: 400px;object-fit: cover;  animation: slide 12s infinite;} */
.product-detail-carousel {
  width: 100%;
  max-width: 700px;
  margin: 0 auto 40px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.product-detail-slides {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.product-detail-slides img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}


/* product-detail-description */
.product-detail-description {  font-size: 1.1rem;  line-height: 1.6;  margin: 20px auto;  max-width: 700px;  color: #115e59;}
/* product-detail-sections */
.product-detail-section {text-align: left;margin: 30px auto;max-width: 700px;}
.product-detail-section h3 {  font-weight: 600;  color: #134e4a;  margin-bottom: 10px;}
.product-detail-section ul { padding-left: 20px;}
.product-detail-section ul li {  margin-bottom: 8px;  color: #0f766e;  list-style: disc;}
/* Back Button */
.back-btn-wrapper {margin-top: 40px;}
.back-btn {display: inline-block;padding: 12px 28px;font-size: 1.2rem;font-weight: 500;color: white;background: linear-gradient(to right, #14b8a6, #0f766e, #134e4a);border-radius: 9999px;text-decoration: none;box-shadow: 0 4px 12px rgba(0,0,0,0.2);transition: background 0.3s ease;}
.back-btn:hover { background: #0d9488;}