/* CSS Document */

:root {

  --color-11: #009284;
  --color-12: #001822;
  --space-xl: 2rem;
  --font-primary: "Montserrat", sans-serif;
}

.eye-treatment {
  /* border: 1px solid white; */
  padding-top: 100px;
  font-family: var(--font-primary);
  color: #C2E0DF;
  background-color: var(--color-12);
 position:relative;z-index:9;
}

.eye-treatment .container-fluid {
  padding-top: 2rem !important;
  padding-inline: 5vw !important;
}

.eye-treatment:after{content:"";pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;background: url("../patterns/pattern-dots-green-difference.png") repeat-x bottom center;z-index:4;}
.eye-treatment .sec-01 ul.difference_list{margin: 0px;padding: 0px;list-style-type: none;display: flex;flex-direction: row;justify-content: flex-end;transition: all 500ms ease-in-out;}
.eye-treatment .sec-01 ul.difference_list li{color: rgba(222, 240, 239, 0.5);padding: 0px 15px;min-height: 600px;position: relative;display: flex;flex-direction: column;justify-content: space-between;width: 20%;border-left: 1px solid rgba(0, 146, 132, 0.2);transition: all 500ms ease-in-out;}
.eye-treatment .sec-01 ul.difference_list li .sr{font-weight: 400;margin-bottom: 10px;transition: all 500ms ease-in-out;}
.eye-treatment .sec-01 ul.difference_list li h4{font-size: 18px;line-height: 1.3;margin-bottom: 20px;transition: all 500ms ease-in-out;}
.eye-treatment .sec-01 ul.difference_list li p{font-size: 15px;padding-right: 15px;position: absolute;top: 100px;left: 15px;opacity: 0;transition: all 200ms ease-in-out;}
.eye-treatment .sec-01 ul.difference_list li img{width: 140px;border-radius: 10px;transition: all 500ms ease-in-out;}

.eye-treatment .sec-01 ul.difference_list{}
.eye-treatment .sec-01 ul.difference_list li.active{border-left: 1px solid rgba(0, 146, 132, 0.8);transition: all 500ms ease-in-out;}
.eye-treatment .sec-01 ul.difference_list li.active .sr{color:var(--color-11);font-weight: 600;transition: all 500ms ease-in-out;}
.eye-treatment .sec-01 ul.difference_list li.active h4{color: #ffffffd6;font-weight: 500;transition: all 500ms ease-in-out;}

.eye-treatment .sec-01 ul.difference_list li.active p{opacity:1;color: #ffffffd6;transition: all 500ms ease-in-out 0.4s;}
.eye-treatment .sec-01 ul.difference_list li.active{width: 30%;transition: all 500ms ease-in-out;}
.eye-treatment .sec-01 ul.difference_list li.active img{width:100%;transition: all 500ms ease-in-out;} 


.eye-treatment .sec-02 ul{list-style-type: none; display: flex; flex-wrap: wrap; gap:24px; padding-left: 0px;}
.eye-treatment .sec-02 ul li{border-radius: 14px;border: 1.2px solid var(--color-11); padding:10px 18px; font-size: 14px; }
.eye-treatment .sec-02 h2{margin-bottom:2.5rem;}

@media (max-width: 1440px){ 
	.eye-treatment .sec-01 ul.difference_list {display: flex;overflow-x: auto;scroll-snap-type: x mandatory;scroll-behavior: smooth;}
	.eye-treatment .sec-01 ul.difference_list li{width:25%;}
	.eye-treatment .sec-01 ul.difference_list li.active{width:40%;flex: 0 0 auto;scroll-snap-align: start;}
	.eye-treatment .sec-01 ul.difference_list li img, 
	.eye-treatment .sec-01 ul.difference_list li.active img{width:100%}	
}

@media (max-width: 768px){ 
.eye-treatment .sec-01 ul.difference_list{justify-content: flex-start; margin-top: 2rem;}
	.eye-treatment .sec-02 ul{gap:14px;}
	.eye-treatment .sec-02 ul li{font-size: 12px;}
	.eye-treatment .sec-01 ul.difference_list li.active h4 br{display: none;}
	.eye-treatment .sec-01 ul.difference_list li.active {width: 50%;}
}

@media (max-width: 576px){ 
	  .eye-treatment {padding-top: 50px;}
     	.eye-treatment .sec-01 ul.difference_list li{width:100%;flex:0 0 100%; padding-block:30px;}
	.eye-treatment .sec-01 ul.difference_list li .sr{color:var(--color-11);font-weight: 600;transition: all 500ms ease-in-out;}
.eye-treatment .sec-01 ul.difference_list li h4{color: #ffffffd6;font-weight: 500;transition: all 500ms ease-in-out;}
.eye-treatment .sec-01 ul.difference_list li p{opacity:1;color: #ffffffd6;transition: all 500ms ease-in-out 0.4s; top: 135px;}
	.eye-treatment .sec-01 ul.difference_list li img,.eye-treatment .sec-01 ul.difference_list li.active img{ width:65%;}
	.eye-treatment .sec-02 ul li{padding: 7px 7px; font-size: 10px}
}
@media (max-width: 400px){
		.eye-treatment .sec-01 ul.difference_list li img,.eye-treatment .sec-01 ul.difference_list li.active img{ width:96%;}
}