* {
           font-family: "Amaranth", sans-serif;
         }

         body {
           background: linear-gradient(to right, #3f2766, #5a3c45) !important;
         }

         /* navbar */
         .navbar {
           position: sticky;
           top: 0;
           z-index: 100;
           padding: 1rem 1.5rem;
           background: transparent;
           transition: background-color 0.4s ease;
         }

         .navbar.scrolled {
           background: linear-gradient(to right, #3f2766, #5a3c45) !important;

         }


         .container {
           max-width: 1280px;
           margin: 0 auto;
           display: flex;
           justify-content: space-between;
           align-items: center;
           gap: 60px;
         }

         .navbar.scrolled .social-icons a {
           /* Sets the color of the social media icons */
           color: white !important;
           /* The !important flag can be helpful here to override default link or icon styles, 
           but it's better practice to check if you can increase specificity first. */
         }

         .navbar.scrolled .social-icons a:hover {
           color: #fec113 !important;
         }

         .navbar {
           margin: 0;
           padding: 0;
           padding-bottom: 10px;
         }

         .logo {
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 10px;
           padding: 18px 30px;
           background-color: #ffffff;
           text-decoration: none;
           box-sizing: border-box;
           border-bottom-left-radius: 5px;
           border-bottom-right-radius: 5px;
           font-size: 1.3rem;
           font-weight: bold;
           white-space: nowrap;
           /* ✅ Prevents breaking into multiple lines */
           flex-wrap: nowrap;
           /* ✅ Ensures img + text stay in one line */
         }

         .logo-img {
           height: 40px;
           width: auto;
           flex-shrink: 0;
           /* ✅ Prevents image from shrinking at zoom */
         }

         .logo-text {
           font-size: 17px;
           color: #3f2766;
           line-height: 1.2;
           letter-spacing: 1px;
           text-align: left;
           /* ✅ Ensures text alignment stays clean */
         }

         .logo-text:hover {
           color: #fec113;
         }

         /* Menu Button (mobile only) */
         .menu-btn {
           display: none;
           font-size: 1.5rem;
           font-weight: bold;
           color: #fec113;
           background: none !important;
           border: none;
           cursor: pointer;
         }


         /* Menu Styles */
         .menu {
           display: flex;
           gap: 1rem;
           margin-left: 100px !important;
         }


         .menu li a {
           display: block;
           padding: 0.75rem 1.0rem;
           color: #ffffff;
           text-decoration: none;
           transition: color 0.3s ease;
           padding-top: 0px !important;
         }

         /* Basic menu styles */
         .nav .menu li {
           display: inline-block;
           margin: 0 0px;
           position: relative;
         }

         .nav .menu li a {
           text-decoration: none;
           color: #ffffff;
           /* change to your color */
           font-weight: 500;
           transition: color 0.3s ease;
           position: relative;
         }

         /* Hover & Active underline effect */
         .nav .menu li a::after {
           content: '';
           position: absolute;
           left: 0;
           bottom: -1px;
           /* space from text */
           width: 0;
           height: 1px;
           /* underline thickness */
           background-color: #fec113;
           /* underline color */
           transition: width 0.3s ease;
         }

         .nav .menu li a:hover::after,
         .nav .menu li a.active::after {
           width: 100%;
         }

         /* Optional: Change text color on hover */
         .nav .menu li a:hover {
           color: #fec113;
         }

         @media (max-width: 768px) {
           .menu-btn {
             display: block;
           }

           .logo {
             padding: 10px 15px;

           }

           .container {
             justify-content: space-around;
           }

           .menu {
             margin-left: 0px !important;
             padding-block: 10px;
           }



           .page {
             width: 50% !important;
             height: 100%;

           }

           .menu {
             display: none;
             /* hidden by default */
             position: absolute;
             top: 100%;
             left: 0;
             width: 100%;
             flex-direction: column;
             background: linear-gradient(to right, #3f2766, #5a3c45);
           }



           .menu.show {
             display: flex;
           }

           .nav .menu li a:hover::after,
           .nav .menu li a.active::after {
             width: 35%;
           }

           footer {
             margin-bottom: 60px;
           }

           .nav .menu li a {
             color: #ffffff;
             /* change to your color */
             margin-left: 10px;
             margin-top: 0px;
             padding-top: 0px;

           }

           .nav .menu li a:hover {
             color: #fec113;
             /* change to your color */

           }

           .menu.show {
             display: flex;
             /* show on toggle */
           }
         }


         /* Image */
         .hero-image {
           transform: scaleX(-1);
           display: block;
           margin: 0 auto 1.5rem auto;
           width: 12rem;
           height: 12rem;
           border-radius: 9999px;
           /* full circle */
           border: 4px solid #fec113;
           box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);

         }

         @media (max-width: 768px) {
           .hero-image {
             margin-block: 0px !important;
           }

           .hero-title {
             margin-bottom: 2px !important;
           }

           .hero-subtitle {
             margin-bottom: 1px !important;
           }
         }

         /* Title */
         .hero-title {
           font-size: 2.0rem;
           font-weight: 800;
           margin-bottom: 1rem;
           color: #fec113;
         }

         @media (min-width: 768px) {
           .hero-title {
             font-size: 3.75rem;
           }
         }

         /* Subtitle */
         .hero-subtitle {
           font-size: 1.3rem;
           font-weight: 700;
           margin-bottom: 1rem;
           color: #fff;
         }

         @media (min-width: 768px) {
           .hero-subtitle {
             font-size: 2.25rem;
           }
         }

         /* Description */
         .hero-description {
           font-size: 1.125rem;
           max-width: 48rem;
           margin: 0 auto 1.5rem auto;
           color: #fff;
         }

         @media (min-width: 768px) {
           .hero-description {
             font-size: 1.25rem;
           }
         }

         /* Button */
         .hero-button {
           display: inline-block;
           background-color: #fec113;
           color: #3f2766;
           padding: 0.75rem 2rem;
           border-radius: 9999px;
           font-weight: 600;
           text-decoration: none;
           box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
           transition: background-color 0.3s ease;
         }

         .hero-button:hover {
           background-color: #fefefe;
         }

         /* Mobile Bottom Navigation with Icons */
         .mobile-bottom-nav {
           position: fixed;
           bottom: 0;
           left: 0;
           width: 100%;
           background: linear-gradient(135deg, #3f2766, #3f2766);
           display: flex;
           justify-content: space-around;
           align-items: center;
           padding: 8px 0;
           z-index: 1000;
           box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.25);
           gap: 5px;
         }

         .mobile-bottom-nav .nav-btn {
           flex: 1;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           padding: 6px 0;
           color: #edf2f7;
           font-size: 0.75rem;
           text-decoration: none;
           transition: all 0.3s ease;
         }

         .mobile-bottom-nav .nav-btn i {
           font-size: 1.2rem;
           margin-bottom: 3px;
         }

         .mobile-bottom-nav .nav-btn:hover {
           background-color: #ffffff;
           color: #3f2766;
           border-radius: 5px;
         }

         .mobile-bottom-nav .nav-btn:active {
           background-color: #ffffff;
           color: #3f2766;
           border-radius: 5px;

         }

         .course-active {
           background-color: #ffffff;
           color: #3f2766 !important;
           border-radius: 5px;
         }

         @media (min-width: 768px) {
           .mobile-bottom-nav {
             display: none;
           }
         }

         .card-box {
           background: #fefefe;
           color: #3f2766;
           padding: 1.5rem;
           border-radius: 1rem;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
           transition: all 0.3s ease-in-out;
         }

         .card-box:hover {
           box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
           transform: translateY(-8px);
         }



         .hero-content {
           background: rgba(0, 0, 0, 0.5);
           /* transparent overlay for text visibility */
           padding: 20px;
           border-radius: 12px;
         }

         .hero-title {
           font-size: 2.5rem;
           font-weight: bold;
           margin-bottom: 10px;
         }

         .hero-subtitle {
           font-size: 1.5rem;
           margin-bottom: 15px;
         }

         .hero-description {
           font-size: 1rem;
           margin-bottom: 20px;
           max-width: 600px;
           margin-left: auto;
           margin-right: auto;
         }

         .hero-button {
           display: inline-block;
           background-color: #fec113;
           color: #000;
           padding: 12px 25px;
           font-weight: bold;
           border-radius: 8px;
           text-decoration: none;
           transition: 0.3s;
         }

         .hero-button:hover {
           background-color: #e0a800;
         }

         header {
           background: transparent !important;
         }

         /* Mobile view background */
         @media (max-width: 768px) {
           /* .hero-section {
    background: url("img/bg-phone.jpg") no-repeat center center/cover;
  } */

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

           .hero-subtitle {
             font-size: 1.2rem;
           }

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


         .icon-circle {
           width: 48px;
           height: 48px;
           display: flex;
           align-items: center;
           justify-content: center;
           background-color: #ffffff;
           /* background */
           color: #3f2766;
           /* icon color */
           border-radius: 50%;
           /* make it round */
           font-size: 25px;
           /* icon size */
         }

         /* Hero Section */
         .hero-section {
           position: relative !important;
           width: 100% !important;
           height: 100vh !important;
           /* full screen height */
           margin: 0 !important;
           padding: 0 !important;
           margin-top: -90px !important;
           display: flex !important;
           align-items: center !important;
           justify-content: center !important;
           text-align: center !important;
           color: white !important;
           background: url("./img/bg-web.jpeg") no-repeat center center !important;
           /* background: url("./img/B1.jpg") no-repeat center center !important; */

           background-size: cover !important;
           z-index: 1 !important;
         }

         .hero-section {
           position: relative;
           background: url('./img/bg-web.jpeg') no-repeat center center/cover !important;
           height: 100vh;
           display: flex;
           align-items: center;
           justify-content: center;
         }

         .hero-section .hero-text {
           position: absolute;
           top: 50%;
           left: 25%;
           transform: translate(-50%, -50%);
           color: white;
           text-align: left;
           z-index: 2;
           font-size: 60px;
           font-family: auto;
           line-height: 70px !important;
         }

         .hero-text h1,
         .hero-text h2 {
           font-family: auto !important;
           font-weight: bold;
         }

         .hero-section::before {
           content: "";
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           z-index: 1;
         }



         /* Feature cards (desktop default overlay) */
         .feature-cards {
           position: absolute !important;
           bottom: 0 !important;
           left: 0 !important;
           right: 0 !important;
           width: 100% !important;
           display: grid !important;
           grid-template-columns: repeat(3, 1fr) !important;
           z-index: 2 !important;
         }

         /* Individual card */
         .feature-card {
           padding: 1.2rem 1rem !important;
           text-align: center !important;
           color: #fff !important;
           font-family: sans-serif !important;
           background-color: white;
         }

         .feature-card i {
           font-size: 30px !important;
         }

         .card-farm {
           background: #264d278a !important;
         }

         .card-organic {
           background: #f372218d !important;
         }

         .card-delivery {
           background: #264d278a !important;
         }

         /* ---------- MOBILE VIEW ---------- */
         @media (max-width: 768px) {
           .hero-section {
             height: 93vh !important;
             /* full screen bg */
             margin-top: -80px !important;
             padding-bottom: 0 !important;
             background: url("./img/bg-phone.jpeg") no-repeat center center/cover !important;
             background-size: cover !important;
             color: #ffffffb6;
           }

           .hero-section .hero-text {
             position: absolute;
             top: 30%;
             left: 50% !important;
             transform: translate(-50%, -50%);
             color: white;
             text-align: left;
             z-index: 2;
             font-size: 25px;
             line-height: 30px !important;
             padding-inline: 0% !important;
             width: 100%;
             text-align: center;
           }

           .hero-section::before {
             content: "";
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             z-index: 1;
           }

           .feature-cards {
             position: relative !important;
             /* remove overlay */
             bottom: auto !important;
             margin-top: 0 !important;
             grid-template-columns: 1fr !important;

           }


         }

         /* scroll css */

         #about {
           scroll-margin-top: 50px;
         }

         #course-structure {
           scroll-margin-top: 100px;
         }

         #testimonials {
           scroll-margin-top: 100px;
         }

         #joinn {
           scroll-margin-top: 70px;
         }

         #contact {
           scroll-margin-top: 80px;
           margin-bottom: 0px !important;
         }

         /* Book Css */
         .book-container {
           height: 100vh;
           width: 100%;
           display: flex;
           justify-content: center;
           align-items: center;
           flex-direction: column;
           overflow: hidden;
         }

         .book {
           position: relative;
           width: 30vw;
           max-width: 800px;
           height: 70vh;
           max-height: 500px;
           perspective: 2000px;
           margin-left: 400px;
         }

         .page {
           width: 100%;
           height: 100%;
           position: absolute;
           top: 0;
           left: 0;
           background: white;
           box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
           transform-origin: left center;
           transition: transform 1s ease;
           display: flex;
           overflow: hidden;
         }

         .page.flipped {
           transform: rotateY(-180deg);
           z-index: 0;
         }

         .page img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           display: block;
           transform: rotateY(-180deg);

         }

         .carousel {
           position: relative;
           height: 500px;
         }

         .carousel-image {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           object-fit: contain;
           opacity: 0;
           transition: opacity 1s ease;
         }

         .carousel-image.active {
           opacity: 1;
         }

         #course-materials {
           background-color: white;
         }

         .pandn {
           color: #3f2766;
           border: none;
           padding: 10px 18px;
           border-radius: 8px;
           cursor: pointer;
           transition: 0.3s;
         }

         .controls {
           margin-top: 15px;
           text-align: center;
         }

         .pandn {
           padding: 8px 16px;
           margin: 0 8px;
           border: none;
           border-radius: 20px;
           background: #fec113;
           color: #3f2766;
           font-size: 16px;
           cursor: pointer !important;
           transition: background 0.3s;
         }

         button:hover {
           background: #ffffff;
         }

         /* 📱 Mobile adjustments */
         @media (max-width: 768px) {
           .book {
             width: 70vw;
             height: 50vh;
             margin-left: 340px;

           }

           .book-container {
             margin: 0px !important;
             padding: 0px !important;
           }
         }

         @media (max-width: 480px) {
           .book {
             width: 90vw;
             height: 45vh;
           }

           .book-container {
             margin: 0px !important;
             padding: 0px !important;
           }


           button {
             padding: 5px 10px;
             font-size: 15px;

           }

           .controls {
             margin-bottom: 0px;
           }
         }


         /* fee section */
         #course-fee {
           /* padding: 40px; */
           background: linear-gradient(135deg, #3f2766, #5a3c45);
           border-radius: 20px;
           box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
           color: #fff;
           text-align: center;
           transition: transform 0.3s ease, box-shadow 0.3s ease;
         }



         #course-fee h3 {
           font-size: 1.7rem;
           font-weight: 700;
           color: #fec113;

         }

         /* 
         .course-details p {
           font-size: 1.2rem;
           margin: 15px 0;
           padding: 15px;
           border-radius: 12px;
           background: rgba(255, 255, 255, 0.08);
           transition: background 0.3s ease;
           text-align: left;
         } */

         .course-details p strong {
           color: #fec113;
         }

         .course-details p span {
           color: #f0f0f0;
           font-size: 1rem;
           font-style: italic;
         }

         .course-details p:hover {
           background: rgba(255, 255, 255, 0.15);
           transform: translateY(-2px);
           box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
         }



         /* 3 tab css */
         .tabs {
           display: flex;
           justify-content: center;
           gap: 100px;
           /* works fine for desktop */
           flex-wrap: wrap;
           /* allow wrapping */
         }

         .tab {
           padding: 20px 60px;
           font-weight: 600;
           border-radius: 6px;
           box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
           background: #3f2766;
           color: #fff;
           transition: all 0.3s ease;
           cursor: pointer;
           text-align: center;
         }

         /* Hover */
         .tab:hover {
           background: #3f2766;
           transform: scale(1.05);
         }

         /* Active */
         .tab.active {
           background: #3f2766;
           color: #ffffff;
         }

         /* Mobile View (stack vertically) */
         @media (max-width: 768px) {
           .tabs {
             flex-direction: column;
             align-items: center;
             gap: 20px;
             /* smaller gap for mobile */
           }

           .tab {
             width: 100%;
             max-width: 280px;
             /* keep buttons neat */
           }
         }

         #plan {
           scroll-margin-top: 100px;
         }





         /* ===== CONTAINER ===== */
         .course-container {
           width: 100%;
           margin: 0;
           padding: 30px 40px;
           background: rgba(255, 255, 255, 0.1);
           border-radius: 10px;
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
           backdrop-filter: blur(15px);
           border: 1px solid rgba(255, 255, 255, 0.2);
           color: #fff;
           transition: all 0.3s ease-in-out;
         }

         .course-container:hover {
           box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
         }

         /* ===== MAIN 2 COLUMNS ===== */
         .course-columns {
           display: flex;
           flex-wrap: wrap;
           gap: 50px;
           align-items: flex-start;
           justify-content: space-between;
         }

         .course-left,
         .course-right {
           flex: 1 1 45%;
         }


         .course-left,
         .course-right {
           flex: 1;
           /* background: #fff; */
           border-radius: 10px;
           padding: 25px;
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.205);
           display: flex;
           flex-direction: column;
           justify-content: space-between;
           height: 400px;
           /* keeps spacing inside consistent */
         }

         /* ===== Course Details ===== */
         .course-details p {
           font-size: 1.1rem;
           margin: 12px 0;
           padding: 12px;
           border-radius: 10px;
           background: rgba(255, 255, 255, 0.08);
           transition: background 0.3s ease;
           text-align: left;
         }

         .course-details p span {
           opacity: 0.8;
           font-size: 0.95rem;
         }

         .course-fee-section {
           padding: 0px !important;
         }

         /* ===== BANK SECTION: 2 SUB-COLUMNS ===== */
         .bank-columns {
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 0px;
           flex-wrap: wrap;

         }

         .qr-section {
           flex: 1 1 40%;
           text-align: center;
         }

         .qr-image {
           width: 200px;
           height: 200px;
           object-fit: cover;
           border-radius: 10px;
           border: 2px solid rgba(255, 255, 255, 0.3);
         }

         .bank-details {
           flex: 1 1 55%;
           text-align: left;
         }

         .bank-details p {
           font-size: 1.1rem;
           margin: 8px 0;
           background: rgba(255, 255, 255, 0.08);
           padding: 10px;
           border-radius: 10px;
         }

         .course-bank-details p {
           font-size: 15px !important;
         }

         .bank-note {
           font-size: 0.85rem;
           margin: 8px 0;
           background: rgba(255, 255, 255, 0.08) !important;
           padding: 10px;
           border-radius: 10px;
           text-align: left;
           font-style: italic;
         }

         .bank-section {
           width: 50%;
         }

         .bank-note-course {
           font-size: 0.85rem;
           margin: 8px 0;
           background: #3f276622 !important;
           padding: 10px;
           border-radius: 10px;
           text-align: left;
           font-style: italic;
           width: 100% !important;
         }

         /* ===== Responsive ===== */
         @media (max-width: 768px) {
           .course-columns {
             flex-direction: column;
           }

           .course-left,
           .course-right {
             flex: 1 1 100%;
              height: auto !important;
           }
           .course-fee-section {
           padding: 6px !important;
         }
         .bank-section {
           width: 100%;
         }

           .bank-columns {
             flex-direction: column;
             text-align: center;
             width: 100% !important;

           }

           .bank-details p {
             width: 100% !important;
           }

           .qr-image {
             width: 200px;
             height: 200px;
             text-align: center;
           }

           .qr-section {
             text-align: center !important;
             align-items: center;
             display: flex !important;
             justify-content: center !important;
           }

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


         /* ===== TITLE ===== */
         .course-page-heading {
           text-align: center;
           font-size: 2.6rem;
           font-weight: 800;
           margin-bottom: 40px;
           background: linear-gradient(90deg, #fec113, #fec113);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
         }

         /* ===== TABS ===== */
         .course-page-tabs {
           display: flex;
           justify-content: center;
           flex-wrap: wrap;
           gap: 12px;
           margin-bottom: 30px;
           border-bottom: 2px solid rgba(255, 255, 255, 0.15);
           padding-bottom: 15px;
         }

         .course-page-tab {
           padding: 12px 24px;
           cursor: pointer;
           border-radius: 30px;
           background: rgba(255, 255, 255, 0.15);
           color: #eee;
           font-weight: 600;
           font-size: 1rem;
           transition: all 0.3s ease;
           border: 1px solid rgba(255, 255, 255, 0.2);
         }

         .course-page-tab.active {
           background: linear-gradient(135deg, #362355, #4a333a);
           color: #ffffff;
           box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
         }

         .course-page-tab:hover {
           transform: translateY(-4px);
           background: rgba(255, 255, 255, 0.25);
           color: #ffcf71;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
         }

         /* ===== TAB CONTENT ===== */
         .tab-content {
           padding: 30px 20px;
           background: rgba(255, 255, 255, 0.08);
           border-radius: 12px;
           margin-top: 20px;
           color: #fff;
           border: 1px solid rgba(255, 255, 255, 0.2);
         }

         .course-section {
           margin-bottom: 25px;
           background: rgba(255, 255, 255, 0.1);
           border-radius: 12px;
           border: 1px solid rgba(255, 255, 255, 0.2);
           padding: 20px 24px;
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
           transition: transform 0.3s ease, box-shadow 0.3s ease;
         }

         .course-section:hover {
           transform: translateY(-6px);
           box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
         }

         .course-section h3 {
           position: relative;
           font-size: 1.3rem;
           font-weight: 700;
           margin-bottom: 14px;
           background: linear-gradient(90deg, #fec113, #fec113);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           padding-left: 14px;
           /* space for the bar */
         }

         .course-section h3::before {
           content: '';
           position: absolute;
           left: 0;
           top: 0;
           width: 4px;
           /* thickness of bar */
           height: 100%;
           /* full height of heading */
           background: #fec113;
           /* yellow bar */
           border-radius: 2px;
           /* slight rounding for modern look */
         }


         .course-section ul {
           list-style: none;
           padding: 0;
           margin: 0;
         }

         .course-section ul li {
           padding: 10px 0;
           font-size: 1rem;
           color: #f1f1f1;
           border-bottom: 1px solid rgba(255, 255, 255, 0.15);
         }

         .course-section ul li:last-child {
           border-bottom: none;
         }

         /* ===== RESPONSIVE ===== */
         @media (max-width: 768px) {
           .course-container {
             padding: 10px;
           }

           .course-page-heading {
             font-size: 2rem;
           }

           .course-page-tab {
             width: 100%;
             text-align: center;
           }

           .course-page-tab.active {
             background: linear-gradient(135deg, #362355, #4a333a);
             color: #ffffff;
             box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
           }

           .course-page-tab:hover {
             transform: translateY(-4px);
             background: rgba(255, 255, 255, 0.25);
             color: #ffcf71;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
           }

           .whatsapp-float {
             bottom: 175px !important;
             right: 10px !important;
           }

         }

         .whatsapp-float {
           position: fixed;
           width: 50px;
           height: 50px;
           bottom: 140px;
           right: 36px;
           background-color: #25d366;
           color: #FFF;
           border-radius: 50px;
           box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
           z-index: 1000;
           display: flex;
           justify-content: center;
           align-items: center;
           font-size: 30px;
           animation: pulseZoom 1.5s infinite ease-in-out;
           transition: background-color 0.3s ease, transform 0.3s ease;
         }

         .whatsapp-float:hover {
           background-color: #128C7E;
           transform: scale(1.1);
         }

         @keyframes pulseZoom {

           0%,
           100% {
             transform: scale(1);
           }

           50% {
             transform: scale(1.15);
           }
         }

         /* Optional: Make it slightly smaller on mobile devices */
         @media screen and (max-width: 767px) {
           .scroll-buttons-container {
             bottom: 75px !important;
             right: 15px !important;
           }
         }

         /* Container for both buttons, fixed to the right */
         .scroll-buttons-container {
           position: fixed;
           right: 40px;
           /* Adjust as needed, considering the WhatsApp button */
           bottom: 30px;
           /* Position above the footer/WhatsApp button */
           z-index: 999;
           /* High Z-index to ensure visibility */
           display: flex;
           flex-direction: column;
           gap: 10px;
           /* Space between the two buttons */
         }

         /* Base style for both buttons */
         .scroll-btn {
           background-color: #FEC113;
           /* The specified color: rgb(254 193 19) */
           color: #3f2766;
           /* Dark text color for contrast */
           border: none;
           border-radius: 50%;
           width: 40px;
           height: 40px;
           cursor: pointer;
           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
           font-size: 15px;
           opacity: 0.8;
           /* Slightly transparent when inactive */
           transition: opacity 0.3s, transform 0.3s;
         }

         .scroll-btn:hover {
           opacity: 1;
           /* Fully opaque on hover */
           transform: scale(1.05);
         }

         /* Optionally hide the buttons until the user scrolls a bit, 
   but for the "Bottom" button, we'll keep it always visible. */
         .top-btn {
           /* Initially hidden */
           display: none;
         }

         /*social media -icos script*/
         /* Styling for the social media icons container */
         .social-icons {
           display: flex;
           align-items: center;
           gap: 20px;
           /* margin-left: 230px; */
           display: none;
           margin-right: 10px;
         }

         /* Show social icons on screens wider than a typical mobile view */
         @media (min-width: 768px) {
           .social-icons {
             display: flex;
           }
         }

         .social-icons i {
           align-items: center;
         }

         /* Style the individual icons */
         .social-icons a {
           color: #3f2766;
           font-size: 1.2rem;
           /* Adjust size as needed */
           transition: color 0.3s ease;
           text-decoration: none;
           /* Remove any underline */
         }

         /* Hover effect */
         .social-icons a:hover {
           color: #fec113;
           /* Bright yellow/orange on hover */
           transform: scale(1.1);
         }

         /* You may need to adjust the main .container or .nav CSS 
   to ensure the .social-icons align on the far right. 
   If your .nav uses justify-content: space-between, this should work automatically. 
*/

         .image-gallery {
           /* padding: 60px 20px; */
           text-align: center;
         }

         .gallery-container {
           display: grid;
           grid-template-columns: repeat(4, 1fr);
           gap: 20px;
           justify-items: center;
         }

         .gallery-item {
           width: 100%;
           max-width: 250px;
           height: 90%;
           cursor: pointer;
           overflow: hidden;
           border-radius: 10px;
           box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
           transition: transform 0.3s ease;
         }

         .gallery-item:hover {
           transform: scale(1.05);
         }

         .gallery-item img {
           width: 100%;
           height: auto;
           display: block;
         }

         /* Modal Styles */
         .modal {
           display: none;
           position: fixed;
           z-index: 9999;
           padding-top: 50px;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           overflow: auto;
           background-color: rgba(0, 0, 0, 0.9);
         }

         .modal-content {
           margin: auto;
           display: block;
           max-width: 80%;
           border-radius: 10px;
         }

         .close {
           position: absolute;
           top: 25px;
           right: 40px;
           color: white;
           font-size: 35px;
           font-weight: bold;
           cursor: pointer;
         }

         /* Responsive */
         @media (max-width: 992px) {
           .gallery-container {
             grid-template-columns: repeat(3, 1fr);
           }
         }

         @media (max-width: 768px) {
           .gallery-container {
             grid-template-columns: repeat(2, 1fr);
           }
         }

         @media (max-width: 480px) {
           .gallery-container {
             grid-template-columns: repeat(2, 2fr);
             row-gap: 0px;
             /* column-gap: 0px; */

           }

           .close {
             top: 20px !important;

           }

           .modal {
             display: none;
             position: fixed;
             z-index: 9999;
             padding-top: 100px;
             left: 0;
             top: 0;

           }
         }


         .map-container {
           position: relative;
           width: 100%;
           height: 470px;
           border-radius: 10px;
           overflow: hidden;
         }

         .map-container .map {
           width: 100%;
           height: 100%;
         }

         .map-container .map iframe {
           width: 100%;
           height: 100%;
           border: 0;
         }

         /* Overlay div */
         .map-overlay {
           position: absolute;
           top: 10px;
           left: 15px;
           width: 200px;
           background: rgb(255, 255, 255);
           /* semi-transparent green */
           color: #000000;
           padding: 10px 7px;
           z-index: 2;
           text-align: left;
         }

         .map-overlay h4 {
           margin: 0 0 5px;
           font-size: 11px;
           font-family: sans-serif;
           letter-spacing: 0px;
           font-weight: bold;
         }

         .map-overlay p {
           margin: 0;
           font-size: 10px;
           color: rgba(52, 51, 51, 0.884);
           font-family: sans-serif;
           letter-spacing: 0px;
           font-weight: 520;
         }

         @media (max-width: 480px) {
           .map-overlay {
             position: absolute;
             top: 10px;
             left: 10px;
             width: 200px;
             background: rgb(255, 255, 255);
             /* semi-transparent green */
             color: #000000;
             padding: 10px 7px;
             z-index: 2;
             text-align: left;
           }

         }

         @media (max-width: 480px) {
           .course-wp {
             width: 100% !important;
           }


         }