@font-face {
 font-family: "Tajawal";

 src: url("fonts/Tajawal-Bold.woff2") format("woff2"),
  url("fonts/Tajawal-Bold.woff") format("woff");

 font-weight: bold;

 font-style: normal;

 font-display: swap;
}

@font-face {
 font-family: "Tajawal";

 src: url("fonts/Tajawal-ExtraLight.woff2") format("woff2"),
  url("fonts/Tajawal-ExtraLight.woff") format("woff");

 font-weight: 200;

 font-style: normal;

 font-display: swap;
}

@font-face {
 font-family: "Tajawal";

 src: url("fonts/Tajawal-Medium.woff2") format("woff2"),
  url("fonts/Tajawal-Medium.woff") format("woff");

 font-weight: 500;

 font-style: normal;

 font-display: swap;
}

@font-face {
 font-family: "Tajawal";

 src: url("fonts/Tajawal-Regular.woff2") format("woff2"),
  url("fonts/Tajawal-Regular.woff") format("woff");

 font-weight: normal;

 font-style: normal;

 font-display: swap;
}

@font-face {
 font-family: "HelveticaNeueLT Arabic 75";

 src: url("fonts/HelveticaNeueLTArabic-Bold.woff2") format("woff2"),
  url("fonts/HelveticaNeueLTArabic-Bold.woff") format("woff");

 font-weight: bold;

 font-style: normal;

 font-display: swap;
}

@font-face {
 font-family: "HelveticaNeueLT Arabic 45";

 src: url("fonts/HelveticaNeueLTArabic-Light.woff2") format("woff2"),
  url("fonts/HelveticaNeueLTArabic-Light.woff") format("woff");

 font-weight: 300;

 font-style: normal;

 font-display: swap;
}

@font-face {
 font-family: "HelveticaNeueLT Arabic 55 Roman";

 src: url("fonts/HelveticaNeueLTArabic-Roman.woff2") format("woff2"),
  url("fonts/HelveticaNeueLTArabic-Roman.woff") format("woff");

 font-weight: normal;

 font-style: normal;

 font-display: swap;
}

:root {
 --bg: #004367;

 --pink: #fa9bfd;

 --darkPink: #9a348e;

 --white: #fff;

 --navy: #004367;

 --black: #000000;

 --orange: #f36c14;

 --light-gray: #fbfbf2;
}

* {
 box-sizing: border-box;
}

html,
body {
 margin: 0;

 padding: 0;

 font-family: "Tajawal" !important;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
 font-family: "Tajawal" !important;
}

h3 {
 font-size: 30px;

 line-height: 1.2;
}

strong {
 font-weight: 700 !important;
}

.page {
 width: 100%;
}

header {
 background: #024c74eb;
}

.header-wrap {
 width: min(85%);

 margin: 0 auto;

 text-align: center;

 padding: 10px;
}

.header-wrap ul {
 margin: 0;

 display: flex;

 justify-content: center;

 list-style: none;

 padding: 0;
}

.header-wrap ul li {
 padding: 5px 10px;
}

.header-wrap ul li a {
 color: var(--white);

 text-decoration: none;

 padding: 12px 34px;

 display: flex;

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

 border-radius: 100px;

 background: var(--pink);

 font-weight: bold;
}

.header-wrap ul li a:hover {
 background: var(--bg);
}

.hamburger-menu {
 display: none;
 flex-direction: column;
 background: none;
 border: none;
 cursor: pointer;
 padding: 8px;
 gap: 5px;
}

.hamburger-menu span {
 width: 25px;
 height: 3px;
 background-color: #1a3a52;
 border-radius: 2px;
 transition: all 0.3s ease;
}

.hamburger-menu.active span:nth-child(1) {
 transform: rotate(45deg) translate(3px, 5px);
}

.hamburger-menu.active span:nth-child(2) {
 opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
 transform: rotate(-45deg) translate(6px, -8px);
}

/* Header Styles */
/* header {
 background-color: #f8f9fa;
 padding: 15px 0;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 position: sticky;
 top: 0;
 z-index: 100;
} */

.header-wrap {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 20px;
 max-width: 1200px;
 margin: 0 auto;
}

.header-logo img {
 height: 80px;
 width: auto;
}

.header-actions {
 display: flex;
 /* gap: 15px; */
 align-items: center;
}

.btn-primary,
.btn-secondary {
 padding: 10px 20px;
 border-radius: 20px;
 text-decoration: none;
 font-weight: 500;
 transition: all 0.3s ease;
 border: none;
 cursor: pointer;
 font-size: 20px;
}

.btn-primary {
	background: var(--bg);
	color: #fff;
	border: 2px solid var(--bg);
	border-radius: 999px;
	padding: 10px 24px;
	font-weight: 600;
	transition: all 0.25s ease;
}

.btn-primary:hover {
	background: transparent;
	color: var(--bg);
	border-color: var(--bg);
	transform: translateY(-2px);
}

.btn-primary {
 background-color: var(--bg);
 color: var(--white);
}


.btn-secondary {
 background-color: transparent;
 color: var(--pink);
 border: 2px solid var(--pink);
}

.btn-secondary:hover {
 background-color: var(--pink);
 color: var(--bg);
}

/* Mobile Menu Styles */
.mobile-menu {
 display: none;
 flex-direction: column;
 background-color: var(--white);
 padding: 20px;
 gap: 10px;
 border-top: 1px solid var(--light-gray);
 position: absolute;
 top: 100%;
 right: 0;
 left: 0;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.mobile-menu.active {
 display: flex;
}

.mobile-menu a {
 padding: 12px 20px;
 border-radius: 20px;
 text-decoration: none;
 font-weight: 500;
 text-align: center;
 transition: all 0.3s ease;
}

.mobile-menu .btn-primary {
 background-color: var(--bg);
 color: var(--white);
}

.mobile-menu .btn-secondary {
 background-color: transparent;
 color: var(--pink);
 border: 2px solid var(--pink);
}

.container.text-center {
 color: #212529;
 font-size: 14px;
 line-height: 1.6;
 font-family: "DM Sans", sans-serif !important;
}

.hero {
 background: var(--bg);
}

.hero .content-wrap {
 text-align: center;
}

.hero .content-wrap .title-main,
.hero .content-wrap .title-sub,
.hero .content-wrap .section-title,
.hero .content-wrap .support-text {
 color: #fff;
}

.content-wrap {
 width: 100%;

 margin: 0 auto;

 padding: 50px 30px;

 max-width: 980px;
}

.results-section {
 background: var(--bg);
}

.video-container {
 position: relative;

 width: 100%;

 max-width: 600px;

 height: 338px;

 margin: 0 auto;
}

/* Style for the video */

video {
 width: 100%;

 height: 100%;
}

/* Play button styling */

.play-icon {
 position: absolute;

 top: 50%;

 left: 50%;

 transform: translate(-50%, -50%);

 font-size: 30px;

 color: white;

 background-color: rgba(0, 0, 0, 0.5);

 padding: 15px;

 border-radius: 50%;

 cursor: pointer;

 width: 70px;

 height: 70px;
}

.results-copy {
 max-width: 600px;

 margin: 0 auto;

 text-align: center;

 display: grid;

 gap: 15px;
}

.results-copy p {
 margin: 0;

 color: var(--white);

 line-height: 1.8;
}

.results-intro {
 font-size: clamp(1.5rem, 2.5vw, 2.35rem);

 font-weight: 800;

 margin-bottom: 1.2rem;
}

.results-detail {
 font-size: clamp(1rem, 2vw, 1.4rem);

 margin-bottom: 1rem;

 opacity: 0.95;
}

.results-highlight {
 font-size: clamp(1.25rem, 2.2vw, 1.65rem);

 font-weight: 700;

 margin: clamp(1.2rem, 2vw, 1.8rem) 0;
}

.results-sub {
 font-size: clamp(1rem, 2vw, 1.3rem);

 margin-bottom: clamp(2rem, 4vw, 3rem);

 opacity: 0.9;
}

.results-btn {
 display: inline-flex;

 align-items: center;

 justify-content: center;

 min-width: min(72vw, 380px);

 min-height: clamp(72px, 9vw, 110px);

 padding: 0 2rem;

 border-radius: 999px;

 background: var(--white);

 color: var(--navy);

 text-decoration: none;

 font-size: clamp(1.9rem, 3.8vw, 2.8rem);

 font-weight: 800;

 margin: 0 auto;
}

.results-footer {
 color: rgba(244, 245, 247, 0.8);

 font-size: clamp(0.95rem, 1.8vw, 1.2rem);

 margin-top: clamp(1.2rem, 2vw, 1.6rem);
}

.stats-section {
 background: var(--white);

 color: var(--bg);
}

.stats-section h2 {
 color: var(--pink);

 font-size: 70px;

 font-weight: bold;

 margin: 0 0 30px;
}

.stats-section .stats-content p {
 font-size: 30px;

 font-weight: 500;
}

.stats-grid {
 display: flex;

 flex-wrap: wrap;

 gap: 25px;
}

.stat-card {
 display: flex;

 align-items: center;

 justify-content: space-between;

 gap: clamp(1.5rem, 3vw, 2.5rem);
}

.meaning-section {
 background: var(--white);
}

.meaning-card {
 color: var(--bg);
}

.meaning-card h2 {
 margin: 0 0 clamp(1rem, 2vw, 1.5rem);

 font-size: clamp(3rem, 6vw, 4.5rem);

 font-weight: 800;
 color: var(--bg);
}

.meaning-lead,
.meaning-emphasis,
.meaning-sub,
.meaning-intro,
.meaning-note {
 margin: 0;
}

.meaning-lead {
 font-weight: 700;

 font-size: 45px;

 line-height: 1.6;

 margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.meaning-emphasis {
 color: var(--pink);

 font-size: clamp(1.35rem, 2.4vw, 1.75rem);

 font-weight: 800;

 margin-bottom: 0.75rem;

 text-align: center;
}

.meaning-content {
 text-align: center;

 font-size: 22px;

 font-weight: 600;
}

.meaning-sub {
 font-size: clamp(1.05rem, 2vw, 1.35rem);

 margin-bottom: clamp(1rem, 2vw, 1.5rem);

 opacity: 0.95;
}

.meaning-intro {
 font-size: clamp(1.15rem, 2.1vw, 1.5rem);

 font-weight: 700;

 margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.meaning-btn {
 display: inline-flex;

 align-items: center;

 justify-content: center;

 min-width: min(72vw, 360px);

 min-height: clamp(72px, 9vw, 110px);

 padding: 0 2rem;

 border-radius: 999px;

 background: var(--pink);

 color: var(--navy);

 text-decoration: none;

 font-size: clamp(1.8rem, 3.5vw, 2.6rem);

 font-weight: 800;

 margin-bottom: clamp(1.2rem, 2vw, 1.6rem);
}

.meaning-note {
 color: var(--bg);

 font-size: 25px;
}

.meaning-section .content-wrap {
 padding-top: 0;
}

.benefits-section {
 background: var(--pink);
}

.benefits-section h2 {
 text-align: center;

 font-size: 50px;

 margin-top: 0;

 color: var(--bg);
}

.benefits-grid {
 display: grid;

 gap: 20px;
}

.benefit-card {
 text-align: right;
}

.benefit-card h3 {
 margin: 0 0 0.9rem;

 color: var(--bg);

 font-size: 35px;

 font-weight: 800;
}

.benefit-card p {
 margin: 0;

 color: var(--bg);

 font-size: 30px;

 line-height: 1.8;

 font-weight: 500;
}

@media (max-width: 980px) {
 .benefits-grid {
  grid-template-columns: 1fr;
 }
}

@media (max-width: 900px) {
 .stats-grid {
  grid-template-columns: 1fr;
 }

 .results-btn {
  min-width: 100%;
 }
}

/* Tablet and Mobile Responsive */
@media (max-width: 768px) {
 .header-actions {
  display: none;
 }

 .hamburger-menu {
  display: flex;
 }

 header {
  position: relative;
 }

 .mobile-menu {
  position: fixed;
  top: auto;
  bottom: auto;
 }

 header {
  padding: 5px 10px;
 }
}

@media (max-width: 480px) {
 .header-wrap {
  padding: 0 15px;
 }

 .hamburger-menu span {
  width: 22px;
  height: 2.5px;
 }

 .btn-primary,
 .btn-secondary {
  padding: 10px 16px;
  font-size: 13px;
 }

 .mobile-menu {
  padding: 15px;
  gap: 8px;
 }

 .mobile-menu a {
  padding: 10px 16px;
  font-size: 14px;
 }
}

@media (max-width: 640px) {
 .results-intro {
  font-size: clamp(2rem, 7vw, 2.8rem);
 }

 .stats-wrap h2 {
  font-size: clamp(2.4rem, 8vw, 3.5rem);
 }
}

.stats-section .stats-content {
 text-align: center;
}

.stat-card p {
 margin: 0;

 color: var(--bg);

 line-height: 1.8;

 text-align: right;

 flex: 1;

 font-size: 30px;

 font-weight: 600;
}

.progress-ring {
 position: relative;

 display: inline-block;
}

.progress-ring-background {
 fill: none;

 stroke: var(--bg);
 /* Light background color */
}

.progress-ring-bar {
 fill: none;

 stroke: var(--pink);
 /* Pink color */

 stroke-dasharray: 314;
 /* Circumference of the circle (2 * π * 50) */

 stroke-dashoffset: 94.2;
 /* Adjust to create the "70%" effect (314 - 70% of 314) */

 transform: rotate(-90deg);

 transform-origin: 50% 50%;

 transition: stroke-dashoffset 0.35s;
}

.progress-text {
 fill: #003e5d;
 /* Dark text color */

 font-size: 24px;

 font-weight: bold;

 text-anchor: middle;

 alignment-baseline: middle;
}

@media (max-width: 900px) {
 .stats-grid {
  grid-template-columns: 1fr;
 }

 .results-btn {
  min-width: 100%;
 }
}

@media (max-width: 640px) {
 .results-intro {
  font-size: clamp(2rem, 7vw, 2.8rem);
 }

 .stats-wrap h2 {
  font-size: clamp(2.4rem, 8vw, 3.5rem);
 }
}

.title-main,
.title-sub,
.accent-line,
.accent-sub,
.section-title,
.support-text,
.cta-btn {
 letter-spacing: 0;

 margin: 0;
}

.title-main {
 font-size: clamp(3.3rem, 8.5vw, 6.9rem);

 font-weight: 800;

 line-height: 0.95;

 margin-bottom: clamp(0.6rem, 1.8vw, 1rem);
}

.title-sub {
 font-size: clamp(2.15rem, 6.2vw, 5rem);

 font-family: "HelveticaNeueLT Arabic 55 Roman" !important;

 font-weight: 500;

 line-height: 1.02;

 margin-bottom: clamp(1rem, 2.8vw, 1.7rem);
}

.accent-line {
 color: var(--pink);

 font-size: clamp(2.25rem, 6.6vw, 5.2rem);

 font-weight: 800;

 line-height: 0.98;

 margin-bottom: 0.2rem;
}

.accent-sub {
 color: var(--pink);

 font-size: clamp(1.55rem, 4.2vw, 3.2rem);

 font-weight: 700;

 line-height: 1.1;

 margin-bottom: clamp(1rem, 3vw, 1.9rem);
}

.support-text {
 font-size: clamp(1rem, 2.65vw, 2.2rem);

 font-weight: 800;

 line-height: 1.35;

 margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.cta-btn {
 display: inline-flex;

 align-items: center;

 justify-content: center;

 min-width: min(72vw, 414px);

 min-height: clamp(82px, 10vw, 136px);

 padding: 0.85rem 2rem;

 border-radius: 999px;

 text-decoration: none;

 background: var(--pink);

 color: var(--navy);

 font-size: clamp(2.15rem, 5.2vw, 4.1rem);

 font-weight: 700;

 line-height: 1;

 margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
}

.section-title {
 font-size: clamp(2.1rem, 6vw, 4.9rem);

 font-weight: 800;

 line-height: 1.02;

 margin-bottom: clamp(1.8rem, 4vw, 2.9rem);
}

.image-panel {
 position: relative;
}

.image-container {
 width: 100%;

 height: auto;

 max-width: 980px;

 margin: 0 auto;
  position: relative;
}

/* Counters Section Styles */
.counters-section {
 background: var(--white);
 padding: 10px 20px;
}

.counters-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 30px;
 max-width: 900px;
 margin: 0 auto;
 text-align: center;
}

.counter-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

.counter-number {
 margin: 0;
 font-size: clamp(2.5rem, 5vw, 3.8rem);
 font-weight: 800;
 color: var(--bg);
 line-height: 1;
 margin-bottom: 12px;
}

.counter-label {
 margin: 0;
 font-size: clamp(1rem, 2vw, 1.4rem);
 font-weight: 600;
 color: var(--bg);
 line-height: 1.6;
}

@media (max-width: 768px) {
 .counters-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
 }

 .counter-card {
  padding: 25px 15px;
 }

 .counter-number {
  font-size: 2.2rem;
 }

 .counter-label {
  font-size: 0.95rem;
 }
}

@media (max-width: 480px) {
 .counters-grid {
  grid-template-columns: 1fr;
  gap: 15px;
 }

 .counter-card {
  padding: 20px 15px;
 }

 .counter-number {
  font-size: 2rem;
 }

 .counter-label {
  font-size: 0.9rem;
 }
}


.hero .image-panel:before {
 content: "";

 position: absolute;

 background: #fff;

 height: 70%;

 width: 100%;

 left: 0;

 right: 0;

 bottom: 0;
}

.hero .image-panel {
 padding-bottom: 50px;
}

.image-panel img {
 display: block;

 width: 100%;

 height: auto;

 max-width: 500px;
}

.audience-section {
 background: var(--pink);
}

.audience-header {
 text-align: center;

 padding: 50px 0;
}

.audience-header h2 {
 margin: 0;

 color: var(--navy);

 font-size: clamp(3rem, 5vw, 4.6rem);

 font-weight: 800;

 line-height: 1;
}

.audience-header p {
 margin: 0.75rem auto 0;

 color: var(--darkPink);

 font-size: clamp(1.2rem, 2.2vw, 1.8rem);

 font-weight: 700;
}

.audience-main h3,
.audience-subcard h3 {
 margin: 0 0 clamp(1rem, 2vw, 1.5rem);

 color: var(--white);

 font-size: clamp(2rem, 4vw, 2.8rem);

 font-weight: 800;

 line-height: 1.05;

 margin-right: 37px;
}

.audience-main ul,
.audience-subcard ul {
 list-style: none;

 margin: 0;

 padding: 0;

 display: grid;

 gap: 1rem;
}

.audience-main li,
.audience-subcard li {
 position: relative;

 padding-inline-start: 3.5rem;

 color: rgba(244, 245, 247, 0.95);

 font-size: clamp(1rem, 2vw, 1.3rem);

 line-height: 1.8;

 font-weight: 600;
}

.audience-subcard li {
 color: var(--bg);
}

.audience-main li::before,
.audience-subcard li::before {
 content: "✓";

 position: absolute;

 right: 0;

 top: 0;

 color: var(--pink);

 font-size: 50px;

 font-weight: 700;
}

.audience-main li strong,
.audience-subcard li strong {
 display: block;

 font-size: 24px;

 font-weight: bold;
}

.audience-subcard li::before {
 color: var(--bg);
}

.audience-main {
 background: var(--bg);
}

.audience-subcard h3 {
 color: var(--bg);
}

@media (max-width: 760px) {
 .audience-header h2 {
  font-size: clamp(2.4rem, 7vw, 3.4rem);
 }

 .audience-main li,
 .audience-subcard li {
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
 }
}

.reviews-section {
 background: var(--bg);
}

.reviews-head {
 display: grid;

 justify-items: center;

 gap: clamp(1.5rem, 3vw, 2rem);

 margin-bottom: clamp(2.5rem, 4vw, 3rem);
}

.reviews-image img {
 display: block;

 width: 100%;

 height: auto;

 max-width: 500px;
}

.reviews-head h2 {
 margin: 0;

 color: var(--pink);

 font-size: clamp(3rem, 6vw, 4.5rem);

 font-weight: 800;

 line-height: 1.05;
}

.testimonial-section {
 background: var(--bg);
}

.main-img {
 background: #fff;

 margin: 0 auto;

 text-align: center;

 padding: 30px 0;
}

.main-img img {
 width: 100%;

 max-width: 190px;
}

.testimonial-head {
 display: grid;

 gap: clamp(1rem, 2vw, 1.5rem);

 justify-items: center;

 margin-bottom: clamp(2rem, 4vw, 3rem);

 text-align: center;
}

.testimonial-head h2 {
 margin: 0;

 color: var(--pink);

 font-size: clamp(3rem, 6vw, 4.5rem);

 font-weight: 800;
}

.testimonial-head p {
 margin: 0;

 color: rgba(244, 245, 247, 0.9);

 font-size: clamp(1rem, 2vw, 1.35rem);

 max-width: 680px;

 line-height: 1.8;
}

.testimonial-grid {
 display: grid;

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

 gap: clamp(1.5rem, 3vw, 2rem);
}

.testimonial-card {
 background: var(--white);

 color: #081d3d;

 border-radius: 0;

 padding: 20px;

 box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);

 display: flex;

 flex-direction: column;

 gap: 1rem;

 min-height: 220px;
}

.testimonial-card p {
 margin: 0;

 line-height: 1.8;

 font-size: 25px;

 font-weight: 500;
}

.testimonial-action {
 margin-top: 50px;

 display: grid;

 justify-items: center;

 gap: 0.85rem;
}

.testimonial-btn {
 display: inline-flex;

 align-items: center;

 justify-content: center;

 min-width: min(72vw, 360px);

 min-height: clamp(72px, 9vw, 110px);

 padding: 0 2rem;

 border-radius: 999px;

 background: var(--pink);

 color: var(--navy);

 text-decoration: none;

 font-size: clamp(1.8rem, 3.5vw, 2.6rem);

 font-weight: 800;
}

.testimonial-note,
.offer-note {
 margin: 0;

 color: var(--pink);

 margin-top: 15px;

 font-size: 25px;
}

.offer-section {
 background: var(--bg);
}

.offer-title {
 margin: 0 0 clamp(1.5rem, 3vw, 2rem);

 color: var(--pink);

 font-size: clamp(3rem, 6vw, 4.5rem);

 font-weight: 800;

 text-align: center;

 line-height: 1.05;
}

.offer-title--secondary {
 margin-top: clamp(2.5rem, 5vw, 4rem);
}

.offer-list {
 list-style: none;

 margin: 0 auto;

 padding: 0;

 display: grid;

 gap: 1rem;

 max-width: 780px;
}

.offer-list li {
 position: relative;

 padding-inline-start: 3rem;

 color: rgba(244, 245, 247, 0.95);

 font-size: clamp(1.05rem, 2vw, 1.4rem);

 line-height: 1.8;
}

.offer-list--negative li::before {
 content: "✕";

 position: absolute;

 right: 0;

 top: 0.15rem;

 color: #f3b7f0;

 font-size: 1.4rem;

 font-weight: 900;
}

.offer-list--positive li::before {
 content: "✓";

 position: absolute;

 right: 0;

 top: 0.15rem;

 color: var(--pink);

 font-size: 1.4rem;

 font-weight: 900;
}

.offer-quote {
 max-width: 780px;

 margin: clamp(2rem, 4vw, 3rem) auto 0;

 color: rgba(244, 245, 247, 0.95);

 font-size: clamp(1.5rem, 2.5vw, 1.95rem);

 font-weight: 700;

 text-align: center;

 line-height: 1.55;
}

.offer-action {
 margin-top: clamp(2rem, 4vw, 3rem);

 display: grid;

 justify-items: center;

 gap: 0.85rem;
}

.offer-btn {
 display: inline-flex;

 align-items: center;

 justify-content: center;

 min-width: min(72vw, 360px);

 min-height: clamp(72px, 9vw, 110px);

 padding: 0 2rem;

 border-radius: 999px;

 background: var(--white);

 color: var(--navy);

 text-decoration: none;

 font-size: clamp(1.8rem, 3.5vw, 2.6rem);

 font-weight: 800;
}

.faq-section {
 background: var(--bg);
}

.faq-head {
 display: grid;

 gap: clamp(1rem, 2vw, 1.5rem);

 margin-bottom: clamp(2rem, 4vw, 3rem);
}

.faq-icon {
 display: flex;

 justify-content: center;
}

.faq-icon img {
 max-width: 200px;
}

.faq-head h2 {
 margin: 0;

 color: var(--white);

 font-size: clamp(2.6rem, 5vw, 3.8rem);

 font-weight: 800;
}

.faq-card {
 background: var(--white);

 padding: 15px;

 max-width: 780px;

 margin: 0 0 30px;
}

.faq-card p {
 margin: 0;

 color: var(--darkPink);

 font-size: 30px;

 line-height: 1.8;

 font-weight: 700;
}

.faq-row {
 display: grid;

 gap: 0.75rem;

 margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.faq-row p {
 font-size: 30px;

 margin: 0;

 font-weight: bold;
 color: var(--white);
}

.testimonails-cards {
 display: flex;

 flex-wrap: wrap;

 gap: 10px;

 align-items: flex-start;

 justify-content: center;
}

.testimonial-columns {
 width: 32%;
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}

.testimonails-cards .card-holder {
 width: 100%;
}

.testimonails-cards .card-holder img {
 width: 100%;

 height: auto;
}

@media (max-width: 900px) {
 .testimonial-grid {
  grid-template-columns: 1fr;
 }
}

.package {
 background: var(--white);

 text-align: center;
}

.package-header {
 text-align: center;

 padding: 30px 0;
}

.package-card .cta-btn {
 background: var(--bg);

 color: var(--white) !important;

 margin-bottom: 40px;
}

.package-header h2 {
 font-size: clamp(2.4rem, 6vw, 4.2rem);

 font-weight: 800;

 color: var(--bg);

 margin: 0;
}

.package-header p {
 margin: 0.6rem auto 0;

 color: var(--darkPink);

 font-size: clamp(1rem, 2.2vw, 1.6rem);

 font-weight: 700;
}

.package-card {
 background: var(--pink);
}

.package-card .content-wrap {
 padding-bottom: 0 !important;
}

.package-text {
 display: grid;

 gap: 1rem;

 color: var(--bg);

 margin-bottom: clamp(2rem, 3vw, 2.8rem);
}

.package-text p {
 margin: 0;

 line-height: 1.7;

 font-size: 28px;

 font-weight: 600;
}

.package-note {
 margin: 0 0 30px;

 line-height: 1.7;

 font-size: 28px;

 font-weight: 600;

 color: var(--bg);
}

.package-image,
.reviews-image {
 overflow: hidden;

 display: flex;

 justify-content: center;
}

.package-image img {
 display: block;

 width: 100%;

 height: auto;

 max-width: 500px;

 max-height: 300px;

 object-fit: cover;
}

.story {
 background: #ffffff;

 color: #2e1b3a;
}

.story-top {
 text-align: center;

 max-width: 600px;

 margin: 0 auto;
}

.story-top p {
 margin: 0 0 25px;

 line-height: 1.35;

 font-size: 30px;

 font-weight: 500;

 color: var(--bg);
}

.story-top p span {
 display: block;
}

.story-top h2 {
 color: var(--bg);

 font-size: 35px;

 margin-bottom: 0;
}

.content-blue {
 background: var(--bg);
}

.content-blue h3 {
 color: var(--white);
}

.story-list {
 display: grid;

 gap: 0.9rem;

 margin-bottom: clamp(2rem, 3vw, 2.5rem);
}

.strong-bottm p,
.story-list p {
 margin: 0;

 color: var(--white);

 font-size: 22px;
}

.strong-bottm p {
 margin-top: 14px;
}

.story-list p strong,
.strong-bottm p strong {
 font-size: 28px;
}

.strong-bottm {
 text-align: center;
}

.story-cta-title {
 margin: 0;

 font-size: clamp(2.4rem, 5.5vw, 4rem);

 font-weight: 800;

 color: #e58de9;
}

.story-cta-subtitle {
 margin: clamp(1rem, 2vw, 1.4rem) 0 0;

 color: #c9d7ff;

 font-size: clamp(1rem, 2vw, 1.3rem);
}

@media (max-width: 767.98px) {
 .story-wrap {
  padding: clamp(2rem, 5vw, 2.5rem) 1rem;
 }
header#header {
    padding: 0;
}
 .story h3 {
  font-size: clamp(2rem, 7vw, 3rem);
 }

 .story p,
 .story-list p,
 .story-cta-subtitle {
  font-size: clamp(0.98rem, 2.8vw, 1.18rem);
 }
}

.image-container {
 width: 100%;

 height: auto;

 display: flex;

 justify-content: center;
}

@media (max-width: 767px) {
 .content-wrap {
  padding-top: 2.2rem;
 }

 .title-sub {
  font-size: clamp(2rem, 8.5vw, 3rem);
 }

 .accent-line {
  font-size: clamp(2.15rem, 9vw, 3.3rem);
 }

 .accent-sub {
  font-size: clamp(1.35rem, 5.4vw, 2.15rem);
 }

 .support-text {
  font-size: clamp(0.95rem, 4.2vw, 1.3rem);
 }

 .section-title {
  font-size: clamp(1.95rem, 8vw, 3rem);
 }

 .cta-btn {
  width: min(100%, 420px);

  min-width: unset;
 }
}

.mobile-video-section {
 background: var(--pink);

 color: var(--bg);
}

.mobile-video-card .content-wrap {
 display: grid;

 gap: 1.5rem;

 justify-items: center;
}

.mobile-video-text .content-wrap h3 {
 color: var(--pink);
}

.mobile-video-card .cta-btn {
 background: var(--white);

 color: var(--bg);

 font-size: 43px;

 margin: 0;
}

.mobile-video-title {
 font-size: clamp(2.8rem, 6vw, 4.5rem);

 margin: 0;
}

.mobile-video-subtitle {
 margin: 0;

 font-size: 28px;

 color: var(--bg);

 font-weight: 600;
}

.mobile-video-text {
 background: var(--bg);

 text-align: center;
}

.mobile-video-text p {
 color: var(--white);

 font-size: 22px;

 font-weight: 500;
}

.results-section .content-wrap {
 padding-top: 0;
}

@media (max-width: 650px) {
 .mobile-video-wrap {
  padding: clamp(2rem, 6vw, 3rem) 1rem;
 }

 .mobile-phone-frame {
  width: min(100%, 320px);

  padding: 1rem 0.85rem 1.2rem;
 }

 .mobile-video-title {
  font-size: clamp(2rem, 8vw, 3.2rem);
 }

 .mobile-video-subtitle {
  font-size: clamp(1rem, 3vw, 1.2rem);
 }

 .stuck-section h2 {
  font-size: clamp(1.8rem, 6vw, 2.8rem);
 }

 .stuck-list li {
  font-size: clamp(1rem, 2vw, 1.2rem);
 }

 .stuck-problem {
  font-size: clamp(1.3rem, 4vw, 1.8rem);
 }

 .stuck-solution {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
 }

 .stuck-footer {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
 }
}

/* Stuck Section */

.stuck-section {
 background: var(--bg);

 text-align: center;
}

.stuck-section h2 {
 color: var(--white);

 font-size: clamp(2rem, 6vw, 3.2rem);

 font-weight: 800;

 margin: 0 0 clamp(2rem, 4vw, 3rem) 0;

 line-height: 1.4;
}

.stuck-list {
 list-style: none;

 padding: 0;

 margin: 0 0 clamp(2rem, 4vw, 3rem) 0;

 display: flex;

 flex-direction: column;

 gap: clamp(1.2rem, 2.5vw, 1.8rem);
}

.stuck-list li {
 color: var(--white);

 font-size: clamp(1.05rem, 2.2vw, 1.4rem);

 font-weight: 500;

 line-height: 1.8;

 position: relative;

 padding-right: clamp(2rem, 4vw, 2.8rem);

 text-align: right;
}

.stuck-list li::before {
 content: "✓";

 position: absolute;

 right: 0;

 color: var(--pink);

 font-size: clamp(1.2rem, 2.5vw, 1.6rem);

 font-weight: 700;
}

.stuck-problem {
 color: var(--pink);

 font-size: clamp(1.4rem, 4vw, 1.95rem);

 font-weight: 700;

 margin: 0 0 clamp(0.8rem, 1.5vw, 1.2rem) 0;
}

.stuck-solution {
 color: var(--white);

 font-size: clamp(1.2rem, 3vw, 1.65rem);

 font-weight: 600;

 margin: 0;

 line-height: 1.6;
}

.stuck-btn {
 display: inline-flex;

 align-items: center;

 justify-content: center;

 min-width: min(72vw, 380px);

 min-height: clamp(72px, 9vw, 110px);

 padding: 0 2rem;

 border-radius: 999px;

 background: var(--pink);

 color: var(--navy);

 text-decoration: none;

 font-size: clamp(1.9rem, 3.8vw, 2.8rem);

 font-weight: 700;

 transition: all 0.3s ease;

 margin: clamp(2rem, 4vw, 2.8rem) 0 clamp(1.5rem, 3vw, 2rem) 0;
}

.stuck-btn:hover {
 transform: scale(1.05);

 box-shadow: 0 8px 24px rgba(229, 141, 233, 0.3);
}

.stuck-footer {
 color: var(--pink);

 font-size: 30px;

 margin: 0;

 font-weight: 800;
}

.invest-section {
 background: var(--pink);
}

.invest-wrap {
 width: min(100%, 980px);

 margin: 0 auto;

 padding: 0 clamp(1rem, 3vw, 2.5rem);
}

.invest-header {
 display: grid;

 justify-items: center;

 gap: clamp(1rem, 2vw, 1.5rem);

 margin-bottom: clamp(1.5rem, 3vw, 2rem);

 text-align: center;
}

.invest-icon {
 width: 100%;

 text-align: center;

 background: #fff;
 padding-top: 20px;
}

.invest-icon img {
 position: relative;

 top: 15px;

 max-width: 200px;
}

.invest-header h2 {
 margin: 0;

 color: var(--bg);

 font-size: clamp(2.8rem, 5vw, 4.2rem);

 font-weight: 800;

 line-height: 1.2;
}

.invest-label {
 margin: 0 0 20px;

 color: var(--bg);

 font-size: 35px;

 font-weight: 800;
}

.invest-list {
 list-style: none;

 margin: 0 0 60px;

 padding: 0;

 display: grid;

 gap: 9px;
}

.invest-list li {
 list-style: initial;

 font-size: 33px;

 font-weight: 800;

 color: var(--bg);
}

.invest-text {
 margin: 0;

 color: var(--bg);

 font-size: 45px;

 font-weight: 700;

 line-height: 1.8;

 text-align: center;
}

.invest-bottom {
 background: var(--white);

 text-align: center;
}

.invest-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: min(72vw, 360px);
	min-height: clamp(72px, 9vw, 110px);
	padding: 0 2rem;
	border-radius: 999px;
	background: var(--bg); /* use main theme color */
	color: #fff;
	text-decoration: none;
	font-size: clamp(1.8rem, 3.5vw, 2.4rem);
	font-weight: 800;
	transition: all 0.3s ease;
	border: 2px solid var(--bg);
}

.invest-btn:hover {
	background: transparent;
	color: var(--bg);
	border-color: var(--bg);
	transform: translateY(-2px);
}

.invest-note {
 margin: 0;

 color: rgba(1, 49, 78, 0.85);

 font-size: clamp(0.95rem, 1.8vw, 1.15rem);

 line-height: 1.7;

 text-align: center;
}

.invest-bottom p {
 font-size: 30px;

 color: var(--bg);

 margin: 0;

 font-weight: 500;

 line-height: 1.5;
}

.invest-bottom h3 {
 color: var(--bg);

 font-size: 40px;
}

.invest-bottom .invest-btn {
 margin: 30px 0;
}

.invest-logos {
 display: flex;

 flex-wrap: wrap;

 justify-content: center;

 gap: 0.85rem;

 margin: 30px 0;
}

.logo {
 display: inline-flex;

 align-items: center;

 justify-content: center;

 min-width: 98px;

 padding: 0.85rem 1rem;

 border-radius: 18px;

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

 color: #01314e;

 font-size: 0.95rem;

 font-weight: 700;

 text-transform: uppercase;
}

.logo img {
 max-width: 120px;
}

/* ===== TABLET RESPONSIVE (768px - 1024px) ===== */

@media (max-width: 1024px) and (min-width: 768px) {
 .content-wrap {
  padding: 40px 20px;

  max-width: 100%;
 }

 .title-main {
  font-size: 4rem;
 }

 .title-sub {
  font-size: 2.5rem;
 }

 .accent-line {
  font-size: 2.8rem;
 }

 .accent-sub {
  font-size: 1.8rem;
 }

 .section-title {
  font-size: 2.5rem;
 }

 .support-text {
  font-size: 1.3rem;
 }

 .cta-btn {
  min-width: 80vw;

  min-height: 70px;

  font-size: 1.8rem;
 }

 .results-intro {
  font-size: 1.8rem;
 }

 .results-detail {
  font-size: 1.1rem;
 }

 .results-btn {
  min-width: 75vw;

  font-size: 1.8rem;
 }

 .stats-section h2 {
  font-size: 2.8rem;
 }

 .stats-section .stats-content p {
  font-size: 1.2rem;
 }

 .stat-card p {
  font-size: 1.1rem;
 }

 .meaning-lead {
  font-size: 2rem;
 }

 .meaning-btn {
  min-width: 70vw;

  font-size: 1.6rem;
 }

 .meaning-note {
  font-size: 1.2rem;
 }

 .benefits-section h2 {
  font-size: 2.5rem;
 }

 .benefit-card h3 {
  font-size: 1.8rem;
 }

 .benefit-card p {
  font-size: 1.2rem;
 }

 .audience-header h2 {
  font-size: 2.5rem;
 }

 .audience-header p {
  font-size: 1.2rem;
 }

 .audience-main h3,
 .audience-subcard h3 {
  font-size: 1.8rem;
 }

 .audience-main li,
 .audience-subcard li {
  font-size: 1.1rem;
 }

 .testimonial-card {
  min-height: 200px;

  padding: 15px;
 }

 .testimonial-card p {
  font-size: 1.1rem;
 }

 .testimonial-btn {
  min-width: 65vw;

  font-size: 1.6rem;
 }

 .stuck-section h2 {
  font-size: 2.2rem;
 }

 .stuck-list li {
  font-size: 1.1rem;
 }

 .stuck-btn {
  min-width: 70vw;

  font-size: 1.8rem;
 }

 .offer-title {
  font-size: 2.5rem;
 }

 .offer-btn {
  min-width: 70vw;

  font-size: 1.6rem;
 }

 .package-header h2 {
  font-size: 2.2rem;
 }

 .package-text p {
  font-size: 1.2rem;
 }

 .testimonails-cards {
  gap: 8px;
 }

 .testimonial-columns {
  width: 48%;
 }

 .mobile-video-card .cta-btn {
  font-size: 2rem;
 }

 .mobile-video-subtitle {
  font-size: 1.2rem;
 }

 .invest-header h2 {
  font-size: 2.5rem;
 }

 .invest-list li {
  font-size: 1.4rem;
 }

 .invest-text {
  font-size: 2rem;
 }

 .faq-card p {
  font-size: 1.2rem;
 }

 .faq-row p {
  font-size: 1.3rem;
 }
}

/* ===== MOBILE RESPONSIVE (Below 768px) ===== */

@media (max-width: 767px) {
 .content-wrap {
  padding: 30px 15px;

  max-width: 100%;
 }

 .header-wrap {
  padding: 8px;
 }

 .header-wrap ul li a {
  padding: 10px 20px;

  font-size: 0.9rem;

  width: 100%;

  justify-content: center;
 }

 .audience-main li::before,
 .audience-subcard li::before {
  font-size: 32px;
 }

 .hero {
  display: block;
 }

 .hero .content-wrap {
  text-align: center;

  padding: 30px 15px;
 }

 .title-main {
  font-size: clamp(2rem, 7vw, 3.5rem);

  margin-bottom: 15px;
 }

 .title-sub {
  font-size: clamp(1.3rem, 5vw, 2rem);

  margin-bottom: 15px;
 }

 .accent-line {
  font-size: clamp(1.2rem, 4.5vw, 2rem);

  margin-bottom: 10px;
 }

 .accent-sub {
  font-size: clamp(1rem, 3.5vw, 1.5rem);

  margin-bottom: 15px;
 }

 .support-text {
  font-size: clamp(0.95rem, 3vw, 1.2rem);

  margin-bottom: 20px;
 }

 .section-title {
  font-size: clamp(1.3rem, 4vw, 1.8rem);

  margin-bottom: 20px;
 }

 .cta-btn {
  min-width: 90vw;

  min-height: 60px;

  font-size: clamp(1.2rem, 3.5vw, 1.8rem);

  margin-bottom: 20px;

  padding: 0 1rem;
 }

 .image-panel {
  display: none;
 }

 .hero .image-panel:before {
  display: none;
 }

 /* Results Section Mobile */

 .results-section {
  padding: 25px 0;
 }

 .results-copy {
  gap: 12px;
 }

 .results-intro {
  font-size: clamp(1.3rem, 5vw, 1.8rem);

  margin-bottom: 15px;
 }

 .results-detail {
  font-size: clamp(0.95rem, 3.5vw, 1.1rem);

  margin-bottom: 10px;
 }

 .results-highlight {
  font-size: clamp(1rem, 4vw, 1.3rem);

  margin: 12px 0;
 }

 .results-sub {
  font-size: clamp(0.9rem, 3vw, 1rem);

  margin-bottom: 20px;
 }

 .results-btn {
  min-width: 85vw;

  min-height: 55px;

  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
 }

 .results-footer {
  font-size: clamp(0.85rem, 2.5vw, 1rem);
 }

 /* Stats Section Mobile */

 .stats-section {
  padding: 25px 0;
 }

 .stats-section h2 {
  font-size: clamp(1.8rem, 5vw, 2.5rem);

  margin-bottom: 15px;
 }

 .stats-section .stats-content p {
  font-size: clamp(1rem, 3vw, 1.3rem);
 }

 .stats-grid {
  flex-direction: column;

  gap: 20px;
 }

 .stat-card {
  flex-direction: column;

  gap: 15px;
 }

 .stat-card p {
  font-size: clamp(0.95rem, 3vw, 1.1rem);

  text-align: center;
 }

 /* Meaning Section Mobile */

 .meaning-section .content-wrap {
  padding: 25px 15px;
 }

 .meaning-card h2 {
  font-size: clamp(1.8rem, 5vw, 2.5rem);

  margin-bottom: 15px;
 }

 .meaning-lead {
  font-size: clamp(1.2rem, 4vw, 1.6rem);

  margin-bottom: 15px;
 }

 .meaning-emphasis {
  font-size: clamp(1rem, 3.5vw, 1.2rem);

  margin-bottom: 10px;
 }

 .meaning-content {
  font-size: clamp(1rem, 3vw, 1.3rem);

  font-weight: 500;
 }

 .meaning-sub {
  font-size: clamp(0.95rem, 3vw, 1.1rem);

  margin-bottom: 12px;
 }

 .meaning-intro {
  font-size: clamp(1rem, 3.5vw, 1.2rem);

  margin-bottom: 12px;
 }

 .meaning-btn {
  min-width: 85vw;

  min-height: 55px;

  font-size: clamp(1.2rem, 3.5vw, 1.6rem);

  margin-bottom: 15px;
 }

 .meaning-note {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
 }

 /* Benefits Section Mobile */

 .benefits-section {
  padding: 25px 0;
 }

 .benefits-section h2 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);

  margin: 0 0 20px 0;
 }

 .benefits-grid {
  gap: 15px;
 }

 .benefit-card {
  text-align: center;
 }

 .benefit-card h3 {
  font-size: clamp(1.2rem, 4vw, 1.6rem);

  margin: 0 0 10px 0;
 }

 .benefit-card p {
  font-size: clamp(0.95rem, 3vw, 1.1rem);
 }

 /* Audience Section Mobile */

 .audience-section {
  padding: 0 0 20px;
 }

 .audience-header {
  padding: 25px 15px;
 }

 .audience-header h2 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
 }

 .audience-header p {
  font-size: clamp(1rem, 2.5vw, 1.3rem);

  margin-top: 10px;
 }

 .audience-main,
 .audience-subcard {
  padding: 20px 15px !important;

  margin-bottom: 15px;
 }

 .audience-main h3,
 .audience-subcard h3 {
  font-size: clamp(1.3rem, 4vw, 1.6rem);

  margin: 0 0 12px 0;

  margin-right: 0;
 }

 .audience-main ul,
 .audience-subcard ul {
  gap: 10px;
 }

 .audience-main li,
 .audience-subcard li {
  font-size: clamp(0.9rem, 2.8vw, 1.1rem);

  padding-inline-start: 2.5rem;
 }

 .audience-main li strong,
 .audience-subcard li strong {
  font-size: clamp(1rem, 3vw, 1.3rem);

  display: block;
 }

 /* Testimonials Section Mobile */

 .testimonial-section {
  padding: 20px 0;
 }

 .testimonial-head {
  gap: 15px;

  margin-bottom: 20px;
 }

 .testimonial-head h2 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
 }

 .testimonial-head p {
  font-size: clamp(0.95rem, 3vw, 1.1rem);
 }

 .testimonial-grid {
  grid-template-columns: 1fr;

  gap: 15px;
 }

 .testimonial-card {
  min-height: auto;

  padding: 15px;
 }

 .testimonial-card p {
  font-size: clamp(0.95rem, 3vw, 1.1rem);
 }

 .testimonial-action {
  margin-top: 25px;

  gap: 10px;
 }

 .testimonial-btn {
  min-width: 85vw;

  min-height: 55px;

  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
 }

 .testimonial-note {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
 }

 .mobile-video-card .content-wrap {
  gap: 15px;
 }

 .mobile-video-card .cta-btn {
  font-size: clamp(1.3rem, 4vw, 2rem);

  margin: 0;
 }

 .mobile-video-subtitle {
  font-size: clamp(1rem, 3vw, 1.3rem);
 }

 .testimonails-cards {
  flex-direction: column;

  gap: 15px;
 }

 .testimonial-columns {
  width: 100%;
 }

 .mobile-video-text .content-wrap {
  padding: 25px 15px;
 }

 .mobile-video-text p {
  font-size: clamp(1rem, 3vw, 1.3rem);

  margin: 0 0 12px 0;
 }

 .mobile-video-text h3 {
  font-size: clamp(1.3rem, 4vw, 1.8rem);

  margin: 15px 0;
 }

 /* Stuck Section Mobile */

 .stuck-section {
  padding: 25px 0;
 }

 .stuck-section h2 {
  font-size: clamp(1.4rem, 5vw, 2rem);

  margin: 0 0 20px 0;
 }

 .stuck-list {
  margin: 0 0 20px 0;

  gap: 12px;
 }

 .stuck-list li {
  font-size: clamp(0.95rem, 3vw, 1.2rem);

  padding-right: 2rem;
 }

 .stuck-problem {
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
 }

 .stuck-solution {
  font-size: clamp(1rem, 3vw, 1.3rem);
 }

 .stuck-btn {
  min-width: 85vw;

  min-height: 55px;

  font-size: clamp(1.2rem, 3.5vw, 1.8rem);

  margin: 20px 0 15px 0;
 }

 .stuck-footer {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
 }

 /* Offer Section Mobile */

 .offer-section {
  padding: 25px 0;
 }

 .offer-title {
  font-size: clamp(1.6rem, 5vw, 2.2rem);

  margin: 0 0 15px 0;
 }

 .offer-list {
  max-width: 100%;
 }

 .offer-list li {
  font-size: clamp(0.95rem, 3vw, 1.2rem);
 }

 .offer-quote {
  font-size: clamp(1.1rem, 3.5vw, 1.4rem);

  margin: 20px 0 0 0;
 }

 .offer-btn {
  min-width: 85vw;

  min-height: 55px;

  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
 }

 .offer-note {
  font-size: clamp(0.9rem, 2.5vw, 1rem);
 }

 /* Package Section Mobile */

 .package {
  padding: 20px 0;
 }

 .package-header {
  padding: 20px 15px;
 }

 .package-header h2 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
 }

 .package-header p {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
 }

 .package-card {
  padding: 20px 0 0;
 }

 .package-text {
  gap: 12px;

  margin-bottom: 20px;
 }

 .package-text p {
  font-size: clamp(1rem, 3vw, 1.3rem);
 }

 .package-card .cta-btn {
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);

  margin-bottom: 15px;
 }

 .package-note {
  font-size: clamp(1rem, 3vw, 1.3rem);

  margin: 0 0 20px 0;
 }

 .package-image {
  max-width: 100%;
 }

 .package-image img {
  max-width: 100%;

  max-height: 250px;
 }

 .story-top {
  padding: 0 15px;
 }

 .story-top p {
  font-size: clamp(1rem, 3vw, 1.3rem);

  margin: 0 0 15px 0;
 }

 .story-top h2 {
  font-size: clamp(1.4rem, 4vw, 2rem);
 }

 .content-blue {
  padding: 20px 15px;

  margin-top: 15px;
 }

 .content-blue h3 {
  font-size: clamp(1.3rem, 4vw, 1.8rem);

  margin: 0 0 12px 0;
 }

 .story-list {
  gap: 10px;

  margin-bottom: 20px;
 }

 .story-list p {
  font-size: clamp(0.95rem, 3vw, 1.1rem);
 }

 .strong-bottm {
  text-align: center;
 }

 .story-cta-title {
  font-size: clamp(1.3rem, 4vw, 2rem);
 }

 .story-cta-subtitle {
  font-size: clamp(0.95rem, 3vw, 1.1rem);
 }

 /* Reviews Section Mobile */

 .reviews-section {
  padding: 20px 0;
 }

 .reviews-head {
  gap: 15px;

  margin-bottom: 20px;
 }

 .reviews-head h2 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
 }

 .reviews-image img {
  max-width: 100%;
 }

 /* FAQ Section Mobile */

 .faq-section {
  padding: 20px 0;
 }

 .faq-head {
  gap: 15px;

  margin-bottom: 20px;
 }

 .faq-icon img {
  max-width: 150px;
 }

 .faq-head h2 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
 }

 .faq-card {
  padding: 12px;

  margin: 0 15px 20px 15px;

  max-width: 100%;
 }

 .faq-card p {
  font-size: clamp(1rem, 3vw, 1.3rem);
 }

 .faq-row {
  margin: 0 15px 15px 15px;
 }

 .faq-row p {
  font-size: clamp(1rem, 3vw, 1.3rem);
 }

 .invest-header {
  gap: 15px;

  margin-bottom: 20px;
 }

 .invest-icon img {
  max-width: 130px;
  top: 10px;
 }

 .invest-header h2 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
 }

 .invest-label {
  font-size: clamp(1.3rem, 4vw, 1.8rem);

  margin: 0 0 15px 0;
 }

 .invest-list {
  margin: 0 0 30px 0;

  gap: 8px;
 }

 .invest-list li {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
 }

 .invest-text {
  font-size: clamp(1.4rem, 4vw, 2rem);
 }

 .invest-bottom {
  padding: 20px 15px 0;
 }

 .invest-bottom p {
  font-size: clamp(1rem, 3vw, 1.3rem);
 }

 .invest-bottom h3 {
  font-size: clamp(1.3rem, 4vw, 1.8rem);
 }

 .invest-btn {
  min-width: 85vw;

  min-height: 55px;

  font-size: clamp(1.2rem, 3.5vw, 1.6rem);

  margin: 20px 0;
 }

 .invest-note {
  font-size: clamp(0.9rem, 2.5vw, 1rem);
 }

 .invest-logos {
  gap: 10px;

  margin: 20px 0;
 }

 .logo {
  min-width: 85px;

  padding: 0.7rem 0.8rem;

  font-size: 0.8rem;
 }

 .logo img {
  max-width: 100px;
 }

 /* Video Container Mobile */

 .video-container {
  max-width: 100%;

  height: auto;
 }

 video {
  width: 100%;

  height: auto;
 }

.play-icon {
   width: 40px;
   height: 40px;
   font-size: 16px;
   line-height: 1.2;
   display: flex;
   padding: 0;
   align-items: center;
   justify-content: center;
}

 /* Image Container Mobile */

 .image-container {
  max-width: 100%;
 }

 .image-panel img {
  max-width: 100%;
 }
}

/* =========================
   CONTACT SECTION
========================= */
.footer-contact-ar {
	padding: 70px 0;
	background: #f7f7f7;
	width: 100%;
}

.footer-contact-ar .container {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* =========================
   TOP INFO ROW
========================= */
.contact-info-line {
	margin-bottom: 12px;
}

.contact-info-line a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-size: 20px;
	line-height: 1.4;
	color: var(--bg);
	font-weight: 600;
	transition: all 0.25s ease;
}

.contact-info-line a:hover {
	color: var(--pink);
}

.contact-info-line a span {
	line-height: 1.4;
}

.contact-info-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #f1f3f5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	flex: 0 0 38px;
	color: var(--bg);
	transition: all 0.25s ease;
}

.contact-info-line a:hover .contact-info-icon {
	background: var(--pink);
	color: var(--bg);
}

/* =========================
   SOCIAL ICONS
========================= */
.contact-social-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 5px;
	background: #f1f3f5 !important;
	color: var(--bg);
	text-decoration: none;
	transition: all 0.25s ease;
	overflow: hidden;
}

.contact-social-icon i {
	font-size: 18px;
	line-height: 1;
}

.contact-social-icon:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
	background: var(--bg) !important;
	color: #fff !important;
}

/* =========================
   FORM CARD
========================= */
.contact-form-card {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
	overflow: hidden;
}

.contact-form-card .card-body {
	padding: 40px;
}

/* =========================
   FORM GRID FIX
========================= */
#contactForm {
	width: 100%;
	margin: 0;
}

#contactForm .row {
	margin-left: 0;
	margin-right: 0;
	align-items: stretch;
}

#contactForm .row > [class*="col-"] {
	padding-left: 12px;
	padding-right: 12px;
}

#contactForm .form-group {
	margin-bottom: 0;
}

/* =========================
   INPUTS
========================= */
.contact-input {
	width: 100%;
	height: 56px;
	border: 1px solid #d7dce2;
	border-radius: 12px;
	background: #fff;
	color: #333;
	font-size: 17px;
	font-weight: 500;
	padding: 12px 18px;
	box-shadow: none !important;
	transition: all 0.25s ease;
}

.contact-input::placeholder {
	color: #8d9299;
	opacity: 1;
	font-size: 17px;
	font-weight: 500;
}

.contact-input:focus {
	border-color: var(--bg);
	box-shadow: 0 0 0 3px rgba(0, 67, 103, 0.07) !important;
	outline: none;
}

.contact-textarea {
	height: 160px;
	min-height: 160px;
	padding-top: 14px;
	padding-bottom: 14px;
	resize: none;
	line-height: 1.7;
}

/* =========================
   SUBMIT BUTTON
========================= */
.contact-submit-btn {
	min-width: 145px;
	padding: 10px 30px;
	border: 2px solid var(--bg);
	border-radius: 999px;
	background: transparent !important;
	color: var(--bg) !important;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: none !important;
	transition: all 0.25s ease;
}

.contact-submit-btn:hover,
.contact-submit-btn:focus {
	background: var(--bg) !important;
	color: #fff !important;
	border-color: var(--bg) !important;
	box-shadow: none !important;
}

.contact-submit-btn:active {
	transform: translateY(1px);
}

/* theme override protection */
.contact-submit-btn.button,
.contact-submit-btn.button:hover,
.contact-submit-btn.button:focus {
	text-decoration: none;
}

/* =========================
   SPACING HELPERS
========================= */
.footer-contact-ar .row.mb-4 {
	row-gap: 16px;
}

.footer-contact-ar .text-start {
	text-align: right !important;
}

[dir="ltr"] .footer-contact-ar .text-start,
.footer-contact-ar [dir="ltr"].text-start {
	text-align: left !important;
}

/* =========================
   TABLET
========================= */
@media (max-width: 991.98px) {
	.footer-contact-ar {
		padding: 55px 0;
	}

	.footer-contact-ar .container {
		padding-left: 18px;
		padding-right: 18px;
	}

	.contact-info-line a {
		font-size: 18px;
	}

	.contact-info-icon {
		width: 36px;
		height: 36px;
		font-size: 17px;
		flex-basis: 36px;
	}

	.contact-form-card .card-body {
		padding: 28px;
	}

	.contact-input {
		height: 54px;
		font-size: 16px;
	}

	.contact-input::placeholder {
		font-size: 16px;
	}

	.contact-textarea {
		height: 145px;
		min-height: 145px;
	}

	.contact-submit-btn {
		font-size: 18px;
	}
}

/* =========================
   MOBILE
========================= */
@media (max-width: 767.98px) {
	.footer-contact-ar {
		padding: 40px 0;
	}

	.footer-contact-ar .container {
		padding-left: 15px;
		padding-right: 15px;
	}

	.contact-info-line {
		text-align: center;
		margin-bottom: 8px;
	}

	.contact-info-line a {
		font-size: 17px;
		justify-content: center;
		flex-wrap: wrap;
	}

	.contact-info-icon {
		width: 34px;
		height: 34px;
		font-size: 16px;
		border-radius: 9px;
		flex-basis: 34px;
	}

	.contact-social-icon {
		width: 42px;
		height: 42px;
		margin: 0 4px;
		border-radius: 10px;
	}

	.contact-social-icon i {
		font-size: 16px;
	}

	.contact-form-card {
		border-radius: 16px;
	}

	.contact-form-card .card-body {
		padding: 20px;
	}

	#contactForm .row {
		margin-left: 0;
		margin-right: 0;
	}

	#contactForm .row > [class*="col-"] {
		padding-left: 0;
		padding-right: 0;
	}

	.contact-input {
		height: 52px;
		font-size: 15px;
		padding: 10px 14px;
		border-radius: 10px;
	}

	.contact-input::placeholder {
		font-size: 15px;
	}

	.contact-textarea {
		height: 135px;
		min-height: 135px;
		padding-top: 12px;
	}

	.contact-submit-btn {
		width: 100%;
		min-width: 100%;
		font-size: 17px;
		padding: 12px 20px;
	}

	.footer-contact-ar .text-start {
		text-align: center !important;
	}
}

/* =========================
   SMALL MOBILE
========================= */
@media (max-width: 575.98px) {
	.footer-contact-ar .container {
		padding-left: 12px;
		padding-right: 12px;
	}

	.contact-info-line a {
		font-size: 16px;
	}

	.contact-form-card .card-body {
		padding: 16px;
	}

	.contact-input {
		font-size: 14px;
	}

	.contact-input::placeholder {
		font-size: 14px;
	}

	.contact-textarea {
		height: 125px;
		min-height: 125px;
	}
}