/* Root Variables */
:root {
 /*    --primary-blue: #042B6D;/*primary blue color for website*/ 
    --primary-blue: #0a0829;/*primary blue color for website*/ 
    --primary-orange: #EF7E1A;/*primary orange color for website*/    
    --opacity-layer:rgba(10, 8, 42, 0.8); /*to set the opacity*/    
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-dark: #1a1a1a;
    --color-light: #ffffff;
    --color-light-yellow: #fff9e6;
    --accent-orange-light: #ff8c66;
    --accent-yellow: #ffeb3b;
    
    /* Gradients */
    --gradient-warm: linear-gradient(45deg, var(--primary-orange), var(--primary-blue));
    --gradient-sunset: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-blue) 50%, var(--primary-orange) 100%);
    --gradient-dark: linear-gradient(135deg, var(--color-dark), var(--primary-blue));
    --gradient-light: linear-gradient(135deg, var(--primary-blue), var(--primary-orange));
    --gradient-primary: linear-gradient(45deg, var(--primary-orange), var(--primary-blue));
    
    /* Overlays */
    --overlay-dark: rgba(26, 31, 44, 0.95);
    --overlay-light: rgba(255, 255, 255, 0.05);
    
    /* Shadows */
    --shadow-warm: 0 5px 15px rgba(255, 107, 51, 0.2);
    --shadow-glow: 0 5px 20px rgba(255, 235, 59, 0.3);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    
    /* Transitions */
    --transition-fast: 0.3s ease;
    --transition-normal: 0.5s ease;
    --transition-slow: 0.8s ease;
}

/* Import Montserrat font 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*/
body {
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
}
    h3.h3-website {
        font-size: 1.75rem;
        color: #fff;
    }
.top-section-container{
    background-color: rgb(10, 8, 42, 0.5);
    background-image:  url('/images/background_1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.top-section-container::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--opacity-layer);
}
.learn-title {
    color: #FFFFFF;
    font-family: "Montserrat", Sans-serif;
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
   margin-bottom: 0;
    letter-spacing: 1.4px;
    line-height: 1.3em;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    max-width: 1030px;
margin: 0 auto;
}
.learn-title .title-pera{
    margin-bottom: 20px;
}
.learn-title .title-pera span{
    font-weight: 700;
}
.container {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    padding: 0 30px;
}

.text-orange {
    color: var(--primary-orange);
}

.video-section {
    padding: 0;
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    background: #1a1a1a;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.testimonials-content .video-container{margin-top: 80px;}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.benefit-item-top {
    margin: 8px 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s ease;
}

.benefit-item-top i {
    font-size: 20px;
    color: white !important;
}

.enroll-btn {
    background: var(--primary-blue);
    background-size: 200% 200%;
    color: var(--color-white);
    padding: 8px 40px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    transition: var(--transition-fast);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    margin-top: 0px;
    display: inline-block;
    text-decoration: none;
    animation: gradientMove 3s ease infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.enroll-btn:hover {
    transform: translateY(-3px) scale(1.02);
  
    color: white;
    background-color: var(--primary-blue);
    border-color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    animation: gradientMove 1.5s ease infinite;
}

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

.enroll-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: all 0.5s ease;
}

.enroll-btn:hover::before {
    left: 100%;
}

/* Animation classes */
[data-aos] {
    opacity: 0;
    transition-duration: 800ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Why Join Section Styles */
.why-join-section {
    background: #ffffff;
    padding: 40px 0;
    color: #333;
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
   border-top: 1px solid var(--color-gray-400);
}

.why-join-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: -1;
}

.why-join-section h2 {
    color: #000;
    margin-bottom: 50px;
}

.why-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 30px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid var(--primary-blue);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.why-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.icon-container {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    background:  var(--primary-blue);
    color: white;
    border-radius: 50%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 80px;
}

.why-card:hover .icon-container {
  
    box-shadow: 0 0 5px  var(--primary-blue);
    transform: scale(1.1);
}

.why-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0);
}

.why-card h3 {
    color: #000 !important;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.3;
}

.why-card p {
    color: #000;
    font-size: 1rem;
    line-height: 1.6;
}

/* Responsive adjustments for Why Join section */
@media (max-width: 768px) {
    .why-card {
        padding: 20px;
        margin-bottom: 20px;
    }

    .icon-container {
        width: 80px;
        height: 80px;
        padding: 15px;
    }

    .why-card h3 {
        font-size: 1.2rem;
    }

    .why-card p {
        margin-bottom: 0;
        font-size: 0.9rem;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    h1 {
        font-size: 1.8rem !important;
    }
    
    h2 {
        font-size: 1.4rem !important;
    }
    
    h3 {
        font-size: 1.2rem !important;
    }
    
    .benefit-item {
        padding: 10px 15px;
    }
}

/* Testimonials Section Styles */
.testimonials-section {
    background:  var(--primary-blue);
    position: relative;
    padding: 40px 0;
    margin-top: 0;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.testimonials-header {
    position: relative;
    padding: 40px 0;
  
}

.testimonials-header::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100%;
   
    z-index: 0;
}

.testimonials-header::after {
    content: '';
    position: absolute;
    bottom: -99px;
    left: 0;
    width: 100%;
    height: 100px;
    background:    var(--primary-blue);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    z-index: 2;
}

.testimonials-header .container {
    position: relative;
    z-index: 3;
}

.testimonials-content {
    background: #ffffff;
    padding: 40px 0;
    position: relative;
    margin-top: 0px;
}

.text-gradient {
    color: var(--color-light);
    
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 0;
    padding: 0;
}

.testimonials-header .lead {
    color: #ffffff;
    font-size: 1.5rem;
    max-width: 1000px;
    margin: 0 auto 40px;
    line-height: 1.5;
    font-weight: 400;
    text-align: center;
}

.testimonial-cards {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 40px;
}

.testimonial-card {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: translateX(10px);
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
}

.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.user-name {
    color: #333;
    font-weight: 600;
    font-size: 1.1rem;
}

.testimonial-content p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Remove the top arrow */
.testimonials-section::before {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .testimonial-card {
        padding: 15px;
    }

    .text-gradient {
        font-size: 1.8rem;
    }
}

/* Program Highlights Section */
.program-highlights {
    background-color: var(--primary-blue);
    padding: 40px 0;
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.program-highlights::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #000;
}

.program-highlights h2 {
    color: var(--color-white);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
}

.program-highlights .subtitle {
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 60px;
}

.highlight-card {
   
    border-radius: 15px;
    padding: 30px;
    height: 100%;
    transition: var(--transition-fast);
    border: 1px solid var(--color-white);
    box-shadow: var(--shadow-md);
}

.highlight-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.highlight-icon {
    width: 80px;
    height: 80px;
    background: var(--color-gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: var(--transition-fast);
}

.highlight-card:hover .highlight-icon {
    background: var(--color-gray-200);
    transform: scale(1.1);
}

.highlight-icon i {
    font-size: 2rem;
    color: var(--color-white);
}

.highlight-card h3 {
    color: var(--color-white);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.highlight-card p {
    color: var(--color-white);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 991px) {
    .program-highlights {
        padding: 30px 0;
    }

    .program-highlights h2 {
        font-size: 2rem;
    }

    .highlight-card {
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .program-highlights h2 {
        font-size: 1.8rem;
    }

    .program-highlights .subtitle {
        font-size: 1rem;
    }

    .highlight-card {
        padding: 20px;
    }

    .highlight-icon {
        width: 60px;
        height: 60px;
    }

    .highlight-icon i {
        font-size: 1.5rem;
    }

    .highlight-card h3 {
        font-size: 1.2rem;
    }
}

/* Program Curriculum Section */
.program-curriculum {
    background: var(--color-light);
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 40px 0;
    color: #333;
}

.program-curriculum h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.program-curriculum .subtitle {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 40px;
    color: #666;
}

.day-tab {
    background:var(--primary-blue);
    border: none;
    border-radius: 50px;
    padding: 15px 30px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    margin-left: auto;
    margin-right: auto;

    position: relative;
    overflow: hidden;
}

.day-tab:hover {
    transform: translateY(-3px);
    
}

.day-tab .day-icon {
   
    
    font-size: 1.5rem;
  
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: var(--color-white);
    transition: all 0.3s ease;
}

.day-tab:hover .day-icon {
    transform: scale(1.1) rotate(5deg);
   
}

.day-tab .day-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-white);
    flex-grow: 1;
    text-align: left;
}

.day-tab .arrow-icon {
    width: 24px;
    height: 24px;
    transition: all 0.4s ease;
    color: var(--color-white);
    opacity: 0.8;
}

.day-tab.active {
  
    transform: translateY(-3px);
}

.day-tab.active .day-title {
    color: var(--color-white);
    font-weight: 700;
}

.day-tab.active .day-icon {
   
    transform: scale(1.1);
}

.day-tab.active .arrow-icon {
    transform: rotate(180deg);
    opacity: 1;
}

.day-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: all 0.6s ease;
}

.day-tab:hover::before {
    left: 100%;
}

.day-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--color-white);
    border-radius: 15px;
    margin: 0 auto;
    
}

.day-content.active {
    max-height: 500px;
    margin: 15px auto 25px;
    padding: 25px;
    border: 1px solid rgba(255, 107, 51, 0.1);
}

.results-text {
    text-align: center;
    color: #666;
    font-size: 1.1rem;
    margin-top: 40px;
    margin-bottom: 50px;
    font-style: italic;
}

/* Image Grid Styles */
.image-grid {
    margin-top: 60px;
}

.image-grid-item {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.image-grid-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.image-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.image-grid-item:hover img {
    transform: scale(1.1);
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    padding: 20px;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-grid-item:hover .image-overlay {
    opacity: 1;
}

/* Responsive adjustments for image grid */
@media (max-width: 768px) {
    .image-grid-item {
        height: 200px;
        margin-bottom: 20px;
    }
}

/* How this will work Section */
.how-it-works-section {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 40px 0;
}

.how-it-works-section h2 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.work-step {
    margin-bottom: 2.5rem;
}

.step-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}



.step-number {
    font-weight: bold;
}

.step-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 3rem;
}

@media (max-width: 991px) {
    .how-it-works-section h2 {
        font-size: 2.5rem;
        margin-bottom: 3rem;
        text-align: center;
    }

    .step-title {
        font-size: 1.75rem;
    }

    .step-description {
        font-size: 1rem;
        margin-left: 2.5rem;
    }
}

/* Program Benefits Section */
.program-benefits {
    background-color: #fff;
    padding: 40px 0;
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.program-benefits h2 {
    color: #000;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 80px;
}

.benefits-layout {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 900px;
    margin: 0 auto;
}

.center-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    width: 320px;
    height: 320px;
    z-index: 2;
}

.center-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.benefit-item {
    position: absolute;
    width: 140px;
    text-align: center;
}

.benefit-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    transition: all 0.3s ease;
}

.benefit-icon i {
    font-size: 24px;
    color: #fff;
}

.benefit-item h4 {
    font-size: 0.9rem;
    margin: 0;
    color: #000;
    font-weight: 500;
}

/* Positioning */
.benefit-item.top {
    top: 0;
    left: 50%;
    transform: translateX(-50%) !important;
}

.benefit-item.top-right {
    top: 15%;
    right: 10%;
}

.benefit-item.right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.benefit-item.bottom-right {
    bottom: 15%;
    right: 10%;
}

.benefit-item.bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) !important;
}

.benefit-item.bottom-left {
    bottom: 15%;
    left: 10%;
}

.benefit-item.left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.benefit-item.top-left {
    top: 15%;
    left: 10%;
}

/* Dark Enroll Button */
.enroll-btn-dark {
    background: #ff4e4e;
    color: white;
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 78, 78, 0.3);
}

.enroll-btn-dark:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 78, 78, 0.4);
    color: white;
}

@media (max-width: 991px) {
    .benefits-layout {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        padding: 20px;
    }

    .center-image {
        position: relative;
        width: 250px;
        height: 250px;
        margin: 30px auto;
        grid-column: span 2;
        transform: none;
        top: auto;
        left: auto;
    }

    .benefit-item {
        position: relative;
        width: 100%;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
    }

    .benefit-icon {
        width: 50px;
        height: 50px;
    }

    .benefit-icon i {
        font-size: 20px;
    }
}

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

/* About Me Section */
.about-me-section {
    background-color: var(--primary-blue);
    color: #fff;
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 40px 0;
}

.about-me-section h2 {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 40px;
    color: #fff;
}

.about-content {
    font-size: 1.2rem;
    line-height: 1.8;
}

.about-content p {
    margin-bottom: 25px;
    opacity: 0.9;
}

.about-image {
    position: relative;
    padding: 20px;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}

@media (max-width: 991px) {
    .about-me-section {
        padding: 30px 0;
    }

    .about-me-section h2 {
        font-size: 3rem;
        text-align: center;
        margin-bottom: 30px;
    }

    .about-content {
        font-size: 1.1rem;
        text-align: center;
        margin-bottom: 40px;
    }

    .about-image {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .about-me-section h2 {
        font-size: 2.5rem;
    }

    .about-content {
        font-size: 1rem;
    }
}

/* Books Section */
.books-section {
    background: var(--primary-blue);
    padding: 40px 0;
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}

.books-section h2 {
    color: var(--color-light);
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.books-section .subtitle {
    color: var(--color-light);
    opacity: 0.9;
    font-size: 1.2rem;
    font-style: italic;
    margin-bottom: 50px;
}

.books-slider {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    position: relative;
}

.books-track {
    display: flex;
    animation: slideBooks 30s linear infinite;
    width: fit-content;
}



.portfolios-slider {
    
    animation: slideBooks 10s linear infinite;
  
}
.portfolios-slider .row{flex-wrap: nowrap !important;}
.book-slide {
    width: 300px;
    padding: 0 15px;
    flex-shrink: 0;
}

.book-card {
    background: var(--color-light);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-warm);
    transition: all 0.4s ease;
}

.book-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-glow);
}

.book-image {
    position: relative;
    overflow: hidden;
    border-radius: 15px 15px 0 0;
}

.book-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-sunset);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.book-card:hover .book-image::after {
    opacity: 0.2;
}

.book-title {
    color: var(--color-dark);
    font-weight: 700;
    padding: 10px;
    text-align: center;
    background: var(--color-light);
    margin: 0;
    font-size: 20px;
    border-top: 3px solid var(--primary-blue);
}

.upcoming {
    color: var(--primary-blue);
    font-weight: 500;
}

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

.books-track:hover, .portfolios-slider:hover {
    animation-play-state: paused;
}


/* Responsive styles */
@media (max-width: 991px) {
    .books-section {
        padding: 30px 0;
    }

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

    .book-slide {
        width: 250px;
    }

    .book-image {
        height: 350px;
    }

    .book-card {
        margin: 0 10px;
    }
    
    .book-title {
        font-size: 1.1rem;
        padding: 15px;
    }
}

@media (max-width: 576px) {
    .books-section {
        padding: 25px 0;
    }
    
    .book-card {
        margin: 0 5px;
    }
    
    .book-title {
        font-size: 1rem;
        padding: 12px;
    }
}

/* Pricing Section */
.pricing-section {
    background-color: #fff;
    padding: 40px 0;
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.main-offer {
    max-width: 900px;
    margin: 0 auto;
}

.price-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.original-price {
    font-size: 2.5rem;
    color: #666;
    text-decoration: line-through;
    opacity: 0.7;
}

.current-price {
    font-size: 4rem;
    font-weight: 700;
    color: #000;
}

.features-list {
    max-width: 600px;
    margin: 0 auto;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.feature-item i {
    font-size: 1.5rem;
    color: #28a745;
}

/* Bonus Section */
.bonus-section {
    margin-top: 60px;
}

.bonus-title {
    background: #000;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    padding: 15px;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.bonus-item {
    background: #000;
    color: #fff;
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 10px;
}

.bonus-item h4 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.price-tag {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.price-tag .original {
    text-decoration: line-through;
    opacity: 0.7;
    font-size: 1.1rem;
}

.price-tag .current {
    font-size: 1.3rem;
    font-weight: 600;
}

.bonus-item img {
    border-radius: 10px;
    max-height: 200px;
    object-fit: cover;
}

/* Final Price Section */
.final-price {
    margin-top: 60px;
}

.final-price h3 {
    font-size: 2rem;
    font-weight: 600;
    color: #000;
}

.price-amount {
    font-size: 3.5rem;
    font-weight: 900;
    color: #000;
}

.pay-now-btn {
    background: #1a73e8;
    color: #fff;
    padding: 15px 40px;
    font-size: 1.2rem;
    border-radius: 10px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.pay-now-btn:hover {
    background: #1557b0;
    transform: translateY(-2px);
    color: #fff;
}

.pay-now-btn i {
    font-size: 1.4rem;
}

.secure-text {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-top: 5px;
}

@media (max-width: 991px) {
    .current-price {
        font-size: 3rem;
    }

    .original-price {
        font-size: 2rem;
    }

    .bonus-item {
        padding: 20px;
    }

    .bonus-item h4 {
        font-size: 1.2rem;
    }

    .price-amount {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .current-price {
        font-size: 2.5rem;
    }

    .original-price {
        font-size: 1.8rem;
    }

    .bonus-item .row {
        flex-direction: column-reverse;
    }

    .bonus-item .col-lg-4 {
        margin-bottom: 20px;
    }

    .price-amount {
        font-size: 2rem;
    }

    .pay-now-btn {
        padding: 12px 30px;
        font-size: 1rem;
    }
}

/* Mental Rebirth Section */
.mental-rebirth-section {
    background-color: #f8f9fa;
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 40px 0;
}

.mental-rebirth-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #000;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.3;
}

.author-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.author-details {
    text-align: left;
}

.author-details h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.author-details p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    text-transform: uppercase;
}

.disclaimer-text {
    font-size: 0.8rem;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Contact Footer */
.contact-footer {
    background-color: var(--primary-blue);
    padding: 36px 0 20px;
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

.contact-item i {
    font-size: 1.5rem;
}

.logo-container {
    text-align: center;
}

.footer-logo {
    height: 50px;
    object-fit: contain;
}

@media (max-width: 991px) {
    .mental-rebirth-title {
        font-size: 2rem;
        padding: 0 20px;
    }

    .contact-item {
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .mental-rebirth-title {
        font-size: 1.5rem;
    }

    .author-info {
        flex-direction: column;
        text-align: center;
    }

    .author-details {
        text-align: center;
    }

    .contact-footer .row > div {
        margin-bottom: 15px;
    }
}

/* Benefits Section */
.benefits-section {
   
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    
}

.benefits-title {
    font-size: 2rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 40px;
    line-height: 1.3;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
     
}
.benefits-list-grid{
    max-width: 1060px;
    margin: auto;
}   
.benefit-list-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    transition: transform 0.3s ease;
}

.benefit-list-item:hover {
    transform: translateX(10px);
}

.benefit-list-item i {
    font-size: 1.2rem;
    margin-top: 3px;
    color: var(--primary-orange);
    flex-shrink: 0;
}

.benefit-list-item span {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.5;
}



@media (max-width: 991px) {
    .benefits-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 576px) {
    .benefits-title {
        font-size: 1.5rem;
    }

    .benefit-list-item {
        padding: 8px;
    }

    .benefit-list-item i {
        font-size: 1.1rem;
    }

    .benefit-list-item span {
        font-size: 1rem;
    }
}

/* Progress Bar Styles */
.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 9999;
}

.progress-bar {
    height: 100%;
    background:var(--primary-blue);
    width: 0%;
    transition: var(--transition-fast);
}

@media (max-width: 991px) {
    .video-section {
        padding: 30px 0;
    }
    
    .video-container {
        border-radius: 10px;
    }
}

@media (max-width: 576px) {
    .video-section {
        padding: 25px 0;
    }
    
    .video-container {
        border-radius: 8px;
    }
}

/* Website Packages Section */
.website-packages {
    background: linear-gradient(var(--opacity-layer), var(--opacity-layer)), url('images/background_1.webp');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    background-repeat: no-repeat;
    padding: 40px 0;
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
}

.packages-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: #ffffff;
    font-family: "Montserrat", Sans-serif;
}

.packages-subtitle {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    color: #d1d1d1;
    font-size: 1.1rem;
    line-height: 1.6;
}

.package-card {
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: 0.3s ease;
}


.website-packages .row {   
    border: 1px solid rgba(255, 255, 255, 0.5);    
    align-items: stretch; 
    background: rgba(255, 255, 255, 0.05);  
    --bs-gutter-x: 0;
}
.website-packages .row.opacity-1{ border: 1px solid rgba(255, 255, 255, 1); }

.package-icon {
    font-size: 3rem;
    color: var(--color-light);
    margin-bottom: 20px;
}

.package-card h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
}

.package-description {
    color: #d1d1d1;
    font-size: 1.1rem;
    line-height: 1.6;
}

.package-features {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-top: none;
    border-bottom: none;
    backdrop-filter: blur(10px);
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    color: #ffffff;
    font-size: 1rem;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    transition: 0.3s ease;
}

.feature-list li:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(10px);
    border-radius: 5px;
}

.feature-list li i {
    color: var(--color-light);
    font-size: 1.2rem;
}

.price-text {
    font-size: 1.2rem;
    color: #d1d1d1;
    margin-bottom: 10px;
}

.price {
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
   
    margin-bottom: 30px;
}

.order-btn{
    display: inline-block;
    background: var(--color-light);
    color: var(--primary-blue);
    padding: 10px 25px;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s ease;
    border-radius: 50px;
    text-align: center;
}

.order-btn:hover {
    background: var(--color-light);
    transform: translateY(-3px);
        color: var(--primary-blue);
}
.feature-list li:last-child{border-bottom: none;}

.package-price{
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    backdrop-filter: blur(10px);
    transition: 0.3s ease;
    align-items: center;
}

.website-packages .packages-wrapper .row:first-child,
.website-packages .packages-wrapper .row:last-child{
   margin-left: 3rem;
   margin-right: 3rem;
}

@media (max-width: 991px) {
    .website-packages .packages-wrapper .row:first-child,
.website-packages .packages-wrapper .row:last-child{
   margin-left: 0;
   margin-right: 0;
}
    .website-packages {
        padding: 30px 0;
    }

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

    .package-card, .package-features, .package-price {
        margin-bottom: 30px;
    }

    .price {
        font-size: 3rem;
    }
    
}

@media (max-width: 576px) {
    .packages-title {
        font-size: 2rem;
    }

    .packages-subtitle {
        font-size: 1rem;
    }

    .package-card h3 {
        font-size: 1.5rem;
    }

    .feature-list li {
        font-size: 0.9rem;
    }

    .price {
        font-size: 2.5rem;
    }

    .order-btn {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
}

/* Add-Ons Section */
.add-ons-section {
    background:var(--color-light);
    padding: 40px 0;
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    color: #1a1a1a;
}

.add-ons-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    color: #1a1a1a;
    font-family: "Montserrat", Sans-serif;
 
   
}

.add-ons-subtitle {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    color: #212529;
    font-size: 1.1rem;
    line-height: 1.6;
}

.add-on-item {
    background: #ffffff;
    border: 2px solid var(--primary-blue);
    border-radius: 20px;
    padding:0 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.4s ease;
    height: 100%;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    align-items: center;
}

.add-on-item:hover {
    transform: translateY(-5px);
    border-color: #fff;
    background: var(--primary-blue);
   
}

.add-on-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    background:var(--primary-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #ffffff;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.add-on-item:hover .add-on-icon {
    transform: scale(1.1);
    background:#fff;
    color: var(--primary-blue);
}

.add-on-content {
    flex-grow: 1;
    position: relative;
}

.add-on-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.add-on-content h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
    transition: all 0.3s ease;
}
.add-on-item:hover .add-on-content h3 {
    color: #fff;;
}

.add-on-price {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-light);
    padding: 5px 15px;
    border-radius: 20px;
    background: var(--primary-blue);
    transition: all 0.3s ease;
}

.add-on-item:hover .add-on-price {
    background: #ffffff;
    color:var(--primary-blue) ;
}

.add-on-content p {
    font-size: 1rem;
    color: #495057;
    margin: 0;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}
.add-on-item:hover .add-on-content p {color: #fff;}
.add-on-arrow {
    position: absolute;
    top: 50%;
    right: -30px;
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, #ff6b33, #003d82);
    opacity: 0.1;
    transform: translateY(-50%) rotate(45deg);
    transition: all 0.3s ease;
    z-index: 1;
}

.add-on-item:hover .add-on-arrow {
    right: -20px;
    opacity: 0.2;
}

@media (max-width: 991px) {
    .add-on-item {
        padding: 20px;
    }

    .add-on-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 1.5rem;
    }

    .add-on-content h3 {
        font-size: 1.2rem;
    }

    .add-on-price {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .add-on-item {
        flex-direction: row;
        text-align: left;
        padding: 20px;
    }
   .package-price .enroll-btn .btn-wrap{height: 22px;}
   .package-card{padding-top:0 ;padding-bottom: 0;}
   .feature-list li:last-child,   .feature-list ul{margin-bottom: 0;}

    .add-on-icon {
        margin: 0;
    }

    .add-on-header {
        flex-direction: row;
    }

    .add-on-price {
        margin: 0;
    }
}

/* Fixed Notification Styles */
.fixed-notification {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 12px;
    padding: 15px;
    z-index: 1000;
    max-width: 320px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideIn 0.5s ease-out;
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

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

.notification-text {
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
}

.notification-text strong {
    color: #fff;
}

.notification-text .location {
    color: rgba(255, 255, 255, 0.8);
}

.notification-text p {
    margin: 4px 0;
}

.notification-text .time-ago {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.notification-text .source {
    color: var(--primary-orange);
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Hide notification on mobile */
@media (max-width: 768px) {
    .fixed-notification {
        display: none;
    }
}

/* What If Section Styles */
.what-if-section {
    padding: 40px 0;
    background: var(--color-white);
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.what-if-content {
   
    margin: 0 auto;
}

.what-if-title {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 40px;
    line-height: 1.2;
}
.text-blue{
    color: var(--primary-blue);
}

.gradient-text {
    background: linear-gradient(45deg, var(--primary-blue), var(--color-black));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.what-if-text {
    font-size: 25px;
    line-height: 1.5;
    margin-bottom: 30px;
    color:var(--color-black);
}

.highlight-green {
    background-color: var(--primary-orange);
    color: var(--color-white);
    padding: 2px 5px;
    border-radius: 5px;
}

.technique-text {
    font-size: 27px;
    line-height: 1.5;
    margin-bottom: 30px;
    color: var(--color-black);
}

.without-text {
    font-size: 27px;
    line-height: 1.5;
    margin-bottom: 40px;
    color: var(--color-black);
}

.healing-text {
    font-size: 5rem;
    font-weight: 900;
    color: var(--primary-orange);
    margin-bottom: 20px;
}

.together-text {
    font-size: 1.8rem;
    color: var(--color-black);
    
}

/* Responsive styles for What If section */
@media (max-width: 991px) {
    .what-if-title {
        font-size: 3rem;
    }

    .what-if-text,
    .technique-text,
    .without-text {
        font-size: 1.5rem;
    }

    .healing-text {
        font-size: 2.8rem;
    }

    .together-text {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .what-if-section {
        padding: 30px 0;
    }

    .what-if-title {
        font-size: 2rem;
    }

    .what-if-text,
    .technique-text,
    .without-text {
        font-size: 1.2rem;
    }

    .healing-text {
        font-size: 2rem !important;
    }

    .together-text {
        font-size: 1.2rem;
    }

    br {
        display: none;
    }
}

/* Trusted Partners Section */
.trusted-partners {
    padding: 40px 0;
    background: var(--primary-blue);
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}

.trusted-title {
    color: var(--color-light);
    font-family: "Montserrat", Sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 40px;
 
}

.logo-scroll {
    padding: 40px 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.04));
    border-radius: 20px;
    width: 100%;
    overflow: hidden;
}

.logo-container {
    display: flex;
    animation: scroll 30s linear infinite;
    width: fit-content;
}

.logo-slide {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 30px;
}

.partner-logo {
    height: 70px;
    object-fit: contain;
    background-color: var(--color-dark);
    transition: all 0.4s ease;
    padding: 10px;
}

.partner-logo:hover {
    filter: grayscale(0) opacity(1);
    transform: scale(1.1);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
.facebook-copyright{
    color: var(--color-light);
    font-size: 11px;
    font-weight: 400;
    text-align: center;
    margin-top: 20px;
}

/* Responsive styles for Trusted Partners section */
@media (max-width: 991px) {
    .trusted-partners {
        padding: 30px 0;
    }

    .trusted-title {
        font-size: 2rem;
        margin-bottom: 30px;
        margin: 0;
    }

    .partner-logo {
        height: 50px;
    }
    .logo-scroll{padding-bottom: 0;}

    .logo-slide {
        gap: 40px;
        padding: 0 20px;
    }
}

@media (max-width: 576px) {
    .trusted-title {
        font-size: 1.8rem;
    }

    .partner-logo {
        height: 40px;
    }

    .logo-slide {
        gap: 30px;
        padding: 0 15px;
    }
}

.work-progress {
    background: linear-gradient(135deg, var(--opacity-layer),  var(--opacity-layer)), url('images/background_1.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 40px 0;
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    color: var(--color-white);
}

.work-progress h2 {
    color: var(--color-white);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 60px;
}

.progress-container-btm {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.progress-step {
    flex: 1;
    background: var(--overlay-light);
    border: 1px solid var(--color-light);
    border-radius: 15px;
    padding: 50px 30px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.progress-step:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-light);
}

.progress-icon {
    width: 80px;
    height: 80px;
    background: var(--color-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.3s ease;
}

.progress-step:hover .progress-icon {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 107, 51, 0.3);
}

.progress-icon i {
    font-size: 2rem;
    color: var(--primary-blue);
}

.progress-step h3 {
    color: var(--color-light);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.progress-step p {
    color: var(--color-gray-300);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.progress-arrow {
    position: absolute;
    top: 50%;
    right: -52px;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.progress-arrow i {
    font-size: 2rem;
    color: var(--color-light);
    
}

@keyframes arrowPulse {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(10px);
        opacity: 0.5;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.progress-step:last-child .progress-arrow {
    display: none;
}

@media (max-width: 1200px) {
    .progress-container {
        flex-direction: column;
        max-width: 700px;
        gap: 50px;
    }

    .progress-arrow {
        top: auto;
        bottom: -45px;
        right: 50%;
        transform: translateX(50%) rotate(90deg);
    }

    .progress-step {
        width: 100%;
    }

    .progress-step:hover {
        transform: translateX(10px);
    }
}

@media (max-width: 768px) {
    .work-progress {
        padding: 30px 0;
    }

    .work-progress h2 {
        font-size: 2rem;
    }

    .progress-step {
        padding: 25px 20px;
    }

    .progress-icon {
        width: 60px;
        height: 60px;
    }

    .progress-icon i {
        font-size: 1.5rem;
    }

    .progress-step h3 {
        font-size: 1.2rem;
    }

    .progress-step p {
        font-size: 0.9rem;
    }
}

/* Enhanced Form Styles */
.form-section {
    padding: 40px 0;
    background: var(--color-white);
    position: relative;
}

.form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    background: var(--color-white);
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--color-gray-200);
}

.form-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    background: var(--gradient-warm);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.form-subtitle {
    text-align: center;
    color: var(--color-gray-600);
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

.form-group {
    margin-bottom: 15px;
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-gray-700);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-control {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    font-size: 1rem;
    border: 2px solid var(--color-gray-200);
    border-radius: 12px;
    background: var(--color-white);
    transition: all 0.3s ease;
    color: var(--color-gray-800);
}

.form-control:focus {
    border-color: var(--primary-orange);
    box-shadow: 0 0 0 4px rgba(255, 107, 51, 0.1);
    outline: none;
}

.form-control::placeholder {
    color: var(--color-gray-400);
}

textarea.form-control {
    height: 150px;
    padding: 15px 20px;
    resize: vertical;
    min-height: 150px;
    max-height: 300px;
}

.form-select {
    height: 56px;
    padding: 0 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 18px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    cursor: pointer;
}

.form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gray-300);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-check-input:checked {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
}

.form-check-label {
    font-size: 0.95rem;
    color: var(--color-gray-700);
    user-select: none;
}

.submit-btn {
    width: 100%;
    height: 56px;
    background: var(--gradient-warm);
    color: var(--color-white);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 107, 51, 0.2);
}

.submit-btn:active {
    transform: translateY(0);
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: all 0.5s ease;
}

.submit-btn:hover::before {
    left: 100%;
}

.form-floating {
    position: relative;
}

.form-floating .form-control {
    height: 60px;
    padding: 20px;
    background: transparent;
}

.form-floating .form-label {
    position: absolute;
    top: 0;
    left: 15px;
    height: 100%;
    padding: 20px 0;
    pointer-events: none;
    transform-origin: 0 0;
    transition: all 0.2s ease;
    color: var(--color-gray-500);
}

.form-floating .form-control:focus ~ .form-label,
.form-floating .form-control:not(:placeholder-shown) ~ .form-label {
    transform: translateY(-10px) scale(0.85);
    color: var(--primary-orange);
}

.form-text {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin-top: 5px;
}

.form-error {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 5px;
    display: none;
}

.form-control.is-invalid {
    border-color: #dc3545;
}

.form-control.is-invalid ~ .form-error {
    display: block;
}

/* Form Grid */
.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .form-container {
        padding: 30px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .form-control, 
    .form-select, 
    .submit-btn {
        height: 50px;
    }

    .form-floating .form-control {
        height: 54px;
    }

    textarea.form-control {
        height: 120px;
        min-height: 120px;
    }
}

/* Form Animations */
@keyframes formShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.form-shake {
    animation: formShake 0.4s ease-in-out;
}

/* Global Section Styles */
section {
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}

/* Update specific section paddings */
.website-packages {
    padding: 40px 0;
}

.add-ons-section {
    padding: 40px 0;
}

.work-progress {
    padding: 40px 0;
}

.trusted-partners {
    padding: 40px 0;
}

.what-if-section {
    padding: 40px 0;
}

.program-benefits {
    padding: 40px 0;
}

.about-me-section {
    padding: 40px 0;
}

.books-section {
    padding: 40px 0;
}

.pricing-section {
    padding: 40px 0;
}

.form-section {
    padding: 40px 0;
}

.program-curriculum {
    padding: 40px 0;
}

.program-highlights {
    padding: 40px 0;
}

.why-join-section {
    padding: 40px 0;
}

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

.testimonials-header {
    padding: 40px 0;
}

.testimonials-content {
    padding: 40px 0;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    section {
        padding: 30px 0;
    }
}

@media (max-width: 576px) {
    section {
        padding: 25px 0;
    }
}

/* Benefits List Section */
.benefits-list-section {
    padding: 40px 0;
    background:transparent;
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.benefits-list-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.benefits-list-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 40px;
    text-align: center;
}

.benefits-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.benefit-list-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
  
    transition: all 0.3s ease;
}



.benefit-list-text {
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 400;
}

.benefit-list-text strong {
    color: #fff;
    font-weight: 700;
}

@media (max-width: 991px) {
    .benefits-list-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .benefit-list-item {
        padding: 15px;
    }

    .benefit-list-text {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .benefits-list-title {
        font-size: 1.8rem;
    }

    .benefit-list-text {
        font-size: 1rem;
    }
}

.form-message {
    min-height: 0px;
}

.alert {
    padding: 10px 15px;
    margin-bottom: 0;
    border-radius: 5px;
    animation: fadeIn 0.5s ease-in-out;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-control:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.submit-btn-form:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.submit-btn-form.enroll-btn {
    background: var(--color-light) !important;
    color: black;
    width: 100%;
}
.enroll-btn .btn-wrap{
    position: relative;
    display: block;
    overflow: hidden;
   height:36px;
     line-height:36px;
}

.enroll-btn span {
    display: block;
    transition: transform 0.3s ease;
}

.enroll-btn .hover {
    transform: translateY(0px);
}

.enroll-btn:hover .original {
    transform: translateY(-36px);
}

.enroll-btn:hover .hover {
    transform: translateY(-36px);
}

@media(max-width:600px){
    .benefits-list-section{
        padding-top: 0;
    }
    .benefit-list-item {
        padding: 0;
    }
    .icon-container{font-size: 45px;}
    .enroll-btn{margin-top: 0;}

}

@media(max-width:768px){
    .add-on-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 11px;
    }
    .add-on-item:hover .add-on-price {
        color: var(--primary-blue) !important;
        
    }
    .portfolios{padding-bottom: 0 !important;}
    .testimonials-section{padding: 0 !important;}
}
@media(max-width:991px){
.progress-container-btm{flex-direction: column;}
.benefit-item{
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}
.center-image {
    position: relative !important;
    width: 100%;
    height: auto;
    margin: 0;
    grid-column: span 2;
    transform: none !important;
    top: 0 !important;
    left: 0 !important;
}
}

.portfolios{background-color: var(--primary-blue);}
.portfolios .card {background-color: transparent;background-size: 100%;position: relative;height: 480px;transition: all ease 10s;background-position: top  center; cursor: pointer;box-shadow: 0 0 6px 2px rgba(0,0,0,.4);}
.portfolios .card:hover{background-position: bottom center;}
.portfolios .card:hover:after{background: linear-gradient(0deg, black, transparent, transparent, #00000000);position: absolute;top:0;right: 0;bottom: 0;left: 0;content: '';z-index: 0;}
.portfolios .card:hover .card-body{opacity: 1;transition: all ease 1s;}
.portfolios .card:hover .card-body h4,
.portfolios .card:hover .card-body p{color: #fff;}
.portfolios .card:hover .card-body a{color: #fff;border-color: #fff;background: transparent;}
.portfolios .col-md-4{margin-bottom: 2rem;}
.portfolios .card .card-body{background-color: transparent;position: absolute;bottom: 0;opacity: 0;z-index: 9;color: #fff;}
.bg-white{background: white;}

@media (min-width:1600px) {
    .container, .what-if-content {
        position: relative;
        z-index: 1;
        max-width: 100%;
        padding: 0 5%;
    }
}

.credit-rev{position: absolute;
    background: white;
    bottom: 0;
    width: 100%;
    height: 39px;
    z-index: 9;}

.cat-section{padding: 0; background-color:  var(--primary-blue);}
.cat-section svg:first-child{   fill: var(--color-light); background-color: var(--color-blue);}
.cat-section svg{
    height: 30px;
    width: 100%;
    fill: var(--primary-blue);
    background-color: var(--color-light);
}

.cat-section .what-if-content .what-if-title{font-size: 3.4rem;font-weight:600;}
.cat-section .what-if-content{color: var(--color-light);}
.cat-section .what-if-content{padding: 60px 0 40px;}
.cat-section .what-if-content .what-if-text{color: var(--color-light);margin-top: 30px;}
.cat-section .what-if-content .together-text{color: var(--color-light);margin-top: 30px;}

.cat-section .enroll-btn{background-color: var(--color-light);color: var(--primary-blue);}

/* 5 Days Course Section */
.video-course-section {
    background: linear-gradient(135deg, #003d82, #1a1a1a);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.course-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 2rem;
    background: linear-gradient(45deg, #ff6b33, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

.book-seat-btn {
    background: linear-gradient(45deg, #ff6b33, #ff8c66);
    color: #ffffff;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    box-shadow: 0 5px 15px rgba(255, 107, 51, 0.3);
    transition: all 0.3s ease;
}

.book-seat-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 107, 51, 0.4);
    background: linear-gradient(45deg, #ff8c66, #ff6b33);
    color: #ffffff;
}

.mind-care-message {
    max-width: 900px;
    margin: 0 auto;
}

.message-box {
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed #ff6b33;
    border-radius: 15px;
    padding: 30px;
    margin: 40px 0;
}

.message-box h3 {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    line-height: 1.6;
    margin: 0;
    color: #ffffff;
    font-weight: 600;
}

.features-grid {
    margin-top: 50px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
    border-color: #ff6b33;
}

.feature-icon {
    font-size: 2.5rem;
    color: #ff6b33;
    margin-bottom: 20px;
}

.feature-card h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #ffffff;
}

.feature-card p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

@media (max-width: 768px) {
    .feature-card {
        padding: 20px 15px;
    }

    .message-box {
        padding: 20px;
    }

    .book-seat-btn {
        padding: 12px 30px;
        font-size: 1rem;
    }
}

/* Video Course Promo Section */
.video-course-promo svg{height: 30px;width: 100%;margin-bottom: 40px;fill: ;}

.video-course-promo {
    padding: 20px 0 60px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.promo-title {
    font-size: clamp(2.8rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #000000;
    margin-bottom: 2rem;
    font-family: "Montserrat", sans-serif;
}

.book-now-btn {
    display: inline-block;
    background: var(--primary-orange);
    color: #ffffff;
    padding: 10px 40px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(255, 107, 51, 0.3);
    transition: all 0.3s ease;
    letter-spacing: 0;
    border:none;
}

.book-now-btn.enroll-btn .btn-wrap{line-height: 36px;}

.book-now-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 107, 51, 0.4);
    background:  var(--primary-orange);
    color: #ffffff;
}

.mind-message {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

.message-content {
    background: #f5f5f5;
    border: 2px dashed #000000;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
}

.message-content h3 {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    line-height: 1.6;
    margin: 0;
    color: #000000;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
}

.features-row {
    margin-top: 40px;
    justify-content: center;
}

.promo-feature {
    background:  var(--primary-orange);;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
}

.promo-feature .feature-icon {
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 15px;
}

.promo-feature h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    font-family: "Montserrat", sans-serif;
}

.promo-feature p {
    font-size: 1rem;
    color: #ffffff;
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 991px) {
    .video-course-promo {
        padding: 60px 0;
    }

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

    .book-now-btn {
        padding: 12px 30px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .promo-feature {
        margin-bottom: 20px;
    }

    .message-content {
        padding: 20px;
    }

    .message-content h3 {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .video-course-promo {
        padding: 40px 0;
    }

    .promo-title {
        font-size: 2rem;
    }

    .book-now-btn {
        padding: 10px 25px;
        font-size: 0.9rem;
    }

    .promo-feature {
        padding: 20px 15px;
    }

    .promo-feature h4 {
        font-size: 1.1rem;
    }
}



@media(max-width:767px){
    .container{padding: 0 10px;}
    h2 {        font-size: 1.2rem !important;    }
    section.header-section,.mind-message{padding: 0;}
        .video-course-promo {        padding-top: 0; }
            .promo-feature {        padding-bottom: 0;}
            .features-row {    margin-top: 0;}
                .mind-message{margin-bottom: 15px;}
                    .partner-logo {        height: 62px;}
                    .logo-scroll{border-radius: 0;}
                        .why-card {        padding: 20px 12px;}
                        ul.feature-list{padding-left: 0;}
                        .feature-list li{justify-content: center;}
                        .package-card{padding: 0 20px}
                            .add-on-icon {        width: 40px;        height: 40px;        min-width: 40px;        font-size: 1.8rem;}
                               .add-on-header {        flex-direction: row;}
                               .add-on-item{height: auto;}
                                   .add-on-item {       padding: 15px; margin-bottom: 0;        align-items: start;}
                                   .add-ons-subtitle{margin-bottom: 30px;}
.copy-enqire{margin-top: 0 !important;}
.g-review{margin-bottom:  0 !important;}
    .progress-step {
        padding: 25px 10px;
    }

    .add-on-price span{font-size: 11px;}
    .add-on-header h3{font-size: 1.1rem !important;}
    .add-on-header{gap: 3px;}
    .add-on-price{font-size: 0.8rem;white-space: nowrap;}

}