/* header */
     * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
        background: linear-gradient(135deg, #e9ede9 0%, #e1e4e1 100%);
          /* background: linear-gradient(120deg, rgb(233, 234, 235), #cdcfd2e9); */
      color: #333;
      line-height: 1.6;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
    
    
     /* Scoped styles for the flipping-grid-section only */
       /* Scoped styles for the flipping-grid-section only */
         #flipping-grid-section {
        --front-color: rgba(240, 240, 240, 0.9);
        --back-color: #9f4854;
        /* --back-color: linear-gradient(120deg,#7A1121, #eceaeacc); */
        --border-color: rgba(255, 255, 255, 0.3);
        --bg-dark: rgb(195, 183, 183);
        --flip-duration: 0.6s;
        --text-grey: #fffffffd;
        --text-red:linear-gradient(120deg, #7a1121ed, #75081866);
        position: relative;
        width: 100%;
        min-height: 100vh;
        margin: 0;
        padding: 0;
        background: var(--bg-dark);
        overflow: hidden;
        font-family: 'Arial', sans-serif;
        color: white;
        isolation: isolate;
    }
    #flipping-grid-section .content {
        position: absolute;
        z-index: 10;
        text-align: center;
        width: 90%;
        max-width: 800px;
        padding: 20px;
        background-color: rgba(127, 53, 56, 0.677);
        border-radius: 10px;
        backdrop-filter: blur(0px);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    #flipping-grid-section h1 {
            font-style: italic;
        color: var(--text-grey);
        margin: 0 0 15px 0;
        font-size: 2.5rem;
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
        font-weight: 700;
    }
    #flipping-grid-section p {
            font-style: italic;
        color: var(--text-red);
        margin: 0;
        font-size: 1.3rem;
        line-height: 1.6;
        text-shadow: 0 0 10px rgb(255, 255, 255);
    }
    #flipping-grid-section .grid-container {
        position: absolute;
        width: 100%;
        height: 100%;
        display: grid;
        gap: 1px;
        padding:4px;
        box-sizing: border-box;
        z-index: 1;
    }
    #flipping-grid-section .grid-container {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(8, 1fr);
    }
    @media (min-width: 768px) {
        #flipping-grid-section .grid-container {
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat(5, 1fr);
        }
        #flipping-grid-section h1 { font-size: 3rem; }
        #flipping-grid-section p { font-size: 1.5rem; }
    }
    @media (max-width: 450px) {
        #flipping-grid-section .content { width: 80%; }
    }
    @media (min-width: 1200px) {
        #flipping-grid-section .grid-container {
            grid-template-columns: repeat(8, 1fr);
            grid-template-rows: repeat(4, 1fr);
        }
        #flipping-grid-section h1 { font-size: 3.5rem; }
        #flipping-grid-section p { font-size: 1.8rem; }
    }
    #flipping-grid-section .flip-square {
        position: relative;
        transform-style: preserve-3d;
        perspective: 1000px;
    }
    #flipping-grid-section .flip-front, 
    #flipping-grid-section .flip-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border: 1px solid var(--border-color);
        box-sizing: border-box;
        transition: all 0.3s ease;
        background-size: cover;
        background-position: center;
    }
    #flipping-grid-section .flip-front {
        /* background-image set dynamically */
        transform: rotateY(0deg);
    }
    #flipping-grid-section .flip-back {
        background: linear-gradient(
            135deg, 
            var(--back-color) 0%, 
            rgba(255, 50, 90, 0.6) 100%
        );
        transform: rotateY(180deg);
    }
    #flipping-grid-section .flip-to-red {
        animation: flipToRed var(--flip-duration) forwards;
    }
    #flipping-grid-section .flip-to-silver {
        animation: flipToSilver var(--flip-duration) forwards;
    }
    @keyframes flipToRed {
        0% { transform: rotateY(0deg); }
        100% { transform: rotateY(180deg); }
    }
    @keyframes flipToSilver {
        0% { transform: rotateY(180deg); }
        100% { transform: rotateY(0deg); }
    }
 header {
   background: linear-gradient(120deg, #7a1121ed, #75081866);

  color: rgb(238, 235, 233);
  padding: 10px 0 10px;
  text-align: center;
  position: relative;
  margin-bottom: 0;
}

/* Gradient bottom border */
header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 100%;
background: linear-gradient(120deg,#7A1121, #eceaeacc);
}


    .header-top {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .logo {
        border-radius: 4px;
      position: absolute;
      left:-10%;
      top: 70%;
      transform: translateY(-50%);
      height: 90px;
    }

    header h1 {
      font-size: 2.3rem;
    }

    header a {
      font-size: 1rem;
      margin-top: 0;
      color: #f5f5f5;
      text-decoration: none;
    }

     header a:hover {
            color: #75081866;
            transition: 0.3s all;
        }

    /* Menu */
    nav.menu {
      margin-top: 15px;
    }

    nav.menu ul {
      list-style: none;
      display: flex;
      justify-content: center;
      gap: 30px;
    }

  nav.menu ul li a {
    color: rgb(228, 225, 223);
    text-decoration: none;
    font-weight: bold;
    padding: 5px 2px;
    position: relative; /* Required for pseudo-element */
    transition: color 0.3s ease, border-radius 0.3s ease;
    z-index: 1; /* Ensures text stays above gradient */
}

nav.menu ul li a:hover {
    color: #b8213a;
    border-radius: 4px;
}

/* Gradient background (hidden by default) */
nav.menu ul li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #e6e4e3 0%, #c7bcb0 100%);
    border-radius: 4px;
    opacity: 0;
    z-index: -1; /* Places gradient behind text */
    transition: opacity 0.3s ease;
}

/* Fade in gradient on hover */
nav.menu ul li a:hover::before {
    opacity: 1;
}

    /* Hamburger Menu Icon */
    .hamburger {
      display: none;
      position: absolute;
      top: 20px;
      right: 30px;
      cursor: pointer;
      flex-direction: column;
      gap: 5px;
    }

    .hamburger span {
      display: block;
      width: 25px;
      height: 3px;
      background-color: white;
    }

    /* Responsive Styles */
       @media (max-width: 1368px) {
      .logo {
      left:-3%;
 
      }
             header h1 {
      font-size: 2.0rem;
    }
    }

       @media (max-width: 1068px) {
        .logo {
      left:-2%;
 
      }
             header h1 {
      font-size: 1.6rem;
    }
    }

    @media (max-width: 768px) {
                header h1 {
      font-size: 1.3rem;
      
    }
      .logo {
        
 /* left:0%; */
        left: 30px;
        height: 60px;
      }
    }
    @media (max-width: 450px) {
      .header{
        margin-bottom: 30px;
      }
      .logo {
        left: 0px;
        height: 55px;
         top: 10%;
      transform: translateY(-10%);
      }
      .hamburger {
        margin-top: 5px;
        display: flex;

      }
       header h1 {
        font-size: 1.3rem;
        margin-left: 100px;margin-right: 100px;}
      
   


      nav.menu {
        display: none;
        margin-top: 10px;
      }

      nav.menu.active {
        display: block;
      }

      nav.menu ul {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        background-color: linear-gradient(to left, rgb(156, 158, 158), #3d8e7b);
        padding: 10px 0;
      }
    }





    
   .price-tag {
       background: linear-gradient(120deg,#7A1121, #7508188f) ;
      color: rgb(250, 248, 247);
      display: inline-block;
      padding: 10px 20px;
      font-size: 1.5rem;
      font-weight: bold;
      border-radius: 5px;
      margin: 20px 0;
    }
   
    .course-name {
      font-size: 1.8rem;
      background: linear-gradient(120deg,#7A1121, #750818cc) ;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 20px;
    }

    .features {
      text-align: left;
      margin: 20px 0;
    }
    
    .features li {
      margin-bottom: 10px;
      list-style-position: inside;
      color: rgb(119, 26, 26);
    }
    
    .note {
      font-style: italic;
      color: rgb(119, 26, 26);
      margin: 20px 0;
      text-align: left;
    }
    
    .cta-buttons {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 30px;
    }
    
    .btn {
      padding: 12px 30px;
      border: none;
      border-radius: 5px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
    }
    
    .btn-primary {
      background: linear-gradient(120deg,#7A1121, #7508188f) ;
      color: white;
    }
    
    .btn-secondary {
      background: linear-gradient(135deg, #e6e4e3 0%, #c7bcb0 100%);
      color: rgb(119, 26, 26);
    }
    
    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    /* Flex Container */
    .course-section {
         margin-top: 50px;
      display: flex;
      justify-content: space-between;
      gap: 30px;
      padding: 0px;
      flex-wrap: wrap;
      width: 100%;
    }

    /* Full-width Image Container with Zoom Effect */
    .ganntechniqImage {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: 10px;
      min-height: 400px;
      margin: 0 auto;
    }

    .ganntechniqImage img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 5s ease-in-out;
      border-radius: 10px;
      transform-origin: center center;
    }

    .ganntechniqImage:hover img {
      transform: scale(1.05);
    }

    /* Centered Course Highlight with Lighter Transparency */
    .course-highlight {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255, 255, 255, 0.85);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 40px;
      text-align: center;
      border-radius: 10px;
      width: 80%;
      max-width: 600px;
      box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    }

    /* Mobile Version (below 768px) */
    @media screen and (max-width: 768px) {
      .ganntechniqImage {
        min-height: auto;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(252, 251, 251);
      }
      
      .ganntechniqImage img {
        display: none;
      }
      
      .course-highlight {
        position: static;
        transform: none;
        width: 100%;
        max-width: 100%;
        background: rgb(252, 251, 251);
        padding: 20px;
        margin: 0 auto;
        box-shadow: none;
      }
      
      .course-name {
        font-size: 1.5rem;
      }
      
      .price-tag {
        font-size: 1.2rem;
        padding: 8px 15px;
      }
      
      .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
      }
      
      .features, .note {
        padding: 0 10px;
      }
    }

    /* Tablet Version (769px-1024px) */
    @media screen and (min-width: 769px) and (max-width: 1024px) {
      .ganntechniqImage {
        min-height: 300px;
      }
      
      .course-highlight {
        width: 90%;
        padding: 20px;
      }
    }


/* 
gann zig-zag module */
        .gann-course-section {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px 30px;
            text-align: center;
            background: #eeeeee44;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
        }

        .header-container {
             background: linear-gradient(90deg, /* dark silver/gray */ rgba(205, 130, 130, 0.794), /* subtle shimmer */ rgba(215, 211, 211, 0.95) /* dark silver base again */);
            padding: 40px 20px;
            margin: 0 -20px;
            border-radius: 16px 16px 0 0;
            margin-bottom: 60px;
            position: relative;
        }

        .title {
            font-size: 2.2em;
            font-weight: 700;
            margin-bottom: 12px;
            position: relative;
            display: inline-block;
            padding-bottom: 8px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
         background: linear-gradient(120deg,#7A1121, #7508188f) ;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
        }

        .title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
          background: linear-gradient(120deg,#7A1121, #7508188f) ;
            border-radius: 2px;
        }

        .subtitle {
            font-size: 1.1em;
                color: #750818fe;
            margin-bottom: 10px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

        .course-modules {
            display: flex;
            flex-direction: column;
            gap: 25px;
            align-items: center;
            padding: 0 20px;
            position: relative;
            z-index: 2;
        }

        .ganncourse-module {
            background: #f0efef;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 6px 18px rgba(75, 56, 58, 0.677);
            text-align: left;
            position: relative;
            overflow: hidden;
            min-height: 180px;
            width: 90%;
            max-width: 800px;
            border-left: 4px solid #676968;
            transition: all 0.6s ease-out;
            opacity: 0.7;
        }

        .ganncourse-module:first-child {
            margin-top: -80px;
            opacity: 1;
        }

        /* Left modules (odd) */
        .ganncourse-module:nth-child(odd) {
            transform: translateX(-50px);
            margin-right: auto;
            margin-left: 0;
        }
        
        /* Right modules (even) */
        .ganncourse-module:nth-child(even) {
            transform: translateX(50px);
            margin-left: auto;
            margin-right: 0;
        }
        
        /* Show state */
        .ganncourse-module.show {
            opacity: 1;
            transform: translateX(0) !important;
        }

        .ganncourse-module:hover {
            transform: translateY(-3px) !important;
            box-shadow: 0 8px 24px rgb(73, 10, 15);
        }

        .ganncourse-module h3 {
            font-size: 1.3em;
            margin-bottom: 15px;
            padding: 8px 20px;
                 color: rgb(119, 26, 26);
            background: linear-gradient(
                135deg,
                rgba(60, 60, 60, 0.95),
                rgba(255, 255, 255, 0.15),
                rgba(100, 100, 100, 0.95),
                rgba(255, 255, 255, 0.15),
                rgba(60, 60, 60, 0.95)
            );
            background-size: 400% 400%;
            background-position: 0% 50%;
            animation: silverShimmer 6s ease-in-out infinite alternate;
            display: flex;
            align-items: center;
            border-radius: 50px;
        }

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

        .ganncourse-module h3::before {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
             background: linear-gradient(120deg,#7A1121, #7508188f) ;
            border-radius: 50%;
            margin-right: 10px;
        }

        .ganncourse-module p {
            font-size: 1em;
              color: rgb(119, 26, 26);
            line-height: 1.6;
            margin-bottom: 12px;
        }

        .module-content {
            position: relative;
            max-height: 120px;
            overflow: hidden;
            transition: max-height 0.6s ease;
        }

        /* CONTENT BOTTOM FADEOUT IS HERE */
        .module-content::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50px;
            background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(240, 239, 239, 1));
            transition: opacity 0.8s ease;
            opacity: 1;
        }

        .ganncourse-module.active .module-content,
        .ganncourse-module:first-child .module-content {
            max-height: 3000px;
        }

        .ganncourse-module.active .module-content::after,
        .ganncourse-module:first-child .module-content::after {
            opacity: 0;
        }

        .expand-btn {
            position: absolute;
            bottom: 15px;
            right: 20px;
            font-size: 20px;
              color: rgba(233, 221, 221, 0.753);
            cursor: pointer;
            background: rgb(182, 34, 44);
            padding: 8px;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            outline: none;
            transition: all 0.3s;
            z-index: 2;
        }

        .expand-btn:hover {
          background: rgba(199, 46, 46, 0.884);
            transform: scale(1.1);
        }

        .expand-btn i {
            transition: transform 0.3s;
        }

        .ganncourse-module.active .expand-btn i,
        .ganncourse-module:first-child .expand-btn i {
            transform: rotate(360deg);
        }

        /* Responsive adjustments */
        @media (max-width: 992px) {
            .ganncourse-module {
                width: 95%;
            }
        }

        @media (max-width: 768px) {
            .gann-course-section {
                margin: 30px 15px;
                padding: 0 15px 25px;
            }
            
            .header-container {
                padding: 30px 15px;
                margin-bottom: 40px;
            }
            
            .title {
                font-size: 1.8em;
            }
            
            .subtitle {
                font-size: 1rem;
            }
            
            .ganncourse-module {
                width: 100%;
                padding: 20px;
                transform: translateY(30px) !important;
                opacity: 0.7;
            }
            
            .ganncourse-module:first-child {
                margin-top: -60px;
                transform: translateY(0) !important;
                opacity: 1;
            }
            
            .ganncourse-module.show {
                transform: translateY(0) !important;
                opacity: 1;
            }

            .module-content::after {
                height: 40px;
            }
              .course-modules {
                padding: 0;
            }
        }

        @media (max-width: 480px) {
            .gann-course-section {
                margin: 20px 0;
                padding: 0 10px 20px;
                border-radius: 10px;
            }
            
              .header-container {
        padding: 30px 15px;
        margin-bottom: 40px;
       
    }
            
            .title {
                font-size: 1.6em;
                padding-bottom: 5px;
            }
            
            .title::after {
                width: 60px;
                height: 3px;
            }
            
            .subtitle {
                font-size: 0.95em;
            }
            
            .ganncourse-module {
                padding: 18px 15px;
                min-height: 160px;
             width:90%;
            }
            
            .ganncourse-module h3 {
                font-size: 1.1em;
                padding: 6px 15px;
            }
            
            .ganncourse-module p {
                font-size: 0.9em;
            }

            .expand-btn {
                width: 32px;
                height: 32px;
                font-size: 18px;
            }

            .module-content::after {
                height: 30px;
            }
        }




        
        /* .course-modules {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 40px;
        } */
        

        
     
        
        @media (max-width: 768px) {
            .cta-buttons {
                flex-direction: column;
            }
            
            /* .course-modules {
                grid-template-columns: 1fr;
            }
            
            .video-grid {
                grid-template-columns: 1fr;
            } */
        }

        








/* featured videos */
            .gann-mastery-videos {
            margin-top: 50px;
        }

        .gann-mastery-videos h2 {
            font-size: 2rem;
            margin-bottom: 20px;
             background: linear-gradient(120deg,#7A1121, #7508188f) ;
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
            color: transparent;
            /* color: rgb(40, 18, 3); */
            text-align: center;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .book-h2 {
            font-size: 2rem;
            margin-bottom: 20px;
       background: linear-gradient(120deg,#7A1121, #7508188f) ;
            /* color: rgb(40, 18, 3); */
            /* background: linear-gradient(to left, 
        rgb(174, 175, 175) 0%, 
        #ffc107 100%); */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            /* Optional for Firefox */
            background-clip: text;
            color: transparent;
            text-align: center;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .gann-mastery-video-container {
         background: linear-gradient(90deg, /* dark silver/gray */ rgba(205, 130, 130, 0.794), /* subtle shimmer */ rgba(215, 211, 211, 0.95) /* dark silver base again */) ;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .gann-mastery-video-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
            justify-content: center;
        }

        .gann-mastery-video-tab {
          background: linear-gradient(120deg,#7A1121, #7508188f) ;
            padding: 10px 20px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #fcfcfc;
      
            border: 1px solid rgba(0, 0, 0, 0.1);

        }

        .gann-mastery-video-tab:hover {
           background: rgba(79, 32, 39, 0.788)
        }

        .gann-mastery-video-tab.active {
            background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgba(100, 100, 100, 0.95) 100%);
            ;

            color: #7A1121;
            font-weight: bold;
        }

        .gann-mastery-video-content {
            display: none;
        }

        .gann-mastery-video-content.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }

        .gann-mastery-video-iframe {
            width: 100%;
            height: 400px;
            border-radius: 8px;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        /* Mobile View Styles */
        @media (max-width: 768px) {
            .gann-mastery-container {
                padding: 0px;
            }

            .gann-pricing-section,
            .gann-mastery-book-preview,
            .gann-mastery-video-container {
                padding: 25px;
                margin-left: 0px;
                margin-right: -15px;
                border-radius: 10px;
                width: calc(100% + 0px);
            }

            .gann-pricing-row {
                flex-direction: column;
            }

            .gann-pricing-column {
                width: 100%;
            }

            .gann-pricing-buttons {
                justify-content: center;
            }

            .gann-mastery-details-flex {
                flex-direction: column;
            }

            .gann-mastery-chapters,
            .gann-mastery-preview {
                min-width: 100%;
            }

            .gann-mastery-preview iframe {
                height: 350px;
                /* Increased height for mobile */
            }

            .gann-mastery-video-iframe {
                height: 250px;
            }

            .gann-mastery-book-cover {
                max-width: 100%;
            }

            .gann-mastery-view-btn {
                bottom: 30px;
                padding: 10px 20px;
                min-width: 160px;
            }

            /* Reduced button width for mobile */
            .gann-pricing-btn {
                min-width: 120px;
                padding: 10px 15px;
                font-size: 0.9rem;
            }
        }

        @media (max-width: 480px) {
             .gann-pricing-section {
            margin-top: 0px;
          
             }

            .gann-pricing-column h2,
            .gann-mastery-videos h2 {
                font-size: 1.8rem;
            }

            .gann-pricing-buttons {
                flex-direction: column;
                gap: 10px;
            }

            .gann-pricing-btn,
            .gann-mastery-view-btn {
                width: 100%;
                max-width: 200px;
                /* Reduced max width */
                margin: 0 auto;
            }

            .gann-mastery-view-btn {
                bottom: 20px;
            }

            .gann-mastery-preview iframe {
                height: 300px;
                /* Adjusted height for small mobile */
            }

            .gann-mastery-video-iframe {
                height: 200px;
            }
        }







    :root {
            --primary: #0a8c72;
            --primary-dark: #07634f;
            --secondary: #3d8e7b;
            --accent: #25D366;
            --accent-dark: #1DA851;
            --danger: #D44638;
            --danger-dark: #B53A2E;
            --text-dark: #122f28;
            --text-light: #f8f9fa;
        }


         /* ===== Registration Section Styles ===== */
       /* Payment Section Styles */
        .payment-section {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%,  rgba(100, 100, 100, 0.95) 100%);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        .payment-container {
            display: flex;
            flex-wrap: wrap;
            background: rgb(236, 236, 235);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin: 20px;
        }

        /* Payment Content */
        .payment-content {
            flex: 1;
            min-width: 300px;
            padding: 30px;
            display: flex;
            flex-direction: column;
        }

        .payment-title {
            text-align: center;
           background: linear-gradient(120deg,#7A1121, #7508188f) ;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 30px;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            padding-bottom: 15px;
        }

        .payment-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(120deg,#7A1121, #7508188f) ;
            border-radius: 2px;
        }

        /* International Buyers Section */
        .international-section {
            background: #ffffff00;
              
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .section-title {
      background: linear-gradient(120deg,#7A1121, #7508188f) ;
                  -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }

        .section-title:after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 50px;
            height: 3px;
      background: linear-gradient(120deg,#7A1121, #7508188f) ;
                  border-radius: 2px;
        }

        
        .contact-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 15px;
        }

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 14px 25px;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            flex: 1;
            min-width: 200px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: none;
            cursor: pointer;
            text-align: center;
        }

        .btn-whatsapp {
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            color: white;
        }

        .btn-email {
            background: linear-gradient(135deg, var(--danger), var(--danger-dark));
            color: white;
        }

        .btn-whatsapp:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(37, 211, 102, 0.3);
        }

        .btn-email:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(212, 70, 56, 0.3);
        }

        .btn i {
            font-size: 20px;
            margin-right: 10px;
        }

        /* Domestic Buyers Section */
        .domestic-section {
            margin-bottom: 30px;
        }

        .payment-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
        }

        .payment-details {
            flex: 1;
            min-width: 300px;
        }

        .payment-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .payment-icon {
            width: 40px;
            height: 40px;
                  background: linear-gradient(120deg,#7A1121, #7508188f) ;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: white;
            font-size: 18px;
            box-shadow: 0 4px 8px rgba(218, 76, 51, 0.2);
        }

        .payment-description {
            font-size: 18px;
            font-weight: 600;
            color: rgb(182, 34, 44);
        }

        .payment-summary {
            background: #ffffff00;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .summary-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px dashed #e0e0e0;
        }

        .summary-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .summary-name {
            color:  rgb(182, 34, 44);
            font-weight: 500;
        }

        .summary-price {
            font-weight: 600;
           color:  rgb(182, 34, 44)
        }

        .summary-total .summary-name,
        .summary-total .summary-price {
            font-weight: 700;
             color:  rgb(182, 34, 44);
            font-size: 18px;
        }

        .btn-payment {
      background: linear-gradient(120deg,#7A1121, #7508188f) ;
                  color: white;
            width: 100%;
            padding: 16px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 700;
            margin-top: 20px;
            box-shadow: 0 4px 8px rgba(79, 8, 8, 0.3);
            transition: all 0.3s;
            border: none;
            cursor: pointer;
        }

        .btn-payment:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(66, 10, 10, 0.4);
        }

        /* Important Notes Integrated in Payment */
        .payment-notes {
            background: rgba(74, 57, 21, 0.072);
            border-left: 6px solid  rgb(182, 34, 44);
            padding: 20px;
            border-radius: 8px 8px 8px 8px;
            margin-top: 30px;
        }

        .notes-title {
      background: linear-gradient(120deg,#7A1121, #7508188f) ;
                  -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .notes-content {
            color:  rgb(182, 34, 44);
            margin-bottom: 15px;
            line-height: 1.6;
        }

        .btn-notes {
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            color: white;
            padding: 12px 20px;
            border-radius: 6px;
            font-weight: 600;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s;
            box-shadow: 0 4px 8px rgba(37, 211, 102, 0.3);
            text-align: center;
            width: 100%;
        }

        .btn-notes:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(211, 37, 37, 0.4);
        }

        /* Sidebar Section */
        .sidebar {
            width: 40%;
            min-width: 300px;
      background: linear-gradient(120deg,#7a112178, #7508188f) ;
                  color: white;
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .sidebar-content {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .social-links {
            margin-bottom: 30px;
        }

        .sidebar-title {
            background:linear-gradient(135deg, #f3f2f1 0%, #ddd6cf 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 22px;
            margin-bottom: 20px;
            font-weight: 700;
            position: relative;
            display: inline-block;
        }

        .sidebar-title:after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 35px;
            height: 3px;
            background:linear-gradient(135deg, #f3f2f1 0%, #ddd6cf 100%);
            border-radius: 2px;
        }

        .social-icons {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .social-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
             color: rgb(216, 214, 213);
            transition: all 0.3s;
            font-size: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .social-icon:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .contact-method {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }

        .contact-icon {
            margin-right: 15px;
            margin-top: 4px;
            font-size: 18px;
              color: rgb(233, 230, 228);
        }

        .contact-text {
            margin: 0;
            font-size: 16px;
            font-weight: 500;
            line-height: 1.6;
             color: rgb(228, 226, 224);
        }

        .sidebar-image {
            width: 100%;
            height: auto;
            border-radius: 8px;
            margin-top: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            object-fit: cover;
        }

        /* Responsive Adjustments */
        @media (max-width: 992px) {
            .payment-container { flex-direction: column; }
                
            .sidebar { width: 100%; padding: 30px; }
                
            .payment-content { padding: 30px; }
                 
        }

        @media (max-width: 768px) {
            .gann-container { padding: 0 15px; }
                
            .payment-title { font-size: 24px; }
                
            .section-title, .sidebar-title { font-size: 20px; }
                
            .contact-buttons { flex-direction: column; }
                
            .btn { width: 100%; }
            
            .payment-wrapper { flex-direction: column; }
        }

        @media (max-width: 480px) {
            .payment-section { margin: 0px; border-radius: 15px; }
                
            .payment-notes{ margin-top: 10px;}
      
            .payment-container { margin: 5px;}
                
            .payment-content, .sidebar { padding: 5px; width:100%; }
                
            .payment-title { font-size: 22px; margin-bottom: 20px; }
               
            .payment-description { font-size: 16px; }
                
            .summary-name, .summary-price { font-size: 14px; }
                
            .contact-text { font-size: 14px; }
               
            .btn i { font-size: 18px; margin-right: 8px; }  

            .payment-details { min-width: 200px; }

            .sidebar {width: 100%; padding: 20px; }
            

   
            
           
           
          
       
            
        }

.hidden {
  opacity: 0.5;
  transform: translateY(-50px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.5s ease, transform 1.5s ease, visibility 1.5s ease;
}

.visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 1.5s ease, transform 1.5s ease, visibility 1.5s ease;
}

/* visible slide */
.hiddenSlide{
  opacity: 0.5;
  transform: translateX(-50px); /* Slide from the left */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.5s ease, transform 1.5s ease, visibility 1.5s ease;
}

.visibleSlide {
  opacity: 1;
  transform: translateX(0); /* Move to original position */
  visibility: visible;
  pointer-events: auto;
  transition: opacity 1.5s ease, transform 1.5s ease, visibility 1.5s ease;
}
.span-style{
    color: blue;
}

/* Add this to your existing CSS */
.payment-section {
    scroll-margin-top: 100px; /* Adjust based on your header height */
}

@keyframes highlight {
    0% { background-color: rgba(0, 109, 92, 0.1); }
    100% { background-color: transparent; }
}

#course-payment {
    animation: highlight 1.5s ease;
}



tion Styles */
.faq-section {
   background: linear-gradient(90deg, /* dark silver/gray */ rgba(205, 130, 130, 0.794), /* subtle shimmer */ rgba(215, 211, 211, 0.95) /* dark silver base again */);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    margin: 40px auto 0;
    padding: 24px 16px;
    max-width: 800px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.faq-section h2 {
  background: linear-gradient(120deg,#7A1121, #7508188f) ;
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
            color: transparent;
    font-size: 2rem;
    margin-bottom: 24px;
    font-weight: 700;
    letter-spacing: 1px;
}

.faq-item {
    margin-bottom: 22px;
    padding: 18px 18px 12px 18px;
    border-radius: 8px;
    background: #fffffff1;
    border-left: 4px solid #7A1121; /* Accent border */
   
    box-shadow: 0 1px 4px rgba(183,28,28,0.06);
    transition: box-shadow 0.2s;
}

.faq-item:hover {
    box-shadow: 0 4px 16px rgba(183,28,28,0.10);
}

.faq-item h3 {
    background: linear-gradient(120deg,#7A1121, #7508188f) ;
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
            color: transparent;
    font-size: 1.15rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.faq-item p {
    color:#7A1121;
    font-size: 1rem;
    margin: 0;
    line-height: 1.6;
}

   footer {
      background: linear-gradient(120deg,#7A1121, #eceaeacc) ;
    color: rgb(235, 232, 229);
            text-align: center;
            padding: 20px;
            margin-top: 50px;
        }