@font-face {
  font-family: 'Iranian-Sans';
  src: url('../fonts/Iranian-Sans.ttf') format('truetype'),
  url('../fonts/Iranian-Sans.woff2') format('woff2'),
       url('../fonts/Iranian-Sans.woff') format('woff');
  font-weight: normal;
  font-style: normal;
    font-display: swap;
}

  @font-face {
    font-family: 'BYekan';
    src: url(../fonts/BYekan+.ttf) format('truetype');
  }

    @font-face {
    font-family: 'IranYekan';
    src: url(../fonts/iranyekanwebregular.woff2) format('woff2');
  }

 @font-face {
  font-family: 'vazir';
  src: url(../fonts/Vazirmatn-ExtraLight.ttf) format('truetype');
}

 @font-face {
  font-family: 'vazir2';
  src: url(../fonts/Vazirmatn-SemiBold.ttf) format('truetype');
}

 @font-face {
  font-family: 'vazir3';
  src: url(../fonts/Vazirmatn-Regular.ttf) format('truetype');
}

 @font-face {
  font-family: 'nastaliq';
  src: url(../fonts/IranNastaliq.ttf) format('truetype');
}
   
   body {
      direction: rtl;
      font-family: 'vazir3';    
    overflow-x: hidden;
    }

    html{
      background-color: white;
    }

    header {
   position: sticky;
  top: 0;
  z-index: 1000;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
  padding-left: 50px;
  border-radius: 55px;
  background-color: rgba(225, 245, 250, 0.75);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 4px 15px rgba(0, 80, 100, 0.08);
    }

    header.scrolled {
    top: 5px;
}

    nav {
      color: white;
      display: flex;
            display: -webkit-flex;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -webkit-align-items: center;
        align-items: center;
       font-family: 'Iranian-Sans';
      font-weight: bold;    
    }

    nav ul {
      display: -webkit-flex;
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      margin-top: 5px;

    }

    nav ul li {
      margin: 0 5px;
    }

    nav ul li a {
  line-height: 1;
  display: inline-block; /* باعث میشه ارتفاع یکنواخت بشه */
}

.mobile-header {
    display: none;
}

.hamburger {
    border: none;
    background: none;
    cursor: pointer;
    color: rgb(41, 158, 231);
    font-size: 28px;
    padding: 0;
}

.hamburger .fa-times {
    display: none;
}

.menu-overlay {
    display: none;
}

.mobile-phone {
    display: none;
}

.mobile-tel {
        margin-top: 6px;
        background-color: rgb(24, 224, 224);
        border-radius: 12px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 1px;
        padding-top: 1px;
        color: white;
        transition: background-color 0.3s ease;
       font-family: 'Iranian-Sans';
      font-weight: bold;    
}

.mobile-tel p {
  display: inline-flex;
padding-left: 8px;
}

.mobile-tel:hover {
  background-color: rgb(21, 201, 201);
}


    a {
        text-decoration: none;
        color: black;
    }

    .menu2 {
      padding: 1px;
        padding-right: 20px;
        padding-left: 15px;
        border-radius: 30px;
        transition: background-color 0.3s ease;
        margin-top: 3px;
    }


      .menu2 p {
        transition: color 0.25s ease;
    }


    .menu2:hover p {
        color: rgb(41, 158, 231);
    }


    .active p {
        color: rgb(41, 158, 231);
    }


    #logo img {
        width: 40px;
        height: 60px;
        margin-left: 10px;
    }

    #es{
        display: flex;
    }

    #tel {
        margin-top: 6px;
        background-color: rgb(24, 224, 224);
        border-radius: 12px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 1px;
        padding-top: 1px;
        color: white;
        transition: background-color 0.3s ease;
    }

    #tel p {
                display: inline-flex;
                padding-left: 8px;
    }

    #tel:hover {
        background-color: rgb(21, 201, 201);
    }


/*///////////////////////////footer///////////////////////////*/
/*///////////////////////////footer///////////////////////////*/
/*///////////////////////////footer///////////////////////////*/

#contact1 {
  display: flex;
background: linear-gradient(135deg, #f1f8fa 0%, #e4f4fd 100%);
border-radius: 35px;
border-top: 5px solid rgb(13, 163, 190);
margin-right: 50px;
margin-left: 50px;
padding-bottom: 10px;
margin-bottom: 10px;
}

#contact2 {
  width: 550px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-top: 80px;
  margin-bottom: 30px;
  height: fit-content;
}

#contact3 {
  display: flex;
  justify-content: center;
}

#contact4 {
  color: #107474;
  width: fit-content;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

#contact5 {
  padding-right: 10px;
  margin-top: 30px;
  position: relative;
  top: 0px;
}

#contact6 {
  display: flex;
  position: relative;
  top: 30px;
  text-align: right;
}

#contact7 {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  top: -7px;
  justify-content: center;
}

#contact8 {
  font-size: large;
  font-weight: bold;
}

.contact9 {
  color: rgb(16, 126, 177);
}

.contact10 {
  color: #14AAAA;
}

.contact11 {
  display: flex;
  align-items: center;
  gap: 2px;
}

.contact12 {
  height: 28px;
  width: 28px;
}

#contact13 {
  margin-bottom: 20px;
  margin-top: 20px;
}

#contact14 {
  position: relative;
  top: 30px;
  display: flex;
  justify-content: center;
}

.contact15 {
  width: 30px;
  height: 30px;
  position: relative;
  top: 19px;
  transition: 0.3s;
}

.contact15:hover {
  position: relative;
  top: 14px;
}

.contact16 {
  margin-left: 13px;
}

#contact17 {
  height: fit-content;
}


#contact18 {
  height: fit-content;
}


#contact19 {
  color: #1bb2b2;
}

#contact19 :hover {
color: #188585;
}

#contact20 {
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    top: 2px;
    font-size: 17px;
}

#contact21 {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 12px;
  padding-left: 20px;
  margin: 0;
}

#contact22 {
  background-color: #2976ce;
  color: rgb(255, 255, 255);
  width: fit-content;
  border-radius: 25px;
  box-shadow: 1px 4px 5px rgb(12, 82, 161);
  transition: 0.3s;
  transition: 0.3s;
  position: relative;
  top: 0px;
  cursor: pointer;
}

#contact22:hover {
  background-color: #1254b6;
  border-radius: 25px;
  box-shadow: 2px 6px 8px rgb(7, 49, 97);
 position: relative;
  top: -3px;
}


#contact24 {
  position: relative;
  top: 30px;
}

#contact25 {
line-height: 6;
}

#contact26 {
  width: 350px;
  height: 100px;
  margin-right: 80px;
  box-shadow: 4px 6px 8px rgb(201, 198, 198);
  border-radius: 15px;
  padding-right: 10px;
  padding-left: 10px;
  background-color: white;
}

#contact27 {
  width: 3px;
  height: 200px;
  background-color: #1cc7c7;
  position: relative;
  top: 180px;
  border-radius: 10px;
}

#contact28 {
  transition: 0.3s;
}

#contact28 :hover {
  box-shadow: 4px 10px 8px rgb(201, 198, 198);
  width: 360px;
  height: 102px;
}

.contact29 {
  font-size: 14px;
  font-weight: 1;
  margin-right: auto;
  margin-left: auto;
}

.contact30 {
  font-weight: 600;
}

#contact31 {
  position: relative;
  top: -13px;
}

#contact32 {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 10px;
}

#contact33 {
    display: flex;
    align-items: center;
}

#contact34 {
  margin-top: 30px;
  margin-bottom: 0;
}

#contact35 {
display: none;
}

#contact38 {
    display: none;
}

#contact39 {
    display: none;
}

#backToTop {
  position: fixed;
  left: 25px;
  bottom: 25px;
  z-index: 1000;

  width: 52px;
  height: 52px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;

  background: linear-gradient(135deg, #2a8c87, #1b6b68);
  color: white;

  box-shadow:
    0 8px 20px rgba(27, 107, 104, 0.28),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(15px) scale(0.85);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* آیکون فلش */
#backToTop svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 0.3s ease;
}

/* نمایش دکمه در انتهای صفحه */
#backToTop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* حالت قرار گرفتن موس */
#backToTop:hover {
  transform: translateY(-4px) scale(1.05);

  box-shadow:
    0 12px 25px rgba(27, 107, 104, 0.38),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

#backToTop:hover svg {
  transform: translateY(-2px);
}

/* حالت فشردن دکمه */
#backToTop:active {
  transform: translateY(-1px) scale(0.96);
}

/* مناسب برای کاربرانی که انیمیشن را غیرفعال کرده‌اند */
@media (prefers-reduced-motion: reduce) {
  #backToTop,
  #backToTop svg {
    transition: none;
  }
}

/* پس زمینه پنجره */
#navigationModal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);

    justify-content: center;
    align-items: center;
}


/* خود پنجره */
#navigationBox {
    position: relative;
    background-color: white;
    width: 90%;
    max-width: 750px;
    padding: 40px 30px;
    border-radius: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}


/* دکمه ضربدر */
#closeNavigation {
    position: absolute;
    top: 22px;
    right: 28px;

    border: none;
    background: none;

    font-size: 38px;
    line-height: 1;
    color: #555;

    cursor: pointer;

    transition: 0.2s;
}

#closeNavigation:hover {
    color: #d22;
    transform: scale(1.1);
}


/* گزینه های مسیریابی */
#navigationOptions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    flex-wrap: wrap;
}

/*///////////////////////////gallery///////////////////////////*/
/*///////////////////////////gallery///////////////////////////*/
/*///////////////////////////gallery///////////////////////////*/

#gallery1 {
  background-color: #2976ce;
  display: flex;
  width: 70%;
  height: 100px;
  margin-right: auto;
  margin-left: auto;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
}

#gallery2 {
  color: white;
}

#gallery3 {
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
}

#gallery4 {
  list-style: none;
  display: flex;
}

.gallery5 {
  margin-left: 20px;
    cursor: pointer;
}

.gallery5 :hover {
  background-color: #0c5e9c;
  color: #e3fdfd;
}

.gallery7.active {
  background-color: #0c5e9c;
  color: #e3fdfd;
}


#gallery6 {
  margin-left: 0;
}

.gallery7 {
  padding-bottom: 10px;
  padding-top: 10px;
  padding-right: 20px;
  padding-left: 20px;
  border-radius: 45px;
  background-color: #e3fdfd;
  color: #0c5e9c;
  transition: 0.3s;
}

#gallery8 {
  width: 1330px;
  max-width: calc(100% - 40px);
  margin-right: auto;
  margin-left: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.gallery13 {
  width: calc((100% - 40px) / 3);
  height: 450px;
  overflow: hidden;
  border-radius: 25px;
}

.gallery13 a {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery14 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gallery13:hover .gallery14 {
  transform: scale(1.1);
}

#gallery15 {
    display: none;
}

/*///////////////////////////contact us///////////////////////////*/
/*///////////////////////////contact us///////////////////////////*/
/*///////////////////////////contact us///////////////////////////*/

#us1 {
  text-align: right;;
}

.us2 {
  justify-content: right !important;
}

.us3 {
  justify-content: right !important;
  background-color: white;
  border-radius: 15px;
  width: fit-content;
  margin-top: 10px;
  padding-right: 58px;
  padding-left: 58px;
  box-shadow: 2px 4px 8px rgb(25, 149, 221);
  grid-column: 1;
  grid-row: 2;
}

.break {
  flex-basis: 100%;
  height: 0;
}

#us4 {
  display: block;
}

#us5 {
  top: 0;
}

#us6 {
  margin-top: 0;
  margin-bottom: 0;
}

.us7 {
  color: #107474;
  padding-right: 10px;
}

#us8 {
  background-color: white;
  border-radius: 15px;
  width: fit-content;
  padding: 20px;
  padding-top: 0;
  padding-bottom: 0;
  box-shadow: 2px 4px 8px rgb(25, 149, 221);
  grid-column: 1;
  grid-row: 1;
}

#us9 {
  background-color: #EBF5FF;
  border-radius: 25px;
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: large;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: fit-content;
  padding-left: 30px;
  padding-right: 30px;
}

#us10 {
  grid-column: 2;
  grid-row: 1 / 3;
  background-color: white;
  width: fit-content;
  height: fit-content;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  border-radius: 15px;
  margin-right: -20px;
}

#us11 {
  border-radius: 15px;
}

#us12 {
  display: flex;
  justify-content: center;
  margin-bottom: 80px;
}

/* عنوان */
#us14 {
    color: #3729ce;
    text-align: center;
    font-size: 40px;
    font-family: 'vazir2';
    margin-top: 0;
    margin-bottom: 55px;
}

#us15 {
 display: flex; 
 justify-content: center;
  margin-bottom: 100px; 
  grid-gap: 150px;
 }


/* تصاویر */
.us17 {
    width: 110px;
    height: 110px;
    transition: 0.3s;
}

.us17:hover {
    width: 120px;
    height: 120px;
}

.us18 {
    border-radius: 15px;
}

#us19 {
    width: 130px;
    height: 110px;
}

#us19:hover {
    width: 140px;
    height: 120px;
}

.us20 {
top: 23px;
  width: 30px;
  height: 30px;
}

.us20:hover {
top: 18px;
}

.us21 {
  position: relative; 
  top: 18px;
}

#us23 {
    display: none;
}

/*///////////////////////////comments///////////////////////////*/
/*///////////////////////////comments///////////////////////////*/
/*///////////////////////////comments///////////////////////////*/

.review-form-section {
  width: 100%;
  padding: 60px 20px;
  box-sizing: border-box;
}


.review-form-container {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 35px;
  box-sizing: border-box;

  background-color: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 15px;

  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.07);
}


.review-form-container h2 {
  margin: 0 0 10px;

  text-align: center;

  font-size: 28px;
  font-weight: 700;

  color: #222;
}


.review-form-description {
  margin: 0 0 30px;

  text-align: center;

  font-size: 15px;
  line-height: 1.8;

  color: #777;
}


.review-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}


.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.form-group label {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}


.form-group input,
.form-group textarea {
  width: 100%;
  box-sizing: border-box;

  padding: 13px 15px;

  background-color: #fafafa;

  border: 1px solid #dfe3e8;
  border-radius: 9px;

  outline: none;

  font-family: inherit;
  font-size: 14px;

  color: #333;

  transition: 0.2s;
}


.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #999;
}


.form-group input:focus,
.form-group textarea:focus {
  background-color: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}


.form-group textarea {
  min-height: 140px;
  resize: vertical;
}


.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 5px;
}

.rating input {
    display: none;
}

.rating label {
    font-size: 30px;
    color: #d8dce1;
    cursor: pointer;
    transition: 0.2s;
}

/* حالت Hover */
.rating label:hover,
.rating label:hover ~ label {
    color: #f5b301;
}

/* حالت انتخاب شده */
.rating input:checked ~ label {
    color: #f5b301;
}


.review-submit {
  width: 100%;

  padding: 13px 20px;

  border: none;
  border-radius: 9px;

  background-color: #3b82f6;
  color: #ffffff;

  font-family: inherit;
  font-size: 16px;
  font-weight: 600;

  cursor: pointer;

  transition: 0.2s;
}


.review-submit:hover {
  background-color: #2563eb;
}

.review-message {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    margin-bottom: 12px;
    margin-top: 30px;
    border-radius: 9px;
    font-size: 14px;
    line-height: 1.8;
}

.review-success {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.review-error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.review-error p {
    margin: 0;
}

.review-error p + p {
    margin-top: 5px;
}

.reviews-list {
    width: 100%;
    max-width: 700px;
    margin: 20px auto 0;

    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 80px;
}


.review-card {
    width: 100%;
    box-sizing: border-box;

    padding: 25px;

    background-color: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 15px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
}


.review-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.review-name {
    font-size: 16px;
    font-weight: 700;
    color: #222;
}


.review-rating {
    display: flex;
    direction: ltr;
    gap: 2px;
}


.review-rating .star {
    font-size: 20px;
    color: #d8dce1;
}


.review-rating .star.active {
    color: #f5b301;
}

.review-comment {
    margin: 18px 0 15px;
    font-size: 15px;
    line-height: 2;
    color: #555;
    overflow-wrap: anywhere;
}


.review-date {
    display: block;

    font-size: 12px;
    color: #999;

    text-align: left;
}

.comments {
  margin-bottom: 0 !important;
}




/*///////////////////////////join///////////////////////////*/
/*///////////////////////////join///////////////////////////*/
/*///////////////////////////join///////////////////////////*/


/* =========================================
   MAIN PAGE
========================================= */

.employment-page {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
    direction: rtl;
    box-sizing: border-box;
}


/* =========================================
   INTRO
========================================= */

.employment-page .employment-intro {
    text-align: center;
    margin-bottom: 40px;
}

.employment-page .employment-intro h1 {
    margin: 0 0 15px;
    font-size: 34px;
    font-weight: 700;
}

.employment-page .employment-intro p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 2;
}


/* =========================================
   FORM CARD
========================================= */

.employment-page .employment-card {
    width: 100%;
    background-color: #ffffff;

    border: 1px solid #e7e7e7;
    border-radius: 20px;

    padding: 40px;

    box-sizing: border-box;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.09);
}


/* =========================================
   MESSAGES
========================================= */

.employment-page .employment-message {
    width: 100%;

    box-sizing: border-box;

    margin-bottom: 30px;

    padding: 18px 20px;

    border-radius: 12px;

    font-size: 14px;

    line-height: 2;

}


/* ---------- Error ---------- */

.employment-page .employment-message-error {
    border: 1px solid #f1b5b5;

    background-color: #fff5f5;

    color: #b42318;
}


.employment-page .employment-message-error strong {
    display: block;

    margin-bottom: 5px;

    font-size: 15px;
}


.employment-page .employment-message-error ul {
    margin: 8px 0 0;

    padding-right: 22px;
}


.employment-page .employment-message-error li {
    margin-bottom: 3px;
}


.employment-page .employment-message-error p {
    margin: 8px 0 0;
}


/* ---------- Success ---------- */

.employment-page .employment-message-success {
    border: 1px solid #a8d8b0;

    background-color: #f1fbf3;

    color: #237a35;

    font-weight: 600;

    text-align: center;
}


/* =========================================
   FORM
========================================= */

.employment-page .employment-form {
    width: 100%;
}


/* =========================================
   SECTIONS
========================================= */

.employment-page .employment-section {
    padding-bottom: 35px;
    margin-bottom: 35px;

    border-bottom: 1px solid #eeeeee;
}


/* =========================================
   SECTION TITLE
========================================= */

.employment-page .employment-section-title {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;
}


.employment-page .employment-section-title > span {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background-color: #eeeeee;

    font-size: 15px;
    font-weight: 700;
}


.employment-page .employment-section-title h2 {
    margin: 0 0 5px;

    font-size: 20px;
}


.employment-page .employment-section-title p {
    margin: 0;

    font-size: 13px;
}


/* =========================================
   GRID
========================================= */

.employment-page .employment-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================
   FIELDS
========================================= */

.employment-page .employment-field {
    min-width: 0;

    display: flex;

    flex-direction: column;
}


.employment-page .employment-field-wide {
    grid-column: 1 / -1;
}


/* =========================================
   LABELS
========================================= */

.employment-page .employment-field label {
    margin-bottom: 9px;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.8;
}


/* =========================================
   INPUTS
========================================= */

.employment-page .employment-field input,
.employment-page .employment-field select,
.employment-page .employment-field textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid #dddddd;

    border-radius: 10px;

    background-color: #ffffff;

    padding: 13px 14px;

    font-family: inherit;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================
   INPUT / SELECT
========================================= */

.employment-page .employment-field input,
.employment-page .employment-field select {
    height: 48px;
}


/* =========================================
   TEXTAREA
========================================= */

.employment-page .employment-field textarea {
    min-height: 120px;

    resize: vertical;

    line-height: 1.8;
}


/* =========================================
   FOCUS
========================================= */

.employment-page .employment-field input:focus,
.employment-page .employment-field select:focus,
.employment-page .employment-field textarea:focus {
    border-color: #2c7a7b;

    box-shadow:
        0 0 0 3px rgba(44, 122, 123, 0.08);
}


/* =========================================
   PLACEHOLDER
========================================= */

.employment-page .employment-field input::placeholder,
.employment-page .employment-field textarea::placeholder {
    color: #aaaaaa;
}


/* =========================================
   WORK EXPERIENCE CHOICE
========================================= */

.employment-page .employment-work-history-choice {
    margin-bottom: 25px;
}


/* =========================================
   RADIO GROUP
========================================= */

.employment-page .employment-radio-group {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 4px;
}


/* =========================================
   RADIO OPTION
========================================= */

.employment-page .employment-radio-option {
    display: flex !important;

    flex-direction: row !important;

    align-items: center;

    gap: 8px;

    margin: 0 !important;

    padding: 11px 18px;

    border: 1px solid #dddddd;

    border-radius: 10px;

    background-color: #ffffff;

    cursor: pointer;

    font-size: 14px !important;

    font-weight: 500 !important;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}


.employment-page .employment-radio-option:hover {
    border-color: #2c7a7b;

    background-color: #f7fbfb;
}


/* =========================================
   RADIO BUTTON
========================================= */

.employment-page
.employment-radio-option
input[type="radio"] {

    width: 17px;
    height: 17px;

    margin: 0;

    padding: 0;

    accent-color: #2c7a7b;

    cursor: pointer;
}


/* =========================================
   EXPERIENCE CONTAINER
========================================= */

.employment-page .employment-experience-container {
    width: 100%;
}


/* =========================================
   EXPERIENCE BOX
========================================= */

.employment-page .employment-experience-box {
    width: 100%;

    margin-top: 20px;

    padding: 25px;

    box-sizing: border-box;

    border: 1px solid #e5e5e5;

    border-radius: 15px;

    background-color: #fafcfc;

    animation:
        employmentExperienceAppear
        0.25s ease;
}


/* =========================================
   FIRST EXPERIENCE
========================================= */

.employment-page
.employment-experience-box:first-child {

    margin-top: 0;

}


/* =========================================
   EXPERIENCE TITLE
========================================= */

.employment-page .employment-experience-box h3 {
    margin: 0 0 22px;

    font-size: 17px;

    font-weight: 700;

    color: #2c7a7b;
}


/* =========================================
   ADD EXPERIENCE BUTTON
========================================= */

.employment-page .employment-add-experience {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    width: fit-content;

    margin: 20px auto 0;

    padding: 10px 20px;

    border: 1px solid #2c7a7b;

    border-radius: 10px;

    background-color: #ffffff;

    color: #2c7a7b;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


.employment-page .employment-add-experience:hover {
    background-color: #2c7a7b;

    color: #ffffff;
}


.employment-page
.employment-add-experience
span:first-child {

    font-size: 20px;

    line-height: 1;

}


/* =========================================
   EXPERIENCE ANIMATION
========================================= */

@keyframes employmentExperienceAppear {

    from {

        opacity: 0;

        transform:
            translateY(-8px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================
   RESUME UPLOAD
========================================= */

.employment-page .employment-upload {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 30px 20px;

    border: 2px dashed #d8dfe2;

    border-radius: 15px;

    background-color: #fafcfc;

    text-align: center;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}


.employment-page .employment-upload:hover {
    border-color: #2c7a7b;

    background-color: #f7fbfb;
}


/* =========================================
   UPLOAD ICON
========================================= */

.employment-page .employment-upload-icon {
    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    border-radius: 50%;

    background-color: #eaf4f4;

    font-size: 25px;
}


/* =========================================
   UPLOAD TITLE
========================================= */

.employment-page .employment-upload-title {
    margin-bottom: 6px;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;
}


/* =========================================
   UPLOAD TEXT
========================================= */

.employment-page .employment-upload-text {
    margin: 0 0 18px;

    font-size: 13px;
}


/* =========================================
   UPLOAD BUTTON
========================================= */

.employment-page .employment-upload-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 10px 25px;

    border-radius: 9px;

    background-color: #4a6fa5;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        opacity 0.2s ease;
}


.employment-page .employment-upload-button:hover {
    opacity: 0.9;
}


/* =========================================
   HIDDEN FILE INPUT
========================================= */

.employment-page
.employment-upload
input[type="file"] {

    display: none;

}


/* =========================================
   FILE STATUS
========================================= */

.employment-page .employment-file-status {
    display: block;

    margin-top: 14px;

    font-size: 12px;
}


.employment-page
.employment-file-status.file-selected {

    font-weight: 600;

}


/* =========================================
   SUBMIT
========================================= */

.employment-page .employment-submit {
    display: flex;

    justify-content: center;

    padding-top: 30px;
}


.employment-page .employment-submit button {
    border: none;

    border-radius: 10px;

    padding: 14px 45px;

    background-color: #2c7a7b;

    color: #ffffff;

    font-family: inherit;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.employment-page
.employment-submit
button:hover {

    opacity: 0.9;

}


.employment-page
.employment-submit
button:active {

    transform: scale(0.98);

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {


    .employment-page {

        padding: 35px 15px;

    }


    /* ---------- Intro ---------- */

    .employment-page
    .employment-intro {

        margin-bottom: 30px;

    }


    .employment-page
    .employment-intro h1 {

        font-size: 28px;

    }


    /* ---------- Card ---------- */

    .employment-page
    .employment-card {

        padding: 25px 18px;

        border-radius: 15px;

        box-shadow:
            0 8px 25px
            rgba(0, 0, 0, 0.08);

    }


    /* ---------- Grid ---------- */

    .employment-page
    .employment-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .employment-page
    .employment-field-wide {

        grid-column: auto;

    }


    /* ---------- Section ---------- */

    .employment-page
    .employment-section-title h2 {

        font-size: 18px;

    }


    /* ---------- Radio ---------- */

    .employment-page
    .employment-radio-group {

        width: 100%;

        gap: 10px;

    }


    .employment-page
    .employment-radio-option {

        flex: 1;

        justify-content: center;

        padding: 11px 10px;

    }


    /* ---------- Experience ---------- */

    .employment-page
    .employment-experience-box {

        padding: 20px 15px;

    }


    .employment-page
    .employment-experience-box h3 {

        font-size: 16px;

    }


    /* ---------- Add button ---------- */

    .employment-page
    .employment-add-experience {

        width: 100%;

    }


    /* ---------- Submit ---------- */

    .employment-page
    .employment-submit button {

        width: 100%;

    }


    /* ---------- Messages ---------- */

    .employment-page
    .employment-message {

        padding: 15px;

        font-size: 13px;

    }

}

/* =========================================
   SUCCESS MESSAGE
========================================= */

.employment-page .employment-message.success {
    margin-bottom: 25px;

    padding: 14px 18px;

    border: 1px solid #b7dfc2;
    border-radius: 10px;

    background-color: #eefaf1;
    color: #26733a;

    text-align: center;

    font-size: 14px;
    font-weight: 600;
}

/*///////////////////////////about us///////////////////////////*/
/*///////////////////////////about us///////////////////////////*/
/*///////////////////////////about us///////////////////////////*/


:root {
    --about-navy: #142f3d;
    --about-blue: #2d7185;
    --about-gold: #c9a66b;
    --about-bg: #f7f9fa;
    --about-white: #ffffff;
    --about-text: #53656d;
    --about-border: #e2e8eb;
}


/* ========================================
   ABOUT HERO
======================================== */

.about-hero {
    width: 88%;
    max-width: 1250px;

    margin: 85px auto 150px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 120px;

    direction: ltr;
}


.about-hero-content {
    direction: rtl;

    position: relative;

    padding-right: 15px;
}

.about-label {
    color: var(--about-blue);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.5px;

    display: inline-block;

    margin-bottom: 20px;
}

.about-label::after {
    content: "";

    display: block;

    width: 45px;
    height: 2px;

    background: var(--about-gold);

    margin-top: 9px;
}

.about-hero-content h1 {
    color: var(--about-navy);

    font-size: 48px;

    line-height: 1.45;

    font-weight: 800;

    margin: 0 0 30px;
}

.about-hero-content p {
    color: var(--about-text);

    font-size: 16px;

    line-height: 2.2;

    max-width: 570px;

    margin: 0 0 14px;
}


/* ========================================
   WHY US
======================================== */

.why-us {
    width: 100%;
    box-sizing: border-box;

    padding: 110px 6% 120px;

    background: #f7f9fa;

    direction: rtl;

    overflow: hidden;
}


/* =========================
   HEADING
========================= */

.why-us-heading {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto 60px;

    text-align: center;
}

.why-us-heading span {
    display: inline-block;

    color: #c9a66b;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 10px;
}

.why-us-heading h2 {
    color: #142f3d;

    font-size: 40px;

    font-weight: 800;

    margin: 0 0 12px;
}

.why-us-heading p {
    color: #53656d;

    font-size: 15px;

    margin: 0;

    line-height: 2;
}


/* =========================
   GRID
========================= */

.why-us-grid {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 20px;

    box-sizing: border-box;
}


/* =========================
   CARD
========================= */

.why-card {
    min-width: 0;

    box-sizing: border-box;

    padding: 35px 28px;

    background: #ffffff;

    border: 1px solid #e2e8eb;

    border-radius: 22px;

    text-align: center;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.why-card:hover {
    transform: translateY(-7px);

    border-color: rgba(201, 166, 107, 0.5);

    box-shadow:
        0 18px 45px rgba(20, 47, 61, 0.09);
}


/* =========================
   ICON
========================= */

.why-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 23px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eef5f6;

    color: #2d7185;

    font-size: 25px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.why-card:hover .why-icon {
    background: #2d7185;

    color: #ffffff;

    transform: scale(1.07);
}


/* =========================
   CONTENT
========================= */

.why-card-content h3 {
    color: #142f3d;

    font-size: 19px;

    font-weight: 700;

    margin: 0 0 12px;
}

.why-card-content p {
    color: #53656d;

    font-size: 14px;

    line-height: 2;

    margin: 0;
}


/* ========================================
   DOCTOR
======================================== */

.doctor-section {
    width: 88%;
    max-width: 1250px;

    margin: 150px auto;

    display: grid;

    grid-template-columns: 0.9fr 1fr;

    align-items: center;

    gap: 100px;

    direction: rtl;
}

.about-hero-image,
.doctor-image {
    position: relative;

    padding: 10px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #d8c39a;

    box-shadow:
        0 18px 45px rgba(20, 47, 61, 0.12);

    overflow: visible;
}

.about-hero-image {
  width: 600px;
}

.doctor-image {
  height: 82%;
}


/* قاب داخلی */

.about-hero-image::before,
.doctor-image::before {
    content: "";

    position: absolute;

    inset: 5px;

    border: 1px solid rgba(201, 166, 107, 0.45);

    pointer-events: none;

    z-index: 3;
}


/* عکس */

.about-hero-image img,
.doctor-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border: none;

    border-radius: 0;

    box-shadow: none;

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}


/* گوشه‌های تزئینی */

.about-hero-image::after,
.doctor-image::after {
    content: "";

    position: absolute;

    width: 28px;
    height: 28px;

    border: 2px solid #c9a66b;

    z-index: 4;

    pointer-events: none;
}


/* قاب عکس اول */

.about-hero-image::after {
    top: -7px;
    right: -7px;

    border-left: none;
    border-bottom: none;
}


/* قاب عکس دکتر */

.doctor-image::after {
    bottom: -7px;
    left: -7px;

    border-right: none;
    border-top: none;
}


/* هاور */

.about-hero-image:hover img,
.doctor-image:hover img {
    transform: scale(1.02);

    filter: brightness(1.02);
}


/* subtle hover */

.about-hero-image:hover img,
.doctor-image:hover img {
    transform: scale(1.025);
}

.doctor-content {
    direction: rtl;
}

.doctor-label {
    color: var(--about-blue);

    font-size: 14px;

    font-weight: 700;

    display: inline-block;

    margin-bottom: 18px;
}

.doctor-content h2 {
    color: var(--about-navy);

    font-size: 42px;

    line-height: 1.5;

    margin: 0 0 18px;

    font-weight: 800;
}

.doctor-role {
    color: var(--about-blue);

    font-size: 17px;

    font-weight: 600;

    margin: 0 0 55px;
}

.doctor-stats {
    display: flex;

    gap: 18px;
}

.doctor-stat {
    min-width: 145px;

    padding: 25px 27px;

    border: 1px solid var(--about-border);

    border-top: 3px solid var(--about-gold);

    background: var(--about-white);

    display: flex;

    flex-direction: column;

    gap: 10px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.doctor-stat:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(20, 47, 61, 0.08);
}

.doctor-stat strong {
    color: var(--about-navy);

    font-size: 40px;

    font-weight: 800;

    line-height: 1;
}

.doctor-stat span {
    color: var(--about-text);

    font-size: 13px;
}

.career-section {
    width: 100%;
    max-width: 1250px;

    margin: auto;
    margin-top: 0;
    margin-bottom: 100px;

    padding: 0 35px;

    box-sizing: border-box;

    direction: rtl;
}


/* ========================================
   HEADING
======================================== */

.career-heading {
    text-align: center;

    margin-bottom: 80px;
}

.career-heading span {
    display: block;

    color: #c9a66b;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 12px;
}

.career-heading h2 {
    color: #142f3d;

    font-size: 40px;

    font-weight: 800;

    margin: 0;
}

.career-heading-line {
    width: 55px;
    height: 2px;

    margin: 22px auto 0;

    background: #c9a66b;
}


/* ========================================
   LIST
======================================== */

.career-list {
    width: 100%;

    position: relative;
}


/* خط اصلی */

.career-list::before {
    content: "";

    position: absolute;

    top: 20px;
    bottom: 20px;

    right: 205px;

    width: 1px;

    background: #d9e2e5;
}


/* ========================================
   ITEM
======================================== */

.career-item {
    width: 100%;

    display: grid;

    grid-template-columns: 180px 50px minmax(0, 1fr);

    align-items: center;

    min-height: 115px;

    position: relative;
}


/* ========================================
   YEAR
======================================== */

.career-year {
    text-align: left;

    padding-left: 25px;

    box-sizing: border-box;
}

.career-year span {
    color: #2d7185;

    font-size: 15px;

    font-weight: 700;

    white-space: nowrap;
}


/* ========================================
   LINE
======================================== */

.career-line {
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    z-index: 2;
}

.career-line span {
    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #ffffff;

    border: 3px solid #c9a66b;

    box-sizing: border-box;

    box-shadow:
        0 0 0 5px #ffffff;
}


/* ========================================
   CONTENT
======================================== */

.career-content {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 22px;

    padding: 22px 30px;

    background: #ffffff;

    border: 1px solid #e3e9eb;

    border-radius: 12px;

    box-sizing: border-box;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.career-content:hover {
    transform: translateX(-5px);

    border-color: rgba(201, 166, 107, 0.55);

    box-shadow:
        0 12px 30px rgba(20, 47, 61, 0.08);
}


/* ========================================
   ICON
======================================== */

.career-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1f6f7;

    color: #2d7185;

    font-size: 18px;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.career-content:hover .career-icon {
    background: #2d7185;

    color: #ffffff;
}


/* ========================================
   TEXT
======================================== */

.career-content h3 {
    color: #142f3d;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.9;

    margin: 0;
}

.career-content p {
    color: #65767c;

    font-size: 13px;

    line-height: 1.9;

    margin: 5px 0 0;
}

.certificates-section {
    width: 100%;
    max-width: 1250px;

    margin: 150px auto 100px;

    padding: 0 35px;

    box-sizing: border-box;

    direction: rtl;
}


/* ========================================
   HEADING
======================================== */

.certificates-heading {
    text-align: center;

    margin-bottom: 65px;
}

.certificates-heading span {
    display: block;

    color: #c9a66b;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 12px;
}

.certificates-heading h2 {
    color: #142f3d;

    font-size: 40px;

    font-weight: 800;

    margin: 0;
}

.certificates-heading-line {
    width: 55px;
    height: 2px;

    background: #c9a66b;

    margin: 22px auto;
}

.certificates-heading p {
    color: #65767c;

    font-size: 14px;

    margin: 0;

    line-height: 2;
}


/* ========================================
   CERTIFICATES GRID
======================================== */

.certificates-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    align-items: start;

    gap: 30px;

    direction: ltr;

    box-sizing: border-box;
}


/* ========================================
   CARD
======================================== */

.certificate-card {
    min-width: 0;

    align-self: start;

    padding: 12px;

    background: #ffffff;

    border: 1px solid #e2e8eb;

    box-sizing: border-box;

    box-shadow:
        0 12px 35px rgba(20, 47, 61, 0.07);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* ========================================
   IMAGE
======================================== */

.certificate-image {
    width: 100%;

    background: #f5f7f8;

    border: 1px solid #edf0f1;

    box-sizing: border-box;
}


.certificate-image img {
    width: 100%;

    height: auto;

    display: block;

    transition:
        transform 0.5s ease,
        filter 0.4s ease;
}

/* ========================================
   HOVER
======================================== */

.certificate-card:hover {
    transform: translateY(-7px);

    border-color: rgba(201, 166, 107, 0.6);

    box-shadow:
        0 22px 45px rgba(20, 47, 61, 0.12);
}

.certificate-card:hover img {
    transform: scale(1.025);

    filter: brightness(1.02);
}

/* ========================================
   MORE CERTIFICATES
======================================== */

.certificates-more {
    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;

    transition:
        grid-template-rows 0.6s ease,
        opacity 0.4s ease;
}

.certificates-more > div {
    min-height: 0;

    overflow: hidden;
}


/* حالت باز */

.certificates-more.show {
    grid-template-rows: 1fr;

    opacity: 1;
}


/* فاصله گرید دوم */

.certificates-more .certificates-grid {
    padding-top: 30px;
}


/* ========================================
   BUTTON
======================================== */

.certificates-button-wrapper {
    display: flex;

    justify-content: center;

    margin-top: 50px;
}


/* ========================================
   CERTIFICATES TOGGLE BUTTON
======================================== */

.certificates-toggle {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-width: 175px;

    padding: 14px 28px;

    background: #ffffff;

    color: #142f3d;

    border: 2px solid #c9a66b;

    border-radius: 8px;

    font-family: inherit;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* ========================================
   HOVER
======================================== */

.certificates-toggle:hover {
    background: #c9a66b;

    color: #ffffff;

    border-color: #c9a66b;

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(201, 166, 107, 0.25);
}


/* ========================================
   ARROW
======================================== */

.certificates-toggle i {
    font-size: 13px;

    transition:
        transform 0.4s ease;
}


/* نمایش کمتر */

.certificates-toggle.active i {
    transform: rotate(180deg);
}





/*///////////////////////////services///////////////////////////*/
/*///////////////////////////services///////////////////////////*/
/*///////////////////////////services///////////////////////////*/

/* ================================
   Services Page
================================ */

.services-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 70px 40px;
    box-sizing: border-box;
}


/* ================================
   Intro
================================ */

.services-intro {
    text-align: center;
    margin-bottom: 55px;
}

.services-intro h1 {
    margin: 0 0 15px;
    font-size: 38px;
    font-weight: 700;
}

.services-intro p {
    margin: 0;
    font-size: 17px;
    line-height: 1.9;
}


/* ================================
   Services Grid
================================ */

.services-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}


/* ================================
   Service Card
================================ */

.service-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    text-decoration: none;

    border: 1px solid #e5e5e5;
    border-radius: 22px;

    background-color: #fff;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

        min-width: 0;
}

.service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}


/* ================================
   Image
================================ */

.service-image {
    width: 100%;
    height: 230px;

    background-color: #f3f3f3;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* ================================
   Content
================================ */

.service-content {
    padding: 25px 25px 27px;
}

.service-content h2 {
    margin: 0 0 12px;

    font-size: 22px;
    font-weight: 700;
}

.service-content p {
    margin: 0;

    font-size: 15px;
    line-height: 2;

    color: #666;
}


/* ================================
   More Link
================================ */

.service-link {
    display: flex;
    align-items: center;
    gap: 8px;

    width: fit-content;

    margin-top: 20px;

    font-size: 14px;
    font-weight: 600;

    color: inherit;

    transition: gap 0.3s ease;
}

.service-card:hover .service-link {
    gap: 13px;
}


/* ================================
   Large Screens
================================ */

@media (min-width: 1800px) {

    .services-page {
        max-width: 1600px;
        padding-left: 60px;
        padding-right: 60px;
    }

    .services-container {
        gap: 32px;
    }

    .service-image {
        height: 250px;
    }
}


/* ================================
   Tablet
================================ */

@media (max-width: 1180px) {

    .services-page {
        padding: 60px 30px;
    }

    .services-container {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ================================
   Mobile
================================ */

@media (max-width: 860px) {

    .services-page {
        padding: 45px 20px;
    }

    .services-intro {
        margin-bottom: 35px;
    }

    .services-intro h1 {
        font-size: 30px;
    }

    .services-intro p {
        font-size: 15px;
    }

    .services-container {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .service-image {
        height: 210px;
    }

    .service-content {
        padding: 22px;
    }

    .service-content h2 {
        font-size: 20px;
    }
}

/* =========================================
   IMPLANT PAGE
========================================= */

.implant-page {

    --implant-primary: #1685c4;
    --implant-primary-dark: #0f6fa8;
    --implant-primary-light: #eaf6fc;
    --implant-primary-soft: #f4faff;

    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;

    padding: 55px 0 80px;
}


/* =========================================
   GENERAL
========================================= */

.implant-page p {

    line-height: 2.15;

    color: #555;

    font-size: 16px;
}


.implant-section {

    margin-top: 100px;
}


.section-heading {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 35px;
}


.heading-icon {

    width: 54px;
    height: 54px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: var(--implant-primary);

    background: var(--implant-primary-light);

    box-shadow:
        0 8px 22px rgba(22, 133, 196, 0.12);
}


.heading-icon i {

    font-size: 21px;
}


.section-heading small {

    display: block;

    margin-bottom: 7px;

    color: var(--implant-primary);

    font-size: 14px;

    font-weight: 700;
}


.section-heading h2 {

    margin: 0;

    color: #183f56;

    font-size: 31px;

    font-weight: 800;
}


.section-intro {

    max-width: 750px;

    margin: -15px 0 35px;
}


/* =========================================
   HERO
========================================= */

.implant-hero {

    position: relative;

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    gap: 65px;

    align-items: center;

    min-height: 500px;

    overflow: hidden;

    padding: 45px;

    border-radius: 35px;

    background:
        linear-gradient(
            135deg,
            #e8f5fc 0%,
            #f5fbff 55%,
            #ffffff 100%
        );

    border: 1px solid rgba(22, 133, 196, 0.10);

    box-shadow:
        0 18px 50px rgba(22, 133, 196, 0.09);
}


.implant-hero::before {

    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    left: -130px;
    top: -150px;

    border-radius: 50%;

    background: rgba(22, 133, 196, 0.08);
}


.implant-hero-content {

    position: relative;

    z-index: 1;
}


.implant-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 17px;

    margin-bottom: 18px;

    border-radius: 30px;

    color: var(--implant-primary-dark);

    background: rgba(22, 133, 196, 0.10);

    font-size: 13px;

    font-weight: 700;
}


.implant-label i {

    font-size: 13px;
}


.implant-hero h1 {

    margin: 0 0 8px;

    color: #183f56;

    font-size: clamp(38px, 5vw, 58px);

    font-weight: 900;
}


.implant-hero h2 {

    margin: 0 0 25px;

    color: var(--implant-primary-dark);

    font-size: clamp(19px, 2vw, 25px);

    font-weight: 500;
}


.implant-hero-content p {

    margin: 0 0 16px;
}


.implant-hero-image {

    position: relative;

    z-index: 1;

    height: 410px;
}


.image-placeholder {

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 15px;

    border-radius: 28px;

    color: rgba(15, 111, 168, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(22, 133, 196, 0.12),
            rgba(22, 133, 196, 0.025)
        );

    border: 1px dashed rgba(22, 133, 196, 0.25);
}


.image-placeholder i {

    font-size: 65px;
}


.image-placeholder span {

    font-size: 14px;
}


/* =========================================
   DEFINITION
========================================= */

.definition-content {

    display: grid;

    gap: 35px;
}


.definition-text {

    max-width: 850px;
}


.definition-text strong {

    color: var(--implant-primary-dark);

    font-weight: 800;
}


.implant-parts {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    padding: 35px;

    border-radius: 30px;

    background: var(--implant-primary-soft);

    border: 1px solid rgba(22, 133, 196, 0.08);
}


.implant-part {

    position: relative;

    width: 210px;

    padding: 30px 20px;

    text-align: center;

    border-radius: 22px;

    background: #fff;

    border: 1px solid rgba(22, 133, 196, 0.08);

    box-shadow:
        0 10px 30px rgba(22, 133, 196, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.implant-part:hover {

    transform: translateY(-7px);

    box-shadow:
        0 18px 35px rgba(22, 133, 196, 0.13);
}


.part-icon {

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 16px;

    border-radius: 50%;

    color: var(--implant-primary);

    background: var(--implant-primary-light);
}


.part-icon i {

    font-size: 25px;
}


.implant-part h3 {

    margin: 0 0 5px;

    color: #183f56;

    font-size: 18px;
}


.implant-part p {

    margin: 0;

    font-size: 13px;
}


.part-arrow {

    color: var(--implant-primary);

    opacity: 0.6;
}


/* =========================================
   SUITABLE
========================================= */

.suitable-box {

    display: grid;

    grid-template-columns: 90px 1fr;

    gap: 30px;

    padding: 45px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #eaf6fc,
            #f6fbff
        );

    border: 1px solid rgba(22, 133, 196, 0.09);
}


.suitable-icon {

    width: 78px;
    height: 78px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 22px;

    color: white;

    background: var(--implant-primary);

    box-shadow:
        0 10px 25px rgba(22, 133, 196, 0.22);
}


.suitable-icon i {

    font-size: 28px;
}


.box-label {

    display: block;

    margin-bottom: 8px;

    color: var(--implant-primary-dark);

    font-size: 13px;

    font-weight: 700;
}


.suitable-box h2 {

    margin: 0 0 20px;

    color: #183f56;

    font-size: 28px;
}


.highlight-text {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 25px;

    padding: 17px 20px;

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.85);

    border: 1px solid rgba(22, 133, 196, 0.10);

    font-weight: 700;

    line-height: 1.9;
}


.highlight-text i {

    flex-shrink: 0;

    margin-top: 5px;

    color: var(--implant-primary);
}


/* =========================================
   BENEFITS
========================================= */

.benefits-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}


.benefit-card {

    min-height: 190px;

    padding: 28px;

    border-radius: 24px;

    background: #fff;

    border: 1px solid rgba(22, 133, 196, 0.08);

    box-shadow:
        0 10px 35px rgba(22, 133, 196, 0.055);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.benefit-card:hover {

    transform: translateY(-7px);

    border-color: rgba(22, 133, 196, 0.22);

    box-shadow:
        0 18px 45px rgba(22, 133, 196, 0.13);
}


.benefit-icon {

    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 16px;

    color: var(--implant-primary);

    background: var(--implant-primary-light);
}


.benefit-icon i {

    font-size: 21px;
}


.benefit-card h3 {

    margin: 0 0 8px;

    color: #183f56;

    font-size: 18px;
}


.benefit-card p {

    margin: 0;

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================
   TREATMENT STEPS
========================================= */

.steps-timeline {

    position: relative;

    max-width: 900px;

    margin: 55px auto 0;
}


.timeline-line {

    position: absolute;

    top: 25px;
    bottom: 25px;

    right: 27px;

    width: 2px;

    background: rgba(22, 133, 196, 0.22);
}


.timeline-item {

    position: relative;

    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 25px;

    margin-bottom: 35px;
}


.timeline-item:last-child {

    margin-bottom: 0;
}


.timeline-number {

    position: relative;

    z-index: 2;

    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--implant-primary-dark);

    background: #fff;

    border: 2px solid rgba(22, 133, 196, 0.28);

    font-weight: 800;

    box-shadow:
        0 6px 20px rgba(22, 133, 196, 0.10);
}


.timeline-content {

    padding: 25px 30px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #f1f8fc,
            #ffffff
        );

    border: 1px solid rgba(22, 133, 196, 0.07);
}


.timeline-content > span {

    display: block;

    margin-bottom: 6px;

    color: var(--implant-primary);

    font-size: 13px;

    font-weight: 700;
}


.timeline-content h3 {

    margin: 0 0 12px;

    color: #183f56;

    font-size: 21px;
}


.timeline-content p {

    margin: 0;
}


/* =========================================
   INFORMATION CARDS
========================================= */

.info-section {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;
}


.info-card {

    display: grid;

    grid-template-columns: 65px 1fr;

    gap: 22px;

    padding: 35px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #f0f8fc,
            #ffffff
        );

    border: 1px solid rgba(22, 133, 196, 0.08);
}


.info-card-icon {

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: white;

    background: var(--implant-primary);

    box-shadow:
        0 8px 20px rgba(22, 133, 196, 0.18);
}


.info-card-icon i {

    font-size: 22px;
}


.info-card span {

    color: var(--implant-primary-dark);

    font-size: 13px;

    font-weight: 700;
}


.info-card h2 {

    margin: 8px 0 15px;

    color: #183f56;

    font-size: 23px;
}


.info-card p {

    margin: 0 0 12px;

    font-size: 15px;
}


.info-card p:last-child {

    margin-bottom: 0;
}


/* =========================================
   CARE
========================================= */

.care-content {

    display: flex;

    justify-content: center;
}


.care-main {

    position: relative;

    width: 100%;

    max-width: 900px;

    padding: 45px 50px 45px 120px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #eaf6fc,
            #f8fcff
        );

    border: 1px solid rgba(22, 133, 196, 0.08);
}


.care-icon {

    position: absolute;

    left: 35px;
    top: 40px;

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 18px;

    color: white;

    background: var(--implant-primary);

    box-shadow:
        0 10px 25px rgba(22, 133, 196, 0.20);
}


.care-icon i {

    font-size: 25px;
}


.care-main p {

    margin: 0 0 18px;
}


.care-main p:last-child {

    margin-bottom: 0;
}


/* =========================================
   FAQ
========================================= */

.faq-list {

    max-width: 950px;

    margin: 0 auto;
}


.faq-item {

    margin-bottom: 14px;

    overflow: hidden;

    border-radius: 18px;

    background: #f2f8fc;

    border: 1px solid rgba(22, 133, 196, 0.08);

    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}


.faq-item:hover {

    border-color: rgba(22, 133, 196, 0.22);
}


.faq-item[open] {

    background: #eaf5fc;
}


.faq-item summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 23px 27px;

    cursor: pointer;

    list-style: none;

    color: #183f56;

    font-size: 17px;

    font-weight: 700;
}


.faq-item summary::-webkit-details-marker {

    display: none;
}


.faq-item summary i {

    flex-shrink: 0;

    color: var(--implant-primary);

    transition: transform 0.3s ease;
}


.faq-item[open] summary i {

    transform: rotate(180deg);
}


.faq-answer {

    padding: 0 27px 25px;
}


.faq-answer p {

    margin: 0;

    font-size: 15px;
}


/* =========================================
   CTA
========================================= */

.implant-cta {

    display: grid;

    grid-template-columns: 75px 1fr auto;

    align-items: center;

    gap: 25px;

    margin-top: 100px;

    padding: 40px 45px;

    border-radius: 30px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #1685c4,
            #0f6fa8
        );

    box-shadow:
        0 20px 45px rgba(22, 133, 196, 0.20);
}


.cta-icon {

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.16);
}


.cta-icon i {

    font-size: 25px;
}


.cta-content > span {

    color: rgba(255, 255, 255, 0.75);

    font-size: 13px;
}


.cta-content h2 {

    margin: 7px 0 10px;

    color: white;

    font-size: 25px;
}


.cta-content p {

    max-width: 700px;

    margin: 0;

    color: rgba(255, 255, 255, 0.84);

    font-size: 14px;
}


.cta-button {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 22px;

    border-radius: 14px;

    color: var(--implant-primary-dark);

    background: white;

    text-decoration: none;

    font-weight: 700;

    white-space: nowrap;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.cta-button:hover {

    transform: translateY(-3px);

    background: #f1faff;
}


.cta-button i {

    transition: transform 0.25s ease;
}


.cta-button:hover i {

    transform: translateX(-4px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .implant-hero {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .implant-hero-image {

        height: 330px;
    }


    .benefits-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    .info-section {

        grid-template-columns: 1fr;
    }


    .implant-cta {

        grid-template-columns: 65px 1fr;
    }


    .cta-button {

        grid-column: 2;

        justify-self: start;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .implant-page {

        width: min(100% - 25px, 600px);

        padding-top: 30px;
    }


    .implant-section {

        margin-top: 70px;
    }


    .implant-hero {

        padding: 28px 22px;

        border-radius: 25px;
    }


    .implant-hero h1 {

        font-size: 38px;
    }


    .implant-hero h2 {

        font-size: 19px;
    }


    .implant-hero p {

        font-size: 15px;
    }


    .implant-hero-image {

        height: 280px;
    }


    .section-heading {

        margin-bottom: 25px;
    }


    .heading-icon {

        width: 47px;
        height: 47px;

        border-radius: 14px;
    }


    .section-heading h2 {

        font-size: 25px;
    }


    .implant-parts {

        flex-direction: column;

        padding: 25px 15px;
    }


    .implant-part {

        width: 100%;

        max-width: 280px;
    }


    .part-arrow {

        transform: rotate(-90deg);
    }


    .suitable-box {

        grid-template-columns: 1fr;

        padding: 28px 23px;
    }


    .suitable-icon {

        width: 60px;
        height: 60px;
    }


    .suitable-box h2 {

        font-size: 23px;
    }


    .benefits-grid {

        grid-template-columns: 1fr;
    }


    .benefit-card {

        min-height: auto;
    }


    .steps-timeline {

        margin-top: 35px;
    }


    .timeline-item {

        grid-template-columns: 45px 1fr;

        gap: 18px;
    }


    .timeline-number {

        width: 45px;
        height: 45px;

        font-size: 12px;
    }


    .timeline-line {

        right: 22px;
    }


    .timeline-content {

        padding: 22px 20px;
    }


    .timeline-content h3 {

        font-size: 18px;
    }


    .timeline-content p {

        font-size: 14px;
    }


    .info-card {

        grid-template-columns: 1fr;

        padding: 28px 23px;
    }


    .info-card-icon {

        width: 55px;
        height: 55px;
    }


    .info-card h2 {

        font-size: 21px;
    }


    .info-card p {

        font-size: 14px;
    }


    .care-main {

        padding: 28px 23px;
    }


    .care-icon {

        position: static;

        margin-bottom: 20px;
    }


    .faq-item summary {

        padding: 20px;

        font-size: 15px;
    }


    .faq-answer {

        padding: 0 20px 22px;
    }


    .faq-answer p {

        font-size: 14px;
    }


    .implant-cta {

        grid-template-columns: 1fr;

        padding: 30px 23px;
    }


    .cta-button {

        grid-column: auto;

        justify-self: stretch;
    }


    .cta-content h2 {

        font-size: 22px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 450px) {

    .implant-page {

        width: calc(100% - 18px);
    }


    .implant-hero {

        padding: 25px 18px;
    }


    .implant-hero h1 {

        font-size: 33px;
    }


    .implant-hero-image {

        height: 230px;
    }


    .section-heading h2 {

        font-size: 22px;
    }


    .section-heading {

        gap: 12px;
    }


    .section-heading small {

        font-size: 12px;
    }


    .heading-icon {

        width: 43px;
        height: 43px;
    }


    .heading-icon i {

        font-size: 18px;
    }

}

/* =========================================================
   ORTHODONTICS PAGE
   ========================================================= */

.orthodontics-page {
    --orthodontics-primary: #2878b8;
    --orthodontics-primary-dark: #155a8c;
    --orthodontics-primary-light: #eaf5fc;
    --orthodontics-primary-soft: #f4f9fd;
    --orthodontics-text: #263746;
    --orthodontics-muted: #687987;
    --orthodontics-border: #dce8ef;
    --orthodontics-white: #ffffff;
    --orthodontics-shadow: 0 12px 35px rgba(30, 80, 110, 0.09);

    direction: rtl;
    color: var(--orthodontics-text);
}


/* =========================
   HERO
   ========================= */

.orthodontics-page .orthodontics-hero {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 480px;
    padding: 70px 55px;
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    align-items: center;
    gap: 60px;
}

.orthodontics-page .orthodontics-hero-content {
    max-width: 700px;
}

.orthodontics-page .orthodontics-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px;
    margin-bottom: 20px;
    border-radius: 50px;
    background: var(--orthodontics-primary-light);
    color: var(--orthodontics-primary-dark);
    font-size: 14px;
    font-weight: 700;
}

.orthodontics-page .orthodontics-hero-label i {
    font-size: 15px;
}

.orthodontics-page .orthodontics-hero h1 {
    margin: 0 0 12px;
    color: var(--orthodontics-primary-dark);
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 800;
    line-height: 1.2;
}

.orthodontics-page .orthodontics-hero h2 {
    margin: 0 0 22px;
    color: var(--orthodontics-text);
    font-size: clamp(21px, 2.5vw, 30px);
    line-height: 1.7;
    font-weight: 700;
}

.orthodontics-page .orthodontics-hero p {
    margin: 0;
    color: var(--orthodontics-muted);
    font-size: 16px;
    line-height: 2.2;
}

.orthodontics-page .orthodontics-hero-visual {
    min-height: 320px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orthodontics-page .orthodontics-hero-icon {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: var(--orthodontics-primary-light);
    color: var(--orthodontics-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 95px;
    box-shadow: 0 25px 60px rgba(40, 120, 184, 0.14);
}

.orthodontics-page .orthodontics-hero-decoration {
    position: absolute;
    border-radius: 50%;
    background: var(--orthodontics-primary-light);
}

.orthodontics-page .orthodontics-hero-decoration-one {
    width: 55px;
    height: 55px;
    top: 20px;
    right: 35px;
}

.orthodontics-page .orthodontics-hero-decoration-two {
    width: 30px;
    height: 30px;
    bottom: 35px;
    left: 45px;
}


/* =========================
   GENERAL SECTIONS
   ========================= */

.orthodontics-page .orthodontics-section {
    max-width: 1120px;
    margin: 0 auto;
    padding: 75px 35px;
}

.orthodontics-page .orthodontics-section-heading {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 35px;
}

.orthodontics-page .orthodontics-section-icon {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: var(--orthodontics-primary-light);
    color: var(--orthodontics-primary);
    font-size: 23px;
}

.orthodontics-page .orthodontics-section-label {
    display: block;
    margin-bottom: 5px;
    color: var(--orthodontics-primary);
    font-size: 13px;
    font-weight: 700;
}

.orthodontics-page .orthodontics-section-heading h2 {
    margin: 0;
    color: var(--orthodontics-text);
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.5;
    font-weight: 800;
}

.orthodontics-page .orthodontics-section-intro {
    max-width: 850px;
    margin: -10px auto 35px;
    color: var(--orthodontics-muted);
    font-size: 16px;
    line-height: 2.1;
    text-align: center;
}


/* =========================
   DEFINITION
   ========================= */

.orthodontics-page .orthodontics-definition-box {
    display: grid;
    grid-template-columns: 1fr 180px;
    align-items: center;
    gap: 40px;
    padding: 45px;
    border: 1px solid var(--orthodontics-border);
    border-radius: 28px;
    background: var(--orthodontics-white);
    box-shadow: var(--orthodontics-shadow);
}

.orthodontics-page .orthodontics-definition-text p {
    margin: 0 0 17px;
    color: var(--orthodontics-muted);
    font-size: 16px;
    line-height: 2.2;
}

.orthodontics-page .orthodontics-definition-text p:last-child {
    margin-bottom: 0;
}

.orthodontics-page .orthodontics-definition-mark {
    width: 150px;
    height: 150px;
    margin: auto;
    border-radius: 50%;
    background: var(--orthodontics-primary-light);
    color: var(--orthodontics-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 65px;
}


/* =========================
   PROBLEMS
   ========================= */

.orthodontics-page .orthodontics-problems-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.orthodontics-page .orthodontics-problem-card {
    min-height: 125px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px solid var(--orthodontics-border);
    border-radius: 20px;
    background: var(--orthodontics-white);
    transition: 0.25s ease;
}

.orthodontics-page .orthodontics-problem-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--orthodontics-shadow);
    border-color: var(--orthodontics-primary);
}

.orthodontics-page .orthodontics-problem-card > span {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--orthodontics-primary-light);
    color: var(--orthodontics-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.orthodontics-page .orthodontics-problem-card h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
}

.orthodontics-page .orthodontics-problem-card-wide {
    grid-column: 1 / -1;
}

.orthodontics-page .orthodontics-highlight-box {
    margin-top: 25px;
    padding: 22px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 18px;
    background: var(--orthodontics-primary-soft);
    border-right: 4px solid var(--orthodontics-primary);
}

.orthodontics-page .orthodontics-highlight-box i {
    color: var(--orthodontics-primary);
    font-size: 22px;
}

.orthodontics-page .orthodontics-highlight-box p {
    margin: 0;
    color: var(--orthodontics-muted);
    line-height: 2;
}


/* =========================
   METHODS
   ========================= */

.orthodontics-page .orthodontics-methods-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.orthodontics-page .orthodontics-method-card {
    position: relative;
    padding: 32px 27px;
    border: 1px solid var(--orthodontics-border);
    border-radius: 25px;
    background: var(--orthodontics-white);
    box-shadow: var(--orthodontics-shadow);
    overflow: hidden;
}

.orthodontics-page .orthodontics-method-number {
    position: absolute;
    top: 18px;
    left: 20px;
    color: var(--orthodontics-primary-light);
    font-size: 44px;
    line-height: 1;
    font-weight: 900;
}

.orthodontics-page .orthodontics-method-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 20px;
    border-radius: 18px;
    background: var(--orthodontics-primary-light);
    color: var(--orthodontics-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.orthodontics-page .orthodontics-method-card h3 {
    margin: 0 0 15px;
    font-size: 20px;
}

.orthodontics-page .orthodontics-method-card p {
    margin: 0 0 15px;
    color: var(--orthodontics-muted);
    font-size: 14px;
    line-height: 2.15;
}

.orthodontics-page .orthodontics-method-note {
    margin-top: 20px;
    padding: 14px;
    display: flex;
    gap: 9px;
    border-radius: 12px;
    background: var(--orthodontics-primary-soft);
    color: var(--orthodontics-primary-dark);
    font-size: 13px;
    line-height: 1.9;
}

.orthodontics-page .orthodontics-method-note i {
    margin-top: 4px;
}


/* =========================
   BENEFITS
   ========================= */

.orthodontics-page .orthodontics-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.orthodontics-page .orthodontics-benefit-card {
    padding: 28px 22px;
    text-align: center;
    border: 1px solid var(--orthodontics-border);
    border-radius: 22px;
    background: var(--orthodontics-white);
    transition: 0.25s ease;
}

.orthodontics-page .orthodontics-benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--orthodontics-shadow);
}

.orthodontics-page .orthodontics-benefit-card > i {
    width: 58px;
    height: 58px;
    margin: 0 auto 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: var(--orthodontics-primary-light);
    color: var(--orthodontics-primary);
    font-size: 22px;
}

.orthodontics-page .orthodontics-benefit-card h3 {
    margin: 0 0 9px;
    font-size: 17px;
}

.orthodontics-page .orthodontics-benefit-card p {
    margin: 0;
    color: var(--orthodontics-muted);
    font-size: 14px;
    line-height: 1.9;
}


/* =========================
   STEPS
   ========================= */

.orthodontics-page .orthodontics-steps-list {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.orthodontics-page .orthodontics-steps-list::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 30px;
    right: 29px;
    width: 2px;
    background: var(--orthodontics-border);
}

.orthodontics-page .orthodontics-step {
    position: relative;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

.orthodontics-page .orthodontics-step:last-child {
    margin-bottom: 0;
}

.orthodontics-page .orthodontics-step-number {
    width: 60px;
    height: 60px;
    position: relative;
    z-index: 2;
    border-radius: 50%;
    background: var(--orthodontics-primary);
    color: var(--orthodontics-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 0 0 7px var(--orthodontics-white);
}

.orthodontics-page .orthodontics-step-content {
    padding: 27px 30px;
    border: 1px solid var(--orthodontics-border);
    border-radius: 22px;
    background: var(--orthodontics-white);
    box-shadow: var(--orthodontics-shadow);
}

.orthodontics-page .orthodontics-step-content h3 {
    margin: 0 0 13px;
    color: var(--orthodontics-primary-dark);
    font-size: 20px;
}

.orthodontics-page .orthodontics-step-content p {
    margin: 0 0 12px;
    color: var(--orthodontics-muted);
    font-size: 14px;
    line-height: 2.1;
}

.orthodontics-page .orthodontics-step-content p:last-child {
    margin-bottom: 0;
}


/* =========================
   INFO CARDS
   ========================= */

.orthodontics-page .orthodontics-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.orthodontics-page .orthodontics-info-card {
    padding: 35px;
    border-radius: 26px;
    background: var(--orthodontics-white);
    border: 1px solid var(--orthodontics-border);
    box-shadow: var(--orthodontics-shadow);
}

.orthodontics-page .orthodontics-info-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    border-radius: 18px;
    background: var(--orthodontics-primary-light);
    color: var(--orthodontics-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.orthodontics-page .orthodontics-info-card h2 {
    margin: 5px 0 18px;
    font-size: 23px;
    line-height: 1.6;
}

.orthodontics-page .orthodontics-info-card p {
    margin: 0 0 15px;
    color: var(--orthodontics-muted);
    font-size: 14px;
    line-height: 2.15;
}

.orthodontics-page .orthodontics-info-card p:last-child {
    margin-bottom: 0;
}

.orthodontics-page .orthodontics-duration-number {
    margin: 25px 0;
    padding: 18px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    border-radius: 17px;
    background: var(--orthodontics-primary-light);
    color: var(--orthodontics-primary-dark);
}

.orthodontics-page .orthodontics-duration-number strong {
    font-size: 35px;
    font-weight: 900;
}

.orthodontics-page .orthodontics-duration-number span {
    font-size: 17px;
    font-weight: 700;
}


/* =========================
   PAIN
   ========================= */

.orthodontics-page .orthodontics-pain-box {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 30px;
    align-items: center;
    padding: 38px 40px;
    border-radius: 27px;
    background: var(--orthodontics-primary-soft);
    border: 1px solid var(--orthodontics-border);
}

.orthodontics-page .orthodontics-pain-icon {
    width: 90px;
    height: 90px;
    border-radius: 25px;
    background: var(--orthodontics-primary-light);
    color: var(--orthodontics-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

.orthodontics-page .orthodontics-pain-content h2 {
    margin: 5px 0 12px;
    font-size: 26px;
}

.orthodontics-page .orthodontics-pain-content p {
    margin: 0 0 15px;
    color: var(--orthodontics-muted);
    line-height: 2.15;
}

.orthodontics-page .orthodontics-pain-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--orthodontics-primary-dark);
    font-size: 13px;
    font-weight: 600;
}


/* =========================
   CARE
   ========================= */

.orthodontics-page .orthodontics-care-intro {
    margin-bottom: 30px;
    padding: 27px 30px;
    border-radius: 20px;
    background: var(--orthodontics-primary-soft);
}

.orthodontics-page .orthodontics-care-intro p {
    margin: 0;
    color: var(--orthodontics-muted);
    font-size: 15px;
    line-height: 2.2;
}

.orthodontics-page .orthodontics-care-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.orthodontics-page .orthodontics-care-item {
    display: grid;
    grid-template-columns: 55px 1fr;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    border: 1px solid var(--orthodontics-border);
    border-radius: 17px;
    background: var(--orthodontics-white);
}

.orthodontics-page .orthodontics-care-item > span {
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: var(--orthodontics-primary-light);
    color: var(--orthodontics-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.orthodontics-page .orthodontics-care-item p {
    margin: 0;
    color: var(--orthodontics-muted);
    font-size: 14px;
    line-height: 2;
}


/* =========================
   RETAINER
   ========================= */

.orthodontics-page .orthodontics-retainer-box {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 30px;
    align-items: center;
    padding: 40px;
    border-radius: 28px;
    background: var(--orthodontics-primary-dark);
    color: var(--orthodontics-white);
}

.orthodontics-page .orthodontics-retainer-icon {
    width: 90px;
    height: 90px;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}

.orthodontics-page .orthodontics-retainer-content .orthodontics-section-label {
    color: #b9def4;
}

.orthodontics-page .orthodontics-retainer-content h2 {
    margin: 5px 0 15px;
    color: var(--orthodontics-white);
    font-size: 26px;
    line-height: 1.6;
}

.orthodontics-page .orthodontics-retainer-content p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 2.15;
}

.orthodontics-page .orthodontics-retainer-content p:last-child {
    margin-bottom: 0;
}


/* =========================
   FAQ
   ========================= */

.orthodontics-page .orthodontics-faq-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.orthodontics-page .orthodontics-faq-item {
    border: 1px solid var(--orthodontics-border);
    border-radius: 17px;
    background: var(--orthodontics-white);
    overflow: hidden;
}

.orthodontics-page .orthodontics-faq-item summary {
    padding: 21px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    font-weight: 700;
}

.orthodontics-page .orthodontics-faq-item summary::-webkit-details-marker {
    display: none;
}

.orthodontics-page .orthodontics-faq-item summary i {
    color: var(--orthodontics-primary);
    transition: transform 0.25s ease;
}

.orthodontics-page .orthodontics-faq-item[open] summary i {
    transform: rotate(180deg);
}

.orthodontics-page .orthodontics-faq-answer {
    padding: 0 24px 22px;
}

.orthodontics-page .orthodontics-faq-answer p {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--orthodontics-border);
    color: var(--orthodontics-muted);
    font-size: 14px;
    line-height: 2.2;
}


/* =========================
   CTA
   ========================= */

.orthodontics-page .orthodontics-cta-section {
    max-width: 1120px;
    margin: 30px auto 80px;
    padding: 0 35px;
}

.orthodontics-page .orthodontics-cta-content {
    padding: 38px 40px;
    display: grid;
    grid-template-columns: 75px 1fr auto;
    align-items: center;
    gap: 25px;
    border-radius: 28px;
    background: var(--orthodontics-primary-light);
    border: 1px solid var(--orthodontics-border);
}

.orthodontics-page .orthodontics-cta-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: var(--orthodontics-primary);
    color: var(--orthodontics-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.orthodontics-page .orthodontics-cta-text > span {
    color: var(--orthodontics-primary);
    font-size: 13px;
    font-weight: 700;
}

.orthodontics-page .orthodontics-cta-text h2 {
    margin: 5px 0 8px;
    font-size: 23px;
}

.orthodontics-page .orthodontics-cta-text p {
    margin: 0;
    color: var(--orthodontics-muted);
    font-size: 13px;
    line-height: 2;
}

.orthodontics-page .orthodontics-cta-button {
    min-width: 160px;
    padding: 14px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 13px;
    background: var(--orthodontics-primary);
    color: var(--orthodontics-white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: 0.25s ease;
}

.orthodontics-page .orthodontics-cta-button:hover {
    background: var(--orthodontics-primary-dark);
    transform: translateY(-2px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .orthodontics-page .orthodontics-hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 60px 35px;
    }

    .orthodontics-page .orthodontics-hero-content {
        max-width: 800px;
        margin: 0 auto;
    }

    .orthodontics-page .orthodontics-hero-visual {
        min-height: 240px;
    }

    .orthodontics-page .orthodontics-methods-grid {
        grid-template-columns: 1fr;
    }

    .orthodontics-page .orthodontics-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .orthodontics-page .orthodontics-cta-content {
        grid-template-columns: 65px 1fr;
    }

    .orthodontics-page .orthodontics-cta-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}


@media (max-width: 700px) {

    .orthodontics-page .orthodontics-section {
        padding: 55px 22px;
    }

    .orthodontics-page .orthodontics-hero {
        padding: 45px 22px;
    }

    .orthodontics-page .orthodontics-hero-icon {
        width: 180px;
        height: 180px;
        font-size: 75px;
    }

    .orthodontics-page .orthodontics-definition-box {
        grid-template-columns: 1fr;
        padding: 30px 25px;
    }

    .orthodontics-page .orthodontics-definition-mark {
        width: 110px;
        height: 110px;
        font-size: 48px;
    }

    .orthodontics-page .orthodontics-problems-grid {
        grid-template-columns: 1fr;
    }

    .orthodontics-page .orthodontics-problem-card-wide {
        grid-column: auto;
    }

    .orthodontics-page .orthodontics-benefits-grid {
        grid-template-columns: 1fr;
    }

    .orthodontics-page .orthodontics-info-grid {
        grid-template-columns: 1fr;
    }

    .orthodontics-page .orthodontics-pain-box,
    .orthodontics-page .orthodontics-retainer-box {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 30px 25px;
    }

    .orthodontics-page .orthodontics-pain-icon,
    .orthodontics-page .orthodontics-retainer-icon {
        margin: 0 auto;
    }

    .orthodontics-page .orthodontics-cta-section {
        padding: 0 22px;
    }

    .orthodontics-page .orthodontics-cta-content {
        padding: 30px 25px;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .orthodontics-page .orthodontics-cta-icon {
        margin: auto;
    }

    .orthodontics-page .orthodontics-cta-button {
        grid-column: auto;
    }
}


@media (max-width: 450px) {

    .orthodontics-page .orthodontics-hero h1 {
        font-size: 38px;
    }

    .orthodontics-page .orthodontics-hero h2 {
        font-size: 19px;
    }

    .orthodontics-page .orthodontics-hero p {
        font-size: 14px;
    }

    .orthodontics-page .orthodontics-section-heading {
        align-items: flex-start;
    }

    .orthodontics-page .orthodontics-section-icon {
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }

    .orthodontics-page .orthodontics-section-heading h2 {
        font-size: 23px;
    }

    .orthodontics-page .orthodontics-step {
        grid-template-columns: 50px 1fr;
        gap: 15px;
    }

    .orthodontics-page .orthodontics-step-number {
        width: 50px;
        height: 50px;
    }

    .orthodontics-page .orthodontics-steps-list::before {
        right: 24px;
    }

    .orthodontics-page .orthodontics-step-content {
        padding: 22px 20px;
    }

    .orthodontics-page .orthodontics-info-card {
        padding: 27px 22px;
    }

    .orthodontics-page .orthodontics-duration-number strong {
        font-size: 29px;
    }

    .orthodontics-page .orthodontics-care-item {
        grid-template-columns: 45px 1fr;
        gap: 13px;
        padding: 16px;
    }

    .orthodontics-page .orthodontics-care-item > span {
        width: 40px;
        height: 40px;
    }

    .orthodontics-page .orthodontics-faq-item summary {
        padding: 18px;
        font-size: 14px;
    }

    .orthodontics-page .orthodontics-faq-answer {
        padding: 0 18px 18px;
    }
}


/* =========================================
   LAMINATE PAGE
========================================= */

.laminate-page {

    --laminate-primary: #3979c9;
    --laminate-primary-dark: #245b9f;
    --laminate-primary-light: #eaf3ff;
    --laminate-primary-soft: #f6f9ff;
    --laminate-purple: #7564b8;

    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;

    padding: 55px 0 80px;
}


/* =========================================
   GENERAL
========================================= */

.laminate-page p {

    line-height: 2.15;

    color: #555;

    font-size: 16px;
}


.laminate-section {

    margin-top: 100px;
}


.laminate-section-heading {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 35px;
}


.laminate-heading-icon {

    width: 54px;
    height: 54px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: var(--laminate-primary);

    background: var(--laminate-primary-light);

    box-shadow:
        0 8px 22px rgba(57, 121, 201, 0.12);
}


.laminate-heading-icon i {

    font-size: 21px;
}


.laminate-section-heading small {

    display: block;

    margin-bottom: 7px;

    color: var(--laminate-primary);

    font-size: 14px;

    font-weight: 700;
}


.laminate-section-heading h2 {

    margin: 0;

    color: #193b68;

    font-size: 31px;

    font-weight: 800;
}


.laminate-section-intro {

    max-width: 780px;

    margin: -15px 0 35px;
}


/* =========================================
   HERO
========================================= */

.laminate-hero {

    position: relative;

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    gap: 65px;

    align-items: center;

    min-height: 500px;

    overflow: hidden;

    padding: 45px;

    border-radius: 35px;

    background:
        linear-gradient(
            135deg,
            #e9f2ff 0%,
            #f7f9ff 55%,
            #ffffff 100%
        );

    border: 1px solid rgba(57, 121, 201, 0.10);

    box-shadow:
        0 18px 50px rgba(57, 121, 201, 0.10);
}


.laminate-hero::before {

    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    left: -140px;
    top: -150px;

    border-radius: 50%;

    background: rgba(117, 100, 184, 0.08);
}


.laminate-hero-content {

    position: relative;

    z-index: 1;
}


.laminate-hero-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 17px;

    margin-bottom: 18px;

    border-radius: 30px;

    color: var(--laminate-primary-dark);

    background: rgba(57, 121, 201, 0.10);

    font-size: 13px;

    font-weight: 700;
}


.laminate-hero h1 {

    margin: 0 0 8px;

    color: #193b68;

    font-size: clamp(38px, 5vw, 58px);

    font-weight: 900;
}


.laminate-hero h2 {

    margin: 0 0 25px;

    color: var(--laminate-primary-dark);

    font-size: clamp(19px, 2vw, 25px);

    font-weight: 500;
}


.laminate-hero-content p {

    margin: 0 0 16px;
}


.laminate-hero-image {

    position: relative;

    z-index: 1;

    height: 410px;
}


.laminate-image-placeholder {

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 15px;

    border-radius: 28px;

    color: rgba(36, 91, 159, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(57, 121, 201, 0.13),
            rgba(117, 100, 184, 0.04)
        );

    border: 1px dashed rgba(57, 121, 201, 0.28);
}


.laminate-image-placeholder i {

    font-size: 65px;
}


.laminate-image-placeholder span {

    font-size: 14px;
}


/* =========================================
   DEFINITION
========================================= */

.laminate-definition-box {

    padding: 42px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            var(--laminate-primary-soft),
            #ffffff
        );

    border: 1px solid rgba(57, 121, 201, 0.08);
}


.laminate-definition-content {

    max-width: 900px;
}


.laminate-definition-content p {

    margin: 0 0 18px;
}


.laminate-definition-content p:last-child {

    margin-bottom: 0;
}


.laminate-definition-content strong {

    color: var(--laminate-primary-dark);

    font-weight: 800;
}


/* =========================================
   APPLICATIONS
========================================= */

.laminate-applications-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}


.laminate-application-card {

    min-height: 190px;

    padding: 28px;

    border-radius: 24px;

    background: #fff;

    border: 1px solid rgba(57, 121, 201, 0.08);

    box-shadow:
        0 10px 35px rgba(57, 121, 201, 0.055);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.laminate-application-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 18px 45px rgba(57, 121, 201, 0.14);
}


.laminate-application-icon {

    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 16px;

    color: var(--laminate-primary);

    background: var(--laminate-primary-light);
}


.laminate-application-icon i {

    font-size: 21px;
}


.laminate-application-card h3 {

    margin: 0 0 8px;

    color: #193b68;

    font-size: 18px;
}


.laminate-application-card p {

    margin: 0;

    font-size: 14px;

    line-height: 1.9;
}


.laminate-note {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-top: 28px;

    padding: 22px 25px;

    border-radius: 20px;

    background: #f0f6ff;

    border: 1px solid rgba(57, 121, 201, 0.10);
}


.laminate-note i {

    flex-shrink: 0;

    margin-top: 5px;

    color: var(--laminate-primary);

    font-size: 20px;
}


.laminate-note p {

    margin: 0;
}


/* =========================================
   TYPES
========================================= */

.laminate-types-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;
}


.laminate-type-card {

    padding: 38px;

    border-radius: 30px;

    border: 1px solid rgba(57, 121, 201, 0.08);
}


.laminate-ceramic-card {

    background:
        linear-gradient(
            135deg,
            #edf5ff,
            #ffffff
        );
}


.laminate-composite-card {

    background:
        linear-gradient(
            135deg,
            #f3f0ff,
            #ffffff
        );

    border-color: rgba(117, 100, 184, 0.12);
}


.laminate-type-top {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 25px;
}


.laminate-type-icon {

    width: 62px;
    height: 62px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 19px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--laminate-primary),
            var(--laminate-purple)
        );

    box-shadow:
        0 10px 25px rgba(57, 121, 201, 0.18);
}


.laminate-type-icon i {

    font-size: 25px;
}


.laminate-type-top span {

    display: block;

    margin-bottom: 5px;

    color: var(--laminate-primary);

    font-size: 13px;

    font-weight: 700;
}


.laminate-type-top h3 {

    margin: 0;

    color: #193b68;

    font-size: 23px;
}


.laminate-type-card p {

    margin: 0 0 15px;
}


.laminate-type-card p:last-child {

    margin-bottom: 0;
}


/* =========================================
   STEPS
========================================= */

.laminate-steps {

    position: relative;

    max-width: 920px;

    margin: 50px auto 0;
}


.laminate-step {

    position: relative;

    display: grid;

    grid-template-columns: 65px 1fr;

    gap: 25px;

    margin-bottom: 30px;
}


.laminate-step-icon {

    width: 58px;
    height: 58px;

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--laminate-primary),
            var(--laminate-purple)
        );

    box-shadow:
        0 8px 22px rgba(57, 121, 201, 0.20);
}


.laminate-step-icon i {

    font-size: 21px;
}


.laminate-step-content {

    padding: 28px 32px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #f7faff,
            #ffffff
        );

    border: 1px solid rgba(57, 121, 201, 0.07);
}


.laminate-step-highlight .laminate-step-content {

    background:
        linear-gradient(
            135deg,
            #eef4ff,
            #f8f6ff
        );

    border-color: rgba(117, 100, 184, 0.14);
}


.laminate-step-content > span {

    display: block;

    margin-bottom: 7px;

    color: var(--laminate-primary);

    font-size: 13px;

    font-weight: 700;
}


.laminate-step-content h3 {

    margin: 0 0 14px;

    color: #193b68;

    font-size: 21px;
}


.laminate-step-content p {

    margin: 0 0 12px;
}


.laminate-step-content p:last-child {

    margin-bottom: 0;
}


.laminate-step-content strong {

    color: var(--laminate-primary-dark);
}


/* =========================================
   BENEFITS
========================================= */

.laminate-benefits-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}


.laminate-benefit-card {

    display: flex;

    align-items: center;

    gap: 15px;

    min-height: 105px;

    padding: 22px;

    border-radius: 20px;

    background: var(--laminate-primary-soft);

    border: 1px solid rgba(57, 121, 201, 0.08);

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.laminate-benefit-card:hover {

    transform: translateY(-5px);

    background: var(--laminate-primary-light);
}


.laminate-benefit-card i {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: var(--laminate-primary);

    background: white;

    font-size: 18px;
}


.laminate-benefit-card span {

    color: #26466f;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.8;
}


/* =========================================
   DURABILITY
========================================= */

.laminate-durability-box {

    display: grid;

    grid-template-columns: 90px 1fr;

    gap: 30px;

    padding: 45px;

    border-radius: 32px;

    background:
        linear-gradient(
            135deg,
            #edf4ff,
            #f7f5ff
        );

    border: 1px solid rgba(57, 121, 201, 0.10);
}


.laminate-durability-icon {

    width: 78px;
    height: 78px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 23px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--laminate-primary),
            var(--laminate-purple)
        );
}


.laminate-durability-icon i {

    font-size: 29px;
}


.laminate-durability-box > div:last-child > span {

    display: block;

    margin-bottom: 8px;

    color: var(--laminate-primary);

    font-size: 13px;

    font-weight: 700;
}


.laminate-durability-box h2 {

    margin: 0 0 20px;

    color: #193b68;

    font-size: 28px;
}


.laminate-durability-box p {

    margin: 0 0 13px;
}


.laminate-durability-box p:last-child {

    margin-bottom: 0;
}


/* =========================================
   CARE
========================================= */

.laminate-care-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}


.laminate-care-item {

    display: flex;

    align-items: center;

    gap: 17px;

    padding: 22px 25px;

    border-radius: 20px;

    background: white;

    border: 1px solid rgba(57, 121, 201, 0.09);

    box-shadow:
        0 8px 25px rgba(57, 121, 201, 0.05);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.laminate-care-item:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(57, 121, 201, 0.11);
}


.laminate-care-item i {

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    color: var(--laminate-primary);

    background: var(--laminate-primary-light);

    font-size: 19px;
}


.laminate-care-item span {

    color: #26466f;

    font-weight: 700;

    line-height: 1.8;
}


/* =========================================
   INFORMATION
========================================= */

.laminate-info-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;
}


.laminate-info-card {

    padding: 38px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #f4f8ff,
            #ffffff
        );

    border: 1px solid rgba(57, 121, 201, 0.08);
}


.laminate-info-icon {

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 23px;

    border-radius: 18px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--laminate-primary),
            var(--laminate-purple)
        );
}


.laminate-info-icon i {

    font-size: 23px;
}


.laminate-info-card > span {

    color: var(--laminate-primary);

    font-size: 13px;

    font-weight: 700;
}


.laminate-info-card h2 {

    margin: 8px 0 18px;

    color: #193b68;

    font-size: 25px;
}


.laminate-info-card p {

    margin: 0 0 13px;
}


.laminate-info-card p:last-child {

    margin-bottom: 0;
}


/* =========================================
   FAQ
========================================= */

.laminate-faq-list {

    max-width: 950px;

    margin: 0 auto;
}


.laminate-faq-item {

    margin-bottom: 14px;

    overflow: hidden;

    border-radius: 18px;

    background: #f4f8ff;

    border: 1px solid rgba(57, 121, 201, 0.08);
}


.laminate-faq-item[open] {

    background: #edf4ff;
}


.laminate-faq-item summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 23px 27px;

    cursor: pointer;

    list-style: none;

    color: #193b68;

    font-size: 17px;

    font-weight: 700;
}


.laminate-faq-item summary::-webkit-details-marker {

    display: none;
}


.laminate-faq-item summary i {

    flex-shrink: 0;

    color: var(--laminate-primary);

    transition: transform 0.3s ease;
}


.laminate-faq-item[open] summary i {

    transform: rotate(180deg);
}


.laminate-faq-answer {

    padding: 0 27px 25px;
}


.laminate-faq-answer p {

    margin: 0;

    font-size: 15px;
}


/* =========================================
   CTA
========================================= */

.laminate-cta {

    display: grid;

    grid-template-columns: 75px 1fr auto;

    align-items: center;

    gap: 25px;

    margin-top: 100px;

    padding: 40px 45px;

    border-radius: 30px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--laminate-primary-dark),
            var(--laminate-primary),
            var(--laminate-purple)
        );

    box-shadow:
        0 20px 45px rgba(57, 121, 201, 0.22);
}


.laminate-cta-icon {

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.16);
}


.laminate-cta-icon i {

    font-size: 25px;
}


.laminate-cta-content > span {

    color: rgba(255, 255, 255, 0.75);

    font-size: 13px;
}


.laminate-cta-content h2 {

    margin: 7px 0 10px;

    color: white;

    font-size: 25px;
}


.laminate-cta-content p {

    max-width: 700px;

    margin: 0;

    color: rgba(255, 255, 255, 0.87);

    font-size: 14px;
}


.laminate-cta-button {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 14px 22px;

    border-radius: 14px;

    color: var(--laminate-primary-dark);

    background: white;

    text-decoration: none;

    font-weight: 700;

    white-space: nowrap;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.laminate-cta-button:hover {

    transform: translateY(-3px);

    background: #f5f8ff;
}


.laminate-cta-button i {

    transition: transform 0.25s ease;
}


.laminate-cta-button:hover i {

    transform: translateX(-4px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .laminate-hero {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .laminate-hero-image {

        height: 330px;
    }


    .laminate-applications-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    .laminate-benefits-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    .laminate-info-grid {

        grid-template-columns: 1fr;
    }


    .laminate-cta {

        grid-template-columns: 65px 1fr;
    }


    .laminate-cta-button {

        grid-column: 2;

        justify-self: start;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .laminate-page {

        width: min(100% - 25px, 600px);

        padding-top: 30px;
    }


    .laminate-section {

        margin-top: 70px;
    }


    .laminate-hero {

        padding: 28px 22px;

        border-radius: 25px;
    }


    .laminate-hero h1 {

        font-size: 38px;
    }


    .laminate-hero h2 {

        font-size: 19px;
    }


    .laminate-hero p {

        font-size: 15px;
    }


    .laminate-hero-image {

        height: 280px;
    }


    .laminate-section-heading {

        margin-bottom: 25px;
    }


    .laminate-heading-icon {

        width: 47px;
        height: 47px;

        border-radius: 14px;
    }


    .laminate-section-heading h2 {

        font-size: 25px;
    }


    .laminate-definition-box {

        padding: 28px 23px;
    }


    .laminate-applications-grid {

        grid-template-columns: 1fr;
    }


    .laminate-application-card {

        min-height: auto;
    }


    .laminate-types-grid {

        grid-template-columns: 1fr;
    }


    .laminate-type-card {

        padding: 28px 23px;
    }


    .laminate-step {

        grid-template-columns: 55px 1fr;

        gap: 17px;
    }


    .laminate-step-icon {

        width: 50px;
        height: 50px;
    }


    .laminate-step-content {

        padding: 23px 20px;
    }


    .laminate-step-content h3 {

        font-size: 18px;
    }


    .laminate-benefits-grid {

        grid-template-columns: 1fr;
    }


    .laminate-durability-box {

        grid-template-columns: 1fr;

        padding: 30px 23px;
    }


    .laminate-durability-icon {

        width: 65px;
        height: 65px;
    }


    .laminate-durability-box h2 {

        font-size: 23px;
    }


    .laminate-care-grid {

        grid-template-columns: 1fr;
    }


    .laminate-info-card {

        padding: 28px 23px;
    }


    .laminate-info-card h2 {

        font-size: 22px;
    }


    .laminate-faq-item summary {

        padding: 20px;

        font-size: 15px;
    }


    .laminate-faq-answer {

        padding: 0 20px 22px;
    }


    .laminate-faq-answer p {

        font-size: 14px;
    }


    .laminate-cta {

        grid-template-columns: 1fr;

        padding: 30px 23px;
    }


    .laminate-cta-button {

        grid-column: auto;

        justify-self: stretch;
    }


    .laminate-cta-content h2 {

        font-size: 22px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 450px) {

    .laminate-page {

        width: calc(100% - 18px);
    }


    .laminate-hero {

        padding: 25px 18px;
    }


    .laminate-hero h1 {

        font-size: 33px;
    }


    .laminate-hero-image {

        height: 230px;
    }


    .laminate-section-heading {

        gap: 12px;
    }


    .laminate-section-heading h2 {

        font-size: 22px;
    }


    .laminate-section-heading small {

        font-size: 12px;
    }


    .laminate-heading-icon {

        width: 43px;
        height: 43px;
    }


    .laminate-heading-icon i {

        font-size: 18px;
    }


    .laminate-type-top {

        align-items: flex-start;
    }

}

/* =========================================================
   ROOT CANAL PAGE
   ========================================================= */

.root-canal-page {
    --root-canal-primary: #2878b8;
    --root-canal-primary-dark: #155a8c;
    --root-canal-primary-light: #eaf5fc;
    --root-canal-primary-soft: #f5faff;

    --root-canal-accent: #35a6a0;
    --root-canal-accent-light: #eaf8f7;

    --root-canal-text: #263746;
    --root-canal-muted: #687987;
    --root-canal-border: #dce8ef;
    --root-canal-white: #ffffff;

    --root-canal-shadow: 0 14px 40px rgba(30, 80, 110, 0.09);

    color: var(--root-canal-text);
    background: var(--root-canal-white);
}

.root-canal-page *,
.root-canal-page *::before,
.root-canal-page *::after {
    box-sizing: border-box;
}

.root-canal-container {
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* =========================
   HERO
   ========================= */

.root-canal-hero {
    padding: 80px 0 90px;
    background:
        radial-gradient(circle at 10% 20%, rgba(40, 120, 184, 0.09), transparent 30%),
        linear-gradient(135deg, #f8fcff 0%, #eef8fc 100%);
    overflow: hidden;
}

.root-canal-hero .root-canal-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 70px;
}

.root-canal-hero-content {
    max-width: 650px;
}

.root-canal-label,
.root-canal-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--root-canal-primary);
    font-size: 14px;
    font-weight: 700;
}

.root-canal-label {
    padding: 9px 16px;
    background: var(--root-canal-white);
    border: 1px solid var(--root-canal-border);
    border-radius: 30px;
    box-shadow: 0 6px 20px rgba(30, 80, 110, 0.05);
}

.root-canal-hero h1 {
    margin: 22px 0 12px;
    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.3;
    color: var(--root-canal-text);
}

.root-canal-hero h2 {
    margin: 0 0 25px;
    font-size: clamp(20px, 2.5vw, 28px);
    line-height: 1.7;
    color: var(--root-canal-primary-dark);
    font-weight: 700;
}

.root-canal-hero p {
    margin: 0 0 15px;
    color: var(--root-canal-muted);
    font-size: 16px;
    line-height: 2.1;
}

.root-canal-hero-highlight {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 28px;
    padding: 16px 20px;
    border-radius: 16px;
    background: var(--root-canal-white);
    border-right: 4px solid var(--root-canal-accent);
    box-shadow: var(--root-canal-shadow);
    font-weight: 700;
    color: var(--root-canal-text);
}

.root-canal-hero-highlight i {
    color: var(--root-canal-accent);
    font-size: 22px;
}

.root-canal-hero-image {
    display: flex;
    justify-content: center;
}

.root-canal-image-placeholder {
    width: min(430px, 100%);
    aspect-ratio: 1 / 1.05;
    border-radius: 35px;
    background: linear-gradient(
        145deg,
        var(--root-canal-primary-light),
        #ffffff
    );
    border: 1px solid var(--root-canal-border);
    box-shadow: var(--root-canal-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    color: var(--root-canal-primary);
}

.root-canal-image-placeholder i {
    font-size: 95px;
    opacity: 0.85;
}

.root-canal-image-placeholder span {
    font-size: 15px;
    color: var(--root-canal-muted);
}


/* =========================
   GENERAL SECTIONS
   ========================= */

.root-canal-section {
    padding: 90px 0;
}

.root-canal-soft-section {
    background: var(--root-canal-primary-soft);
}

.root-canal-two-column {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 70px;
    align-items: center;
}

.root-canal-section-content p {
    color: var(--root-canal-muted);
    line-height: 2.2;
    font-size: 16px;
    margin: 18px 0;
}

.root-canal-title {
    margin: 10px 0 25px;
    font-size: clamp(28px, 3.5vw, 40px);
    line-height: 1.5;
    color: var(--root-canal-text);
}

.root-canal-heading {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}

.root-canal-heading p {
    color: var(--root-canal-muted);
    line-height: 2.1;
    margin: 0;
}


/* =========================
   DEFINITION
   ========================= */

.root-canal-definition-card {
    padding: 45px 35px;
    border-radius: 28px;
    text-align: center;
    background: var(--root-canal-white);
    border: 1px solid var(--root-canal-border);
    box-shadow: var(--root-canal-shadow);
}

.root-canal-definition-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--root-canal-primary-light);
    color: var(--root-canal-primary);
    font-size: 38px;
}

.root-canal-definition-card h3 {
    margin: 0 0 12px;
    font-size: 22px;
}

.root-canal-definition-card p {
    color: var(--root-canal-muted);
    line-height: 2;
    margin: 0;
}


/* =========================
   SYMPTOMS
   ========================= */

.root-canal-symptoms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.root-canal-symptom-card {
    padding: 28px 22px;
    background: var(--root-canal-white);
    border: 1px solid var(--root-canal-border);
    border-radius: 20px;
    text-align: center;
    transition: 0.3s ease;
}

.root-canal-symptom-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--root-canal-shadow);
    border-color: rgba(40, 120, 184, 0.3);
}

.root-canal-symptom-card > i {
    width: 58px;
    height: 58px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: var(--root-canal-primary-light);
    color: var(--root-canal-primary);
    font-size: 23px;
    margin-bottom: 16px;
}

.root-canal-symptom-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.root-canal-symptom-card p {
    margin: 0;
    color: var(--root-canal-muted);
    line-height: 1.9;
    font-size: 14px;
}

.root-canal-note {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 30px;
    padding: 18px 22px;
    border-radius: 16px;
    background: #ffffff;
    border-right: 4px solid var(--root-canal-primary);
}

.root-canal-note i {
    margin-top: 4px;
    color: var(--root-canal-primary);
}

.root-canal-note p {
    margin: 0;
    color: var(--root-canal-muted);
    line-height: 2;
}


/* =========================
   BENEFITS
   ========================= */

.root-canal-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.root-canal-benefit-card {
    padding: 30px 22px;
    border: 1px solid var(--root-canal-border);
    border-radius: 22px;
    background: var(--root-canal-white);
    text-align: center;
    transition: 0.3s ease;
}

.root-canal-benefit-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--root-canal-shadow);
}

.root-canal-benefit-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--root-canal-accent-light);
    color: var(--root-canal-accent);
    font-size: 25px;
}

.root-canal-benefit-card h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

.root-canal-benefit-card p {
    margin: 0;
    color: var(--root-canal-muted);
    font-size: 14px;
    line-height: 1.9;
}


/* =========================
   TIMELINE
   ========================= */

.root-canal-steps-section {
    background:
        linear-gradient(
            180deg,
            #f7fbfe 0%,
            #ffffff 100%
        );
}

.root-canal-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.root-canal-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 31px;
    width: 2px;
    background: var(--root-canal-border);
}

.root-canal-step {
    position: relative;
    display: grid;
    grid-template-columns: 65px 1fr;
    gap: 25px;
    margin-bottom: 28px;
}

.root-canal-step:last-child {
    margin-bottom: 0;
}

.root-canal-step-number {
    width: 64px;
    height: 64px;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--root-canal-primary);
    color: white;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 0 0 8px #ffffff;
}

.root-canal-step-content {
    padding: 25px 28px;
    border: 1px solid var(--root-canal-border);
    border-radius: 20px;
    background: var(--root-canal-white);
    box-shadow: 0 8px 25px rgba(30, 80, 110, 0.05);
}

.root-canal-step-content > i {
    color: var(--root-canal-primary);
    font-size: 23px;
    margin-bottom: 12px;
}

.root-canal-step-content h3 {
    margin: 0 0 8px;
    font-size: 19px;
}

.root-canal-step-content p {
    margin: 0;
    color: var(--root-canal-muted);
    line-height: 2;
    font-size: 14px;
}


/* =========================
   INFO CARDS
   ========================= */

.root-canal-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.root-canal-info-card {
    position: relative;
    overflow: hidden;
    padding: 40px;
    border-radius: 28px;
    border: 1px solid var(--root-canal-border);
    background: var(--root-canal-white);
    box-shadow: var(--root-canal-shadow);
}

.root-canal-info-card::after {
    content: "";
    position: absolute;
    left: -50px;
    bottom: -70px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: var(--root-canal-primary-light);
}

.root-canal-info-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 18px;
    background: var(--root-canal-primary-light);
    color: var(--root-canal-primary);
    font-size: 26px;
}

.root-canal-info-card > span {
    color: var(--root-canal-primary);
    font-size: 14px;
    font-weight: 700;
}

.root-canal-info-card h2 {
    position: relative;
    z-index: 1;
    margin: 10px 0 18px;
    font-size: 25px;
    line-height: 1.7;
}

.root-canal-info-card p {
    position: relative;
    z-index: 1;
    color: var(--root-canal-muted);
    line-height: 2.1;
    margin: 10px 0;
}


/* =========================
   CARE
   ========================= */

.root-canal-care-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.root-canal-care-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 23px;
    background: var(--root-canal-white);
    border: 1px solid var(--root-canal-border);
    border-radius: 18px;
    transition: 0.3s ease;
}

.root-canal-care-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--root-canal-shadow);
}

.root-canal-care-item > i {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--root-canal-primary-light);
    color: var(--root-canal-primary);
    font-size: 21px;
}

.root-canal-care-item h3 {
    margin: 0 0 7px;
    font-size: 17px;
}

.root-canal-care-item p {
    margin: 0;
    color: var(--root-canal-muted);
    line-height: 1.9;
    font-size: 14px;
}


/* =========================
   CROWN
   ========================= */

.root-canal-crown-visual {
    min-height: 350px;
    border-radius: 30px;
    background: linear-gradient(
        145deg,
        #f0f9fc,
        #ffffff
    );
    border: 1px solid var(--root-canal-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    box-shadow: var(--root-canal-shadow);
}

.root-canal-crown-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--root-canal-primary-light);
    color: var(--root-canal-primary);
    font-size: 70px;
}

.root-canal-crown-visual > span {
    color: var(--root-canal-muted);
    font-weight: 700;
}


/* =========================
   REINFECTION
   ========================= */

.root-canal-reinfection {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 30px;
    align-items: start;
    padding: 40px;
    background: var(--root-canal-white);
    border: 1px solid var(--root-canal-border);
    border-radius: 28px;
    box-shadow: var(--root-canal-shadow);
}

.root-canal-reinfection-icon {
    width: 90px;
    height: 90px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--root-canal-accent-light);
    color: var(--root-canal-accent);
    font-size: 38px;
}

.root-canal-reinfection p {
    color: var(--root-canal-muted);
    line-height: 2.15;
    margin: 0 0 15px;
}

.root-canal-reinfection p:last-child {
    margin-bottom: 0;
}


/* =========================
   COMPARISON
   ========================= */

.root-canal-comparison {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

.root-canal-comparison-content p {
    color: var(--root-canal-muted);
    line-height: 2.15;
    margin: 15px 0;
}

.root-canal-comparison-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.root-canal-comparison-item {
    width: 155px;
    height: 155px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 25px;
    background: var(--root-canal-primary-soft);
    border: 1px solid var(--root-canal-border);
    color: var(--root-canal-primary);
    text-align: center;
}

.root-canal-comparison-item i {
    font-size: 40px;
}

.root-canal-comparison-item span {
    color: var(--root-canal-text);
    font-weight: 700;
    font-size: 14px;
}

.root-canal-comparison-arrow {
    color: var(--root-canal-primary);
    font-size: 23px;
}


/* =========================
   FAQ
   ========================= */

.root-canal-faq {
    max-width: 900px;
    margin: 0 auto;
}

.root-canal-faq details {
    margin-bottom: 14px;
    border: 1px solid var(--root-canal-border);
    border-radius: 17px;
    background: var(--root-canal-white);
    overflow: hidden;
    transition: 0.3s ease;
}

.root-canal-faq details[open] {
    box-shadow: var(--root-canal-shadow);
    border-color: rgba(40, 120, 184, 0.25);
}

.root-canal-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 24px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: var(--root-canal-text);
}

.root-canal-faq summary::-webkit-details-marker {
    display: none;
}

.root-canal-faq summary i {
    color: var(--root-canal-primary);
    transition: transform 0.3s ease;
}

.root-canal-faq details[open] summary i {
    transform: rotate(180deg);
}

.root-canal-faq details p {
    margin: 0;
    padding: 0 24px 23px;
    color: var(--root-canal-muted);
    line-height: 2.1;
    font-size: 15px;
}


/* =========================
   CTA
   ========================= */

.root-canal-cta-section {
    padding: 40px 0 90px;
}

.root-canal-cta {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 28px;
    align-items: center;
    padding: 42px 45px;
    border-radius: 30px;
    background: linear-gradient(
        135deg,
        var(--root-canal-primary-dark),
        var(--root-canal-primary)
    );
    color: white;
    box-shadow: 0 20px 50px rgba(21, 90, 140, 0.2);
}

.root-canal-cta::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    left: -90px;
    top: -130px;
    border-radius: 50%;
    border: 35px solid rgba(255, 255, 255, 0.06);
}

.root-canal-cta-icon {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 34px;
}

.root-canal-cta-content {
    position: relative;
}

.root-canal-cta-content > span {
    font-size: 14px;
    opacity: 0.8;
}

.root-canal-cta-content h2 {
    margin: 5px 0 10px;
    font-size: 27px;
}

.root-canal-cta-content p {
    margin: 6px 0;
    line-height: 1.9;
    font-size: 14px;
    opacity: 0.85;
}

.root-canal-cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 23px;
    border-radius: 14px;
    background: white;
    color: var(--root-canal-primary-dark);
    text-decoration: none;
    font-weight: 800;
    white-space: nowrap;
    transition: 0.3s ease;
}

.root-canal-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .root-canal-hero .root-canal-container,
    .root-canal-two-column,
    .root-canal-comparison {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .root-canal-hero-content {
        max-width: 100%;
        text-align: center;
    }

    .root-canal-hero-highlight {
        justify-content: center;
    }

    .root-canal-hero-image {
        order: -1;
    }

    .root-canal-image-placeholder {
        width: min(400px, 80%);
    }

    .root-canal-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .root-canal-comparison-visual {
        order: -1;
    }

    .root-canal-cta {
        grid-template-columns: 80px 1fr;
    }

    .root-canal-cta-button {
        grid-column: 1 / -1;
        justify-self: start;
    }
}


@media (max-width: 700px) {

    .root-canal-section {
        padding: 65px 0;
    }

    .root-canal-hero {
        padding: 55px 0 65px;
    }

    .root-canal-hero .root-canal-container {
        gap: 35px;
    }

    .root-canal-hero h1 {
        font-size: 36px;
    }

    .root-canal-hero h2 {
        font-size: 20px;
    }

    .root-canal-hero p {
        font-size: 15px;
    }

    .root-canal-image-placeholder {
        width: 75%;
        border-radius: 25px;
    }

    .root-canal-symptoms-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .root-canal-benefits-grid {
        grid-template-columns: 1fr;
    }

    .root-canal-info-grid,
    .root-canal-care-grid {
        grid-template-columns: 1fr;
    }

    .root-canal-reinfection {
        grid-template-columns: 1fr;
        padding: 30px;
    }

    .root-canal-reinfection-icon {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }

    .root-canal-cta {
        padding: 32px 27px;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .root-canal-cta-icon {
        margin: 0 auto;
    }

    .root-canal-cta-button {
        justify-self: center;
    }
}


@media (max-width: 450px) {

    .root-canal-container {
        width: 90%;
    }

    .root-canal-hero h1 {
        font-size: 31px;
    }

    .root-canal-hero h2 {
        font-size: 18px;
    }

    .root-canal-image-placeholder {
        width: 90%;
    }

    .root-canal-image-placeholder i {
        font-size: 70px;
    }

    .root-canal-symptoms-grid {
        grid-template-columns: 1fr;
    }

    .root-canal-timeline::before {
        right: 25px;
    }

    .root-canal-step {
        grid-template-columns: 52px 1fr;
        gap: 15px;
    }

    .root-canal-step-number {
        width: 52px;
        height: 52px;
        font-size: 12px;
    }

    .root-canal-step-content {
        padding: 20px;
    }

    .root-canal-info-card {
        padding: 28px 23px;
    }

    .root-canal-comparison-visual {
        flex-direction: column;
    }

    .root-canal-comparison-arrow {
        transform: rotate(-90deg);
    }

    .root-canal-cta-content h2 {
        font-size: 22px;
    }

    .root-canal-cta-button {
        width: 100%;
    }
}

/* =========================================================
   Composite Page
   ========================================================= */

.composite-page {
    --composite-primary: #2f6f8f;
    --composite-primary-dark: #24566f;
    --composite-primary-light: #eaf5f8;
    --composite-secondary: #6c63a8;
    --composite-text: #26343d;
    --composite-muted: #66757f;
    --composite-white: #ffffff;
    --composite-bg: #f7fafb;
    --composite-border: #e1eaee;
    --composite-shadow: 0 10px 30px rgba(36, 86, 111, 0.08);

    direction: rtl;
    color: var(--composite-text);
    line-height: 2;
}


/* =========================================================
   Hero
   ========================================================= */

.composite-hero {
    width: min(1180px, calc(100% - 40px));
    min-height: 390px;
    margin: 45px auto 80px;
    padding: 55px 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    position: relative;
    overflow: hidden;
    border-radius: 35px;
    background: linear-gradient(135deg, #edf7fa, #f7f9fc);
    border: 1px solid var(--composite-border);
}

.composite-hero::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(47, 111, 143, 0.08);
    left: -80px;
    bottom: -120px;
}

.composite-hero-content {
    max-width: 720px;
    position: relative;
    z-index: 1;
}

.composite-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px;
    margin-bottom: 18px;
    border-radius: 30px;
    background: var(--composite-white);
    color: var(--composite-primary);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 5px 18px rgba(36, 86, 111, 0.07);
}

.composite-hero-label i {
    font-size: 15px;
}

.composite-hero h1 {
    margin: 0 0 8px;
    color: var(--composite-primary-dark);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
}

.composite-hero h2 {
    margin: 0 0 20px;
    color: var(--composite-secondary);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 600;
}

.composite-hero p {
    margin: 0;
    color: var(--composite-muted);
    font-size: 16px;
    max-width: 700px;
}

.composite-hero-icon {
    width: 190px;
    height: 190px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--composite-white);
    color: var(--composite-primary);
    font-size: 80px;
    box-shadow: 0 15px 40px rgba(36, 86, 111, 0.12);
    position: relative;
    z-index: 1;
}


/* =========================================================
   General Sections
   ========================================================= */

.composite-section {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto 90px;
}

.composite-section-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 35px;
}

.composite-section-icon {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--composite-primary-light);
    color: var(--composite-primary);
    font-size: 23px;
}

.composite-section-label {
    display: block;
    margin-bottom: 2px;
    color: var(--composite-primary);
    font-size: 13px;
    font-weight: 700;
}

.composite-section-heading h2 {
    margin: 0;
    color: var(--composite-text);
    font-size: clamp(23px, 3vw, 31px);
    font-weight: 800;
}

.composite-section-intro {
    margin: -10px 0 30px;
    color: var(--composite-muted);
    font-size: 16px;
}


/* =========================================================
   Introduction
   ========================================================= */

.composite-intro-content {
    display: grid;
    grid-template-columns: 1.8fr 0.8fr;
    gap: 30px;
    align-items: stretch;
}

.composite-intro-text {
    padding: 30px;
    border-radius: 25px;
    background: var(--composite-bg);
    border: 1px solid var(--composite-border);
}

.composite-intro-text p {
    margin: 0 0 18px;
    color: var(--composite-muted);
    font-size: 16px;
}

.composite-intro-text p:last-child {
    margin-bottom: 0;
}

.composite-intro-card {
    padding: 35px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 25px;
    background: linear-gradient(145deg, var(--composite-primary), var(--composite-primary-dark));
    color: var(--composite-white);
    box-shadow: var(--composite-shadow);
}

.composite-intro-card i {
    margin-bottom: 18px;
    font-size: 42px;
}

.composite-intro-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

.composite-intro-card p {
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
}


/* =========================================================
   Applications
   ========================================================= */

.composite-application-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.composite-application-card {
    padding: 25px 18px;
    min-height: 185px;
    text-align: center;
    border: 1px solid var(--composite-border);
    border-radius: 22px;
    background: var(--composite-white);
    box-shadow: var(--composite-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.composite-application-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(36, 86, 111, 0.13);
}

.composite-application-card span {
    width: 50px;
    height: 50px;
    margin: 0 auto 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--composite-primary-light);
    color: var(--composite-primary);
    font-size: 20px;
}

.composite-application-card h3 {
    margin: 0 0 5px;
    font-size: 16px;
}

.composite-application-card p {
    margin: 0;
    color: var(--composite-muted);
    font-size: 13px;
    line-height: 1.8;
}

.composite-note {
    margin-top: 25px;
    padding: 17px 20px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-radius: 17px;
    background: #f1f7f9;
    border-right: 4px solid var(--composite-primary);
}

.composite-note i {
    color: var(--composite-primary);
    font-size: 19px;
}

.composite-note p {
    margin: 0;
    color: var(--composite-muted);
    font-size: 14px;
}


/* =========================================================
   Treatment Steps
   ========================================================= */

.composite-steps-section {
    position: relative;
}

.composite-steps {
    position: relative;
    padding-right: 45px;
}

.composite-steps::before {
    content: "";
    position: absolute;
    right: 22px;
    top: 15px;
    bottom: 15px;
    width: 2px;
    background: var(--composite-border);
}

.composite-step {
    position: relative;
    display: flex;
    gap: 25px;
    margin-bottom: 28px;
}

.composite-step:last-child {
    margin-bottom: 0;
}

.composite-step-number {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--composite-primary);
    color: var(--composite-white);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 0 0 7px var(--composite-white);
    position: relative;
    z-index: 1;
}

.composite-step-content {
    flex: 1;
    padding: 20px 24px;
    border: 1px solid var(--composite-border);
    border-radius: 20px;
    background: var(--composite-white);
    box-shadow: var(--composite-shadow);
}

.composite-step-content h3 {
    margin: 0 0 7px;
    color: var(--composite-primary-dark);
    font-size: 18px;
}

.composite-step-content p {
    margin: 0;
    color: var(--composite-muted);
    font-size: 14px;
}


/* =========================================================
   Benefits
   ========================================================= */

.composite-benefits-section {
    padding: 55px 45px;
    border-radius: 32px;
    background: var(--composite-bg);
}

.composite-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.composite-benefit-card {
    padding: 25px 18px;
    text-align: center;
    border-radius: 20px;
    background: var(--composite-white);
    border: 1px solid var(--composite-border);
    transition: transform 0.25s ease;
}

.composite-benefit-card:hover {
    transform: translateY(-5px);
}

.composite-benefit-card i {
    margin-bottom: 13px;
    color: var(--composite-primary);
    font-size: 27px;
}

.composite-benefit-card h3 {
    margin: 0 0 5px;
    font-size: 16px;
}

.composite-benefit-card p {
    margin: 0;
    color: var(--composite-muted);
    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   Durability
   ========================================================= */

.composite-info-box {
    padding: 40px;
    display: flex;
    gap: 28px;
    border-radius: 28px;
    background: linear-gradient(135deg, #edf7fa, #f7f8fc);
    border: 1px solid var(--composite-border);
}

.composite-info-icon {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: var(--composite-white);
    color: var(--composite-primary);
    font-size: 29px;
    box-shadow: var(--composite-shadow);
}

.composite-info-content {
    flex: 1;
}

.composite-info-content h2 {
    margin: 0 0 17px;
    font-size: 26px;
}

.composite-info-content p {
    margin: 0 0 13px;
    color: var(--composite-muted);
    font-size: 15px;
}

.composite-info-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   Two Column Feature Boxes
   ========================================================= */

.composite-two-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.composite-feature-box {
    padding: 35px;
    border-radius: 27px;
    background: var(--composite-white);
    border: 1px solid var(--composite-border);
    box-shadow: var(--composite-shadow);
}

.composite-feature-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: var(--composite-primary-light);
    color: var(--composite-primary);
    font-size: 23px;
}

.composite-feature-box h2 {
    margin: 0 0 17px;
    font-size: 22px;
    line-height: 1.7;
}

.composite-feature-box p {
    margin: 0 0 13px;
    color: var(--composite-muted);
    font-size: 14px;
}

.composite-feature-box p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   Comparison
   ========================================================= */

.composite-comparison {
    display: grid;
    grid-template-columns: 1fr 90px 1fr;
    align-items: center;
    gap: 15px;
}

.composite-comparison-card {
    padding: 35px;
    border-radius: 27px;
    border: 1px solid var(--composite-border);
    background: var(--composite-white);
    box-shadow: var(--composite-shadow);
}

.composite-comparison-card h3 {
    margin: 0 0 20px;
    font-size: 22px;
}

.composite-comparison-icon {
    width: 55px;
    height: 55px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--composite-primary-light);
    color: var(--composite-primary);
    font-size: 22px;
}

.composite-ceramic-card .composite-comparison-icon {
    background: #f1effa;
    color: var(--composite-secondary);
}

.composite-comparison-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.composite-comparison-card li {
    position: relative;
    margin-bottom: 12px;
    padding-right: 25px;
    color: var(--composite-muted);
    font-size: 14px;
}

.composite-comparison-card li:last-child {
    margin-bottom: 0;
}

.composite-comparison-card li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 2px;
    color: var(--composite-primary);
}

.composite-comparison-vs {
    display: flex;
    align-items: center;
    justify-content: center;
}

.composite-comparison-vs span {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--composite-primary);
    color: var(--composite-white);
    font-size: 13px;
    font-weight: 800;
}


/* =========================================================
   Care
   ========================================================= */

.composite-care-section {
    padding: 50px 45px;
    border-radius: 32px;
    background: var(--composite-bg);
}

.composite-care-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
}

.composite-care-item {
    min-height: 65px;
    padding: 13px 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-radius: 16px;
    background: var(--composite-white);
    border: 1px solid var(--composite-border);
}

.composite-care-item i {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--composite-primary-light);
    color: var(--composite-primary);
    font-size: 12px;
}

.composite-care-item span {
    color: var(--composite-muted);
    font-size: 14px;
}


/* =========================================================
   Candidate
   ========================================================= */

.composite-candidate-box {
    background: linear-gradient(135deg, #faf9ff, #f7fafb);
}

.composite-candidate-box .composite-section-label {
    margin-bottom: 5px;
}

.composite-candidate-box h2 {
    max-width: 800px;
}


/* =========================================================
   Warning
   ========================================================= */

.composite-warning {
    margin-top: 20px;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 17px;
    background: #fff8ec;
    border-right: 4px solid #d99a32;
}

.composite-warning i {
    margin-top: 5px;
    color: #c58216;
}

.composite-warning p {
    margin: 0;
    color: #765a2a;
    font-size: 13px;
}


/* =========================================================
   FAQ
   ========================================================= */

.composite-faq-section {
    max-width: 950px;
}

.composite-faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.composite-faq details {
    border: 1px solid var(--composite-border);
    border-radius: 17px;
    background: var(--composite-white);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.composite-faq details[open] {
    box-shadow: var(--composite-shadow);
}

.composite-faq summary {
    padding: 19px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    font-weight: 700;
}

.composite-faq summary::-webkit-details-marker {
    display: none;
}

.composite-faq summary i {
    color: var(--composite-primary);
    font-size: 13px;
    transition: transform 0.25s ease;
}

.composite-faq details[open] summary i {
    transform: rotate(180deg);
}

.composite-faq details p {
    margin: 0;
    padding: 0 22px 22px;
    color: var(--composite-muted);
    font-size: 14px;
}


/* =========================================================
   CTA
   ========================================================= */

.composite-cta {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto 90px;
    padding: 50px;
    display: flex;
    align-items: center;
    gap: 30px;
    border-radius: 32px;
    background: linear-gradient(135deg, var(--composite-primary-dark), var(--composite-primary));
    color: var(--composite-white);
    box-shadow: 0 20px 45px rgba(36, 86, 111, 0.18);
}

.composite-cta-icon {
    width: 78px;
    height: 78px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 32px;
}

.composite-cta-content {
    flex: 1;
}

.composite-cta-content > span {
    font-size: 14px;
    opacity: 0.8;
}

.composite-cta-content h2 {
    margin: 3px 0 12px;
    font-size: 27px;
}

.composite-cta-content p {
    margin: 0 0 8px;
    max-width: 850px;
    font-size: 14px;
    line-height: 2;
    opacity: 0.9;
}

.composite-cta-button {
    margin-top: 20px;
    padding: 11px 22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 13px;
    background: var(--composite-white);
    color: var(--composite-primary-dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.composite-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1000px) {

    .composite-hero {
        padding: 45px;
    }

    .composite-application-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .composite-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .composite-intro-content {
        grid-template-columns: 1.5fr 1fr;
    }

}


/* =========================================================
   Tablet / Small
   ========================================================= */

@media (max-width: 750px) {

    .composite-hero {
        width: min(100% - 25px, 650px);
        min-height: auto;
        margin-top: 30px;
        padding: 38px 25px;
        flex-direction: column-reverse;
        text-align: center;
        gap: 25px;
    }

    .composite-hero-icon {
        width: 130px;
        height: 130px;
        font-size: 55px;
    }

    .composite-hero-content {
        max-width: 100%;
    }

    .composite-hero h1 {
        font-size: 31px;
    }

    .composite-hero h2 {
        font-size: 18px;
    }

    .composite-section {
        width: min(100% - 25px, 650px);
        margin-bottom: 65px;
    }

    .composite-section-heading {
        gap: 13px;
        margin-bottom: 25px;
    }

    .composite-section-icon {
        width: 50px;
        height: 50px;
        border-radius: 15px;
        font-size: 20px;
    }

    .composite-section-heading h2 {
        font-size: 23px;
    }

    .composite-intro-content {
        grid-template-columns: 1fr;
    }

    .composite-application-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .composite-benefits-section,
    .composite-care-section {
        padding: 35px 25px;
    }

    .composite-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .composite-two-column {
        grid-template-columns: 1fr;
    }

    .composite-comparison {
        grid-template-columns: 1fr;
    }

    .composite-comparison-vs {
        margin: 3px 0;
    }

    .composite-comparison-vs span {
        width: 45px;
        height: 45px;
        font-size: 11px;
    }

    .composite-care-list {
        grid-template-columns: 1fr;
    }

    .composite-cta {
        width: min(100% - 25px, 650px);
        padding: 35px 25px;
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .composite-cta-content h2 {
        font-size: 23px;
    }

    .composite-cta-content p {
        font-size: 13px;
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 450px) {

    .composite-hero {
        padding: 32px 20px;
        border-radius: 27px;
    }

    .composite-hero-label {
        font-size: 12px;
    }

    .composite-hero h1 {
        font-size: 27px;
    }

    .composite-hero h2 {
        font-size: 16px;
    }

    .composite-hero p {
        font-size: 14px;
    }

    .composite-section {
        width: calc(100% - 20px);
    }

    .composite-section-heading {
        align-items: flex-start;
    }

    .composite-section-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .composite-section-heading h2 {
        font-size: 20px;
    }

    .composite-application-grid {
        grid-template-columns: 1fr;
    }

    .composite-benefits-section,
    .composite-care-section {
        padding: 30px 18px;
    }

    .composite-benefits-grid {
        grid-template-columns: 1fr;
    }

    .composite-intro-text,
    .composite-feature-box,
    .composite-comparison-card {
        padding: 25px 20px;
    }

    .composite-info-box {
        padding: 27px 20px;
        flex-direction: column;
    }

    .composite-info-icon {
        width: 58px;
        height: 58px;
    }

    .composite-steps {
        padding-right: 35px;
    }

    .composite-steps::before {
        right: 17px;
    }

    .composite-step {
        gap: 17px;
    }

    .composite-step-number {
        width: 36px;
        height: 36px;
        font-size: 10px;
    }

    .composite-step-content {
        padding: 17px;
    }

    .composite-step-content h3 {
        font-size: 16px;
    }

    .composite-step-content p {
        font-size: 13px;
    }

    .composite-faq summary {
        padding: 17px;
        font-size: 13px;
    }

    .composite-faq details p {
        padding: 0 17px 18px;
        font-size: 13px;
    }

    .composite-cta {
        width: calc(100% - 20px);
        padding: 30px 20px;
        margin-bottom: 60px;
    }

    .composite-cta-icon {
        width: 65px;
        height: 65px;
        font-size: 27px;
    }

    .composite-cta-content h2 {
        font-size: 21px;
    }

}

/* =========================================================
   PROSTHESIS PAGE
   ========================================================= */

.prosthesis-page {
    --prosthesis-primary: #3b73a8;
    --prosthesis-primary-dark: #2d5f8f;
    --prosthesis-primary-light: #eaf2fa;
    --prosthesis-secondary: #6678b8;
    --prosthesis-secondary-light: #eef0fa;
    --prosthesis-text: #26343d;
    --prosthesis-muted: #687780;
    --prosthesis-white: #ffffff;
    --prosthesis-bg: #f7fafb;
    --prosthesis-border: #dfe8ef;
    --prosthesis-shadow: 0 12px 32px rgba(45, 95, 143, 0.08);

    direction: rtl;
    color: var(--prosthesis-text);
    line-height: 2;
}


/* =========================================================
   HERO
   ========================================================= */

.prosthesis-page .prosthesis-hero {
    max-width: 1200px;
    margin: 45px auto 80px;
    padding: 65px 70px;
    background: linear-gradient(135deg, #f0f8fa, #f8fbfc);
    border: 1px solid var(--prosthesis-border);
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    overflow: hidden;
    position: relative;
}

.prosthesis-page .prosthesis-hero::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    background: var(--prosthesis-primary-light);
    border-radius: 50%;
    left: -100px;
    top: -100px;
}

.prosthesis-page .prosthesis-hero-content {
    max-width: 760px;
    position: relative;
    z-index: 1;
}

.prosthesis-page .prosthesis-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px;
    border-radius: 30px;
    background: var(--prosthesis-primary-light);
    color: var(--prosthesis-primary-dark);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 18px;
}

.prosthesis-page .prosthesis-eyebrow i {
    font-size: 15px;
}

.prosthesis-page .prosthesis-hero h1 {
    margin: 0 0 12px;
    font-size: 43px;
    font-weight: 800;
    line-height: 1.5;
}

.prosthesis-page .prosthesis-hero-subtitle {
    margin: 0 0 22px;
    color: var(--prosthesis-primary-dark);
    font-size: 20px;
    font-weight: 700;
}

.prosthesis-page .prosthesis-hero-text {
    margin: 0;
    color: var(--prosthesis-muted);
    font-size: 16px;
}

.prosthesis-page .prosthesis-hero-icon {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.prosthesis-page .prosthesis-tooth-circle {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: var(--prosthesis-white);
    box-shadow: 0 20px 45px rgba(43, 100, 117, 0.13);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--prosthesis-primary);
    font-size: 75px;
}


/* =========================================================
   GENERAL SECTION
   ========================================================= */

.prosthesis-page .prosthesis-section {
    max-width: 1200px;
    margin: 0 auto 100px;
    padding: 0 25px;
}

.prosthesis-page .prosthesis-section-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 45px;
}

.prosthesis-page .prosthesis-section-heading > span {
    display: inline-block;
    color: var(--prosthesis-primary);
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 5px;
}

.prosthesis-page .prosthesis-section-heading h2 {
    margin: 0;
    font-size: 31px;
    line-height: 1.6;
    font-weight: 800;
}

.prosthesis-page .prosthesis-section-heading p {
    color: var(--prosthesis-muted);
    margin: 10px 0 0;
}


/* =========================================================
   INTRO
   ========================================================= */

.prosthesis-page .prosthesis-intro-grid {
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    gap: 25px;
}

.prosthesis-page .prosthesis-text-card,
.prosthesis-page .prosthesis-highlight-card {
    background: var(--prosthesis-white);
    border: 1px solid var(--prosthesis-border);
    border-radius: 25px;
    padding: 32px;
    box-shadow: var(--prosthesis-shadow);
}

.prosthesis-page .prosthesis-text-card p {
    margin: 0 0 18px;
    color: var(--prosthesis-muted);
}

.prosthesis-page .prosthesis-text-card p:last-child {
    margin-bottom: 0;
}

.prosthesis-page .prosthesis-highlight-card {
    background: linear-gradient(145deg, var(--prosthesis-primary-light), #ffffff);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.prosthesis-page .prosthesis-highlight-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: var(--prosthesis-white);
    color: var(--prosthesis-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 20px;
}

.prosthesis-page .prosthesis-highlight-card h3 {
    margin: 0 0 10px;
    font-size: 21px;
}

.prosthesis-page .prosthesis-highlight-card p {
    margin: 0;
    color: var(--prosthesis-muted);
}


/* =========================================================
   TYPES
   ========================================================= */

.prosthesis-page .prosthesis-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.prosthesis-page .prosthesis-type-card {
    padding: 35px;
    background: var(--prosthesis-white);
    border: 1px solid var(--prosthesis-border);
    border-radius: 28px;
    box-shadow: var(--prosthesis-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.prosthesis-page .prosthesis-type-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(43, 100, 117, 0.12);
}

.prosthesis-page .prosthesis-type-icon {
    width: 65px;
    height: 65px;
    border-radius: 19px;
    background: var(--prosthesis-primary-light);
    color: var(--prosthesis-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
    margin-bottom: 18px;
}

.prosthesis-page .prosthesis-type-label {
    color: var(--prosthesis-primary);
    font-size: 14px;
    font-weight: 800;
}

.prosthesis-page .prosthesis-type-card h3 {
    font-size: 25px;
    margin: 4px 0 15px;
}

.prosthesis-page .prosthesis-type-card > p {
    color: var(--prosthesis-muted);
    margin: 0 0 15px;
}

.prosthesis-page .prosthesis-benefits {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--prosthesis-border);
}

.prosthesis-page .prosthesis-benefits h4 {
    margin: 0 0 12px;
    font-size: 17px;
}

.prosthesis-page .prosthesis-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.prosthesis-page .prosthesis-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--prosthesis-muted);
}

.prosthesis-page .prosthesis-benefits li i {
    color: var(--prosthesis-primary);
    margin-top: 7px;
    font-size: 13px;
}

.prosthesis-page .prosthesis-removable-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 28px;
}

.prosthesis-page .prosthesis-removable-types > div {
    padding: 20px;
    background: var(--prosthesis-bg);
    border-radius: 18px;
}

.prosthesis-page .prosthesis-removable-types i {
    color: var(--prosthesis-secondary);
    font-size: 23px;
}

.prosthesis-page .prosthesis-removable-types h4 {
    margin: 8px 0 5px;
}

.prosthesis-page .prosthesis-removable-types p {
    margin: 0;
    color: var(--prosthesis-muted);
    font-size: 14px;
}


/* =========================================================
   CHOICE
   ========================================================= */

.prosthesis-page .prosthesis-choice-box {
    background: linear-gradient(135deg, #f5fafb, #ffffff);
    border: 1px solid var(--prosthesis-border);
    border-radius: 30px;
    padding: 35px;
    box-shadow: var(--prosthesis-shadow);
}

.prosthesis-page .prosthesis-choice-intro {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--prosthesis-border);
}

.prosthesis-page .prosthesis-choice-icon {
    width: 65px;
    height: 65px;
    flex-shrink: 0;
    border-radius: 20px;
    background: var(--prosthesis-secondary-light);
    color: var(--prosthesis-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
}

.prosthesis-page .prosthesis-choice-intro h3 {
    margin: 0 0 5px;
    font-size: 21px;
}

.prosthesis-page .prosthesis-choice-intro p {
    margin: 0;
    color: var(--prosthesis-muted);
}

.prosthesis-page .prosthesis-factors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 28px 0;
}

.prosthesis-page .prosthesis-factors > div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--prosthesis-white);
    border: 1px solid var(--prosthesis-border);
    border-radius: 16px;
}

.prosthesis-page .prosthesis-factors i {
    color: var(--prosthesis-primary);
    font-size: 18px;
    width: 25px;
    text-align: center;
}

.prosthesis-page .prosthesis-factors span {
    font-size: 14px;
}

.prosthesis-page .prosthesis-choice-footer {
    padding: 17px 20px;
    border-radius: 15px;
    background: var(--prosthesis-primary-light);
    color: var(--prosthesis-primary-dark);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.prosthesis-page .prosthesis-choice-footer i {
    color: var(--prosthesis-primary);
}


/* =========================================================
   STEPS
   ========================================================= */

.prosthesis-page .prosthesis-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.prosthesis-page .prosthesis-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 31px;
    width: 2px;
    background: var(--prosthesis-border);
}

.prosthesis-page .prosthesis-step {
    position: relative;
    display: grid;
    grid-template-columns: 62px 65px 1fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 25px;
}

.prosthesis-page .prosthesis-step-number {
    color: var(--prosthesis-primary);
    font-weight: 800;
    font-size: 13px;
    text-align: center;
}

.prosthesis-page .prosthesis-step-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: var(--prosthesis-white);
    border: 2px solid var(--prosthesis-primary-light);
    color: var(--prosthesis-primary);
    box-shadow: 0 6px 20px rgba(43, 100, 117, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    z-index: 1;
}

.prosthesis-page .prosthesis-step-content {
    background: var(--prosthesis-white);
    border: 1px solid var(--prosthesis-border);
    border-radius: 20px;
    padding: 20px 25px;
}

.prosthesis-page .prosthesis-step-content h3 {
    margin: 0 0 4px;
    font-size: 19px;
}

.prosthesis-page .prosthesis-step-content p {
    margin: 0;
    color: var(--prosthesis-muted);
    font-size: 14px;
}


/* =========================================================
   CARE
   ========================================================= */

.prosthesis-page .prosthesis-care-grid {
    display: grid;
    grid-template-columns: 1.6fr 0.8fr;
    gap: 25px;
}

.prosthesis-page .prosthesis-care-list {
    display: grid;
    gap: 12px;
}

.prosthesis-page .prosthesis-care-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    background: var(--prosthesis-white);
    border: 1px solid var(--prosthesis-border);
    border-radius: 17px;
}

.prosthesis-page .prosthesis-care-item i {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--prosthesis-primary-light);
    color: var(--prosthesis-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.prosthesis-page .prosthesis-care-item p {
    margin: 0;
    color: var(--prosthesis-muted);
    font-size: 14px;
}

.prosthesis-page .prosthesis-care-visual {
    background: linear-gradient(145deg, var(--prosthesis-secondary-light), #ffffff);
    border: 1px solid var(--prosthesis-border);
    border-radius: 25px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.prosthesis-page .prosthesis-care-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--prosthesis-white);
    color: var(--prosthesis-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    margin-bottom: 20px;
}

.prosthesis-page .prosthesis-care-visual h3 {
    margin: 0 0 7px;
    font-size: 21px;
}

.prosthesis-page .prosthesis-care-visual p {
    color: var(--prosthesis-muted);
    margin: 0;
}


/* =========================================================
   INFO CARDS
   ========================================================= */

.prosthesis-page .prosthesis-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.prosthesis-page .prosthesis-info-card {
    padding: 32px;
    background: var(--prosthesis-white);
    border: 1px solid var(--prosthesis-border);
    border-radius: 25px;
    box-shadow: var(--prosthesis-shadow);
}

.prosthesis-page .prosthesis-info-icon {
    width: 58px;
    height: 58px;
    border-radius: 17px;
    background: var(--prosthesis-primary-light);
    color: var(--prosthesis-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
}

.prosthesis-page .prosthesis-info-card h2 {
    margin: 0 0 15px;
    font-size: 23px;
}

.prosthesis-page .prosthesis-info-card p {
    color: var(--prosthesis-muted);
    margin: 0 0 14px;
}

.prosthesis-page .prosthesis-info-note {
    margin-top: 20px;
    padding: 15px 17px;
    border-radius: 14px;
    background: var(--prosthesis-primary-light);
    color: var(--prosthesis-primary-dark);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.prosthesis-page .prosthesis-info-note i {
    color: var(--prosthesis-primary);
}


/* =========================================================
   IMPLANT
   ========================================================= */

.prosthesis-page .prosthesis-implant-box {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 28px;
    align-items: start;
    padding: 40px;
    border-radius: 30px;
    background: linear-gradient(135deg, #eef7f9, #f8f8fc);
    border: 1px solid var(--prosthesis-border);
}

.prosthesis-page .prosthesis-implant-icon {
    width: 90px;
    height: 90px;
    border-radius: 25px;
    background: var(--prosthesis-white);
    color: var(--prosthesis-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
}

.prosthesis-page .prosthesis-implant-content > span {
    color: var(--prosthesis-secondary);
    font-size: 14px;
    font-weight: 800;
}

.prosthesis-page .prosthesis-implant-content h2 {
    margin: 4px 0 12px;
    font-size: 28px;
}

.prosthesis-page .prosthesis-implant-content p {
    color: var(--prosthesis-muted);
    margin: 0 0 10px;
}

.prosthesis-page .prosthesis-implant-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   FAQ
   ========================================================= */

.prosthesis-page .prosthesis-faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.prosthesis-page .prosthesis-faq-list details {
    background: var(--prosthesis-white);
    border: 1px solid var(--prosthesis-border);
    border-radius: 18px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: 0.25s ease;
}

.prosthesis-page .prosthesis-faq-list details[open] {
    border-color: #cbdfe4;
    box-shadow: var(--prosthesis-shadow);
}

.prosthesis-page .prosthesis-faq-list summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font-weight: 700;
}

.prosthesis-page .prosthesis-faq-list summary::-webkit-details-marker {
    display: none;
}

.prosthesis-page .prosthesis-faq-list summary i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--prosthesis-primary-light);
    color: var(--prosthesis-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: transform 0.25s ease;
}

.prosthesis-page .prosthesis-faq-list details[open] summary i {
    transform: rotate(180deg);
}

.prosthesis-page .prosthesis-faq-list details p {
    margin: 0;
    padding: 0 23px 22px;
    color: var(--prosthesis-muted);
    font-size: 14px;
}


/* =========================================================
   CTA
   ========================================================= */

.prosthesis-page .prosthesis-cta {
    max-width: 1150px;
    margin: 0 auto 90px;
    padding: 38px 42px;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--prosthesis-primary-dark), var(--prosthesis-primary));
    color: var(--prosthesis-white);
    display: flex;
    align-items: center;
    gap: 25px;
    box-shadow: 0 18px 40px rgba(43, 100, 117, 0.18);
}

.prosthesis-page .prosthesis-cta-icon {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
}

.prosthesis-page .prosthesis-cta-content {
    flex: 1;
}

.prosthesis-page .prosthesis-cta-content h2 {
    margin: 0 0 7px;
    font-size: 23px;
}

.prosthesis-page .prosthesis-cta-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.87);
    font-size: 14px;
}

.prosthesis-page .prosthesis-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 14px 22px;
    background: var(--prosthesis-white);
    color: var(--prosthesis-primary-dark);
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    transition: 0.25s ease;
}

.prosthesis-page .prosthesis-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.prosthesis-page .prosthesis-cta-button i {
    transition: transform 0.25s ease;
}

.prosthesis-page .prosthesis-cta-button:hover i {
    transform: translateX(-4px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .prosthesis-page .prosthesis-hero {
        padding: 50px 40px;
    }

    .prosthesis-page .prosthesis-hero h1 {
        font-size: 36px;
    }

    .prosthesis-page .prosthesis-factors {
        grid-template-columns: 1fr 1fr;
    }

    .prosthesis-page .prosthesis-care-grid {
        grid-template-columns: 1fr;
    }

    .prosthesis-page .prosthesis-care-visual {
        min-height: 240px;
    }

    .prosthesis-page .prosthesis-cta {
        margin-right: 25px;
        margin-left: 25px;
    }
}


@media (max-width: 750px) {

    .prosthesis-page .prosthesis-hero {
        margin-top: 30px;
        padding: 40px 25px;
        flex-direction: column-reverse;
        text-align: center;
        gap: 30px;
    }

    .prosthesis-page .prosthesis-hero-icon {
        align-self: center;
    }

    .prosthesis-page .prosthesis-tooth-circle {
        width: 145px;
        height: 145px;
        font-size: 58px;
    }

    .prosthesis-page .prosthesis-hero h1 {
        font-size: 31px;
    }

    .prosthesis-page .prosthesis-hero-subtitle {
        font-size: 17px;
    }

    .prosthesis-page .prosthesis-hero-text {
        font-size: 14px;
    }

    .prosthesis-page .prosthesis-intro-grid,
    .prosthesis-page .prosthesis-type-grid,
    .prosthesis-page .prosthesis-info-grid {
        grid-template-columns: 1fr;
    }

    .prosthesis-page .prosthesis-section {
        margin-bottom: 75px;
    }

    .prosthesis-page .prosthesis-section-heading h2 {
        font-size: 27px;
    }

    .prosthesis-page .prosthesis-type-card,
    .prosthesis-page .prosthesis-text-card,
    .prosthesis-page .prosthesis-highlight-card {
        padding: 27px;
    }

    .prosthesis-page .prosthesis-removable-types {
        grid-template-columns: 1fr;
    }

    .prosthesis-page .prosthesis-factors {
        grid-template-columns: 1fr;
    }

    .prosthesis-page .prosthesis-choice-box {
        padding: 25px;
    }

    .prosthesis-page .prosthesis-step {
        grid-template-columns: 48px 55px 1fr;
        gap: 10px;
    }

    .prosthesis-page .prosthesis-step-icon {
        width: 55px;
        height: 55px;
    }

    .prosthesis-page .prosthesis-timeline::before {
        right: 27px;
    }

    .prosthesis-page .prosthesis-step-content {
        padding: 17px 18px;
    }

    .prosthesis-page .prosthesis-implant-box {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
        padding: 30px 25px;
    }

    .prosthesis-page .prosthesis-cta {
        flex-direction: column;
        text-align: center;
        padding: 32px 25px;
    }

    .prosthesis-page .prosthesis-cta-button {
        width: 100%;
        justify-content: center;
    }
}


@media (max-width: 450px) {

    .prosthesis-page .prosthesis-hero {
        border-radius: 25px;
        padding: 32px 18px;
    }

    .prosthesis-page .prosthesis-hero h1 {
        font-size: 27px;
    }

    .prosthesis-page .prosthesis-section {
        padding: 0 16px;
    }

    .prosthesis-page .prosthesis-section-heading h2 {
        font-size: 24px;
    }

    .prosthesis-page .prosthesis-type-card {
        padding: 23px;
    }

    .prosthesis-page .prosthesis-choice-intro {
        align-items: flex-start;
    }

    .prosthesis-page .prosthesis-choice-intro h3 {
        font-size: 18px;
    }

    .prosthesis-page .prosthesis-step {
        grid-template-columns: 40px 50px 1fr;
    }

    .prosthesis-page .prosthesis-step-number {
        font-size: 11px;
    }

    .prosthesis-page .prosthesis-step-icon {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .prosthesis-page .prosthesis-timeline::before {
        right: 24px;
    }

    .prosthesis-page .prosthesis-step-content h3 {
        font-size: 16px;
    }

    .prosthesis-page .prosthesis-step-content p {
        font-size: 13px;
    }

    .prosthesis-page .prosthesis-info-card {
        padding: 24px;
    }

    .prosthesis-page .prosthesis-implant-content h2 {
        font-size: 24px;
    }

    .prosthesis-page .prosthesis-cta-content h2 {
        font-size: 20px;
    }
}

/* =========================================================
   OVERDENTURE PAGE
   ========================================================= */

.overdenture-page {
    --od-primary: #1976d2;
    --od-primary-dark: #125ca8;
    --od-primary-light: #eaf4ff;
    --od-secondary: #42a5f5;
    --od-text: #263238;
    --od-muted: #66757f;
    --od-border: #dcecf9;
    --od-bg: #f7fbff;
    --od-white: #ffffff;

    direction: rtl;
    color: var(--od-text);
    overflow: hidden;
}

.overdenture-page * {
    box-sizing: border-box;
}

.overdenture-page p {
    line-height: 2;
}

.overdenture-page .overdenture-section {
    width: min(1150px, calc(100% - 40px));
    margin: 0 auto;
    padding: 85px 0;
}

.overdenture-page .overdenture-light-section {
    width: 100%;
    padding-left: max(20px, calc((100% - 1150px) / 2));
    padding-right: max(20px, calc((100% - 1150px) / 2));
    background: var(--od-bg);
}


/* ================= HERO ================= */

.overdenture-page .overdenture-hero {
    min-height: 590px;
    padding: 90px max(40px, calc((100% - 1150px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(66, 165, 245, 0.18),
            transparent 30%
        ),
        linear-gradient(135deg, #f4faff, #ffffff);
}

.overdenture-page .overdenture-hero-content {
    max-width: 680px;
}

.overdenture-page .overdenture-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px;
    margin-bottom: 22px;
    border-radius: 30px;
    background: var(--od-primary-light);
    color: var(--od-primary);
    font-size: 14px;
    font-weight: 700;
}

.overdenture-page .overdenture-hero h1 {
    margin: 0 0 15px;
    color: var(--od-primary-dark);
    font-size: clamp(45px, 6vw, 70px);
    font-weight: 800;
}

.overdenture-page .overdenture-hero h2 {
    margin: 0 0 22px;
    font-size: clamp(21px, 2.5vw, 29px);
    line-height: 1.8;
}

.overdenture-page .overdenture-hero-content > p {
    margin: 0;
    color: var(--od-muted);
    font-size: 17px;
}

.overdenture-page .overdenture-hero-visual {
    position: relative;
    flex: 0 0 330px;
    display: flex;
    justify-content: center;
}

.overdenture-page .overdenture-hero-circle {
    width: 285px;
    height: 285px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--od-white);
    border: 18px solid var(--od-primary-light);
    box-shadow: 0 25px 65px rgba(25, 118, 210, 0.14);
}

.overdenture-page .overdenture-hero-circle i {
    color: var(--od-primary);
    font-size: 115px;
}

.overdenture-page .overdenture-floating-card {
    position: absolute;
    left: -10px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 18px;
    background: var(--od-white);
    box-shadow: 0 12px 35px rgba(25, 118, 210, 0.13);
}

.overdenture-page .overdenture-floating-card > i {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--od-primary-light);
    color: var(--od-primary);
}

.overdenture-page .overdenture-floating-card div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.overdenture-page .overdenture-floating-card strong {
    font-size: 14px;
}

.overdenture-page .overdenture-floating-card span {
    color: var(--od-muted);
    font-size: 12px;
}


/* ================= TITLES ================= */

.overdenture-page .overdenture-title {
    margin-bottom: 45px;
}

.overdenture-page .overdenture-title.centered {
    text-align: center;
}

.overdenture-page .overdenture-title > span {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--od-primary);
    font-size: 15px;
    font-weight: 800;
}

.overdenture-page .overdenture-title h2 {
    margin: 0;
    font-size: clamp(28px, 3.2vw, 38px);
}

.overdenture-page .overdenture-title p {
    max-width: 700px;
    margin: 12px auto 0;
    color: var(--od-muted);
}


/* ================= INTRO ================= */

.overdenture-page .overdenture-intro-box {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 30px;
    padding: 40px;
    border: 1px solid var(--od-border);
    border-radius: 28px;
    background: var(--od-white);
    box-shadow: 0 12px 40px rgba(25, 118, 210, 0.06);
}

.overdenture-page .overdenture-intro-icon {
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: var(--od-primary-light);
    color: var(--od-primary);
    font-size: 30px;
}

.overdenture-page .overdenture-intro-text p {
    margin: 0 0 14px;
}

.overdenture-page .overdenture-intro-text p:last-child {
    margin-bottom: 0;
}


/* ================= TYPES ================= */

.overdenture-page .overdenture-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.overdenture-page .overdenture-type-card {
    position: relative;
    padding: 38px;
    border: 1px solid var(--od-border);
    border-radius: 28px;
    background: var(--od-white);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.overdenture-page .overdenture-type-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(25, 118, 210, 0.10);
}

.overdenture-page .overdenture-type-card.featured {
    border: 2px solid var(--od-primary);
}

.overdenture-page .overdenture-type-icon {
    width: 65px;
    height: 65px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 19px;
    background: var(--od-primary-light);
    color: var(--od-primary);
    font-size: 27px;
}

.overdenture-page .overdenture-featured-label {
    position: absolute;
    top: 25px;
    left: 25px;
    padding: 6px 12px;
    border-radius: 20px;
    background: var(--od-primary-light);
    color: var(--od-primary);
    font-size: 11px;
    font-weight: 700;
}

.overdenture-page .overdenture-type-card h3 {
    margin: 0 0 15px;
    font-size: 23px;
}

.overdenture-page .overdenture-type-card p {
    margin: 0 0 13px;
    color: var(--od-muted);
}

.overdenture-page .overdenture-type-card p:last-child {
    margin-bottom: 0;
}


/* ================= BENEFITS ================= */

.overdenture-page .overdenture-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
}

.overdenture-page .overdenture-benefit {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 115px;
    padding: 21px;
    border: 1px solid var(--od-border);
    border-radius: 20px;
    background: var(--od-white);
}

.overdenture-page .overdenture-benefit > i {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--od-primary-light);
    color: var(--od-primary);
}

.overdenture-page .overdenture-benefit h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.overdenture-page .overdenture-benefit p {
    margin: 0;
    color: var(--od-muted);
    font-size: 13px;
}

.overdenture-page .overdenture-simple-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    padding: 17px 21px;
    border-radius: 17px;
    background: var(--od-primary-light);
    color: var(--od-primary-dark);
}

.overdenture-page .overdenture-simple-note i {
    flex: 0 0 auto;
}

.overdenture-page .overdenture-simple-note p {
    margin: 0;
}


/* ================= CANDIDATES ================= */

.overdenture-page .overdenture-candidate-wrapper {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 35px;
    align-items: center;
}

.overdenture-page .overdenture-candidate-text p {
    margin: 0 0 15px;
}

.overdenture-page .overdenture-candidate-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
}

.overdenture-page .overdenture-candidate-list > div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    border-radius: 16px;
    background: var(--od-white);
    border: 1px solid var(--od-border);
}

.overdenture-page .overdenture-candidate-list i {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--od-primary-light);
    color: var(--od-primary);
    font-size: 14px;
}

.overdenture-page .overdenture-doctor-note {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    padding: 21px;
    border-radius: 20px;
    background: var(--od-white);
    border-right: 4px solid var(--od-primary);
}

.overdenture-page .overdenture-doctor-note i {
    color: var(--od-primary);
    font-size: 24px;
}

.overdenture-page .overdenture-doctor-note p {
    margin: 0;
}


/* ================= PROCESS ================= */

.overdenture-page .overdenture-process {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.overdenture-page .overdenture-process::before {
    content: "";
    position: absolute;
    top: 25px;
    right: 27px;
    bottom: 25px;
    width: 2px;
    background: var(--od-border);
}

.overdenture-page .overdenture-process-item {
    position: relative;
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 23px;
    margin-bottom: 22px;
}

.overdenture-page .overdenture-process-item:last-child {
    margin-bottom: 0;
}

.overdenture-page .overdenture-process-number {
    position: relative;
    z-index: 2;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: var(--od-primary);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 7px 20px rgba(25, 118, 210, 0.20);
}

.overdenture-page .overdenture-process-item > div:last-child {
    padding: 20px 23px;
    border: 1px solid var(--od-border);
    border-radius: 20px;
    background: var(--od-white);
}

.overdenture-page .overdenture-process-item h3 {
    margin: 0 0 7px;
    font-size: 19px;
}

.overdenture-page .overdenture-process-item p {
    margin: 0;
    color: var(--od-muted);
}


/* ================= CARE ================= */

.overdenture-page .overdenture-care {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.overdenture-page .overdenture-care > div {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 21px;
    border-radius: 19px;
    border: 1px solid var(--od-border);
    background: var(--od-white);
}

.overdenture-page .overdenture-care i {
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--od-primary-light);
    color: var(--od-primary);
}

.overdenture-page .overdenture-care p {
    margin: 0;
}


/* ================= COMFORT ================= */

.overdenture-page .overdenture-comfort {
    display: grid;
    grid-template-columns: 85px 1fr;
    gap: 30px;
    padding: 38px;
    border-radius: 28px;
    background: var(--od-primary-light);
}

.overdenture-page .overdenture-comfort-icon {
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: var(--od-white);
    color: var(--od-primary);
    font-size: 31px;
}

.overdenture-page .overdenture-comfort p {
    margin: 0 0 12px;
}

.overdenture-page .overdenture-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
    padding: 15px 18px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.78);
}

.overdenture-page .overdenture-warning i {
    margin-top: 7px;
    color: #d69522;
}

.overdenture-page .overdenture-warning p {
    margin: 0;
}


/* ================= DIFFERENCE ================= */

.overdenture-page .overdenture-difference {
    display: grid;
    grid-template-columns: 1fr 65px 1fr;
    align-items: stretch;
    gap: 20px;
}

.overdenture-page .overdenture-difference-card {
    padding: 32px;
    border: 1px solid var(--od-border);
    border-radius: 26px;
    background: var(--od-white);
}

.overdenture-page .overdenture-difference-card.overdenture-highlight {
    border: 2px solid var(--od-primary);
    box-shadow: 0 15px 40px rgba(25, 118, 210, 0.09);
}

.overdenture-page .overdenture-difference-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: var(--od-primary-light);
    color: var(--od-primary);
    font-size: 23px;
}

.overdenture-page .overdenture-difference-card h3 {
    margin: 0 0 13px;
    font-size: 21px;
}

.overdenture-page .overdenture-difference-card p {
    margin: 0;
    color: var(--od-muted);
}

.overdenture-page .overdenture-difference-card strong {
    display: block;
    margin-top: 17px;
    color: var(--od-primary);
}

.overdenture-page .overdenture-difference-middle {
    width: 56px;
    height: 56px;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--od-primary);
    color: #fff;
}


/* ================= CHOICE ================= */

.overdenture-page .overdenture-choice {
    display: grid;
    grid-template-columns: 75px 1fr;
    gap: 28px;
    padding: 36px;
    border-radius: 27px;
    border: 1px solid var(--od-border);
    background: var(--od-white);
    box-shadow: 0 10px 35px rgba(25, 118, 210, 0.05);
}

.overdenture-page .overdenture-choice-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 21px;
    background: var(--od-primary-light);
    color: var(--od-primary);
    font-size: 28px;
}

.overdenture-page .overdenture-choice p {
    margin: 0 0 12px;
}

.overdenture-page .overdenture-choice p:last-child {
    margin-bottom: 0;
}


/* ================= FAQ ================= */

.overdenture-page .overdenture-faq {
    max-width: 900px;
    margin: 0 auto;
}

.overdenture-page .overdenture-faq details {
    margin-bottom: 13px;
    border: 1px solid var(--od-border);
    border-radius: 18px;
    background: var(--od-white);
    overflow: hidden;
}

.overdenture-page .overdenture-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
}

.overdenture-page .overdenture-faq summary::-webkit-details-marker {
    display: none;
}

.overdenture-page .overdenture-faq summary i {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--od-primary-light);
    color: var(--od-primary);
    font-size: 11px;
    transition: transform 0.25s ease;
}

.overdenture-page .overdenture-faq details[open] summary i {
    transform: rotate(180deg);
}

.overdenture-page .overdenture-faq details > div {
    padding: 0 22px 20px;
    color: var(--od-muted);
}

.overdenture-page .overdenture-faq details p {
    margin: 0;
}


/* ================= CTA ================= */

.overdenture-page .overdenture-cta {
    width: min(1150px, calc(100% - 40px));
    margin: 0 auto 75px;
    padding: 70px 35px;
    text-align: center;
    border-radius: 35px;
    color: #fff;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 255, 255, 0.18),
            transparent 25%
        ),
        linear-gradient(135deg, #1976d2, #125ca8);
}

.overdenture-page .overdenture-cta-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 29px;
}

.overdenture-page .overdenture-cta h2 {
    margin: 0 0 17px;
    font-size: clamp(28px, 4vw, 40px);
}

.overdenture-page .overdenture-cta p {
    max-width: 730px;
    margin: 0 auto 9px;
    opacity: 0.94;
}

.overdenture-page .overdenture-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    padding: 14px 25px;
    border-radius: 14px;
    background: #fff;
    color: var(--od-primary-dark);
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.overdenture-page .overdenture-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}


/* ================= TABLET ================= */

@media (max-width: 900px) {

    .overdenture-page .overdenture-hero {
        padding: 75px 35px;
        gap: 40px;
    }

    .overdenture-page .overdenture-hero-visual {
        flex-basis: 250px;
    }

    .overdenture-page .overdenture-hero-circle {
        width: 220px;
        height: 220px;
    }

    .overdenture-page .overdenture-hero-circle i {
        font-size: 85px;
    }

    .overdenture-page .overdenture-benefits {
        grid-template-columns: repeat(2, 1fr);
    }

    .overdenture-page .overdenture-candidate-wrapper {
        grid-template-columns: 1fr;
    }
}


/* ================= MOBILE ================= */

@media (max-width: 700px) {

    .overdenture-page .overdenture-section {
        width: calc(100% - 30px);
        padding: 60px 0;
    }

    .overdenture-page .overdenture-light-section {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .overdenture-page .overdenture-hero {
        min-height: auto;
        padding: 60px 22px;
        flex-direction: column-reverse;
        text-align: center;
    }

    .overdenture-page .overdenture-hero-visual {
        flex: none;
    }

    .overdenture-page .overdenture-hero-circle {
        width: 175px;
        height: 175px;
        border-width: 12px;
    }

    .overdenture-page .overdenture-hero-circle i {
        font-size: 68px;
    }

    .overdenture-page .overdenture-floating-card {
        left: -25px;
        bottom: 5px;
        padding: 10px 13px;
    }

    .overdenture-page .overdenture-floating-card > i {
        width: 37px;
        height: 37px;
    }

    .overdenture-page .overdenture-eyebrow {
        font-size: 12px;
    }

    .overdenture-page .overdenture-hero-content > p {
        font-size: 15px;
    }

    .overdenture-page .overdenture-title {
        margin-bottom: 30px;
    }

    .overdenture-page .overdenture-title h2 {
        font-size: 25px;
    }

    .overdenture-page .overdenture-title p {
        font-size: 14px;
    }

    .overdenture-page .overdenture-intro-box {
        grid-template-columns: 1fr;
        padding: 25px;
        gap: 18px;
    }

    .overdenture-page .overdenture-intro-icon {
        width: 58px;
        height: 58px;
        font-size: 23px;
    }

    .overdenture-page .overdenture-types,
    .overdenture-page .overdenture-benefits,
    .overdenture-page .overdenture-care {
        grid-template-columns: 1fr;
    }

    .overdenture-page .overdenture-type-card {
        padding: 27px;
    }

    .overdenture-page .overdenture-featured-label {
        top: 20px;
        left: 20px;
    }

    .overdenture-page .overdenture-candidate-list {
        grid-template-columns: 1fr;
    }

    .overdenture-page .overdenture-process::before {
        right: 21px;
    }

    .overdenture-page .overdenture-process-item {
        grid-template-columns: 44px 1fr;
        gap: 16px;
    }

    .overdenture-page .overdenture-process-number {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 13px;
    }

    .overdenture-page .overdenture-process-item > div:last-child {
        padding: 17px;
    }

    .overdenture-page .overdenture-process-item h3 {
        font-size: 17px;
    }

    .overdenture-page .overdenture-process-item p {
        font-size: 14px;
    }

    .overdenture-page .overdenture-comfort {
        grid-template-columns: 1fr;
        padding: 25px;
        gap: 20px;
    }

    .overdenture-page .overdenture-difference {
        grid-template-columns: 1fr;
    }

    .overdenture-page .overdenture-difference-middle {
        margin: 0 auto;
        transform: rotate(-90deg);
    }

    .overdenture-page .overdenture-choice {
        grid-template-columns: 1fr;
        padding: 25px;
        gap: 20px;
    }

    .overdenture-page .overdenture-faq summary {
        padding: 18px;
        font-size: 14px;
    }

    .overdenture-page .overdenture-faq details > div {
        padding: 0 18px 18px;
        font-size: 14px;
    }

    .overdenture-page .overdenture-cta {
        width: calc(100% - 30px);
        margin-bottom: 50px;
        padding: 55px 22px;
        border-radius: 27px;
    }

    .overdenture-page .overdenture-cta h2 {
        font-size: 27px;
    }

    .overdenture-page .overdenture-cta p {
        font-size: 14px;
    }
}

/* =========================================================
   BLEACHING PAGE
   ========================================================= */

.bleaching-page {
    --bleaching-primary: #1976d2;
    --bleaching-primary-dark: #125ca8;
    --bleaching-primary-light: #eaf4ff;
    --bleaching-secondary: #42a5f5;
    --bleaching-accent: #64b5f6;
    --bleaching-text: #263238;
    --bleaching-muted: #66757f;
    --bleaching-border: #dcecf9;
    --bleaching-bg: #f7fbff;
    --bleaching-white: #ffffff;

    width: 100%;
    overflow: hidden;
    color: var(--bleaching-text);
    direction: rtl;
}

.bleaching-page *,
.bleaching-page *::before,
.bleaching-page *::after {
    box-sizing: border-box;
}

.bleaching-page p {
    line-height: 2;
    margin: 0;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.bleaching-page .bleaching-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.bleaching-page .bleaching-hero {
    position: relative;
    background:
        radial-gradient(circle at 15% 30%, rgba(100, 181, 246, 0.18), transparent 30%),
        linear-gradient(135deg, #f7fbff 0%, #eaf5ff 100%);
    padding: 90px 0 100px;
}

.bleaching-page .bleaching-hero-content {
    width: min(1180px, calc(100% - 40px));
    min-height: 510px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 50px;
}

.bleaching-page .bleaching-hero-text {
    position: relative;
    z-index: 2;
}

.bleaching-page .bleaching-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border-radius: 30px;
    background: var(--bleaching-primary-light);
    color: var(--bleaching-primary);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
}

.bleaching-page .bleaching-hero-text h1 {
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.2;
    margin: 0 0 18px;
    color: var(--bleaching-primary-dark);
    font-weight: 900;
}

.bleaching-page .bleaching-hero-text h2 {
    max-width: 620px;
    font-size: clamp(22px, 2.4vw, 31px);
    line-height: 1.7;
    margin: 0 0 20px;
    font-weight: 800;
}

.bleaching-page .bleaching-hero-text p {
    max-width: 620px;
    color: var(--bleaching-muted);
    font-size: 17px;
    margin-bottom: 30px;
}

.bleaching-page .bleaching-hero-button,
.bleaching-page .bleaching-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    color: var(--bleaching-white);
    background: var(--bleaching-primary);
    border-radius: 14px;
    padding: 13px 23px;
    font-size: 15px;
    font-weight: 700;
    transition: 0.25s ease;
}

.bleaching-page .bleaching-hero-button:hover,
.bleaching-page .bleaching-cta a:hover {
    background: var(--bleaching-primary-dark);
    transform: translateY(-2px);
}

.bleaching-page .bleaching-hero-visual {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bleaching-page .bleaching-glow {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(66, 165, 245, 0.14);
    filter: blur(5px);
}

.bleaching-page .bleaching-tooth {
    position: relative;
    z-index: 2;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bleaching-white);
    border: 10px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 25px 70px rgba(25, 118, 210, 0.16);
}

.bleaching-page .bleaching-tooth i {
    color: var(--bleaching-primary);
    font-size: 125px;
    filter: drop-shadow(0 8px 12px rgba(25, 118, 210, 0.12));
}

.bleaching-page .bleaching-floating-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bleaching-white);
    padding: 13px 17px;
    border-radius: 17px;
    box-shadow: 0 14px 35px rgba(25, 118, 210, 0.13);
    border: 1px solid rgba(220, 236, 249, 0.9);
}

.bleaching-page .bleaching-floating-card i {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bleaching-primary-light);
    color: var(--bleaching-primary);
}

.bleaching-page .bleaching-floating-card strong,
.bleaching-page .bleaching-floating-card span {
    display: block;
}

.bleaching-page .bleaching-floating-card strong {
    font-size: 13px;
    margin-bottom: 3px;
}

.bleaching-page .bleaching-floating-card span {
    color: var(--bleaching-muted);
    font-size: 11px;
}

.bleaching-page .bleaching-card-top {
    top: 65px;
    right: 0;
}

.bleaching-page .bleaching-card-bottom {
    bottom: 55px;
    left: 5px;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.bleaching-page .bleaching-section {
    padding: 90px 0;
    background: var(--bleaching-white);
}

.bleaching-page .bleaching-section-soft {
    background: var(--bleaching-bg);
}

.bleaching-page .bleaching-section-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}

.bleaching-page .bleaching-section-heading > span {
    display: inline-block;
    color: var(--bleaching-primary);
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 9px;
}

.bleaching-page .bleaching-section-heading h2 {
    font-size: clamp(27px, 3vw, 37px);
    margin: 0 0 12px;
    line-height: 1.5;
}

.bleaching-page .bleaching-section-heading p {
    color: var(--bleaching-muted);
    font-size: 15px;
}


/* =========================================================
   INFO BOX
   ========================================================= */

.bleaching-page .bleaching-info-box {
    max-width: 950px;
    margin: 0 auto;
    display: flex;
    gap: 25px;
    padding: 35px;
    background: var(--bleaching-white);
    border: 1px solid var(--bleaching-border);
    border-radius: 25px;
    box-shadow: 0 15px 45px rgba(25, 118, 210, 0.07);
}

.bleaching-page .bleaching-info-icon {
    width: 65px;
    height: 65px;
    flex: 0 0 65px;
    border-radius: 19px;
    background: var(--bleaching-primary-light);
    color: var(--bleaching-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.bleaching-page .bleaching-info-box p + p {
    margin-top: 12px;
}


/* =========================================================
   CAUSES
   ========================================================= */

.bleaching-page .bleaching-causes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.bleaching-page .bleaching-cause-card {
    padding: 27px;
    background: var(--bleaching-white);
    border: 1px solid var(--bleaching-border);
    border-radius: 21px;
    transition: 0.25s ease;
}

.bleaching-page .bleaching-cause-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(25, 118, 210, 0.09);
}

.bleaching-page .bleaching-cause-card > i {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--bleaching-primary-light);
    color: var(--bleaching-primary);
    font-size: 19px;
    margin-bottom: 18px;
}

.bleaching-page .bleaching-cause-card h3 {
    font-size: 18px;
    margin: 0 0 8px;
}

.bleaching-page .bleaching-cause-card p {
    color: var(--bleaching-muted);
    font-size: 14px;
}

.bleaching-page .bleaching-note {
    margin: 28px auto 0;
    max-width: 950px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 20px;
    border-radius: 15px;
    background: var(--bleaching-primary-light);
    color: var(--bleaching-primary-dark);
}

.bleaching-page .bleaching-note > i {
    flex: 0 0 auto;
}

.bleaching-page .bleaching-note p {
    font-size: 14px;
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */

.bleaching-page .bleaching-process-intro {
    max-width: 950px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.bleaching-page .bleaching-process-icon {
    width: 65px;
    height: 65px;
    flex: 0 0 65px;
    border-radius: 18px;
    background: var(--bleaching-primary);
    color: var(--bleaching-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.bleaching-page .bleaching-working-box {
    max-width: 950px;
    margin: 25px auto 0;
    padding: 23px 27px;
    display: flex;
    gap: 15px;
    border-radius: 19px;
    background: #f2f8fd;
    border-right: 4px solid var(--bleaching-primary);
}

.bleaching-page .bleaching-working-box > i {
    color: var(--bleaching-primary);
    margin-top: 7px;
}


/* =========================================================
   METHODS
   ========================================================= */

.bleaching-page .bleaching-methods-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.bleaching-page .bleaching-method-card {
    background: var(--bleaching-white);
    border: 1px solid var(--bleaching-border);
    border-radius: 25px;
    padding: 30px;
    display: flex;
    gap: 22px;
    box-shadow: 0 12px 35px rgba(25, 118, 210, 0.055);
}

.bleaching-page .bleaching-method-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bleaching-primary-light);
    color: var(--bleaching-primary);
    font-size: 23px;
}

.bleaching-page .bleaching-method-content > span {
    color: var(--bleaching-primary);
    font-size: 12px;
    font-weight: 800;
}

.bleaching-page .bleaching-method-content h3 {
    margin: 5px 0 12px;
    font-size: 21px;
}

.bleaching-page .bleaching-method-content p {
    color: var(--bleaching-muted);
    font-size: 14px;
}

.bleaching-page .bleaching-method-content p + p {
    margin-top: 10px;
}

.bleaching-page .bleaching-method-tip {
    margin-top: 18px;
    padding: 13px 15px;
    border-radius: 13px;
    display: flex;
    gap: 10px;
    background: var(--bleaching-primary-light);
}

.bleaching-page .bleaching-method-tip i {
    color: var(--bleaching-primary);
    margin-top: 5px;
}

.bleaching-page .bleaching-method-tip p {
    font-size: 13px;
    color: var(--bleaching-primary-dark);
}


/* =========================================================
   BENEFITS
   ========================================================= */

.bleaching-page .bleaching-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.bleaching-page .bleaching-benefit {
    padding: 27px;
    border: 1px solid var(--bleaching-border);
    border-radius: 21px;
    background: var(--bleaching-white);
}

.bleaching-page .bleaching-benefit i {
    color: var(--bleaching-primary);
    font-size: 25px;
    margin-bottom: 16px;
}

.bleaching-page .bleaching-benefit h3 {
    font-size: 17px;
    margin: 0 0 7px;
}

.bleaching-page .bleaching-benefit p {
    color: var(--bleaching-muted);
    font-size: 13px;
}


/* =========================================================
   SUITABILITY
   ========================================================= */

.bleaching-page .bleaching-suitability {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: 55px;
    align-items: center;
}

.bleaching-page .bleaching-suitability-text > span,
.bleaching-page .bleaching-toothpaste > div > span,
.bleaching-page .bleaching-comfort > div > span {
    color: var(--bleaching-primary);
    font-size: 14px;
    font-weight: 800;
}

.bleaching-page .bleaching-suitability-text h2,
.bleaching-page .bleaching-toothpaste h2,
.bleaching-page .bleaching-comfort h2 {
    font-size: 30px;
    line-height: 1.5;
    margin: 8px 0 18px;
}

.bleaching-page .bleaching-suitability-text p {
    color: var(--bleaching-muted);
    font-size: 15px;
}

.bleaching-page .bleaching-suitability-text p + p {
    margin-top: 12px;
}

.bleaching-page .bleaching-check-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.bleaching-page .bleaching-check-list div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border-radius: 14px;
    background: var(--bleaching-white);
    border: 1px solid var(--bleaching-border);
    font-size: 13px;
}

.bleaching-page .bleaching-check-list i {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bleaching-primary-light);
    color: var(--bleaching-primary);
    font-size: 11px;
}

.bleaching-page .bleaching-warning {
    margin-top: 30px;
    display: flex;
    gap: 13px;
    padding: 19px 22px;
    border-radius: 17px;
    background: #fff9e9;
    border: 1px solid #f3e3ad;
}

.bleaching-page .bleaching-warning > i {
    color: #d39b00;
    margin-top: 7px;
}

.bleaching-page .bleaching-warning p {
    font-size: 14px;
}


/* =========================================================
   STEPS
   ========================================================= */

.bleaching-page .bleaching-steps {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.bleaching-page .bleaching-steps::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 30px;
    right: 29px;
    width: 2px;
    background: var(--bleaching-border);
}

.bleaching-page .bleaching-step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 23px;
    margin-bottom: 30px;
}

.bleaching-page .bleaching-step:last-child {
    margin-bottom: 0;
}

.bleaching-page .bleaching-step-number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bleaching-primary);
    color: var(--bleaching-white);
    font-size: 14px;
    font-weight: 800;
    border: 5px solid var(--bleaching-white);
    box-shadow: 0 5px 15px rgba(25, 118, 210, 0.16);
}

.bleaching-page .bleaching-step h3 {
    font-size: 19px;
    margin: 4px 0 7px;
}

.bleaching-page .bleaching-step p {
    color: var(--bleaching-muted);
    font-size: 14px;
}


/* =========================================================
   COMFORT
   ========================================================= */

.bleaching-page .bleaching-comfort {
    max-width: 950px;
    margin: 0 auto;
    padding: 35px;
    border-radius: 25px;
    background: var(--bleaching-white);
    border: 1px solid var(--bleaching-border);
    display: flex;
    gap: 25px;
}

.bleaching-page .bleaching-comfort-icon {
    width: 65px;
    height: 65px;
    flex: 0 0 65px;
    border-radius: 19px;
    background: var(--bleaching-primary-light);
    color: var(--bleaching-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
}

.bleaching-page .bleaching-comfort p {
    color: var(--bleaching-muted);
    font-size: 14px;
}

.bleaching-page .bleaching-comfort p + p {
    margin-top: 11px;
}


/* =========================================================
   LONGEVITY
   ========================================================= */

.bleaching-page .bleaching-longevity {
    max-width: 950px;
    margin: 0 auto;
}

.bleaching-page .bleaching-longevity-main {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 27px;
    border-radius: 21px;
    background: var(--bleaching-primary-light);
    color: var(--bleaching-primary-dark);
}

.bleaching-page .bleaching-longevity-main > i {
    font-size: 29px;
}

.bleaching-page .bleaching-longevity-main p {
    font-size: 16px;
    font-weight: 700;
}

.bleaching-page .bleaching-longevity-factors {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 13px;
    margin-top: 17px;
}

.bleaching-page .bleaching-longevity-factors div {
    text-align: center;
    padding: 19px 10px;
    border-radius: 15px;
    border: 1px solid var(--bleaching-border);
    background: var(--bleaching-white);
}

.bleaching-page .bleaching-longevity-factors i {
    display: block;
    color: var(--bleaching-primary);
    font-size: 20px;
    margin-bottom: 8px;
}

.bleaching-page .bleaching-longevity-factors span {
    display: block;
    font-size: 11px;
}

.bleaching-page .bleaching-bottom-text {
    max-width: 950px;
    margin: 22px auto 0;
    color: var(--bleaching-muted);
    text-align: center;
    font-size: 14px;
}


/* =========================================================
   AFTERCARE
   ========================================================= */

.bleaching-page .bleaching-aftercare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
}

.bleaching-page .bleaching-aftercare-grid > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 20px;
    background: var(--bleaching-white);
    border: 1px solid var(--bleaching-border);
    border-radius: 17px;
}

.bleaching-page .bleaching-aftercare-grid i {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--bleaching-primary-light);
    color: var(--bleaching-primary);
}

.bleaching-page .bleaching-aftercare-grid p {
    font-size: 13px;
}


/* =========================================================
   TOOTHPASTE
   ========================================================= */

.bleaching-page .bleaching-toothpaste {
    max-width: 950px;
    margin: 0 auto;
    display: flex;
    gap: 25px;
    padding: 38px;
    border-radius: 25px;
    border: 1px solid var(--bleaching-border);
    background: var(--bleaching-white);
}

.bleaching-page .bleaching-toothpaste-icon {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    border-radius: 20px;
    background: var(--bleaching-primary);
    color: var(--bleaching-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
}

.bleaching-page .bleaching-toothpaste p {
    color: var(--bleaching-muted);
    font-size: 14px;
}

.bleaching-page .bleaching-toothpaste p + p {
    margin-top: 11px;
}


/* =========================================================
   FAQ
   ========================================================= */

.bleaching-page .bleaching-faq {
    max-width: 900px;
    margin: 0 auto;
}

.bleaching-page .bleaching-faq details {
    background: var(--bleaching-white);
    border: 1px solid var(--bleaching-border);
    border-radius: 17px;
    margin-bottom: 13px;
    overflow: hidden;
}

.bleaching-page .bleaching-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 15px;
    font-weight: 700;
}

.bleaching-page .bleaching-faq summary::-webkit-details-marker {
    display: none;
}

.bleaching-page .bleaching-faq summary i {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bleaching-primary-light);
    color: var(--bleaching-primary);
    font-size: 11px;
    transition: transform 0.25s ease;
}

.bleaching-page .bleaching-faq details[open] summary i {
    transform: rotate(180deg);
}

.bleaching-page .bleaching-faq details p {
    padding: 0 23px 21px;
    color: var(--bleaching-muted);
    font-size: 14px;
}


/* =========================================================
   CTA
   ========================================================= */

.bleaching-page .bleaching-cta {
    padding: 55px 20px;
    background:
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.12), transparent 25%),
        linear-gradient(135deg, var(--bleaching-primary-dark), var(--bleaching-primary));
    color: var(--bleaching-white);
        width: 90%;
    max-width: 1100px;
    margin: 70px auto 0;
    border-radius: 28px;
    margin-bottom: 100px;
    margin-top: 30px;
}

.bleaching-page .bleaching-cta-content {
    width: min(950px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 25px;
}

.bleaching-page .bleaching-cta-icon {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.13);
    font-size: 27px;
}

.bleaching-page .bleaching-cta h2 {
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.5;
    margin: 0 0 15px;
}

.bleaching-page .bleaching-cta p {
    max-width: 800px;
    font-size: 14px;
    opacity: 0.9;
}

.bleaching-page .bleaching-cta h3 {
    font-size: 15px;
    line-height: 1.9;
    margin: 17px 0 23px;
}

.bleaching-page .bleaching-cta a {
    background: var(--bleaching-white);
    color: var(--bleaching-primary-dark);
}

.bleaching-page .bleaching-cta a:hover {
    background: #f2f8fd;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .bleaching-page .bleaching-hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 15px;
    }

    .bleaching-page .bleaching-hero-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .bleaching-page .bleaching-hero-visual {
        min-height: 390px;
    }

    .bleaching-page .bleaching-causes-grid,
    .bleaching-page .bleaching-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bleaching-page .bleaching-methods-grid {
        grid-template-columns: 1fr;
    }

    .bleaching-page .bleaching-suitability {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .bleaching-page .bleaching-aftercare-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bleaching-page .bleaching-longevity-factors {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (max-width: 700px) {

    .bleaching-page .bleaching-container {
        width: min(100% - 28px, 1180px);
    }

    .bleaching-page .bleaching-section {
        padding: 65px 0;
    }

    .bleaching-page .bleaching-hero {
        padding: 60px 0 70px;
    }

    .bleaching-page .bleaching-hero-content {
        width: min(100% - 28px, 1180px);
    }

    .bleaching-page .bleaching-hero-text h1 {
        font-size: 43px;
    }

    .bleaching-page .bleaching-hero-text h2 {
        font-size: 21px;
    }

    .bleaching-page .bleaching-hero-text p {
        font-size: 14px;
    }

    .bleaching-page .bleaching-hero-visual {
        min-height: 330px;
    }

    .bleaching-page .bleaching-glow {
        width: 260px;
        height: 260px;
    }

    .bleaching-page .bleaching-tooth {
        width: 205px;
        height: 205px;
    }

    .bleaching-page .bleaching-tooth i {
        font-size: 92px;
    }

    .bleaching-page .bleaching-floating-card {
        padding: 10px 12px;
    }

    .bleaching-page .bleaching-floating-card i {
        width: 35px;
        height: 35px;
    }

    .bleaching-page .bleaching-card-top {
        top: 25px;
        right: -2px;
    }

    .bleaching-page .bleaching-card-bottom {
        bottom: 15px;
        left: -2px;
    }

    .bleaching-page .bleaching-floating-card strong {
        font-size: 11px;
    }

    .bleaching-page .bleaching-floating-card span {
        font-size: 9px;
    }

    .bleaching-page .bleaching-causes-grid,
    .bleaching-page .bleaching-benefits-grid,
    .bleaching-page .bleaching-aftercare-grid {
        grid-template-columns: 1fr;
    }

    .bleaching-page .bleaching-info-box,
    .bleaching-page .bleaching-method-card,
    .bleaching-page .bleaching-comfort,
    .bleaching-page .bleaching-toothpaste {
        padding: 23px;
        flex-direction: column;
    }

    .bleaching-page .bleaching-info-icon,
    .bleaching-page .bleaching-process-icon,
    .bleaching-page .bleaching-comfort-icon,
    .bleaching-page .bleaching-toothpaste-icon {
        width: 55px;
        height: 55px;
        flex-basis: 55px;
    }

    .bleaching-page .bleaching-process-intro {
        gap: 15px;
    }

    .bleaching-page .bleaching-check-list {
        grid-template-columns: 1fr;
    }

    .bleaching-page .bleaching-steps::before {
        right: 25px;
    }

    .bleaching-page .bleaching-step {
        grid-template-columns: 52px 1fr;
        gap: 15px;
    }

    .bleaching-page .bleaching-step-number {
        width: 52px;
        height: 52px;
        font-size: 12px;
    }

    .bleaching-page .bleaching-longevity-factors {
        grid-template-columns: repeat(2, 1fr);
    }

    .bleaching-page .bleaching-section-heading {
        margin-bottom: 35px;
    }

    .bleaching-page .bleaching-section-heading h2 {
        font-size: 27px;
    }

    .bleaching-page .bleaching-cta {
        padding: 60px 20px;
    }

    .bleaching-page .bleaching-cta-content {
        flex-direction: column;
    }
}


@media (max-width: 450px) {

    .bleaching-page .bleaching-hero-text h1 {
        font-size: 38px;
    }

    .bleaching-page .bleaching-hero-text h2 {
        font-size: 19px;
    }

    .bleaching-page .bleaching-hero-visual {
        min-height: 300px;
    }

    .bleaching-page .bleaching-tooth {
        width: 180px;
        height: 180px;
    }

    .bleaching-page .bleaching-tooth i {
        font-size: 80px;
    }

    .bleaching-page .bleaching-floating-card {
        transform: scale(0.9);
    }

    .bleaching-page .bleaching-card-top {
        right: -10px;
    }

    .bleaching-page .bleaching-card-bottom {
        left: -10px;
    }

    .bleaching-page .bleaching-note,
    .bleaching-page .bleaching-warning {
        align-items: flex-start;
    }

    .bleaching-page .bleaching-longevity-factors {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================
   SURGERY PAGE
========================================= */

.surgery-page {

    --surgery-primary: #1976d2;
    --surgery-primary-dark: #1156a3;
    --surgery-primary-light: #eaf4ff;
    --surgery-primary-soft: #f5f9ff;
    --surgery-text: #183b63;

    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;

    padding: 55px 0 80px;
}


/* =========================================
   GENERAL
========================================= */

.surgery-page p {

    color: #566273;

    font-size: 16px;

    line-height: 2.15;
}


.surgery-section {

    margin-top: 100px;
}


.surgery-section-heading {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 35px;
}


.surgery-heading-icon {

    width: 54px;
    height: 54px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: var(--surgery-primary);

    background: var(--surgery-primary-light);

    box-shadow: 0 8px 22px rgba(25, 118, 210, 0.12);
}


.surgery-heading-icon i {

    font-size: 21px;
}


.surgery-section-heading small {

    display: block;

    margin-bottom: 7px;

    color: var(--surgery-primary);

    font-size: 14px;

    font-weight: 700;
}


.surgery-section-heading h2 {

    margin: 0;

    color: var(--surgery-text);

    font-size: 31px;

    font-weight: 800;
}


/* =========================================
   HERO
========================================= */

.surgery-hero {

    position: relative;

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    gap: 65px;

    align-items: center;

    min-height: 500px;

    overflow: hidden;

    padding: 45px;

    border-radius: 35px;

    background:
        linear-gradient(
            135deg,
            #eaf4ff 0%,
            #f7fbff 55%,
            #ffffff 100%
        );

    border: 1px solid rgba(25, 118, 210, 0.10);

    box-shadow: 0 18px 50px rgba(25, 118, 210, 0.09);
}


.surgery-hero::before {

    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    left: -140px;
    top: -150px;

    border-radius: 50%;

    background: rgba(25, 118, 210, 0.07);
}


.surgery-hero-content {

    position: relative;

    z-index: 1;
}


.surgery-hero-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 17px;

    margin-bottom: 18px;

    border-radius: 30px;

    color: var(--surgery-primary-dark);

    background: rgba(25, 118, 210, 0.10);

    font-size: 13px;

    font-weight: 700;
}


.surgery-hero h1 {

    margin: 0 0 10px;

    color: var(--surgery-text);

    font-size: clamp(36px, 5vw, 56px);

    font-weight: 900;
}


.surgery-hero h2 {

    margin: 0 0 25px;

    color: var(--surgery-primary-dark);

    font-size: clamp(18px, 2vw, 24px);

    font-weight: 500;
}


.surgery-hero-content p {

    margin: 0 0 16px;
}


.surgery-hero-image {

    position: relative;

    z-index: 1;

    height: 410px;
}


.surgery-image-placeholder {

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 16px;

    border-radius: 28px;

    color: rgba(17, 86, 163, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(25, 118, 210, 0.12),
            rgba(25, 118, 210, 0.025)
        );

    border: 1px dashed rgba(25, 118, 210, 0.28);
}


.surgery-image-placeholder i {

    font-size: 65px;
}


.surgery-image-placeholder span {

    font-size: 14px;
}


/* =========================================
   INTRO
========================================= */

.surgery-intro-box {

    max-width: 950px;

    padding: 35px 40px;

    border-radius: 28px;

    background: var(--surgery-primary-soft);

    border: 1px solid rgba(25, 118, 210, 0.08);
}


.surgery-intro-box p {

    margin: 0 0 17px;
}


.surgery-intro-box p:last-child {

    margin-bottom: 0;
}


/* =========================================
   FEATURES
========================================= */

.surgery-feature-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}


.surgery-feature-card {

    min-height: 220px;

    padding: 28px;

    border-radius: 24px;

    background: #ffffff;

    border: 1px solid rgba(25, 118, 210, 0.09);

    box-shadow: 0 10px 35px rgba(25, 118, 210, 0.055);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.surgery-feature-card:hover {

    transform: translateY(-7px);

    box-shadow: 0 18px 40px rgba(25, 118, 210, 0.13);
}


.surgery-feature-icon {

    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 16px;

    color: var(--surgery-primary);

    background: var(--surgery-primary-light);
}


.surgery-feature-icon i {

    font-size: 21px;
}


.surgery-feature-card span {

    color: var(--surgery-primary);

    font-size: 12px;

    font-weight: 700;
}


.surgery-feature-card h3 {

    margin: 7px 0 10px;

    color: var(--surgery-text);

    font-size: 18px;
}


.surgery-feature-card p {

    margin: 0;

    font-size: 14px;

    line-height: 1.9;
}


.surgery-note {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 25px;

    padding: 18px 22px;

    border-radius: 18px;

    color: var(--surgery-primary-dark);

    background: var(--surgery-primary-light);
}


.surgery-note i {

    margin-top: 6px;

    flex-shrink: 0;
}


.surgery-note p {

    margin: 0;

    color: var(--surgery-primary-dark);

    font-weight: 600;
}


/* =========================================
   TREATMENT LIST
========================================= */

.surgery-treatment-list {

    display: grid;

    gap: 20px;
}


.surgery-treatment-item {

    display: grid;

    grid-template-columns: 70px 1fr;

    gap: 25px;

    padding: 30px;

    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            #f5f9ff,
            #ffffff
        );

    border: 1px solid rgba(25, 118, 210, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.surgery-treatment-item:hover {

    transform: translateY(-4px);

    box-shadow: 0 15px 35px rgba(25, 118, 210, 0.09);
}


.surgery-treatment-icon {

    width: 62px;
    height: 62px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 18px;

    color: white;

    background: var(--surgery-primary);

    box-shadow: 0 10px 25px rgba(25, 118, 210, 0.18);
}


.surgery-treatment-icon i {

    font-size: 23px;
}


.surgery-treatment-item span {

    display: inline-block;

    margin-bottom: 7px;

    color: var(--surgery-primary);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;
}


.surgery-treatment-item h3 {

    margin: 0 0 13px;

    color: var(--surgery-text);

    font-size: 22px;
}


.surgery-treatment-item p {

    margin: 0 0 10px;
}


.surgery-treatment-item p:last-child {

    margin-bottom: 0;
}


/* =========================================
   JAW SECTION
========================================= */

.surgery-jaw-section {

    position: relative;

    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 50px;

    align-items: center;

    margin-top: 100px;

    padding: 55px;

    overflow: hidden;

    border-radius: 35px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #1156a3,
            #1976d2
        );

    box-shadow: 0 20px 50px rgba(17, 86, 163, 0.20);
}


.surgery-jaw-section::before {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    left: -120px;
    bottom: -180px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.07);
}


.surgery-jaw-content {

    position: relative;

    z-index: 1;
}


.surgery-jaw-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 15px;

    margin-bottom: 15px;

    border-radius: 30px;

    background: rgba(255, 255, 255, 0.13);

    font-size: 13px;
}


.surgery-jaw-content h2 {

    margin: 0 0 25px;

    color: white;

    font-size: 32px;
}


.surgery-jaw-content p {

    margin: 0 0 15px;

    color: rgba(255, 255, 255, 0.86);
}


.surgery-jaw-visual {

    position: relative;

    z-index: 1;

    display: flex;

    justify-content: center;

    align-items: center;
}


.surgery-jaw-circle {

    width: 210px;
    height: 210px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: white;

    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.20);

    box-shadow:
        0 0 0 25px rgba(255, 255, 255, 0.04),
        0 0 0 50px rgba(255, 255, 255, 0.025);
}


.surgery-jaw-circle i {

    font-size: 75px;
}


/* =========================================
   PROBLEMS
========================================= */

.surgery-problems-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}


.surgery-problems-grid > div {

    display: flex;

    align-items: center;

    gap: 15px;

    min-height: 100px;

    padding: 20px;

    border-radius: 20px;

    background: var(--surgery-primary-soft);

    border: 1px solid rgba(25, 118, 210, 0.07);

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.surgery-problems-grid > div:hover {

    transform: translateY(-4px);

    background: var(--surgery-primary-light);
}


.surgery-problems-grid i {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: var(--surgery-primary);

    background: white;
}


.surgery-problems-grid span {

    color: var(--surgery-text);

    font-size: 15px;

    font-weight: 600;

    line-height: 1.8;
}


/* =========================================
   CORRECTIVE SURGERY
========================================= */

.surgery-correction-box {

    display: grid;

    grid-template-columns: 90px 1fr;

    gap: 30px;

    padding: 45px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #edf6ff,
            #f8fbff
        );

    border: 1px solid rgba(25, 118, 210, 0.10);
}


.surgery-correction-icon {

    width: 78px;
    height: 78px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 22px;

    color: white;

    background: var(--surgery-primary);

    box-shadow: 0 12px 25px rgba(25, 118, 210, 0.20);
}


.surgery-correction-icon i {

    font-size: 28px;
}


.surgery-correction-box > div:last-child > span {

    color: var(--surgery-primary);

    font-size: 13px;

    font-weight: 700;
}


.surgery-correction-box h2 {

    margin: 8px 0 18px;

    color: var(--surgery-text);

    font-size: 29px;
}


.surgery-correction-box p {

    margin: 0 0 13px;
}


.surgery-correction-box p:last-child {

    margin-bottom: 0;
}


/* =========================================
   PROCESS
========================================= */

.surgery-process-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}


.surgery-process-item {

    padding: 28px 23px;

    text-align: center;

    border-radius: 25px;

    background: #ffffff;

    border: 1px solid rgba(25, 118, 210, 0.08);

    box-shadow: 0 8px 30px rgba(25, 118, 210, 0.05);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.surgery-process-item:hover {

    transform: translateY(-7px);

    box-shadow: 0 18px 35px rgba(25, 118, 210, 0.11);
}


.surgery-process-icon {

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 18px;

    border-radius: 18px;

    color: var(--surgery-primary);

    background: var(--surgery-primary-light);
}


.surgery-process-icon i {

    font-size: 23px;
}


.surgery-process-item h3 {

    margin: 0 0 12px;

    color: var(--surgery-text);

    font-size: 18px;
}


.surgery-process-item p {

    margin: 0;

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================
   CARE
========================================= */

.surgery-care-box {

    display: grid;

    grid-template-columns: 80px 1fr;

    gap: 30px;

    padding: 40px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #f2f8ff,
            #ffffff
        );

    border: 1px solid rgba(25, 118, 210, 0.08);
}


.surgery-care-icon {

    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    color: white;

    background: var(--surgery-primary);

    box-shadow: 0 10px 25px rgba(25, 118, 210, 0.18);
}


.surgery-care-icon i {

    font-size: 27px;
}


.surgery-care-box > div:last-child > p {

    margin-top: 0;
}


.surgery-care-list {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 13px;

    margin-top: 25px;
}


.surgery-care-list > div {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 14px 16px;

    border-radius: 15px;

    color: #465569;

    background: white;

    font-size: 14px;

    line-height: 1.8;
}


.surgery-care-list i {

    margin-top: 5px;

    color: var(--surgery-primary);

    font-size: 13px;
}


/* =========================================
   INFORMATION
========================================= */

.surgery-info-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;
}


.surgery-info-card {

    display: grid;

    grid-template-columns: 65px 1fr;

    gap: 22px;

    padding: 35px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #f3f8ff,
            #ffffff
        );

    border: 1px solid rgba(25, 118, 210, 0.08);
}


.surgery-info-icon {

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: white;

    background: var(--surgery-primary);

    box-shadow: 0 8px 20px rgba(25, 118, 210, 0.18);
}


.surgery-info-icon i {

    font-size: 22px;
}


.surgery-info-card span {

    color: var(--surgery-primary);

    font-size: 13px;

    font-weight: 700;
}


.surgery-info-card h2 {

    margin: 8px 0 15px;

    color: var(--surgery-text);

    font-size: 23px;
}


.surgery-info-card p {

    margin: 0 0 12px;

    font-size: 15px;
}


.surgery-info-card p:last-child {

    margin-bottom: 0;
}


/* =========================================
   FAQ
========================================= */

.surgery-faq-list {

    max-width: 950px;

    margin: 0 auto;
}


.surgery-faq-item {

    margin-bottom: 14px;

    overflow: hidden;

    border-radius: 18px;

    background: #f4f8ff;

    border: 1px solid rgba(25, 118, 210, 0.08);

    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}


.surgery-faq-item:hover {

    border-color: rgba(25, 118, 210, 0.20);
}


.surgery-faq-item[open] {

    background: #eaf4ff;
}


.surgery-faq-item summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 23px 27px;

    cursor: pointer;

    list-style: none;

    color: var(--surgery-text);

    font-size: 17px;

    font-weight: 700;
}


.surgery-faq-item summary::-webkit-details-marker {

    display: none;
}


.surgery-faq-item summary i {

    flex-shrink: 0;

    color: var(--surgery-primary);

    transition: transform 0.3s ease;
}


.surgery-faq-item[open] summary i {

    transform: rotate(180deg);
}


.surgery-faq-answer {

    padding: 0 27px 25px;
}


.surgery-faq-answer p {

    margin: 0;

    font-size: 15px;
}


/* =========================================
   CTA
========================================= */

.surgery-cta {

    display: grid;

    grid-template-columns: 75px 1fr auto;

    align-items: center;

    gap: 25px;

    width: 92%;

    max-width: 1080px;

    margin: 100px auto 0;

    padding: 40px 45px;

    border-radius: 30px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #1976d2,
            #1156a3
        );

    box-shadow: 0 20px 45px rgba(25, 118, 210, 0.20);
}


.surgery-cta-icon {

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.15);
}


.surgery-cta-icon i {

    font-size: 25px;
}


.surgery-cta-content > span {

    color: rgba(255, 255, 255, 0.72);

    font-size: 13px;
}


.surgery-cta-content h2 {

    margin: 7px 0 10px;

    color: white;

    font-size: 25px;
}


.surgery-cta-content p {

    margin: 0;

    color: rgba(255, 255, 255, 0.84);

    font-size: 14px;
}


.surgery-cta-button {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 22px;

    border-radius: 14px;

    color: var(--surgery-primary-dark);

    background: white;

    text-decoration: none;

    font-weight: 700;

    white-space: nowrap;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.surgery-cta-button:hover {

    transform: translateY(-3px);

    background: #edf6ff;
}


.surgery-cta-button i {

    transition: transform 0.25s ease;
}


.surgery-cta-button:hover i {

    transform: translateX(-4px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .surgery-hero {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .surgery-hero-image {

        height: 330px;
    }


    .surgery-feature-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    .surgery-jaw-section {

        grid-template-columns: 1fr;
    }


    .surgery-jaw-visual {

        display: none;
    }


    .surgery-process-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    .surgery-problems-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    .surgery-info-grid {

        grid-template-columns: 1fr;
    }


    .surgery-cta {

        grid-template-columns: 65px 1fr;
    }


    .surgery-cta-button {

        grid-column: 2;

        justify-self: start;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .surgery-page {

        width: min(100% - 25px, 600px);

        padding-top: 30px;
    }


    .surgery-section {

        margin-top: 70px;
    }


    .surgery-hero {

        padding: 28px 22px;

        border-radius: 25px;
    }


    .surgery-hero h1 {

        font-size: 37px;
    }


    .surgery-hero h2 {

        font-size: 18px;
    }


    .surgery-hero-image {

        height: 280px;
    }


    .surgery-section-heading {

        margin-bottom: 25px;
    }


    .surgery-heading-icon {

        width: 47px;
        height: 47px;

        border-radius: 14px;
    }


    .surgery-section-heading h2 {

        font-size: 25px;
    }


    .surgery-intro-box {

        padding: 27px 23px;
    }


    .surgery-feature-grid {

        grid-template-columns: 1fr;
    }


    .surgery-treatment-item {

        grid-template-columns: 1fr;

        padding: 25px 22px;

        gap: 18px;
    }


    .surgery-jaw-section {

        margin-top: 70px;

        padding: 35px 25px;

        border-radius: 28px;
    }


    .surgery-jaw-content h2 {

        font-size: 27px;
    }


    .surgery-problems-grid {

        grid-template-columns: 1fr;
    }


    .surgery-correction-box {

        grid-template-columns: 1fr;

        padding: 30px 23px;
    }


    .surgery-process-grid {

        grid-template-columns: 1fr;
    }


    .surgery-care-box {

        grid-template-columns: 1fr;

        padding: 28px 23px;

        gap: 20px;
    }


    .surgery-care-list {

        grid-template-columns: 1fr;
    }


    .surgery-info-card {

        grid-template-columns: 1fr;

        padding: 28px 23px;
    }


    .surgery-faq-item summary {

        padding: 20px;

        font-size: 15px;
    }


    .surgery-faq-answer {

        padding: 0 20px 22px;
    }


    .surgery-cta {

        grid-template-columns: 1fr;

        width: 100%;

        margin-top: 70px;

        padding: 30px 23px;
    }


    .surgery-cta-button {

        grid-column: auto;

        justify-self: stretch;
    }


    .surgery-cta-content h2 {

        font-size: 22px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 450px) {

    .surgery-page {

        width: calc(100% - 18px);
    }


    .surgery-hero {

        padding: 25px 18px;
    }


    .surgery-hero h1 {

        font-size: 31px;
    }


    .surgery-hero-image {

        height: 230px;
    }


    .surgery-section-heading {

        gap: 12px;
    }


    .surgery-section-heading h2 {

        font-size: 22px;
    }


    .surgery-section-heading small {

        font-size: 12px;
    }


    .surgery-heading-icon {

        width: 43px;
        height: 43px;
    }


    .surgery-heading-icon i {

        font-size: 18px;
    }


    .surgery-treatment-item h3 {

        font-size: 19px;
    }

}

/* =========================================================
   PEDIATRIC PAGE
========================================================= */

.pediatric-page {

    --pediatric-primary: #1976d2;
    --pediatric-primary-dark: #125ca8;
    --pediatric-primary-light: #eaf5ff;
    --pediatric-secondary: #42a5f5;
    --pediatric-accent: #64b5f6;

    --pediatric-text: #21405f;
    --pediatric-muted: #667789;

    --pediatric-bg: #f7fbff;
    --pediatric-white: #ffffff;

    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;

    padding: 55px 0 80px;
}


.pediatric-page p {

    color: var(--pediatric-muted);

    font-size: 16px;

    line-height: 2.15;
}


/* =========================================================
   SECTION
========================================================= */

.pediatric-section {

    margin-top: 95px;
}


.pediatric-section-heading {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 35px;
}


.pediatric-heading-icon {

    width: 55px;
    height: 55px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: var(--pediatric-primary);

    background: var(--pediatric-primary-light);

    box-shadow: 0 8px 22px rgba(25, 118, 210, 0.10);
}


.pediatric-heading-icon i {

    font-size: 21px;
}


.pediatric-section-heading small {

    display: block;

    margin-bottom: 6px;

    color: var(--pediatric-primary);

    font-size: 13px;

    font-weight: 700;
}


.pediatric-section-heading h2 {

    margin: 0;

    color: var(--pediatric-text);

    font-size: 30px;

    font-weight: 800;
}


/* =========================================================
   HERO
========================================================= */

.pediatric-hero {

    position: relative;

    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    align-items: center;

    gap: 60px;

    min-height: 510px;

    padding: 55px;

    overflow: hidden;

    border-radius: 38px;

    background:
        linear-gradient(
            135deg,
            #eaf5ff 0%,
            #f7fbff 55%,
            #ffffff 100%
        );

    border: 1px solid rgba(25, 118, 210, 0.10);

    box-shadow: 0 20px 55px rgba(25, 118, 210, 0.09);
}


.pediatric-hero::before {

    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    right: -160px;
    top: -170px;

    border-radius: 50%;

    background: rgba(100, 181, 246, 0.11);
}


.pediatric-hero::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -100px;
    bottom: -100px;

    border-radius: 50%;

    background: rgba(25, 118, 210, 0.05);
}


.pediatric-hero-content {

    position: relative;

    z-index: 2;
}


.pediatric-hero-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 17px;

    margin-bottom: 18px;

    border-radius: 30px;

    color: var(--pediatric-primary-dark);

    background: rgba(25, 118, 210, 0.10);

    font-size: 13px;

    font-weight: 700;
}


.pediatric-hero h1 {

    margin: 0 0 12px;

    color: var(--pediatric-text);

    font-size: clamp(38px, 5vw, 58px);

    font-weight: 900;
}


.pediatric-hero h2 {

    margin: 0 0 25px;

    color: var(--pediatric-primary-dark);

    font-size: clamp(18px, 2vw, 24px);

    line-height: 1.8;

    font-weight: 600;
}


.pediatric-hero-content p {

    margin: 0 0 15px;
}


.pediatric-hero-content p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.pediatric-hero-visual {

    position: relative;

    z-index: 2;

    min-height: 390px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.pediatric-hero-circle {

    width: 270px;
    height: 270px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 14px;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            145deg,
            var(--pediatric-primary),
            var(--pediatric-secondary)
        );

    box-shadow:
        0 20px 45px rgba(25, 118, 210, 0.22),
        0 0 0 22px rgba(25, 118, 210, 0.05),
        0 0 0 44px rgba(25, 118, 210, 0.025);

    animation: pediatric-float 4s ease-in-out infinite;
}


.pediatric-hero-circle i {

    font-size: 82px;
}


.pediatric-hero-circle span {

    font-size: 17px;

    font-weight: 700;
}


.pediatric-floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 12px 18px;

    border-radius: 16px;

    color: var(--pediatric-text);

    background: white;

    box-shadow: 0 12px 30px rgba(25, 118, 210, 0.13);

    font-size: 13px;

    font-weight: 700;
}


.pediatric-floating-card i {

    color: var(--pediatric-primary);

    font-size: 17px;
}


.pediatric-floating-card-one {

    top: 65px;
    right: 10px;
}


.pediatric-floating-card-two {

    bottom: 65px;
    left: 0;
}


@keyframes pediatric-float {

    0%,
    100% {

        transform: translateY(0);
    }

    50% {

        transform: translateY(-8px);
    }
}


/* =========================================================
   INTRO
========================================================= */

.pediatric-intro-box {

    max-width: 970px;

    padding: 35px 40px;

    border-radius: 28px;

    background: var(--pediatric-bg);

    border: 1px solid rgba(25, 118, 210, 0.08);
}


.pediatric-intro-box p {

    margin: 0 0 16px;
}


.pediatric-intro-box p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   FIRST VISIT
========================================================= */

.pediatric-first-visit {

    display: grid;

    grid-template-columns: 80px 1fr;

    gap: 28px;

    padding: 38px 40px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #f0f8ff,
            #ffffff
        );

    border: 1px solid rgba(25, 118, 210, 0.08);
}


.pediatric-first-visit-icon {

    width: 68px;
    height: 68px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 21px;

    color: white;

    background: var(--pediatric-primary);

    box-shadow: 0 10px 25px rgba(25, 118, 210, 0.18);
}


.pediatric-first-visit-icon i {

    font-size: 23px;
}


.pediatric-first-visit p {

    margin: 0 0 14px;
}


.pediatric-first-visit p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   BABY TEETH
========================================================= */

.pediatric-baby-teeth-box {

    display: grid;

    grid-template-columns: 170px 1fr;

    align-items: center;

    gap: 35px;

    padding: 35px;

    border-radius: 30px;

    background: #ffffff;

    border: 1px solid rgba(25, 118, 210, 0.08);

    box-shadow: 0 12px 35px rgba(25, 118, 210, 0.05);
}


.pediatric-baby-teeth-visual {

    height: 170px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 28px;

    color: var(--pediatric-primary);

    background: var(--pediatric-primary-light);
}


.pediatric-baby-teeth-visual i {

    font-size: 75px;
}


.pediatric-baby-teeth-box p {

    margin: 0 0 15px;
}


.pediatric-baby-teeth-box p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   SERVICES
========================================================= */

.pediatric-services-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 19px;
}


.pediatric-service-card {

    min-height: 190px;

    padding: 25px;

    border-radius: 24px;

    background: #ffffff;

    border: 1px solid rgba(25, 118, 210, 0.08);

    box-shadow: 0 9px 30px rgba(25, 118, 210, 0.045);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.pediatric-service-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 17px 38px rgba(25, 118, 210, 0.11);
}


.pediatric-service-card > i {

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 17px;

    border-radius: 16px;

    color: var(--pediatric-primary);

    background: var(--pediatric-primary-light);

    font-size: 20px;
}


.pediatric-service-card h3 {

    margin: 0 0 9px;

    color: var(--pediatric-text);

    font-size: 17px;
}


.pediatric-service-card p {

    margin: 0;

    font-size: 14px;

    line-height: 1.9;
}


.pediatric-services-note {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 22px;

    padding: 17px 21px;

    border-radius: 17px;

    background: var(--pediatric-primary-light);
}


.pediatric-services-note i {

    color: var(--pediatric-primary);

    flex-shrink: 0;
}


.pediatric-services-note p {

    margin: 0;

    color: var(--pediatric-primary-dark);

    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   PREVENTION
========================================================= */

.pediatric-prevention-box {

    padding: 38px 40px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #f2f9ff,
            #ffffff
        );

    border: 1px solid rgba(25, 118, 210, 0.08);
}


.pediatric-prevention-box > p {

    margin: 0 0 15px;
}


.pediatric-check-list {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 13px;

    margin-top: 25px;
}


.pediatric-check-list > div {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 15px 17px;

    border-radius: 16px;

    color: #536375;

    background: white;

    font-size: 14px;

    line-height: 1.8;
}


.pediatric-check-list i {

    margin-top: 5px;

    color: var(--pediatric-primary);

    font-size: 13px;
}


.pediatric-info-note {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-top: 23px;

    padding: 17px 20px;

    border-radius: 17px;

    background: var(--pediatric-primary-light);
}


.pediatric-info-note i {

    margin-top: 6px;

    color: var(--pediatric-primary);
}


.pediatric-info-note p {

    margin: 0;

    color: var(--pediatric-primary-dark);

    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   FLUORIDE
========================================================= */

.pediatric-fluoride-box {

    display: grid;

    grid-template-columns: 85px 1fr;

    gap: 30px;

    padding: 40px;

    border-radius: 30px;

    background: #ffffff;

    border: 1px solid rgba(25, 118, 210, 0.08);

    box-shadow: 0 10px 35px rgba(25, 118, 210, 0.05);
}


.pediatric-fluoride-icon {

    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 21px;

    color: white;

    background: var(--pediatric-primary);

    box-shadow: 0 10px 25px rgba(25, 118, 210, 0.17);
}


.pediatric-fluoride-icon i {

    font-size: 27px;
}


.pediatric-fluoride-box p {

    margin: 0 0 15px;
}


.pediatric-fluoride-box p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   SEALANT
========================================================= */

.pediatric-sealant-box {

    display: grid;

    grid-template-columns: 280px 1fr;

    align-items: center;

    gap: 40px;

    padding: 40px;

    border-radius: 32px;

    background:
        linear-gradient(
            135deg,
            #eaf5ff,
            #ffffff
        );

    border: 1px solid rgba(25, 118, 210, 0.09);
}


.pediatric-sealant-visual {

    min-height: 230px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 17px;
}


.pediatric-sealant-tooth {

    width: 150px;
    height: 150px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--pediatric-primary);

    background: white;

    box-shadow: 0 12px 30px rgba(25, 118, 210, 0.10);
}


.pediatric-sealant-tooth i {

    font-size: 65px;
}


.pediatric-sealant-visual span {

    color: var(--pediatric-primary-dark);

    font-size: 13px;

    font-weight: 700;
}


.pediatric-sealant-content p {

    margin: 0 0 15px;
}


.pediatric-sealant-content p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   DECAY
========================================================= */

.pediatric-decay-box {

    display: grid;

    grid-template-columns: 75px 1fr;

    gap: 28px;

    padding: 38px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #fffaf4,
            #ffffff
        );

    border: 1px solid rgba(230, 150, 50, 0.10);
}


.pediatric-decay-icon {

    width: 64px;
    height: 64px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 19px;

    color: #b86b00;

    background: #fff0d7;
}


.pediatric-decay-icon i {

    font-size: 24px;
}


.pediatric-decay-box p {

    margin: 0 0 14px;
}


.pediatric-decay-box p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   PREPARATION
========================================================= */

.pediatric-preparation-intro p {

    margin: 0 0 10px;
}


.pediatric-preparation-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 17px;

    margin-top: 25px;
}


.pediatric-preparation-card {

    position: relative;

    min-height: 220px;

    padding: 28px 20px;

    text-align: center;

    border-radius: 24px;

    background: white;

    border: 1px solid rgba(25, 118, 210, 0.08);

    box-shadow: 0 9px 28px rgba(25, 118, 210, 0.045);
}


.pediatric-preparation-number {

    position: absolute;

    top: 12px;
    right: 15px;

    color: rgba(25, 118, 210, 0.15);

    font-size: 26px;

    font-weight: 900;
}


.pediatric-preparation-card > i {

    width: 54px;
    height: 54px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 10px auto 20px;

    border-radius: 17px;

    color: var(--pediatric-primary);

    background: var(--pediatric-primary-light);

    font-size: 21px;
}


.pediatric-preparation-card p {

    margin: 0;

    font-size: 14px;

    line-height: 1.95;
}


.pediatric-preparation-note {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 23px;

    padding: 18px 21px;

    border-radius: 18px;

    background: var(--pediatric-primary-light);
}


.pediatric-preparation-note i {

    margin-top: 5px;

    color: var(--pediatric-primary);
}


.pediatric-preparation-note p {

    margin: 0;

    color: var(--pediatric-primary-dark);

    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   PROCESS
========================================================= */

.pediatric-process {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}


.pediatric-process-item {

    position: relative;

    padding: 30px 23px;

    text-align: center;

    border-radius: 26px;

    background: white;

    border: 1px solid rgba(25, 118, 210, 0.08);

    box-shadow: 0 9px 30px rgba(25, 118, 210, 0.05);
}


.pediatric-process-icon {

    width: 59px;
    height: 59px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 17px;

    border-radius: 18px;

    color: var(--pediatric-primary);

    background: var(--pediatric-primary-light);
}


.pediatric-process-icon i {

    font-size: 22px;
}


.pediatric-process-item > span {

    display: block;

    margin-bottom: 8px;

    color: var(--pediatric-primary);

    font-size: 12px;

    font-weight: 800;
}


.pediatric-process-item h3 {

    margin: 0 0 11px;

    color: var(--pediatric-text);

    font-size: 18px;
}


.pediatric-process-item p {

    margin: 0;

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   HOME CARE
========================================================= */

.pediatric-home-care {

    padding: 38px 40px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #f3f9ff,
            #ffffff
        );

    border: 1px solid rgba(25, 118, 210, 0.08);
}


.pediatric-home-care-intro {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 25px;
}


.pediatric-home-care-intro > i {

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 18px;

    color: white;

    background: var(--pediatric-primary);
}


.pediatric-home-care-intro p {

    margin: 0;

    color: var(--pediatric-text);

    font-weight: 700;
}


.pediatric-home-list {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 13px;
}


.pediatric-home-list > div {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 15px 17px;

    border-radius: 16px;

    background: white;

    color: #536375;

    font-size: 14px;

    line-height: 1.8;
}


.pediatric-home-list i {

    margin-top: 5px;

    color: var(--pediatric-primary);

    font-size: 13px;
}


.pediatric-home-note {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-top: 23px;

    padding: 17px 20px;

    border-radius: 17px;

    background: var(--pediatric-primary-light);
}


.pediatric-home-note i {

    margin-top: 5px;

    color: var(--pediatric-primary);
}


.pediatric-home-note p {

    margin: 0;

    color: var(--pediatric-primary-dark);

    font-size: 14px;
}


/* =========================================================
   HABITS
========================================================= */

.pediatric-habits-box {

    display: grid;

    grid-template-columns: 85px 1fr;

    gap: 30px;

    padding: 40px;

    border-radius: 30px;

    background: white;

    border: 1px solid rgba(25, 118, 210, 0.08);

    box-shadow: 0 10px 30px rgba(25, 118, 210, 0.045);
}


.pediatric-habits-icon {

    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 21px;

    color: var(--pediatric-primary);

    background: var(--pediatric-primary-light);
}


.pediatric-habits-icon i {

    font-size: 28px;
}


.pediatric-habits-box p {

    margin: 0 0 15px;
}


.pediatric-habits-box p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   INJURY
========================================================= */

.pediatric-injury-box {

    display: grid;

    grid-template-columns: 75px 1fr;

    gap: 28px;

    padding: 38px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #fff8f5,
            #ffffff
        );

    border: 1px solid rgba(220, 110, 80, 0.09);
}


.pediatric-injury-icon {

    width: 64px;
    height: 64px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 19px;

    color: #b94f32;

    background: #ffebe5;
}


.pediatric-injury-icon i {

    font-size: 24px;
}


.pediatric-injury-box p {

    margin: 0 0 14px;
}


.pediatric-injury-box p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   FAQ
========================================================= */

.pediatric-faq-list {

    max-width: 950px;

    margin: 0 auto;
}


.pediatric-faq-item {

    margin-bottom: 14px;

    overflow: hidden;

    border-radius: 19px;

    background: #f4f9ff;

    border: 1px solid rgba(25, 118, 210, 0.08);

    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}


.pediatric-faq-item:hover {

    border-color: rgba(25, 118, 210, 0.18);
}


.pediatric-faq-item[open] {

    background: var(--pediatric-primary-light);
}


.pediatric-faq-item summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 23px 27px;

    cursor: pointer;

    list-style: none;

    color: var(--pediatric-text);

    font-size: 16px;

    font-weight: 700;
}


.pediatric-faq-item summary::-webkit-details-marker {

    display: none;
}


.pediatric-faq-item summary i {

    flex-shrink: 0;

    color: var(--pediatric-primary);

    transition: transform 0.3s ease;
}


.pediatric-faq-item[open] summary i {

    transform: rotate(180deg);
}


.pediatric-faq-answer {

    padding: 0 27px 25px;
}


.pediatric-faq-answer p {

    margin: 0;

    font-size: 15px;
}


/* =========================================================
   CTA
========================================================= */

.pediatric-cta {

    position: relative;

    display: grid;

    grid-template-columns: 75px 1fr auto;

    align-items: center;

    gap: 25px;

    width: 92%;

    max-width: 1080px;

    margin: 100px auto 0;

    padding: 40px 45px;

    overflow: hidden;

    border-radius: 32px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #1976d2,
            #125ca8
        );

    box-shadow: 0 20px 50px rgba(25, 118, 210, 0.20);
}


.pediatric-cta::before {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -130px;
    bottom: -180px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.06);
}


.pediatric-cta-icon {

    position: relative;

    z-index: 1;

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.14);
}


.pediatric-cta-icon i {

    font-size: 25px;
}


.pediatric-cta-content {

    position: relative;

    z-index: 1;
}


.pediatric-cta-content > span {

    color: rgba(255, 255, 255, 0.72);

    font-size: 13px;

    font-weight: 600;
}


.pediatric-cta-content h2 {

    margin: 7px 0 12px;

    color: white;

    font-size: 27px;
}


.pediatric-cta-content p {

    margin: 0 0 9px;

    color: rgba(255, 255, 255, 0.84);

    font-size: 14px;

    line-height: 1.9;
}


.pediatric-cta-content p:last-child {

    margin-bottom: 0;
}


.pediatric-cta-button {

    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 14px 23px;

    border-radius: 15px;

    color: var(--pediatric-primary-dark);

    background: white;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.pediatric-cta-button:hover {

    transform: translateY(-3px);

    background: #edf7ff;
}


.pediatric-cta-button i {

    transition: transform 0.25s ease;
}


.pediatric-cta-button:hover i {

    transform: translateX(-4px);
}


.pediatric-cta-note {

    grid-column: 2 / 3;

    position: relative;

    z-index: 1;

    color: rgba(255, 255, 255, 0.65);

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .pediatric-hero {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .pediatric-hero-visual {

        min-height: 330px;
    }


    .pediatric-services-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    .pediatric-preparation-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    .pediatric-process {

        grid-template-columns: repeat(2, 1fr);
    }


    .pediatric-cta {

        grid-template-columns: 65px 1fr;
    }


    .pediatric-cta-button {

        grid-column: 2;

        justify-self: start;
    }


    .pediatric-cta-note {

        grid-column: 2;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .pediatric-page {

        width: min(100% - 25px, 600px);

        padding-top: 30px;
    }


    .pediatric-section {

        margin-top: 70px;
    }


    .pediatric-hero {

        padding: 30px 23px;

        border-radius: 27px;
    }


    .pediatric-hero h1 {

        font-size: 37px;
    }


    .pediatric-hero h2 {

        font-size: 18px;
    }


    .pediatric-hero-visual {

        min-height: 290px;
    }


    .pediatric-hero-circle {

        width: 215px;
        height: 215px;
    }


    .pediatric-hero-circle i {

        font-size: 63px;
    }


    .pediatric-floating-card-one {

        top: 25px;
        right: 0;
    }


    .pediatric-floating-card-two {

        bottom: 25px;
        left: 0;
    }


    .pediatric-section-heading {

        margin-bottom: 25px;
    }


    .pediatric-heading-icon {

        width: 47px;
        height: 47px;

        border-radius: 14px;
    }


    .pediatric-section-heading h2 {

        font-size: 24px;
    }


    .pediatric-intro-box {

        padding: 27px 23px;
    }


    .pediatric-first-visit {

        grid-template-columns: 1fr;

        padding: 28px 23px;

        gap: 20px;
    }


    .pediatric-baby-teeth-box {

        grid-template-columns: 1fr;

        padding: 27px 23px;
    }


    .pediatric-baby-teeth-visual {

        height: 150px;
    }


    .pediatric-services-grid {

        grid-template-columns: 1fr;
    }


    .pediatric-prevention-box {

        padding: 28px 23px;
    }


    .pediatric-check-list {

        grid-template-columns: 1fr;
    }


    .pediatric-fluoride-box {

        grid-template-columns: 1fr;

        padding: 28px 23px;

        gap: 20px;
    }


    .pediatric-sealant-box {

        grid-template-columns: 1fr;

        padding: 28px 23px;

        gap: 25px;
    }


    .pediatric-sealant-visual {

        min-height: 190px;
    }


    .pediatric-decay-box {

        grid-template-columns: 1fr;

        padding: 28px 23px;

        gap: 20px;
    }


    .pediatric-preparation-grid {

        grid-template-columns: 1fr;
    }


    .pediatric-preparation-card {

        min-height: auto;

        padding: 25px 20px;
    }


    .pediatric-process {

        grid-template-columns: 1fr;
    }


    .pediatric-home-care {

        padding: 28px 23px;
    }


    .pediatric-home-list {

        grid-template-columns: 1fr;
    }


    .pediatric-habits-box {

        grid-template-columns: 1fr;

        padding: 28px 23px;

        gap: 20px;
    }


    .pediatric-injury-box {

        grid-template-columns: 1fr;

        padding: 28px 23px;

        gap: 20px;
    }


    .pediatric-faq-item summary {

        padding: 20px;

        font-size: 15px;
    }


    .pediatric-faq-answer {

        padding: 0 20px 22px;
    }


    .pediatric-cta {

        grid-template-columns: 1fr;

        width: 100%;

        margin-top: 70px;

        padding: 30px 23px;
    }


    .pediatric-cta-button {

        grid-column: auto;

        justify-self: stretch;
    }


    .pediatric-cta-note {

        grid-column: auto;
    }


    .pediatric-cta-content h2 {

        font-size: 23px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 450px) {

    .pediatric-page {

        width: calc(100% - 18px);
    }


    .pediatric-hero {

        padding: 25px 18px;
    }


    .pediatric-hero h1 {

        font-size: 31px;
    }


    .pediatric-hero h2 {

        font-size: 17px;

        line-height: 1.8;
    }


    .pediatric-hero-circle {

        width: 185px;
        height: 185px;
    }


    .pediatric-hero-circle i {

        font-size: 52px;
    }


    .pediatric-hero-circle span {

        font-size: 14px;
    }


    .pediatric-floating-card {

        padding: 9px 13px;

        font-size: 11px;
    }


    .pediatric-section-heading {

        gap: 11px;
    }


    .pediatric-section-heading h2 {

        font-size: 21px;
    }


    .pediatric-section-heading small {

        font-size: 11px;
    }


    .pediatric-heading-icon {

        width: 43px;
        height: 43px;
    }


    .pediatric-heading-icon i {

        font-size: 18px;
    }


    .pediatric-cta {

        border-radius: 26px;
    }

}


/*///////////////////////////main///////////////////////////*/
/*///////////////////////////main///////////////////////////*/
/*///////////////////////////main///////////////////////////*/

.home-intro {
    position: relative;
    margin-top: 20px;
}

.home-intro-image {
    display: block;
    width: 100%;
}

.home-intro-image img {
    width: 100%;
    height: 620px;
    display: block;
    border-radius: 25px;
    object-fit: cover;
}

.home-intro-content {
    position: absolute;
    top: 52%;
    left: 10%;
    transform: translateY(-50%);
}

.home-intro-content span {
    font-size: 32px;
    color: #365F91;
}

.home-intro-text-center {
    text-align: center;
}

.home-intro-content h1 {
    font-size: 70px;
    margin: 10px 0;
    line-height: 1.3;
    color: #365F91;
}

.home-intro-content p {
    font-size: 30px;
    margin: 25px 0 0;
    color: #365F91;
}

.home-intro-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 50px;
}

.home-intro-buttons a {
    display: inline-block;
    padding: 12px 28px;
    text-decoration: none;
    color: #2d728f;
    background-color: #dfdfdf;
    border: 2px solid #2d728f;
    border-radius: 50px;
    font-size: 18px;
    transition: 0.3s;
}

.home-intro-buttons a:hover {
    color: #dfdfdf;
    background-color: #2d728f;
    border-color: #2d728f;
}


/* ================================
   Home Intro Animations
================================ */

@keyframes homeFadeUp {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* دندانپزشکی */

.home-intro-content > span {
    opacity: 0;
}

.home-intro.intro-loaded .home-intro-content > span {

    animation:
        homeFadeUp 0.5s ease forwards;

    animation-delay: 0.1s;

}


/* نام دکتر */

.home-intro-text-center h1 {
    opacity: 0;
}

.home-intro.intro-loaded .home-intro-text-center h1 {

    animation:
        homeFadeUp 0.5s ease forwards;

    animation-delay: 0.25s;

}


/* عنوان */

.home-intro-text-center p {
    opacity: 0;
}

.home-intro.intro-loaded .home-intro-text-center p {

    animation:
        homeFadeUp 0.5s ease forwards;

    animation-delay: 0.4s;

}


/* دکمه‌ها */

.home-intro-buttons {
    opacity: 0;
}

.home-intro.intro-loaded .home-intro-buttons {

    animation:
        homeFadeUp 0.5s ease forwards;

    animation-delay: 0.55s;

}


/* ================================
   Mobile Home Intro
================================ */

@media (max-width: 1365px) and (min-width: 1101px) {

    .home-intro-image {
        overflow: hidden;
        border-radius: 25px;
    }

    .home-intro-image img {
        width: 1365px;
        max-width: none;
        height: 620px;
        object-fit: cover;
        object-position: center center;
        position: relative;
        left: 0;
        border-radius: 25px;
    }

}

@media (max-width: 1185px) and (min-width: 1101px) {

    .home-intro-content {
        left: 6%;
    }

}

@media (max-width: 1100px) {

    .home-intro {
        margin-top: 15px;

        display: flex;
        flex-direction: column;

        background-color: #ffffff;
    }


    /* عکس مخصوص موبایل */

    .home-intro-image {
        width: 100%;
    }

.home-intro-image img {
    margin-right: auto;
    margin-left: auto;
    width: 70%;
    height: 620px;
    display: block;
    border-radius: 25px;
    object-fit: cover;
    object-position: center center;
}


    /* محتوای زیر عکس */

    .home-intro-content {

        position: static;

        width: 100%;

        box-sizing: border-box;

        padding: 30px 15px 10px;

        transform: none;

        text-align: center;

    }


    /* دندانپزشکی */

    .home-intro-content > span {

        display: block;

        font-size: 24px;

        margin-bottom: 8px;

    }


    /* نام دکتر */

    .home-intro-content h1 {

        font-size: 32px;

        line-height: 1.5;

        margin: 5px 0;

    }


    /* عنوان */

    .home-intro-content p {

        font-size: 18px;

        line-height: 1.8;

        margin: 12px 0 0;

    }


    /* دکمه‌ها */

    .home-intro-buttons {

        display: flex;

        justify-content: center;

        flex-wrap: wrap;

        gap: 10px;

        margin-top: 25px;

    }


    .home-intro-buttons a {

        padding: 10px 20px;

        font-size: 15px;

    }

}

@media (max-width: 1100px) {

.home-intro-content {
    border: 2px solid #8EC5F0;
    border-radius: 25px;
    margin: 25px auto 0;
    width: calc(100% - 30px);
    box-sizing: border-box;
    padding: 30px 15px 25px;
}

    /* دندانپزشکی */
    .home-intro-content > span {
        color: #4B91D1;
    }

    /* نام دکتر */
    .home-intro-content h1 {
        color: #3684C6;
    }

    /* تخصص */
    .home-intro-content p {
        color: #5B9BD5;
    }

    /* دکمه‌ها */
    .home-intro-buttons a {
        color: #2563A6;
        background-color: #FFFFFF;
        border-color: #2563A6;
    }

    .home-intro-buttons a:hover {
        color: #FFFFFF;
        background-color: #2563A6;
        border-color: #2563A6;
    }

}

@media (max-width: 900px) {
    .home-intro-image img {
        width: 90%;
}
}

@media (max-width: 720px) {
    .home-intro-image img {
        width: 100%;
}
}

@media (max-width: 455px) {

    .home-intro-image {
        overflow: hidden;
        border-radius: 25px;
    }

    .home-intro-image img {
        width: 440px;
        max-width: none;
        height: 620px;
        object-fit: cover;
        object-position: center center;
        position: relative;
        left: auto;
        right: 0;
        margin-left: auto;
        margin-right: 0;
        border-radius: 25px;
    }

}

@media (max-width: 415px) {

    .home-intro-image img {
        width: 100%;
        max-width: 100%;
        height: 500px;
    }

}

/* ================================
   Home Services
================================ */

.home-services {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 40px;
    box-sizing: border-box;
}


/* ================================
   Header
================================ */

.home-services-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-bottom: 40px;
}

.home-services-header h2 {
    margin: 0;
    font-size: 38px;
}


/* ================================
   Arrows
================================ */

.home-services-slider {
    display: flex;
    align-items: center;
    gap: 20px;
}

.home-services-viewport {
    flex: 1;

    overflow: hidden;

    padding: 10px 15px 25px;
    margin: -10px -15px -25px;
}


/* فلش‌های کنار کارت‌ها */

.home-services-slider button {
    flex-shrink: 0;

    width: 48px;
    height: 48px;

    border: 2px solid #2563A6;
    border-radius: 50%;

    background-color: #2563A6;
    color: #ffffff;

    font-size: 22px;
    font-weight: 500;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;
}

.home-services-slider button:hover {
    background-color: #ffffff;
    color: #2563A6;

    transform: scale(1.08);

    box-shadow: 0 6px 18px rgba(37, 99, 166, 0.20);
}


/* ================================
   Slider
================================ */

.home-services-track {
    display: flex;
    gap: 28px;

    transition: transform 0.5s ease;
}


/* ================================
   Service Card
================================ */

.home-service-card {
    flex: 0 0 calc((100% - 56px) / 3);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    text-decoration: none;

    border: 1px solid #e5e5e5;
    border-radius: 22px;

    background-color: #fff;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.home-service-card:hover {
    transform: translateY(-7px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}


/* ================================
   Image
================================ */

.home-service-image {
    width: 100%;
    height: 230px;

    background-color: #f3f3f3;
}


/* ================================
   Content
================================ */

.home-service-content {
    padding: 25px 25px 27px;
}

.home-service-content h3 {
    margin: 0 0 12px;

    font-size: 22px;
    font-weight: 700;
}

.home-service-content p {
    margin: 0;

    font-size: 15px;
    line-height: 2;

    color: #666;
}

.home-service-link {
    display: flex;
    align-items: center;
    gap: 8px;

    width: fit-content;

    margin-top: 20px;

    font-size: 14px;
    font-weight: 600;

    color: inherit;

    transition: gap 0.3s ease;
}

.home-service-card:hover .home-service-link {
    gap: 13px;
}


/* ================================
   Slider Pagination
================================ */

.home-services-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    margin-top: 25px;
}


/* دایره‌ها */

.home-pagination-dots {
    display: flex;
    align-items: center;
    gap: 9px;
}

.home-pagination-dot {
    width: 10px;
    height: 10px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background-color: #b8cce0;

    cursor: pointer;

    transition: all 0.3s ease;
}

.home-pagination-dot.active {
    width: 13px;
    height: 13px;

    background-color: #2563A6;
}

.home-pagination-dot:hover {
    background-color: #2563A6;
}


/* فلش‌های کوچک نوار */

.home-pagination-prev,
.home-pagination-next {
    border: none;

    background: transparent;

    padding: 5px;

    color: #2563A6;

    font-size: 20px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;
}

.home-pagination-prev:hover,
.home-pagination-next:hover {
    color: #2563A6;

    transform: scale(1.2);
}


/* ================================
   All Services Button
================================ */

.home-services-all {
    display: flex;
    justify-content: center;

    margin-top: 35px;
}

.home-services-all a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 190px;

    padding: 13px 30px;

    border: 2px solid #2563A6;
    border-radius: 50px;

    background-color: #2563A6;
    color: #ffffff;

    text-decoration: none;

    font-size: 17px;
    font-weight: 600;

    box-shadow: 0 5px 15px rgba(37, 99, 166, 0.15);

    transition: all 0.3s ease;
}

.home-services-all a:hover {
    background-color: #ffffff;
    color: #2563A6;

    transform: translateY(-3px);

    box-shadow: 0 8px 22px rgba(37, 99, 166, 0.22);
}


/* ================================
   Tablet
================================ */

@media (max-width: 1180px) {

    .home-services {
        padding: 65px 30px;
    }

    .home-service-card {
        flex-basis: calc((100% - 28px) / 2);
    }
}


/* ================================
   Mobile
================================ */

@media (max-width: 860px) {

    .home-services {
        padding: 50px 20px;
    }

    .home-services-header {
        margin-bottom: 30px;
    }

    .home-services-header h2 {
        font-size: 30px;
    }

    .home-service-card {
        flex-basis: 100%;
    }

    .home-service-image {
        height: 210px;
    }

    .home-service-content {
        padding: 22px;
    }

    .home-service-content h3 {
        font-size: 20px;
    }

    .home-services-slider button {
        width: 42px;
        height: 42px;
    }
}


/* ================================
   Home About
================================ */

.home-about {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding: 80px 40px;

    box-sizing: border-box;

    display: flex;
    align-items: center;

    gap: 70px;
}


/* ================================
   Image
================================ */

.home-about-image {
    flex: 0 0 43%;

    overflow: hidden;

    border-radius: 25px;
}

.home-about-image img {
    display: block;

    width: 100%;
    height: 620px;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.home-about-image:hover img {
    transform: scale(1.03);
}


/* ================================
   Content
================================ */

.home-about-content {
    flex: 1;

    direction: rtl;
}


.home-about-label {
    display: inline-block;

    margin-bottom: 14px;

    color: #2563A6;

    font-size: 17px;
    font-weight: 600;
}


.home-about-content h2 {
    margin: 0 0 10px;

    font-size: 38px;
    font-weight: 700;

    color: #222;
}


.home-about-content h3 {
    margin: 0 0 25px;

    font-size: 20px;
    font-weight: 500;

    color: #2563A6;
}


/* ================================
   Text
================================ */

.home-about-text {
    margin-bottom: 25px;
}

.home-about-text p {
    margin: 0 0 16px;

    font-size: 16px;
    line-height: 2.2;

    color: #555;
}

.home-about-text p:last-child {
    margin-bottom: 0;
}


/* ================================
   Button
================================ */

.home-about-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 12px 28px;

    border: 2px solid #2563A6;
    border-radius: 50px;

    background-color: #2563A6;
    color: #ffffff;

    text-decoration: none;

    font-size: 16px;
    font-weight: 600;

    transition: all 0.3s ease;
}


.home-about-button span {
    font-size: 19px;

    transition: transform 0.3s ease;
}


.home-about-button:hover {
    background-color: #ffffff;
    color: #2563A6;

    transform: translateY(-3px);

    box-shadow: 0 8px 22px rgba(37, 99, 166, 0.20);
}


.home-about-button:hover span {
    transform: translateX(-4px);
}


/* ================================
   Tablet
================================ */

@media (max-width: 1180px) {

    .home-about {
        padding: 65px 30px;

        gap: 45px;
    }

    .home-about-image {
        flex-basis: 42%;
    }

    .home-about-image img {
        height: 450px;
    }

    .home-about-content h2 {
        font-size: 32px;
    }

    .home-about-content h3 {
        font-size: 18px;
    }

    .home-about-text p {
        font-size: 15px;
    }

}


/* ================================
   Mobile
================================ */

@media (max-width: 860px) {

    .home-about {
        flex-direction: column;

        padding: 50px 20px;

        gap: 35px;
    }

    .home-about-image {
        width: 100%;
    }

    .home-about-image img {
        height: 400px;
    }

    .home-about-content {
        width: 100%;
    }

    .home-about-content h2 {
        font-size: 29px;
    }

    .home-about-content h3 {
        font-size: 17px;
        margin-bottom: 20px;
    }

    .home-about-text p {
        font-size: 15px;
        line-height: 2.1;
    }

    .home-about-button {
        font-size: 15px;
    }

}

.home-about,
.home-reviews {
    position: relative;
    isolation: isolate;
}

.home-about::before,
.home-reviews::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 100vw;

    transform: translateX(-50%);

    background-color: #f4f8fc;
}


/* ================================
   Home Gallery
================================ */

.home-gallery {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding: 80px 40px;

    box-sizing: border-box;
}


/* ================================
   Main Layout
================================ */

.home-gallery-inner {
    display: flex;
    align-items: center;
    min-height: 300px;
    gap: 50px;
}


/* ================================
   Slider Area
================================ */

.home-gallery-slider-area {
    flex: 1;
    min-width: 0;

    direction: rtl;
}


/* ================================
   Header
================================ */

.home-gallery-header {
    margin-bottom: 30px;
}

.home-gallery-header > span {
    display: inline-block;

    margin-bottom: 10px;

    color: #2563A6;

    font-size: 16px;
    font-weight: 600;
}

.home-gallery-header h2 {
    margin: 0 0 8px;

    font-size: 34px;
    font-weight: 700;
}

.home-gallery-header p {
    margin: 0;

    color: #666;

    font-size: 15px;
}


/* ================================
   Slider
================================ */

.home-gallery-slider {
    width: 100%;
}

.home-gallery-viewport {
    width: 100%;

    overflow: hidden;

    padding: 8px 8px 15px;
    margin: -8px -8px -15px;

    box-sizing: content-box;
}

.home-gallery-track {
    display: flex;
    gap: 22px;

    transition: transform 0.6s ease;
}

.home-gallery-item {
    flex: 0 0 calc((100% - 44px) / 3);

    height: 300px;

    overflow: hidden;

    border-radius: 20px;

    background-color: #f3f3f3;

    user-select: none;

    cursor: grab;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.08);
}

.home-gallery-item:active {
    cursor: grabbing;
}

.home-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    pointer-events: none;

    transition: transform 0.5s ease;
}

.home-gallery-item:hover img {
    transform: scale(1.04);
}


/* ================================
   Controls
================================ */

.home-gallery-controls {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-top: 25px;
}


/* ================================
   Arrows
================================ */

.home-gallery-controls button {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    border: 2px solid #2563A6;
    border-radius: 50%;

    background-color: #2563A6;
    color: #ffffff;

    font-size: 19px;
    font-weight: 500;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;
}

.home-gallery-controls button:hover {
    background-color: #ffffff;
    color: #2563A6;

    transform: scale(1.08);

    box-shadow:
        0 5px 15px rgba(37, 99, 166, 0.18);
}


/* ================================
   Progress Bar
================================ */

.home-gallery-progress {
    position: relative;

    flex: 1;

    height: 8px;

    overflow: hidden;

    border-radius: 10px;

    background-color: #d9e4ef;

    cursor: pointer;
}

.home-gallery-progress-bar {
    position: absolute;

    top: 0;

    right: 0;

    height: 100%;

    width: 33.333%;

    border-radius: 10px;

    background-color: #2563A6;

    transition:
        width 0.5s ease,
        right 0.5s ease;

    cursor: grab;
}


/* ================================
   Info Box
================================ */

.home-gallery-info {
    flex: 0 0 300px;

    padding: 40px 32px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;

    direction: rtl;

    border-radius: 25px;

    background-color: #f4f8fc;

    border: 1px solid #e1ebf4;

    transform: translateY(15px);
}


/* ================================
   Info Content
================================ */

.home-gallery-info-label {
    display: inline-block;

    margin-bottom: 15px;

    color: #2563A6;

    font-size: 16px;
    font-weight: 600;
}

.home-gallery-info h2 {
    margin: 0 0 18px;

    font-size: 27px;
    line-height: 1.7;

    color: #222;
}

.home-gallery-info h2 strong {
    color: #2563A6;
    font-weight: 700;
}

.home-gallery-info p {
    margin: 0 0 28px;

    color: #666;

    font-size: 15px;
    line-height: 2.1;
}


/* ================================
   Button
================================ */

.home-gallery-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    width: fit-content;

    padding: 12px 22px;

    border: 2px solid #2563A6;
    border-radius: 50px;

    background-color: #2563A6;
    color: #ffffff;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    transition: all 0.3s ease;
}

.home-gallery-button span {
    font-size: 18px;

    transition: transform 0.3s ease;
}

.home-gallery-button:hover {
    background-color: #ffffff;
    color: #2563A6;

    transform: translateY(-3px);

    box-shadow:
        0 8px 22px rgba(37, 99, 166, 0.20);
}

.home-gallery-button:hover span {
    transform: translateX(-4px);
}


/* ================================
   Tablet
================================ */

@media (max-width: 1180px) {

    .home-gallery {
        padding: 65px 30px;
    }

    .home-gallery-inner {
        gap: 35px;
    }

    .home-gallery-info {
        flex-basis: 260px;

        padding: 35px 25px;
    }

    .home-gallery-item {
        flex-basis: calc((100% - 22px) / 2);
    }

    .home-gallery-progress-bar {
        width: 50%;
    }

}


/* ================================
   Mobile
================================ */

@media (max-width: 860px) {

    .home-gallery {
        padding: 50px 20px;
    }

    .home-gallery-inner {
        flex-direction: column;

        gap: 35px;
    }

    .home-gallery-header {
        margin-bottom: 25px;
    }

    .home-gallery-header h2 {
        font-size: 29px;
    }

    .home-gallery-header p {
        font-size: 14px;
    }

    .home-gallery-item {
        flex-basis: 100%;

        height: 320px;
    }

    .home-gallery-info {
        flex-basis: auto;

        width: 100%;

        padding: 30px 25px;
    }

    .home-gallery-info h2 {
        font-size: 25px;
    }

    .home-gallery-progress-bar {
        width: 100%;
    }

}

.home-reviews {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding: 80px 40px;

    box-sizing: border-box;
}

.home-reviews-inner {
    direction: rtl;
}

.home-reviews-header {
    text-align: center;
    margin-bottom: 35px;
}

.home-reviews-header > span {
    display: inline-block;
    margin-bottom: 10px;

    color: #2563A6;

    font-size: 16px;
    font-weight: 600;
}

.home-reviews-header h2 {
    margin: 0 0 10px;

    font-size: 34px;
    font-weight: 700;

    color: #222;
}

.home-reviews-header p {
    margin: 0;

    color: #666;

    font-size: 15px;
}


.home-reviews .reviews-list {
    max-width: 900px;
    margin: 0 auto;

    gap: 18px;
}


.home-reviews-button-wrapper {
    display: flex;
    justify-content: center;

    margin-top: 35px;
}

.home-reviews-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 12px 28px;

    border: 2px solid #2563A6;
    border-radius: 50px;

    background-color: #2563A6;
    color: #ffffff;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    transition: all 0.3s ease;
}

.home-reviews-button span {
    font-size: 18px;

    transition: transform 0.3s ease;
}

.home-reviews-button:hover {
    background-color: #ffffff;
    color: #2563A6;

    transform: translateY(-3px);

    box-shadow:
        0 8px 22px rgba(37, 99, 166, 0.20);
}

.home-reviews-button:hover span {
    transform: translateX(-4px);
}


@media (max-width: 1180px) {

    .home-reviews {
        padding: 65px 30px;
    }

    .home-reviews-header h2 {
        font-size: 31px;
    }
}


@media (max-width: 860px) {

    .home-reviews {
        padding: 50px 20px;
    }

    .home-reviews-header {
        margin-bottom: 30px;
    }

    .home-reviews-header h2 {
        font-size: 28px;
    }

    .home-reviews-header p {
        font-size: 14px;
    }

    .home-reviews .review-card {
        padding: 20px;
    }

    .home-reviews .review-card-top {
        gap: 12px;
    }

    .home-reviews .review-name {
        font-size: 15px;
    }

    .home-reviews .review-rating .star {
        font-size: 18px;
    }

    .home-reviews .review-comment {
        font-size: 14px;
    }
}