@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: #040607;
}
html[lang="ar"] {
  direction: rtl;        /* sets the base text flow to right-to-left  */
  unicode-bidi: isolate;  /* keeps embedding context clean (recommended) */
}
p{
    margin: 0px;
}
.cairo{
    font-family: 'Cairo', sans-serif;
}
.jakarta{
  font-family: "Plus Jakarta Sans", sans-serif;
}

.container{
    max-width: 86%;
    margin: auto;
}
.hero-sentance{
background: #911948;
padding: 18px 0;
justify-content: center;
align-items: center;
color: #FFF;

}
nav{
    background:transparent !important;
    position: fixed !important;
    top: 80px;
    width: 100%;
}
.navbar-nav{
    align-items: center;
    gap: 40px;
}
.navbar.navbar-expand-lg{
  border-bottom: 1px solid rgba(31,31,31,0.30);
  display: flex;
  padding: 20px 24px; /* was 180px – too large for mobile */
  align-items: center;
  
  transition: background-color .25s ease, box-shadow .25s ease;
}
.navbar .nav-link{
  color: #fff;                 /* white links */
  font-family: "Plus Jakarta Sans";
  font-size: 20px;
  font-weight: 600;
}
.navbar .nav-link:hover{ 
    opacity: .85; 
}
#lang{
width: 30px;
height:auto;
}

.btn-subscribe{
  display: inline-flex;
  min-width: 195px;
  padding: 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 20px;
  border: 0 !important;
  background: linear-gradient(180deg,#B21F63 0%,#42001A 100%);
  color: #fff !important;
  font-family: Cairo, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
}
.btn-subscribe:hover{ 
filter: brightness(1.05); 
}
/* class that will be toggled by JS below */
.navbar.nav-solid{
    top: 0;
    z-index: 3;
  background: black !important;  /* your brand color with opacity */
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  
}
.hero{
    background-image: url(images/hero\ image.png);
    min-height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
}
.hero-content{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.hero .hero-content h1{
color: #FFF;
font-family: "Plus Jakarta Sans";
font-size: 64px;
font-weight: 600;
}
.hero .hero-content h5{
color: #FFF;
padding: 8px 16px;
align-items: center;
border-radius: 10px;
background: rgba(178, 31, 99, 0.50);
}
.hero .hero-content p{
align-self: stretch;
color: rgba(255, 255, 255, 0.80);
font-family: Cairo;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 28px */
}
section.py-5 .container > h2.h4.mb-4{
color: #FFF;
font-family: "Plus Jakarta Sans";
font-size: 40px;
font-style: normal;
font-weight: 600;
}

/* About */
.about-card {
border-radius: 20px;
background-image:url(./images/about-Vector.png);
}

.about h2{
color: #FFF;
font-family: "Plus Jakarta Sans";
font-size: 40px;
font-weight: 600;
}

.about-intro{
  color: rgba(255, 255, 255, 0.80);
font-family: Cairo;
font-size: 20px;
font-weight: 400;
}

.about-list li{
  margin-bottom: 10px;
gap: 20px;
color: rgba(255, 255, 255, 0.80);
font-family: Cairo;
font-size: 20px;
font-weight: 400;
list-style: none;
}
.about-list li img{
  width: 25px;
}
/* Price Package */
.pricing  h2 {
color: #FFF;
font-weight: 600;
font-family: "Plus Jakarta Sans";
font-size: 40px;
}
.pricing  p {
color: rgba(255, 255, 255, 0.80);
font-family: Cairo;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 140%; 
}
.single-price{
background-image:url(./images/Vector.png);
border-radius: 20px;
border: 1px solid #B21F63;
background: rgba(255, 255, 255, 0.05);
padding: 40px;
flex: 1 1 18%;

}
.general-price{
justify-content: space-between;
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: center;
align-items: center;
}
.single-price h5{
color: #FFF;
font-family: "Plus Jakarta Sans";
font-size: 24px;
font-weight: 600;
}
.single-price p{
color: rgba(255, 255, 255, 0.80);
font-family: Cairo;
font-size: 18px;
font-weight: 400;
}
/* Price Package */

/* Why Choose Us */
.why .container > h2 {
color: #FFF;
font-weight: 600;
font-family: "Plus Jakarta Sans";
font-size: 40px;
}
.why .container > p {
color: rgba(255, 255, 255, 0.80);
font-family: Cairo;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 140%; 
}
.feature-card{
border-radius: 20px;
background: rgba(178, 31, 99, 0.50);
}
.why p{
color: #FFF;
font-family: Cairo;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 140%; 
}
/* Why Choose Us */



/* FAQ */
section.py-5 .faq-title{
color: #FFF;
font-family: "Plus Jakarta Sans";
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.faq-right {
background-color: #4A4A4A !important;
}
.faq-right .accordion-item {
font-family: "Plus Jakarta Sans";
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.faq-right .accordion-body {
color: rgba(255, 255, 255, 0.80);
font-family: Cairo;
font-size: 16px;
font-weight: 400;
}
.accordion-item, .accordion-button, .accordion-button:not(.collapsed){
  background-color: transparent !important;
  color: white;
  border-color: #4A4A4A;
}
/* FAQ */
.accordion-button:not(.collapsed){
  color: rgba(178, 31, 99, 0.9)
;
}
.container .contact-panel{
border-radius: 20px;
border: 1px solid #B21F63;
background: rgba(255, 255, 255, 0.05);
}
.contact h5{
color: #FFF;
font-family: "Plus Jakarta Sans";
font-size: 40px;
font-weight: 600;
}
.contact-email{
color: rgba(255, 255, 255, 0.80);
text-decoration: none;
font-family: Cairo;
font-size: 24px;
font-weight: 400;
}
.accordion-button{
  box-shadow: none !important;
  font-weight: bold;
  font-size: 20px;
}
.accordion-button::after{
  background-image:url(./images/close.png) ;
}
.accordion-button:not(.collapsed)::after {
  background-image: url(./images/open.png);
}
/* Footer */
footer.site-footer { background:#42001A; }
footer .footer-logo { max-width:180px; width:40vw; min-width:120px; height:auto; }
/* Footer */


.gt_selector {
      background: transparent;
    color: white;
    padding: 10px 5px;
}
.gt_selector option{
  color: black;
}
@media screen and (max-width:1200px) {
  .container{
    max-width: 96%;
    margin: auto;
}
.single-price{

flex: 1 1 46%;

}
}
@media screen and (max-width:992px) {
  .navbar {
    position: relative !important;
    top: 0;
  }
}
@media screen and (max-width:768px) {
.single-price{

flex: 1 1 90%;

}
}
@media screen and (max-width:536px) {

}