@import url('https://fonts.googleapis.com/css2?family=Rakkas&display=swap');


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@font-face {
  font-family: "Janna LT";
  src: url("ArbFONTS-Janna-LT-Regular.ttf") format("truetype");
  font-weight: normal;
}

@font-face {
  font-family: "Janna LT";
  src: url("ArbFONTS-Janna-LT-Bold.ttf") format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: "Janna LT";
  src: url("Janna-LT-Regular.ttf") format("truetype");
  font-weight: normal;
}

@font-face {
  font-family: "Janna LT";
  src: url("Janna-LT-Bold.ttf") format("truetype");
  font-weight: bold;
}

body {
  font-family: "Janna LT", sans-serif;

  line-height: 1.6;
  color: #333;
  background: #fff;
}
.btn {
  font-family: "Janna LT", sans-serif;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header Styles - Exact Match */
.header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: fixed;
  inset-block-start: 0;
inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 1000;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}

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


.logo {
  flex: 0 0 auto;
}

.logo-text {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.logo-main {
  font-size: 24px;
  font-weight: 700;
  color: #20b2aa;
}

.logo-sub {
  font-size: 12px;
  font-weight: 600;
  color: #20b2aa;
  letter-spacing: 1px;
}

/* Navigation - Center */
.nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 35px;
  margin: 0;
}

.nav-link {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  font-size: 15px;
  transition: color 0.3s ease;
  padding: 8px 0;
}

.nav-link:hover {
  color: #20b2aa;
}

/* Header Actions - Left Side */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;

  flex: 0 0 auto;
}

.primary-btn {
  background: #20b2aa;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(32, 178, 170, 0.2);
}

.primary-btn:hover {
  background: #1a9a93;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(32, 178, 170, 0.3);
}

.language-selector {
  position: relative;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s ease;
  color: #333;
}

.lang-btn:hover {
  background: #e9ecef;
  border-color: #dee2e6;
}

.lang-flag {
  font-size: 16px;
}

.dropdown-icon {
  transition: transform 0.3s ease;
}

.login-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.login-btn:hover {
  background: #f8f9fa;
}

/* Hero Section - Exact Match */
.hero {
  position: relative;
  height: 120vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
}

.hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(32, 178, 170, 0.85) 0%,
    rgba(0, 128, 128, 0.75) 50%,
    rgba(32, 178, 170, 0.8) 100%
  );
  z-index: -1;
}

.hero-content {
  text-align: center;
  color: white;
  max-width: 900px;
  margin: 0 auto;
  padding-top: 80px;
}

.hero-title {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 25px;
  line-height: 1.2;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.title-dots {
  color: white;
}

.hero-description {
  font-size: 1.25rem;
  margin-bottom: 45px;
  opacity: 1;
  line-height: 1.7;
  font-weight: 400;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.hero-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  direction: ltr;
}

.btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  border: 2px solid transparent;
  min-width: 180px;
  justify-content: center;

}

.btn-primary {
  background: #00B1BD !important;
  color: white !important;
  border-color: #20b2aa;
  box-shadow: 0 4px 15px rgba(32, 178, 170, 0.4);
  font-family: Janna LT !important;
font-weight: 700 !important;
font-size: 18px !important;
line-height: 100%;
letter-spacing: 0%;
text-align: center;

}

.btn-primary:hover {
  background: #1a9a93;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(32, 178, 170, 0.5);
}

.btn-outline {
  background: transparent;
  color: #00B1BD !important;
  border-color: rgba(255, 255, 255, 0.8) ;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
  direction: ltr;
  background-color:#FFFFFF !important;
  font-family: Janna LT !important;
font-weight: 700 !important;
font-size: 18px !important;
line-height: 100%;
letter-spacing: 0%;
text-align: center;


}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}


.about {
  padding: 40px 0;
  background: #f8f9fa;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}


.section-badge{
 display: inline-flex;     
 align-items: center;
  gap: 10px;
  height: 36px;                   
  border-radius: 999px;          
  background:#C59B3A;           
  color: #fff;
  font-family: 'Rakkas', system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;             
  font-size: 16px;
  line-height: 32px;
  letter-spacing: -0.2px;         
  text-transform: capitalize;

  opacity: 1;
}

.section-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 25px;
  line-height: 1.2;
}

.section-description {
  font-size: 1.15rem;
  color: #666;
  line-height: 1.8;
  margin-bottom: 45px;
  font-weight: 400;
}

.about-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;

}

.about-actions .btn {
  padding: 14px 28px;
  font-size: 15px;
  min-width: 160px;
  direction: ltr;
}

.btn-outline-dark {
  background: transparent;
  background-color: white !important;
 color: #009CA3 !important;
  border-color: #ddd !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  font-family: Janna LT !important;
font-weight: 700  !important;
font-size: 16px !important;
line-height: 100%;
letter-spacing: 0%;
text-align: center;


   
}

.btn-outline-dark:hover {
  background: white;
  border-color: #009CA3 !important;
  color: #009CA3 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(32, 178, 170, 0.15);
  font-family: Janna LT !important;
font-weight: 700 !important;
line-height: 100%;
letter-spacing: 0%;
text-align: center;

}

.btn-primary-dark {
  background: transparent;
  color: white !important;
  background-color: #00B1BD !important;
  border-color: #ddd !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  font-family: Janna LT !important;
font-weight: 700  !important;
font-size: 16px !important;
line-height: 100%;
letter-spacing: 0%;
text-align: center;

}

.btn-primary-dark:hover {
  background: #1a9a93;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(32, 178, 170, 0.4);
}

/* Image Container - Exact Match */
.image-container {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.image-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.2);
}

.image-container img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(32, 178, 170, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(32, 178, 170, 0.4);
  backdrop-filter: blur(10px);
}

.play-button:hover {
  background: #20b2aa;
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 12px 35px rgba(32, 178, 170, 0.6);
}

.video-info {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 15px 20px;
  border-radius: 12px;
  backdrop-filter: blur(15px);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.video-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.video-details {
  flex: 1;
}

.video-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

.video-subtitle {
  font-size: 12px;
  opacity: 1;
  color: #ccc;
}

/* Footer Styles - Exact Match */
/* Footer - Exact Match to Image */
.footer {
  background: #fff;
  padding: 60px 0;
  position: relative;
  font-family: "Janna LT", sans-serif;
  text-align: right;

}

.footer-svg-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 0;
  overflow: hidden;
}

.footer-svg-bg svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: auto;
}

.container {
  position: relative;
  z-index: 1;
}

.footer-brand {
  margin-bottom: 40px;
}

.footer-logo {
  font-size: 28px;
  font-weight: bold;
  color: #20b2aa;
  margin-bottom: 20px;
}

.footer-description {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.footer-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.footer-divider {
  height: 1px;
  background: #e9ecef;
  margin: 15px 0;
}

.app-stores {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

.app-store {
  background: #f8f9fa;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  border: 1px solid #e9ecef;
  text-align: center;
}

.links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

.links-list a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

.links-list a:hover {
  color: #20b2aa;
}

.nav-link.active {
  color: #fff !important;
  background: #00b1bd !important;
  border-radius: 6px;
}

/* Mobile navbar styles */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}
.nav-toggle .bar {
  width: 25px;
  height: 3px;
  background: #00b1bd;
  margin: 4px 0;
  border-radius: 2px;
  transition: 0.3s;
}
@media (max-width: 768px) {
  .nav {
    display: none;
    position: absolute;
    top: 70px;
    right: 0;
    background: #fff;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
  .nav.open {
    display: block;
  }
  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
  }
  .nav-link {
    width: 100%;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
  }
  .nav-toggle {
    display: flex;
  }
}

/* Active nav-link styles */
.nav-link.active {
  color: #fff !important;
  background: #00b1bd !important;
  border-radius: 6px;
  padding: 10px 15px;
}

/* Services Section */
.services {
  padding: 120px 0;
  background: #f8f9fa;
}

.services-header {
  text-align: center;
  margin-bottom: 80px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.services-grid {
  display: grid;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
 
}

.service-card {
  background: white;
  padding: 40px 30px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
  position: relative;
  overflow: hidden;
  
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.service-card.featured {
  background: linear-gradient(135deg, #20b2aa 0%, #1a9a93 100%);
  color: white;
  grid-column: span 2;
}

.service-card.featured .service-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.service-card.featured .service-title {
  color: white;
}

.service-card.featured .service-description {
  color: rgba(255, 255, 255, 0.9);
}

.service-icon {
  width: 80px;
  height: 80px;
  background: #f0f8ff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  font-size: 32px;
  color: #20b2aa;
  transition: all 0.3s ease;
}

.service-card:hover .service-icon {
  transform: scale(1.1);
  background: #20b2aa;
  color: white;
}

.service-card.featured:hover .service-icon {
  background: rgba(255, 255, 255, 0.3);
  color: white;
}

.service-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
  line-height: 1.3;
}

.service-description {
  font-size: 1rem;
  color: #666;
  line-height: 1.7;
  font-weight: 400;
}

/* Responsive Design */
@media (max-width: 768px) {
  .nav-list {
    display: none;
  }

  .hero-title {
    font-size: 2.8rem;
  }

  .hero-description {
    font-size: 1.1rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .about-content {
    grid-template-columns: 1fr;
    gap: 50px;
  }

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

  .header-actions {
    gap: 8px;
  }

  .btn {
    min-width: 150px;
    padding: 14px 24px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2.2rem;
  }

  .hero-description {
    font-size: 1rem;
  }

  .btn {
    padding: 12px 20px;
    font-size: 14px;
    min-width: 140px;
  }

  .container {
    padding: 0 15px;
  }

  .about {
    padding: 80px 0;
  }

  .image-container img {
    height: 300px;
  }
}

/* Responsive Design for Services */
@media (max-width: 768px) {
  .services {
    padding: 80px 0;
  }

  .services-header {
    margin-bottom: 50px;
  }

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

  .service-card.featured {
    grid-column: span 1;
  }

  .service-card {
    padding: 30px 20px;
  }

  .service-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
    margin-bottom: 20px;
  }

  .service-title {
    font-size: 1.2rem;
  }

  .service-description {
    font-size: 0.9rem;
  }
}

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

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

  .service-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
}


.transport {
  padding: 60px 0;
  background-color: #f8f9fc;
  text-align: start;
}

.transport__header {
  margin-bottom: 40px;
}

.transport__tag{
height: 36px;
gap: 10px;
opacity: 1;
border-radius: 250px;
background-color:#C59B3A;
font-family: "Rakkas";
font-weight: 400;
font-style: normal;
font-size: 19px;
line-height: 32px;
letter-spacing: -0.2px;
text-transform: capitalize;
color: #FFFFFF;
justify-content: center;
align-items: center;

}

.transport__title {
  font-size: 28px;
  font-weight: 700;
  margin: 10px 0;
}

.transport__desc {
  color: #666;
  font-size: 16px;
}

.transport__grid-custom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 10px;
  max-width: 1000px;
  margin: 0 auto;
}

.tcard {
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.tcard:hover {
  transform: translateY(-5px);
}

.tcard img {
  max-width: 100%;
  height: 150px;
  object-fit: contain;
  margin-bottom: 15px;
}

.tcard__label {
  font-size: 16px;
  font-weight: 600;
  color: #00a0a0;
}

.tcard__label--cyan {
  color: #009688;
}

.tcard__label--link {
  color: #0077c2;
}

/* يشيل أي underline داخل بطاقات النقل */
.transport__grid-custom .tcard,
.transport__grid-custom .tcard:hover,
.transport__grid-custom .tcard:focus,
.transport__grid-custom .tcard:active {
  text-decoration: none !important;

}

/* لو فيه ستايل يضيف خط لهذا الكلاس */
.transport__grid-custom .tcard__label,
.transport__grid-custom .tcard__label--link {
  text-decoration: none !important;
    color: #1FCBD4 !important;
  font-family: Janna LT !important;
font-weight: 700 !important;
font-size: 24px !important;
line-height: 32px;
letter-spacing: -0.2%;
text-transform: capitalize;

}


/* توزيع العناصر (2-1-2) */
.transport__grid-custom a:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.transport__grid-custom a:nth-child(2) {
  grid-column: 2;
  grid-row: 2;
}
.transport__grid-custom a:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}
.transport__grid-custom a:nth-child(4) {
  grid-column: 1;
  grid-row: 3;
}
.transport__grid-custom a:nth-child(5) {
  grid-column: 3;
  grid-row: 3;
}

.only-badge{
height: 36px;
gap: 10px;
opacity: 1;
border-radius: 250px;
background-color:#C59B3A !important;
font-family: "Rakkas" !important;
font-weight: 400 !important;
font-style: normal;
font-size: 19px !important;
line-height: 32px;
letter-spacing: -0.2px;
text-transform: capitalize;
color: #FFFFFF !important;
justify-content: center;
align-items: center;


}

.corner-motif,
.corner-motif img,
.corner-motif img * {
  opacity: 1 !important;
  fill-opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  width: auto!important;
height: auto!important;
 position: absolute;
  inset-block-start: -2px;
inset-inline-end: -1px;
  width: 90px;            
  pointer-events: none;

}
:dir(ltr) .corner-motif img { transform: scaleX(-1); }


.circle-icon {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 10px;
width: 64px;
height: 64px;
flex: none;
flex-grow: 0;
background-color: #ECECEC;
border-radius: 2000px;
}
.circle-icon1 {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px;
gap: 10px;
width: 64px;
height: 64px;
flex: none;
flex-grow: 0;
background-color: #FFFFFF24;
border-radius: 2000px;
}


/* الكارد الكبير حول القسم (اختياري لحدة الشكل) */
.split{
  background:#fff ;
  border-radius:28px;
  box-shadow:0 20px 50px rgba(17, 38, 64, .08);
}

/* المستطيلات لكل نقطة */
.split .vstack > div{
  background:#F9F9F9;
  border:1px solid #e6edf5;
  border-radius:16px;
  padding:16px 18px;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
}

/* تحسين العناوين داخل المستطيل */
.split .vstack > div h6{
  margin:0 0 .35rem;
  color:#333333;
  font-family: Janna LT;
font-weight: 700;
font-style: Bold;
font-size: 20px;
line-height: 100%;
letter-spacing: 0%;


}
.split .vstack > div h2{
  margin:0 0 .35rem;
  color:#333333 !important;
 font-family: Janna LT !important;
font-weight: 700 !important;
font-size: 38px !important; 
line-height: 100%;
letter-spacing: 0%;
text-align: right;

}

.text-secondary p{
    font-family: Janna LT !important;
font-weight: 400 !important;
font-size: 16px !important;
line-height: 28px;
letter-spacing: 0%;
text-align: right;
color: #404040 !important;

}





.split .vstack > div ul{
  list-style:none;
  margin:0;
  padding:0;
}
.split .vstack > div li{
  position:relative;
  line-height:1.9;
  color:#666666;
  padding-inline-start: 1.2rem;
  font-family: Janna LT;
font-weight: 400;
font-size: 16px;
line-height: 28px;
letter-spacing: 0%;



}

/* نقطة ملوّنة يمين السطر (بدل التعداد) */
.split .vstack > div li::before{
  content:"";
  position:absolute;
  top:.72rem;
  inset-inline-start:-.5rem;
  width:.5rem; height:.5rem;
  border-radius:50%;
  background:black;

}


.split .col-lg-6 img{
  border-radius:24px;
}


.badge-soft{
height: 36px !important;
gap: 10px !important;
opacity: 1;
padding-top: 4px;
padding-right: 16px;
padding-bottom: 4px;
padding-left: 16px;
border-radius: 250px;
background-color:#C59B3A !important;
font-family: "Rakkas" !important;
font-weight: 400 !important;
font-style: normal;
font-size: 19px !important;
line-height: 32px;
letter-spacing: -0.2px;
text-transform: capitalize;
color: #FFFFFF !important;

}

.Features__tag {
height: 36px;
gap: 10px;
opacity: 1;
border-radius: 250px !important;
background-color:#C59B3A;
font-family: "Rakkas";
font-weight: 400;
font-style: normal;
font-size: 19px;
line-height: 32px;
letter-spacing: -0.2px;
text-transform: capitalize;
color: #FFFFFF;
justify-content: center;
align-items: center;


}

.Features__title{
    font-family: Janna LT;
font-weight: 700;
font-style: Bold;
font-size: 38px;
line-height: 100%;
letter-spacing: 0%;
color: #333333;
margin-top: 9px;
}

provider__desc{
font-family: Janna LT;
font-weight: 700;
font-style: Bold;
font-size: 16px;
line-height: 28px;
letter-spacing: 0%;
color: #404040;
}

.Features .service-card .d-flex > .circle-icon,
.Features .service-card .d-flex > .circle-icon1{
  flex: 0 0 auto;       
}


.Features .service-card .d-flex > div:last-child{
  flex: 1 1 auto;          

}

/* تجميلي: توحيد الهوامش */
.Features .service-card .title{ margin-bottom:.25rem; }
.Features .service-card .desc{ margin-left:0; }

.section-header{
  text-align: center;
  padding: 56px 0 24px;
}
header.section-header .only-badge{
  display:inline-block;
  background:#e8fbff;
  color:#1299a3;
  border-radius:999px;
  padding:.4rem .85rem;
  font-weight:700;
  margin-bottom:.5rem;
}

/* خدماتنا: الكروت تحت الهيدر مباشرة */
header.section-header + .row .service-card .d-flex > .circle-icon,
header.section-header + .row .service-card .d-flex > .circle-icon1{
  flex: 0 0 auto;      /* الأيقونة ثابتة */
}


header.section-header + .row .service-card .d-flex > div:last-child{
  flex: 1 1 auto;      
}

/* تحسينات صغيرة */
header.section-header + .row .service-card .title{ margin-bottom:.25rem; }
header.section-header + .row .service-card .desc{ margin-left:0; }

/* استجابة للجوال: صف الكارد عمودي والأمور وسط */
@media (max-width: 576px){
  header.section-header + .row .service-card .d-flex{
    flex-direction: column;
    align-items: center;
  }
}


/* خلي كل عمود في #apps ياخذ العرض كامل بدل col-lg-6 */
#apps .col-lg-6{
  flex: 0 0 100%;
  max-width: 100%;
}

/* لمسة شكلية عشان يكبر البانر ويقرب من تصميم فيجما */
#apps .card{
  border-radius: 28px;
}
#apps .card-body{
  padding: 2.25rem 2rem;      /* تكبير الحشوة */
}
#apps .card-body img.img-fluid{
  max-height: 360px;          /* كبر صورة الجوال داخل البانر */
}

/* نصوص أوضح شوية */
#apps .card-body ul{
  font-size: 1.05rem;
  line-height: 2;
}

/* اختياري: وسّع الحاوية في هذا القسم فقط */
@media (min-width: 1400px){
  #apps .container{ max-width: 1320px; }
}


#apps .card{
  background-repeat: no-repeat !important;
  background-size: cover !important;      /* لو تبغى تشوف الصورة كاملة جرّب contain */
  background-position: center !important;  /* ونخصص أدناه لكل بطاقة */
  border-radius: 28px;                     /* نفس شكل الفيجما */
  overflow: hidden;                        /* عشان الحواف تبان مظبوطة */
}

/* العنوان داخل كل بطاقة */
#apps h3{
  font-family: Janna LT;
font-weight: 700;
font-size: 36px;
line-height: 26px;
letter-spacing: 0%;
vertical-align: middle;
color: white !important;
}

/* الفقرة/القائمة */
#apps .card ul{
 font-family: Janna LT;
font-weight: 700;
font-size: 16px;
line-height: 30px;
letter-spacing: 0%;
margin-top: 15px !important;
color: white !important;
}
#apps .card ul li{ margin-bottom: .25rem; }


#apps .badge{
height: 36;
gap: 10px;
opacity: 1;
border-radius: 250px !important;
background-color:#C59B3A;
font-family: "Rakkas";
font-weight: 400 !important;
font-size: 19px !important;
line-height: 32px;
letter-spacing: -0.2px;
text-transform: capitalize;
color: #FFFFFF;
justify-content: center;
align-items: center;
margin-bottom: 40px !important;
}

#apps .btn{
  font-family: var(--apps-heading-font);
  font-weight: 700;
  font-size: var(--apps-btn-fs);
  border-radius: var(--apps-btn-radius);
  padding: var(--apps-btn-py) var(--apps-btn-px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  margin-top: 50px !important;
  background: none !important;
}

/* زر المتجر (فيه صورة) */
#apps .btn img{
  height: var(--store-logo-h);
  vertical-align: middle;
  background: none !important;
}

/* تحسين تباين أزرار المتاجر لكل بطاقة */
#apps .card.text-white .btn.btn-light{
background: none !important;
  border: none;
  color: none;
}
#apps .card.text-dark .btn.btn-dark{
  background: none;
  border: none;
  color: none;
}
#apps .card.text-dark .btn.btn-dark:hover{ filter: brightness(1.08); }
#apps .card.text-white .btn.btn-light:hover{ filter: brightness(.96); }




/* لو حاب تختلف المسافة بين البطاقة الأولى والثانية */
#apps .col-lg-6:first-child .card-body > img{ transform: translateY(70px); }
#apps .col-lg-6:last-child  .card-body > img{ transform: translateY(50px); }

/* رجّعها للوضع الطبيعي على الشاشات الصغيرة */
@media (max-width: 991.98px){
  #apps .card-body > img{ transform:none; }
}


/* البانر الأول (ضيوف الرحمن) */
#apps .row > .col-lg-6:nth-of-type(1) .badge{
height: 36px !important;
gap: 10px;
opacity: 1;
border-radius: 250px;
background-color: #C59B3A !important;
color: white !important;

}

/* البانر الثاني (مزوّد الخدمة) */
#apps .row > .col-lg-6:nth-of-type(2) .badge{
height: 36px !important;
gap: 10px;
opacity: 1;
border-radius: 250px;
background-color: #1FCBD4 !important;
color: white !important;

}

/* حجم/ملاءمة الفيديو داخل إطار الـ ratio */
.video-cover__media{
  width:100%; height:100%; object-fit:cover; background:#000;
}

/* تظليل قبل التشغيل */
.video-cover__shade{
  background:rgba(0,0,0,.35);
  transition:opacity .2s;
  pointer-events:auto; /* نستخدمه كزر تشغيل أيضاً */
}

/* زر التشغيل */
.video-cover__play{
  width:84px; height:84px;
  display:grid; place-items:center;
  border:0; color:#fff;
  background:#44b2ac; /* لون الزر */
}

/* أثناء التشغيل: أخفِ التظليل والزر */
.video-cover.is-playing .video-cover__shade{ opacity:0; pointer-events:none; }
.video-cover.is-playing .video-cover__play{ display:none; }
#apps { padding-bottom: 1rem !important; margin-bottom: 0 !important; }
#how-it-works { padding-top: 0 !important; margin-top: 0 !important; }
#how-it-works > .container { margin-top: 0 !important; }

.stop-collapse{ overflow:hidden; }
#apps, #apps .container, #apps .row{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}


#how-it-works, #how-it-works .container{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* قياسات جاهزة للارتفاع (نسبة العرض/الارتفاع) */
.ratio-compact   { --bs-aspect-ratio: 42%; } /* أقصر من 16:9 (يشبه 21:9) */
.ratio-superthin { --bs-aspect-ratio: 35%; } /* أقصر أكثر */

:root{
    --faq-accent: #1FCBD4;
    --faq-accent-weak: #E9FBFD;
    --faq-muted: #6b7280;
  }
  .shadow-soft{box-shadow:0 12px 36px rgba(17,38,64,.08)}
  .badge-soft{
    background:#e8fbff; color:#1299a3; border-radius:999px; font-weight:700; padding:.4rem .8rem;
  }

  /* شكل البطاقات */
  .faq-acc{counter-reset: faq;}
  .faq-acc .accordion-item{
    border:0; background:#fff; border-radius:18px; margin-bottom:14px;
    box-shadow:0 10px 28px rgba(17,38,64,.06); overflow:hidden;
  }
  .faq-acc .accordion-button{
    background:#fff; box-shadow:none!important; border:0;
    padding:1rem 1.15rem 1rem 3.75rem;   /* مساحة لأيقونة +/− في الجهة اليسار (RTL) */
    display:flex; align-items:center; gap:.6rem; color:#111;
  }
  /* نخفي سهم بووتستراب الافتراضي */
  .faq-acc .accordion-button::after{display:none;}
  .faq-acc .accordion-button:focus{box-shadow:none;}

  /* عنوان السؤال */
  .faq-acc .faq-title{font-weight:700; line-height:1.5; flex:1}

  .faq-acc .faq-index{
    width:44px; height:44px; border-radius:999px;
    background:var(--faq-accent-weak); color:#0d6d73;
    display:inline-grid; place-items:center; font-weight:800; margin-inline-start:.2rem;
  }
  .faq-acc .accordion-item{counter-increment: faq;}
  .faq-acc .faq-index::before{
    content: counter(faq, decimal-leading-zero);
  }

  /* أيقونة +/− داخل دائرة صغيرة (يسار) */
  .faq-acc .faq-toggle{
    width:34px; height:34px; border-radius:999px; margin-inline-start:.5rem;
    background:#eef4f8; color:#34495e; display:inline-grid; place-items:center;
    font-weight:900; font-size:18px; line-height:1;
  }
  .faq-acc .accordion-button .faq-toggle::before{content:"+";}
  .faq-acc .accordion-button:not(.collapsed) .faq-toggle::before{content:"–";} /* ناقص عند الفتح */

  /* جسم الإجابة */
  .faq-acc .accordion-body{
    color:var(--faq-muted); padding:0 1.15rem 1rem 1.15rem;
  }

  #how-it-works{
  padding-top: 3rem !important;        
  scroll-margin-top: 80px;
}
#how-it-works .badge{
height: 36px !important;
gap: 10px;
opacity: 1;
border-radius: 250px;
background-color: #C59B3A !important;
color: white !important;
font-family: Rakkas !important;
font-weight: 400 !important;
font-size: 19px !important;
line-height: 32px;
letter-spacing: -0.2%;
text-transform: capitalize;

}

:root{
  --teal:#07b0b0;
  --teal-dark:#0098a1;
  --gold:#C99A41;
}

/* شريط السماوي والذهبي — بدون تكرار للخلفية */
.num .bleed{
  padding: 56px 0;
}
.num .bleed.cyan{
  /* استعمل نفس صورة/نقشة الخلفية اللي عندك */
  background-image: url("assets/section/Frame\ 20.png"); /* غيّر المسار حسب ملفك */
  background-size: cover;
  background-repeat: no-repeat;     /* ← هنا منع التكرار */
  background-position: center;
  color:#fff;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}
.num .bleed.gold{
  background-color: var(--gold);
  background-size: cover;
  background-repeat: no-repeat;     /* ← هنا منع التكرار */
  background-position: center;
  color:#1f2937;
  padding: 36px 0 44px;
}

/* العناوين على اليمين */
.num__title{
  font-weight: 800;
  font-size: clamp(26px, 3vw, 42px);
  margin: 8px 0 6px;
  font-family: Janna LT;
font-weight: 700;
font-size: 36px;
line-height: 26px;
letter-spacing: 0%;

vertical-align: middle;

}
.num__desc{ 
    max-width: 980px; 
    margin-inline-start:auto;
font-family: Janna LT;
font-weight: 700;
font-size: 16px;
line-height: 30px;
letter-spacing: 0%;
color: #FFFFFF !important;
overlay: none;
 }

/* عنصر الميتريك: الأيقونة جنب الرقم (مش فوقه) */
.metric{
  display: flex;
  align-items: center;
  gap: 14px;           /* مسافة بين الأيقونة والنص */
}
.metric .icon{
  flex: 0 0 64px;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border: 6px solid rgba(255,255,255,.35); 
}

.num{ position: relative; isolation: isolate; }
.num .bleed{ overflow: visible; }              

.num .bleed.cyan{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 64px 0 40px;
  border-bottom-left-radius: 0;               
  border-bottom-right-radius: 0;
}

.num .bleed.gold{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 36px 0 44px;
  margin-top: 0;                                /* لا يتداخل مع الأزرق */
}

.num__tag{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#C59B3A; color:#fff;
 border-radius:9999px;
 box-shadow:0 6px 18px rgba(0,0,0,.08);
  font-family: Rakkas;
font-weight: 400;
font-size: 19px;
line-height: 32px;
letter-spacing: -0.2%;
text-transform: capitalize;

}

/* الوصف */
.num__desc{ color:#fff; opacity:1; }

.metric{
  display:flex;
  align-items:center;
  gap:14px;
}
.metric .icon{
  flex:0 0 64px;
  width:64px; height:64px;
  border-radius:50%;
  background:none;
  display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  border:none;
  position:relative; z-index:1;              
}
.metric .icon img{
  max-width:60px; max-height:60px; object-fit:contain;
}
.metric .meta{ line-height:1.35; }
.metric .value{
  font-weight:800;
  font-size: clamp(28px, 2.6vw, 40px);
}


@media (max-width: 991.98px){
  .num .bleed.cyan, .num .bleed.gold{ text-align:center; }
  .metric{ justify-content:center; text-align:center; }
}

/* محاذاة عناصر رأس الشريط السماوي لليمين */
.num .bleed.cyan .container{
  text-align: right;        /* كل ما بداخل الهيدر يمين */
}

.num__title{
  color:#fff;
  margin: .25rem 0 .5rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}


.num__desc{
  color:#fff !important;   
  margin: 0;           
  text-shadow: 0 1px 2px rgba(0,0,0,.15); 
}

/* التاق */
.num__tag{
  background:#C59B3A;
  color:#fff;
  border-radius:9999px;
  display:inline-flex;
}


.num .bleed.cyan{
  position:relative;
}
.num .bleed.cyan::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.06); 
  pointer-events:none;
}
.num__title, .num__desc, .num__tag{ position:relative; z-index:1; }



#reviews .text-teal{ color:#006462;
font-family: Janna LT;
font-weight: 700;
font-size: 38px;
line-height: 100%;
letter-spacing: 0%;
 }

#reviews .fw-bold{
    font-family: Janna LT;
font-weight: 700;
font-style: Bold;
font-size: 38px;
line-height: 100%;
letter-spacing: 0%;
}

#reviews .badge{
    width: 94px;
height: 36px;
gap: 10px;
opacity: 1;
border-radius: 250px;
padding-top: 4px;
padding-right: 16px;
padding-bottom: 4px;
padding-left: 16px;
background-color: #C59B3A !important;
font-family: Rakkas;
font-weight: 400;
font-size: 19px;
line-height: 32px;
letter-spacing: -0.2%;
text-transform: capitalize;
color: white !important;

}
#reviews .review-card{
  background:#fff;
  border:1px solid #E9EDF3;
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 8px 15px rgba(0,0,0,.05);
}

#reviews .review-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

#reviews .review-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#reviews .review-user .avatar{
  width:56px; height:56px; border-radius:50%;
  object-fit:cover;
}

#reviews .user-name{ font-weight:700; }
#reviews .user-country{ font-size:.9rem; opacity:.7; }

#reviews .review-rate{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
#reviews .review-score{ font-weight:800; }
#reviews .review-stars i{ color:#F8B84E; }

#reviews .review-text{
  margin:0;
  color:#475569;   
  line-height:1.9;
}

#reviews .reviews-head{ padding:6px 0; }

.gallery-bs .media-frame{
  position: relative;
  overflow: hidden;
  border-radius: 1rem;               
  background: #fff;
  box-shadow: 0 12px 28px rgba(17,38,64,.10);
  height: 100%;
}
.gallery-bs .media-frame img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.gallery-bs .ratio .img-cover{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}


.ratio-3x4{ --bs-aspect-ratio: calc(4 / 3 * 100%); }


.gallery-bs .play-btn{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%;
  border: none; display: grid; place-items: center;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: transform .18s ease;
}
.gallery-bs .play-btn::after{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  border:2px solid rgba(255,255,255,.7);
}
.gallery-bs .play-btn:hover{ transform: translate(-50%,-50%) scale(1.06); }


.gallery-bs .gallery-card{
  border: 0; border-radius: 1rem;
  box-shadow: 0 12px 28px rgba(17,38,64,.10);
}


#gallery .badge{
height: 36px;
gap: 10px;
opacity: 1;
border-radius: 250px;
background-color: #C59B3A !important;
font-family: Rakkas;
font-weight: 400;
font-size: 19px;
line-height: 32px;
letter-spacing: -0.2%;
text-transform: capitalize;
color: white !important;
}



#gallery h3{
font-family: Janna LT;
font-weight: 700;
font-style: Bold;
font-size: 30px;
line-height: 100%;
letter-spacing: 0%;
color: #333333;

}
#gallery p{
font-family: Janna LT;
font-weight: 700;
font-style: Bold;
font-size: 16px;
line-height: 28px;
letter-spacing: 0%;
color: #404040;
}

:root{
  --teal:#07b0b0;
  --teal-dark:#0098a1;
  --ink:#1f2937;
  --muted:#6b7280;
  --cta-bg:#f3f6fa;
}




.footer-desc{
  color: var(--muted);
  line-height: 1.9;
}


.btn-brand{
  background: #006462 !important;
  color:#fff !important;
  border:none !important;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(7,176,176,.18);
  direction: ltr !important;
}
.btn-brand:hover{ background: var(--teal-dark); }


.social-btn{
  width: 44px; height: 44px;
  border-radius: 50%;
  border:1px solid #e8edf5;
  background:#fff;
  display:grid; place-items:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.social-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}


.cta-bar{
  background: var(--cta-bg);
  max-width: 720px;
  margin-inline: auto;
  background: #006462;
  direction: ltr;
}


.btn-up{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--teal);
  display:grid; place-items:center;
  box-shadow: 0 10px 20px rgba(7,176,176,.18);
}
.btn-up img{
  width: 45px; height: 45px;
}
.btn-up:hover{ background: var(--teal-dark); }


.footer .nav-link{
  color:var(--muted);
}
.footer .nav-link:hover{
  color: var(--teal);
}


.footer{
  position: relative;
  overflow: hidden;
}
.footer::after{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  transform: translateY(-50%);
  width: clamp(100px, 20vw, 300px);
  height: clamp(100px, 20vw, 300px);
  background: url("assets/footer/murshid.png") no-repeat right center / contain;
  opacity: .06;                
  pointer-events: none;
  z-index: 0;
}
.footer .container{
  position: relative;
  z-index: 1;              
}



.download-rail{
  padding: 18px 22px;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}


.footer .download-rail .btn.btn-dark,
.footer .download-rail .store-link{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}


.footer .download-rail .btn.btn-dark img,
.footer .download-rail .store-link img{
  display: block;
  height: 34px;     
}


.footer img.footer-watermark,
.footer img[src*="murshid.png"]{
  display: none !important;
}

.footer{
  position: relative;
  overflow: hidden;
}


.footer{ --wm-size: 220px; }               
@media (min-width: 992px){
  .footer{ --wm-size: 260px; }              
}

.footer::after{
  content:"";
  position:absolute;
  top:20%;
  right:0;
  transform: translateY(-50%);
  width: var(--wm-size) !important;
  height: var(--wm-size) !important;
  background: url("assets/footer/murshid.png") no-repeat right center / contain !important;
  opacity: .80;
  pointer-events: none;
  z-index: 0;
}

.footer .container{ position: relative; z-index: 1; }

#contact .btn{
width: 200;
height: 56;
gap: 8px;
opacity: 1;
border-radius: 12px;
padding-top: 8px;
padding-right: 20px;
padding-bottom: 8px;
padding-left: 20px;
background-color: #009CA3;
direction: rtl;
font-family: Janna LT;
font-weight: 700;
font-style: Bold;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: white;


}

.meta .value{
    color: white !important;
    font-family: Janna LT;
font-weight: 700;
font-size: 45px;
line-height: 100%;
letter-spacing: 0%;


}
.meta .label{
    color: black !important;
    font-family: Janna LT;
font-weight: 700;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;


}

:root { --nav-h: 64px; }

body { padding-top: var(--nav-h); }


#mainNav { z-index: 1050; }


@media (max-width: 991.98px){
  #mainNav .navbar-collapse {
    position: fixed;
    top: var(--nav-h);
    right: 0; left: 0;
    background: #fff;
    padding: 14px 0;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
  }

  .navbar-collapse.show ~ .navbar-backdrop { display:block; }
}


.navbar-light .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler{ border:0; }


.checklist{
  margin: 0;
  padding: 0;
  list-style: none;
  --tick-size: 18px;          
}
.checklist li{
  position: relative;
  margin: 10px 0;
  padding-inline-start: calc(var(--tick-size) + 10px);
}
.checklist li::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .25em;
  width: var(--tick-size);
  height: var(--tick-size);
  background: center/contain no-repeat url("assets/section/Frame%202085663074.png");
}


.btn-provider-cta{
height: 56px;
gap: 8px;
opacity: 1;
border-radius: 12px !important;
background-color: #009CA3 !important;
color: white !important;
font-family: Janna LT !important;
font-weight: 700 !important;
font-size: 16px !important;
line-height: 100%;
letter-spacing: 0%;
text-align: center;

}

:root{
  --faq-radius: 16px;
  --faq-cyan: #07B0B0;           
  --faq-cyan-100:#E9F7F7;       
  --faq-open-bg:#EAF3FF;         
  --faq-white:#fff;
  --faq-title:#0F2231;           
  --faq-text:#5C6B7A;           
  --faq-shadow: 0 6px 18px rgba(0,0,0,.06);
}


.faq-acc .accordion-item{
  border: 0;
  background: transparent;
  margin-bottom: 14px;
  border-radius: var(--faq-radius);
}

.faq-acc .accordion-button{
  position: relative;
  border: 0;
  box-shadow: none !important;
  padding: 18px 18px;                 
  border-radius: var(--faq-radius);
  background: var(--faq-white);  
  color: var(--faq-title);
  font-weight: 700;
}


.faq-acc .accordion-button::after{ display:none !important; }


.faq-acc .accordion-button[aria-expanded="true"]{
  background: var(--faq-open-bg);
}

.faq-index{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  margin-inline-start: -4px;         
  margin-inline-end: 12px;
  background: var(--faq-cyan-100);
  color: var(--faq-cyan);
  font-weight: 800;
}


.faq-index::before{
  content: counter(faqCounter, decimal-leading-zero);
}


.faq-acc .accordion-button[aria-expanded="true"] .faq-index{
  background: var(--faq-cyan);
  color: #fff;
}


.faq-toggle{
  margin-inline-start: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #EAF3FF;
  color: #173B64;
  font-size: 20px;
  line-height: 1;
}


.faq-toggle::before{ content: "＋"; }


.faq-acc .accordion-button[aria-expanded="true"] .faq-toggle{
  background: var(--faq-cyan);
  color: #fff;
}
.faq-acc .accordion-button[aria-expanded="true"] .faq-toggle::before{
  content: "−";
}


.faq-acc .accordion-collapse{
  border: 0;
}
.faq-acc .accordion-body{
  background: var(--faq-white);
  color: #00000099;
  line-height: 1.9;
  padding: 16px 18px 18px;
  border-radius: 0 0 var(--faq-radius) var(--faq-radius);
  box-shadow: var(--faq-shadow);
  margin-top: 6px; 

  font-family: Janna LT;
font-weight: 700;
font-size: 16px;
line-height: 29px;
letter-spacing: 0%;

}


.faq-title{ font-size: 1.05rem; }

.review-text{
    font-family: Janna LT;
font-weight: 700;
font-style: Bold;
font-size: 16px;
line-height: 31px;
letter-spacing: -0.2%;
color: #333333;
}

#reviews .text-secondary{
    font-family: Janna LT !important;
font-weight: 700 !important;
font-size: 16px !important;
line-height: 28px;
letter-spacing: 0%;
color: #404040 !important;
}


.faq-acc { 
  counter-reset: faqNum; 
}


.faq-acc .accordion-item { 
  counter-increment: faqNum; 
}


.faq-acc .faq-index::before{
  content: counter(faqNum, decimal-leading-zero) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}


#reviews .user-name{
    font-family: Rakkas;
font-weight: 400;
font-size: 28px;
line-height: 32px;
letter-spacing: -0.2%;
text-transform: capitalize;
color: #006462;

}

#mainNav .btn-outline-brand{
  color:black !important;
  background:#F7F7F7 !important;
  border-radius: 999px;
  font-family: Janna LT !important;
font-weight: 400 !important;
font-size: 16px !important;
line-height: 174%;
letter-spacing: 0%;
text-align: center;

gap: 6px;
opacity: 1;
width: 184px ;
height: 52px ;
gap: 12px;
opacity: 1;
border-radius: 16px;
padding-top: 8px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 12px;



}

#mainNav .btn-brand{
 background: #00B1BD !important;           
  color: #fff !important;
  border-radius: 999px;
  font-family: Janna LT !important;
font-weight: 400 !important;
font-size: 16px !important;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
width: 184px;
height: 52px;
justify-content: space-between;
opacity: 1;
border-radius: 16px;
padding-top: 15px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 12px;

}



.num .bleed.gold{
  padding-top: 64px;   
  padding-bottom: 64px;
}

.num .bleed.cyan{
    padding-top: 80px;   
  padding-bottom: 80px;
}
@media (min-width: 992px){
  .num .bleed.gold{
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.title-hero{
    background: url("assets/section/Frame%2020.png") center/cover;
     border-radius: 22px;
    height: 160px;
    display: grid;
    place-items: center;
    color: #fff;
margin-bottom: -20px;
}

.title-hero h1 {
font-family: Janna LT;
font-weight: 700;
font-size: 40px;
line-height: 174%;
letter-spacing: 0%;
text-align: center;


}



.feature-card.card{
  width:450px !important;

  position:relative;
  overflow:hidden;            
  border:0;
  box-shadow:0 8px 30px rgba(21,30,40,.06);
  transition:transform .25s ease, box-shadow .25s ease;
  min-height:200px;
  border-radius:30px;
  padding:48px 30px;          
  margin-top: 50px;  
}

.feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(21,30,40,.10);
}



.feature-card h3,
.feature-card p{ position:relative; z-index:1 }

.feature-card.mission h3{ font-family: Janna LT;
font-weight: 700;
font-size: 32px;
line-height: 100%;
letter-spacing: 0%;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF40;
 }


.row .col-12.col-lg-6{ display:flex }
.row .col-12.col-lg-6 .feature-card{ flex:1 1 auto }


@media (max-width: 767.98px){
  .feature-card{
    padding:20px;
    min-height:auto;
  }
  .feature-card .corner-motif img{ width:72px; height:72px }
}



html, body { overflow-x: clip; } 

#how-it-works .text-secondary{
font-family: Janna LT;
font-weight: 700;
font-size: 16px;
line-height: 28px;
letter-spacing: 0%;
color: #404040;}

#vr-cards { align-items: stretch; }

#vr-cards .vr-card { border-radius: 24px; }
#vr-cards .vr-card .content { position: relative; z-index: 1; text-align: center; }
@media (min-width: 992px){
  #vr-cards .vr-card .content { text-align: start; }
}


:root{
  --vr-motif-size: 88px;  
  --vr-motif-gap: 24px;   
}



@media (min-width: 992px){
  #vr-cards .vr-card{
    padding-inline-start: calc(1rem + var(--vr-motif-size) + var(--vr-motif-gap));
    min-height: 180px; 
  }
}

#vr-cards img{ max-width:100%; height:auto; display:block; }



#vr-cards .vr-card{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
}



#vr-cards .vr-card .corner-motif1 img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;

}


#vr-cards .vr-card h3,
#vr-cards .vr-card p{
  position: relative;
  z-index: 1;
}


#vr-cards .vr-card.vision{ background:#F9F9F9;  }
#vr-cards .vr-card.vision h3{
  font-family: "Janna LT";
  font-weight: 700;
  font-size: 32px;
  line-height: 100%;
  letter-spacing: 0;
  color: #333333;
  border-bottom: 1px solid #999999;
}
#vr-cards .vr-card.vision p{
  color:#666666;
  font-family: "Janna LT";
  font-weight: 700;
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0;
}


#vr-cards .vr-card.mission{ background:#00B1BD; color:#fff; }
#vr-cards .vr-card.mission h3{
  font-family: "Janna LT";
  font-weight: 700;
  font-size: 32px;
  line-height: 100%;
  letter-spacing: 0;
  color: #FFFFFF;
  border-bottom: 1px solid #FFFFFF40;
}
#vr-cards .vr-card.mission p{
  color:#e8ffff;
  font-family: "Janna LT";
  font-weight: 700;
  font-size: 18px;
  line-height: 32px;
  letter-spacing: 0;
}

#vr-cards .col-12.col-lg-6,
#vr-cards .col-12.col-lg-6.col-xl-5{ display:flex; }
#vr-cards .vr-card{ flex: 1 1 auto; }



:root{
  --vr-size: 96px;  
  --vr-gap:  18px;   
}


#vr-cards .vr-card{ position:relative; border-radius:24px; overflow:hidden; }


#vr-cards .corner-motif1{
  position: absolute !important;
  inset-block-end: var(--vr-gap) !important; 
  inline-size: var(--vr-size) !important;       
  block-size: var(--vr-size) !important;     
  opacity: 1;
  pointer-events: none;
  inset-inline-end: auto !important;        
  inset-inline-start: auto !important;
  z-index: 0;
}
#vr-cards .corner-motif1 img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  display: block;
}

#vr-cards .vision .corner-motif1,
#vr-cards .mission .corner-motif1{
  inset-inline-end: -10px !important;
  inset-block-start: -20px !important;
}

@media (min-width: 992px){
  #vr-cards .vision{
    padding-inline-end: calc(1rem + var(--vr-size) + var(--vr-gap)) !important;
    min-height:180px;
  }
  #vr-cards .mission{
    padding-inline-end:   calc(1rem + var(--vr-size) + var(--vr-gap)) !important;
    min-height:180px;
  }
}



:dir(ltr) #vr-cards .corner-motif1 img { transform: scaleX(-1); }

.btn-up{
  position: fixed;            
  inset-inline-start: 16px;     
  inset-block-end: 16px;    
  direction: ltr;   
  display: grid; place-items: center;
  z-index: 9999;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
.btn-up.show{
  opacity: 1; visibility: visible; transform: translateY(0);
}
.btn-up img{
  width: 45px; height: 45px;
  pointer-events: none;         
}


@media (max-width: 576px){
  .btn-up{ inset-inline-start: 12px; inset-block-end: 12px; width: 44px; height: 44px; }
}



.promo-banner {
  top: 0;
  z-index: 1100;   
  background: #00B1BD ;
  color: #fff;
  padding: .5rem 0;
 position:sticky-up;
  top: 0; left: 0; right: 0; 
  text-align: center ;
  font-size: 12px;
  height: 60px;
}

@media (max-width: 576px){
  .promo-banner .container { flex-direction: column; align-items: stretch; gap: .5rem; }
}

.promo-banner .btn-light{
background: none;
border: none;
color: white;}
.promo-banner .btn-light:hover{
background: none;
border: none;}

.promo-banner .container{
  position: relative;           
  display: flex;
  align-items: center;
  justify-content: center;         
  min-height: 48px;                   
}

.promo-banner__close{
  position: absolute;
  left: 12px;
  top: 50%;
  background: none;
  border: 0;
  color: #fff;
}

.promo-banner__title{
  margin: 0;
  font-weight: 800;
  color: #fff;
  text-align: center !important;
}


.ticker{
  overflow:hidden; width:100%;
}
.ticker__index{
  display:flex; gap:3rem; white-space:nowrap;
  will-change: transform;
  animation: ticker 18s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state: paused; }
.ticker__item{
  color:#fff; font-weight:800;
}


@keyframes ticker{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation:none; }
}