css
/* =========================================================
   DIVINE DIRECT — ABOUT US
   PART 5 — HERO + ABOUT INTRO + COMMITMENT
========================================================= */


/* =========================================================
   01. ABOUT PAGE HERO
========================================================= */

.about-page-hero {
   position: relative;
   min-height: 560px;
   display: flex;
   align-items: center;
   overflow: hidden;
   background: #07154d;
}

.about-page-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background:
      linear-gradient(
         90deg,
         rgba(4, 15, 55, 0.92) 0%,
         rgba(4, 15, 55, 0.72) 45%,
         rgba(4, 15, 55, 0.25) 100%
      );
   z-index: 1;
}

.about-page-hero .container {
   position: relative;
   z-index: 2;
}

.about-page-hero-content {
   max-width: 720px;
   padding: 100px 0;
}

.about-page-hero .section-label {
   color: #ffffff;
   margin-bottom: 18px;
}

.about-page-hero h1 {
   color: #ffffff;
   font-size: clamp(42px, 5vw, 72px);
   line-height: 1.08;
   font-weight: 700;
   margin: 0 0 22px;
   letter-spacing: -1.5px;
}

.about-page-hero h1 span {
   color: #b9d5ff;
}

.about-page-hero p {
   max-width: 650px;
   color: rgba(255, 255, 255, 0.88);
   font-size: 17px;
   line-height: 1.8;
   margin: 0;
}


/* =========================================================
   02. BREADCRUMB
========================================================= */

.about-breadcrumb {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 28px;
}

.about-breadcrumb a,
.about-breadcrumb span {
   color: rgba(255, 255, 255, 0.82);
   font-size: 14px;
   text-decoration: none;
}

.about-breadcrumb a:hover {
   color: #ffffff;
}

.about-breadcrumb .separator {
   opacity: 0.5;
}


/* =========================================================
   03. SECTION COMMON STYLES
========================================================= */

.section-label {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   color: #0008ca;
   font-size: 14px;
   line-height: 1;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 15px;
}

.section-label::before {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #0008ca;
   flex-shrink: 0;
}

.section-heading h2,
.about-content h2,
.commitment-content h2 {
   color: #161920;
   font-size: clamp(32px, 4vw, 50px);
   line-height: 1.15;
   font-weight: 700;
   letter-spacing: -1px;
}

.section-heading h2 span,
.about-content h2 span,
.commitment-content h2 span {
   color: #0008ca;
}

.section-heading p {
   color: #626979;
   font-size: 16px;
   line-height: 1.8;
}


/* =========================================================
   04. ABOUT INTRO SECTION
========================================================= */

.about-intro-section {
   position: relative;
   padding: 110px 0;
   background: #ffffff;
   overflow: hidden;
}

.about-intro-content {
   padding-left: 25px;
}

.about-intro-content p {
   color: #626979;
   font-size: 16px;
   line-height: 1.85;
   margin-bottom: 20px;
}

.about-intro-content .btn {
   margin-top: 15px;
}


/* =========================================================
   05. ABOUT IMAGE COMPOSITION
========================================================= */

.about-intro-visual {
   position: relative;
   min-height: 570px;
   padding: 25px;
}

.about-intro-main-image {
   position: relative;
   width: 78%;
   height: 510px;
   overflow: hidden;
   border-radius: 24px;
   margin-left: auto;
   z-index: 2;
}

.about-intro-main-image img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
}

.about-intro-small-image {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 45%;
   height: 270px;
   overflow: hidden;
   border-radius: 22px;
   border: 8px solid #ffffff;
   box-shadow: 0 18px 50px rgba(8, 25, 80, 0.16);
   z-index: 3;
}

.about-intro-small-image img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
}

.about-intro-shape {
   position: absolute;
   width: 180px;
   height: 180px;
   right: 0;
   top: 0;
   border-radius: 50%;
   background: rgba(0, 8, 202, 0.08);
   z-index: 1;
}


/* =========================================================
   06. ABOUT EXPERIENCE / TRUST CARD
========================================================= */

.about-intro-card {
   position: absolute;
   right: 4%;
   bottom: 45px;
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 18px 22px;
   background: #ffffff;
   border-radius: 16px;
   box-shadow: 0 15px 45px rgba(11, 27, 80, 0.15);
   z-index: 4;
}

.about-intro-card-icon {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
   background: #0008ca;
   color: #ffffff;
   font-size: 22px;
   flex-shrink: 0;
}

.about-intro-card span {
   display: block;
   color: #7a8190;
   font-size: 12px;
   font-weight: 600;
   margin-bottom: 3px;
}

.about-intro-card strong {
   display: block;
   color: #161920;
   font-size: 15px;
   font-weight: 700;
}


/* =========================================================
   07. COMMITMENT SECTION
========================================================= */

.commitment-section {
   position: relative;
   padding: 110px 0;
   background: #f5f8ff;
   overflow: hidden;
}

.commitment-section::before {
   content: "";
   position: absolute;
   width: 420px;
   height: 420px;
   right: -180px;
   top: -180px;
   border-radius: 50%;
   background: rgba(0, 8, 202, 0.045);
}

.commitment-content {
   position: relative;
   z-index: 2;
   max-width: 650px;
}

.commitment-title {
   margin-bottom: 25px;
}

.commitment-text {
   color: #626979;
   font-size: 16px;
   line-height: 1.85;
   margin-bottom: 18px;
}


/* =========================================================
   08. COMMITMENT POINTS
========================================================= */

.commitment-points {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 22px;
   margin: 32px 0;
}

.commitment-point {
   display: flex;
   align-items: flex-start;
   gap: 13px;
}

.commitment-icon {
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(0, 8, 202, 0.1);
   color: #0008ca;
   font-size: 18px;
   flex-shrink: 0;
}

.commitment-point h3 {
   color: #161920;
   font-size: 17px;
   line-height: 1.3;
   font-weight: 700;
   margin: 0 0 6px;
}

.commitment-point p {
   color: #737a89;
   font-size: 14px;
   line-height: 1.6;
   margin: 0;
}


/* =========================================================
   09. COMMITMENT VISUAL
========================================================= */

.commitment-visual {
   position: relative;
   min-height: 570px;
   padding: 20px;
}

.commitment-main-image {
   position: relative;
   width: 88%;
   height: 530px;
   margin-left: auto;
   overflow: hidden;
   border-radius: 28px;
   z-index: 2;
}

.commitment-main-image img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
}

.commitment-shape {
   position: absolute;
   width: 190px;
   height: 190px;
   left: 0;
   bottom: 15px;
   border-radius: 28px;
   background: #0008ca;
   opacity: 0.09;
   z-index: 1;
}


/* =========================================================
   10. COMMITMENT FLOATING CARD
========================================================= */

.commitment-card {
   position: absolute;
   left: 0;
   bottom: 60px;
   display: flex;
   align-items: center;
   gap: 14px;
   max-width: 270px;
   padding: 18px 20px;
   background: #ffffff;
   border-radius: 17px;
   box-shadow: 0 18px 50px rgba(7, 25, 78, 0.16);
   z-index: 4;
}

.commitment-card-icon {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 13px;
   background: #0008ca;
   color: #ffffff;
   font-size: 22px;
   flex-shrink: 0;
}

.commitment-card span {
   display: block;
   color: #7a8190;
   font-size: 12px;
   font-weight: 600;
   margin-bottom: 4px;
}

.commitment-card h4 {
   color: #161920;
   font-size: 15px;
   line-height: 1.3;
   font-weight: 700;
   margin: 0;
}


/* =========================================================
   11. COMMITMENT BUTTON
========================================================= */

.commitment-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-top: 5px;
}

.commitment-btn i {
   transition: transform 0.3s ease;
}

.commitment-btn:hover i {
   transform: translateX(4px);
}


/* =========================================================
   12. GENERAL IMAGE EFFECT
========================================================= */

.about-intro-main-image img,
.about-intro-small-image img,
.commitment-main-image img {
   transition: transform 0.7s ease;
}

.about-intro-main-image:hover img,
.about-intro-small-image:hover img,
.commitment-main-image:hover img {
   transform: scale(1.04);
}


/* =========================================================
   13. TABLET
========================================================= */

@media (max-width: 991px) {

   .about-page-hero {
      min-height: 500px;
   }

   .about-page-hero-content {
      padding: 80px 0;
   }

   .about-intro-section,
   .commitment-section {
      padding: 85px 0;
   }

   .about-intro-content {
      padding-left: 0;
   }

   .about-intro-visual,
   .commitment-visual {
      min-height: 500px;
   }

   .about-intro-main-image {
      height: 450px;
   }

   .commitment-main-image {
      height: 460px;
   }

   .commitment-points {
      gap: 18px;
   }
}


/* =========================================================
   14. MOBILE
========================================================= */

@media (max-width: 767px) {

   .about-page-hero {
      min-height: 440px;
   }

   .about-page-hero-content {
      padding: 70px 0;
   }

   .about-page-hero h1 {
      font-size: 40px;
      letter-spacing: -0.8px;
   }

   .about-page-hero p {
      font-size: 15px;
      line-height: 1.7;
   }

   .about-intro-section,
   .commitment-section {
      padding: 70px 0;
   }

   .section-heading h2,
   .about-content h2,
   .commitment-content h2 {
      font-size: 34px;
   }

   .about-intro-visual,
   .commitment-visual {
      min-height: 410px;
      padding: 10px;
   }

   .about-intro-main-image {
      width: 88%;
      height: 360px;
      border-radius: 20px;
   }

   .about-intro-small-image {
      width: 48%;
      height: 190px;
      border-width: 5px;
      border-radius: 17px;
   }

   .about-intro-card {
      right: 0;
      bottom: 28px;
      padding: 14px 16px;
   }

   .about-intro-card-icon {
      width: 42px;
      height: 42px;
   }

   .commitment-main-image {
      width: 88%;
      height: 380px;
      border-radius: 22px;
   }

   .commitment-card {
      left: 0;
      bottom: 35px;
      max-width: 245px;
      padding: 14px 16px;
   }

   .commitment-card-icon {
      width: 42px;
      height: 42px;
   }

   .commitment-points {
      grid-template-columns: 1fr;
      gap: 18px;
   }

   .commitment-text {
      font-size: 15px;
      line-height: 1.75;
   }

}


/* =========================================================
   15. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

   .about-page-hero {
      min-height: 400px;
   }

   .about-page-hero-content {
      padding: 60px 0;
   }

   .about-page-hero h1 {
      font-size: 34px;
   }

   .section-label {
      font-size: 12px;
      letter-spacing: 1.2px;
   }

   .section-heading h2,
   .about-content h2,
   .commitment-content h2 {
      font-size: 30px;
   }

   .about-intro-visual,
   .commitment-visual {
      min-height: 360px;
   }

   .about-intro-main-image {
      height: 315px;
   }

   .about-intro-small-image {
      height: 160px;
   }

   .about-intro-card {
      bottom: 20px;
      padding: 11px 13px;
   }

   .about-intro-card strong {
      font-size: 13px;
   }

   .commitment-main-image {
      height: 330px;
   }

   .commitment-card {
      bottom: 25px;
      max-width: 220px;
   }

   .commitment-card h4 {
      font-size: 14px;
   }

}

/* =========================================================
   DIVINE DIRECT — ABOUT US
   PART 6 — SERVICES + STRENGTHS + JOURNEY
========================================================= */


/* =========================================================
   01. SERVICES SECTION
========================================================= */

.services-section {
   position: relative;
   padding: 110px 0;
   background: #ffffff;
   overflow: hidden;
}

.services-section .section-heading {
   max-width: 760px;
   margin: 0 auto;
}

.services-section .section-heading h2 {
   color: #161920;
   font-size: clamp(34px, 4vw, 52px);
   line-height: 1.15;
   font-weight: 700;
   letter-spacing: -1px;
   margin-bottom: 20px;
}

.services-section .section-heading h2 span {
   color: #0008ca;
}

.services-section .section-heading p {
   max-width: 680px;
   margin: 0 auto;
   color: #687080;
   font-size: 16px;
   line-height: 1.8;
}


/* =========================================================
   02. SERVICES GRID
========================================================= */

.services-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px;
   margin-top: 60px;
}


/* =========================================================
   03. SERVICE CARD
========================================================= */

.service-card {
   position: relative;
   min-height: 300px;
   padding: 32px;
   overflow: hidden;
   background: #ffffff;
   border: 1px solid #e8ebf2;
   border-radius: 22px;
   box-shadow: 0 10px 35px rgba(12, 30, 80, 0.055);
   transition:
      transform 0.35s ease,
      box-shadow 0.35s ease,
      border-color 0.35s ease;
}

.service-card::before {
   content: "";
   position: absolute;
   width: 150px;
   height: 150px;
   right: -75px;
   top: -75px;
   border-radius: 50%;
   background: rgba(0, 8, 202, 0.045);
   transition: transform 0.4s ease;
}

.service-card:hover {
   transform: translateY(-8px);
   border-color: rgba(0, 8, 202, 0.16);
   box-shadow: 0 22px 55px rgba(12, 30, 80, 0.12);
}

.service-card:hover::before {
   transform: scale(1.5);
}


/* =========================================================
   04. SERVICE NUMBER
========================================================= */

.service-number {
   position: absolute;
   top: 27px;
   right: 30px;
   color: #dfe3ed;
   font-size: 14px;
   line-height: 1;
   font-weight: 700;
   letter-spacing: 1px;
}


/* =========================================================
   05. SERVICE ICON
========================================================= */

.service-icon {
   width: 62px;
   height: 62px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 27px;
   border-radius: 17px;
   background: rgba(0, 8, 202, 0.08);
   color: #0008ca;
   font-size: 28px;
   transition:
      background 0.35s ease,
      color 0.35s ease,
      transform 0.35s ease;
}

.service-card:hover .service-icon {
   background: #0008ca;
   color: #ffffff;
   transform: translateY(-3px);
}


/* =========================================================
   06. SERVICE CONTENT
========================================================= */

.service-content {
   position: relative;
   z-index: 2;
   padding-right: 15px;
}

.service-content h3 {
   color: #161920;
   font-size: 20px;
   line-height: 1.35;
   font-weight: 700;
   margin: 0 0 12px;
}

.service-content p {
   color: #707888;
   font-size: 14px;
   line-height: 1.75;
   margin: 0;
}


/* =========================================================
   07. SERVICE ARROW
========================================================= */

.service-arrow {
   position: absolute;
   right: 30px;
   bottom: 28px;
   width: 38px;
   height: 38px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: #f1f4fb;
   color: #0008ca;
   font-size: 15px;
   transition:
      background 0.35s ease,
      color 0.35s ease,
      transform 0.35s ease;
}

.service-card:hover .service-arrow {
   background: #0008ca;
   color: #ffffff;
   transform: translateX(4px);
}


/* =========================================================
   08. STRENGTHS SECTION
========================================================= */

.strengths-section {
   position: relative;
   padding: 110px 0;
   background: #f5f8ff;
   overflow: hidden;
}

.strengths-section::after {
   content: "";
   position: absolute;
   width: 380px;
   height: 380px;
   left: -180px;
   bottom: -180px;
   border-radius: 50%;
   background: rgba(0, 8, 202, 0.04);
   pointer-events: none;
}


/* =========================================================
   09. STRENGTHS VISUAL
========================================================= */

.strengths-visual {
   position: relative;
   min-height: 570px;
   padding: 20px;
}

.strengths-main-image {
   position: relative;
   width: 88%;
   height: 530px;
   overflow: hidden;
   border-radius: 28px;
   z-index: 2;
}

.strengths-main-image img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   transition: transform 0.7s ease;
}

.strengths-main-image:hover img {
   transform: scale(1.04);
}


/* =========================================================
   10. STRENGTHS DECORATION
========================================================= */

.strengths-visual::before {
   content: "";
   position: absolute;
   width: 150px;
   height: 150px;
   left: 0;
   top: 0;
   border-radius: 25px;
   background: rgba(0, 8, 202, 0.1);
   z-index: 1;
}


/* =========================================================
   11. STRENGTHS FLOATING CARD
========================================================= */

.strengths-floating-card {
   position: absolute;
   left: 0;
   bottom: 55px;
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 18px 21px;
   min-width: 245px;
   background: #ffffff;
   border-radius: 17px;
   box-shadow: 0 18px 50px rgba(8, 26, 82, 0.15);
   z-index: 4;
}

.strengths-floating-icon {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border-radius: 13px;
   background: #0008ca;
   color: #ffffff;
   font-size: 22px;
}

.strengths-floating-card span {
   display: block;
   color: #7a8190;
   font-size: 12px;
   font-weight: 600;
   margin-bottom: 4px;
}

.strengths-floating-card strong {
   display: block;
   color: #161920;
   font-size: 15px;
   font-weight: 700;
}


/* =========================================================
   12. STRENGTHS CONTENT
========================================================= */

.strengths-content {
   position: relative;
   z-index: 2;
   padding-left: 25px;
}

.strengths-content h2 {
   color: #161920;
   font-size: clamp(34px, 4vw, 50px);
   line-height: 1.15;
   font-weight: 700;
   letter-spacing: -1px;
   margin-bottom: 23px;
}

.strengths-content h2 span {
   color: #0008ca;
}

.strengths-content > p {
   max-width: 610px;
   color: #687080;
   font-size: 16px;
   line-height: 1.85;
   margin-bottom: 35px;
}


/* =========================================================
   13. STRENGTHS LIST
========================================================= */

.strengths-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 25px 22px;
}

.strength-item {
   display: flex;
   align-items: flex-start;
   gap: 14px;
}

.strength-icon {
   width: 45px;
   height: 45px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border-radius: 12px;
   background: #ffffff;
   color: #0008ca;
   font-size: 20px;
   box-shadow: 0 8px 25px rgba(12, 30, 80, 0.07);
}

.strength-item h3 {
   color: #161920;
   font-size: 16px;
   line-height: 1.35;
   font-weight: 700;
   margin: 0 0 6px;
}

.strength-item p {
   color: #737b8a;
   font-size: 13px;
   line-height: 1.65;
   margin: 0;
}


/* =========================================================
   14. JOURNEY SECTION
========================================================= */

.journey-section {
   position: relative;
   margin-top: 120px;
   padding-top: 100px;
   border-top: 1px solid #e2e6ef;
}

.journey-section .section-heading {
   max-width: 760px;
   margin: 0 auto;
}

.journey-section .section-heading h2 {
   color: #161920;
   font-size: clamp(34px, 4vw, 50px);
   line-height: 1.15;
   font-weight: 700;
   letter-spacing: -1px;
   margin-bottom: 20px;
}

.journey-section .section-heading h2 span {
   color: #0008ca;
}

.journey-section .section-heading p {
   color: #687080;
   font-size: 16px;
   line-height: 1.8;
   margin: 0 auto;
}


/* =========================================================
   15. JOURNEY STEPS
========================================================= */

.journey-steps {
   position: relative;
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 25px;
   margin-top: 65px;
}

.journey-steps::before {
   content: "";
   position: absolute;
   left: 10%;
   right: 10%;
   top: 39px;
   height: 1px;
   background: #dce2ef;
   z-index: 0;
}


/* =========================================================
   16. JOURNEY STEP
========================================================= */

.journey-step {
   position: relative;
   z-index: 2;
   text-align: center;
   padding: 0 8px;
}

.journey-number {
   position: absolute;
   top: -4px;
   right: 17%;
   color: #dce1eb;
   font-size: 12px;
   font-weight: 700;
}

.journey-icon {
   width: 78px;
   height: 78px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 24px;
   border-radius: 50%;
   background: #ffffff;
   border: 1px solid #dce2ef;
   color: #0008ca;
   font-size: 27px;
   box-shadow: 0 10px 30px rgba(12, 30, 80, 0.08);
   transition:
      background 0.35s ease,
      color 0.35s ease,
      transform 0.35s ease,
      border-color 0.35s ease;
}

.journey-step:hover .journey-icon {
   background: #0008ca;
   border-color: #0008ca;
   color: #ffffff;
   transform: translateY(-5px);
}

.journey-step h3 {
   color: #161920;
   font-size: 17px;
   line-height: 1.35;
   font-weight: 700;
   margin: 0 0 9px;
}

.journey-step p {
   max-width: 190px;
   margin: 0 auto;
   color: #737b8a;
   font-size: 13px;
   line-height: 1.65;
}


/* =========================================================
   17. SERVICES + STRENGTHS BUTTONS
========================================================= */

.services-section .btn,
.strengths-section .btn {
   display: inline-flex;
   align-items: center;
   gap: 9px;
}


/* =========================================================
   18. LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

   .services-grid {
      gap: 20px;
   }

   .service-card {
      padding: 28px;
   }

   .journey-steps {
      gap: 15px;
   }

   .journey-steps::before {
      left: 8%;
      right: 8%;
   }

}


/* =========================================================
   19. TABLET
========================================================= */

@media (max-width: 991px) {

   .services-section,
   .strengths-section {
      padding: 85px 0;
   }

   .services-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 45px;
   }

   .strengths-content {
      padding-left: 0;
   }

   .strengths-visual {
      min-height: 500px;
   }

   .strengths-main-image {
      height: 460px;
   }

   .strengths-list {
      gap: 22px;
   }

   .journey-section {
      margin-top: 90px;
      padding-top: 80px;
   }

   .journey-steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      row-gap: 55px;
   }

   .journey-steps::before {
      display: none;
   }

}


/* =========================================================
   20. MOBILE
========================================================= */

@media (max-width: 767px) {

   .services-section,
   .strengths-section {
      padding: 70px 0;
   }

   .services-section .section-heading h2,
   .journey-section .section-heading h2,
   .strengths-content h2 {
      font-size: 34px;
   }

   .services-grid {
      grid-template-columns: 1fr;
      gap: 18px;
      margin-top: 38px;
   }

   .service-card {
      min-height: 275px;
      padding: 27px;
   }

   .service-icon {
      width: 56px;
      height: 56px;
      margin-bottom: 23px;
   }

   .service-content h3 {
      font-size: 19px;
   }

   .strengths-visual {
      min-height: 410px;
      padding: 10px;
   }

   .strengths-main-image {
      width: 88%;
      height: 380px;
      border-radius: 22px;
   }

   .strengths-floating-card {
      bottom: 30px;
      padding: 14px 16px;
      min-width: 225px;
   }

   .strengths-floating-icon {
      width: 42px;
      height: 42px;
      font-size: 19px;
   }

   .strengths-content {
      margin-top: 15px;
   }

   .strengths-list {
      grid-template-columns: 1fr;
      gap: 18px;
   }

   .journey-section {
      margin-top: 75px;
      padding-top: 70px;
   }

   .journey-steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 45px 18px;
      margin-top: 45px;
   }

}


/* =========================================================
   21. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

   .services-section,
   .strengths-section {
      padding: 60px 0;
   }

   .services-section .section-heading h2,
   .journey-section .section-heading h2,
   .strengths-content h2 {
      font-size: 30px;
   }

   .services-section .section-heading p,
   .journey-section .section-heading p,
   .strengths-content > p {
      font-size: 14px;
   }

   .service-card {
      min-height: 260px;
      padding: 24px;
      border-radius: 18px;
   }

   .service-number {
      top: 23px;
      right: 24px;
   }

   .service-arrow {
      right: 24px;
      bottom: 23px;
   }

   .strengths-visual {
      min-height: 360px;
   }

   .strengths-main-image {
      height: 330px;
      border-radius: 20px;
   }

   .strengths-floating-card {
      left: 0;
      bottom: 23px;
      min-width: 205px;
      padding: 12px 14px;
   }

   .strengths-floating-card strong {
      font-size: 13px;
   }

   .journey-steps {
      grid-template-columns: 1fr;
      gap: 38px;
   }

   .journey-number {
      right: 28%;
   }

   .journey-icon {
      width: 70px;
      height: 70px;
      font-size: 24px;
      margin-bottom: 18px;
   }

   .journey-step p {
      max-width: 270px;
   }

}

 /* =========================================================
    DIVINE DIRECT — ABOUT US
    PART 7 — TESTIMONIALS + CTA + FINAL RESPONSIVE CSS
 ========================================================= */


/* =========================================================
    01. TESTIMONIALS SECTION
 ========================================================= */

.testimonials-section {
   position: relative;
   padding: 110px 0;
   background: #ffffff;
   overflow: hidden;
}

.testimonials-section::before {
   content: "";
   position: absolute;
   width: 420px;
   height: 420px;
   right: -210px;
   top: -210px;
   border-radius: 50%;
   background: rgba(0, 8, 202, 0.035);
   pointer-events: none;
}


/* =========================================================
    02. TESTIMONIAL HEADING
 ========================================================= */

.testimonials-heading {
   max-width: 760px;
   margin: 0 auto 55px;
   text-align: center;
}

.testimonials-heading h2 {
   color: #161920;
   font-size: clamp(34px, 4vw, 52px);
   line-height: 1.15;
   font-weight: 700;
   letter-spacing: -1px;
   margin: 0 0 20px;
}

.testimonials-heading h2 span {
   color: #0008ca;
}

.testimonials-heading p {
   max-width: 680px;
   margin: 0 auto;
   color: #687080;
   font-size: 16px;
   line-height: 1.8;
}


/* =========================================================
    03. TESTIMONIAL GRID
 ========================================================= */

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


/* =========================================================
    04. TESTIMONIAL CARD
 ========================================================= */

.testimonial-card {
   position: relative;
   padding: 32px;
   background: #f7f9fd;
   border: 1px solid #e7ebf3;
   border-radius: 22px;
   transition:
      transform 0.35s ease,
      box-shadow 0.35s ease,
      border-color 0.35s ease;
}

.testimonial-card:hover {
   transform: translateY(-7px);
   border-color: rgba(0, 8, 202, 0.15);
   box-shadow: 0 20px 50px rgba(10, 30, 85, 0.1);
}


/* =========================================================
    05. QUOTE ICON
 ========================================================= */

.testimonial-quote {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 25px;
   border-radius: 13px;
   background: rgba(0, 8, 202, 0.08);
   color: #0008ca;
   font-size: 22px;
}

.testimonial-card blockquote {
   color: #555e70;
   font-size: 15px;
   line-height: 1.85;
   margin: 0 0 28px;
}


/* =========================================================
    06. TESTIMONIAL AUTHOR
 ========================================================= */

.testimonial-author {
   display: flex;
   align-items: center;
   gap: 13px;
   padding-top: 20px;
   border-top: 1px solid #e3e7ef;
}

.testimonial-author-avatar {
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border-radius: 50%;
   background: #0008ca;
   color: #ffffff;
   font-size: 16px;
   font-weight: 700;
}

.testimonial-author h4 {
   color: #161920;
   font-size: 15px;
   line-height: 1.3;
   font-weight: 700;
   margin: 0 0 3px;
}

.testimonial-author span {
   color: #7b8392;
   font-size: 13px;
}


/* =========================================================
    07. TESTIMONIAL RATING
 ========================================================= */

.testimonial-rating {
   display: flex;
   align-items: center;
   gap: 3px;
   margin-bottom: 17px;
}

.testimonial-rating i {
   color: #f2b544;
   font-size: 15px;
}


/* =========================================================
    08. TESTIMONIAL FOOTNOTE
 ========================================================= */

.testimonials-note {
   margin-top: 35px;
   text-align: center;
}

.testimonials-note p {
   color: #8a91a0;
   font-size: 13px;
   margin: 0;
}


/* =========================================================
    09. FINAL CTA SECTION
 ========================================================= */

.about-final-cta {
   position: relative;
   padding: 100px 0;
   background: #0008ca;
   overflow: hidden;
}

.about-final-cta::before {
   content: "";
   position: absolute;
   width: 430px;
   height: 430px;
   left: -220px;
   top: -220px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.12);
}

.about-final-cta::after {
   content: "";
   position: absolute;
   width: 300px;
   height: 300px;
   right: -150px;
   bottom: -150px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.12);
}

.about-final-cta .container {
   position: relative;
   z-index: 2;
}

.final-cta-content {
   max-width: 850px;
   margin: 0 auto;
   text-align: center;
}

.final-cta-content .section-label {
   color: #ffffff;
}

.final-cta-content .section-label::before {
   background: #ffffff;
}

.final-cta-content h2 {
   color: #ffffff;
   font-size: clamp(36px, 5vw, 58px);
   line-height: 1.12;
   font-weight: 700;
   letter-spacing: -1px;
   margin: 0 0 22px;
}

.final-cta-content h2 span {
   color: #c8dcff;
}

.final-cta-content p {
   max-width: 680px;
   margin: 0 auto 35px;
   color: rgba(255, 255, 255, 0.86);
   font-size: 16px;
   line-height: 1.8;
}


/* =========================================================
    10. CTA BUTTONS
 ========================================================= */

.final-cta-buttons {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 14px;
}

.final-cta-buttons .btn {
   min-height: 52px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   padding: 0 25px;
   border-radius: 10px;
   font-weight: 600;
}

.final-cta-primary {
   background: #ffffff;
   color: #0008ca;
   border: 1px solid #ffffff;
}

.final-cta-primary:hover {
   background: #eef3ff;
   color: #0008ca;
   border-color: #eef3ff;
}

.final-cta-secondary {
   background: transparent;
   color: #ffffff;
   border: 1px solid rgba(255, 255, 255, 0.55);
}

.final-cta-secondary:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #ffffff;
   border-color: #ffffff;
}


/* =========================================================
    11. CTA CONTACT DETAILS
 ========================================================= */

.final-cta-contact {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 25px;
   margin-top: 32px;
}

.final-cta-contact a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: rgba(255, 255, 255, 0.8);
   font-size: 14px;
   text-decoration: none;
   transition: color 0.3s ease;
}

.final-cta-contact a:hover {
   color: #ffffff;
}

.final-cta-contact i {
   font-size: 17px;
}


/* =========================================================
    12. TESTIMONIAL MOBILE SLIDER SUPPORT
 ========================================================= */

.testimonials-slider {
   position: relative;
}

.testimonials-navigation {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin-top: 35px;
}

.testimonials-navigation button {
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #e1e5ee;
   border-radius: 50%;
   background: #ffffff;
   color: #0008ca;
   cursor: pointer;
   transition:
      background 0.3s ease,
      color 0.3s ease,
      border-color 0.3s ease;
}

.testimonials-navigation button:hover {
   background: #0008ca;
   color: #ffffff;
   border-color: #0008ca;
}


/* =========================================================
    13. PAGE SPACING FINISHING
 ========================================================= */

.about-page section:first-of-type {
   margin-top: 0;
}

.about-page section:last-of-type {
   margin-bottom: 0;
}

.about-page img {
   max-width: 100%;
}


/* =========================================================
    14. ACCESSIBILITY / FOCUS
 ========================================================= */

.about-page a:focus-visible,
.about-page button:focus-visible {
   outline: 3px solid rgba(0, 8, 202, 0.25);
   outline-offset: 3px;
}


/* =========================================================
    15. TABLET
 ========================================================= */

@media (max-width: 991px) {

   .testimonials-section {
      padding: 85px 0;
   }

   .testimonials-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .testimonial-card:last-child {
      grid-column: 1 / -1;
      max-width: calc(50% - 12px);
      margin: 0 auto;
   }

   .about-final-cta {
      padding: 85px 0;
   }

}


/* =========================================================
    16. MOBILE
 ========================================================= */

@media (max-width: 767px) {

   .testimonials-section {
      padding: 70px 0;
   }

   .testimonials-heading {
      margin-bottom: 40px;
   }

   .testimonials-heading h2 {
      font-size: 34px;
   }

   .testimonials-heading p {
      font-size: 14px;
   }

   .testimonials-grid {
      grid-template-columns: 1fr;
      gap: 18px;
   }

   .testimonial-card {
      padding: 27px;
      border-radius: 18px;
   }

   .testimonial-card:last-child {
      grid-column: auto;
      max-width: none;
   }

   .testimonial-card blockquote {
      font-size: 14px;
      line-height: 1.8;
   }

   .about-final-cta {
      padding: 70px 0;
   }

   .final-cta-content h2 {
      font-size: 36px;
   }

   .final-cta-content p {
      font-size: 14px;
   }

   .final-cta-buttons {
      flex-direction: column;
      width: 100%;
   }

   .final-cta-buttons .btn {
      width: 100%;
      max-width: 320px;
   }

   .final-cta-contact {
      flex-direction: column;
      gap: 12px;
   }

}


/* =========================================================
    17. SMALL MOBILE
 ========================================================= */

@media (max-width: 480px) {

   .testimonials-section {
      padding: 60px 0;
   }

   .testimonials-heading h2 {
      font-size: 30px;
   }

   .testimonial-card {
      padding: 23px;
   }

   .testimonial-quote {
      width: 43px;
      height: 43px;
      font-size: 19px;
   }

   .testimonial-card blockquote {
      margin-bottom: 23px;
   }

   .about-final-cta {
      padding: 60px 0;
   }

   .final-cta-content h2 {
      font-size: 31px;
      letter-spacing: -0.5px;
   }

   .final-cta-buttons .btn {
      min-height: 48px;
      padding: 0 20px;
   }

}


/* =========================================================
    18. REDUCED MOTION
 ========================================================= */

@media (prefers-reduced-motion: reduce) {

   .service-card,
   .service-icon,
   .service-arrow,
   .strengths-main-image img,
   .journey-icon,
   .testimonial-card,
   .about-intro-main-image img,
   .about-intro-small-image img,
   .commitment-main-image img {
      transition: none !important;
   }

}

/* =========================================================
   DIVINE & DIRECT — SERVICES PAGE
   PART 5 / 8 — CSS
   
   Covers:
   01. Global Variables & Reset
   02. Container
   03. Typography
   04. Buttons
   05. Services Hero
   06. B2B Introduction
   07. B2B Services Overview
   08. Why Partner
========================================================= */


/* =========================================================
   01. GLOBAL VARIABLES
========================================================= */

:root {

    --dd-primary: #1519c9;
    --dd-primary-dark: #0d119f;
    --dd-primary-deep: #080c75;

    --dd-navy: #101642;
    --dd-navy-soft: #252a56;

    --dd-white: #ffffff;
    --dd-black: #101010;

    --dd-text: #50546d;
    --dd-text-light: #777b91;

    --dd-lavender: #f4f5ff;
    --dd-lavender-dark: #e9ebff;

    --dd-border: #e7e8f2;
    --dd-border-light: rgba(255, 255, 255, 0.16);

    --dd-gradient:
        linear-gradient(
            135deg,
            #1117c8 0%,
            #252bd9 48%,
            #10149d 100%
        );

    --dd-gradient-dark:
        linear-gradient(
            135deg,
            #070a62 0%,
            #10149b 55%,
            #181dc2 100%
        );

    --dd-shadow-sm:
        0 8px 25px rgba(17, 24, 199, 0.06);

    --dd-shadow:
        0 20px 55px rgba(17, 24, 199, 0.10);

    --dd-shadow-lg:
        0 30px 80px rgba(17, 24, 199, 0.16);

    --dd-radius-sm: 12px;
    --dd-radius: 20px;
    --dd-radius-lg: 30px;

    --dd-transition:
        all 0.35s cubic-bezier(0.22, 1, 0.36, 1);

    --dd-container-width: 1240px;
}


/* =========================================================
   02. PAGE RESET
========================================================= */

.dd-services-page,
.dd-services-page *,
.dd-services-page *::before,
.dd-services-page *::after {
    box-sizing: border-box;
}


.dd-services-page {
    width: 100%;
    overflow: hidden;
    color: var(--dd-navy);
    background: var(--dd-white);
    font-family: inherit;
}


.dd-services-page img {
    display: block;
    max-width: 100%;
}


.dd-services-page a {
    text-decoration: none;
}


.dd-services-page button,
.dd-services-page a {
    -webkit-tap-highlight-color: transparent;
}


.dd-services-page h1,
.dd-services-page h2,
.dd-services-page h3,
.dd-services-page h4,
.dd-services-page p {
    margin-top: 0;
}


.dd-services-page ul {
    padding: 0;
    margin: 0;
    list-style: none;
}


/* =========================================================
   03. CONTAINER
========================================================= */

.dd-container {
    width: min(
        calc(100% - 48px),
        var(--dd-container-width)
    );

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   04. GLOBAL SECTION LABEL
========================================================= */

.dd-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 17px;

    color: var(--dd-primary);

    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}


.dd-section-label::before {
    content: "";

    width: 27px;
    height: 2px;

    border-radius: 10px;

    background: var(--dd-primary);
}


.dd-section-label--light {
    color: rgba(255, 255, 255, 0.82);
}


.dd-section-label--light::before {
    background: rgba(255, 255, 255, 0.82);
}


/* =========================================================
   05. GLOBAL SECTION TITLE
========================================================= */

.dd-section-title {
    margin-bottom: 20px;

    color: var(--dd-navy);

    font-size: clamp(
        34px,
        4vw,
        55px
    );

    font-weight: 750;

    line-height: 1.08;

    letter-spacing: -0.045em;
}


.dd-section-title span {
    display: inline;
    color: var(--dd-primary);
}


.dd-section-heading {
    max-width: 730px;
    margin-bottom: 55px;
}


.dd-section-heading--center {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


.dd-section-heading--center .dd-section-label {
    justify-content: center;
}


.dd-section-heading__description {
    max-width: 690px;

    margin: 0;

    color: var(--dd-text);

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   06. BUTTONS
========================================================= */

.dd-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 54px;

    padding: 0 25px;

    border-radius: 100px;

    font-size: 13px;
    font-weight: 750;

    letter-spacing: 0.01em;

    transition: var(--dd-transition);

    overflow: hidden;
}


.dd-btn i {
    font-size: 12px;

    transition:
        transform 0.35s ease;
}


.dd-btn:hover i {
    transform: translateX(4px);
}


/* Primary */

.dd-btn--primary {
    color: var(--dd-white);

    background: var(--dd-primary);

    box-shadow:
        0 12px 28px rgba(21, 25, 201, 0.22);
}


.dd-btn--primary:hover {
    color: var(--dd-white);

    background: var(--dd-primary-dark);

    transform: translateY(-3px);

    box-shadow:
        0 17px 34px rgba(21, 25, 201, 0.28);
}


/* Outline */

.dd-btn--outline {
    color: var(--dd-white);

    border: 1px solid rgba(255, 255, 255, 0.42);

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

    backdrop-filter: blur(10px);
}


.dd-btn--outline:hover {
    color: var(--dd-primary);

    border-color: var(--dd-white);

    background: var(--dd-white);

    transform: translateY(-3px);
}


/* Light */

.dd-btn--light {
    color: var(--dd-primary);

    background: var(--dd-white);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.14);
}


.dd-btn--light:hover {
    color: var(--dd-primary);

    transform: translateY(-3px);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.20);
}


/* Secondary */

.dd-btn--secondary {
    color: var(--dd-navy);

    background: var(--dd-white);

    border: 1px solid var(--dd-border);
}


.dd-btn--secondary:hover {
    color: var(--dd-primary);

    border-color: var(--dd-primary);

    transform: translateY(-3px);
}


/* =========================================================
   07. SERVICES HERO
========================================================= */

.dd-services-hero {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    background:
        url("../images/services/services-hero.jpg")
        center center /
        cover
        no-repeat;

    isolation: isolate;
}


.dd-services-hero__overlay {
    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(5, 8, 72, 0.94) 0%,
            rgba(8, 12, 100, 0.84) 42%,
            rgba(11, 17, 119, 0.55) 70%,
            rgba(10, 14, 85, 0.34) 100%
        );
}


.dd-services-hero::after {
    content: "";

    position: absolute;

    right: -150px;
    bottom: -220px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.10),
            transparent 67%
        );

    pointer-events: none;
}


.dd-services-hero__container {
    position: relative;

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

    gap: 50px;

    padding-top: 80px;
    padding-bottom: 80px;
}


.dd-services-hero__content {
    width: min(100%, 720px);
}


.dd-services-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 22px;

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

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.18em;
}


.dd-services-hero__dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.10);
}


.dd-services-hero__title {
    max-width: 760px;

    margin-bottom: 25px;

    color: var(--dd-white);

    font-size: clamp(
        48px,
        6vw,
        78px
    );

    font-weight: 750;

    line-height: 0.98;

    letter-spacing: -0.055em;
}


.dd-services-hero__title span {
    display: block;

    color: #aeb4ff;
}


.dd-services-hero__text {
    max-width: 660px;

    margin-bottom: 34px;

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

    font-size: 16px;
    line-height: 1.85;
}


.dd-services-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 13px;
}


.dd-services-hero__badge {
    display: flex;
    align-items: center;
    gap: 14px;

    min-width: 265px;

    padding: 16px 19px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 18px;

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

    backdrop-filter: blur(18px);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.14);
}


.dd-services-hero__badge-icon {
    width: 48px;
    height: 48px;

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

    flex-shrink: 0;

    border-radius: 14px;

    color: var(--dd-primary);

    background: var(--dd-white);

    font-size: 19px;
}


.dd-services-hero__badge-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.dd-services-hero__badge-content strong {
    color: var(--dd-white);

    font-size: 13px;
    font-weight: 750;
}


.dd-services-hero__badge-content span {
    color: rgba(255, 255, 255, 0.60);

    font-size: 11px;

    letter-spacing: 0.02em;
}


.dd-services-hero__scroll {
    position: absolute;

    left: 50%;
    bottom: 28px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 10px;

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

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

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.dd-services-hero__scroll i {
    animation:
        dd-scroll-down 1.8s ease-in-out infinite;
}


@keyframes dd-scroll-down {

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

    50% {
        transform: translateY(5px);
    }

}


/* =========================================================
   08. B2B INTRODUCTION
========================================================= */

.dd-b2b-intro {
    position: relative;

    padding: 125px 0;

    background: var(--dd-white);
}


.dd-b2b-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 90px;
}


/* Visual */

.dd-b2b-intro__visual {
    position: relative;

    padding-right: 35px;
    padding-bottom: 35px;
}


.dd-b2b-intro__image-wrap {
    position: relative;

    min-height: 570px;

    overflow: hidden;

    border-radius:
        28px 28px 28px 90px;

    box-shadow:
        0 28px 70px rgba(16, 22, 66, 0.15);
}


.dd-b2b-intro__image {
    width: 100%;
    height: 100%;

    min-height: 570px;

    object-fit: cover;

    transition:
        transform 0.8s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.dd-b2b-intro__image-wrap:hover
.dd-b2b-intro__image {
    transform: scale(1.045);
}


.dd-b2b-intro__image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5, 9, 74, 0.03),
            rgba(5, 9, 74, 0.28)
        );
}


.dd-b2b-intro__experience {
    position: absolute;

    left: -18px;
    bottom: 10px;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 18px 22px;

    border-radius: 16px;

    color: var(--dd-white);

    background: var(--dd-primary);

    box-shadow:
        0 18px 40px rgba(21, 25, 201, 0.28);
}


.dd-b2b-intro__experience-number {
    font-size: 27px;
    font-weight: 800;

    letter-spacing: -0.04em;
}


.dd-b2b-intro__experience-text {
    padding-left: 14px;

    border-left:
        1px solid rgba(255, 255, 255, 0.30);

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

    line-height: 1.45;

    letter-spacing: 0.15em;
}


.dd-b2b-intro__floating-icon {
    position: absolute;

    right: 0;
    top: 35px;

    width: 66px;
    height: 66px;

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

    border-radius: 20px;

    color: var(--dd-primary);

    background: var(--dd-white);

    box-shadow:
        0 15px 35px rgba(16, 22, 66, 0.13);

    font-size: 23px;
}


/* Content */

.dd-b2b-intro__content {
    padding-bottom: 10px;
}


.dd-b2b-intro__content .dd-section-title {
    max-width: 650px;
}


.dd-b2b-intro__description {
    max-width: 650px;

    margin-bottom: 17px;

    color: var(--dd-text);

    font-size: 15px;

    line-height: 1.85;
}


.dd-b2b-intro__highlights {
    display: grid;

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

    gap: 20px;

    margin-top: 34px;
}


.dd-b2b-intro__highlight {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding: 19px;

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

    border-radius: 17px;

    background: var(--dd-white);

    transition: var(--dd-transition);
}


.dd-b2b-intro__highlight:hover {
    transform: translateY(-5px);

    border-color:
        rgba(21, 25, 201, 0.16);

    box-shadow: var(--dd-shadow-sm);
}


.dd-b2b-intro__highlight-icon {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    border-radius: 12px;

    color: var(--dd-primary);

    background: var(--dd-lavender);

    font-size: 15px;
}


.dd-b2b-intro__highlight h3 {
    margin-bottom: 6px;

    color: var(--dd-navy);

    font-size: 13px;
    font-weight: 750;
}


.dd-b2b-intro__highlight p {
    margin-bottom: 0;

    color: var(--dd-text-light);

    font-size: 11px;

    line-height: 1.65;
}


/* =========================================================
   09. B2B SERVICES OVERVIEW
========================================================= */

.dd-b2b-services {
    position: relative;

    padding: 120px 0;

    background:
        linear-gradient(
            180deg,
            #f7f8ff 0%,
            #f2f4ff 100%
        );
}


.dd-b2b-services::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 0;
    right: 0;

    height: 100px;

    background:
        linear-gradient(
            180deg,
            var(--dd-white),
            transparent
        );

    pointer-events: none;
}


.dd-b2b-services .dd-section-heading {
    position: relative;
    z-index: 1;
}


.dd-b2b-services .dd-section-heading__description {
    margin-left: auto;
    margin-right: auto;
}


/* Services Grid */

.dd-services-grid {
    position: relative;
    z-index: 1;

    display: grid;

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

    gap: 18px;
}


/* Service Card */

.dd-service-card {
    position: relative;

    min-height: 275px;

    display: flex;
    flex-direction: column;

    padding: 27px;

    border:
        1px solid rgba(21, 25, 201, 0.08);

    border-radius: 23px;

    background: var(--dd-white);

    box-shadow:
        0 8px 30px rgba(18, 25, 94, 0.045);

    overflow: hidden;

    transition: var(--dd-transition);
}


.dd-service-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--dd-primary);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform 0.45s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.dd-service-card:hover {
    transform: translateY(-9px);

    border-color:
        rgba(21, 25, 201, 0.15);

    box-shadow:
        0 24px 55px rgba(18, 25, 94, 0.11);
}


.dd-service-card:hover::before {
    transform:
        scaleX(1);
}


/* Number */

.dd-service-card__number {
    position: absolute;

    top: 23px;
    right: 24px;

    color: #dfe1fa;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;
}


.dd-service-card:hover
.dd-service-card__number {
    color: #cdd0ff;
}


/* Icon */

.dd-service-card__icon {
    width: 54px;
    height: 54px;

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

    margin-bottom: 25px;

    border-radius: 16px;

    color: var(--dd-primary);

    background: var(--dd-lavender);

    font-size: 19px;

    transition: var(--dd-transition);
}


.dd-service-card:hover
.dd-service-card__icon {
    color: var(--dd-white);

    background: var(--dd-primary);

    transform:
        translateY(-2px)
        rotate(-3deg);
}


/* Content */

.dd-service-card__content {
    padding-right: 10px;
}


.dd-service-card__content h3 {
    margin-bottom: 10px;

    color: var(--dd-navy);

    font-size: 17px;
    font-weight: 750;

    letter-spacing: -0.02em;
}


.dd-service-card__content p {
    margin-bottom: 0;

    color: var(--dd-text-light);

    font-size: 12px;

    line-height: 1.7;
}


/* Arrow */

.dd-service-card__link {
    position: absolute;

    right: 25px;
    bottom: 25px;

    width: 35px;
    height: 35px;

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

    border-radius: 50%;

    color: var(--dd-primary);

    background: var(--dd-lavender);

    font-size: 11px;

    transition: var(--dd-transition);
}


.dd-service-card:hover
.dd-service-card__link {
    color: var(--dd-white);

    background: var(--dd-primary);

    transform:
        translateX(3px);
}


/* =========================================================
   10. WHY PARTNER
========================================================= */

.dd-why-partner {
    position: relative;

    padding: 120px 0;

    color: var(--dd-white);

    background:
        var(--dd-gradient-dark);

    overflow: hidden;

    isolation: isolate;
}


.dd-why-partner__background {
    position: absolute;
    inset: 0;

    z-index: -1;

    opacity: 0.22;

    background:
        url("../images/services/partner-background.jpg")
        center /
        cover
        no-repeat;

    mix-blend-mode: screen;
}


.dd-why-partner::before {
    content: "";

    position: absolute;

    top: -220px;
    right: -180px;

    width: 560px;
    height: 560px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(132, 140, 255, 0.25),
            transparent 68%
        );

    pointer-events: none;
}


.dd-why-partner::after {
    content: "";

    position: absolute;

    left: -240px;
    bottom: -300px;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 0 0 70px rgba(255, 255, 255, 0.02),
        0 0 0 140px rgba(255, 255, 255, 0.018);

    pointer-events: none;
}


.dd-why-partner__grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 90px;
}


.dd-why-partner__content {
    max-width: 570px;
}


.dd-why-partner__title {
    margin-bottom: 22px;

    color: var(--dd-white);

    font-size: clamp(
        38px,
        4.4vw,
        59px
    );

    font-weight: 750;

    line-height: 1.05;

    letter-spacing: -0.045em;
}


.dd-why-partner__title span {
    display: block;

    color: #aeb4ff;
}


.dd-why-partner__text {
    max-width: 540px;

    margin-bottom: 30px;

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

    font-size: 15px;

    line-height: 1.85;
}


/* Benefits */

.dd-why-partner__benefits {
    display: grid;

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

    gap: 14px;
}


.dd-partner-benefit {
    display: flex;
    align-items: flex-start;

    gap: 16px;

    padding: 25px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 20px;

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

    backdrop-filter: blur(14px);

    transition: var(--dd-transition);
}


.dd-partner-benefit:hover {
    border-color:
        rgba(255, 255, 255, 0.20);

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

    transform: translateY(-6px);
}


.dd-partner-benefit__icon {
    width: 46px;
    height: 46px;

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

    flex-shrink: 0;

    border-radius: 14px;

    color: var(--dd-primary);

    background: var(--dd-white);

    font-size: 16px;
}


.dd-partner-benefit__content h3 {
    margin-bottom: 7px;

    color: var(--dd-white);

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


.dd-partner-benefit__content p {
    margin-bottom: 0;

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

    font-size: 11px;

    line-height: 1.65;
}


/* =========================================================
   11. LARGE DESKTOP REFINEMENT
========================================================= */

@media (min-width: 1500px) {

    .dd-container {
        width: min(
            calc(100% - 80px),
            1320px
        );
    }


    .dd-services-hero {
        min-height: 700px;
    }


    .dd-services-hero__title {
        font-size: 82px;
    }


    .dd-b2b-intro,
    .dd-b2b-services,
    .dd-why-partner {
        padding-top: 140px;
        padding-bottom: 140px;
    }

}


/* =========================================================
   12. TABLET
========================================================= */

@media (max-width: 1100px) {

    .dd-container {
        width: min(
            calc(100% - 40px),
            960px
        );
    }


    .dd-services-hero {
        min-height: 610px;
    }


    .dd-services-hero__container {
        gap: 35px;
    }


    .dd-services-hero__badge {
        min-width: 230px;
    }


    .dd-b2b-intro__grid {
        gap: 55px;
    }


    .dd-b2b-intro__image-wrap,
    .dd-b2b-intro__image {
        min-height: 500px;
    }


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


    .dd-why-partner__grid {
        gap: 55px;
    }

}


/* =========================================================
   13. TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .dd-services-hero {
        min-height: 650px;
    }


    .dd-services-hero__container {
        display: block;

        padding-top: 100px;
        padding-bottom: 100px;
    }


    .dd-services-hero__content {
        max-width: 700px;
    }


    .dd-services-hero__badge {
        margin-top: 35px;

        width: fit-content;
    }


    .dd-b2b-intro__grid {
        grid-template-columns: 1fr;

        gap: 65px;
    }


    .dd-b2b-intro__visual {
        max-width: 650px;

        margin: 0 auto;
    }


    .dd-b2b-intro__content {
        max-width: 700px;

        margin: 0 auto;
    }


    .dd-why-partner__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .dd-why-partner__content {
        max-width: 700px;
    }


    .dd-why-partner__benefits {
        max-width: 760px;
    }

}


/* =========================================================
   14. MOBILE
========================================================= */

@media (max-width: 640px) {

    .dd-container {
        width: calc(100% - 32px);
    }


    .dd-section-title {
        font-size: 34px;

        line-height: 1.08;
    }


    .dd-section-heading {
        margin-bottom: 38px;
    }


    .dd-section-heading__description {
        font-size: 14px;

        line-height: 1.75;
    }


    /* Hero */

    .dd-services-hero {
        min-height: 650px;

        background-position:
            58% center;
    }


    .dd-services-hero__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5, 8, 72, 0.90) 0%,
                rgba(8, 12, 100, 0.82) 65%,
                rgba(8, 12, 75, 0.92) 100%
            );
    }


    .dd-services-hero__container {
        padding-top: 90px;
        padding-bottom: 90px;
    }


    .dd-services-hero__title {
        margin-bottom: 21px;

        font-size: 47px;

        line-height: 0.99;
    }


    .dd-services-hero__text {
        margin-bottom: 27px;

        font-size: 14px;

        line-height: 1.75;
    }


    .dd-services-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }


    .dd-services-hero__actions .dd-btn {
        width: 100%;
    }


    .dd-services-hero__badge {
        width: 100%;
        min-width: 0;

        margin-top: 28px;
    }


    .dd-services-hero__scroll {
        display: none;
    }


    /* Intro */

    .dd-b2b-intro {
        padding: 85px 0;
    }


    .dd-b2b-intro__visual {
        padding-right: 16px;
        padding-bottom: 22px;
    }


    .dd-b2b-intro__image-wrap,
    .dd-b2b-intro__image {
        min-height: 430px;
    }


    .dd-b2b-intro__image-wrap {
        border-radius:
            22px 22px 22px 60px;
    }


    .dd-b2b-intro__experience {
        left: -8px;

        padding: 14px 16px;
    }


    .dd-b2b-intro__experience-number {
        font-size: 22px;
    }


    .dd-b2b-intro__floating-icon {
        right: -1px;
        top: 22px;

        width: 54px;
        height: 54px;

        border-radius: 15px;

        font-size: 18px;
    }


    .dd-b2b-intro__highlights {
        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 27px;
    }


    /* Services */

    .dd-b2b-services {
        padding: 85px 0;
    }


    .dd-services-grid {
        grid-template-columns: 1fr;

        gap: 13px;
    }


    .dd-service-card {
        min-height: 245px;

        padding: 23px;
    }


    .dd-service-card__icon {
        width: 50px;
        height: 50px;

        margin-bottom: 21px;
    }


    /* Why Partner */

    .dd-why-partner {
        padding: 85px 0;
    }


    .dd-why-partner__title {
        font-size: 38px;
    }


    .dd-why-partner__text {
        font-size: 14px;
    }


    .dd-why-partner__benefits {
        grid-template-columns: 1fr;
    }


    .dd-partner-benefit {
        padding: 20px;
    }

}


/* =========================================================
   15. SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .dd-container {
        width: calc(100% - 26px);
    }


    .dd-services-hero {
        min-height: 620px;
    }


    .dd-services-hero__title {
        font-size: 41px;
    }


    .dd-section-title {
        font-size: 31px;
    }


    .dd-b2b-intro__image-wrap,
    .dd-b2b-intro__image {
        min-height: 380px;
    }


    .dd-service-card {
        min-height: 230px;
    }

}


/* =========================================================
   16. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .dd-services-page *,
    .dd-services-page *::before,
    .dd-services-page *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}


/* =========================================================
   DIVINE & DIRECT — SERVICES PAGE
   PART 6 / 8 — CSS

   Covers:
   09. Pilgrimage Package Section
   10. Package Cards
   11. Package Feature Lists
   12. Premium Package Highlight
   13. Package Comparison
   14. B2B Package Flow
========================================================= */


/* =========================================================
   01. PACKAGE SECTION
========================================================= */

.dd-package-section {
    position: relative;

    padding: 125px 0;

    background: #ffffff;

    overflow: hidden;
}


.dd-package-section::before {
    content: "";

    position: absolute;

    top: -220px;
    right: -220px;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(21, 25, 201, 0.07),
            transparent 68%
        );

    pointer-events: none;
}


.dd-package-section::after {
    content: "";

    position: absolute;

    left: -250px;
    bottom: -250px;

    width: 550px;
    height: 550px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(21, 25, 201, 0.045),
            transparent 68%
        );

    pointer-events: none;
}


.dd-package-section .dd-container {
    position: relative;

    z-index: 2;
}


/* =========================================================
   02. PACKAGE INTRO
========================================================= */

.dd-package-intro {
    max-width: 760px;

    margin: 0 auto 60px;

    text-align: center;
}


.dd-package-intro .dd-section-label {
    justify-content: center;
}


.dd-package-intro__title {
    margin-bottom: 20px;

    color: var(--dd-navy);

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

    font-weight: 750;

    line-height: 1.05;

    letter-spacing: -0.045em;
}


.dd-package-intro__title span {
    color: var(--dd-primary);
}


.dd-package-intro__text {
    max-width: 680px;

    margin: 0 auto;

    color: var(--dd-text);

    font-size: 15px;

    line-height: 1.85;
}


/* =========================================================
   03. PACKAGE CARDS
========================================================= */

.dd-package-grid {
    display: grid;

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

    align-items: stretch;

    gap: 20px;
}


.dd-package-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 625px;

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

    border-radius: 27px;

    background: #ffffff;

    overflow: hidden;

    box-shadow:
        0 12px 40px rgba(16, 22, 66, 0.055);

    transition: var(--dd-transition);
}


.dd-package-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 30px 65px rgba(16, 22, 66, 0.13);
}


/* =========================================================
   04. PACKAGE CARD TOP
========================================================= */

.dd-package-card__top {
    position: relative;

    min-height: 205px;

    padding: 30px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f4f5ff,
            #eef0ff
        );
}


.dd-package-card__top::after {
    content: "";

    position: absolute;

    right: -70px;
    top: -80px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    border:
        1px solid rgba(21, 25, 201, 0.08);

    box-shadow:
        0 0 0 30px rgba(21, 25, 201, 0.025),
        0 0 0 60px rgba(21, 25, 201, 0.018);
}


.dd-package-card__tag {
    position: relative;

    z-index: 2;

    display: inline-flex;
    align-items: center;

    min-height: 29px;

    padding: 0 12px;

    margin-bottom: 22px;

    border-radius: 100px;

    color: var(--dd-primary);

    background: rgba(21, 25, 201, 0.08);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.dd-package-card__name {
    position: relative;

    z-index: 2;

    margin-bottom: 9px;

    color: var(--dd-navy);

    font-size: 26px;

    font-weight: 760;

    line-height: 1.05;

    letter-spacing: -0.035em;
}


.dd-package-card__subtitle {
    position: relative;

    z-index: 2;

    margin: 0;

    color: var(--dd-text-light);

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   05. PACKAGE ICON
========================================================= */

.dd-package-card__icon {
    position: absolute;

    right: 28px;
    bottom: 27px;

    z-index: 2;

    width: 53px;
    height: 53px;

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

    border-radius: 16px;

    color: var(--dd-primary);

    background: #ffffff;

    box-shadow:
        0 10px 25px rgba(16, 22, 66, 0.10);

    font-size: 18px;

    transition: var(--dd-transition);
}


.dd-package-card:hover
.dd-package-card__icon {
    color: #ffffff;

    background: var(--dd-primary);

    transform:
        translateY(-3px)
        rotate(-4deg);
}


/* =========================================================
   06. PACKAGE CONTENT
========================================================= */

.dd-package-card__body {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 30px;
}


.dd-package-card__body-title {
    margin-bottom: 20px;

    color: var(--dd-navy);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


/* =========================================================
   07. PACKAGE FEATURE LIST
========================================================= */

.dd-package-features {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


.dd-package-feature {
    display: flex;
    align-items: flex-start;

    gap: 11px;
}


.dd-package-feature__icon {
    width: 22px;
    height: 22px;

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

    flex-shrink: 0;

    margin-top: 1px;

    border-radius: 50%;

    color: var(--dd-primary);

    background: var(--dd-lavender);

    font-size: 8px;
}


.dd-package-feature span {
    color: var(--dd-text);

    font-size: 12px;

    line-height: 1.55;
}


/* =========================================================
   08. PACKAGE SERVICE SUMMARY
========================================================= */

.dd-package-summary {
    display: grid;

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

    gap: 8px;

    margin-top: 26px;
}


.dd-package-summary__item {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px;

    border-radius: 10px;

    background: #f7f8ff;
}


.dd-package-summary__item i {
    color: var(--dd-primary);

    font-size: 10px;
}


.dd-package-summary__item span {
    color: var(--dd-text-light);

    font-size: 9px;

    font-weight: 650;

    line-height: 1.3;
}


/* =========================================================
   09. PACKAGE BUTTON
========================================================= */

.dd-package-card__footer {
    margin-top: auto;

    padding-top: 28px;
}


.dd-package-card__button {
    width: 100%;

    min-height: 50px;

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

    gap: 10px;

    border-radius: 100px;

    color: var(--dd-primary);

    border:
        1px solid rgba(21, 25, 201, 0.16);

    background: #ffffff;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.04em;

    transition: var(--dd-transition);
}


.dd-package-card__button i {
    font-size: 10px;

    transition:
        transform 0.3s ease;
}


.dd-package-card__button:hover {
    color: #ffffff;

    border-color: var(--dd-primary);

    background: var(--dd-primary);

    transform: translateY(-2px);
}


.dd-package-card__button:hover i {
    transform: translateX(4px);
}


/* =========================================================
   10. PREMIUM PACKAGE
========================================================= */

.dd-package-card--premium {
    border:
        1px solid rgba(21, 25, 201, 0.25);

    box-shadow:
        0 20px 55px rgba(21, 25, 201, 0.13);

    transform: translateY(-12px);
}


.dd-package-card--premium:hover {
    transform: translateY(-20px);

    box-shadow:
        0 35px 75px rgba(21, 25, 201, 0.20);
}


.dd-package-card--premium .dd-package-card__top {
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #1218c8 0%,
            #262cdc 52%,
            #10159e 100%
        );
}


.dd-package-card--premium .dd-package-card__top::after {
    border-color:
        rgba(255, 255, 255, 0.10);

    box-shadow:
        0 0 0 30px rgba(255, 255, 255, 0.025),
        0 0 0 60px rgba(255, 255, 255, 0.015);
}


.dd-package-card--premium .dd-package-card__tag {
    color: #ffffff;

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


.dd-package-card--premium .dd-package-card__name {
    color: #ffffff;
}


.dd-package-card--premium .dd-package-card__subtitle {
    color:
        rgba(255, 255, 255, 0.67);
}


.dd-package-card--premium .dd-package-card__icon {
    color: var(--dd-primary);
}


.dd-package-card--premium .dd-package-card__body {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafaff 100%
        );
}


/* =========================================================
   11. PREMIUM RIBBON
========================================================= */

.dd-package-card__ribbon {
    position: absolute;

    top: 18px;
    right: -34px;

    z-index: 10;

    width: 135px;

    padding: 7px 0;

    color: #ffffff;

    background: var(--dd-primary);

    text-align: center;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.14em;

    transform: rotate(45deg);

    box-shadow:
        0 8px 20px rgba(21, 25, 201, 0.20);
}


/* =========================================================
   12. PACKAGE NOTE
========================================================= */

.dd-package-note {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    max-width: 760px;

    margin: 38px auto 0;

    padding: 15px 20px;

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

    border-radius: 13px;

    background: #fafaff;

    text-align: center;
}


.dd-package-note i {
    color: var(--dd-primary);

    font-size: 13px;
}


.dd-package-note span {
    color: var(--dd-text-light);

    font-size: 11px;

    line-height: 1.55;
}


/* =========================================================
   13. PACKAGE COMPARISON
========================================================= */

.dd-package-comparison {
    padding: 120px 0;

    background:
        #f5f6ff;
}


.dd-package-comparison__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 42px;
}


.dd-package-comparison__heading-content {
    max-width: 650px;
}


.dd-package-comparison__heading .dd-section-label {
    margin-bottom: 14px;
}


.dd-package-comparison__heading h2 {
    margin-bottom: 0;

    color: var(--dd-navy);

    font-size: clamp(
        35px,
        4vw,
        52px
    );

    font-weight: 750;

    line-height: 1.05;

    letter-spacing: -0.045em;
}


.dd-package-comparison__heading h2 span {
    color: var(--dd-primary);
}


.dd-package-comparison__heading p {
    max-width: 390px;

    margin: 0;

    color: var(--dd-text);

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   14. COMPARISON TABLE
========================================================= */

.dd-comparison-wrapper {
    width: 100%;

    overflow-x: auto;

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

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 15px 50px rgba(16, 22, 66, 0.07);

    scrollbar-width: thin;
}


.dd-comparison-wrapper::-webkit-scrollbar {
    height: 6px;
}


.dd-comparison-wrapper::-webkit-scrollbar-track {
    background: #f0f1fa;
}


.dd-comparison-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;

    background: #c9ccef;
}


.dd-comparison-table {
    width: 100%;

    min-width: 760px;

    border-collapse: collapse;
}


.dd-comparison-table th {
    padding: 22px 20px;

    border-bottom:
        1px solid var(--dd-border);

    color: var(--dd-text-light);

    background: #fafaff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.10em;

    text-align: left;

    text-transform: uppercase;
}


.dd-comparison-table th:not(:first-child) {
    text-align: center;
}


.dd-comparison-table th:first-child {
    width: 34%;
}


.dd-comparison-table td {
    padding: 19px 20px;

    border-bottom:
        1px solid #eeeeF6;

    color: var(--dd-text);

    font-size: 12px;

    line-height: 1.5;
}


.dd-comparison-table tr:last-child td {
    border-bottom: 0;
}


.dd-comparison-table td:not(:first-child) {
    text-align: center;
}


.dd-comparison-table tbody tr {
    transition:
        background 0.25s ease;
}


.dd-comparison-table tbody tr:hover {
    background: #fafaff;
}


.dd-comparison-table__feature {
    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--dd-navy);

    font-weight: 700;
}


.dd-comparison-table__feature i {
    color: var(--dd-primary);

    font-size: 11px;
}


.dd-comparison-table__check {
    width: 27px;
    height: 27px;

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

    border-radius: 50%;

    color: var(--dd-primary);

    background: var(--dd-lavender);

    font-size: 9px;
}


.dd-comparison-table__premium {
    background:
        rgba(21, 25, 201, 0.035);
}


.dd-comparison-table th.dd-comparison-table__premium {
    color: var(--dd-primary);

    background:
        rgba(21, 25, 201, 0.065);
}


/* =========================================================
   15. PACKAGE LEVEL LEGEND
========================================================= */

.dd-package-levels {
    display: grid;

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

    gap: 15px;

    margin-top: 25px;
}


.dd-package-level {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 15px 18px;

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

    border-radius: 15px;

    background: #ffffff;
}


.dd-package-level__dot {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #cfd2f5;
}


.dd-package-level--standard
.dd-package-level__dot {
    background: #7e84ed;
}


.dd-package-level--premium
.dd-package-level__dot {
    background: var(--dd-primary);
}


.dd-package-level strong {
    display: block;

    margin-bottom: 2px;

    color: var(--dd-navy);

    font-size: 11px;
}


.dd-package-level span {
    display: block;

    color: var(--dd-text-light);

    font-size: 9px;
}


/* =========================================================
   16. B2B PACKAGE FLOW
========================================================= */

.dd-package-flow {
    padding: 120px 0;

    background: #ffffff;
}


.dd-package-flow__heading {
    max-width: 720px;

    margin: 0 auto 60px;

    text-align: center;
}


.dd-package-flow__heading .dd-section-label {
    justify-content: center;
}


.dd-package-flow__heading h2 {
    margin-bottom: 18px;

    color: var(--dd-navy);

    font-size: clamp(
        36px,
        4vw,
        53px
    );

    font-weight: 750;

    line-height: 1.05;

    letter-spacing: -0.045em;
}


.dd-package-flow__heading h2 span {
    color: var(--dd-primary);
}


.dd-package-flow__heading p {
    margin: 0 auto;

    max-width: 620px;

    color: var(--dd-text);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   17. FLOW STEPS
========================================================= */

.dd-package-flow__steps {
    position: relative;

    display: grid;

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

    gap: 25px;
}


.dd-package-flow__steps::before {
    content: "";

    position: absolute;

    top: 38px;
    left: 11%;
    right: 11%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d9dcf5 10%,
            #d9dcf5 90%,
            transparent
        );

    z-index: 0;
}


.dd-flow-step {
    position: relative;

    z-index: 1;

    text-align: center;
}


.dd-flow-step__number {
    width: 76px;
    height: 76px;

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

    margin: 0 auto 25px;

    border:
        1px solid #dfe2fa;

    border-radius: 50%;

    color: var(--dd-primary);

    background: #ffffff;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 10px 30px rgba(16, 22, 66, 0.07);

    transition: var(--dd-transition);
}


.dd-flow-step:hover
.dd-flow-step__number {
    color: #ffffff;

    border-color: var(--dd-primary);

    background: var(--dd-primary);

    transform:
        translateY(-5px);
}


.dd-flow-step__icon {
    display: block;

    margin-bottom: 9px;

    font-size: 20px;
}


.dd-flow-step__number-text {
    display: block;

    font-size: 9px;

    letter-spacing: 0.08em;
}


.dd-flow-step h3 {
    margin-bottom: 8px;

    color: var(--dd-navy);

    font-size: 14px;

    font-weight: 750;
}


.dd-flow-step p {
    max-width: 210px;

    margin: 0 auto;

    color: var(--dd-text-light);

    font-size: 11px;

    line-height: 1.65;
}


/* =========================================================
   18. PACKAGE CTA STRIP
========================================================= */

.dd-package-cta {
    position: relative;

    margin-top: 65px;

    padding: 35px 40px;

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

    gap: 30px;

    border-radius: 24px;

    color: #ffffff;

    background:
        linear-gradient(
            120deg,
            #1116ba,
            #2429d7
        );

    overflow: hidden;

    box-shadow:
        0 22px 55px rgba(21, 25, 201, 0.20);
}


.dd-package-cta::after {
    content: "";

    position: absolute;

    right: -90px;
    top: -130px;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, 0.13);

    box-shadow:
        0 0 0 35px rgba(255, 255, 255, 0.025),
        0 0 0 70px rgba(255, 255, 255, 0.018);
}


.dd-package-cta__content {
    position: relative;

    z-index: 2;
}


.dd-package-cta__content h3 {
    margin-bottom: 7px;

    color: #ffffff;

    font-size: 21px;

    font-weight: 750;

    letter-spacing: -0.025em;
}


.dd-package-cta__content p {
    margin: 0;

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

    font-size: 12px;

    line-height: 1.6;
}


.dd-package-cta .dd-btn {
    position: relative;

    z-index: 3;

    flex-shrink: 0;
}


/* =========================================================
   19. PACKAGE RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1050px) {

    .dd-package-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 14px;
    }


    .dd-package-card__top,
    .dd-package-card__body {
        padding: 24px;
    }


    .dd-package-card__name {
        font-size: 23px;
    }


    .dd-package-card {
        min-height: 600px;
    }


    .dd-package-comparison__heading {
        align-items: flex-start;

        flex-direction: column;
    }


    .dd-package-comparison__heading p {
        max-width: 620px;
    }


    .dd-package-flow__steps {
        gap: 15px;
    }

}


/* =========================================================
   20. PACKAGE RESPONSIVE — 900PX
========================================================= */

@media (max-width: 900px) {

    .dd-package-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dd-package-card--premium {
        transform: none;
    }


    .dd-package-card--premium:hover {
        transform: translateY(-10px);
    }


    .dd-package-flow__steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 45px 25px;
    }


    .dd-package-flow__steps::before {
        display: none;
    }


    .dd-package-levels {
        grid-template-columns: 1fr;
    }


    .dd-package-cta {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* =========================================================
   21. PACKAGE RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 640px) {

    .dd-package-section {
        padding: 85px 0;
    }


    .dd-package-intro {
        margin-bottom: 40px;
    }


    .dd-package-intro__title {
        font-size: 35px;
    }


    .dd-package-intro__text {
        font-size: 13px;

        line-height: 1.75;
    }


    .dd-package-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .dd-package-card {
        min-height: auto;
    }


    .dd-package-card__top {
        min-height: 190px;

        padding: 25px;
    }


    .dd-package-card__body {
        padding: 25px;
    }


    .dd-package-card__name {
        font-size: 25px;
    }


    .dd-package-card--premium {
        transform: none;
    }


    .dd-package-card--premium:hover {
        transform: translateY(-7px);
    }


    .dd-package-card__ribbon {
        top: 17px;
    }


    .dd-package-note {
        align-items: flex-start;

        text-align: left;
    }


    /* Comparison */

    .dd-package-comparison {
        padding: 85px 0;
    }


    .dd-package-comparison__heading {
        margin-bottom: 30px;
    }


    .dd-package-comparison__heading h2 {
        font-size: 34px;
    }


    .dd-package-comparison__heading p {
        font-size: 12px;
    }


    .dd-comparison-wrapper {
        border-radius: 17px;
    }


    .dd-comparison-table {
        min-width: 690px;
    }


    /* Flow */

    .dd-package-flow {
        padding: 85px 0;
    }


    .dd-package-flow__heading {
        margin-bottom: 42px;
    }


    .dd-package-flow__heading h2 {
        font-size: 35px;
    }


    .dd-package-flow__heading p {
        font-size: 13px;
    }


    .dd-package-flow__steps {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .dd-flow-step__number {
        width: 68px;
        height: 68px;

        margin-bottom: 20px;
    }


    .dd-package-cta {
        margin-top: 45px;

        padding: 27px 23px;

        border-radius: 19px;
    }


    .dd-package-cta__content h3 {
        font-size: 19px;
    }


    .dd-package-cta .dd-btn {
        width: 100%;
    }

}


/* =========================================================
   22. SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .dd-package-intro__title {
        font-size: 32px;
    }


    .dd-package-card__top {
        min-height: 180px;
    }


    .dd-package-card__name {
        font-size: 23px;
    }


    .dd-package-summary {
        grid-template-columns: 1fr;
    }


    .dd-package-cta {
        padding: 24px 19px;
    }

}


/* =========================================================
   23. HOVER FALLBACK FOR TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .dd-package-card:hover {
        transform: none;

        box-shadow:
            0 12px 40px rgba(16, 22, 66, 0.055);
    }


    .dd-package-card--premium:hover {
        transform: none;
    }


    .dd-package-card__button:hover {
        transform: none;
    }


    .dd-flow-step:hover
    .dd-flow-step__number {
        transform: none;
    }

}


/* =========================================================
   DIVINE & DIRECT — SERVICES PAGE
   PART 7 / 8 — CSS

   Covers:
   01. Umrah Journey Section
   02. Journey Header
   03. Makkah & Madinah Cards
   04. Hotel Information
   05. Journey Route
   06. Ziyarat Section
   07. Ziyarat Cards
   08. Spiritual Highlights
   09. Itinerary Timeline
   10. Responsive Layout
========================================================= */


/* =========================================================
   01. UMRAH JOURNEY SECTION
========================================================= */

.dd-umrah-journey {
    position: relative;

    padding: 125px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f8ff 100%
        );

    overflow: hidden;
}


.dd-umrah-journey::before {
    content: "";

    position: absolute;

    top: -180px;
    left: -180px;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(21, 25, 201, 0.065),
            transparent 68%
        );

    pointer-events: none;
}


.dd-umrah-journey::after {
    content: "";

    position: absolute;

    right: -180px;
    bottom: -180px;

    width: 460px;
    height: 460px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(21, 25, 201, 0.045),
            transparent 68%
        );

    pointer-events: none;
}


.dd-umrah-journey .dd-container {
    position: relative;

    z-index: 2;
}


/* =========================================================
   02. JOURNEY HEADER
========================================================= */

.dd-umrah-journey__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 60px;
}


.dd-umrah-journey__heading {
    max-width: 680px;
}


.dd-umrah-journey__heading .dd-section-label {
    margin-bottom: 15px;
}


.dd-umrah-journey__title {
    margin-bottom: 0;

    color: var(--dd-navy);

    font-size: clamp(
        40px,
        4.6vw,
        60px
    );

    font-weight: 750;

    line-height: 1.04;

    letter-spacing: -0.05em;
}


.dd-umrah-journey__title span {
    display: block;

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


.dd-umrah-journey__intro {
    max-width: 410px;

    margin: 0;

    color: var(--dd-text);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   03. MAKKAH / MADINAH GRID
========================================================= */

.dd-holy-city-grid {
    display: grid;

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

    gap: 20px;
}


/* =========================================================
   04. HOLY CITY CARD
========================================================= */

.dd-holy-city-card {
    position: relative;

    min-height: 570px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    border-radius: 28px;

    background: #101642;

    isolation: isolate;

    box-shadow:
        0 25px 65px rgba(16, 22, 66, 0.14);

    transition: var(--dd-transition);
}


.dd-holy-city-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 35px 75px rgba(16, 22, 66, 0.20);
}


/* Image */

.dd-holy-city-card__image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: -3;

    transition:
        transform 0.9s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.dd-holy-city-card:hover
.dd-holy-city-card__image {
    transform: scale(1.055);
}


/* Overlay */

.dd-holy-city-card__overlay {
    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            180deg,
            rgba(5, 8, 65, 0.03) 10%,
            rgba(5, 8, 65, 0.16) 35%,
            rgba(5, 8, 65, 0.93) 100%
        );
}


/* Top label */

.dd-holy-city-card__top {
    position: absolute;

    top: 25px;
    left: 25px;
    right: 25px;

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


.dd-holy-city-card__label {
    display: inline-flex;
    align-items: center;

    min-height: 30px;

    padding: 0 13px;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 100px;

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

    background:
        rgba(8, 12, 80, 0.35);

    backdrop-filter: blur(12px);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.dd-holy-city-card__index {
    color:
        rgba(255, 255, 255, 0.55);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.08em;
}


/* Content */

.dd-holy-city-card__content {
    width: 100%;

    padding: 35px;

    color: #ffffff;
}


.dd-holy-city-card__city {
    display: block;

    margin-bottom: 8px;

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

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.dd-holy-city-card__title {
    margin-bottom: 13px;

    color: #ffffff;

    font-size: 37px;

    font-weight: 750;

    line-height: 1;

    letter-spacing: -0.045em;
}


.dd-holy-city-card__description {
    max-width: 480px;

    margin-bottom: 25px;

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

    font-size: 12px;

    line-height: 1.75;
}


/* =========================================================
   05. HOTEL DETAILS
========================================================= */

.dd-holy-city-card__details {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}


.dd-holy-city-card__detail {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 9px 11px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 10px;

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

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

    backdrop-filter: blur(8px);

    font-size: 9px;

    line-height: 1.3;
}


.dd-holy-city-card__detail i {
    color: #aeb4ff;

    font-size: 10px;
}


/* =========================================================
   06. CITY CARD FOOTER
========================================================= */

.dd-holy-city-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 22px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255, 255, 255, 0.12);
}


.dd-holy-city-card__footer span {
    color:
        rgba(255, 255, 255, 0.52);

    font-size: 9px;

    line-height: 1.5;
}


.dd-holy-city-card__arrow {
    width: 40px;
    height: 40px;

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

    flex-shrink: 0;

    border-radius: 50%;

    color: var(--dd-primary);

    background: #ffffff;

    font-size: 11px;

    transition: var(--dd-transition);
}


.dd-holy-city-card:hover
.dd-holy-city-card__arrow {
    transform:
        translateX(4px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.14);
}


/* =========================================================
   07. JOURNEY ROUTE
========================================================= */

.dd-journey-route {
    position: relative;

    margin-top: 35px;

    padding: 27px 30px;

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

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(16, 22, 66, 0.055);
}


.dd-journey-route__label {
    display: block;

    margin-bottom: 22px;

    color: var(--dd-text-light);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.15em;

    text-align: center;

    text-transform: uppercase;
}


.dd-journey-route__track {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 10px;
}


.dd-journey-route__track::before {
    content: "";

    position: absolute;

    top: 15px;

    left: 10%;
    right: 10%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #d9dcf5,
            var(--dd-primary),
            #d9dcf5
        );

    z-index: 0;
}


.dd-journey-route__stop {
    position: relative;

    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


.dd-journey-route__dot {
    width: 31px;
    height: 31px;

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

    margin-bottom: 10px;

    border:
        1px solid #dfe2fa;

    border-radius: 50%;

    color: var(--dd-primary);

    background: #ffffff;

    font-size: 9px;

    box-shadow:
        0 5px 15px rgba(16, 22, 66, 0.08);
}


.dd-journey-route__stop strong {
    margin-bottom: 3px;

    color: var(--dd-navy);

    font-size: 10px;

    font-weight: 800;
}


.dd-journey-route__stop span {
    color: var(--dd-text-light);

    font-size: 8px;
}


/* =========================================================
   08. ZIYARAT SECTION
========================================================= */

.dd-ziyarat-section {
    position: relative;

    padding: 125px 0;

    color: #ffffff;

    background:
        var(--dd-gradient-dark);

    overflow: hidden;

    isolation: isolate;
}


.dd-ziyarat-section__background {
    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        url("../images/services/ziyarat-background.jpg")
        center /
        cover
        no-repeat;

    opacity: 0.17;

    mix-blend-mode: screen;
}


.dd-ziyarat-section::before {
    content: "";

    position: absolute;

    top: -250px;
    right: -200px;

    width: 570px;
    height: 570px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(132, 140, 255, 0.22),
            transparent 68%
        );

    pointer-events: none;
}


.dd-ziyarat-section::after {
    content: "";

    position: absolute;

    left: -180px;
    bottom: -250px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 0 0 55px rgba(255, 255, 255, 0.018),
        0 0 0 110px rgba(255, 255, 255, 0.012);

    pointer-events: none;
}


.dd-ziyarat-section .dd-container {
    position: relative;

    z-index: 2;
}


/* =========================================================
   09. ZIYARAT HEADER
========================================================= */

.dd-ziyarat-section__header {
    max-width: 750px;

    margin-bottom: 58px;
}


.dd-ziyarat-section__header .dd-section-label {
    color:
        rgba(255, 255, 255, 0.72);
}


.dd-ziyarat-section__header .dd-section-label::before {
    background:
        rgba(255, 255, 255, 0.72);
}


.dd-ziyarat-section__title {
    margin-bottom: 20px;

    color: #ffffff;

    font-size: clamp(
        40px,
        4.8vw,
        62px
    );

    font-weight: 750;

    line-height: 1.03;

    letter-spacing: -0.05em;
}


.dd-ziyarat-section__title span {
    color: #aeb4ff;
}


.dd-ziyarat-section__description {
    max-width: 650px;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.85;
}


/* =========================================================
   10. ZIYARAT GRID
========================================================= */

.dd-ziyarat-grid {
    display: grid;

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

    gap: 17px;
}


/* =========================================================
   11. ZIYARAT CARD
========================================================= */

.dd-ziyarat-card {
    position: relative;

    min-height: 285px;

    padding: 28px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 22px;

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

    backdrop-filter: blur(16px);

    overflow: hidden;

    transition: var(--dd-transition);
}


.dd-ziyarat-card::after {
    content: "";

    position: absolute;

    right: -70px;
    bottom: -80px;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.07),
            transparent 68%
        );

    pointer-events: none;
}


.dd-ziyarat-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(255, 255, 255, 0.20);

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

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.16);
}


/* Icon */

.dd-ziyarat-card__icon {
    width: 53px;
    height: 53px;

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

    margin-bottom: 23px;

    border-radius: 16px;

    color: var(--dd-primary);

    background: #ffffff;

    font-size: 17px;

    transition: var(--dd-transition);
}


.dd-ziyarat-card:hover
.dd-ziyarat-card__icon {
    transform:
        translateY(-3px)
        rotate(-3deg);
}


/* Number */

.dd-ziyarat-card__number {
    position: absolute;

    top: 26px;
    right: 27px;

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

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.08em;
}


.dd-ziyarat-card h3 {
    margin-bottom: 9px;

    color: #ffffff;

    font-size: 18px;

    font-weight: 750;

    letter-spacing: -0.02em;
}


.dd-ziyarat-card p {
    max-width: 300px;

    margin-bottom: 20px;

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

    font-size: 11px;

    line-height: 1.7;
}


.dd-ziyarat-card__places {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.dd-ziyarat-card__places span {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 0 9px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 8px;

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

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

    font-size: 8px;

    line-height: 1.3;
}


/* =========================================================
   12. ZIYARAT FEATURE STRIP
========================================================= */

.dd-ziyarat-feature-strip {
    display: grid;

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

    gap: 12px;

    margin-top: 18px;
}


.dd-ziyarat-feature {
    display: flex;
    align-items: center;

    gap: 11px;

    padding: 16px 17px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 14px;

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


.dd-ziyarat-feature i {
    color: #aeb4ff;

    font-size: 13px;
}


.dd-ziyarat-feature span {
    color:
        rgba(255, 255, 255, 0.60);

    font-size: 9px;

    line-height: 1.4;
}


/* =========================================================
   13. ITINERARY SECTION
========================================================= */

.dd-itinerary-section {
    padding: 125px 0;

    background:
        #ffffff;
}


.dd-itinerary-header {
    max-width: 700px;

    margin-bottom: 60px;
}


.dd-itinerary-header .dd-section-label {
    margin-bottom: 14px;
}


.dd-itinerary-title {
    margin-bottom: 18px;

    color: var(--dd-navy);

    font-size: clamp(
        38px,
        4.5vw,
        57px
    );

    font-weight: 750;

    line-height: 1.05;

    letter-spacing: -0.05em;
}


.dd-itinerary-title span {
    color: var(--dd-primary);
}


.dd-itinerary-description {
    max-width: 620px;

    margin: 0;

    color: var(--dd-text);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   14. ITINERARY TIMELINE
========================================================= */

.dd-itinerary-timeline {
    position: relative;

    max-width: 950px;

    margin: 0 auto;
}


.dd-itinerary-timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 35px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            #d8dbf5 5%,
            #d8dbf5 95%,
            transparent
        );
}


/* =========================================================
   15. ITINERARY ITEM
========================================================= */

.dd-itinerary-item {
    position: relative;

    display: grid;

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

    gap: 25px;

    padding-bottom: 35px;
}


.dd-itinerary-item:last-child {
    padding-bottom: 0;
}


/* Number */

.dd-itinerary-item__number {
    position: relative;

    z-index: 2;

    width: 70px;
    height: 70px;

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

    border:
        1px solid #dfe2fa;

    border-radius: 50%;

    color: var(--dd-primary);

    background: #ffffff;

    font-size: 11px;

    font-weight: 800;

    box-shadow:
        0 8px 25px rgba(16, 22, 66, 0.07);
}


/* Content */

.dd-itinerary-item__content {
    padding: 23px 27px;

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

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(16, 22, 66, 0.04);

    transition: var(--dd-transition);
}


.dd-itinerary-item__content:hover {
    border-color:
        rgba(21, 25, 201, 0.14);

    box-shadow:
        0 18px 42px rgba(16, 22, 66, 0.08);

    transform:
        translateX(5px);
}


.dd-itinerary-item__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 8px;
}


.dd-itinerary-item__day {
    color: var(--dd-primary);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.dd-itinerary-item__location {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: var(--dd-text-light);

    font-size: 9px;
}


.dd-itinerary-item__location i {
    color: var(--dd-primary);

    font-size: 9px;
}


.dd-itinerary-item__content h3 {
    margin-bottom: 9px;

    color: var(--dd-navy);

    font-size: 17px;

    font-weight: 750;

    letter-spacing: -0.02em;
}


.dd-itinerary-item__content p {
    margin: 0;

    color: var(--dd-text);

    font-size: 11px;

    line-height: 1.75;
}


/* =========================================================
   16. ITINERARY TAGS
========================================================= */

.dd-itinerary-item__tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 16px;
}


.dd-itinerary-item__tags span {
    display: inline-flex;
    align-items: center;

    min-height: 26px;

    padding: 0 9px;

    border-radius: 8px;

    color: var(--dd-primary);

    background: var(--dd-lavender);

    font-size: 8px;

    font-weight: 700;

    line-height: 1.3;
}


/* =========================================================
   17. SPIRITUAL HIGHLIGHTS
========================================================= */

.dd-spiritual-highlights {
    position: relative;

    padding: 100px 0;

    background:
        #f6f7ff;
}


.dd-spiritual-highlights__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 75px;
}


/* Visual */

.dd-spiritual-highlights__visual {
    position: relative;

    min-height: 500px;

    overflow: hidden;

    border-radius:
        25px 25px 90px 25px;

    box-shadow:
        0 25px 60px rgba(16, 22, 66, 0.13);
}


.dd-spiritual-highlights__visual img {
    width: 100%;
    height: 100%;

    min-height: 500px;

    object-fit: cover;

    transition:
        transform 0.8s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.dd-spiritual-highlights__visual:hover img {
    transform: scale(1.045);
}


.dd-spiritual-highlights__visual::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(5, 8, 65, 0.58)
        );
}


/* Content */

.dd-spiritual-highlights__content {
    max-width: 600px;
}


.dd-spiritual-highlights__content h2 {
    margin-bottom: 18px;

    color: var(--dd-navy);

    font-size: clamp(
        37px,
        4.2vw,
        54px
    );

    font-weight: 750;

    line-height: 1.05;

    letter-spacing: -0.045em;
}


.dd-spiritual-highlights__content h2 span {
    display: block;

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


.dd-spiritual-highlights__content > p {
    margin-bottom: 28px;

    color: var(--dd-text);

    font-size: 13px;

    line-height: 1.8;
}


/* Highlights list */

.dd-spiritual-list {
    display: grid;

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

    gap: 11px;
}


.dd-spiritual-list__item {
    display: flex;
    align-items: center;

    gap: 11px;

    padding: 15px;

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

    border-radius: 14px;

    background: #ffffff;

    transition: var(--dd-transition);
}


.dd-spiritual-list__item:hover {
    border-color:
        rgba(21, 25, 201, 0.15);

    box-shadow:
        var(--dd-shadow-sm);

    transform:
        translateY(-3px);
}


.dd-spiritual-list__icon {
    width: 34px;
    height: 34px;

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

    flex-shrink: 0;

    border-radius: 10px;

    color: var(--dd-primary);

    background: var(--dd-lavender);

    font-size: 12px;
}


.dd-spiritual-list__item span {
    color: var(--dd-navy);

    font-size: 10px;

    font-weight: 700;

    line-height: 1.4;
}


/* =========================================================
   18. JOURNEY CTA
========================================================= */

.dd-journey-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 45px;

    padding: 31px 35px;

    border-radius: 23px;

    color: #ffffff;

    background:
        linear-gradient(
            120deg,
            #1015ad,
            #252bd9
        );

    box-shadow:
        0 20px 50px rgba(21, 25, 201, 0.18);
}


.dd-journey-cta__content h3 {
    margin-bottom: 6px;

    color: #ffffff;

    font-size: 20px;

    font-weight: 750;
}


.dd-journey-cta__content p {
    margin: 0;

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

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   19. TABLET
========================================================= */

@media (max-width: 1050px) {

    .dd-umrah-journey__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }


    .dd-umrah-journey__intro {
        max-width: 620px;
    }


    .dd-holy-city-card {
        min-height: 530px;
    }


    .dd-ziyarat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dd-ziyarat-feature-strip {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dd-spiritual-highlights__grid {
        gap: 50px;
    }

}


/* =========================================================
   20. TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .dd-umrah-journey {
        padding: 100px 0;
    }


    .dd-holy-city-grid {
        grid-template-columns: 1fr;
    }


    .dd-holy-city-card {
        min-height: 560px;
    }


    .dd-spiritual-highlights__grid {
        grid-template-columns: 1fr;
    }


    .dd-spiritual-highlights__visual {
        max-width: 650px;

        min-height: 470px;
    }


    .dd-spiritual-highlights__visual img {
        min-height: 470px;
    }


    .dd-spiritual-highlights__content {
        max-width: 700px;
    }

}


/* =========================================================
   21. MOBILE
========================================================= */

@media (max-width: 640px) {

    /* Journey */

    .dd-umrah-journey {
        padding: 85px 0;
    }


    .dd-umrah-journey__header {
        margin-bottom: 40px;
    }


    .dd-umrah-journey__title {
        font-size: 36px;
    }


    .dd-umrah-journey__intro {
        font-size: 13px;
    }


    /* Holy Cities */

    .dd-holy-city-grid {
        gap: 14px;
    }


    .dd-holy-city-card {
        min-height: 490px;

        border-radius: 22px;
    }


    .dd-holy-city-card__top {
        top: 19px;
        left: 19px;
        right: 19px;
    }


    .dd-holy-city-card__content {
        padding: 25px;
    }


    .dd-holy-city-card__title {
        font-size: 32px;
    }


    .dd-holy-city-card__description {
        font-size: 11px;

        line-height: 1.7;
    }


    .dd-holy-city-card__detail {
        font-size: 8px;
    }


    /* Route */

    .dd-journey-route {
        padding: 23px 15px;

        overflow-x: auto;
    }


    .dd-journey-route__track {
        min-width: 600px;
    }


    /* Ziyarat */

    .dd-ziyarat-section {
        padding: 85px 0;
    }


    .dd-ziyarat-section__header {
        margin-bottom: 40px;
    }


    .dd-ziyarat-section__title {
        font-size: 36px;
    }


    .dd-ziyarat-section__description {
        font-size: 13px;
    }


    .dd-ziyarat-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .dd-ziyarat-card {
        min-height: 255px;

        padding: 24px;
    }


    .dd-ziyarat-feature-strip {
        grid-template-columns: 1fr;
    }


    /* Itinerary */

    .dd-itinerary-section {
        padding: 85px 0;
    }


    .dd-itinerary-header {
        margin-bottom: 42px;
    }


    .dd-itinerary-title {
        font-size: 35px;
    }


    .dd-itinerary-description {
        font-size: 13px;
    }


    .dd-itinerary-timeline::before {
        left: 27px;
    }


    .dd-itinerary-item {
        grid-template-columns: 55px minmax(0, 1fr);

        gap: 14px;

        padding-bottom: 20px;
    }


    .dd-itinerary-item__number {
        width: 55px;
        height: 55px;

        font-size: 9px;
    }


    .dd-itinerary-item__content {
        padding: 19px;
    }


    .dd-itinerary-item__top {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }


    .dd-itinerary-item__content h3 {
        font-size: 15px;
    }


    .dd-itinerary-item__content p {
        font-size: 10px;
    }


    /* Spiritual */

    .dd-spiritual-highlights {
        padding: 85px 0;
    }


    .dd-spiritual-highlights__visual {
        min-height: 400px;

        border-radius:
            20px 20px 60px 20px;
    }


    .dd-spiritual-highlights__visual img {
        min-height: 400px;
    }


    .dd-spiritual-highlights__content h2 {
        font-size: 35px;
    }


    .dd-spiritual-highlights__content > p {
        font-size: 12px;
    }


    .dd-spiritual-list {
        grid-template-columns: 1fr;
    }


    /* CTA */

    .dd-journey-cta {
        align-items: flex-start;

        flex-direction: column;

        margin-top: 30px;

        padding: 25px 21px;

        border-radius: 18px;
    }


    .dd-journey-cta__content h3 {
        font-size: 18px;
    }


    .dd-journey-cta .dd-btn {
        width: 100%;
    }

}


/* =========================================================
   22. SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .dd-umrah-journey__title {
        font-size: 33px;
    }


    .dd-holy-city-card {
        min-height: 455px;
    }


    .dd-holy-city-card__title {
        font-size: 29px;
    }


    .dd-holy-city-card__content {
        padding: 21px;
    }


    .dd-holy-city-card__details {
        gap: 6px;
    }


    .dd-holy-city-card__detail {
        padding: 8px;

        font-size: 7px;
    }


    .dd-ziyarat-section__title {
        font-size: 33px;
    }


    .dd-itinerary-title {
        font-size: 32px;
    }


    .dd-spiritual-highlights__content h2 {
        font-size: 32px;
    }

}


/* =========================================================
   23. TOUCH DEVICE OPTIMIZATION
========================================================= */

@media (hover: none) {

    .dd-holy-city-card:hover {
        transform: none;
    }


    .dd-holy-city-card:hover
    .dd-holy-city-card__image {
        transform: none;
    }


    .dd-ziyarat-card:hover {
        transform: none;
    }


    .dd-itinerary-item__content:hover {
        transform: none;
    }


    .dd-spiritual-list__item:hover {
        transform: none;
    }

}


/* =========================================================
   DIVINE & DIRECT — SERVICES PAGE
   PART 8 / 8 — FINAL CSS

   Covers:
   01. Hajj Services
   02. Ramadan Services
   03. Ziyarat Destinations
   04. Hospitality Services
   05. Transportation
   06. Visa & Documentation
   07. Food & Catering
   08. Laundry & Guest Support
   09. B2B Customization
   10. Partner CTA
   11. Final Responsive Polish
========================================================= */


/* =========================================================
   01. HAJJ SERVICES
========================================================= */

.dd-hajj-section {
    position: relative;

    padding: 125px 0;

    background: #ffffff;

    overflow: hidden;
}


.dd-hajj-section::before {
    content: "";

    position: absolute;

    top: -200px;
    right: -200px;

    width: 480px;
    height: 480px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(21, 25, 201, 0.055),
            transparent 68%
        );

    pointer-events: none;
}


.dd-hajj-section .dd-container {
    position: relative;

    z-index: 2;
}


.dd-hajj-header {
    max-width: 720px;

    margin-bottom: 55px;
}


.dd-hajj-header h2 {
    margin-bottom: 17px;

    color: var(--dd-navy);

    font-size: clamp(
        39px,
        4.5vw,
        58px
    );

    font-weight: 750;

    line-height: 1.04;

    letter-spacing: -0.05em;
}


.dd-hajj-header h2 span {
    color: var(--dd-primary);
}


.dd-hajj-header p {
    max-width: 650px;

    margin: 0;

    color: var(--dd-text);

    font-size: 14px;

    line-height: 1.85;
}


/* =========================================================
   02. HAJJ SERVICE GRID
========================================================= */

.dd-hajj-grid {
    display: grid;

    grid-template-columns:
        1.1fr
        0.9fr;

    gap: 20px;
}


.dd-hajj-main-card {
    position: relative;

    min-height: 500px;

    padding: 38px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    overflow: hidden;

    border-radius: 27px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #10155f,
            #2429c9
        );

    box-shadow:
        0 25px 60px rgba(16, 22, 66, 0.15);
}


.dd-hajj-main-card::before {
    content: "";

    position: absolute;

    top: -130px;
    right: -120px;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    box-shadow:
        0 0 0 40px rgba(255, 255, 255, 0.025),
        0 0 0 80px rgba(255, 255, 255, 0.018);
}


.dd-hajj-main-card__badge {
    position: absolute;

    top: 28px;
    left: 28px;

    display: inline-flex;
    align-items: center;

    min-height: 30px;

    padding: 0 13px;

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 100px;

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

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

    backdrop-filter: blur(10px);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.dd-hajj-main-card__content {
    position: relative;

    z-index: 2;
}


.dd-hajj-main-card h3 {
    margin-bottom: 13px;

    color: #ffffff;

    font-size: 34px;

    font-weight: 750;

    line-height: 1.05;

    letter-spacing: -0.04em;
}


.dd-hajj-main-card p {
    max-width: 520px;

    margin-bottom: 25px;

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

    font-size: 12px;

    line-height: 1.8;
}


.dd-hajj-points {
    display: grid;

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

    gap: 9px;
}


.dd-hajj-point {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px;

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: 10px;

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


.dd-hajj-point i {
    color: #aeb4ff;

    font-size: 9px;
}


.dd-hajj-point span {
    color:
        rgba(255, 255, 255, 0.68);

    font-size: 8px;

    line-height: 1.3;
}


/* =========================================================
   03. HAJJ SUPPORT CARDS
========================================================= */

.dd-hajj-side {
    display: grid;

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

    gap: 14px;
}


.dd-hajj-service {
    padding: 25px;

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

    border-radius: 20px;

    background: #fafaff;

    transition: var(--dd-transition);
}


.dd-hajj-service:hover {
    transform: translateY(-6px);

    border-color:
        rgba(21, 25, 201, 0.14);

    background: #ffffff;

    box-shadow:
        0 18px 40px rgba(16, 22, 66, 0.08);
}


.dd-hajj-service__icon {
    width: 45px;
    height: 45px;

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

    margin-bottom: 20px;

    border-radius: 13px;

    color: var(--dd-primary);

    background: var(--dd-lavender);

    font-size: 14px;
}


.dd-hajj-service h4 {
    margin-bottom: 8px;

    color: var(--dd-navy);

    font-size: 14px;

    font-weight: 750;
}


.dd-hajj-service p {
    margin: 0;

    color: var(--dd-text-light);

    font-size: 10px;

    line-height: 1.7;
}


/* =========================================================
   04. RAMADAN UMRAH
========================================================= */

.dd-ramadan-section {
    position: relative;

    padding: 120px 0;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #080d42,
            #171d8d 55%,
            #0b1052
        );

    overflow: hidden;
}


.dd-ramadan-section::before {
    content: "";

    position: absolute;

    top: -250px;
    left: -200px;

    width: 550px;
    height: 550px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(151, 158, 255, 0.16),
            transparent 68%
        );
}


.dd-ramadan-section::after {
    content: "";

    position: absolute;

    right: -180px;
    bottom: -220px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 0 0 50px rgba(255, 255, 255, 0.018),
        0 0 0 100px rgba(255, 255, 255, 0.012);
}


.dd-ramadan-section .dd-container {
    position: relative;

    z-index: 2;
}


.dd-ramadan-layout {
    display: grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    align-items: center;

    gap: 75px;
}


/* Visual */

.dd-ramadan-visual {
    position: relative;

    min-height: 520px;

    overflow: hidden;

    border-radius:
        25px 90px 25px 25px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.22);
}


.dd-ramadan-visual img {
    width: 100%;
    height: 100%;

    min-height: 520px;

    object-fit: cover;
}


.dd-ramadan-visual::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 30%,
            rgba(4, 7, 45, 0.72)
        );
}


/* Content */

.dd-ramadan-content {
    max-width: 620px;
}


.dd-ramadan-content .dd-section-label {
    color:
        rgba(255, 255, 255, 0.72);
}


.dd-ramadan-content .dd-section-label::before {
    background:
        rgba(255, 255, 255, 0.72);
}


.dd-ramadan-content h2 {
    margin-bottom: 18px;

    color: #ffffff;

    font-size: clamp(
        39px,
        4.5vw,
        58px
    );

    font-weight: 750;

    line-height: 1.04;

    letter-spacing: -0.05em;
}


.dd-ramadan-content h2 span {
    color: #aeb4ff;
}


.dd-ramadan-content > p {
    margin-bottom: 30px;

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

    font-size: 13px;

    line-height: 1.85;
}


/* Ramadan features */

.dd-ramadan-features {
    display: grid;

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

    gap: 10px;
}


.dd-ramadan-feature {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 14px;

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: 12px;

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


.dd-ramadan-feature i {
    color: #aeb4ff;

    font-size: 11px;
}


.dd-ramadan-feature span {
    color:
        rgba(255, 255, 255, 0.65);

    font-size: 9px;

    line-height: 1.4;
}


/* =========================================================
   05. HOSPITALITY SERVICES
========================================================= */

.dd-hospitality-section {
    padding: 120px 0;

    background: #f7f8ff;
}


.dd-hospitality-header {
    max-width: 720px;

    margin-bottom: 50px;
}


.dd-hospitality-header h2 {
    margin-bottom: 17px;

    color: var(--dd-navy);

    font-size: clamp(
        39px,
        4.5vw,
        58px
    );

    font-weight: 750;

    line-height: 1.04;

    letter-spacing: -0.05em;
}


.dd-hospitality-header h2 span {
    color: var(--dd-primary);
}


.dd-hospitality-header p {
    max-width: 630px;

    margin: 0;

    color: var(--dd-text);

    font-size: 13px;

    line-height: 1.8;
}


.dd-hospitality-grid {
    display: grid;

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

    gap: 14px;
}


.dd-hospitality-card {
    position: relative;

    min-height: 260px;

    padding: 25px;

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

    border-radius: 20px;

    background: #ffffff;

    overflow: hidden;

    transition: var(--dd-transition);
}


.dd-hospitality-card::after {
    content: "";

    position: absolute;

    right: -65px;
    bottom: -70px;

    width: 170px;
    height: 170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(21, 25, 201, 0.055),
            transparent 68%
        );
}


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

    border-color:
        rgba(21, 25, 201, 0.13);

    box-shadow:
        0 20px 45px rgba(16, 22, 66, 0.08);
}


.dd-hospitality-card__icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 21px;

    border-radius: 14px;

    color: var(--dd-primary);

    background: var(--dd-lavender);

    font-size: 15px;
}


.dd-hospitality-card h3 {
    position: relative;

    z-index: 2;

    margin-bottom: 8px;

    color: var(--dd-navy);

    font-size: 15px;

    font-weight: 750;
}


.dd-hospitality-card p {
    position: relative;

    z-index: 2;

    margin: 0;

    color: var(--dd-text-light);

    font-size: 10px;

    line-height: 1.7;
}


/* =========================================================
   06. B2B CUSTOMIZATION
========================================================= */

.dd-b2b-section {
    position: relative;

    padding: 125px 0;

    background: #ffffff;

    overflow: hidden;
}


.dd-b2b-layout {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: center;

    gap: 75px;
}


.dd-b2b-content {
    max-width: 620px;
}


.dd-b2b-content h2 {
    margin-bottom: 18px;

    color: var(--dd-navy);

    font-size: clamp(
        38px,
        4.4vw,
        56px
    );

    font-weight: 750;

    line-height: 1.04;

    letter-spacing: -0.05em;
}


.dd-b2b-content h2 span {
    color: var(--dd-primary);
}


.dd-b2b-content > p {
    margin-bottom: 30px;

    color: var(--dd-text);

    font-size: 13px;

    line-height: 1.85;
}


/* B2B checklist */

.dd-b2b-list {
    display: flex;
    flex-direction: column;

    gap: 11px;
}


.dd-b2b-list__item {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 13px 15px;

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

    border-radius: 13px;

    background: #fafaff;

    transition: var(--dd-transition);
}


.dd-b2b-list__item:hover {
    transform: translateX(4px);

    border-color:
        rgba(21, 25, 201, 0.13);

    background: #ffffff;

    box-shadow:
        0 10px 25px rgba(16, 22, 66, 0.05);
}


.dd-b2b-list__icon {
    width: 33px;
    height: 33px;

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

    flex-shrink: 0;

    border-radius: 9px;

    color: var(--dd-primary);

    background: var(--dd-lavender);

    font-size: 10px;
}


.dd-b2b-list__item span {
    color: var(--dd-navy);

    font-size: 10px;

    font-weight: 700;

    line-height: 1.4;
}


/* =========================================================
   07. B2B VISUAL
========================================================= */

.dd-b2b-visual {
    position: relative;

    min-height: 520px;

    padding: 30px;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #f0f1ff,
            #fafaff
        );

    overflow: hidden;
}


.dd-b2b-visual::before {
    content: "";

    position: absolute;

    top: -150px;
    right: -120px;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    border:
        1px solid rgba(21, 25, 201, 0.08);

    box-shadow:
        0 0 0 40px rgba(21, 25, 201, 0.025),
        0 0 0 80px rgba(21, 25, 201, 0.015);
}


.dd-b2b-visual img {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    min-height: 460px;

    object-fit: cover;

    border-radius: 22px;

    box-shadow:
        0 20px 50px rgba(16, 22, 66, 0.13);
}


/* Floating badge */

.dd-b2b-badge {
    position: absolute;

    left: 12px;
    bottom: 35px;

    z-index: 4;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 13px 17px;

    border:
        1px solid rgba(255, 255, 255, 0.7);

    border-radius: 14px;

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

    backdrop-filter: blur(15px);

    box-shadow:
        0 15px 35px rgba(16, 22, 66, 0.13);
}


.dd-b2b-badge__icon {
    width: 34px;
    height: 34px;

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

    border-radius: 10px;

    color: #ffffff;

    background: var(--dd-primary);

    font-size: 11px;
}


.dd-b2b-badge strong {
    display: block;

    margin-bottom: 2px;

    color: var(--dd-navy);

    font-size: 10px;
}


.dd-b2b-badge span {
    display: block;

    color: var(--dd-text-light);

    font-size: 8px;
}


/* =========================================================
   08. SERVICE MATRIX
========================================================= */

.dd-service-matrix {
    padding: 115px 0;

    background: #f6f7ff;
}


.dd-service-matrix__header {
    max-width: 700px;

    margin-bottom: 45px;
}


.dd-service-matrix__header h2 {
    margin-bottom: 15px;

    color: var(--dd-navy);

    font-size: clamp(
        37px,
        4.3vw,
        54px
    );

    font-weight: 750;

    line-height: 1.05;

    letter-spacing: -0.045em;
}


.dd-service-matrix__header h2 span {
    color: var(--dd-primary);
}


.dd-service-matrix__header p {
    margin: 0;

    color: var(--dd-text);

    font-size: 13px;

    line-height: 1.8;
}


.dd-service-matrix__grid {
    display: grid;

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

    gap: 13px;
}


.dd-service-matrix__item {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 17px;

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

    border-radius: 15px;

    background: #ffffff;

    transition: var(--dd-transition);
}


.dd-service-matrix__item:hover {
    transform: translateY(-4px);

    border-color:
        rgba(21, 25, 201, 0.13);

    box-shadow:
        0 12px 30px rgba(16, 22, 66, 0.06);
}


.dd-service-matrix__icon {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 10px;

    color: var(--dd-primary);

    background: var(--dd-lavender);

    font-size: 11px;
}


.dd-service-matrix__item strong {
    display: block;

    margin-bottom: 3px;

    color: var(--dd-navy);

    font-size: 10px;
}


.dd-service-matrix__item span {
    display: block;

    color: var(--dd-text-light);

    font-size: 8px;

    line-height: 1.4;
}


/* =========================================================
   09. FINAL B2B CTA
========================================================= */

.dd-final-service-cta {
    position: relative;

    padding: 120px 0;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #080c4a,
            #151b9c 52%,
            #090d4c
        );

    overflow: hidden;

    isolation: isolate;
}


.dd-final-service-cta::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -300px;
    right: -200px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(153, 160, 255, 0.18),
            transparent 68%
        );
}


.dd-final-service-cta::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    bottom: -300px;
    left: -180px;

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    box-shadow:
        0 0 0 60px rgba(255, 255, 255, 0.018);
}


.dd-final-service-cta .dd-container {
    position: relative;

    z-index: 2;
}


.dd-final-service-cta__content {
    max-width: 780px;

    margin: 0 auto;

    text-align: center;
}


.dd-final-service-cta__label {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 23px;

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.dd-final-service-cta__label::before {
    content: "";

    width: 22px;
    height: 1px;

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


.dd-final-service-cta h2 {
    margin-bottom: 20px;

    color: #ffffff;

    font-size: clamp(
        42px,
        5vw,
        68px
    );

    font-weight: 750;

    line-height: 1.02;

    letter-spacing: -0.055em;
}


.dd-final-service-cta h2 span {
    color: #aeb4ff;
}


.dd-final-service-cta p {
    max-width: 650px;

    margin: 0 auto 30px;

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

    font-size: 13px;

    line-height: 1.85;
}


.dd-final-service-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;
}


.dd-final-service-cta__actions .dd-btn {
    min-width: 155px;
}


/* =========================================================
   10. FINAL TRUST STRIP
========================================================= */

.dd-final-trust {
    display: grid;

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

    max-width: 900px;

    margin: 55px auto 0;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 18px;

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

    backdrop-filter: blur(15px);
}


.dd-final-trust__item {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 70px;

    padding: 12px;

    border-right:
        1px solid rgba(255, 255, 255, 0.08);
}


.dd-final-trust__item:last-child {
    border-right: 0;
}


.dd-final-trust__item i {
    color: #aeb4ff;

    font-size: 12px;
}


.dd-final-trust__item span {
    color:
        rgba(255, 255, 255, 0.61);

    font-size: 8px;

    font-weight: 700;

    line-height: 1.4;
}


/* =========================================================
   11. FINAL SERVICE PAGE SPACING
========================================================= */

.dd-service-page > section:last-of-type {
    margin-bottom: 0;
}


.dd-service-page img {
    max-width: 100%;
}


/* =========================================================
   12. IMAGE LOADING
========================================================= */

.dd-service-page img {
    display: block;

    background:
        linear-gradient(
            135deg,
            #f1f2ff,
            #fafaff
        );
}


/* =========================================================
   13. LINK RESET
========================================================= */

.dd-service-page a {
    text-decoration: none;
}


/* =========================================================
   14. BUTTON CONSISTENCY
========================================================= */

.dd-service-page .dd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 48px;

    padding: 0 20px;

    border-radius: 100px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.03em;

    transition: var(--dd-transition);
}


.dd-service-page .dd-btn i {
    font-size: 9px;

    transition:
        transform 0.3s ease;
}


.dd-service-page .dd-btn:hover i {
    transform:
        translateX(4px);
}


/* =========================================================
   15. ACCESSIBILITY
========================================================= */

.dd-service-page a:focus-visible,
.dd-service-page button:focus-visible {
    outline:
        2px solid var(--dd-primary);

    outline-offset: 4px;
}


/* =========================================================
   16. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .dd-service-page *,
    .dd-service-page *::before,
    .dd-service-page *::after {
        scroll-behavior: auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}


/* =========================================================
   17. LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .dd-hajj-grid {
        grid-template-columns: 1fr;
    }


    .dd-hajj-main-card {
        min-height: 450px;
    }


    .dd-hospitality-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dd-service-matrix__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dd-b2b-layout {
        gap: 50px;
    }

}


/* =========================================================
   18. TABLET
========================================================= */

@media (max-width: 900px) {

    .dd-hajj-section,
    .dd-ramadan-section,
    .dd-hospitality-section,
    .dd-b2b-section,
    .dd-service-matrix,
    .dd-final-service-cta {
        padding-top: 95px;

        padding-bottom: 95px;
    }


    .dd-ramadan-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .dd-ramadan-visual {
        max-width: 650px;

        min-height: 460px;
    }


    .dd-ramadan-visual img {
        min-height: 460px;
    }


    .dd-b2b-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .dd-b2b-content {
        max-width: 700px;
    }


    .dd-b2b-visual {
        max-width: 700px;

        min-height: 470px;
    }


    .dd-b2b-visual img {
        min-height: 410px;
    }


    .dd-final-trust {
        max-width: 700px;
    }

}


/* =========================================================
   19. MOBILE — 640PX
========================================================= */

@media (max-width: 640px) {

    /* ---------------------------------------------
       Hajj
    --------------------------------------------- */

    .dd-hajj-section {
        padding: 85px 0;
    }


    .dd-hajj-header {
        margin-bottom: 38px;
    }


    .dd-hajj-header h2 {
        font-size: 35px;
    }


    .dd-hajj-header p {
        font-size: 12px;
    }


    .dd-hajj-main-card {
        min-height: 470px;

        padding: 25px;

        border-radius: 22px;
    }


    .dd-hajj-main-card h3 {
        font-size: 29px;
    }


    .dd-hajj-main-card p {
        font-size: 10px;
    }


    .dd-hajj-points {
        grid-template-columns: 1fr;
    }


    .dd-hajj-side {
        grid-template-columns: 1fr;
    }


    /* ---------------------------------------------
       Ramadan
    --------------------------------------------- */

    .dd-ramadan-section {
        padding: 85px 0;
    }


    .dd-ramadan-layout {
        gap: 35px;
    }


    .dd-ramadan-visual {
        min-height: 390px;

        border-radius:
            20px 60px 20px 20px;
    }


    .dd-ramadan-visual img {
        min-height: 390px;
    }


    .dd-ramadan-content h2 {
        font-size: 35px;
    }


    .dd-ramadan-content > p {
        font-size: 12px;
    }


    .dd-ramadan-features {
        grid-template-columns: 1fr;
    }


    /* ---------------------------------------------
       Hospitality
    --------------------------------------------- */

    .dd-hospitality-section {
        padding: 85px 0;
    }


    .dd-hospitality-header {
        margin-bottom: 35px;
    }


    .dd-hospitality-header h2 {
        font-size: 35px;
    }


    .dd-hospitality-grid {
        grid-template-columns: 1fr;

        gap: 11px;
    }


    .dd-hospitality-card {
        min-height: auto;

        padding: 23px;
    }


    /* ---------------------------------------------
       B2B
    --------------------------------------------- */

    .dd-b2b-section {
        padding: 85px 0;
    }


    .dd-b2b-content h2 {
        font-size: 35px;
    }


    .dd-b2b-content > p {
        font-size: 12px;
    }


    .dd-b2b-visual {
        min-height: 390px;

        padding: 18px;

        border-radius: 21px;
    }


    .dd-b2b-visual img {
        min-height: 350px;

        border-radius: 16px;
    }


    .dd-b2b-badge {
        left: 8px;
        bottom: 24px;

        padding: 10px 12px;
    }


    /* ---------------------------------------------
       Matrix
    --------------------------------------------- */

    .dd-service-matrix {
        padding: 85px 0;
    }


    .dd-service-matrix__header {
        margin-bottom: 35px;
    }


    .dd-service-matrix__header h2 {
        font-size: 34px;
    }


    .dd-service-matrix__grid {
        grid-template-columns: 1fr;
    }


    /* ---------------------------------------------
       Final CTA
    --------------------------------------------- */

    .dd-final-service-cta {
        padding: 85px 0;
    }


    .dd-final-service-cta h2 {
        font-size: 39px;
    }


    .dd-final-service-cta p {
        font-size: 12px;

        line-height: 1.75;
    }


    .dd-final-service-cta__actions {
        align-items: stretch;

        flex-direction: column;
    }


    .dd-final-service-cta__actions .dd-btn {
        width: 100%;
    }


    .dd-final-trust {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        margin-top: 40px;
    }


    .dd-final-trust__item {
        min-height: 65px;
    }


    .dd-final-trust__item:nth-child(2) {
        border-right: 0;
    }


    .dd-final-trust__item:nth-child(-n + 2) {
        border-bottom:
            1px solid rgba(255, 255, 255, 0.08);
    }

}


/* =========================================================
   20. SMALL MOBILE — 390PX
========================================================= */

@media (max-width: 390px) {

    .dd-hajj-header h2,
    .dd-ramadan-content h2,
    .dd-hospitality-header h2,
    .dd-b2b-content h2 {
        font-size: 32px;
    }


    .dd-final-service-cta h2 {
        font-size: 35px;
    }


    .dd-hajj-main-card {
        min-height: 500px;

        padding: 21px;
    }


    .dd-hajj-main-card__badge {
        top: 20px;
        left: 20px;
    }


    .dd-hajj-service {
        padding: 21px;
    }


    .dd-ramadan-visual {
        min-height: 350px;
    }


    .dd-ramadan-visual img {
        min-height: 350px;
    }


    .dd-b2b-visual {
        min-height: 350px;

        padding: 13px;
    }


    .dd-b2b-visual img {
        min-height: 320px;
    }


    .dd-final-trust__item {
        padding: 9px;
    }


    .dd-final-trust__item span {
        font-size: 7px;
    }

}


/* =========================================================
   21. ULTRA SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .dd-hajj-main-card h3 {
        font-size: 26px;
    }


    .dd-final-service-cta h2 {
        font-size: 32px;
    }


    .dd-final-trust {
        grid-template-columns: 1fr;
    }


    .dd-final-trust__item {
        border-right: 0;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.08);
    }


    .dd-final-trust__item:last-child {
        border-bottom: 0;
    }

}


/* =========================================================
   22. PRINT SAFETY
========================================================= */

@media print {

    .dd-service-page {
        background: #ffffff;
    }


    .dd-service-page section {
        break-inside: avoid;
    }


    .dd-service-page .dd-btn,
    .dd-service-page video {
        display: none;
    }

}


/* =========================================================
   23. FINAL CSS SAFETY
========================================================= */

.dd-service-page {
    width: 100%;

    overflow: hidden;
}


.dd-service-page section {
    position: relative;
}


.dd-service-page h1,
.dd-service-page h2,
.dd-service-page h3,
.dd-service-page h4,
.dd-service-page p {
    margin-top: 0;
}


.dd-service-page ul,
.dd-service-page ol {
    margin: 0;

    padding: 0;

    list-style: none;
}


/* =========================================================
   24. FINAL PAGE POLISH
========================================================= */

.dd-service-page .dd-section-label {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 16px;

    color: var(--dd-primary);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.dd-service-page .dd-section-label::before {
    content: "";

    width: 24px;
    height: 1px;

    background: var(--dd-primary);
}


.dd-service-page .dd-container {
    width: min(
        calc(100% - 40px),
        1180px
    );

    margin-left: auto;
    margin-right: auto;
}


@media (max-width: 640px) {

    .dd-service-page .dd-container {
        width: min(
            calc(100% - 30px),
            1180px
        );
    }

}


/* =========================================================
   END OF SERVICES PAGE CSS
========================================================= */


/* =========================================================
   DIVINE DIRECT — UMRAH PAGE
   PART 1
   COMPLETE CSS
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

.dd-umrah-page {
   width: 100%;
   overflow: hidden;
   background: #ffffff;
}

.dd-u-container {
   width: min(1180px, calc(100% - 48px));
   margin: 0 auto;
}

.dd-u-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 9px;

   margin-bottom: 16px;

   color: #2028d8;

   font-size: 10px;
   font-weight: 800;

   letter-spacing: 0.18em;
   line-height: 1;

   text-transform: uppercase;
}

.dd-u-eyebrow::before {
   content: "";

   width: 28px;
   height: 2px;

   border-radius: 10px;

   background: #2028d8;
}

.dd-u-primary-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;

   gap: 10px;

   min-height: 51px;

   padding: 0 23px;

   border-radius: 100px;

   background: #2028d8;
   color: #ffffff;

   font-size: 11px;
   font-weight: 800;

   text-decoration: none;

   box-shadow:
      0 14px 35px rgba(32,40,216,0.18);

   transition:
      transform .3s ease,
      background .3s ease,
      box-shadow .3s ease;
}

.dd-u-primary-btn:hover {
   color: #ffffff;

   background: #151bc4;

   transform: translateY(-3px);

   box-shadow:
      0 20px 45px rgba(32,40,216,0.25);
}

.dd-u-primary-btn i {
   transition: transform .3s ease;
}

.dd-u-primary-btn:hover i {
   transform: translateX(4px);
}


/* =========================================================
   SECTION 01 — INTRO
========================================================= */

.dd-u-intro {
   position: relative;

   padding: 120px 0;

   background:
      linear-gradient(
         180deg,
         #ffffff 0%,
         #f8f9ff 100%
      );
}

.dd-u-intro::before {
   content: "";

   position: absolute;

   width: 500px;
   height: 500px;

   top: -280px;
   right: -200px;

   border-radius: 50%;

   background:
      radial-gradient(
         circle,
         rgba(32,40,216,.06),
         transparent 68%
      );
}

.dd-u-intro-grid {
   position: relative;
   z-index: 2;

   display: grid;

   grid-template-columns:
      minmax(0, .95fr)
      minmax(0, 1.05fr);

   gap: 85px;

   align-items: center;
}


/* Visual */

.dd-u-intro-visual {
   position: relative;

   min-height: 570px;

   padding: 15px;
}

.dd-u-intro-image {
   width: 90%;
   height: 535px;

   margin-left: auto;

   overflow: hidden;

   border-radius: 30px;

   background: #111747;

   box-shadow:
      0 30px 75px rgba(15,25,90,.15);
}

.dd-u-intro-image img {
   width: 100%;
   height: 100%;

   display: block;

   object-fit: cover;

   transition: transform .8s ease;
}

.dd-u-intro-image:hover img {
   transform: scale(1.045);
}

.dd-u-intro-floating {
   position: absolute;

   left: 0;
   bottom: 65px;

   z-index: 4;

   display: flex;
   align-items: center;

   gap: 13px;

   min-width: 245px;

   padding: 17px 19px;

   border-radius: 17px;

   background: #ffffff;

   box-shadow:
      0 20px 55px rgba(15,25,90,.16);
}

.dd-u-intro-floating-icon {
   width: 48px;
   height: 48px;

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

   border-radius: 13px;

   background: #2028d8;
   color: #ffffff;

   font-size: 18px;
}

.dd-u-intro-floating span {
   display: block;

   margin-bottom: 4px;

   color: #80869a;

   font-size: 8px;
   font-weight: 800;

   letter-spacing: .13em;
}

.dd-u-intro-floating strong {
   display: block;

   color: #151a45;

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

.dd-u-intro-badge {
   position: absolute;

   top: 80px;
   right: -5px;

   z-index: 4;

   display: flex;
   align-items: center;

   gap: 8px;

   padding: 10px 14px;

   border-radius: 100px;

   background: #111747;
   color: #ffffff;

   font-size: 8px;
   font-weight: 750;

   box-shadow:
      0 12px 30px rgba(15,25,80,.18);
}

.dd-u-intro-badge i {
   width: 19px;
   height: 19px;

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

   border-radius: 50%;

   background: #ffffff;
   color: #2028d8;

   font-size: 7px;
}


/* Intro Content */

.dd-u-intro-content h2 {
   max-width: 650px;

   margin: 0 0 25px;

   color: #111747;

   font-size: clamp(42px,4.5vw,62px);

   font-weight: 750;

   line-height: 1.04;

   letter-spacing: -.055em;
}

.dd-u-intro-content h2 span {
   color: #2028d8;
}

.dd-u-intro-content p {
   max-width: 630px;

   margin: 0 0 16px;

   color: #70778b;

   font-size: 14px;

   line-height: 1.85;
}

.dd-u-intro-points {
   display: grid;

   grid-template-columns: 1fr 1fr;

   gap: 10px 20px;

   margin: 28px 0 30px;
}

.dd-u-intro-points div {
   display: flex;
   align-items: center;

   gap: 9px;

   color: #51596f;

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

.dd-u-intro-points i {
   width: 20px;
   height: 20px;

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

   border-radius: 50%;

   background: #eef0ff;
   color: #2028d8;

   font-size: 7px;
}


/* =========================================================
   SECTION 02 — PACKAGES
========================================================= */

.dd-u-packages {
   position: relative;

   padding: 120px 0;

   background: #ffffff;
}

.dd-u-section-heading {
   max-width: 820px;

   margin: 0 auto 55px;

   text-align: center;
}

.dd-u-section-heading h2 {
   margin: 0;

   color: #111747;

   font-size: clamp(40px,4.5vw,59px);

   font-weight: 750;

   line-height: 1.04;

   letter-spacing: -.055em;
}

.dd-u-section-heading h2 span {
   color: #2028d8;
}

.dd-u-section-heading p {
   max-width: 680px;

   margin: 20px auto 0;

   color: #747b90;

   font-size: 13px;

   line-height: 1.8;
}


/* Package Grid */

.dd-u-package-grid {
   display: grid;

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

   gap: 20px;

   align-items: stretch;
}

.dd-u-package-card {
   position: relative;

   display: flex;
   flex-direction: column;

   padding: 29px;

   border: 1px solid #e1e5ef;

   border-radius: 24px;

   background: #ffffff;

   box-shadow:
      0 12px 40px rgba(20,30,100,.05);

   overflow: hidden;

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

.dd-u-package-card::before {
   content: "";

   position: absolute;

   width: 240px;
   height: 240px;

   top: -155px;
   right: -90px;

   border-radius: 50%;

   border: 1px solid rgba(32,40,216,.06);
}

.dd-u-package-card:hover {
   transform: translateY(-8px);

   border-color: rgba(32,40,216,.18);

   box-shadow:
      0 25px 60px rgba(20,30,100,.10);
}

.dd-u-package-card--standard {
   background:
      linear-gradient(180deg,#ffffff,#fafaff);
}

.dd-u-package-card--premium {
   border-color: #2830dc;

   transform: translateY(-10px);

   box-shadow:
      0 25px 65px rgba(32,40,216,.13);
}

.dd-u-package-card--premium:hover {
   transform: translateY(-15px);
}

.dd-u-package-card--premium::after {
   content: "";

   position: absolute;

   top: 0;
   left: 0;
   right: 0;

   height: 4px;

   background: #2028d8;
}


/* Ribbon */

.dd-u-package-ribbon {
   position: absolute;

   top: 0;
   left: 50%;

   transform: translateX(-50%);

   display: flex;
   align-items: center;

   gap: 6px;

   padding: 8px 16px;

   border-radius: 0 0 12px 12px;

   background: #2028d8;
   color: #ffffff;

   font-size: 7px;
   font-weight: 800;

   letter-spacing: .08em;
}


/* Package Top */

.dd-u-package-top {
   position: relative;
   z-index: 2;

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

   margin-bottom: 30px;
}

.dd-u-package-top > div:first-child span {
   display: block;

   margin-bottom: 7px;

   color: #7b8296;

   font-size: 8px;
   font-weight: 800;

   letter-spacing: .14em;
}

.dd-u-package-card--premium
.dd-u-package-top > div:first-child span {
   color: #2028d8;
}

.dd-u-package-top h3 {
   margin: 0;

   color: #151a45;

   font-size: 30px;
   font-weight: 800;

   letter-spacing: -.04em;
}

.dd-u-package-icon {
   width: 51px;
   height: 51px;

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

   border-radius: 14px;

   background: #eef0ff;
   color: #2028d8;

   font-size: 17px;
}

.dd-u-package-card--premium .dd-u-package-icon {
   background: #2028d8;
   color: #ffffff;
}


/* Description */

.dd-u-package-description {
   position: relative;
   z-index: 2;

   min-height: 55px;

   margin: 0 0 23px;

   color: #737b8e;

   font-size: 11px;

   line-height: 1.75;
}


/* Package List */

.dd-u-package-list {
   position: relative;
   z-index: 2;

   display: grid;

   gap: 10px;

   flex: 1;

   margin-bottom: 28px;
}

.dd-u-package-list div {
   display: flex;
   align-items: flex-start;

   gap: 8px;

   color: #5e667b;

   font-size: 9.5px;

   line-height: 1.45;
}

.dd-u-package-list i {
   flex-shrink: 0;

   margin-top: 3px;

   color: #2028d8;

   font-size: 7px;
}


/* Button */

.dd-u-package-btn {
   position: relative;
   z-index: 2;

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

   gap: 9px;

   min-height: 46px;

   border: 1px solid #dfe3ed;

   border-radius: 100px;

   color: #2028d8;

   font-size: 9px;
   font-weight: 800;

   text-decoration: none;

   transition: .3s ease;
}

.dd-u-package-btn:hover {
   border-color: #2028d8;

   background: #2028d8;
   color: #ffffff;
}

.dd-u-package-card--premium .dd-u-package-btn {
   border-color: #2028d8;

   background: #2028d8;
   color: #ffffff;
}

.dd-u-package-btn i {
   transition: transform .3s ease;
}

.dd-u-package-btn:hover i {
   transform: translateX(4px);
}


/* Note */

.dd-u-package-note {
   display: flex;
   align-items: center;

   gap: 12px;

   margin-top: 22px;

   padding: 17px 20px;

   border: 1px solid #e4e7f0;

   border-radius: 14px;

   background: #fafbfe;

   color: #747b8e;

   font-size: 9px;

   line-height: 1.6;
}

.dd-u-package-note i {
   color: #2028d8;

   font-size: 13px;
}


/* =========================================================
   SECTION 03 — JOURNEY
========================================================= */

.dd-u-journey {
   position: relative;

   padding: 120px 0;

   background:
      linear-gradient(
         135deg,
         #090e38,
         #171d65
      );

   overflow: hidden;
}

.dd-u-journey::before {
   content: "";

   position: absolute;

   width: 600px;
   height: 600px;

   top: -300px;
   right: -250px;

   border-radius: 50%;

   border: 1px solid rgba(255,255,255,.07);

   box-shadow:
      0 0 0 55px rgba(255,255,255,.018),
      0 0 0 110px rgba(255,255,255,.012);
}

.dd-u-section-heading--light .dd-u-eyebrow {
   color: #aeb6ff;
}

.dd-u-section-heading--light .dd-u-eyebrow::before {
   background: #ffffff;
}

.dd-u-section-heading--light h2 {
   color: #ffffff;
}

.dd-u-section-heading--light h2 span {
   color: #9199ff;
}

.dd-u-section-heading--light p {
   color: rgba(255,255,255,.58);
}


/* Journey Line */

.dd-u-journey-line {
   position: relative;

   display: grid;

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

   gap: 15px;

   margin-top: 70px;
}

.dd-u-journey-line::before {
   content: "";

   position: absolute;

   top: 35px;
   left: 7%;
   right: 7%;

   height: 1px;

   background: rgba(255,255,255,.14);
}

.dd-u-journey-item {
   position: relative;
   z-index: 2;

   text-align: center;
}

.dd-u-journey-number {
   margin-bottom: 11px;

   color: rgba(255,255,255,.35);

   font-size: 8px;
   font-weight: 800;
}

.dd-u-journey-icon {
   width: 52px;
   height: 52px;

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

   margin: 0 auto 18px;

   border: 5px solid #111747;

   border-radius: 50%;

   background: #282e7b;
   color: #aeb6ff;

   font-size: 14px;

   box-shadow:
      0 0 0 1px rgba(255,255,255,.12);
}

.dd-u-journey-item--active .dd-u-journey-icon {
   background: #ffffff;
   color: #2028d8;

   box-shadow:
      0 0 0 1px #ffffff,
      0 12px 30px rgba(0,0,0,.20);
}

.dd-u-journey-item > span {
   display: block;

   margin-bottom: 7px;

   color: #8e97df;

   font-size: 7px;
   font-weight: 800;

   letter-spacing: .15em;
}

.dd-u-journey-item h3 {
   margin: 0 0 8px;

   color: #ffffff;

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

.dd-u-journey-item p {
   margin: 0 auto;

   max-width: 150px;

   color: rgba(255,255,255,.48);

   font-size: 8.5px;

   line-height: 1.65;
}


/* =========================================================
   SECTION 04 — SERVICES
========================================================= */

.dd-u-services {
   padding: 120px 0;

   background:
      linear-gradient(
         180deg,
         #f8f9ff,
         #ffffff
      );
}

.dd-u-services-heading {
   display: grid;

   grid-template-columns:
      minmax(0,1fr)
      minmax(280px,.6fr);

   align-items: end;

   gap: 70px;

   margin-bottom: 55px;
}

.dd-u-services-heading h2 {
   margin: 0;

   color: #111747;

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

   font-weight: 750;

   line-height: 1.05;

   letter-spacing: -.055em;
}

.dd-u-services-heading h2 span {
   color: #2028d8;
}

.dd-u-services-heading p {
   margin: 0 0 5px;

   color: #747b8f;

   font-size: 12px;

   line-height: 1.8;
}


/* Service Grid */

.dd-u-services-grid {
   display: grid;

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

   gap: 16px;
}

.dd-u-service-card {
   position: relative;

   min-height: 220px;

   padding: 24px;

   border: 1px solid #e3e6ef;

   border-radius: 20px;

   background: #ffffff;

   overflow: hidden;

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

.dd-u-service-card::before {
   content: "";

   position: absolute;

   width: 130px;
   height: 130px;

   right: -70px;
   bottom: -70px;

   border-radius: 50%;

   background: rgba(32,40,216,.045);
}

.dd-u-service-card:hover {
   transform: translateY(-6px);

   border-color: rgba(32,40,216,.18);

   box-shadow:
      0 20px 45px rgba(20,30,100,.08);
}

.dd-u-service-icon {
   position: relative;
   z-index: 2;

   width: 48px;
   height: 48px;

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

   margin-bottom: 28px;

   border-radius: 14px;

   background: #eef0ff;
   color: #2028d8;

   font-size: 16px;
}

.dd-u-service-card > span {
   position: absolute;

   top: 26px;
   right: 24px;

   color: #c9cedc;

   font-size: 9px;
   font-weight: 800;
}

.dd-u-service-card h3 {
   position: relative;
   z-index: 2;

   margin: 0 0 9px;

   color: #151a45;

   font-size: 16px;
   font-weight: 800;
}

.dd-u-service-card p {
   position: relative;
   z-index: 2;

   margin: 0;

   color: #737b8f;

   font-size: 9.5px;

   line-height: 1.7;
}


/* =========================================================
   SECTION 05 — CTA
========================================================= */

.dd-u-cta {
   position: relative;

   padding: 105px 0;

   background:
      linear-gradient(
         135deg,
         #111747,
         #2028d8
      );

   overflow: hidden;
}

.dd-u-cta-pattern {
   position: absolute;

   width: 650px;
   height: 650px;

   top: -330px;
   right: -230px;

   border: 1px solid rgba(255,255,255,.08);

   border-radius: 50%;

   box-shadow:
      0 0 0 55px rgba(255,255,255,.018),
      0 0 0 110px rgba(255,255,255,.012),
      0 0 0 165px rgba(255,255,255,.008);
}

.dd-u-cta-inner {
   position: relative;
   z-index: 2;

   max-width: 850px;

   margin: 0 auto;

   text-align: center;
}

.dd-u-cta-icon {
   width: 58px;
   height: 58px;

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

   margin: 0 auto 22px;

   border-radius: 17px;

   background: rgba(255,255,255,.12);

   color: #ffffff;

   font-size: 20px;
}

.dd-u-cta .dd-u-eyebrow {
   color: #aeb6ff;
}

.dd-u-cta .dd-u-eyebrow::before {
   background: #ffffff;
}

.dd-u-cta h2 {
   margin: 0 0 20px;

   color: #ffffff;

   font-size: clamp(40px,5vw,62px);

   font-weight: 750;

   line-height: 1.03;

   letter-spacing: -.055em;
}

.dd-u-cta h2 span {
   color: #9ca4ff;
}

.dd-u-cta p {
   max-width: 700px;

   margin: 0 auto 30px;

   color: rgba(255,255,255,.62);

   font-size: 13px;

   line-height: 1.85;
}

.dd-u-cta-actions {
   display: flex;

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

   flex-wrap: wrap;

   gap: 22px;
}

.dd-u-primary-btn--white {
   background: #ffffff;
   color: #151a45;

   box-shadow:
      0 15px 40px rgba(0,0,0,.16);
}

.dd-u-primary-btn--white:hover {
   background: #eef0ff;
   color: #151a45;
}

.dd-u-cta-email {
   display: inline-flex;
   align-items: center;

   gap: 8px;

   color: rgba(255,255,255,.78);

   font-size: 10px;
   font-weight: 750;

   text-decoration: none;
}

.dd-u-cta-email:hover {
   color: #ffffff;
}


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

@media (max-width: 1100px) {

   .dd-u-intro-grid {
      gap: 55px;
   }

   .dd-u-services-grid {
      grid-template-columns:
         repeat(2,minmax(0,1fr));
   }

   .dd-u-journey-line {
      grid-template-columns:
         repeat(3,minmax(0,1fr));

      row-gap: 45px;
   }

   .dd-u-journey-line::before {
      display: none;
   }

}


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

@media (max-width: 991px) {

   .dd-u-container {
      width: min(720px,calc(100% - 40px));
   }

   .dd-u-intro {
      padding: 90px 0;
   }

   .dd-u-intro-grid {
      grid-template-columns: 1fr;

      gap: 60px;
   }

   .dd-u-intro-visual {
      max-width: 620px;

      width: 100%;

      margin: 0 auto;
   }

   .dd-u-intro-content {
      max-width: 700px;
   }

   .dd-u-package-grid {
      grid-template-columns: 1fr;

      max-width: 650px;

      margin: 0 auto;
   }

   .dd-u-package-card--premium {
      transform: none;
   }

   .dd-u-package-card--premium:hover {
      transform: translateY(-8px);
   }

   .dd-u-services-heading {
      grid-template-columns: 1fr;

      gap: 20px;
   }

}


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

@media (max-width: 767px) {

   .dd-u-container {
      width: calc(100% - 32px);
   }

   .dd-u-intro {
      padding: 75px 0;
   }

   .dd-u-intro-visual {
      min-height: 440px;

      padding: 8px;
   }

   .dd-u-intro-image {
      width: 88%;
      height: 415px;

      border-radius: 23px;
   }

   .dd-u-intro-floating {
      left: 0;
      bottom: 35px;

      min-width: 215px;

      padding: 13px;
   }

   .dd-u-intro-floating-icon {
      width: 43px;
      height: 43px;

      font-size: 16px;
   }

   .dd-u-intro-badge {
      top: 35px;
      right: 0;
   }

   .dd-u-intro-content h2 {
      font-size: 38px;
   }

   .dd-u-intro-content p {
      font-size: 13px;
   }

   .dd-u-intro-points {
      grid-template-columns: 1fr;
   }


   /* Packages */

   .dd-u-packages {
      padding: 75px 0;
   }

   .dd-u-section-heading h2 {
      font-size: 38px;
   }

   .dd-u-section-heading p {
      font-size: 11px;
   }


   /* Journey */

   .dd-u-journey {
      padding: 75px 0;
   }

   .dd-u-journey-line {
      grid-template-columns:
         repeat(2,minmax(0,1fr));

      gap: 35px 15px;
   }

   .dd-u-journey-item h3 {
      font-size: 13px;
   }

   .dd-u-journey-item p {
      font-size: 8px;
   }


   /* Services */

   .dd-u-services {
      padding: 75px 0;
   }

   .dd-u-services-grid {
      grid-template-columns: 1fr;
   }

   .dd-u-service-card {
      min-height: 195px;
   }


   /* CTA */

   .dd-u-cta {
      padding: 75px 0;
   }

   .dd-u-cta h2 {
      font-size: 39px;
   }

   .dd-u-cta p {
      font-size: 11px;
   }

}


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

@media (max-width: 480px) {

   .dd-u-container {
      width: calc(100% - 26px);
   }

   .dd-u-eyebrow {
      font-size: 8px;
   }

   .dd-u-intro-content h2 {
      font-size: 32px;
   }

   .dd-u-intro-content p {
      font-size: 12px;
   }

   .dd-u-intro-image {
      height: 350px;
   }

   .dd-u-intro-visual {
      min-height: 385px;
   }

   .dd-u-intro-floating {
      min-width: 195px;
   }

   .dd-u-intro-floating strong {
      font-size: 12px;
   }

   .dd-u-package-card {
      padding: 22px;
   }

   .dd-u-package-top h3 {
      font-size: 27px;
   }

   .dd-u-package-list div {
      font-size: 9px;
   }

   .dd-u-package-note {
      align-items: flex-start;

      font-size: 8px;
   }

   .dd-u-journey-line {
      grid-template-columns: 1fr 1fr;

      gap: 28px 10px;
   }

   .dd-u-journey-icon {
      width: 44px;
      height: 44px;
   }

   .dd-u-journey-item h3 {
      font-size: 12px;
   }

   .dd-u-journey-item p {
      max-width: 130px;

      font-size: 7.5px;
   }

   .dd-u-services-heading h2 {
      font-size: 34px;
   }

   .dd-u-cta h2 {
      font-size: 32px;
   }

   .dd-u-cta-actions {
      flex-direction: column;

      width: 100%;
   }

   .dd-u-primary-btn--white {
      width: 100%;
   }

}

/* =========================================================
   DIVINE DIRECT — HAJJ PAGE
   PART 2
   COMPLETE CSS
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

.dd-hajj-page {
   width: 100%;
   overflow: hidden;
   background: #ffffff;
}

.dd-h-container {
   width: min(1180px, calc(100% - 48px));
   margin: 0 auto;
}

.dd-h-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 9px;

   margin-bottom: 16px;

   color: #2028d8;

   font-size: 10px;
   font-weight: 800;

   letter-spacing: .18em;
   line-height: 1;

   text-transform: uppercase;
}

.dd-h-eyebrow::before {
   content: "";

   width: 28px;
   height: 2px;

   border-radius: 10px;

   background: #2028d8;
}

.dd-h-primary-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;

   gap: 10px;

   min-height: 51px;

   padding: 0 23px;

   border-radius: 100px;

   background: #2028d8;
   color: #ffffff;

   font-size: 11px;
   font-weight: 800;

   text-decoration: none;

   box-shadow:
      0 14px 35px rgba(32,40,216,.18);

   transition:
      transform .3s ease,
      background .3s ease,
      box-shadow .3s ease;
}

.dd-h-primary-btn:hover {
   color: #ffffff;

   background: #151bc4;

   transform: translateY(-3px);

   box-shadow:
      0 20px 45px rgba(32,40,216,.25);
}

.dd-h-primary-btn i {
   transition: transform .3s ease;
}

.dd-h-primary-btn:hover i {
   transform: translateX(4px);
}


/* =========================================================
   SECTION 01 — INTRO
========================================================= */

.dd-h-intro {
   position: relative;

   padding: 120px 0;

   background:
      linear-gradient(
         180deg,
         #ffffff,
         #f8f9ff
      );

   overflow: hidden;
}

.dd-h-intro::before {
   content: "";

   position: absolute;

   width: 550px;
   height: 550px;

   top: -300px;
   right: -230px;

   border-radius: 50%;

   background:
      radial-gradient(
         circle,
         rgba(32,40,216,.055),
         transparent 68%
      );
}

.dd-h-intro-grid {
   position: relative;
   z-index: 2;

   display: grid;

   grid-template-columns:
      minmax(0,.95fr)
      minmax(0,1.05fr);

   gap: 85px;

   align-items: center;
}


/* Visual */

.dd-h-intro-visual {
   position: relative;

   min-height: 570px;

   padding: 15px;
}

.dd-h-intro-image {
   width: 90%;
   height: 535px;

   margin-left: auto;

   overflow: hidden;

   border-radius: 30px;

   background: #111747;

   box-shadow:
      0 30px 75px rgba(15,25,90,.15);
}

.dd-h-intro-image img {
   width: 100%;
   height: 100%;

   display: block;

   object-fit: cover;

   transition: transform .8s ease;
}

.dd-h-intro-image:hover img {
   transform: scale(1.045);
}

.dd-h-intro-floating {
   position: absolute;

   left: 0;
   bottom: 65px;

   z-index: 4;

   display: flex;
   align-items: center;

   gap: 13px;

   min-width: 245px;

   padding: 17px 19px;

   border-radius: 17px;

   background: #ffffff;

   box-shadow:
      0 20px 55px rgba(15,25,90,.16);
}

.dd-h-intro-floating-icon {
   width: 48px;
   height: 48px;

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

   border-radius: 13px;

   background: #2028d8;
   color: #ffffff;

   font-size: 18px;
}

.dd-h-intro-floating span {
   display: block;

   margin-bottom: 4px;

   color: #80869a;

   font-size: 8px;
   font-weight: 800;

   letter-spacing: .13em;
}

.dd-h-intro-floating strong {
   display: block;

   color: #151a45;

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

.dd-h-intro-badge {
   position: absolute;

   top: 80px;
   right: -5px;

   z-index: 4;

   display: flex;
   align-items: center;

   gap: 8px;

   padding: 10px 14px;

   border-radius: 100px;

   background: #111747;
   color: #ffffff;

   font-size: 8px;
   font-weight: 750;

   box-shadow:
      0 12px 30px rgba(15,25,80,.18);
}

.dd-h-intro-badge i {
   width: 19px;
   height: 19px;

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

   border-radius: 50%;

   background: #ffffff;
   color: #2028d8;

   font-size: 7px;
}


/* Content */

.dd-h-intro-content h2 {
   max-width: 650px;

   margin: 0 0 25px;

   color: #111747;

   font-size: clamp(42px,4.5vw,62px);

   font-weight: 750;

   line-height: 1.04;

   letter-spacing: -.055em;
}

.dd-h-intro-content h2 span {
   color: #2028d8;
}

.dd-h-intro-content p {
   max-width: 630px;

   margin: 0 0 16px;

   color: #70778b;

   font-size: 14px;

   line-height: 1.85;
}

.dd-h-intro-points {
   display: grid;

   grid-template-columns: 1fr 1fr;

   gap: 10px 20px;

   margin: 28px 0 30px;
}

.dd-h-intro-points div {
   display: flex;
   align-items: center;

   gap: 9px;

   color: #51596f;

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

.dd-h-intro-points i {
   width: 20px;
   height: 20px;

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

   border-radius: 50%;

   background: #eef0ff;
   color: #2028d8;

   font-size: 7px;
}


/* =========================================================
   SECTION 02 — LEVELS
========================================================= */

.dd-h-levels {
   position: relative;

   padding: 120px 0;

   background: #ffffff;
}

.dd-h-section-heading {
   max-width: 820px;

   margin: 0 auto 55px;

   text-align: center;
}

.dd-h-section-heading h2 {
   margin: 0;

   color: #111747;

   font-size: clamp(40px,4.5vw,59px);

   font-weight: 750;

   line-height: 1.04;

   letter-spacing: -.055em;
}

.dd-h-section-heading h2 span {
   color: #2028d8;
}

.dd-h-section-heading p {
   max-width: 680px;

   margin: 20px auto 0;

   color: #747b90;

   font-size: 13px;

   line-height: 1.8;
}


/* Level Grid */

.dd-h-level-grid {
   display: grid;

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

   gap: 20px;
}

.dd-h-level-card {
   position: relative;

   display: flex;
   flex-direction: column;

   padding: 29px;

   border: 1px solid #e1e5ef;

   border-radius: 24px;

   background: #ffffff;

   box-shadow:
      0 12px 40px rgba(20,30,100,.05);

   overflow: hidden;

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

.dd-h-level-card::before {
   content: "";

   position: absolute;

   width: 240px;
   height: 240px;

   top: -155px;
   right: -90px;

   border-radius: 50%;

   border: 1px solid rgba(32,40,216,.06);
}

.dd-h-level-card:hover {
   transform: translateY(-8px);

   border-color: rgba(32,40,216,.18);

   box-shadow:
      0 25px 60px rgba(20,30,100,.10);
}

.dd-h-level-card--premium {
   border-color: #2830dc;

   transform: translateY(-10px);

   box-shadow:
      0 25px 65px rgba(32,40,216,.13);
}

.dd-h-level-card--premium:hover {
   transform: translateY(-15px);
}

.dd-h-level-card--premium::after {
   content: "";

   position: absolute;

   top: 0;
   left: 0;
   right: 0;

   height: 4px;

   background: #2028d8;
}


/* Ribbon */

.dd-h-level-ribbon {
   position: absolute;

   top: 0;
   left: 50%;

   transform: translateX(-50%);

   display: flex;
   align-items: center;

   gap: 6px;

   padding: 8px 16px;

   border-radius: 0 0 12px 12px;

   background: #2028d8;
   color: #ffffff;

   font-size: 7px;
   font-weight: 800;

   letter-spacing: .08em;
}


/* Top */

.dd-h-level-top {
   position: relative;
   z-index: 2;

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

   margin-bottom: 30px;
}

.dd-h-level-top span {
   display: block;

   margin-bottom: 7px;

   color: #7b8296;

   font-size: 8px;
   font-weight: 800;

   letter-spacing: .14em;
}

.dd-h-level-card--premium .dd-h-level-top span {
   color: #2028d8;
}

.dd-h-level-top h3 {
   margin: 0;

   color: #151a45;

   font-size: 30px;
   font-weight: 800;

   letter-spacing: -.04em;
}

.dd-h-level-icon {
   width: 51px;
   height: 51px;

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

   border-radius: 14px;

   background: #eef0ff;
   color: #2028d8;

   font-size: 17px;
}

.dd-h-level-card--premium .dd-h-level-icon {
   background: #2028d8;
   color: #ffffff;
}


/* Description */

.dd-h-level-description {
   position: relative;
   z-index: 2;

   min-height: 55px;

   margin: 0 0 23px;

   color: #737b8e;

   font-size: 11px;

   line-height: 1.75;
}


/* List */

.dd-h-level-list {
   position: relative;
   z-index: 2;

   display: grid;

   gap: 10px;

   flex: 1;

   margin-bottom: 28px;
}

.dd-h-level-list div {
   display: flex;
   align-items: flex-start;

   gap: 8px;

   color: #5e667b;

   font-size: 9.5px;

   line-height: 1.45;
}

.dd-h-level-list i {
   flex-shrink: 0;

   margin-top: 3px;

   color: #2028d8;

   font-size: 7px;
}


/* Button */

.dd-h-level-btn {
   position: relative;
   z-index: 2;

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

   gap: 9px;

   min-height: 46px;

   border: 1px solid #dfe3ed;

   border-radius: 100px;

   color: #2028d8;

   font-size: 9px;
   font-weight: 800;

   text-decoration: none;

   transition: .3s ease;
}

.dd-h-level-btn:hover {
   border-color: #2028d8;

   background: #2028d8;
   color: #ffffff;
}

.dd-h-level-card--premium .dd-h-level-btn {
   border-color: #2028d8;

   background: #2028d8;
   color: #ffffff;
}

.dd-h-level-btn i {
   transition: transform .3s ease;
}

.dd-h-level-btn:hover i {
   transform: translateX(4px);
}


/* Note */

.dd-h-level-note {
   display: flex;
   align-items: center;

   gap: 12px;

   margin-top: 22px;

   padding: 17px 20px;

   border: 1px solid #e4e7f0;

   border-radius: 14px;

   background: #fafbfe;

   color: #747b8e;

   font-size: 9px;

   line-height: 1.6;
}

.dd-h-level-note i {
   color: #2028d8;

   font-size: 13px;
}


/* =========================================================
   SECTION 03 — HAJJ JOURNEY
========================================================= */

.dd-h-journey {
   position: relative;

   padding: 120px 0;

   background:
      linear-gradient(
         135deg,
         #090e38,
         #171d65
      );

   overflow: hidden;
}

.dd-h-journey::before {
   content: "";

   position: absolute;

   width: 650px;
   height: 650px;

   top: -330px;
   right: -260px;

   border-radius: 50%;

   border: 1px solid rgba(255,255,255,.07);

   box-shadow:
      0 0 0 55px rgba(255,255,255,.018),
      0 0 0 110px rgba(255,255,255,.012);
}

.dd-h-section-heading--light .dd-h-eyebrow {
   color: #aeb6ff;
}

.dd-h-section-heading--light .dd-h-eyebrow::before {
   background: #ffffff;
}

.dd-h-section-heading--light h2 {
   color: #ffffff;
}

.dd-h-section-heading--light h2 span {
   color: #9199ff;
}

.dd-h-section-heading--light p {
   color: rgba(255,255,255,.58);
}


/* Journey Flow */

.dd-h-journey-flow {
   position: relative;

   display: grid;

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

   gap: 15px;

   margin-top: 70px;
}

.dd-h-journey-flow::before {
   content: "";

   position: absolute;

   top: 35px;
   left: 7%;
   right: 7%;

   height: 1px;

   background: rgba(255,255,255,.14);
}

.dd-h-journey-card {
   position: relative;
   z-index: 2;

   text-align: center;
}

.dd-h-journey-number {
   margin-bottom: 11px;

   color: rgba(255,255,255,.35);

   font-size: 8px;
   font-weight: 800;
}

.dd-h-journey-icon {
   width: 52px;
   height: 52px;

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

   margin: 0 auto 18px;

   border: 5px solid #111747;

   border-radius: 50%;

   background: #282e7b;
   color: #aeb6ff;

   font-size: 14px;

   box-shadow:
      0 0 0 1px rgba(255,255,255,.12);
}

.dd-h-journey-card--active .dd-h-journey-icon {
   background: #ffffff;
   color: #2028d8;

   box-shadow:
      0 0 0 1px #ffffff,
      0 12px 30px rgba(0,0,0,.20);
}

.dd-h-journey-card > span {
   display: block;

   margin-bottom: 7px;

   color: #8e97df;

   font-size: 7px;
   font-weight: 800;

   letter-spacing: .15em;
}

.dd-h-journey-card h3 {
   margin: 0 0 8px;

   color: #ffffff;

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

.dd-h-journey-card p {
   max-width: 155px;

   margin: 0 auto;

   color: rgba(255,255,255,.48);

   font-size: 8.5px;

   line-height: 1.65;
}


/* =========================================================
   SECTION 04 — SERVICES
========================================================= */

.dd-h-services {
   padding: 120px 0;

   background:
      linear-gradient(
         180deg,
         #f8f9ff,
         #ffffff
      );
}

.dd-h-services-heading {
   display: grid;

   grid-template-columns:
      minmax(0,1fr)
      minmax(280px,.6fr);

   align-items: end;

   gap: 70px;

   margin-bottom: 55px;
}

.dd-h-services-heading h2 {
   margin: 0;

   color: #111747;

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

   font-weight: 750;

   line-height: 1.05;

   letter-spacing: -.055em;
}

.dd-h-services-heading h2 span {
   color: #2028d8;
}

.dd-h-services-heading p {
   margin: 0 0 5px;

   color: #747b8f;

   font-size: 12px;

   line-height: 1.8;
}


/* Service Grid */

.dd-h-services-grid {
   display: grid;

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

   gap: 16px;
}

.dd-h-service-card {
   position: relative;

   min-height: 220px;

   padding: 24px;

   border: 1px solid #e3e6ef;

   border-radius: 20px;

   background: #ffffff;

   overflow: hidden;

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

.dd-h-service-card::before {
   content: "";

   position: absolute;

   width: 130px;
   height: 130px;

   right: -70px;
   bottom: -70px;

   border-radius: 50%;

   background: rgba(32,40,216,.045);
}

.dd-h-service-card:hover {
   transform: translateY(-6px);

   border-color: rgba(32,40,216,.18);

   box-shadow:
      0 20px 45px rgba(20,30,100,.08);
}

.dd-h-service-icon {
   position: relative;
   z-index: 2;

   width: 48px;
   height: 48px;

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

   margin-bottom: 28px;

   border-radius: 14px;

   background: #eef0ff;
   color: #2028d8;

   font-size: 16px;
}

.dd-h-service-card > span {
   position: absolute;

   top: 26px;
   right: 24px;

   color: #c9cedc;

   font-size: 9px;
   font-weight: 800;
}

.dd-h-service-card h3 {
   position: relative;
   z-index: 2;

   margin: 0 0 9px;

   color: #151a45;

   font-size: 16px;
   font-weight: 800;
}

.dd-h-service-card p {
   position: relative;
   z-index: 2;

   margin: 0;

   color: #737b8f;

   font-size: 9.5px;

   line-height: 1.7;
}


/* =========================================================
   SECTION 05 — CTA
========================================================= */

.dd-h-cta {
   position: relative;

   padding: 105px 0;

   background:
      linear-gradient(
         135deg,
         #111747,
         #2028d8
      );

   overflow: hidden;
}

.dd-h-cta-pattern {
   position: absolute;

   width: 650px;
   height: 650px;

   top: -330px;
   right: -230px;

   border: 1px solid rgba(255,255,255,.08);

   border-radius: 50%;

   box-shadow:
      0 0 0 55px rgba(255,255,255,.018),
      0 0 0 110px rgba(255,255,255,.012),
      0 0 0 165px rgba(255,255,255,.008);
}

.dd-h-cta-inner {
   position: relative;
   z-index: 2;

   max-width: 850px;

   margin: 0 auto;

   text-align: center;
}

.dd-h-cta-icon {
   width: 58px;
   height: 58px;

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

   margin: 0 auto 22px;

   border-radius: 17px;

   background: rgba(255,255,255,.12);

   color: #ffffff;

   font-size: 20px;
}

.dd-h-cta .dd-h-eyebrow {
   color: #aeb6ff;
}

.dd-h-cta .dd-h-eyebrow::before {
   background: #ffffff;
}

.dd-h-cta h2 {
   margin: 0 0 20px;

   color: #ffffff;

   font-size: clamp(40px,5vw,62px);

   font-weight: 750;

   line-height: 1.03;

   letter-spacing: -.055em;
}

.dd-h-cta h2 span {
   color: #9ca4ff;
}

.dd-h-cta p {
   max-width: 700px;

   margin: 0 auto 30px;

   color: rgba(255,255,255,.62);

   font-size: 13px;

   line-height: 1.85;
}

.dd-h-cta-actions {
   display: flex;

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

   flex-wrap: wrap;

   gap: 22px;
}

.dd-h-primary-btn--white {
   background: #ffffff;
   color: #151a45;

   box-shadow:
      0 15px 40px rgba(0,0,0,.16);
}

.dd-h-primary-btn--white:hover {
   background: #eef0ff;
   color: #151a45;
}

.dd-h-cta-email {
   display: inline-flex;
   align-items: center;

   gap: 8px;

   color: rgba(255,255,255,.78);

   font-size: 10px;
   font-weight: 750;

   text-decoration: none;
}

.dd-h-cta-email:hover {
   color: #ffffff;
}


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

@media (max-width: 1100px) {

   .dd-h-intro-grid {
      gap: 55px;
   }

   .dd-h-services-grid {
      grid-template-columns:
         repeat(2,minmax(0,1fr));
   }

   .dd-h-journey-flow {
      grid-template-columns:
         repeat(3,minmax(0,1fr));

      row-gap: 45px;
   }

   .dd-h-journey-flow::before {
      display: none;
   }

}


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

@media (max-width: 991px) {

   .dd-h-container {
      width: min(720px,calc(100% - 40px));
   }

   .dd-h-intro {
      padding: 90px 0;
   }

   .dd-h-intro-grid {
      grid-template-columns: 1fr;

      gap: 60px;
   }

   .dd-h-intro-visual {
      max-width: 620px;

      width: 100%;

      margin: 0 auto;
   }

   .dd-h-intro-content {
      max-width: 700px;
   }

   .dd-h-level-grid {
      grid-template-columns: 1fr;

      max-width: 650px;

      margin: 0 auto;
   }

   .dd-h-level-card--premium {
      transform: none;
   }

   .dd-h-level-card--premium:hover {
      transform: translateY(-8px);
   }

   .dd-h-services-heading {
      grid-template-columns: 1fr;

      gap: 20px;
   }

}


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

@media (max-width: 767px) {

   .dd-h-container {
      width: calc(100% - 32px);
   }

   .dd-h-intro {
      padding: 75px 0;
   }

   .dd-h-intro-visual {
      min-height: 440px;

      padding: 8px;
   }

   .dd-h-intro-image {
      width: 88%;
      height: 415px;

      border-radius: 23px;
   }

   .dd-h-intro-floating {
      left: 0;
      bottom: 35px;

      min-width: 215px;

      padding: 13px;
   }

   .dd-h-intro-floating-icon {
      width: 43px;
      height: 43px;

      font-size: 16px;
   }

   .dd-h-intro-badge {
      top: 35px;
      right: 0;
   }

   .dd-h-intro-content h2 {
      font-size: 38px;
   }

   .dd-h-intro-content p {
      font-size: 13px;
   }

   .dd-h-intro-points {
      grid-template-columns: 1fr;
   }


   /* Levels */

   .dd-h-levels {
      padding: 75px 0;
   }

   .dd-h-section-heading h2 {
      font-size: 38px;
   }

   .dd-h-section-heading p {
      font-size: 11px;
   }


   /* Journey */

   .dd-h-journey {
      padding: 75px 0;
   }

   .dd-h-journey-flow {
      grid-template-columns:
         repeat(2,minmax(0,1fr));

      gap: 35px 15px;
   }

   .dd-h-journey-card h3 {
      font-size: 13px;
   }

   .dd-h-journey-card p {
      font-size: 8px;
   }


   /* Services */

   .dd-h-services {
      padding: 75px 0;
   }

   .dd-h-services-grid {
      grid-template-columns: 1fr;
   }

   .dd-h-service-card {
      min-height: 195px;
   }


   /* CTA */

   .dd-h-cta {
      padding: 75px 0;
   }

   .dd-h-cta h2 {
      font-size: 39px;
   }

   .dd-h-cta p {
      font-size: 11px;
   }

}


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

@media (max-width: 480px) {

   .dd-h-container {
      width: calc(100% - 26px);
   }

   .dd-h-eyebrow {
      font-size: 8px;
   }

   .dd-h-intro-content h2 {
      font-size: 32px;
   }

   .dd-h-intro-content p {
      font-size: 12px;
   }

   .dd-h-intro-image {
      height: 350px;
   }

   .dd-h-intro-visual {
      min-height: 385px;
   }

   .dd-h-intro-floating {
      min-width: 195px;
   }

   .dd-h-intro-floating strong {
      font-size: 12px;
   }

   .dd-h-level-card {
      padding: 22px;
   }

   .dd-h-level-top h3 {
      font-size: 27px;
   }

   .dd-h-level-list div {
      font-size: 9px;
   }

   .dd-h-level-note {
      align-items: flex-start;

      font-size: 8px;
   }

   .dd-h-journey-flow {
      grid-template-columns: 1fr 1fr;

      gap: 28px 10px;
   }

   .dd-h-journey-icon {
      width: 44px;
      height: 44px;
   }

   .dd-h-journey-card h3 {
      font-size: 12px;
   }

   .dd-h-journey-card p {
      max-width: 130px;

      font-size: 7.5px;
   }

   .dd-h-services-heading h2 {
      font-size: 34px;
   }

   .dd-h-cta h2 {
      font-size: 32px;
   }

   .dd-h-cta-actions {
      flex-direction: column;

      width: 100%;
   }

   .dd-h-primary-btn--white {
      width: 100%;
   }

}

/* =========================================================
   DIVINE DIRECT — ZIYARAT PAGE
   PART 3 — COMPLETE CSS
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

.dd-z-page {
   width: 100%;
   overflow: hidden;
   background: #ffffff;
}

.dd-z-container {
   width: min(1180px, calc(100% - 48px));
   margin: 0 auto;
}

.dd-z-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 9px;

   margin-bottom: 16px;

   color: #2028d8;

   font-size: 10px;
   font-weight: 800;

   letter-spacing: .18em;
   line-height: 1;

   text-transform: uppercase;
}

.dd-z-eyebrow::before {
   content: "";

   width: 28px;
   height: 2px;

   border-radius: 10px;

   background: #2028d8;
}

.dd-z-primary-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;

   gap: 10px;

   min-height: 51px;

   padding: 0 23px;

   border-radius: 100px;

   background: #2028d8;
   color: #ffffff;

   font-size: 11px;
   font-weight: 800;

   text-decoration: none;

   box-shadow:
      0 14px 35px rgba(32,40,216,.18);

   transition: .3s ease;
}

.dd-z-primary-btn:hover {
   color: #ffffff;

   background: #151bc4;

   transform: translateY(-3px);
}

.dd-z-primary-btn i {
   transition: transform .3s ease;
}

.dd-z-primary-btn:hover i {
   transform: translateX(4px);
}


/* =========================================================
   SECTION 01 — INTRO
========================================================= */

.dd-z-intro {
   position: relative;

   padding: 120px 0;

   background:
      linear-gradient(
         180deg,
         #ffffff,
         #f8f9ff
      );
}

.dd-z-intro::after {
   content: "";

   position: absolute;

   width: 500px;
   height: 500px;

   top: -250px;
   left: -250px;

   border-radius: 50%;

   background:
      radial-gradient(
         circle,
         rgba(32,40,216,.055),
         transparent 68%
      );
}

.dd-z-intro-grid {
   position: relative;
   z-index: 2;

   display: grid;

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

   gap: 85px;

   align-items: center;
}


/* Visual */

.dd-z-intro-visual {
   position: relative;

   min-height: 555px;

   padding: 12px;
}

.dd-z-intro-image {
   width: 91%;
   height: 525px;

   overflow: hidden;

   border-radius: 30px;

   box-shadow:
      0 30px 75px rgba(15,25,90,.15);
}

.dd-z-intro-image img {
   width: 100%;
   height: 100%;

   display: block;

   object-fit: cover;

   transition: transform .8s ease;
}

.dd-z-intro-image:hover img {
   transform: scale(1.045);
}

.dd-z-intro-card {
   position: absolute;

   left: 0;
   bottom: 55px;

   z-index: 3;

   display: flex;
   align-items: center;

   gap: 13px;

   min-width: 250px;

   padding: 17px 19px;

   border-radius: 17px;

   background: #ffffff;

   box-shadow:
      0 20px 55px rgba(15,25,90,.16);
}

.dd-z-intro-card-icon {
   width: 48px;
   height: 48px;

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

   border-radius: 13px;

   background: #2028d8;
   color: #ffffff;

   font-size: 18px;
}

.dd-z-intro-card span {
   display: block;

   margin-bottom: 4px;

   color: #80869a;

   font-size: 8px;
   font-weight: 800;

   letter-spacing: .13em;
}

.dd-z-intro-card strong {
   display: block;

   color: #151a45;

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


/* Content */

.dd-z-intro-content h2 {
   max-width: 650px;

   margin: 0 0 25px;

   color: #111747;

   font-size: clamp(42px,4.5vw,62px);

   font-weight: 750;

   line-height: 1.04;

   letter-spacing: -.055em;
}

.dd-z-intro-content h2 span {
   color: #2028d8;
}

.dd-z-intro-content p {
   max-width: 620px;

   margin: 0 0 15px;

   color: #70778b;

   font-size: 14px;

   line-height: 1.85;
}

.dd-z-intro-points {
   display: grid;

   grid-template-columns: 1fr 1fr;

   gap: 10px 20px;

   margin: 28px 0 30px;
}

.dd-z-intro-points div {
   display: flex;
   align-items: center;

   gap: 9px;

   color: #51596f;

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

.dd-z-intro-points i {
   width: 20px;
   height: 20px;

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

   border-radius: 50%;

   background: #eef0ff;
   color: #2028d8;

   font-size: 7px;
}


/* =========================================================
   SECTION 02 — DESTINATIONS
========================================================= */

.dd-z-destinations {
   padding: 120px 0;

   background: #ffffff;
}

.dd-z-heading {
   max-width: 800px;

   margin: 0 auto 55px;

   text-align: center;
}

.dd-z-heading h2 {
   margin: 0;

   color: #111747;

   font-size: clamp(40px,4.5vw,59px);

   font-weight: 750;

   line-height: 1.04;

   letter-spacing: -.055em;
}

.dd-z-heading h2 span {
   color: #2028d8;
}

.dd-z-heading p {
   max-width: 680px;

   margin: 20px auto 0;

   color: #747b90;

   font-size: 13px;

   line-height: 1.8;
}


/* Destination Grid */

.dd-z-destination-grid {
   display: grid;

   grid-template-columns:
      1.35fr
      .825fr;

   grid-template-rows:
      300px
      300px;

   gap: 18px;
}

.dd-z-destination-card {
   position: relative;

   overflow: hidden;

   border-radius: 25px;

   background: #101642;

   box-shadow:
      0 15px 45px rgba(15,25,90,.08);
}

.dd-z-destination-card--large {
   grid-row: span 2;
}

.dd-z-destination-card img {
   width: 100%;
   height: 100%;

   display: block;

   object-fit: cover;

   transition: transform .8s ease;
}

.dd-z-destination-card:hover img {
   transform: scale(1.06);
}

.dd-z-destination-overlay {
   position: absolute;

   inset: 0;

   background:
      linear-gradient(
         180deg,
         transparent 20%,
         rgba(6,10,40,.88) 100%
      );
}

.dd-z-destination-content {
   position: absolute;

   left: 27px;
   right: 27px;
   bottom: 25px;

   z-index: 2;
}

.dd-z-destination-content > span {
   display: block;

   margin-bottom: 8px;

   color: #aeb6ff;

   font-size: 8px;
   font-weight: 800;

   letter-spacing: .17em;
}

.dd-z-destination-content h3 {
   margin: 0 0 8px;

   color: #ffffff;

   font-size: 27px;
   font-weight: 800;

   letter-spacing: -.035em;
}

.dd-z-destination-card:not(.dd-z-destination-card--large)
.dd-z-destination-content h3 {
   font-size: 22px;
}

.dd-z-destination-content p {
   max-width: 420px;

   margin: 0 0 14px;

   color: rgba(255,255,255,.64);

   font-size: 10px;

   line-height: 1.6;
}

.dd-z-destination-tags {
   display: flex;
   align-items: center;

   flex-wrap: wrap;

   gap: 7px;
}

.dd-z-destination-tags span {
   display: inline-flex;
   align-items: center;

   gap: 6px;

   padding: 7px 10px;

   border: 1px solid rgba(255,255,255,.15);

   border-radius: 100px;

   background: rgba(255,255,255,.07);

   color: rgba(255,255,255,.75);

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

.dd-z-destination-tags i {
   color: #aeb6ff;
}


/* Cities */

.dd-z-city-row {
   display: grid;

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

   gap: 14px;

   margin-top: 18px;
}

.dd-z-city {
   display: flex;
   align-items: center;

   gap: 15px;

   padding: 18px 20px;

   border: 1px solid #e2e5ef;

   border-radius: 16px;

   background: #fafbfe;
}

.dd-z-city > span {
   color: #c3c8d5;

   font-size: 9px;
   font-weight: 800;
}

.dd-z-city > div {
   display: grid;

   grid-template-columns: 28px auto;

   align-items: center;

   column-gap: 8px;
}

.dd-z-city i {
   grid-row: span 2;

   color: #2028d8;

   font-size: 14px;
}

.dd-z-city strong {
   color: #151a45;

   font-size: 11px;
   font-weight: 800;
}

.dd-z-city small {
   color: #858b9e;

   font-size: 7px;
}


/* =========================================================
   SECTION 03 — EXPERIENCE
========================================================= */

.dd-z-experience {
   padding: 120px 0;

   background:
      linear-gradient(
         180deg,
         #f8f9ff,
         #ffffff
      );
}

.dd-z-experience-grid {
   display: grid;

   grid-template-columns:
      minmax(0,1fr)
      minmax(0,.9fr);

   gap: 80px;

   align-items: center;
}

.dd-z-experience-content h2 {
   max-width: 600px;

   margin: 0 0 20px;

   color: #111747;

   font-size: clamp(39px,4.4vw,58px);

   font-weight: 750;

   line-height: 1.05;

   letter-spacing: -.055em;
}

.dd-z-experience-content h2 span {
   color: #2028d8;
}

.dd-z-experience-content > p {
   max-width: 590px;

   margin: 0 0 13px;

   color: #747b8f;

   font-size: 12px;

   line-height: 1.8;
}


/* Experience List */

.dd-z-experience-list {
   margin-top: 32px;
}

.dd-z-experience-item {
   display: grid;

   grid-template-columns: 38px 1fr;

   gap: 14px;

   padding: 15px 0;

   border-bottom: 1px solid #e5e7ee;
}

.dd-z-experience-item:last-child {
   border-bottom: 0;
}

.dd-z-experience-number {
   width: 34px;
   height: 34px;

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

   border-radius: 10px;

   background: #eef0ff;
   color: #2028d8;

   font-size: 8px;
   font-weight: 800;
}

.dd-z-experience-item h3 {
   margin: 0 0 4px;

   color: #151a45;

   font-size: 13px;
   font-weight: 800;
}

.dd-z-experience-item p {
   margin: 0;

   color: #808699;

   font-size: 9px;

   line-height: 1.6;
}


/* Visual */

.dd-z-experience-visual {
   position: relative;

   min-height: 590px;
}

.dd-z-experience-main-image {
   width: 91%;
   height: 555px;

   margin-left: auto;

   overflow: hidden;

   border-radius: 30px;

   background: #111747;

   box-shadow:
      0 30px 70px rgba(15,25,90,.13);
}

.dd-z-experience-main-image img {
   width: 100%;
   height: 100%;

   display: block;

   object-fit: cover;

   transition: transform .8s ease;
}

.dd-z-experience-main-image:hover img {
   transform: scale(1.045);
}

.dd-z-experience-location {
   position: absolute;

   left: 0;
   bottom: 55px;

   display: flex;
   align-items: center;

   gap: 13px;

   min-width: 240px;

   padding: 16px;

   border-radius: 16px;

   background: #ffffff;

   box-shadow:
      0 20px 50px rgba(15,25,90,.15);
}

.dd-z-experience-location > i {
   width: 45px;
   height: 45px;

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

   border-radius: 12px;

   background: #2028d8;
   color: #ffffff;

   font-size: 14px;
}

.dd-z-experience-location span {
   display: block;

   margin-bottom: 4px;

   color: #81889a;

   font-size: 7px;
   font-weight: 800;

   letter-spacing: .12em;
}

.dd-z-experience-location strong {
   color: #151a45;

   font-size: 11px;
}


/* =========================================================
   SECTION 04 — SERVICES
========================================================= */

.dd-z-services {
   padding: 120px 0;

   background: #ffffff;
}

.dd-z-services-grid {
   display: grid;

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

   gap: 16px;
}

.dd-z-service-card {
   position: relative;

   min-height: 215px;

   padding: 24px;

   border: 1px solid #e2e5ef;

   border-radius: 20px;

   background: #ffffff;

   overflow: hidden;

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

.dd-z-service-card::before {
   content: "";

   position: absolute;

   width: 140px;
   height: 140px;

   right: -75px;
   bottom: -75px;

   border-radius: 50%;

   background: rgba(32,40,216,.045);
}

.dd-z-service-card:hover {
   transform: translateY(-6px);

   border-color: rgba(32,40,216,.18);

   box-shadow:
      0 20px 45px rgba(20,30,100,.08);
}

.dd-z-service-icon {
   position: relative;
   z-index: 2;

   width: 47px;
   height: 47px;

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

   margin-bottom: 27px;

   border-radius: 13px;

   background: #eef0ff;
   color: #2028d8;

   font-size: 15px;
}

.dd-z-service-card > span {
   position: absolute;

   top: 25px;
   right: 23px;

   color: #c8cdd9;

   font-size: 9px;
   font-weight: 800;
}

.dd-z-service-card h3 {
   position: relative;
   z-index: 2;

   margin: 0 0 9px;

   color: #151a45;

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

.dd-z-service-card p {
   position: relative;
   z-index: 2;

   margin: 0;

   color: #747b8f;

   font-size: 9px;

   line-height: 1.7;
}


/* =========================================================
   SECTION 05 — CTA
========================================================= */

.dd-z-cta {
   position: relative;

   padding: 105px 0;

   background:
      linear-gradient(
         135deg,
         #090e38,
         #2028d8
      );

   overflow: hidden;
}

.dd-z-cta-circle {
   position: absolute;

   width: 680px;
   height: 680px;

   top: -360px;
   right: -250px;

   border: 1px solid rgba(255,255,255,.08);

   border-radius: 50%;

   box-shadow:
      0 0 0 60px rgba(255,255,255,.018),
      0 0 0 120px rgba(255,255,255,.012);
}

.dd-z-cta-inner {
   position: relative;
   z-index: 2;

   max-width: 850px;

   margin: 0 auto;

   text-align: center;
}

.dd-z-cta-icon {
   width: 58px;
   height: 58px;

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

   margin: 0 auto 22px;

   border-radius: 17px;

   background: rgba(255,255,255,.12);

   color: #ffffff;

   font-size: 20px;
}

.dd-z-cta .dd-z-eyebrow {
   color: #aeb6ff;
}

.dd-z-cta .dd-z-eyebrow::before {
   background: #ffffff;
}

.dd-z-cta h2 {
   margin: 0 0 20px;

   color: #ffffff;

   font-size: clamp(40px,5vw,62px);

   font-weight: 750;

   line-height: 1.03;

   letter-spacing: -.055em;
}

.dd-z-cta h2 span {
   color: #9ca4ff;
}

.dd-z-cta p {
   max-width: 700px;

   margin: 0 auto 30px;

   color: rgba(255,255,255,.62);

   font-size: 13px;

   line-height: 1.85;
}

.dd-z-cta-actions {
   display: flex;

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

   flex-wrap: wrap;

   gap: 22px;
}

.dd-z-primary-btn--white {
   background: #ffffff;
   color: #151a45;
}

.dd-z-primary-btn--white:hover {
   background: #eef0ff;
   color: #151a45;
}

.dd-z-cta-email {
   display: inline-flex;
   align-items: center;

   gap: 8px;

   color: rgba(255,255,255,.78);

   font-size: 10px;
   font-weight: 750;

   text-decoration: none;
}

.dd-z-cta-email:hover {
   color: #ffffff;
}


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

@media (max-width: 1100px) {

   .dd-z-services-grid {
      grid-template-columns:
         repeat(2,minmax(0,1fr));
   }

}


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

@media (max-width: 991px) {

   .dd-z-container {
      width: min(720px,calc(100% - 40px));
   }

   .dd-z-intro-grid {
      grid-template-columns: 1fr;

      gap: 60px;
   }

   .dd-z-intro-visual {
      max-width: 620px;

      width: 100%;

      margin: 0 auto;
   }

   .dd-z-intro-content {
      max-width: 700px;
   }

   .dd-z-destination-grid {
      grid-template-columns: 1fr;

      grid-template-rows:
         400px
         300px
         300px;
   }

   .dd-z-destination-card--large {
      grid-row: auto;
   }

   .dd-z-experience-grid {
      grid-template-columns: 1fr;

      gap: 60px;
   }

   .dd-z-experience-visual {
      max-width: 620px;

      width: 100%;

      margin: 0 auto;
   }

}


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

@media (max-width: 767px) {

   .dd-z-container {
      width: calc(100% - 32px);
   }

   .dd-z-intro,
   .dd-z-destinations,
   .dd-z-experience,
   .dd-z-services {
      padding: 75px 0;
   }

   .dd-z-intro-visual {
      min-height: 430px;

      padding: 7px;
   }

   .dd-z-intro-image {
      width: 88%;
      height: 405px;

      border-radius: 23px;
   }

   .dd-z-intro-card {
      left: 0;
      bottom: 30px;

      min-width: 210px;

      padding: 13px;
   }

   .dd-z-intro-card-icon {
      width: 43px;
      height: 43px;
   }

   .dd-z-intro-content h2 {
      font-size: 38px;
   }

   .dd-z-intro-content p {
      font-size: 12px;
   }

   .dd-z-intro-points {
      grid-template-columns: 1fr;
   }


   /* Destinations */

   .dd-z-heading h2 {
      font-size: 38px;
   }

   .dd-z-destination-grid {
      grid-template-rows:
         350px
         260px
         260px;
   }

   .dd-z-destination-content {
      left: 20px;
      right: 20px;
      bottom: 20px;
   }

   .dd-z-city-row {
      grid-template-columns: 1fr;
   }


   /* Experience */

   .dd-z-experience-content h2 {
      font-size: 38px;
   }

   .dd-z-experience-visual {
      min-height: 440px;
   }

   .dd-z-experience-main-image {
      width: 88%;
      height: 420px;

      border-radius: 23px;
   }

   .dd-z-experience-location {
      bottom: 30px;
   }


   /* Services */

   .dd-z-services-grid {
      grid-template-columns: 1fr;
   }

   .dd-z-service-card {
      min-height: 195px;
   }


   /* CTA */

   .dd-z-cta {
      padding: 75px 0;
   }

   .dd-z-cta h2 {
      font-size: 39px;
   }

   .dd-z-cta p {
      font-size: 11px;
   }

}


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

@media (max-width: 480px) {

   .dd-z-container {
      width: calc(100% - 26px);
   }

   .dd-z-eyebrow {
      font-size: 8px;
   }

   .dd-z-intro-content h2,
   .dd-z-experience-content h2 {
      font-size: 32px;
   }

   .dd-z-intro-visual {
      min-height: 380px;
   }

   .dd-z-intro-image {
      height: 350px;
   }

   .dd-z-intro-card strong {
      font-size: 12px;
   }

   .dd-z-destination-grid {
      grid-template-rows:
         330px
         245px
         245px;
   }

   .dd-z-destination-content h3 {
      font-size: 22px;
   }

   .dd-z-destination-content p {
      font-size: 9px;
   }

   .dd-z-experience-visual {
      min-height: 375px;
   }

   .dd-z-experience-main-image {
      height: 350px;
   }

   .dd-z-experience-location {
      min-width: 205px;

      padding: 12px;
   }

   .dd-z-experience-location > i {
      width: 40px;
      height: 40px;
   }

   .dd-z-cta h2 {
      font-size: 32px;
   }

   .dd-z-cta-actions {
      flex-direction: column;
   }

   .dd-z-primary-btn--white {
      width: 100%;
   }

}

@media (max-width: 767px) {
    .third-img {
        display: none !important;
    }
}