body{
    width: 100vw;
    overflow-x: hidden;
}
header .nav-link.active{
    font-weight: bold !important;
}

.glass-container> div > div{
    background-color: #170F36;
}

.navbar-nav .nav-link {
    font-size: 1rem;
    font-weight: 500;
    
}
.bg-body{
    background-color: #030047 !important;

}
.nav-item a{
    
    transition: all 0.3s;
}
.nav-item a.nav-link:hover, .nav-link.dropdown-toggle.show, .gradient-text{
    background: linear-gradient(270deg, #FEA76C 0%, #FF66A9 30.8%, #FFD54F 150.61%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* for Firefox */
    color: transparent;

}
.features{
    background-image: url('../assets/Ellipse\ 6.png');
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    
}
.swiper-slide-shadow-right.swiper-slide-shadow-coverflow {
    border-radius: 50%;
}
.swiper-slide-shadow-left.swiper-slide-shadow-coverflow {
    border-radius: 50%;
}

input[type="button"] {
  -webkit-appearance: button;
  cursor: pointer;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.input-group {
  clear: both;
  margin: 15px 0;
  position: relative;
}

.input-group input[type='button'] {
  background-color: #eeeeee;
  min-width: 38px;
  width: auto;
  transition: all 300ms ease;
}

.input-group .button-minus,
.input-group .button-plus {
  font-weight: bold;
  height: 38px;
  padding: 0;
  width: 38px;
  position: relative;
}

.input-group .quantity-field {
  position: relative;
  height: 38px;
  left: -6px;
  text-align: center;
  width: 62px;
  display: inline-block;
  font-size: 13px;
  margin: 0 0 5px;
  resize: vertical;
}

.button-plus {
  left: -13px;
}

input[type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: none;
}
.floating-label{
  transform: translate(-15%,-45%);
}
.qr-code{
max-width: 150px;
}
.bank-logo{
  max-width: 100px;
  object-fit: contain;
}
input[type="number"].quantity-input {
  -moz-appearance: textfield;
  text-align: center;
  width: 27px;
  border: none;
  pointer-events: none;
  margin-bottom: -8px;
}
.mobile-image{
    max-width: 75%;
}
.single-payment{
    max-width: 9%;
}
.stat-card {
   background:  linear-gradient(200.05deg, rgba(255, 255, 255, 0.32) 15.23%, rgba(251, 241, 241, 0.127015) 30.57%, rgba(251, 241, 241, 0.0775091) 58.69%, rgba(255, 255, 255, 0.421) 87.37%);
    background-size: 200%;
    
    background-position: center;
    border-radius: 20px;
    padding: 2px;
    text-align: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.6s ease;
    > div{
        background-color: #23206171;
         backdrop-filter: blur(17px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 20px;
    }
}
.stat-card-white {
   background: linear-gradient(252.05deg, rgba(255, 255, 255, 0.99) 9.23%, rgba(251, 241, 241, 0.392954) 26.57%, rgba(251, 241, 241, 0.239794) 58.69%, rgba(255, 255, 255, 0.99) 87.37%);
    background-size: 200%;
    background-position: center;
    border-radius: 20px;
    padding: 2px;
    text-align: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.6s ease;
    > div{
        background-color: #fff;
         backdrop-filter: blur(17px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 20px;
    }
}

.stat-card2{
background: linear-gradient(182.05deg, rgba(255, 255, 255, 0.32) 35.23%, rgba(251, 241, 241, 0.127015) 58.57%, rgba(251, 241, 241, 0.0775091) 58.69%, rgba(255, 255, 255, 0.421) 128.37%);
/* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
background-size: 160%;
    overflow: hidden;
    background-position: center;
    border-radius: 20px;
    padding: 1px;
    text-align: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.6s ease;
    > div{
        background-color: #04004771;
         backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 20px;
    }
}
.bg-only{
    
background: linear-gradient(180deg, rgba(255, 255, 255, 0.154) 28.23%, rgba(251, 241, 241, 0.127015) 47.57%, rgba(251, 241, 241, 0.0775091) 70.69%);
/* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
background-size: 160%;
    background-position: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.6s ease;
    
}
.bg-grad{
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
linear-gradient(270deg, #FEA76C 0%, #FF66A9 90.8%, #FFD54F 181.61%);

}
.border-grad {
    border: 2px solid transparent; /* must set border width */
    border-image: linear-gradient(270deg, #FEA76C 0%, #FF66A9 90.8%, #FFD54F 100%);
    border-image-slice: 1;
    opacity: 1;
}
.border-left-grad {
  border-left: 2x solid transparent;
  background: linear-gradient(to bottom, #FEA76C 0%, #FF66A9 70.8%, #FFD54F 100%) left center;
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-origin: border-box;
}
.swiper-slide{
    height: auto !important;
}
.avatar-container {
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.stat-card:hover {
    
    background-position: top;
    background-size: 130%;
    transition: all .6s !important;
}
.blog-card .image-container{
    max-height: 200px;
    overflow: hidden;
}
.shadow-white{
    box-shadow: 0 0 30px 1px #ffffffb5 , inset 0 0 20px 1px #ffffffdd !important;
}
.shadow-white2{
    box-shadow: 0 0 20px 1px #ffffff62 , inset 0 0 20px 1px #ffffffdd !important;
}
.shadow-white3{
    box-shadow: 0 2px 5px 1px #0000001d , inset 0 0 20px 1px #ffffffdd !important;
}

        body {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            background-color: #030047;
            color: #fff;
        }

        .stack {
            position: relative;
            width: 78%;
            min-height: 900px;
            perspective: 2000px;
            --layer-gap: 120px;
        }

        .layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 300px;
            transform: translate3d(0, var(--y-offset), calc(var(--i) * -30px));
            transform-style: preserve-3d;
            transition: transform 0.6s ease, z-index 0.6s ease;
            z-index: var(--i);
            cursor: pointer;
        }

        .layer .inner {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .layer img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: contain;
            top: 0;
            left: 0;
            transition: opacity 0.5s ease;
        }

        /* إظهار نسخة الـ active عند التفعيل */
        .layer .active-img {
            opacity: 0;
        }

        .layer.active .active-img {
            opacity: 1;
        }

        .layer.active .default-img {
            opacity: 0;
        }

        /* الكارت النشط يطلع لقدام */
        .layer.active {
            transform: translateY(var(--y-offset)) translateZ(80px) scale(1.001);
            /* z-index: 10; */
        }


        .inner-section.margin-minus {
            margin-top: -50px;
        }

        /* animation container */
        #animationContainer {
            width: 350px;
            height: 350px;
            margin: 30px auto;
        }

        /* steps row */
        .steps {
            display: flex;
            justify-content: center;
            gap: 1px;
            background-color: #fff;
        }

        .step {
            cursor: pointer;
            position: relative;

            .step-inner,
            .progress-bar {
                position: relative;
                z-index: 3;
            }

            .step-inner {
                transition: all 0.2s;
            }
        }

        .step:before {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            content: "";
            transition: all 0.3s;
            background: radial-gradient(circle, rgba(255, 255, 255, 1) 20%, rgba(204, 204, 204, 0.258) 100%);
        }

        .step.active::before {
            opacity: 0;
        }

        .step.active {
            background-color: #fff;
        }

        .step-number {
            color: var(--primary-600);
            margin-bottom: 10px;
        }






        /* progress bar */
        .progress-bar {
            width: 100%;
            height: 7px;
            background: #e0e0e0;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            width: 0%;
            background: #009688;
            transition: all 0s !important;
        }

        .grad-text {
            background: linear-gradient(270deg, #FEA76C 0%, #FF66A9 90.8%, #FFD54F 181.61%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            /* for Firefox */
            color: transparent;
        }

        div#navbarNav {
            justify-content: center;

            .nav-link {
                color: #fff;
            }
        }

        .nav-link.active,
        .nav-link:hover {
            background: linear-gradient(270deg, #FEA76C 0%, #FF66A9 90.8%, #FFD54F 181.61%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            /* for Firefox */
            color: transparent;
        }

        .dropdown-item {
            color: #fff;
        }

        nav {
            min-height: 100px;
        }

        .hero-section .back-image {
            background-image: url(src/assets/Group\ 1321314386.png);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
.blog-image-container{
    padding: 2px;
}
.faq.dark .accordion-item:has(.accordion-collapse.show) .inner {
    background:rgb(34 46 102 / 58%) /* اللون اللي تحبه */
    
}
.accordion-header i {
    transition: transform 0.3s ease;
    /* حركة ناعمة */
}

.accordion-header[aria-expanded="true"] i {
    transform: rotate(180deg);
    /* يدور لتحت */
}

.accordion-header[aria-expanded="false"] i {
    transform: rotate(0deg);
    /* يرجع للوضع الطبيعي */
}
.swiper.testimonials .swiper-slide-active{
    transform: scale(1.3);
    z-index: 3;
    position: relative;
}
.swiper.testimonials .swiper-slide:not(.swiper-slide-active) {
    filter: blur(4px) brightness(0.7);
    opacity: 0.6;
    transform: scale(0.9);
    
}


.card-background {
    background: linear-gradient(150deg, rgba(112, 200, 192, 0) -0.15%, rgba(112, 200, 193, 0.288) 99.92%);

}

.logos {
    display: flex;
    justify-content: center;
}

.logos img {
    max-height: 400px;
    margin: auto;
}

.card-lower {
    min-height: 80px;
    /* box-shadow: 70px -40px 130px -9px #295378 inset !important;
    backdrop-filter: blur(5px); */

}

.upper:before {
    content: "";
    position: absolute;
    width: 100%;
    bottom: 0;
    background: linear-gradient(360deg, rgba(3, 0, 71, 1) 0%, rgba(255, 255, 255, 0) 100%);
    height: 60%;
    right: 0;
    left: 0;
}

.noor-image {
    max-width: 80px;
    bottom: 20%;
}

.skewed-section {
    position: relative;
    overflow: hidden;
}

.skewed-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #E2F2F0;
    /* أي لونين */
    transform: skewY(-8deg);
    /* الميل */
    transform-origin: top center;
    z-index: -1;
}
.skewed-bg2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #E2F2F0;
    /* أي لونين */
    transform: skewY(8deg);
    /* الميل */
    transform-origin: top center;
    z-index: -1;
}
.bg-green-gradient{
    background: 
linear-gradient(252.05deg, 
rgba(255, 255, 255, 0.99) 9.23%, 
rgba(251, 241, 241, 0.392954) 59.57%, 
rgba(251, 241, 241, 0.239794) 89.69%, 
rgba(255, 255, 255, 0.99) 112.37%
);

  background-clip: padding-box, border-box;
  background-origin: border-box;
}
.content {
    margin-top: -60px;

}

.bg-half-white {
    background-color: #e2f2f0cb;
    backdrop-filter: blur(5px);
}

.bg-new-white {
    background-color: #D9D9D9;
}

.col-md-20 {
    width: 20%;
}
.custom-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.nav-btn {
    
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    background: #fff;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* hover / active = green */
.nav-btn:hover,
.nav-btn:active {
    background: #00bfa5;
    color: #fff;
}
@media(min-width:992px) {
    .animation-image {
        max-width: 500px;
    }
}
footer ul a {
    transition: all 0.3s;
}
footer ul a:hover{
    color:var(--primary-600) !important;
}
/* Toggle between upper-div and lower-div inside accordion headers.
    - By default show the upper row and hide the lower row.
    - When header has .expanded: hide upper row and reveal lower row with animation. */

/* container for header rows */

/* upper row: visible by default */
.inner-header .upper-div {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    max-height: 200px;
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: max-height 400ms ease, opacity 200ms ease, transform 300ms ease;
}

/* lower row: hidden by default */
.inner-header .lower-div {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
    transition: max-height 400ms ease, opacity 300ms ease, transform 300ms ease;
}

/* When expanded: hide upper and show lower */
.inner-header.expanded .upper-div {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
}

.inner-header.expanded .lower-div {
    /* large enough to show the content; adjust if your content is taller */
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
}



.navbar-toggler:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* .mobile-600{
    height: 600px !important;
} */



@media (max-width:992px){
    .col-md-20 {
        width: 100% !important;
    }
    .step {
        display: none !important;
        /* hide all steps by default */
    }

    .step.active {
        display: flex !important;
        /* show only the active one */
    }
}







/* Mobile Styles */
@media (max-width: 768px) {
    p{
        font-size: 14px;
    }
   
    .navbar-nav {
        flex-direction: column;
        gap: 1rem;
    }
    /* .mobile-600{
        height: unset !important;
        min-height: 700px !important;
    } */
    .dropdown-menu {
        width: 100%;
        text-align: center;
    }

    .custom-btn {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 1rem;
    }
    .packages-parent{
        grid-template-columns: repeat(1,1fr);
    }
}
@media (min-width:768px){
    .position-md-absolute{
    position: absolute !important;
}
}
/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1024px) {
 
    .navbar-nav {
        gap: 1.5rem;
    }

    .custom-btn {
        font-size: 0.9rem;
    }
    .packages-parent{
        grid-template-columns: repeat(2,1fr);
    }
}


.pt-150{
    padding-top: 120px;
}
@media(max-width:768px){
    .single-payment{
        max-width: 20% !important;
    }
    .text-on-image{
        width: 75% !important;
        /* bottom:10% !important; */
        top: 65% !important;
    }
    .text-on-image2{
       width: 85% !important;
        /* bottom:10% !important; */
        top: 50% !important;
    }
    .noor-image {
            max-width: 80px;
            bottom: 40%;
        }
     .swiper.testimonials .swiper-slide-active{
            transform: scale(1.1);
          
        }
    .packages-parent{
        grid-template-columns: repeat(1,1fr);
    }
}