:root {
  --site-font:  "DM Sans", sans-serif;
  --title-font: "Cormorant Garamond", serif;
  --primary-color: #5386c6;
  --secondary-color: #b7a68d;
   --tertiary-color: #d6b94c;
}

body p {
    font-family:var(--site-font) !important
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-font) !important;
}
.title p, .pg-content h2 .span-1, .btn, .ry-btn, .ry-btn-primary, .ry-btn-secondary{
    font-family:"Montserrat", sans-serif !important
}
/* --- BANNER ---*/
#ry-pg-banner {
    display:none !important
}

.dry-eye-spa-pg .background-section, 
.dry-eye-spa-pg .background-section img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position:80%
}

.dry-eye-spa-pg .banner {
    padding:130px 10px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center
}

.dry-eye-spa-pg .banner * {
    color:#fff
}
.dry-eye-spa-pg .banner .banner-text {
    max-width:964px;
    width:90%;;
}
.dry-eye-spa-pg .banner .banner-text .title {
    margin-bottom:20px
}
.dry-eye-spa-pg .banner .banner-text .title h1 {
	font-size: clamp(2.8125rem, 2.4142rem + 1.634vw, 4.375rem);
	letter-spacing: 6px;
	text-transform: uppercase;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	line-height:1.1
}

.dry-eye-spa-pg .banner .banner-text .title h1 span {
	color:var(--tertiary-color);
    font-style:italic
}
.dry-eye-spa-pg .banner .banner-text .title p {
    color:var(--tertiary-color);;
    font-size: 20px;
    letter-spacing: 6px;
    text-transform: uppercase;
    font-weight: 400;
    text-align: center;
    line-height:1.1
}
.dry-eye-spa-pg .banner .banner-text .ry-text *{
    color:#fff;
    font-size: clamp(1.25rem, 1.1863rem + 0.2614vw, 1.5rem);
    line-height: 1.5;
    font-weight: 400;
    text-align: center;
}

.dry-eye-spa-pg .banner .banner-text .ry-btn {
	margin:40px auto 0;
	background:var(--tertiary-color) !important;
    
}
.dry-eye-spa-pg .banner .banner-text .ry-btn:hover {
    background:var(--secondary-color) !important;
}

@media(max-width:1080px) {
	.dry-eye-spa-pg .banner {
		padding:80px 10px;
    }
}

/* --- RATE SECTION ---  */
.rate-section {
    background:#5386c630;
    border-top:solid 5px var(--tertiary-color)
}

.rate-section  .ry-container {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    max-width:1600px;
    width:90%
    
}

.rate-section  .ry-container > div {
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
        
}
.rate-section  .ry-container > div p {
    color: #222222;
    font-size: clamp(1.125rem, 1.0294rem + 0.3922vw, 1.5rem);
    text-align:center;
    line-height:1.1
}
.rate-section  .ry-container > div p span {
    display:block;
    font-size: clamp(2.375rem, 2.2794rem + 0.3922vw, 2.75rem);
    text-transform: uppercase;
    color: #5386c6;
    font-weight: 400;
    text-align: center;
    margin-bottom:5px
}
.rate-section  .ry-container > div p span svg {
    margin-left:10px
}

@media(max-width:991px) {
	.rate-section  .ry-container {
		flex-wrap:wrap;
		justify-content:center;
		gap:5px 10px
	}
	.rate-section  .ry-container > div {
		width:48%;
		height:100px
	}
	.rate-section  .ry-container {
		padding-block:20px
	}
    
}


/*--- SECTION 1 ---*/
.pg-content .section {
    padding-block:90px
}
.pg-content p {
    line-height:1.6;
	font-size:19px !important
}
.section .ry-container {
    max-width:1280px;
    width:90%
}
.pg-content h2 {
    line-height:1.2 !important;
    margin-bottom:25px
}
.pg-content h2 .span-1{
    display:block;
    color:var(--tertiary-color);
    font-size: 20px;
    letter-spacing: 6px;
    text-transform: uppercase;
    font-weight: 400;
    font-family: "Playfair Display";
}
.pg-content h2 .span-2 {
	font-style:italic
}

.pg-content .section .ry-container .ry-flex {
    gap:40px
}
.pg-content .section .ry-container .ry-flex .ry-left {
    width:55%
}
.pg-content .section .ry-container .ry-flex .ry-right{
    width:40%
}

.section .ry-container .ry-flex .ry-right .blue-wrapper {
    background-image: linear-gradient(45deg, #3f6eaa 0%, #5385c5 100%);
    border-radius: 30px;
    height: 577px;;
    padding:40px;
    min-height:fit-content;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.section .ry-container .ry-flex .ry-right .blue-wrapper h3{
    color:var(--tertiary-color);
    font-size: 30px;
    font-weight: 400;
    font-style: italic;
	line-height:1.2
}
.section .ry-container .ry-flex .ry-right .blue-wrapper * {
    color:#FFF;
    font-size: 20px;
}
	
/* ---TYPE OF DRY EYE SECTION*/
.section .ry-container .ry-flex .ry-right .blue-wrapper ul {
    margin-block:20px
}

.pg-content .types-of-dry-eye-section .ry-container .ry-flex > div {
	border-radius: 30px;
	background-color: rgba(237,243,249,0.5019607843137255);
	border: 1px solid rgba(83,134,198,0.3);
	padding:50px 40px
}

.pg-content .types-of-dry-eye-section .ry-container .ry-flex > div h3 {
	font-size: clamp(1.875rem, 1.7794rem + 0.3922vw, 2.25rem);
	line-height: 1.1;
	color: #333333;;
}
.pg-content .types-of-dry-eye-section .ry-container .ry-flex > div span {
	font-size: 18px;
	color: var(--tertiary-color);
	font-weight: 400;
	border-radius: 20px;
	background-color: #d6b94c29;
	margin:15px 0 20PX;
	display:flex;
	width:fit-content;
	justify-content:center;
	align-items:center;
	padding:8px 20px;
	line-height:1.1
	
}
.pg-content .types-of-dry-eye-section .ry-container .ry-flex .ry-right {
	width:50%;
	
}

.pg-content .types-of-dry-eye-section .ry-container .ry-flex .ry-left {
	width:50%;
}

@media(max-width:1080px) {
		.pg-content .section {
		padding-bottom:20px;
			padding-top:70px
	}
}
@media(max-width:991px) {
	.pg-content .section .ry-container .ry-flex {
		flex-direction:column
	}
	.pg-content .section .ry-container .ry-flex > div {
		width:100% !important
	}
	.section .ry-container .ry-flex .ry-right .blue-wrapper {
		height:fit-content
	}
	.pg-content .section .ry-container .ry-flex > div * {
		text-align:center
	}
	.pg-content .section .ry-container ul {
		max-width:fit-content;
		margin-inline:auto
	}
	.pg-content .section .ry-container ul li p {
		text-align:start !important
	}

	.pg-content .types-of-dry-eye-section .ry-container .ry-flex > div span {
		margin-inline:auto
	}
	.pg-content .types-of-dry-eye-section .ry-container .ry-flex {
		gap:15PX
	}
}

@media(max-width:480px) {
	.pg-content .types-of-dry-eye-section .ry-container .ry-flex > div {
		padding:30px 20px
	}
}

/* --- COMMON SYMPTOMS  ---*/
.common-symptoms-section .ry-container{
    max-width:1600px;
    width:90%
}

.common-symptoms-section .ry-container .ry-flex {
    flex-wrap:wrap;
    justify-content:center;
    gap:20px !important;
    align-items:center
}

.common-symptoms-section .ry-container .ry-flex > div {
    display:flex;
    padding:10px 20px;
    height: 80px;
	border-radius: 20px;
    background-color: #edf3f9;
    border: 1px solid rgba(83,134,198,0.3);
    width:358px;
    min-width:fit-content;
    gap:15px;
	 align-items:center;
    justify-content:center
}
.common-symptoms-section .ry-container .ry-flex > div img {
    display:none
}

 
@media(max-width:991px) {
    .pg-content .section.common-symptoms-section  .ry-container .ry-flex {
        flex-direction:row !important
    }
    .pg-content .section.common-symptoms-section  .ry-container .ry-flex > div{
        width:48% !important;
        height:fit-content;
        padding:10px 15px;
        min-width:unset;
        
    }
    .pg-content .section.common-symptoms-section  .ry-container .ry-flex > div p {
    line-height:1.1 !important;
        text-align:start
        
    }
}
@media(max-width:580px) {
    .pg-content .section.common-symptoms-section  .ry-container .ry-flex > div{
    width:100% !important;
     max-width:350px;
    }
    .pg-content .section.common-symptoms-section  .ry-container .ry-flex  {
    gap:10px !important
    }
}
	
/* --- Personalized Care, Every Step SECTION  ---*/
#home-treatments-content,
#in-office-treatments-content {
    display: none;
}

.button-services > div {
    cursor: pointer;
}

	
body.default .personalized-care-section h2 {
    text-align:center
}
.personalized-care-section .button-services {
    display:flex;
    align-items:center;
    justify-content:center
}

.personalized-care-section .button-services > div {
    padding:0 15px 10px;
    margin-block:10px;
    border-bottom:solid 4px gray;
    color:#333333;
    text-transform:uppercase;
}
.personalized-care-section .button-services > div p{
    font-weight:bold !important
}

.personalized-care-section .button-services > div.active {
    border-bottom:solid 6px var(--tertiary-color);
    background:unset;
}

.personalized-care-section #consultation-content .ry-left{
       width: 55%;
}

.pg-content .section.personalized-care-section .ry-container #consultation-content,
.pg-content .section.personalized-care-section .ry-container #home-treatments-content,
.pg-content .section.personalized-care-section .ry-container #in-office-treatments-content{
        margin-top:50px
}

.pg-content .section.personalized-care-section .ry-container h3 {
        color:#333;
        font-size: clamp(1.875rem, 1.7794rem + 0.3922vw, 2.25rem);
        margin-bottom:15px;
        line-height:1.2
}
.pg-content .section.personalized-care-section .ry-container .block-content {
        margin-top:40px
}
.pg-content .section.personalized-care-section .ry-container .block-content h4{
        font-size: 23px;
}
.pg-content .section.personalized-care-section .ry-container .block-content > div {
        border-radius: 20px;
        background-color: #5386c617;
        padding:20px 30px;
        margin-bottom:12px
}
.pg-content .section.personalized-care-section .ry-container .blue-wrapper {
        z-index:2;
        position:relative
}
.pg-content .section.personalized-care-section .ry-container .yellow-wrapper {
        background:url(https://s3.amazonaws.com/static.organiclead.com/Site-5bfb8dcf-ad85-4851-930e-37acfb969c99/Assets/yellow_box.png)no-repeat center /cover;
        border-radius:20px;
        height: 400px;;
        padding:50px 35px;
        min-height:fit-content;
        margin-top:-40px;
        position:relative;
        z-index:1;
        justify-content:center;
        align-items:center;
        display:flex;
        flex-direction:column
        
}

.pg-content .section.personalized-care-section .ry-container .yellow-wrapper * {
        color:#000;
        text-align:center
}

.pg-content .section.personalized-care-section .ry-container .yellow-wrapper .ry-btn {
        margin-inline:auto;
        margin-top:30px
}

.pg-content .section.personalized-care-section 
.ry-container .yellow-wrapper .ry-btn::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;

    background-color: #fff;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M224.2 89C216.3 70.1 195.7 60.1 176.1 65.4L170.6 66.9C106 84.5 50.8 147.1 66.9 223.3C104 398.3 241.7 536 416.7 573.1C493 589.3 555.5 534 573.1 469.4L574.6 463.9C580 444.2 569.9 423.6 551.1 415.8L453.8 375.3C437.3 368.4 418.2 373.2 406.8 387.1L368.2 434.3C297.9 399.4 241.3 341 208.8 269.3L253 233.3C266.9 222 271.6 202.9 264.8 186.3L224.2 89z'/%3E%3C/svg%3E");
    
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M224.2 89C216.3 70.1 195.7 60.1 176.1 65.4L170.6 66.9C106 84.5 50.8 147.1 66.9 223.3C104 398.3 241.7 536 416.7 573.1C493 589.3 555.5 534 573.1 469.4L574.6 463.9C580 444.2 569.9 423.6 551.1 415.8L453.8 375.3C437.3 368.4 418.2 373.2 406.8 387.1L368.2 434.3C297.9 399.4 241.3 341 208.8 269.3L253 233.3C266.9 222 271.6 202.9 264.8 186.3L224.2 89z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
}
.pg-content .section.personalized-care-section 
.ry-container .yellow-wrapper .ry-btn:hover {
        color:#fff !important
}
@media(max-width:800px) {
        .personalized-care-section .button-services > div p {
                font-size:14px !important;
                height:40PX;
                display:flex;
                align-items:end;
                line-height:1.1 !important
        }
}
@media(max-width:780px) {
        .pg-content .section.personalized-care-section .ry-container .yellow-wrapper {
        padding-top:80px;
        }
}

@media(max-width:480px) {
        .pg-content .section.personalized-care-section .ry-container .yellow-wrapper {
        padding-top:80px;
        }
        .pg-content .section.personalized-care-section .blue-wrapper {
                padding-inline:20px !important
        }
}

/* --- Home Treatments --- */
#home-treatments-content .ry-flex {
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:30px;
    flex-wrap:wrap 
}
#home-treatments-content .ry-flex .ry-each {
    width:32%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius:10px
}
#home-treatments-content .ry-flex .ry-each .title {
    padding:20px 30px 10px;
    background:var(--primary-color);
    margin-bottom:15px
}
#home-treatments-content .ry-flex .ry-each .ry-text{
    padding:0 30px 20px
}

#home-treatments-content .ry-flex .ry-each h3 {
    font-size:23PX;
    color:#fff !important
}

#home-treatments-content .ry-flex .ry-each .tips {
    padding-block:10px;
    display:flex;
    flex-wrap:wrap;
    gap:6px
}

#home-treatments-content .ry-flex .ry-each .tips > div {
    background:#006bae17;
    border-radius:10px;
    padding:10px;
    
}

#home-treatments-content .ry-flex .ry-each .tips > div p {
    line-height:1.3 !important;
    font-size:16px !important;
    color:#006bae;
}

@media(max-width:991px) {
  #home-treatments-content .ry-flex .ry-each .tips {
      justify-content:center;
  }
}

/* --- In-Office Treatments ---  */
#in-office-treatments-content .ry-flex {
        display:flex;
    justify-content:center;
    gap:20px;
    margin-top:30px;
    flex-wrap:wrap 
}
#in-office-treatments-content .ry-flex .ry-each {
    width:48%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius:10px;
    overflow:hidden
}

#in-office-treatments-content .ry-flex .ry-each h3 {
    font-size:23PX
}
#in-office-treatments-content .ry-flex .ry-each .title {
    padding:20px 30px 10px;
    background:var(--primary-color);
    margin-bottom:15px
}
#in-office-treatments-content .ry-flex .ry-each .ry-text{
    padding:0 30px 20px
}

#in-office-treatments-content .ry-flex .ry-each h3 {
    font-size:23PX;
    color:#fff !important
}

#in-office-treatments-content .ry-flex .ry-each .advance-tag {
    position:absolute;
    background:var(--tertiary-color);
    padding:5px 10px;
    border-end-end-radius:10px;
    border-end-start-radius:10px;
       right:10px;
    left:auto
}
#in-office-treatments-content .ry-flex .ry-each .advance-tag p {
    font-size:16px !important;
    color:#000
}

#in-office-treatments-content .ry-flex .ry-each .ry-text span {
    padding:10px ;
    background:#006bae17;
    border-radius:10px;
    padding:10px 20px;
    display:flex;
    border-radius:10px;
    flex-direction:column;
    margin-block:25px;
    
}

#in-office-treatments-content .ry-flex .ry-each .ry-text span br {
    display:none
}


#in-office-treatments-content .ry-flex .ry-each ul {
    list-style: none;
    padding: 0;
}

#in-office-treatments-content .ry-flex .ry-each ul li {
    margin-bottom: 3px;
    padding-left: 20px;
    position: relative;
    font-size: 16px;
    line-height: 1.5;
}

#in-office-treatments-content .ry-flex .ry-each ul li:before {
    content: '✔'; 
    position: absolute;
    left: 0;
    color: var(--primary-color); 
    font-size: 18px;
}



@media(max-width:600px) {
#in-office-treatments-content .ry-flex .ry-each .advance-tag p {
    font-size:12px !important;
}
    #in-office-treatments-content .ry-flex .ry-each .title {
    padding-top: 30px;
    }
}
	
/* --- CARE JOURNEY SECTION ---  */
.your-care-journey-section .ry-container .ry-flex {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20PX !important;
    margin-top:20px
}

.your-care-journey-section .ry-container .ry-flex .ry-each {
    height: 300px;
    border-radius: 30px;
    background-color: rgba(237,243,249,0.5019607843137255);
    border: 1px solid rgba(83,134,198,0.3);
    min-height:fit-content;
    padding:30px 40px;
    width:48%; ;
    align-items:center;
    justify-content:center;
    display:flex
}
.your-care-journey-section .ry-container .ry-flex .ry-each h3{
    color: #333;
    font-size: clamp(1.875rem, 1.7794rem + 0.3922vw, 2.25rem)  !important;
    display:flex;
    gap:10px;
    margin-bottom:15px;
    line-height:1.2;
}

.your-care-journey-section .ry-container .ry-flex .ry-each h3 span {
    background:var(--tertiary-color);
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:50px;
    width:50px;
    height:50px;
    border-radius:50%;
    color:#fff;
    padding-bottom:15px
}


@media(max-width:991px) {
    .your-care-journey-section .ry-container .ry-flex .ry-each h3 {
        justify-content:center;
        flex-direction:column;
        align-items:center;
        gap:4px
    }
}

@media(max-width:480px) {
    .your-care-journey-section .ry-container .ry-flex .ry-each {
        padding-inline:20px
    }
}

/* --- FAQ SECTION ---  */
.dry-eye-spa-pg .ry-accordion {
    background:transparent;
    box-shadow: unset;
}
.dry-eye-spa-pg .ry-accordion .ry-heading {
    border-radius: 20px;
    background-color: rgba(237,243,249,0.5019607843137255);
    border: 1px solid rgba(83,134,198,0.3);
    padding-block:15PX;
    align-items:center;
    margin-bottom:10px;
    color:#333;
}

.dry-eye-spa-pg .ry-accordion .ry-heading > div {
    font-size:20px;
    font-weight:bold !important
}

.ry-accordion .ry-heading:after {
    content:'\f078';
    font-size:14px;
    color:var(--primary-color)
}
.ry-accordion .ry-heading.ui-state-active:after {
    content:'\f077';
    font-size:14px;
    color:var(--primary-color)
}


.dry-eye-spa-pg .ry-accordion .ry-heading.ui-accordion-header-active {
    margin-bottom:0px;
    border-bottom:0;
    border-end-end-radius:0;
    border-end-start-radius:0
}

.ry-accordion .ry-content {
     background-color: rgba(237,243,249,0.5019607843137255);
    border: 1px solid rgba(83,134,198,0.3);
    border-top:0
}
.ry-accordion .ry-content  {
    padding-top:0px;
    margin-bottom:10px;
      border-end-end-radius:20px;
    border-end-start-radius:20px
}
	
/*  --- BOTTOM BANNER --- */
.bottom-banner {
    background:url(https://s3.amazonaws.com/static.organiclead.com/Site-5bfb8dcf-ad85-4851-930e-37acfb969c99/Background_images/bottom_cta_gradient_bg.jpg)no-repeat center / cover
}

.bottom-banner * {
    color:#fff
}

.bottom-banner .ry-container {
    padding:100px 0 20px
}

.bottom-banner .ry-container .btn-wrapper {
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    margin-top:30px;
    flex-wrap:wrap
}

.bottom-banner .ry-container .btn-wrapper .ry-btn{
    background:var(--tertiary-color) !important;
    font-size:20px !important;
    max-width:240px;
    width:100%
}
.bottom-banner .ry-container .btn-wrapper .ry-btn:hover {
    background:var(--secondary-color) !important;
    color:#fff !important
}

.see-optical-section {
    padding:100PX 0
}

.see-optical-section h2 {
    text-align:center !important
}

.see-optical-section .ry-flex {
    justify-content:center;
    gap:20PX;
    flex-wrap:wrap
}

.see-optical-section .ry-flex > div {
    display:flex;
    align-items:center;
    position:relative;
    border-radius: 30px;
    background-color: #edf3f980;
        border: 1px solid #5386c64d;
    padding:10px 30px;
    gap:10PX
}


.see-optical-section .ry-flex > div::before {
    content: '✔'; 
    left: 0;
    color:#FFF;
    background:var(--primary-color);
    width:28px;
    height:28PX;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:14px

}
#home-treatments-content .ry-flex .ry-each .title h3{
    display:flex;
    align-items:center;
    gap:10px
}
#home-treatments-content .ry-flex .ry-each .title span {
    width:35px;
    height:35px;
    display:flex;
    background:var(--tertiary-color);
    align-items:center;
    justify-content:center;
    line-height:0;
    border-radius:50%;
    padding-bottom:5px;
    padding-right:2PX
}
@media(max-width:600px) {
    .see-optical-section .ry-flex > div {
        width:100%
    }
}