/*
Theme Name: WaterGap
Theme URI: https://example.com/water-gap
Author: web3watergap
Author URI: https://example.com
Description: A custom WordPress theme.
Version: 1.0
Text Domain: water-gap
*/
/* ********************************************************************************************************************** */
/* ********************************************************************************************************************** */
/* Theme colors -start */
/* ********************************************************************************************************************** */
/* ********************************************************************************************************************** */
/* Define custom properties for your theme colors */
:root {
    --wp--preset--color--dark: #000000;
    --wp--preset--color--light: #ffffff;
    --wp--preset--color--blue: #2B67EF;
    --wp--preset--color--pink: #FF66B9;
    --wp--preset--color--yellow: #FED200;
    --wp--preset--color--green: #9AE05F;
	--black:#000000;
	--white: #ffffff;
	--blue: #2B67EF;
	--pink: #FF66B9;
	--green: #9AE05F;
	--yellow: #FED200
}

/* Using Bg, Text colors */
/* .has-dark-background-color {
    background-color: var(--wp--preset--color--dark);
}
.has-dark-color {
    color: var(--wp--preset--color--dark);
}
.has-light-background-color {
    background-color: var(--wp--preset--color--light);
}
.has-light-color {
    color: var(--wp--preset--color--light);
}
.has-blue-background-color {
    background-color: var(--wp--preset--color--blue);
}
.has-blue-color {
    color: var(--wp--preset--color--blue);
}
.has-green-background-color {
    background-color: var(--wp--preset--color--green);
}
.has-green-color {
    color: var(--wp--preset--color--green);
}

.has-yellow-background-color {
    background-color: var(--wp--preset--color--yellow);
}
.has-yellow-color {
    color: var(--wp--preset--color--yellow);
}
.has-pink-background-color {
    background-color: var(--wp--preset--color--pink);
}
.has-pink-color {
    color: var(--wp--preset--color--pink);
} */

/* ********************************************************************************************************************** */
/* ********************************************************************************************************************** */
/* Theme colors -end */
/* ********************************************************************************************************************** */
/* ********************************************************************************************************************** */

@font-face {
    font-family: 'Cormorant';
    src: url('fonts/Cormorant/Cormorant-Light.ttf') format('truetype');
    font-weight: 300;
}
@font-face {
    font-family: 'Cormorant';
    src: url('fonts/Cormorant/Cormorant-Regular.ttf') format('truetype');
    font-weight: 400;
}
@font-face {
    font-family: 'Cormorant';
      src: url('fonts/Cormorant/Cormorant-Medium.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'Cormorant';
    src: url('fonts/Cormorant/Cormorant-SemiBold.ttf') format('truetype');
    font-weight: 600;
}
@font-face {
    font-family: 'Cormorant';
    src: url('fonts/Cormorant/Cormorant-Bold.ttf') format('truetype');
    font-weight: 700;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
      src: url('fonts/Roboto/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
/* ----------------------------------------------------- */
/* Theme Settings */
/* ----------------------------------------------------- */
*{
	margin:0px;
}
body{
  position: relative;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6{
	 font-family: 'Cormorant'  !important;
	line-height: 1.1em;
}
p, li,  strong, a{
	font-family:'Roboto' !important;
	line-height: 1.3em;
}
a {
    text-decoration: none;
}
h1{
    font-size: 86px;
}
h2{
    font-size: 78px;
}
h3{
    font-size: 32px;
}
p{
    font-size: 16px;
    line-height: 1.5em;
}
.font100{
	font-weight: 100;
}
.font200{
	font-weight: 200;
}
.font300{
	font-weight: 300;
}
.font400{
	font-weight: 400;
}
.font500{
	font-weight: 500;
}
.font600{
	font-weight: 600;
}
.font700{
	font-weight: 700;
}
.font800{
	font-weight: 800;
}
.robototext{
	font-family: 'Roboto' !important;
}
.Cormoranttext{
	font-family: 'Roboto';
}
.italic-text {
  font-style: italic;
}
h2.otherhead{
     font-size: 64px;
}
h2.contacthead{
    font-size: 48px;
}
@media(max-width:783px){
    h1{
        font-size: 66px;
    }
    h2{
        font-size: 48px;
    }
    h2.otherhead{
         font-size: 40px;
    }
    h2.contacthead{
        font-size: 35px;
    }
    h3{
        font-size: 26px;
    }
    p{
        font-size: 14px;
    }
}
@media(max-width:600px){
    h1{
        font-size: 46px;
    }
    h2{
        font-size: 38px;
    }
    h2.otherhead{
        font-size: 32px;
    }
    h2.contacthead{
        font-size: 28px;
    }
    h3{
        font-size: 22px;
    }
    p{
        font-size: 14px;
    }
}
/*testimoinal css start*/
.testimonial-slide, .treatmentslide {
    padding: 20px 0px;
    background: #fff;
    border: 1px solid #0000001A;
    border-radius: 8px;
    margin: 0 10px;
    text-align: center;
}
.treatmentslide {
	border: none !important;
}
.treatmentslide{
    padding: 0px !important;
}
.testimonialslider .slick-dots, .treatmentoption .slick-dots {
    bottom: unset;
    margin-top: 30px !important;
}
.testimonialslider .slick-dots li button:before, .treatmentoption .slick-dots li button:before{
    content: unset !important;
}
.testimonialslider .slick-dots li.slick-active button {
    background-color: #09665C;
    border: 1px solid #09665C;
}
.treatmentoption .slick-dots li.slick-active button {
    background-color: #4FC8A5;
    border: 1px solid #4FC8A5;
}
.testimonialslider .slick-dots li button {
    padding: 0px !important;
    border: 1px solid #00000033;
    font-size: 0px;
    color: #fff;
    border-radius: 50px;
    height: 10px;
    width: 10px;
}
.treatmentoption .slick-dots li button {
    padding: 0px !important;
    border: 1px solid #fff;
    font-size: 0px;
    color: #fff;
    border-radius: 50px;
    height: 10px;
    width: 10px;
     background-color: #fff;
}
.testimonial-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
}
.testimonial-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testimonial-header {
    padding: 20px;
    border-bottom: 1px solid #0000001A;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.testimonial-author-info {
    flex: 1;
    text-align: left;
}
.testimonial-author, .treatmenttitle {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #09665C;
    line-height: 33px;
    text-align: left;
}
.testimonial-role {
    font-size: 14px;
    color: #009688;
    margin-bottom: 10px;
}
.testimonial-feedback, .treatmentdescription {
    font-size: 16px;
    color: #565656;
    text-align: left;
    padding: 0px 20px;
    line-height: 32px;
    font-weight: 300;
}
.treatmentdescription{
    padding:0px !important;
}
.testimonial-rating {
    display: flex;
    justify-content: left;
    gap: 5px;
    flex-grow: 1;
    align-items: flex-end;
    padding: 0px 20px;
}
.testimonialslider .slick-track , .treatmentoption .slick-track {
    display: flex;
}

.testimonial-rating .star {
    font-size: 24px;
    color: #e0e0e0;
}
.testimonial-rating .star.filled {
    color: #4FC8A5;
}
.slick-slide, .slider-for .slick-slide {
    height: inherit !important;
}
/*testimonial css closed*/
/*treaments slick css start */
.treatmentupperbox {
    position: relative;
}
.card {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.card-icon {
    position: absolute;
    bottom: -32px;
    left: 20px;
}
.treatmentimgslick img {
    width: 100%;
    height: auto;
}
.card-content {
    padding: 20px;
}
.card-link {
    font-size: 14px;
    font-weight: bold;
    color: #1a4335;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.treat-link a {
    gap: 8px;
    font-size: 16px;
    font-weight: 400;
    color: #09665C;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.card-link:hover {
    text-decoration: underline;
}
.card-link svg {
    margin-left: 5px;
}
/*treatments slick css closed */
.headingofsite{
    gap:16px;
}
/* accordion start */
.accordion .accordion-item {
    border-bottom: 1px solid #DFDFDF;
}
.accordion .accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0px;
  cursor: pointer;
  transition: background 0.3s ease;
  gap: 4px;
}
.accordion .number {
  font-weight: bold;
  color: #09665C73;
}
.openheader .title {
    color: #09665C !important;
}
.openheader .number {
    color: #4FC8A5 !important;
}
.openheader .icon {
    color: #09665C !important;
}
.accordion .title {
    flex: 1;
    margin-left: 16px;
    font-size: 24px;
    color: #09665C73;
    padding-left: 12px;
    border-left: 1px solid;
}
.accordion .opentitle {
    color: #09665C !important; 
    border-color: #4FC8A5 !important; 
}
.psychiatryaccordion.accordion .title {
    margin-left: 0px !important;
    font-size: 32px;
    border-left: unset !important;
}
 .psychiatryaccordion.accordion .accordion-content{
    padding-left: 0px !important;
     padding-right: 0px !important;
}
.accordion .icon {
    font-size: 32px;
    color: #09665C73;
}
.accordion .accordion-content {
    display: none;
    padding: 16px 40px;
    color: #565656;
    font-weight: 300;
}
/* accordion ends */
/*animation starts */
.slideuptext, .siteheadings {
    display: block;
    opacity: 0; 
    position: relative;
    top: 50px;
}
.bannershorthead, .shorthead {
    opacity: 0; 
    transition: opacity 1s ease-in-out; 
}
.fade-in {
    opacity: 1 !important;
}
/* animation ends */
.leftslide {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 1.5s ease-in-out, transform 3s ease;
}
.leftslide.animate {
    opacity: 1;
    transform: translateX(0);
}
.rightslide {
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 1.5s ease-in-out, transform 3s ease;
}
.rightslide.animate {
    opacity: 1;
    transform: translateX(0);
}
@keyframes moveLeftToRight {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes moveRightToLeft {
  0% {
    opacity: 1;
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

 .appointment-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 4%;
    align-items: center;
}
.appointment-form input::placeholder, .appointment-form select::placeholder {
    color: #565656;
    font-family: 'Roboto';
    font-size: 16px;
}
.videolist label {
    padding: 24px 0px;
    flex: 1;
    color: #565656;
    font-family: 'Roboto';
    font-size: 16px;
}
.appointment-form input[type="checkbox"] {
    width: unset;
}
.appointment-form input,
.appointment-form select,
.appointment-form textarea {
    width: 97%;
    padding: 24px 0px 24px 0px;
    border: 0px;
    margin: 0% 3% 0% 0%;
    outline: none !important;
    color: #565656;
    font-family: 'Roboto';
    font-size: 16px;
}
.appointment-form .form-group {
    width: 48%;
    border-bottom: 1.5px solid #00000026 !important;
    height: 100%;
    align-items: center;
    display: flex;
    justify-content: flex-end;
}
.appointment-form .full-width {
    width: 100%;
}
.appointment-form button {
    background: url(https://nustreamdevsite.com/watergap/wp-content/uploads/2025/01/arrow-right-circle-1.png) no-repeat;
    display: block;
    background-position: 86% 50%;
    padding-right: 66px !important;
    background-color: #4FC8A5;
    padding: 18px 32px;
    border-radius: 32px;
    border: 0px;
    color: #042925;
    font-size: 16px;
    cursor: pointer;
}
.appointment-form button:hover {
    background: url(https://nustreamdevsite.com/watergap/wp-content/uploads/2025/01/arrow-right-circle.png) no-repeat;
    display: block;
    background-position:85% 50%;
    padding-right: 66px !important;
    background-color: #4FC8A5;
    padding: 18px 32px;
    border-radius: 32px;
    border: 0px;
    color: #042925;
    font-size: 16px;
    cursor: pointer;
}
.appointment-form .note {
    color: #4FC8A5;
    font-size: 14px;
    padding: 24px 0px 16px 0px;
    font-family: 'Roboto';
    font-weight: 400;
}