@font-face {
   font-family: dana;
   font-style: normal;
   font-weight: 900;
   src: url('../webfonts/woff2/Dana-Black.woff2') format('woff2'),
     /* FF39+,Chrome36+, Opera24+*/
     url('../webfonts/woff/Dana-Black.woff') format('woff');
   /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
 }

 @font-face {
   font-family: dana;
   font-style: normal;
   font-weight: bold;
   src: url('../webfonts/woff2/Dana-Bold.woff2') format('woff2'),
     /* FF39+,Chrome36+, Opera24+*/
     url('../webfonts/woff/Dana-Bold.woff') format('woff');
   /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
 }

 @font-face {
   font-family: dana;
   font-style: normal;
   font-weight: normal;
   src: url('../webfonts/woff2/Dana-Regular.woff2') format('woff2'),
     /* FF39+,Chrome36+, Opera24+*/
     url('../webfonts/woff/Dana-Regular.woff') format('woff');
   /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
 }

 .ss02 {
   -moz-font-feature-settings: "ss02";
   -webkit-font-feature-settings: "ss02";
   font-feature-settings: "ss02";
 }

 body {
   background-color: #ffffff;
   font-family: dana, sans-serif;
   font-feature-settings: "ss02";
   overflow-x: hidden;
 }

 .p-relative {
   position: relative;
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 .hero-container {
   max-width: 1920px;
   margin: 0 auto;
   position: relative;
   width: 100%;
   padding: 0 20px;

 }

 .header-section {
   width: 100%;
 }

 .hero-section {
   position: relative;
   min-height: 632px;
   width: 100%;
   background-color: #0066FF;
   overflow: visible;
   z-index: 0;
   margin-bottom: 120px;
 }

 .hero-data,
 .hero-box {
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;

 }

 @keyframes pawRotate {
   0% {
     transform: rotate(0deg);
   }

   50% {
     transform: rotate(30deg);
   }

   100% {
     transform: rotate(0deg);
   }
 }

 .hero-pattern {
   position: absolute;
   inset: 0;
   overflow: hidden;
   z-index: -1;
   pointer-events: none;
 }

 .paw {
   position: absolute;
   z-index: 0;

   animation: pawRotate 4s infinite;
 }

 .p1 {
   top: 12.7%;
   left: 13.8%;
   animation-delay: 0.5s;
 }

 .p2 {
   top: 63.8%;
   left: 1.5%;
   rotate: 65deg;
   animation-delay: 0.5s;
 }

 .p3 {
   top: 90.2%;
   left: 7.6%;
   animation-delay: 0.5s;
 }

 .p4 {
   top: 24.5%;
   left: -1.2%;
 }

 .p5 {
   top: 83.6%;
   left: 89.4%;
   rotate: -70deg;
 }

 .p6 {
   top: 0.3%;
   left: 87%;
 }

 .p7 {
   top: 20.6%;
   left: 84.2%;
 }

 .p8 {
   top: 15.5%;
   left: 64.7%;
   rotate: -45deg;
 }

 .p9 {
   top: 28.7%;
   left: 27.1%;
   rotate: -60deg;
 }

 .p10 {
   top: 20.9%;
   left: 43.9%;
 }

 .p11 {
   top: 40%;
   left: 77.5%;
   rotate: -40deg;
 }

 .p12 {
   top: 36.3%;
   left: 9.2%;
 }

 .p13 {
   top: 9.4%;
   left: 30.8%;
   rotate: 15deg;
 }

 .p14 {
   top: 9.4%;
   left: 76%;
 }

 .p15 {
   top: 51.7%;
   left: 88.7%;
 }

 .left-pat {
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: -2;
 }

 .right-pat {
   position: absolute;
   right: 0;
   bottom: 0;
   z-index: -2;

 }

 .hero-content {
   position: relative;
   z-index: 2;
 }

 .hero-top-title {
   max-width: 670px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 16px;
 }

 .hero-data {
   position: relative;
   z-index: 2;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   text-align: center;
   padding-top: 40px;
   gap: 24px;
   margin-bottom: 30px;
 }

 .heart-img {
   position: absolute;
   right: calc(50% + 180px);
   top: 10%;

 }

 .star-img {
   position: absolute;
   left: calc(50% + 312px);
   top: 67%;
   min-width: 20px;
   min-height: 20px;
 }

 .hero-title {
   font-size: 56px !important;
   font-weight: 900;
   margin: 0;
 }

 .hero-subtitle {
   display: flex;
   align-items: flex-end;
   gap: 12px;
   font-size: 32px;
   line-height: 1;
 }

 .hero-text {
   max-width: 670px;
   font-size: 16px;
   line-height: 28px;
   font-weight: 400;
   margin: initial;
 }

 .hero-arrow {
   position: absolute;
   left: 8%;
   top: 66%;
 }
 
 .hero-box {
   position: absolute;
   width: 80%;
   min-height: 338px;
   background-color: #ffffff;
   /* transform: translateX(-50%);
  left:50%; */
   left: 0;
   right: 0;
   margin: 0 auto;
   max-width: 1108px;
   /* z-index: 2; */
   border-radius: 16px;
   padding: 24px 16px;
   text-align: center;
   box-sizing: border-box;
   box-shadow: 0px 5px 10px -2px #9d9c9c;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 24px;

 }

 .hero-box-text {
   display: flex;
   justify-content: center;
   gap: 8px
 }

 .hero-box-text h2 {
   font-size: 20px;
   font-weight: 700;
   color: #424242;
   line-height: 24px;
   margin: initial;
 }

 .hero-buttons {
   display: grid;
   grid: repeat(2, 1fr)/ repeat(3, 3fr);
   column-gap: 12px;
   row-gap: 16px;
 }

 .services-box {
   background: #ffffff;
   color: #000000;
   padding: 12px 8px;
   border-radius: 10px;
   border: 1px solid #D1D5DB;
   display: flex;
   justify-content: flex-start;
   gap: 4px;
   color: #424242;
   cursor: pointer;
   user-select: none;
 }

 .services-box:hover,
 .services-box:active {
   background: #0066FF;
   color: #ffffff
 }

 .services-box-text-mobile {
   display: none;
 }

 .services-box-text {
   display: flex;
   flex-direction: column;
   gap: 8px;
   text-align: right;
   justify-content: center;
 }

 .services-box-text h3 {
   font-size: 14px;
   font-weight: 700;
   line-height: 1;
   margin: initial;
 }

 .services-box-text p {
   font-size: 14px !important;
   font-weight: 400;
   line-height: 1.3;
   margin: initial;
 }

 #petboom-final-root .hero-buttons .services-box img[width][height] {
  width: 48px !important;
  height: 48px !important;
 }
 
 .select-box {
   width: 459px;
   height: 40px;
   background: #ffffff;
   border: 1px solid #D1D5DB;
   border-radius: 8px;
   padding: 8px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
   position: relative;
 }

 .select-box span.placeholder-content {
   padding-bottom: 0;
 }

 .select-box span {
   color: #000000;
   display: flex;
   gap: 8px;
   align-items: center;
   font-size: 14px;
 }

 .select-box svg {
   color: #A0ACB9;
 }

 .select-box-in {
   display: flex;
   gap: 10px;
   text-align: "center";
   align-items: center;
   flex-wrap: nowrap;
   justify-content: space-between;
 }

 .select-box-text {
   display: flex;
   justify-content: left;
 }

 #selectedService {
   align-items: center;
   text-align: center;
   align-self: center;
 }

 .placeholder-content {
   padding-bottom: 8px;
 }

 .dropdown {
   position: absolute;
   width: 100%;
   top: 100%;
   background: #ffffff;
   /* border-radius: 16px 16px 0 0 ; */
   box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
   display: none;
   right: 0;

 }

 .dropdown.accordion-open {
   display: block;
 }

 .dropdown h4 {
   display: none;
 }

 .line-option {
   display: none;
 }

 .service-options {
   padding: 8px;
   overflow-y: auto;
 }

 .option {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px;
   cursor: pointer;
   font-size: 14px;
   height: 42px;
 }

 .option:hover {
  color: #0066FF;
 }
 
 .options-wrapper {
   flex: 1;
   overflow-y: auto;
   padding: 8px 4px;
   max-height: 250px;
 }

 .option.active {
   color: #0066FF;
 }

 .option input {
   accent-color: #0066FF;
 }

 .buttons {
   display: none;
 }

 .buttons button {
   flex: 1;
   padding: 8px 16px;
   border-radius: 10px;
   cursor: pointer;
   font-size: 14px;
 }

 .cancel {
   background-color: #ffffff;
   border: 1px solid #D1D5DB;
   height: 44px;
 }

 .confirm {
   background: #0066FF;
   color: #fff;
   border: none;
   height: 44px;
 }

 .services-box.active {
   background: #0066FF;
   color: #fff;
   border-color: #0066FF;
 }

 i {
   width: 24px;
   height: 24px;
   color: #000000;
 }

 .main-action-btn {
   display: flex;
   align-items: center;
   gap: 4px;
   justify-content: center;
   margin-right: 8px;
   padding: 12px 22px;
   border-radius: 10px;
   border: none;
   background: #0066FF;
   color: #ffffff;
   font-size: 14px;
   cursor: pointer;
   font-weight: bold;
   height: 40px;
   min-width: 160px;
   direction: ltr;
 }

 .main-action-btn svg {
   width: 18px;
   height: 18px;
   stroke: currentColor;
 }

 .main-action-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }

 .filters {
   display: flex;
   justify-content: space-between;
   gap: 16px;
 }

 .pet-container {
   position: relative;
   width: 117px;
   height: 108px;
   align-self: center;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: flex-end;
 }

 .hero-pet-bg {
   position: absolute;
   width: 106.74px;
   height: 98.54px;
   background: url("../img/Rectangl.png");
   background-repeat: no-repeat;
   background-size: contain;
   background-position: bottom;
   bottom: -9px;
 }

 .pet {
   position: absolute;
   inset: 0;
   width: 75px;
   height: 113px;
   opacity: 0;
   left: 50%;
   bottom: 0;
   transform: translate(-33%, 8px);
   animation: dissolve 6s infinite;
 }

 .pet1 {
   animation-delay: 0s;
 }

 .pet2 {
   animation-delay: 1.5s;
 }

 .pet3 {
   animation-delay: 3s;
 }

 .pet4 {
   animation-delay: 4.5s;
 }

 @keyframes dissolve {

   0%,
   24.99% {
     opacity: 1;
   }

   25%,
   100% {
     opacity: 0;
   }
 }

 .hero-text-highlight {
   background: url("../img/Vector49.png");
   width: 122px;
   height: 40px;
   padding: 4px 12px;
   border-radius: 6px;
   font-weight: bold;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   overflow: hidden;
   position: relative;
   text-align: center;
 }

 .words-wrapper {
   display: flex;
   flex-direction: column;
   gap: 11px;
   transition: transform 600ms cubic-bezier(0.7, -0.4, 0.4, 1.4);
 }

 .word {
   font-size: 32px;
   height: 37px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 @keyframes wordSlider {

   0%,
   20% {
     transform: translateY(0%);
   }

   25%,
   45% {
     transform: translateY(-40px);
   }

   50%,
   70% {
     transform: translateY(-80px);
   }

   75%,
   95% {
     transform: translateY(-120px);
   }

   100% {
     transform: translateY(0%);
   }
 }

 #overlay {
   position: fixed !important;
   inset: 0 !important;
   background: rgba(0, 0, 0, 0.5) !important;
   opacity: 0;
   visibility: hidden;
   transition: 0.3s ease;
   z-index: 999 !important;
   /* pointer-events: none; */
   display: none;
 }

 #overlay.active {
   opacity: 1 !important;
   visibility: visible !important;
   display: block !important;
   z-index: 9999 !important;
   /* pointer-events: auto; */
 }

 .option:focus,
 .option:focus-visible,
 .option:active {
   outline: none;
 }

 .option input:focus,
 .option input:focus-visible,
 .option input:active {
   outline: none;
   box-shadow: none;
 }

 .option {
   -webkit-tap-highlight-color: transparent;
 }

 * {
   -webkit-tap-highlight-color: transparent;
 }

  /* .container {
  
   max-width: 1146px;
   margin: auto;
   padding: 0 0 60px 0;
 } */
 /* ===================second-section=================================== */
 .second-section {

   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: flex-start;
   gap: 56px;
   text-align: center;
   
   box-sizing: border-box;
   

 }

 .second-section-right {
   display: flex;
   flex-direction: column;
   gap: 24px;
   flex: 1;
   max-width: 568px;
 }

 .second-section-right-text {
   display: flex;
   flex-direction: column;
   gap: 16px;
   text-align: right;
 }

 .main-title {
   font-size: 20px;
   font-weight: 700;
   color: #424242;
   line-height: 28px;
   margin: initial;
 }

 .main-title-desc {
   color: #424242;
   font-size: 16px;
   font-weight: 400;
   line-height: 1.3;
 }

 .feature {
   display: flex;
   gap: 15px;

 }

 .right-text-des {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }

 .feature h4 {
   font-size: 14px;
   font-weight: 700;
   color: #424242;
   line-height: 22px;
   margin: initial;
 }

 .feature p {
   font-size: 13px !important;
   color: #424242;
   font-weight: 400;
   line-height: 20px;
   margin: initial;
 }

 .second-right-icon {
   display: flex;
   gap: 8px;
   text-decoration: none;
 }

 .second-right-icon p {
   font-size: 14px;
   color: #0066FF;

   font-weight: 400;
   line-height: 26px;
 }

 .second-right-icon svg {
   display: flex;
   flex-direction: column;
   align-self: center;
   color: #0066FF;
   width: 20px;
   height: 20px;
 }

 .second-section-left {
   border: 1px solid #D0D7DE;
   max-width: 522px;
   display: flex;
   flex-direction: column;
   gap: 24px;
   border-radius: 4px;
 }

 .second-section-card {
   background: #F4F5F6;
   padding: 20px 10px 20px 24px;
   border-radius: 3px 3px 0 0;
   border-bottom: #CFD7DE solid 1px;
 }

 .card-top-text {
   display: flex;
   gap: 7px;
 }

 .card-top-text h3 {
   font-size: 18px;
   font-weight: 700;
   color: #424242;
   align-self: center;
   margin: initial;
 }

 .card-top-text h3 span {
   color: #ED6234;
 }

 .second-left-text {
   display: flex;
   flex-direction: column;
   gap: 24px;
   padding: 0 24px;
 }

 .left-text {
   display: flex;
   gap: 8px;
 }
.left-text img {
   width: 24px;
   height: 18px;

 }
 .left-text h4 {
   font-size: 14px;
   font-weight: 400;
   color: #424242;
   line-height: 24px;
   margin: initial;
 }

 .second-button {
   /* max-width: 474px; */
   width: 90%;
   padding: 8px 16px;
   background: #ED6234;
   border: none;
   color: #ffffff;
   border-radius: 10px;
   font-size: 16px;
   display: flex;
   align-self: center;
   justify-content: center;
   gap: 4px;
   margin-bottom: 24px;
 }

 .second-button p {
   align-self: center;
   margin: initial;
 }


 /* ===================op-section=================================== */

 .op-section {
   margin: auto;
   
   display: flex;
   flex-direction: column;
   gap: 24px;
   box-sizing: border-box;
 }

 .op-section-title {
   text-align: right;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 .op-section-title h2 {
   font-size: 20px;
   font-weight: 700;
   color: #424242;
   line-height: 30px;
   margin: initial;
 }
.op-section-title p {
   font-size: 14px !important;
   font-weight: 400;
   line-height: 26px;
   color: #424242;
 }
 .op-box {
   display: flex;
   gap: 20px;
   overflow-x: auto;
   scroll-behavior: initial;
   -webkit-overflow-scrolling: touch;
   -webkit-user-select: none;
   user-select: none;
 }

 .op-card {
   width: 268.75px;
   height: 250px;
   background: #ffffff;
   border-radius: 16px;
   padding: 24px 16px;
   position: relative;
   border: #D1D5DB solid 1px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 16px;
   flex: 0 0 23.5%;
}

 .op-card::before {
   content: "";
   position: absolute;
   top: -46px;
   left: -90px;
   width: 210px;
   height: 162px;
   border-radius: 67% 33% 56% 44% / 34% 56% 44% 66%;
 }

 .op-card.op-blue::before {
   background: #EDF4FF;
 }

 .op-card.op-purple::before {
   background: #F0EAFF;
 }

 .op-card.op-orange::before {
   background: #FFF2EE;
 }

 .op-card.op-yellow::before {
   background: #FFFCE8;
 }

  .op-card.op-green::before {
   background: #F0FEE4;
 }
 .op-card-text {
   font-size: 14px !important;
   font-weight: 400;
   line-height: 26px;
   color: #424242;
   /* height: 104px; */
   flex-shrink: 0;
   margin: initial;
   position: relative;
   overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
 }

 .stars {
   display: flex;
   gap: 5px;
   align-items: center;
   height: 20px;
   margin-top: auto;
 }

 .stars svg {
   width: 20px;
   height: 20px;
 }

 .starin {
   stroke: #EBA825;
   fill: #EBA825;
 }

 .stroke {
   stroke: #EBA825;
   fill: none;
 }

 .user {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .user-info {
   display: flex;
   gap: 8px;
 }

 .user-name-style {
   display: flex;
   gap: 4px;
   margin-bottom: 2px;
 }

 .avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   overflow: hidden;
 }

 .avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .user-name {
   font-weight: 700;
   font-size: 14px !important;
   color: #424242;
   border-left: #D1D5DB solid 1px;
   padding-left: 4px;
   line-height: 16px;
   margin: initial;
 }

 .user-date {
   font-size: 12px;
   color: #6E7A86;
   font-weight: 400;
   line-height: 18px;
 }

 .tag {
   font-size: 14px !important;
   font-weight: 400;
   line-height: 16px;
 }

  .tag.green {
   color: #20BC59;
 }
 .tag.blue {
   color: #0066FF;
 }

 .tag.purple {
   color: #4700FF;
 }

 .tag.orange {
   color: #ED6234;
 }

 .tag.yellow {
   color: #A9A700;
 }

 
.op-pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:20px;
}

.op-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#D1D5DB;
  margin: 0 4px;
  cursor:pointer;
  transition:.3s;
}

.op-dot.active{
  width:24px;
  border-radius:10px;
  background:#0066FF;
}


 /* ===================.about-section=================================== */
 .about-section {
   position: relative;
   padding: 56px 0;
   background: hsl(29, 94%, 86%);
   margin-bottom: 60px;
   /* overflow: hidden; */
   z-index: 1;
 }

 .about-section-pattern {
   position: absolute;
   inset: 0;
   overflow: hidden;
   z-index: 0;
   pointer-events: none;
 }

 .vector {
   position: absolute;
   z-index: 0;
 }

 .v1 {
   top: 89%;
   left: 92%;
 }

 .v2 {
   top: 46.7%;
   left: 4.4%;
 }

 .v12 {
   top: -0.85%;
   left: -0.3%;
 }

 .v3 {
   left: 6.5%;
 }

 .v6 {
   top: 1%;
   rotate: 24.66deg;
   left: 22%;
 }

 .v14 {
   top: 1%;
   rotate: 74.66deg;
   left: 75%;
 }
 .v10 {
   top: 2%;
   left: 22%;
 }

 .v7 {
      top: 384px;
    left: 50px;
 }

 .v4 {
   top: -0.02%;
   left: 80%;
 }

 .v8 {
     top: 543px;
    left: 1085px;
 }

 .v11 {
   top: 57%;
   left: 87%;
 }

 .v13 {
   top: 10%;
   left: 90%;
 }

 
 /* .v5 {
   top: 4.5%;
   left: 65%;
 } */

 .v5 {
   top: 46.36px;
   left: 942px;
 }

 .v9 {
   top: 585px;
    left: 293px;
 }
.v15{
     top: 97%;
    left: 69%;
}
 .about-section-style {
   max-width: 1200px;
   margin: auto;
   display: flex;
   justify-content: center;

   /* gap: 40px; */
   align-items: center;
   z-index: 2;
 }
.about-section-text-style{
display: flex;
flex-direction: column;
gap: 24px;
z-index: 2;
}

 .about-section-text {
   font-size: 16px;
   font-weight: 400;
   color: #424242;
   line-height: 28px;
   display: flex;
   flex-direction: column;
   gap: 24px;
   max-width: 715px;
   max-height: 250px;
   overflow: hidden;
   transition: max-height 0.4s ease;
   z-index: 2;
 }
 
 .about-section-text.open {
  max-height: 2000px;
 }
 .about-section-title {
   display: flex;
   flex-direction: column;
   gap: 8px;
   align-items: center;
   
 }

 .about-section-title span {
   color: #ED6234;
 }

 .about-section-title h2 {
   font-size: 32px;
   font-weight: 700;
   line-height: 46px;
   text-align: center;
   margin: initial;
 }

 .about-section-title p {
   font-size: 16px;
   font-weight: 400;
   color: #424242;
   line-height: 28px;
 }

 .orange-text {
   color: #ED6234;
   font-size: 16px;
   font-weight: 700;
 }


.about-section-text p{
  line-height: 28px;
  margin: initial;
  margin-bottom: 12px;
}
 .middle-text {
   font-size: 16px;
   font-weight: 700;
   line-height: 24px;
 }

 .features {
   padding-right: 17px;
   margin: initial;
   margin-bottom: 12px;
 }

 .features li {
   font-size: 16px;
   font-weight: 400;
   line-height: 28px;
 }

 .about-section-btn {
   background: #ED6234;
   color: #ffffff;
   border: none;
   padding: 8px 16px;
   border-radius: 10px;
   width: 160px;
   height: 40px;
   display: flex;
   justify-content: center;
   gap: 4px;
   align-self: center;
   text-align: center;
   cursor: pointer;
 }
.about-section-btn svg {
  transition: transform 0.3s ease;
}

.about-section-btn.open svg {
  transform: rotate(180deg);
}
 .about-section-btn p {
   align-self: center;
   font-size: 16px;
   margin: initial;
 }

 .btn-more:hover {
   background: #e5532b;
 }
.about-left-img{
  position: absolute;
  top: 8%;
  left: 5%;
}
 .about-right-img{
  position: absolute;
  top: 20%;
  left: 78%;
 }

/* WP/theme CSS sometimes forces img width/height via width/height attributes.
   Keep key UI images stable inside Petboom Final. */
#petboom-final-root .left-text img {
  width: 24px !important;
  height: 18px !important;
}

#petboom-final-root .clinic-card-img img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

 .video-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.1);
  backdrop-filter: blur(15px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 999999;
}

.video-modal.active{
  opacity: 1;
  visibility: visible;
}

.video-box{
  position: relative;
  width: 90%;
  max-width: 720px;
  height: 405px;
  border-radius: 13px;
  overflow: hidden;
}
.video-cover{
  position: relative;
  cursor: pointer;
}

.video-cover img{
  width: 720px;
  height: 405px;
  display: block;
}
.play-btn{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  color: #424242;
}
.play-btn svg{
 width: 40px;
 height: 40px;
  color: #424242;
}

.video-box video{
  width: 100%;
  display: none;
}

.close-btn{
  position: absolute;
    top: 0px;
  left: 0px;
  
  width: 24px;
   height: 24px;
  background: none;
  border: none;
  color: #424242;
  cursor: pointer;
  z-index: 10;
}

.fullscreen-btn{
  position: absolute;
  bottom: 0px;
  right: 5px;
  background: none;
  color: white;
  border: none;
  
  cursor: pointer;
  border-radius: 6px;
}

 /* ===================banner-section=================================== */

 .banner-section {
   overflow: hidden;
   padding: 60px 40px 40px 40px; 
 }

.banner-slider {
  position: relative;
  overflow: hidden;
  width:100%;
  box-sizing: border-box;
  
}

.banner-slides {
  display: flex;
  transition: transform 0.5s ease;
   width: 100%;
}
button:disabled{
opacity:.3;
cursor: not-allowed;
}

.slide {
  min-width: 100%;
 
}

.slide img {
  width: 100%;

  display: block;
}
.prev::after, .next::after {
   font-size: 18px;
  color: #414A53;
  font-weight : 700;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  padding: 10px;
  cursor: pointer;
   width: 40px;
  height: 40px;
  background: #ffffff;
  border-radius: 50%;
    display: flex;
  align-items: center;
  justify-content: center;
}

.prev { left: 16px; }
.next { right: 16px; }

.banner-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  gap: 8px;
  opacity: 0.4;

}

.banner-dot {
  height: 10px;
  width: 10px;
  background: #ccc;
  display: inline-block;
  border-radius: 50%;
  margin: 3px;
}

.banner-dot.active {
  background: #333;
}


 /* ===================social-section=================================== */

 .social-section {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap:  14px;
 }

  .social-section a {
    display: block;
    width: auto;
  }
 
 .social-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
 }

 /* ===================blogsection=================================== */

 .blog-section {
   display: flex;
   flex-direction: column;
   gap: 24px;  
 }

 .blog-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   overflow-x: auto;
   padding-top: 8px;
 }
.blog-view-all-mobile{
  display: none;
}

 .blog-title {
   display: flex;
   flex-direction: column;
   gap: 7px;
 }

 .blog-title h2 {
   font-size: 20px;
   font-weight: 700;
   color: #424242;
   line-height: 28px;
   margin: initial;
 }

 .blog-title p {
   color: #424242;
   font-size: 14px !important;
   line-height: 20px;
   font-weight: 400;
 }

 .blog-view-all {
   text-decoration: none;
   color: #0066FF;
   font-size: 14px;
   font-weight: 400;
   display: flex;
   align-items: center;
   gap: 6px;
 }


 .blog-categories {
   display: flex;
   border: #D1D5DB solid 1px;
   border-radius: 8px;
   height: 40px;
 }

 .blog-category {
   background: #ffffff;
   padding: 4px 24px;
   border-radius: 8px;
   font-weight: 400;
   border: none;
   color: #424242;
   text-decoration: none;
   /* cursor: pointer; */
   font-size: 16px;
   /* transition: 0.3s; */
 }

 .blog-category:visited,
 .blog-category:hover,
 .blog-category:active,
 .blog-category:focus {
   color: #424242;
 }

 .blog-category.active {
   background: #0066FF;
   color: #ffffff;
 }


 .blog-section-box {
  display: flex;
  gap: 20px;
  padding-bottom: 10px;
  overflow-x: auto;
 }

 .blog-box {
   max-width: 271px;   
   flex-shrink: 0;
   user-select: none;
 }

 .blog-box > a {
  text-decoration: none;
 }
 
 .blog-box .con {
  display: flex;
  flex-direction: column;
  gap: 12px;
 }

 .blog-box-image {
   position: relative;
   width: 100%;
   /* aspect-ratio: 4 / 3; */
   overflow: hidden;
 }

 .blog-box-image img {
   width: 100%;
   aspect-ratio: 16 / 9;
   object-fit: cover;
   border-radius: 16px;
   vertical-align: bottom;
 }
 .blog-box-image .badges {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
  z-index: 5;
 }
 .blog-badge {
   padding: 3px 12px;
   font-size: 11px;
   border-radius: 16px;
   line-height: 16.5px;
   text-align: center;
 }

 .blog-badge.yellow {
   background: #FDFFDE;
   color: #8E7B00;
 }

.blog-badge.blue {
   background: #EDF4FF;
   color: #006FFF;
 }
 .blog-badge.purple {
   background: #E9DEFF;
   color: #3700FF;
 }

 .blog-badge.green {
   background: #DEFFDF;
   color: #098500;
 }
 .blog-badge.orange {
   background: #FFEADE;
   color: #FF0000;
 }

 .blog-text {
     margin-top:12px;
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

 .blog-text h3 {
   font-size: 14px !important;
   color: #424242;
   font-weight: 700;
    overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   margin: initial;
 }

 .blog-date {
   font-size: 12px !important;
   color: #888;
   display: flex;
   gap: 8px;
   margin: initial;
 }

 .blog-date svg {
   width: 20px;
   height: 20px;
 }

 .blog-date time {
   font-size: 13px !important;
   font-weight: 400;
   color: #6E7A86;
   line-height: 20px;
 }



 /* ===================clinics-section=================================== */
 .clinics-section {
   display: flex;
   flex-direction: column;
   gap: 24px;
 }

 .clinics-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
 }

 .clinics-title {
   display: flex;
   flex-direction: column;
   gap: 7px;
 }

 .clinics-title h2 {
   font-size: 20px;
   font-weight: 700;
   color: #424242;
   line-height: 30px;
   margin: initial;
 }

 .clinics-title p {
   font-size: 14px !important;
   font-weight: 400;
   color: #424242;
   line-height: 20px;
 }

 .clinics-link {
   display: flex;
   align-items: center;
   gap: 6px;
   text-decoration: none;
   color: #0066FF;
   font-size: 14px;
 }

 .clinics-box {
   display: flex;
   gap: 20px;
   justify-content: space-between;
 }

 .clinic-card {
   background: #ffffff;
   border: #BAC6D3 solid 1px;
   border-radius: 10px;
   min-width: 122px;
   max-width: 256px;
   display: flex;
   flex-direction: column;
   gap: 15px;
   overflow: hidden;

   cursor: pointer;
 }

 .clinic-text {
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   padding: 0 8px 20px 8px;
   text-decoration: none;
 }

 .clinic-card-img img {
   width: 100%;
   object-fit: cover;
   display: block;
 }

 .clinic-card-text {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 .clinic-text svg {
   align-self: center;
 }
  .clinic-card svg {
  align-self: center;
   color: #002C6D;
 }
 .clinic-card i {
  align-self: center;
   color: #002C6D;
 }
 .clinic-card-text h3 {
   font-size: 14px;
   font-weight: 600;
   color: #002C6D;
   margin: initial;
 }
 .clinic-card-text span {
   color: #002C6D;
 }
 .clinic-card-text p {
   font-size: 12px !important;
   font-weight: 400;
   color: #424242;
   line-height: 1;
 }

 .clinics-link-button{
  display: none;
 }

.discount-section .banner-image {
  width: 100%;
  height: auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.custom-scroller-indicator-js {
  width: 50px;
  height: 7px;
  background-color: #D9D9D9;
  border-radius: 10px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  user-select: none;
}
.custom-scroller-indicator-js .scroll-thumb {
  width: 25%;
  height: 100%;
  background-color: #0066FF;
  border-radius: 10px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: grab;
}
.custom-scroller-indicator-js .scroll-thumb.dragging {
  cursor: grabbing;
}