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


-------------------------------------------------------------------*/
/*------------------------------------------------------------------
# [Color codes]

# primary color: #ffffff
# secondary color: #074560
# text color: #52656d
# accent: #ff8a00
# green-color: #1da678
# */
/*------------------------------------------------------------------
[Typography]

Body copy:     'Jost', sans-serif;

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


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Playwrite+IN+Guides&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */
/* @import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap"); */
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Open Sans", sans-serif;
  background:#ffffff
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {

  --primary--color: #ffffff;
  --secondary--color: #004a5a;
  --text-color: #000000;
  --accent-color:#31ddff;
  --green-color: #1da678;
  --cream-back:#fffdf5;
}
/*top-bar-section*/
.top-bar-main-con {
  background-color: #1da678;
  padding: 5px 0;
}
.top-bar-main-con span {
  font-size: 14px;
  font-weight: 600;
}
.top-bar-main-con a i {
  font-size: 18px;
  padding: 0 0 0 5px;
}
html {
  overflow-x: hidden;
}
.top-bar-right-con ul li:first-child a i {
  padding: 0 0 0 11px;
}
/*top-bar-section*/
/*navbar-start*/
.header-and-banner-con {
  /*	background: var(--green-color);*/
}
.navbar {
  padding: 26px 0 24px 0 !important;
}
.navbar-btn {
  padding: 12px 28px 11px 28px;
  background: var(--accent-color);
  font-size: 18px;
  font-weight: 600;
  border-radius: 30px;
  box-shadow: 0px 20px 30px 0px rgb(0 0 0 / 20%);
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.navbar-btn:hover {
  background: var(--secondary--color);
  transform: translateY(-8px);
}
.navbar a {
  text-decoration: none;
}
.navbar-btn i {
  font-size: 18px;
  padding-right: 3px;
}
.nav-link {
  font-size: 18px;
  font-weight: 600;
}
.nav-link:hover {
  color: var(--accent-color) !important;
}
.nav-item {
  padding: 12px 28px 11px 28px;
}
.navbar-nav li:first-child {
}

.dropdown-menu .dropdown-item {
  font-size: 18px;
  font-weight: 400;
  color: var(--secondary--color);
}
.dropdown-menu .dropdown-item:hover {
  background: var(--accent-color);
  color: #ffffff;
}
.dropdown-menu {
  box-shadow: 0 0 2px 0px rgb(34 32 32 / 90%);
  border: none;
  border-radius: 0;
}
/*navbar-end*/
/*banner-start*/
.banner-con {
  padding-top: 46px;
  padding-bottom: 120px;
}
.banner-right-content a {
  text-decoration: none;
  background: var(--primary--color);
  color: var(--secondary--color);
}
.banner-right-content a:hover {
  color: var(--secondary--color);
}
.banner-right-content h5 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--primary--color);
}
.banner-right-content h1 {
  margin-bottom: 24px;
}
.banner-right-content p {
  margin-bottom: 26px;
}
.banner-left-con {
  position: relative;
}
.banner-left-con::after {
  content: "";
  background: url(../image/banner-shape-img.html) no-repeat top center;
  width: 117%;
  height: 323px;
  position: absolute;
  top: 40%;
  left: -52px;
  z-index: -1;
}
.banner-right-content {
  padding-top: 122px;
}
/*banner-end*/
/*feature-box*/

.feature-box-con {
  margin-top: -207px;
  position: relative;
  z-index: 1;
  margin-bottom: 80px;
}
.feature-box-item {
  padding: 52px 48px;
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.feature-box-con .row > div {
  border-bottom: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
}
.feature-box-item h5 {
  font-size: 20px;
  font-weight: 600;
  color: var(--secondary--color);
  margin-bottom: 20px;
}
.feature-box-item p {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-color);
}
.feature-box-item:hover,
.service-box-item:hover {
  background: var(--accent-color);
  box-shadow: 0px 20px 30px 0px rgb(0 0 0 / 20%);
  transform: translateY(-20px);
}
.feature-box-item:hover h5,
.feature-box-item:hover p {
  color: var(--primary--color);
}
.feature-box-item:hover img {
  /*filter: brightness(0) invert(1);*/
}
/*feature-box*/
/*quality-system-con*/

.quality-system-left-con h2 {
  margin-bottom: 24px;
}
.quality-system-left-con p {
  margin-bottom: 28px;
}
.quality-system-left-con p:nth-child(3) {
  margin-bottom: 26px;
}
.quality-system-list ul li {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-color);
  margin-left: 22px;
  margin-bottom: 4px;
}
.quality-system-list ul {
  width: 35%;
  float: left;
  margin-bottom: 26px;
}
.quality-system-left-con a {
  text-decoration: none;
}
.quality-system-left-con a:hover,
.submitform-btn:hover {
  background: var(--green-color);
}
.quality-system-list ul li i {
  font-size: 8px;
  position: absolute;
  left: -20px;
  top: 10px;
  color: var(--accent-color);
  box-shadow: 0px 1px 5px 0px var(--accent-color);
  background: var(--accent-color);
  border-radius: 100%;
}
.quality-system-right-con::before {
  content: "";
  background: url(../image/curve-shape-img.png) no-repeat top center;
  width: 110%;
  height: 323px;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
}
.quality-system-right-con {
  margin-top: 40px;
}
/*quality-system-con*/
/*offer-con*/
.offer-inner-con {
  background: var(--secondary--color);
  height: 500px;
}
.shope-btn {
  padding: 11px 39px 12px 39px;
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  border-radius: 30px;
  background: var(--primary--color);
  color: var(--secondary--color);
  box-shadow: 0px 20px 30px 0px rgb(0 0 0 / 20%);
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.shope-btn:hover {
  color: var(--primary--color);
  background: var(--accent-color);
  transform: translateY(-8px);
}
.offer-right-con a {
  text-decoration: none;
}
.offer-right-con h2 {
  margin-bottom: 28px;
}
.offer-right-con h2 span {
  color: var(--accent-color);
  position: relative;
}
.offer-right-con h2 span::after {
  content: "";
  border-bottom: 1px solid var(--accent-color);
  width: 122px;
  height: auto;
  position: absolute;
  bottom: 7px;
  left: 1px;
}
.offer-left-con img {
  position: absolute;
  left: 66px;
  top: 70px;
  height: 400px;
  max-width: 100%;
}
.offer-note {
  background: url(../image/offer-note--bg-img.png) no-repeat top;
  width: 100px;
  height: 130px;
  position: absolute;
  top: 0;
  right: 58%;
  z-index: 1;
}
.offer-note h4 {
  font-size: 30px;
  line-height: 24px;
  font-weight: 700;
  padding-top: 55px;
  text-align: center;
}
.offer-note h4 span {
  font-size: 24px;
}
.offer-right-con {
  margin-top: 70px;
}
/*offer-con*/
/*fun-facts-con*/
.fun-facts-con {
  padding-top: 100px;
  padding-bottom: 120px;
}
.fun-facts-box-item {
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.fun-facts-box-con .row > div {
  border: 1px solid #d6d6d6;
}
.fun-facts-item-content h2 {
  font-weight: 600;
  line-height: 48px;
  margin-bottom: 0;
}
.fun-facts-item-title span {
  font-size: 28px;
  font-weight: 600;
  position: absolute;
  right: -24px;
  top: -5px;
}
.fun-facts-box-item {
  padding: 38px;
}
.fun-facts-item-content {
  padding-left: 20px;
}
.fun-facts-item-content p {
  font-size: 16px;
}
.fun-facts-box-con {
  padding-top: 70px;
}
.fun-facts-box-item:hover {
  background: var(--accent-color);
  background: var(--accent-color);
  box-shadow: 0px 20px 30px 0px rgb(0 0 0 / 20%);
  transform: translateY(-20px);
}
.fun-facts-box-item:hover img {
  filter: brightness(0) invert(1);
}
.fun-facts-box-item:hover h2 {
  color: var(--primary--color);
}
.fun-facts-box-item:hover span {
  color: var(--primary--color);
}
.fun-facts-box-item:hover p {
  color: var(--primary--color);
}
/*fun-facts-con*/
/*form-section*/
.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 22px 30px 22px 19px;
  height: auto !important;
  border-radius: 20px;
  border: 1px solid #e5e5e5;
  font-size: 16px;
  color: var(--text-color);
  font-weight: 500;
  margin-bottom: 30px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-color);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  box-shadow: none;
  border-color: #e5e5e5;
}
.contact-form textarea {
  height: 148px !important;
  resize: none;
}
.contact-form label {
  font-size: 14px;
  font-weight: 600;
  background: var(--green-color);
  padding: 10px 20px 7px 15px;
  margin-bottom: 0;
  margin-left: 28px;
  line-height: 14px;
}
.contact-form button:hover {
  background: var(--green-color);
}
.form-main-con p {
  margin-bottom: 73px;
}
.form-main-con h2 {
  margin-bottom: 24px;
}
.form-main-con,
.quality-system-con,
.banner-con {
  overflow: hidden;
}
.form-left-con::before {
  content: "";
  /*	background: url(../image/curve-shape-img.png) no-repeat top center;*/
  width: 115%;
  height: 323px;
  position: absolute;
  top: 50%;
  left: -48px;
  z-index: -1;
}
/* .contact-form button{
	box-shadow: none;
} */
/*form-section*/
/*slider-section*/
.slider-inner-con {
  background: var(--secondary--color);
  padding: 132px 95px 165px 95px;
  margin-bottom: 120px;
}
.slider-left-con h2 {
  margin-bottom: 29px;
}
.slider-left-con {
  padding-top: 56px;
}
.slider-left-con p {
  font-size: 16px;
  color: var(--accent-color);
  line-height: 20px;
}
.auther-title h4 {
  line-height: 24px;
  margin-bottom: 5px;
}
.auther-title p {
  color: var(--accent-color);
}
.auther-con + p {
  clear: both;
}
.auther-con {
  margin-bottom: 16px;
}
.auther-title {
  margin-left: 26px;
  margin-top: 18px;
  position: relative;
  top: 20px;
}
.slider-inner-con .carousel-control-prev {
  left: -9px;
  bottom: -74px !important;
  top: auto !important;
  justify-content: flex-start;
  width: 47px;
  height: 40px;
  background: var(--primary--color);
  color: var(--secondary--color);
  opacity: 1;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.slider-inner-con .carousel-control-next {
  right: auto;
  left: 38px;
  bottom: -74px !important;
  top: auto !important;
  justify-content: flex-start;
  width: 47px;
  height: 40px;
  background: var(--primary--color);
  color: var(--secondary--color);
  opacity: 1;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.slider-inner-con .carousel-control-next i,
.slider-inner-con .carousel-control-prev i {
  font-size: 16px;
}
.slider-inner-con .carousel-control-prev i {
  padding-left: 12px;
}
.slider-inner-con .carousel-control-next-icon {
  background: none;
}
.slider-inner-con .carousel-control-prev-icon {
  background: none;
}
.slider-inner-con .carousel-control-next:focus,
.slider-inner-con .carousel-control-next:hover,
.slider-inner-con .carousel-control-prev:hover,
.slider-inner-con .carousel-control-prev:focus {
  opacity: 1;
  background: #032230;
  color: var(--primary--color);
}
/*slider-section*/
/*mobile-app-section*/
.mobile-app-left-con::before {
  content: "";
  background: url(../image/mobile-app-shape-img.png) no-repeat top center;
  width: 100%;
  height: 323px;
  position: absolute;
  top: 84px;
  left: 0;
  z-index: -1;
}
.mobile-app-btn a {
  text-decoration: none;
  padding: 17px 25px;
}
.mobile-app-btn a:last-child {
  margin-left: 10px;
  padding: 17px 32px 17px 30px;
}
.mobile-app-btn a i {
  padding-right: 10px;
  font-weight: 100;
}
.mobile-app-btn a:first-child {
  background-color: var(--green-color);
}
.mobile-app-right-con h2 {
  margin-bottom: 26px;
}
.mobile-app-right-con p {
  margin-bottom: 28px;
}
.mobile-app-right-con p:nth-child(3) {
  margin-bottom: 34px;
}
.mobile-app-btn a {
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.mobile-app-btn a:hover {
  transform: translateY(-8px);
}
/*mobile-app-section*/
/*news-letter-section*/
.news-letter-inner-con {
  background: var(--secondary--color);
  padding: 72px 95px;
  margin-bottom: 56px;
}
.news-letter-input-feild {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 20px 30px 0px rgb(0 0 0 / 20%);
}
.news-letter-input-feild input {
  border: none;
  padding: 23px 30px 23px 20px;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
}
.news-letter-input-con button {
  background: var(--accent-color);
  border: none;
  font-size: 24px;
  color: var(--primary--color);
  position: absolute;
  right: 0;
  top: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 17px 25px;
}
.news-letter-input-con button:hover {
  background: var(--green-color);
}
.news-letter-input-con button i {
  font-size: 16px;
  font-weight: 600;
}
.news-letter-input-con button {
  outline: none;
}
.news-letter-input-feild input:focus {
  outline: none;
}
.news-letter-title {
  margin-top: 6px;
}
.news-letter-input-con button {
  cursor: pointer;
}
/*news-letter-section*/
/*logo-section*/
.logo-inner-con {
  padding-bottom: 48px;
  border-bottom: 1px solid #f0f0f0;
}
.logo-con {
  margin-bottom: 80px;
}
.logo-inner-con img {
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.logo-inner-con img:hover {
  transform: translateY(-8px);
}
/*logo-section*/
/*weight-footer-section*/
.weight-footer-content p {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 36px;
  color: var(--text-color);
}
.weight-footer-content ul li {
  font-size: 16px;
  color: var(--text-color);
  text-decoration: none;
  line-height: 16px;
}
.weight-footer-content ul li:hover {
  color: var(--green-color);
}
.weight-footer-content ul li {
  margin-bottom: 14px;
}
.weight-footer-content ul li span {
  color: var(--green-color);
  font-weight: 700;
}
.weight-footer-content h5 {
  font-size: 20px;
  color: var(--secondary--color);
  margin-bottom: 32px;
  font-weight: 600;
}
.weight-footer-content figure {
  margin-bottom: 32px;
}
.weight-social-list a,
.professional-box-social-list ul li a,
.professional-box a {
  text-decoration: none;
}
.weight-social-list a i,
.professional-box-social-list ul li a i {
  width: 30px;
  height: 30px;
  margin-right: 4px;
  background: #cbcbcb;
  border-radius: 50%;
  font-size: 16px;
}
.weight-social-list a i:hover {
  background: var(--green-color);
}
.weight-footer-inner-con {
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}
.weight-footer-con {
  margin-bottom: 30px;
}
.weight-footer-content ul li i {
  color: var(--green-color);
  padding-right: 10px;
}
.weight-footer-content ul li {
  font-size: 16px;
  color: var(--text-color);
}
.weight-social-list ul li {
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.weight-social-list ul li:hover {
  transform: translateY(-8px);
}
.weight-footer-inner-con
  .row
  .col-lg-3:last-child
  .weight-footer-content
  ul
  li:last-child {
  line-height: normal;
}
.weight-footer-inner-con
  .row
  .col-lg-3:last-child
  .weight-footer-content
  ul
  li:last-child:hover {
  color: var(--text-color);
}
/*weight-footer-section*/
/*footer-section*/
.left-curve-img{
    position: absolute;
    top: 22%;
	left: 20px;
}
.right-curve-img {
    position: absolute;
    top: 58%;
    right: 10px;
}
.quality-system-right-con .left-curve-img{
    top: 37%;
    left: -50%;
	right: 5px;
}
.quality-system-right-con .right-curve-img{
	position: absolute;
    top: 75%;
}
.form-left-con .left-curve-img,
.faq-system-con .left-curve-img{
	top: 29%;
    right: 99px;
    transform: rotateZ(179deg);
	left: auto !important;
} 
.form-left-con .right-curve-img{
	top: 68%;
    left: 0;
	right: auto;
}
.carousel-control-next i{
	position: relative;
	left: 22px;
}
.generic-banner-content{
	padding: 95px 0;
}
.generic-banner-content h1{
	margin-bottom: 40px;
}
.Schedule-con{
	padding: 120px 0;
	background:#fafafa ;
}
.Schedule-box-item{
	background:var(--primary--color) ;
	padding: 36px 26px;
	box-shadow: -1px 9px 10px 0px rgb(0 0 0 / 20%);
    height: 100%;
	display: flex
}
.Schedule-heading h2,
.contact-page-form-txt h2{
	margin-bottom: 70px;
}
.Schedule-box-item:after{
	content: "";
	position: absolute;
	top: 38px;
	right: 0;
	width: 120px;
	height: 120px;
	background:url("../image/Schedule-faded-icon1.png") no-repeat center right;
}
.Schedule-box .row .col-lg-6:nth-child(2) .Schedule-box-item:after{
	background:url("../image/Schedule-faded-icon2.png") no-repeat center right;
}
.Schedule-box .row .col-lg-6:nth-child(3) .Schedule-box-item:after{
	background:url("../image/Schedule-faded-icon3.png") no-repeat center right;
}
.Schedule-box .row .col-lg-6:nth-child(4) .Schedule-box-item:after{
	background:url("../image/Schedule-faded-icon4.png") no-repeat center right;
}
.Schedule-box-title{
	padding-left: 28px;
}
.Schedule-box-title span{
	font-size: 16px;
	font-weight: 400;
	color: var(--text-color);
}
.Schedule-box-title h5{
	margin-bottom: 18px;
}
.contact-page-form-con{
	padding: 120px 0;
}
.contact-form-plan-box input,
.contact-form-plan-box textarea,
.contact-form-plan-box select{
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 20px 18px 24px 26px;
    font-size: 16px;
    color: var(--text-color);
	margin-bottom: 30px;
}
.contact-form-plan-box input::placeholder,
.contact-form-plan-box textarea{
	color: var(--text-color);
}
.contact-form-plan-box select{
	height: auto !important;
}
.contact-form-plan-box input:focus,
.contact-form-plan-box textarea:focus,
.contact-form-plan-box select:focus{
	box-shadow: none;
	outline: none;
	border-color: #e5e5e5;
}
.contact-form-plan-box textarea{
	height: 148px;
	resize: none;
}
.submitform-btn{
	border: none;	
}
.submitform-btn:focus{
	outline: none;
}
.map-con{
	margin-bottom: 100px;
}
iframe{
  height: 360px;
  width: 100%;
}
.submitform-btn{
	cursor: pointer;
}
/*contact-page-css*/
@media only screen and (max-width: 767px) {
    .contact-page-map-section iframe {
        height: 300px !important; /* Reduces height on mobile */
    }
}
.Experince-section {
  background: #fafafa;
}
.Experince-section .left-curve-img {
  top: 29%;
  left: -74%;
}
.Experince-section .right-curve-img {
  top: 78%;
  right: 16px;
}
.core-vaule-box-item figure {
  position: absolute;
}
.core-vaule-box-item img,
.Schedule-box-item:hover img {
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.core-vaule-box-item img:hover,
.Schedule-box-item:hover img {
  transform: translateY(-8px);
}
.core-vaule-box-item {
  margin-bottom: 38px;
}
.core-vaule-box-title {
  padding-left: 95px;
}
.core-vaule-con {
  overflow: hidden;
}
.core-vaule-box-title h5 {
  margin-bottom: 20px;
}
.core-vaule-box-title span {
  font-size: 16px;
  color: var(--text-color);
  font-weight: 400;
}
.core-vaule-title h2 {
  margin-bottom: 24px;
}
.core-vaule-title p {
  margin-bottom: 50px;
  padding-right: 37px;
}
.core-vaule-con {
  padding-top: 120px;
}
.about-fun-facts-con {
  background: var(--secondary--color);
  padding: 100px 29px 77px 36px;
}
.about-fun-facts-title h2 {
  margin-bottom: 70px;
}
.about-fun-facts-con .fun-facts-box-con .row > div {
  border-color: var(--secondary--color);
}
.about-fun-facts-con .fun-facts-box-item {
  padding: 33px 30px;
}
.professional-box-item {
  border: 1px solid #ececec;
  padding: 30px 33px;
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
  height: 365px;
}
.professional-box-item img {
  margin-bottom: 37px;
}
.professional-box-item h5 {
  margin-bottom: 4px;
}
.professional-box-item span {
  margin-bottom: 26px;
  font-size: 16px;
  color: var(--text-color);
}
.professional-box-item small {
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}
.professional-con {
  /* padding: 120px 0; */
}
.professional-title h2 {
  margin-bottom: 24px;
}
.professional-title p {
  margin-bottom: 73px;
}
.professional-box-item:hover {
  transition: all 0.6111s ease;
  background: #ff8800;
  transform: translateY(-20px);
  border: transparent;
}
.professional-box-item:hover h5,
.professional-box-item:hover small,
.professional-box-item:hover span {
  color: var(--primary--color);
}
.professional-box-item:hover .professional-box-social-list ul li a i {
  background: #ffac4d;
  color: var(--primary--color);
}
.core-vaule-con .form-left-con .left-curve-img {
  top: 31%;
  right: 58px;
}
.faq-system-con .left-curve-img {
  top: 31%;
  right: 81px;
}
.faq-system-con .right-curve-img {
  top: 78%;
  left: -255px;
}
.Experince-section {
  padding-top: 50px;
}
/*service page css*/
.service-page-vaule-con {
  background: #fafafa;
}
.service-box-con {
  padding: 120px 0;
}
.service-box-inner-con .row > div {
  border: 1px solid #bababa;
}
.service-box-item {
  padding: 54px 47px 50px 47px;
  transform: scale(1);
  transition: all 0.6111s ease;
}
.service-box-item h5 {
  margin-bottom: 20px;
}
.service-box-item span {
  font-size: 16px;
  color: var(--text-color);
}
.service-box-item:hover img {
  filter: brightness(0) invert(1);
}
.service-box-item:hover h5 {
  color: var(--primary--color);
}
.service-box-item:hover span {
  color: var(--primary--color);
}
.service-box-img {
  padding: 50px 0;
}
.professional-box .row:first-child {
  margin-bottom: 40px;
}
.faq-con {
  padding: 120px 0;
}
.faq-con button {
  font-size: 20px;
  color: var(--secondary--color);
  text-decoration: none;
  font-weight: 600;
  text-align: left;
}
.faq-con button:hover,
.faq-con button:focus {
  text-decoration: none;
  color: var(--secondary--color);
}
.faq-con .card-header button {
  padding: 30px 36px;
}
.faq-con .card-header {
  background: none;
  border-color: #eeeeee;
  border-radius: 5px;
  padding: 0;
  border-bottom: 0;
}
.faq-con .card {
  margin-bottom: 30px;
}
.faq-con .card-body {
  background: var(--accent-color);
  color: var(--primary--color);
  padding: 0 36px 30px 36px;
  font-size: 16px;
}
.faq-con .card-header:focus button {
  color: var(--primary--color);
}
.card-header:hover {
  border-color: transparent;
  border-radius: 0;
}
.faq-con button[aria-expanded="true"] {
  background: var(--accent-color);
  width: 100%;
  color: var(--primary--color);
  border-radius: 0;
  text-align: left;
}

.faq-system-con .quality-system-right-con::before {
  top: 36%;
}
.contact-form select,
.select-form {
  appearance: none;
}
.form-main-con i {
  position: absolute;
  top: 58px;
  right: 46px;
}
.form-main-con .down-icon {
  position: absolute;
  top: 28px;
  right: 46px;
}
.contact-form-plan-box .down-icon {
  position: absolute;
  top: 25px;
  right: 24px;
}
.fa-angle-down {
  color: var(--text-color);
}


/*product page */

/* ==========================================================================
   PRODUCT TABLE SECTION STYLES
   (Paste this into your style.css file)
   ========================================================================== */

/* --- 1. Container & Box Styling --- */
.professional-con {
    background-color: #f8fbff;
    padding: 80px 0;
}

.professional-box {
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0, 74, 90, 0.08);
    padding: 30px;
    border-top: 5px solid #1da678; /* Brand Green Top Border */
}

/* --- 2. Search Bar Customization (DataTables) --- */
.dataTables_wrapper .dataTables_filter input {
    border: 2px solid #eef2f5 !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    outline: none;
    transition: border-color 0.3s;
    width: 100%;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #1da678 !important; /* Green focus border */
}

/* --- 3. Desktop Table Styling --- */
table#example {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
}

/* Table Header */
table#example thead th {
    background-color: #004a5a !important; /* Navy Blue */
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 18px 15px !important;
    border: none;
}

/* Rounded Corners for Header */
table#example thead th:first-child { border-top-left-radius: 10px; }
table#example thead th:last-child { border-top-right-radius: 10px; }

/* Table Body Cells */
table#example tbody td {
    padding: 15px !important;
    vertical-align: middle !important;
    color: #555;
    font-weight: 500;
    border-bottom: 1px solid #f0f4f8 !important;
}

/* Row Hover Effect */
table#example tbody tr:hover {
    background-color: #f0fdf9 !important; /* Mint Green Hover */
    transform: scale(1.005);
    transition: all 0.2s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    position: relative;
    z-index: 5;
}

/* Specific Column Highlighting */
table#example tbody td:nth-child(3) { /* Product Name */
    color: #004a5a;
    font-weight: 700;
}

table#example tbody td:nth-child(5) { /* CAS Number */
    font-family: monospace;
    font-weight: 700;
    color: #1da678;
}

/* --- 4. Button Styling (Outline Styles) --- */
.professional-box .navbar-btn {
    padding: 8px 20px;
    font-size: 13px;
    border-radius: 50px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-block;
    text-align: center;
    transition: all 0.3s ease;
    width: 100%;
    white-space: nowrap;
    box-shadow: none !important;
}

/* "View Details" - Green Outline */
.professional-box a[href*="product-detail"] {
    background: transparent !important;
    color: #1da678 !important;
    border: 2px solid #1da678 !important;
}
.professional-box a[href*="product-detail"]:hover {
    background: #1da678 !important;
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(29, 166, 120, 0.3) !important;
    transform: translateY(-2px);
}

/* "Download" - Navy Outline */
.professional-box a[download] {
    background: transparent !important;
    color: #004a5a !important;
    border: 2px solid #004a5a !important;
}
.professional-box a[download]:hover {
    background: #004a5a !important;
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(0, 74, 90, 0.3) !important;
    transform: translateY(-2px);
}

/* --- 5. Mobile Responsiveness (Card View Transformation) --- */
@media only screen and (max-width: 991px) {
    
    .professional-con { 
        padding: 40px 0; 
    }
    
    /* 1. Force table elements to behave like block elements */
    .professional-box table#example, 
    .professional-box table#example tbody, 
    .professional-box table#example tr, 
    .professional-box table#example td {
        display: block !important;
        width: 100% !important;
    }

    /* 2. Hide Table Header */
    .professional-box table#example thead { 
        display: none; 
    }

    /* 3. Style Rows as "Cards" */
    .professional-box table#example tbody tr {
        background: #fff;
        border: 1px solid #eef2f5;
        border-radius: 12px;
        margin-bottom: 25px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        overflow: hidden;
    }

    /* 4. Style Cells */
    .professional-box table#example tbody td {
        text-align: right;
        padding: 12px 20px !important;
        position: relative;
        padding-left: 50% !important; /* Make space for label */
        border-bottom: 1px solid #f9f9f9 !important;
        min-height: 40px;
    }

    /* 5. Add Labels (The "Key" on the left) */
    .professional-box table#example tbody td::before {
        content: attr(data-label);
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 700;
        font-size: 12px;
        color: #999;
        text-transform: uppercase;
    }

    /* 6. Special Handling for Image Cell (Top of Card) */
    .professional-box table#example tbody td:nth-of-type(2) {
        text-align: center;
        padding: 20px !important;
        background: #fcfcfc;
    }
    .professional-box table#example tbody td:nth-of-type(2)::before { display: none; }

    /* 7. Special Handling for Buttons (Bottom of Card) */
    .professional-box table#example tbody td:nth-of-type(6),
    .professional-box table#example tbody td:nth-of-type(7) {
        padding: 10px 20px !important;
        text-align: center;
        padding-left: 20px !important; /* Reset padding for full width */
    }
    .professional-box table#example tbody td:nth-of-type(6)::before,
    .professional-box table#example tbody td:nth-of-type(7)::before { display: none; }
    
    /* 8. Inject Text Labels via CSS */
    .professional-box table#example tbody td:nth-of-type(1)::before { content: "Sr. No"; }
    .professional-box table#example tbody td:nth-of-type(3)::before { content: "Product Name"; }
    .professional-box table#example tbody td:nth-of-type(4)::before { content: "Category"; }
    .professional-box table#example tbody td:nth-of-type(5)::before { content: "CAS No."; }
}


/* .professional-box-social-list ul li a i:hover {
    background: #ffffff;
    color: #52656d !important;
} */

/* =========================================
   UNIVERSAL RESPONSIVE TABLE (All Mobile Widths)
   ========================================= */

/* 1. Base Logic: Switch from Table to "Card View" 
   Triggered for Tablets and all Mobiles (< 992px) */
@media only screen and (max-width: 991px) {
    
    .professional-con {
        padding: 30px 0;
    }

    /* Force all table elements to behave like block elements */
    .professional-box table#example,
    .professional-box table#example tbody,
    .professional-box table#example tr,
    .professional-box table#example td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box; /* Crucial: Padding won't add to width */
    }

    /* Hide the Desktop Table Header */
    .professional-box table#example thead {
        display: none;
    }

    /* Style the Rows as "Cards" */
    .professional-box table#example tbody tr {
        background: #ffffff;
        margin-bottom: 25px; /* Space between cards */
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        border: 1px solid #eef2f5;
        overflow: hidden; 
    }

    /* Style the Cells (The Content) */
    .professional-box table#example tbody td {
        text-align: left !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid #f4f4f4 !important;
        min-height: auto !important;
        
        /* THE "FIT ANYWHERE" MAGIC RULES */
        white-space: normal !important;        /* Allow wrapping */
        word-wrap: break-word !important;      /* Break long words */
        overflow-wrap: anywhere !important;    /* Break chemical strings exactly where needed */
        hyphens: auto;                         /* Add hyphens for readability */
    }

    /* The "Label" (e.g., PRODUCT NAME) - Appears above text */
    .professional-box table#example tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 8px;
        font-weight: 700;
        color: #1da678; /* Brand Green */
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Specific Cell Styling */
    .professional-box table#example tbody td:nth-of-type(1)::before { content: "Sr. No"; }
    .professional-box table#example tbody td:nth-of-type(3)::before { content: "Product Name"; }
    .professional-box table#example tbody td:nth-of-type(4)::before { content: "Category"; }
    .professional-box table#example tbody td:nth-of-type(5)::before { content: "CAS No."; }

    /* Hide labels for Image and Buttons */
    .professional-box table#example tbody td:nth-of-type(2)::before,
    .professional-box table#example tbody td:nth-of-type(6)::before,
    .professional-box table#example tbody td:nth-of-type(7)::before { 
        display: none; 
    }

    /* Image Cell Styling */
    .professional-box table#example tbody td:nth-of-type(2) {
        text-align: center !important;
        background: #f8fbff;
        padding: 25px !important;
        border-bottom: 1px dashed #e1e8f0 !important;
    }

    /* Ensure Image fits within the card */
    .professional-box table#example tbody td:nth-of-type(2) img {
        max-width: 100% !important;
        height: auto !important;
        display: inline-block;
    }

    /* Button Styling */
    .professional-box table#example tbody td:nth-of-type(6),
    .professional-box table#example tbody td:nth-of-type(7) {
        padding: 10px 15px !important;
        border: none !important;
    }

    .professional-box .navbar-btn {
        width: 100%;       /* Full width buttons */
        display: block;
        padding: 12px;     /* Easier to tap */
    }
}

/* 2. Small Mobile Adjustments (Narrow phones < 400px) */
@media only screen and (max-width: 400px) {
    
    .professional-con {
        padding: 15px 0; /* Less outer padding */
    }

    /* Tighter padding inside cards to save space */
    .professional-box table#example tbody td {
        padding: 12px 15px !important;
        font-size: 14px; /* Slightly smaller text */
    }

    /* Image area slightly smaller */
    .professional-box table#example tbody td:nth-of-type(2) {
        padding: 15px !important;
    }

    /* Reduce font size of the label */
    .professional-box table#example tbody td::before {
        font-size: 10px;
        margin-bottom: 4px;
    }
}

/*product page */




/* About page */
/* --- Kalpasthana About Section Styles --- */
/* =========================================
   1. THEME VARIABLES (Medical Blue & Teal)
   ========================================= */
:root {
    --theme-blue: #0b4e96;       /* Deep Medical Blue */
    --theme-teal: #20c997;       /* Clean Teal Accent */
    --theme-dark: #2c3e50;       /* Dark Text */
    --theme-light-bg: #f8fbff;   /* Background tint */
    --theme-white: #ffffff;
}

/* =========================================
   2. FIX: FORCE ICONS VISIBLE (Desktop & Mobile)
   ========================================= */

/* 1. Ensure the icon container is visible and circular */
section.kalpasthana-about-section .feature-card .icon-wrapper {
    display: flex !important;           /* Force flexbox to center icon */
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important;             /* Fixed width for perfect circle */
    height: 80px !important;            /* Fixed height for perfect circle */
    border-radius: 50% !important;
    background-color: #eef2f7 !important; /* Light grey-blue background by default */
    margin: 0 auto 25px auto !important; /* Center horizontally */
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.3s ease-in-out;
}

/* 2. Ensure the Icon itself is Blue and Visible */
section.kalpasthana-about-section .feature-card .icon-wrapper i {
    font-size: 32px !important;         /* Make it big enough */
    color: var(--theme-blue) !important; /* Force Blue color */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    line-height: 1 !important;          /* Reset line-height to prevent offset */
}

/* 3. Hover Effect: Turn Background Blue/Teal, Icon White */
section.kalpasthana-about-section .feature-card:hover .icon-wrapper {
    background: linear-gradient(135deg, var(--theme-blue), var(--theme-teal)) !important;
    transform: scale(1.1); /* Slight pop effect */
}

section.kalpasthana-about-section .feature-card:hover .icon-wrapper i {
    color: var(--theme-white) !important; /* Turn icon white on hover */
}

/* =========================================
   3. FIX: CARD SHAPE & LAYOUT
   ========================================= */

/* Ensure the card has a proper rectangular shape with breathing room */
section.kalpasthana-about-section .feature-card {
    background: var(--theme-white) !important;
    padding: 40px 30px !important;      /* More padding for a cleaner look */
    border-radius: 12px !important;     /* Smooth rounded corners */
    border: 1px solid #eaeaea !important; /* Subtle border definition */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05) !important;
    height: 100% !important;            /* Forces all cards to be same height in a row */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Align content to top */
    text-align: center !important;      /* Center all text */
    min-height: 280px;                  /* Minimum height to prevent squashing */
}

/* Hover State for the Card */
section.kalpasthana-about-section .feature-card:hover {
    transform: translateY(-8px);        /* Lift up */
    box-shadow: 0 15px 30px rgba(11, 78, 150, 0.12) !important;
    border-color: var(--theme-teal) !important;
}

/* Card Titles */
section.kalpasthana-about-section .feature-card h4 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--theme-dark) !important;
    margin-bottom: 15px !important;
    margin-top: 10px !important;
}

/* Card Description text */
section.kalpasthana-about-section .feature-card p {
    font-size: 15px !important;
    color: #666 !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
}

/* =========================================
   4. REST OF THEME (Banner & Text)
   ========================================= */
div.header-and-banner-con-1 {
    background-color: var(--theme-blue) !important;
}
div.header-and-banner-con-1 .overlay-img::before {
    background: linear-gradient(135deg, rgba(11, 78, 150, 0.95), rgba(32, 201, 151, 0.8)) !important;
}
section.kalpasthana-about-section h5.sub-heading {
    color: var(--theme-teal) !important;
    font-weight: 700;
}
section.kalpasthana-about-section h2.main-heading {
    color: var(--theme-dark) !important;
    font-weight: 800;
}
section.kalpasthana-about-section h2.main-heading span {
    color: var(--theme-blue) !important;
}
section.kalpasthana-about-section .vision-quote {
    background: #fff !important;
    border-left: 5px solid var(--theme-blue) !important;
    padding: 30px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
section.kalpasthana-about-section .vision-quote i {
    color: rgba(11, 78, 150, 0.1) !important;
}
/* About page */



/*detail*/
/* --- 1. PRODUCT DETAIL SECTION ONLY --- */
/* --- Product Detail Styling (Image & Description) --- */

/* BIG IMAGE (Desktop) */
.team-detail-con .product-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 15px;
    min-height: 550px; 
    height: 100%;
    padding: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    width: 100%;
    
    /* SPACING FIX: Creates gap between columns on desktop */
    max-width: 95%; 
    margin: 0 auto; 
    
    transition: transform 0.4s ease; 
}

.team-detail-con .product-image-container img {
    width: 100%;
    max-width: 500px; 
    height: auto;
    object-fit: contain;
}

/* Image Hover Animation */
.team-detail-con .product-image-container:hover {
    transform: translateY(-5px); 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}


/* --- PREMIUM DESCRIPTION CARD --- */
.team-detail-con .product-desc-box {
    background: #ffffff;
    padding: 40px; 
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 74, 90, 0.08); 
    border-left: 5px solid #1da678; 
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    
    /* SPACING FIX: Creates gap between columns on desktop */
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
}

/* Card Hover Effect */
.team-detail-con .product-desc-box:hover {
    transform: translateY(-10px); 
    box-shadow: 0 30px 60px rgba(0, 74, 90, 0.15); 
    border-left: 5px solid #004a5a; 
}

.team-detail-con .product-desc-box h2 {
    font-size: 28px;
    font-weight: 800;
    color: #004a5a;
    margin-bottom: 10px;
    line-height: 1.3;
}

.team-detail-con .product-cas {
    font-size: 16px;
    font-weight: 600;
    color: #1da678;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.team-detail-con .product-highlight {
    background: #f8fbff;
    padding: 20px;
    border-radius: 10px;
    border: 1px dashed #b8cdd6;
    color: #555;
    font-size: 15px;
    line-height: 1.6;
    margin-top: 15px;
}

/* --- BUTTON ANIMATIONS --- */
.team-detail-con .action-buttons {
    margin-top: 30px;
    display: flex;
    gap: 15px;
}

.team-detail-con .custom-btn {
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    transition: all 0.3s ease; 
    position: relative;
    z-index: 1;
}

/* Primary Green Button */
.team-detail-con .btn-primary.custom-btn {
    background: linear-gradient(90deg, #1da678 0%, #127a57 100%) !important;
    color: #fff;
    box-shadow: 0 4px 15px rgba(29, 166, 120, 0.3);
}

.team-detail-con .btn-primary.custom-btn:hover {
    transform: translateY(-3px) scale(1.02); 
    box-shadow: 0 10px 25px rgba(29, 166, 120, 0.5);
}

/* Secondary Download Button */
.team-detail-con .btn-outline-dark.custom-btn {
    background: transparent;
    color: #333;
    border: 2px solid #333 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.team-detail-con .btn-outline-dark.custom-btn:hover {
    background-color: #333; 
    color: #fff !important; 
    border-color: #333 !important;
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); 
}

/* --- MOBILE ALIGNMENT --- */
@media (max-width: 991px) {
    .team-detail-con .row {
        flex-direction: column;
        align-items: center;
    }

    .team-detail-con .col-lg-6 {
        width: 100%;
        max-width: 500px; 
    }

    .team-detail-con .product-image-container,
    .team-detail-con .product-desc-box {
        max-width: 100%; /* Reset width for mobile */
    }

    .team-detail-con .product-image-container {
        min-height: auto;
        padding: 30px;
        margin-bottom: 20px;
    }

    .team-detail-con .product-desc-box {
        text-align: center; 
        align-items: center;
        border-left: none; 
        border-top: 5px solid #1da678; 
        padding: 30px 20px;
    }

    .team-detail-con .action-buttons {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }

    .team-detail-con .custom-btn {
        width: 100%;
        margin-left: 0 !important;
    }
}





/* --- Product Specs Table Styling (Left Column) --- */
.specs-box {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-top: 4px solid #1da678; /* Brand Green */
    height: 100%; 
}

.custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

.custom-table th {
    width: 40%;
    background-color: #f8fbfd;
    color: #555;
    font-weight: 600;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: middle;
}

.custom-table td {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    color: #004a5a; /* Brand Blue */
    font-weight: 600;
    vertical-align: middle;
}

/* Rounded corners for the table */
.custom-table tr:first-child th { border-top-left-radius: 10px; }
.custom-table tr:first-child td { border-top-right-radius: 10px; }
.custom-table tr:last-child th { border-bottom: none; border-bottom-left-radius: 10px; }
.custom-table tr:last-child td { border-bottom: none; border-bottom-right-radius: 10px; }

.custom-table tr:hover td {
    background-color: #f0fdf9;
    color: #1da678;
}


/* --- Applications Section Styling (Right Column) --- */
.app-box {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-top: 4px solid #004a5a; /* Brand Blue Accent */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.app-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.app-list li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 18px;
    color: #555;
    line-height: 1.6;
    font-size: 15px;
    transition: transform 0.2s ease;
}

/* Hover effect for list items */
.app-list li:hover {
    transform: translateX(5px);
    color: #004a5a;
}

/* Custom Checkmark Icon */
.app-list li::before {
    content: "\f058"; /* FontAwesome Check Circle */
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    left: 0;
    top: 3px;
    color: #1da678;
    font-size: 18px;
}

/* Mobile adjustment */
@media (max-width: 768px) {
    .specs-box, .app-box { padding: 20px; margin-bottom: 20px; }
    .custom-table th, .custom-table td { padding: 12px; font-size: 14px; }
}



/*detail*/



/*service page css*/

.team-detail-con {
  padding: 100px 0;
  overflow: hidden;
}
.team-professional-con {
  padding-bottom: 100px;
  overflow: hidden;
}

.skills {
  background-color: #ddd;
  width: 100%;
  height: 8px;
  position: relative;
  margin: 62px 0;
  border-radius: 8px;
}
.title-bar {
  position: absolute;
  top: -5px;
}
.skills span {
  float: right;
  margin-top: -24px;
  margin-right: 5px;
  border-radius: 6px;
  color: #fff;
}
.skillbar {
  background-color: var(--green-color);
  width: 0px;
  height: 8px;
  border-radius: 8px;
}
.title-bar h5 {
  position: relative;
  top: -24px;
  color: var(--secondary--color);
  letter-spacing: normal;
}
.skills span {
  float: right;
  margin-top: -24px;
  margin-right: 5px;
  border-radius: 6px;
  color: var(--text-color);
}
.team-contanct {
  margin-bottom: 20px;
}
.experiences-con ul li {
  position: relative;
  margin-bottom: 20px;
  margin-left: 20px;
}
.experiences-con ul li i {
  color: var(--green-color);
  position: absolute;
  left: -20px;
  top: 3px;
}
.team-professional-inner-con {
  border: 1px solid #ececec;
  padding: 60px 33px 0;
}
/********blog section**************/
.blog-con {
  padding-bottom: 120px;
}
.blog-con a {
  text-decoration: none;
}
.blog-item {
  border: 1px solid #e5e5e5;
  overflow: hidden;
}
.blog-item .blog-item-content span {
  font-size: 14px;
  color: var(--accent-color);
}
.blog-item-content {
  padding: 36px 38px;
}
.blog-item-auther-name span:last-child {
  color: #808e94;
  margin-left: 18px;
}
.blog-item-content h4 {
  font-size: 20px;
  line-height: 24px;
  color: var(--secondary--color);
  margin-bottom: 18px;
}
.blog-item-auther-name {
  margin-bottom: 10px;
}
.blog-con p {
  margin-bottom: 55px;
}
.blog-item figure img {
  transition: ease-in-out 0.5s;
}
.blog-item:hover figure img {
  transform: scale(1.1);
}
/********blog section**************/

/* Keep the background styles while adding the navigation buttons styles */
.content {
  text-align: center;
  color: #fff;
}

.cta-button {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.cta-button:hover {
  background-color: #0056b3;
}

.slider-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.slider-button.prev {
  left: 0;
}

.slider-button.next {
  right: 0;
}

.slider-button:hover {
  background: rgba(0, 0, 0, 0.7);
}
.review img {
  width: 93px;
  height: 89px;
  border-radius: 50%;
  object-fit: cover;
}

.quick-links a {
  color: #52656d;
  text-decoration: none;
}

.product-img img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
}
/*Facility css*/

/* --- Facility Page Aesthetic Integration --- */
/* .themed-facility-bg {
    background-color: #fcfdfe;
    padding-bottom: 80px;
}

.text-navy {
    color: #002147;
}

.title-accent-line {
    height: 3px;
    width: 60px;
    background: #007bff;
    margin-top: 15px;
}

.reaction-card {
    border-radius: 15px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e1e8f0;
}

.reaction-data-table td {
    padding: 22px 15px !important;
    border: 1px solid #f0f4f8;
    font-size: 14.5px;
    color: #4a5568;
    font-weight: 500;
    transition: all 0.3s ease;
    vertical-align: middle;
} */


/* --- Chemical Reactions Table Aesthetic Upgrades --- */

/* Container styling for the table sections */
/* .reaction-container, .reaction-card { */

    
    
   /* --- Enhanced Facility Gallery Styling --- */
.bg-light-gray {
    background-color: #f8fbff; /* Softer, cleaner professional blue-tinted gray */
    padding: 100px 0;
}

.facility-gallery-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.1);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.facility-gallery-item img {
    width: 100%;
    height: 280px; /* Uniform height for a clean grid */
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Overlay Styling */
.img-overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 20px 20px;
    background: linear-gradient(to top, rgba(7, 69, 96, 0.9) 0%, rgba(7, 69, 96, 0.4) 60%, transparent 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.4s ease;
}

/* Hover Interactions */
.facility-gallery-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(7, 69, 96, 0.2);
}

.facility-gallery-item:hover img {
    transform: scale(1.1);
}

.facility-gallery-item:hover .img-overlay-text {
    opacity: 1;
    transform: translateY(0);
}

/* Section Header Decoration */
.gallery-title-underliner {
    height: 4px;
    width: 50px;
    background-color: var(--accent-color);
    margin: 15px auto 0;
    border-radius: 2px;
}


/* Header section styling */
.table-header, .reaction-table-header {
    background-color: var(--secondary--color); /* #074560 */
    color: #ffffff;
    padding: 20px;
    text-align: center;
}

.table-header h3 {
    margin-bottom: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Table body and cell styling */
.reaction-table, .reaction-data-table {
    width: 100%;
    border-collapse: collapse;
}

.reaction-table td, .reaction-data-table td {
    padding: 18px 12px;
    border: 1px solid #f0f7f9;
    font-size: 15px;
    color: var(--text-color);
    transition: all 0.3s ease;
    background-color: #fff;
    cursor: default;
}

/* Zebra striping for better readability */
.reaction-table tbody tr:nth-child(even) td, 
.reaction-data-table tbody tr:nth-child(even) td {
    background-color: #f9fdfe;
}

/* Interactive Hover Effects */
.reaction-table td:hover, .reaction-data-table td:hover {
    background-color: var(--accent-color) !important; /* #48c7eb */
    color: #ffffff !important;
    font-weight: 600;
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 5;
    position: relative;
    border-color: var(--accent-color);
}

/* Accent line under the title */
.title-accent-line {
    height: 4px;
    width: 60px;
    background: var(--accent-color);
    margin: 15px auto 0;
    border-radius: 2px;
}

/* Mobile Responsiveness: Stacking cells for small screens */
/* @media (max-width: 767px) {
    .reaction-table td, .reaction-data-table td {
        display: block;
        width: 100% !important;
        border-bottom: 1px solid #f0f7f9;
        text-align: center;
    }
} */

/* --- Professional Facility Page Enhancements --- */

/* Info Cards & Layout */
.facility-intro-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    border-top: 6px solid #003366;
    box-shadow: 0 15px 45px rgba(0, 51, 102, 0.08);
}

.facility-stat-item {
    background: #f0f7ff;
    border-radius: 12px;
    padding: 25px 15px;
    text-align: center;
    border: 1px solid #ddecff;
    transition: 0.3s;
}

.facility-stat-item:hover { transform: translateY(-5px); background: #e1efff; }

.facility-stat-item h4 { color: #003366; font-weight: 800; font-size: 24px; margin-bottom: 5px; }

/* Dynamic Image Gallery */
.facility-gallery-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.facility-gallery-card img { width: 100%; transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.facility-gallery-card:hover img { transform: scale(1.1); }

.gallery-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 25px 15px;
    background: linear-gradient(transparent, rgba(0, 33, 71, 0.9));
    color: #fff;
    font-weight: 600;
    text-align: center;
}

/* Technical Reaction Table */
.reaction-table-wrapper {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
    overflow: hidden;
}

.reaction-table-header { background: #003366; color: #fff; padding: 25px; }

.custom-reaction-table { width: 100%; border-collapse: collapse; }

.custom-reaction-table td {
    padding: 20px 15px;
    border: 1px solid #f2f6f9;
    font-size: 14px;
    color: #444;
    transition: 0.3s;
    width: 33.33%;
}

.custom-reaction-table td:hover {
    background: #007bff;
    color: #fff !important;
    font-weight: 600;
    cursor: default;
}



/* Aesthetic Hover Effect */
.reaction-data-table td:hover {
    background-color: #f0fdf9 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
    cursor: default;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .reaction-data-table td {
        display: block;
        width: 100% !important;
        text-align: center;
    }
}
 




  

/*Facility css*/






/*gallery css*/
#gallery {
  padding-top: 40px;
}
@media screen and (min-width: 991px) {
  #gallery {
    padding: 60px 30px 0 30px;
  }
}

.img-wrapper {
  position: relative;
  margin-top: 15px;
}
.img-wrapper img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.img-overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
.img-overlay i {
  color: #fff;
  font-size: 3em;
}

#overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#overlay img {
  margin: 0;
  width: 80%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  padding: 5%;
}
@media screen and (min-width: 768px) {
  #overlay img {
    width: 60%;
  }
}
@media screen and (min-width: 1200px) {
  #overlay img {
    width: 50%;
  }
}

#nextButton {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
}
#nextButton:hover {
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  #nextButton {
    font-size: 3em;
  }
}

#prevButton {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
}
#prevButton:hover {
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  #prevButton {
    font-size: 3em;
  }
}

#exitButton {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
  position: absolute;
  top: 15px;
  right: 15px;
}
#exitButton:hover {
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  #exitButton {
    font-size: 3em;
  }
}
table, td, th {
    border: 1px solid #ddd;
    text-align: center;
}

table {
    border-collapse: collapse;
    width: 100%;
    background-color: transparent;
    border-spacing: 0px;
}

td{
  padding: 20px;
  font-size:18px;
}

/*slider*/
.owl-carousel .owl-nav {
  display: flex;
  justify-content: space-between;
  position: relative;
  top: -365px;
  font-size: 85px;
  color: aliceblue;
}
.owl-carousel .owl-dots {
  display: none;
}
.owl-carousel .overlay {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #0000006b;
}
.owl-carousel {
  width: 100%;
}
.owl-carousel .item {
  width: 100%;
}
.owl-carousel .content {
  position: relative;
  color: #ffffff;
  padding: 87px;
  text-align: center;
}

.links {
  color: #000000 !important;
}

/* CSS for the zoom effect */
.zoom-effect {
  animation: zoomInOut 10s infinite;
  background-size: 110%; /* Initial zoom level */
}


@keyframes zoomInOut {
  0% {
    background-size: 100%;
  }
  50% {
    background-size: 110%; /* Zoom in effect */
  }
  100% {
    background-size: 100%; /* Zoom out effect */
  }
}

.header-and-banner-con-1 {
  background-color: #138b63;
}

#page {
  display: none;
}
#loading {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  background-image: url("../image/preloader.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 200px;
}
.owl-theme .owl-nav [class*="owl-"]:hover {
  background: none;
  border: 0;
  outline: 0;
}





/* ==========================================================================
   ENHANCED NAVIGATION BAR (Add to bottom of style.css)
   ========================================================================== */

/* --- 1. Navbar Container --- */
.navbar {
    padding: 15px 0 !important; /* Tighter vertical padding for a sleek look */
    transition: all 0.3s ease;
}

/* --- 2. Logo Enhancement --- */
.navbar-brand img {
    max-height: 50px; /* Ensures logo isn't too huge */
    width: auto;
    transition: transform 0.3s ease;
}

.navbar-brand:hover img {
    transform: scale(1.05); /* Subtle zoom on logo hover */
}

/* --- 3. Navigation Links (Menu Items) --- */
.navbar-nav .nav-item {
    padding: 0 15px; /* Balanced spacing between items */
}

.navbar-nav .nav-link {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px !important; /* Professional corporate size */
    font-weight: 600 !important;
    color: #004a5a !important; /* Navy Blue for high contrast */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    transition: color 0.3s ease;
}

/* Animated Underline Effect on Hover */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0px;
    left: 50%;
    background-color: #1da678; /* Green Brand Color */
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover {
    color: #1da678 !important; /* Text turns green on hover */
}

.navbar-nav .nav-link:hover::after {
    width: 100%; /* Line expands from center */
}

/* Active Link State (Optional: if you add 'active' class to current page) */
.navbar-nav .nav-item.active .nav-link {
    color: #1da678 !important;
}

/* --- 4. Contact Button (Call to Action) --- */
.navbar-btn {
    background: linear-gradient(135deg, #1da678 0%, #159f6e 100%) !important; /* Green Gradient */
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    padding: 12px 30px !important;
    border-radius: 50px !important; /* Pill shape */
    box-shadow: 0 4px 15px rgba(29, 166, 120, 0.4) !important; /* Green Glow */
    border: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.navbar-btn i {
    font-size: 16px !important;
}

/* Button Hover Effect */
.navbar-btn:hover {
    background: linear-gradient(135deg, #004a5a 0%, #003845 100%) !important; /* Turns Navy on Hover */
    color: #ffffff !important;
    transform: translateY(-3px) !important; /* Lifts up */
    box-shadow: 0 8px 20px rgba(0, 74, 90, 0.3) !important; /* Navy shadow */
}

/* --- 5. Mobile Menu Toggle Icon --- */
.navbar-toggler {
    border: none !important;
    outline: none !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 74, 90, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* --- 6. Mobile Dropdown Styling --- */
@media (max-width: 991px) {
    .navbar-collapse {
        background: #ffffff;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        margin-top: 15px;
    }
    
    .navbar-nav .nav-item {
        padding: 10px 0;
        border-bottom: 1px solid #f0f4f8;
    }
    
    .navbar-nav .nav-item:last-child {
        border-bottom: none;
    }
    
    .navbar-btn {
        width: 100%;
        justify-content: center;
        margin-top: 15px;
    }
}



/* ==========================================================================
   FINAL ACTIVE PAGE HIGHLIGHT (Text-Only Wrap & Mobile Fix)
   ========================================================================== */

/* --- Desktop & General Active State --- */
.navbar-nav .nav-item.active .nav-link {
    color: #004a5a !important; 
    background: rgba(29, 166, 120, 0.15); /* Soft Green Background */
    font-weight: 700 !important;
    border-radius: 50px; 
    padding: 8px 20px !important; 
    box-shadow: 0 4px 15px rgba(29, 166, 120, 0.2);
    
    /* CRITICAL FIX: Wraps background only around the text */
    width: fit-content; 
    display: inline-block; 
    margin: 0 auto; /* Centers it if needed */
    
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Remove any old underlines */
.navbar-nav .nav-item.active .nav-link::after {
    display: none !important; 
}

/* Green Dot Indicator (Desktop Only) */
.navbar-nav .nav-item.active .nav-link::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: #1da678;
    border-radius: 50%;
    opacity: 0.8;
}

/* --- Mobile Fixes --- */
@media (max-width: 991px) {
    /* 1. Reset Container Alignment */
    .navbar-nav .nav-item {
        text-align: left; /* Align text to the left */
        padding-left: 0;
    }

    /* 2. Mobile Active Link Styling */
    .navbar-nav .nav-item.active .nav-link {
        /* Keep it wrapping ONLY the text */
        width: fit-content;
        display: inline-block;
        
        /* Appearance */
        background: rgba(29, 166, 120, 0.1); 
        color: #1da678 !important;
        border-radius: 6px; /* Slightly squarer on mobile */
        
        /* Fix Spacing & Alignment */
        margin-left: 15px; /* Indent slightly from the screen edge */
        padding: 8px 15px !important;
        transform: none; /* No lifting on mobile */
        box-shadow: none;
    }

    /* Hide the dot on mobile */
    .navbar-nav .nav-item.active .nav-link::before {
        display: none;
    }
}
/* ==========================================================================
   MOBILE ALIGNMENT & LOGO FIX (Add to bottom of style.css)
   ========================================================================== */

@media (max-width: 991px) {

    /* --- 1. Fix Mobile Logo Size --- */
    .navbar-brand img {
        width: 180px !important; /* Increased from 125px to 180px */
        max-width: 70%; /* Prevents it from being too wide on very small screens */
        height: auto;
    }

    /* --- 2. Center Align Navigation Menu --- */
    .navbar-collapse {
        text-align: center !important;
    }

    .navbar-nav {
        width: 100%;
        padding-right: 0;
    }

    .navbar-nav .nav-item {
        text-align: center !important; /* Forces menu items to center */
        padding-left: 0 !important;
        margin: 5px 0; /* Add spacing between items */
    }

    /* --- 3. Center the "Active" Green Pill --- */
    .navbar-nav .nav-item.active .nav-link {
        margin: 0 auto !important; /* Centers the green pill */
        margin-left: auto !important; /* Overrides previous left indent */
        display: inline-block;
        padding: 8px 30px !important; /* Wider pill for better look */
    }

    /* --- 4. Center the Contact Button --- */
    .navbar-btn {
        margin: 20px auto 10px auto !important; /* Centers button with spacing */
        display: inline-flex !important;
        width: auto !important; /* Button fits text size instead of full width */
        min-width: 200px;
        justify-content: center;
    }

    /* --- 5. Center Banner & Page Content --- */
    /* Ensures main text on the page is also centered */
    .banner-right-content,
    .offer-right-con,
    .feature-box-item,
    .fun-facts-heading,
    .fun-facts-content {
        text-align: center !important;
    }
}
/* ==========================================================================
   FINAL MOBILE FIXES (Logo Aspect Ratio & Nav Alignment)
   Add this to the very end of style.css
   ========================================================================== */

@media (max-width: 991px) {

    /* --- 1. Fix Stretched Logo --- */
    .navbar-brand img {
        width: 160px !important;       /* Sets a fixed width */
        height: auto !important;       /* CRITICAL: Allows height to adjust automatically */
        max-height: none !important;   /* Removes any height limits causing squishing */
        object-fit: contain !important; /* Ensures image is never distorted */
        margin-top: 5px;
    }

    /* --- 2. Fix "Home" & Menu Alignment --- */
    /* Ensure the container is centered */
    .navbar-collapse {
        text-align: center !important;
        padding: 20px 10px !important;
    }

    .navbar-nav {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar-nav .nav-item {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        padding: 5px 0 !important;
        margin: 0 !important;
        border: none !important; /* Removes separator lines that might look off-center */
    }

    /* --- 3. Perfectly Center the Active "Pill" (Home) --- */
    .navbar-nav .nav-item.active .nav-link {
        display: inline-block !important; /* Allows width to fit text */
        width: auto !important;           /* Do not stretch full width */
        margin: 0 auto !important;        /* Auto margins on left/right center it */
        
        /* Visuals */
        background: rgba(29, 166, 120, 0.1); 
        color: #1da678 !important;
        padding: 8px 30px !important;
        border-radius: 50px;
    }

    /* --- 4. Center Contact Button --- */
    .navbar-btn {
        display: table !important; /* Trick to center elements that refuse to center */
        margin: 15px auto 0 auto !important;
    }
}

/* ==========================================================================
   FACILITY PAGE: CHEMICAL REACTION TABLE
   Matches Product Page Theme (Mint Green & Navy)
   ========================================================================== */

/* 1. Main Card Container */
.reaction-card {
    background: #ffffff;
    border-radius: 20px; /* Soft modern corners */
    box-shadow: 0 15px 50px rgba(0, 74, 90, 0.08) !important; /* Deep Navy Shadow */
    border-top: 5px solid #1da678; /* Top Green Brand Line */
    padding: 40px;
    border: none !important;
    position: relative;
    overflow: visible; /* Allows hover effects to pop out */
}

/* 2. Table styling */
.reaction-data-table {
    border-collapse: separate; 
    border-spacing: 10px; /* Adds space between the "cards" */
    width: 100%;
}

/* 3. Individual Cell Styling (The "Cards") */
.reaction-data-table td {
    padding: 20px 15px !important;
    font-size: 16px;
    font-weight: 600;
    color: #555; /* Neutral dark gray text */
    background: #ffffff;
    
    /* Card borders and shape */
    border: 1px solid #eef2f5 !important;
    border-radius: 12px;
    
    /* Centering */
    text-align: center;
    vertical-align: middle;
    
    /* Animation setup */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 4. HOVER EFFECT (Lift + Mint Green) */
.reaction-data-table td:hover {
    transform: translateY(-8px); /* Higher lift */
    box-shadow: 0 15px 30px rgba(29, 166, 120, 0.15); /* Green glow shadow */
    
    /* Theme Colors */
    background-color: #f0fdf9 !important; /* Soft Mint Green Background */
    border-color: #1da678 !important; /* Solid Green Border */
    color: #004a5a !important; /* Navy Blue Text for contrast */
    
    /* Ensure it sits on top */
    position: relative;
    z-index: 10;
}

/* 5. Mobile Responsiveness (Stack items) */
@media (max-width: 768px) {
    .reaction-card {
        padding: 20px;
    }

    /* Break table structure to stack items */
    .reaction-data-table, 
    .reaction-data-table tbody, 
    .reaction-data-table tr, 
    .reaction-data-table td {
        display: block;
        width: 100%;
    }

    .reaction-data-table tr {
        margin-bottom: 0;
    }

    /* Mobile Cell Styling */
    .reaction-data-table td {
        margin-bottom: 15px; /* Space between mobile cards */
        box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Slight shadow */
    }
}


/* ==========================================================================
   FINAL BANNER DESIGN (Professional Green Accent - No White Space)
   Replace the previous banner block with this code.
   ========================================================================== */

/* 1. Target ONLY the Banner Section */
.header-and-banner-con-1 {
    position: relative;
    background-attachment: scroll !important; /* Changed to scroll for better mobile support */
    background-position: center center;
    background-size: cover;
    z-index: 1;
    border-bottom: none; /* Removed default borders */
}

/* 2. The Gradient Overlay (Navy -> Green) */
.header-and-banner-con-1::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Rich Gradient: Navy Blue to Brand Green */
    background: linear-gradient(135deg, rgba(0, 74, 90, 0.95) 0%, rgba(0, 51, 102, 0.9) 60%, rgba(29, 166, 120, 0.8) 100%);
    z-index: -1;
}

/* 3. The Bottom Accent Line (Replaces the "White Cross Line") */
.header-and-banner-con-1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px; /* A solid, professional strip */
    background: #1da678; /* Your Brand Green */
    z-index: 2;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.2); /* Subtle shadow above the line for depth */
}

/* 4. Disable old overlay styles */
.header-and-banner-con.banner-overlay-img::before,
.header-and-banner-con-1.banner-overlay-img::after {
    display: none !important;
    content: none !important;
}

/* 5. Compact Size Settings */
.generic-banner-content {
    padding: 60px 0 70px 0 !important; /* Compact vertical spacing */
}

/* 6. Typography */
.generic-banner-content h1 {
    font-size: 42px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    margin-bottom: 12px !important;
    color: #ffffff;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
    animation: fadeInUp 0.8s ease-out;
}

.generic-banner-content p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    opacity: 0.95;
    max-width: 750px;
    margin: 0 auto !important;
    color: #eefbf6; /* Very light green-white for text */
    animation: fadeInUp 0.8s ease-out 0.2s;
    animation-fill-mode: both;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .generic-banner-content {
        padding: 40px 0 50px 0 !important;
    }
    .generic-banner-content h1 {
        font-size: 30px !important;
    }
    .header-and-banner-con-1::after {
        height: 6px; /* Slightly thinner line on mobile */
    }
}

/* Animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 15px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}





/* ==========================================================================
   ENHANCED CONTACT PAGE THEME (Polished & Interactive)
   Applies to contact.html
   ========================================================================== */

/* --- 1. Section Backgrounds --- */
.Schedule-con {
    background-color: #f8fbff !important; 
    padding: 100px 0 !important;
}

.contact-page-form-con {
    background-color: #ffffff !important;
    padding: 100px 0 !important;
}

/* --- 2. "Get In Touch" Info Cards (Now with Gradient Icons) --- */
.Schedule-box-item {
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(0, 74, 90, 0.08) !important;
    padding: 40px 30px !important;
    border-top: 5px solid #1da678 !important; 
    
    /* Layout Reset */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    text-align: center !important;
    height: 100% !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Bouncy transition */
}

.Schedule-box-item:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 25px 60px rgba(29, 166, 120, 0.18) !important;
    border-color: #1da678 !important;
}

/* Gradient Icon Container */
.Schedule-box-item figure {
    background: linear-gradient(135deg, #e0fcf4 0%, #cbfbe9 100%) !important; /* Subtle Gradient */
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 25px 0 !important;
    float: none !important;
    box-shadow: 0 8px 20px rgba(29, 166, 120, 0.15) !important;
    transition: transform 0.4s ease !important;
}

.Schedule-box-item:hover figure {
    transform: scale(1.1) rotate(5deg) !important; /* Icon pops and rotates slightly */
}

/* Remove old pseudo-elements */
.Schedule-box-item::after { display: none !important; }

/* Resize Icons */
.Schedule-box-item figure img {
    max-width: 45px !important;
    height: auto !important;
}

/* Card Text */
.Schedule-box-title {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    padding-left: 0 !important;
}

.Schedule-box-title h5 {
    color: #004a5a !important; 
    font-weight: 800 !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.Schedule-box-title span {
    color: #555 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
}

/* --- 3. Contact Form Styling (Clean & Modern) --- */
.contact-form-plan-box {
    background: #ffffff !important;
    border-radius: 25px !important;
    box-shadow: 0 20px 60px rgba(0, 74, 90, 0.12) !important; 
    padding: 60px 50px !important;
    border-top: 6px solid #004a5a !important; 
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* Inputs */
.contact-form-plan-box .form-control {
    background-color: #f8fbff !important;
    border: 2px solid #eef2f5 !important; /* Slightly thicker border */
    border-radius: 50px !important; 
    padding: 25px 30px !important; 
    color: #004a5a !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    height: auto !important;
    box-shadow: none !important;
}

.contact-form-plan-box textarea.form-control {
    border-radius: 25px !important;
}

/* Focus State */
.contact-form-plan-box .form-control:focus {
    background-color: #ffffff !important;
    border-color: #1da678 !important;
    box-shadow: 0 10px 25px rgba(29, 166, 120, 0.1) !important; /* Soft glow */
    transform: translateY(-2px); /* Subtle lift on focus */
}

/* Placeholder */
.contact-form-plan-box .form-control::placeholder {
    color: #99aabb !important;
    font-weight: 500 !important;
    opacity: 0.8;
}

/* --- 4. Submit Button (Animated & Dynamic) --- */
.submitform-btn {
    background: linear-gradient(135deg, #1da678 0%, #108e60 100%) !important; 
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 16px 55px !important;
    font-size: 16px !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: 0 10px 25px rgba(29, 166, 120, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Bouncy */
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-top: 25px !important;
    cursor: pointer !important;
    display: inline-block !important;
}

.submitform-btn:hover {
    transform: translateY(-4px) scale(1.02) !important; /* Lifts and grows slightly */
    box-shadow: 0 20px 40px rgba(29, 166, 120, 0.5) !important;
    background: linear-gradient(135deg, #004a5a 0%, #003845 100%) !important; /* Navy */
}

/* --- 5. Section Headings --- */
.Schedule-heading h2, 
.contact-page-form-txt h2 {
    color: #004a5a !important;
    font-weight: 800 !important;
    font-size: 42px !important;
    margin-bottom: 60px !important;
    position: relative !important;
    display: inline-block !important;
}

.Schedule-heading h2::after, 
.contact-page-form-txt h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 5px;
    background: #1da678;
    margin: 18px auto 0;
    border-radius: 10px;
}

/* --- 6. Map Styling --- */
.map-con iframe {
    border-radius: 25px !important;
    box-shadow: 0 20px 50px rgba(0, 74, 90, 0.1) !important;
    margin-bottom: 60px !important;
    border: 10px solid #ffffff !important; /* White frame effect */
}

/* --- Mobile Fixes --- */
@media (max-width: 768px) {
    .contact-form-plan-box {
        padding: 40px 25px !important;
    }
    .Schedule-box-item {
        margin-bottom: 25px !important;
    }
    .Schedule-heading h2, 
    .contact-page-form-txt h2 {
        font-size: 32px !important;
    }
}




 /* ==========================================================================
   VISUAL POLISH & TYPOGRAPHY UPGRADE (Keeps Original Colors)
   Focuses on Font, Spacing, and Layout aesthetics.
   ========================================================================== */

/* 1. Global Footer Typography (Modern & Clean) */
.weight-footer-con {
    font-family: 'Jost', sans-serif !important; /* Premium Modern Font */
    letter-spacing: 0.3px;
}

/* 2. Refined Headings (The "Quick Links", "Contact" titles) */
.weight-footer-content h5 {
    font-size: 20px !important;      /* Slightly larger for hierarchy */
    font-weight: 700 !important;     /* Bold and authoritative */
    text-transform: uppercase;       /* Professional look */
    letter-spacing: 1px;             /* Better readability */
    margin-bottom: 30px !important;  /* More space below headings */
    position: relative;
    padding-bottom: 15px;            /* Space for the underline */
}

/* Aesthetic Underline for Headings */
.weight-footer-content h5::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: currentColor;  /* Uses text color (smart match) */
    opacity: 0.3;                    /* Subtle transparent look */
    border-radius: 2px;
}

/* 3. Description Text (About Section) */
.weight-footer-content p {
    font-size: 16px !important;      /* Easier to read */
    line-height: 1.8 !important;     /* More breathing room between lines */
    font-weight: 400;
    opacity: 0.9;                    /* Softens the text slightly */
    margin-bottom: 25px !important;
}

/* 4. List Links (Quick Links / Support) */
.weight-footer-content ul li {
    padding: 8px 0 !important;       /* Increases space between links */
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Very subtle separator */
}
.weight-footer-content ul li:last-child { border-bottom: none; }

.weight-footer-content ul li a {
    font-size: 16px !important;
    font-weight: 500 !important;     /* Medium weight for clarity */
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s ease, padding 0.3s ease;
}

/* Interaction: Slide Right on Hover */
.weight-footer-content ul li a:hover {
    transform: translateX(5px);      /* Subtle movement */
    opacity: 1;
}

/* Refined Arrow Icons */
.weight-footer-content ul li i {
    font-size: 12px !important;
    margin-right: 12px !important;   /* More space between arrow and text */
    opacity: 0.7;
}

/* 5. Contact Info Layout */
.weight-footer-content ul li span {
    display: block;                  /* Puts label on its own line */
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 5px;              /* Space between Label and Info */
}

/* 6. Social Media Icons (Perfect Circles) */
.weight-social-list ul li {
    display: inline-block;
    margin-right: 10px;
}

.weight-social-list ul li a i {
    width: 46px !important;
    height: 46px !important;
    line-height: 46px !important;
    text-align: center;
    border-radius: 50% !important;   /* Perfect Circle */
    font-size: 18px !important;
    
    /* visual styling */
    background: rgba(255, 255, 255, 0.05) !important; /* Glass effect */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy effect */
}

.weight-social-list ul li a i:hover {
    transform: scale(1.1) translateY(-3px); /* Pop up effect */
    background: rgba(255, 255, 255, 0.2) !important;
}

/* 7. Copyright Section Polish */
.footer-con p {
    font-size: 14px !important;
    letter-spacing: 0.5px;
    font-weight: 400;
    opacity: 0.8;
}

/* 8. Logo Spacing */
.weight-footer-content figure {
    margin-bottom: 30px !important;  /* Separates logo from text */
}

/* 9. Mobile Polish */
@media (max-width: 991px) {
    .weight-footer-content h5 {
        margin-top: 20px;
    }
    .weight-footer-content h5::after {
        left: 50%;
        transform: translateX(-50%); /* Centers underline on mobile */
    }
}
/* ==========================================================================
   FOOTER HOVER UNDERLINE ANIMATION
   Adds a smooth expanding line under links
   ========================================================================== */

/* 1. Set up the link for the relative underline */
.weight-footer-content ul li a {
    position: relative !important;
    display: inline-block !important; /* Required for the line to match text width */
    text-decoration: none !important; /* Remove default underline */
    padding-bottom: 2px !important;   /* Space for the line */
}

/* 2. Create the invisible line (Before Hover) */
.weight-footer-content ul li a::after {
    content: '';
    position: absolute;
    width: 0;             /* Start with 0 width */
    height: 2px;          /* Thickness of the line */
    bottom: 0;
    left: 0;
    background-color: #1da678; /* Brand Green Color */
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth easing */
    border-radius: 2px;
}

/* 3. Expand the line (On Hover) */
.weight-footer-content ul li a:hover::after {
    width: 100%;          /* Expands to full text width */
}

/* Optional: Keep the text color change sync'd */
.weight-footer-content ul li a:hover {
    color: #1da678 !important; /* Text turns green too */
}


/* =========================================
   FIX: PUSH ROW DOWN (Prevent Banner Merge)
   ========================================= */

/* 1. Add Margin to the Row specifically */
section.kalpasthana-about-section .row.align-items-center {
    margin-top: 80px !important;  /* Strong push down from the top */
    padding-top: 20px !important; /* Extra internal breathing room */
}

/* 2. Mobile Adjustment (Less space needed on small screens) */
@media (max-width: 991px) {
    section.kalpasthana-about-section .row.align-items-center {
        margin-top: 40px !important;
        padding-top: 0 !important;
    }
}