/* Media Queries */
@media (max-width:1200px) {
    .marquee-group span { margin-right: 20px; font-size: 24px; }
    .banner-heading { font-size: 80px; }
    .uxui-text-stack .uxui-title { font-size: 24px; }
    .uxui-text-stack .uxui-subtitle { font-size: 18px; }
    .uxui-text-stack .uxui-bullets li { font-size: 14px; }
    .uxui-image-stack img { width: 200px; height: 400px; }
}


/* Global */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100vw; overflow-x: visible; }
body {
    font-family: 'Poppins', sans-serif;
    background:
        radial-gradient(circle at bottom left, #000322 30%, transparent 50%) no-repeat,
        conic-gradient(from 90deg at 1px 1px, #000322 90deg, #8884 0) center -1px / 50px 50px,
        linear-gradient(180deg, #000322 80%, #000322 100%);
    background-blend-mode: normal, lighten, normal;
    color: #fff;
}
.wrapper {
    width: 100%;
    overflow-x: visible;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #000322;
}


/* Add this class to your <header> in HTML */
.site-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #000322;
}

/* Hamburger Menu */
.site-header .hamburger-menu {
    display: none; /* Hidden by default on desktop */
    position: absolute;
    right: 15px; /* Moved to the right */
    top: 25%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Adjusted to match your circular design */
    background: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
    border: none;
    cursor: pointer;
    z-index: 1001; /* Above mobile menu */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.site-header .hamburger-menu span {
    width: 25px;
    height: 3px;
    background: #fff;
    margin: 4px 0;
}

/* Mobile Menu */
.site-header .mobile-menu {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 3, 34, 0.5); /* Matches your original */
    z-index: 1000; /* Below hamburger but above content */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.site-header .mobile-menu.active {
    display: flex; /* Shown when toggled */
}

.site-header .mobile-menu a {
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    margin: 20px 0;
}
/* Text Stack with Image (Header) */
.text-stack-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.text-stack-img {
    width: 100px;
    height: 100px;
    border-radius: 200px;
    object-fit: cover;
}

.text-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.1;
}

.text-stack .heading {
    font-size: 48px;
    font-weight: 600;
    color: #ffffff;
}

.text-stack .subheading {
    font-size: 24px;
    font-weight: 500;
    background: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}







/* Icon Bar */
.icon-bar {
    position: relative;
    width: 420px;
    height: 85px;
    margin-right: -20px;
    border-radius: 30px 0 0 30px;
}
.icon-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
    border-radius: inherit;
}
.icon-bar-inner {
    position: absolute;
    inset: 3px;
    background: #000322;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 27px 0 0 27px;
}
.icon-bar-inner img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    margin-top: 7px;
}

/* Marquee */
.marquee { height: 32px; overflow: hidden; background: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%); }
.marquee-content { display: flex; animation: marquee 15s linear infinite; width: max-content;  }
.marquee-group span {  font-family: 'Roboto'; font-weight: 600; font-size: 30px; font-style: normal; color: white; line-height: 31px; white-space: nowrap; margin-right: 20px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Banner */
.banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    height: 190px;
    gap: 10px;
}
.banner-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}
.banner-subheading {
    font-size: 29px;
}
.banner-heading-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.banner-heading {
    font-size: 150px;
    background: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.banner-line {
    width: 8px;
    height: 67px;
    background: #fff;
    margin-top: 10px;
}
.banner-right {
    display: flex;
    gap: 20px;
}
.banner-button {
    width: 137px;
    height: 137px;
    border-radius: 50%;
    background: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s, border 0.3s, color 0.3s;
    border: 1px solid transparent;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;

}
.banner-button:hover {
    width: 137px;
    height: 137px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}

/* Grid Section */
.grid-section {
    background: transparent;
    padding: 5px 5px;
    position: sticky;
    top: 0;
    z-index: 5; /* Increased to overlap griduxui sections */
}
.grid-top {
    width: 100vw;
    height: 12vh;
    display: flex;
    align-items: center;
}
.heading-container {
    position: relative;
    width: 700px;
    height: 98px;
    border-radius: 0 30px 30px 0;
    margin-left: -5px;
}
.heading-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
    border-radius: inherit;
}
.heading-container-inner {
    position: absolute;
    inset: 4px;
    background: #000322;
    border-radius: 0 27px 27px 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 50px;
    font-weight: 600;
    color: #fff;
}
.grid-bottom {
    display: flex;
    margin-top: 0px;
    height: 65vh;
    flex: 1;
}
.grid-left {
    width: 60vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-style: solid;
    border-width: 0px;
    padding-top: 50px;
}
.video-box video {
    width: 810px;
    height: 509px;
    object-fit: cover;
    border: 4px solid lightgrey;
    border-radius: 20px;
}


.video-box .slideshow-image {
    width: 810px;
    height: 484px;
    object-fit: cover;
    border: 2px solid lightgrey;
    border-radius: 20px;
}

.grid-right {
    width: 40vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: transparent;
    border-style: solid;
    border-width: 0px;
    padding-top: 5px;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Default: Show desktop iframe, hide mobile iframe */
.desktop-iframe {
  width: 100%;
  height: 100%;
  display: block !important;
}
.mobile-iframe {
  width: 100%;
  height: 100%;
  display: none !important;
}






/* Subheader Cell */
.grid2-subtop, .grid3-subtop, .grid4-subtop, .grid5-subtop, .grid6-subtop, .grid7-subtop,
.griduxui1-subtop, .griduxui2-subtop, .griduxui3-subtop {
    width: 100vw;
    height: 15vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: transparent;
    position: relative;
}
.left-group {
    flex: 0 0 auto;
}
.button-group {
    flex: 0 0 auto;
    display: flex;
    gap: 50px;
}
.subheading-content {
    display: flex;
    align-items: center;
    gap: 20px;
}
.sub-num {
    font-size: 80px; /* Reduced from 105px */
    font-weight: 600;
    background: linear-gradient(90deg, #15C7CB 15%, #3C9EEB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sub-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.sub-title {
    font-size: 36px; /* Reduced from 45px */
    font-weight: 600;
    color: #fff;
}
.sub-line {
    width: 100%;
    height: 1px;
    background: #fff;
}
.sub-subtitle {
    font-size: 24px; /* Reduced from 30px */
    background: linear-gradient(90deg, #15C7CB 15%, #3C9EEB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.grid2-arrow, .grid3-arrow, .grid4-arrow, .grid5-arrow, .grid6-arrow, .grid7-arrow,
.griduxui1-arrow, .griduxui2-arrow, .griduxui3-arrow {
    width: 54px;
    height: 54px;
    border: 2px solid transparent;
    border-image-source: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
      border-image-slice: 1;
    border-radius: 50%;
    background: none;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-image 0.4s ease, background 0.4s ease, color 0.4s ease;
}
.grid2-arrow:hover, .grid3-arrow:hover, .grid4-arrow:hover, .grid5-arrow:hover,
.grid6-arrow:hover, .grid7-arrow:hover, .griduxui1-arrow:hover, .griduxui2-arrow:hover, .griduxui3-arrow:hover {
    background: #000322;
    color: #ffffff;
    border: 2px solid transparent;
    border-radius: 50%;
    border-image-source: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
    border-image-slice: 1;
}

/* Slider Sections */
.grid2, .grid3, .grid4, .grid5, .grid6,
.griduxui1, .griduxui2, .griduxui3 {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at bottom left, #000322 30%, transparent 50%) no-repeat,
        conic-gradient(from 90deg at 1px 1px, #000322 90deg, #8883 0) center -1px / 50px 50px,
        linear-gradient(180deg, #000322 80%, #000322 100%);
    background-blend-mode: normal, lighten, normal;
}


.grid7{
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  background:
      radial-gradient(circle at bottom left, #000322 30%, transparent 50%) no-repeat,
      conic-gradient(from 90deg at 1px 1px, #000322 90deg, #8883 0) center -1px / 50px 50px,
      linear-gradient(180deg, #000322 80%, #000322 100%);
  background-blend-mode: normal, lighten, normal;

}


.grid2 { z-index: 1; }
.grid3 { z-index: 2; }
.grid4 { z-index: 3; }
.grid5 { z-index: 4; }
.grid6 { z-index: 5; margin: 0; padding: 0; }
.grid7 { z-index: 6; margin: 0; padding: 0;  }
.griduxui1 { z-index: 1; height: 100vh; }
.griduxui2 { z-index: 2; height: 100vh; }
.griduxui3 { z-index: 3; height: 100vh; }


.grid2-track, .grid3-track, .grid4-track, .grid5-track, .grid6-track, .grid7-track,
.griduxui1-track, .griduxui2-track, .griduxui3-track {
    display: flex;
    transition: transform 0.4s ease;
}
.grid2-item, .grid3-item, .grid4-item, .grid5-item, .grid6-item, .grid7-item,
.griduxui1-item, .griduxui2-item, .griduxui3-item {
    flex: 0 0 100vw;
    display: flex;
    height: 65vh; /* Default for other grids */
}
.griduxui1-item, .griduxui2-item, .griduxui3-item {
    height: 73vh; /* Adjusted for 100vh section height minus top/subtop */
}
.grid2-left, .grid3-left, .grid4-left, .grid5-left, .grid6-left, .grid7-left {
    flex: 0 0 60vw;
}
.grid2-right, .grid3-right, .grid4-right, .grid5-right, .grid6-right, .grid7-right {
    flex: 0 0 40vw;

}
.griduxui1-left, .griduxui2-left, .griduxui3-left {
    flex: 0 0 14vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 10px;
}
.griduxui1-right, .griduxui2-right, .griduxui3-right {
    flex: 0 0 85vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.grid2-left, .grid3-left, .grid4-left, .grid5-left, .grid6-left, .grid7-left,
.grid2-right, .grid3-right, .grid4-right, .grid5-right, .grid6-right, .grid7-right,
.griduxui1-left, .griduxui2-left, .griduxui3-left, .griduxui1-right, .griduxui2-right, .griduxui3-right {
    border: 0px solid #fff  ;
}
.custom-item-1-left, .custom-item-2-left, .custom-item-3-left {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-style: solid;
    border-width: 0px;
    padding-top: 50px;
}
.custom-item-1-right, .custom-item-2-right, .custom-item-3-right {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: transparent;
    border-style: solid;
    border-width: 0px;
    padding-top: 5px;
}

/* UX/UI Text Stack */
.uxui-text-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.uxui-text-stack .uxui-title {
    font-size: 40px; /* Reduced from 36px */
    font-weight: 600;
    background: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.uxui-text-stack .uxui-subtitle {
    font-size: 20px; /* Reduced from 24px */
    color: #fff;
}
.uxui-text-stack .uxui-bullets {
    list-style-type: disc;
    padding-left: 20px;
}
.uxui-text-stack .uxui-bullets li {
    font-size: 16px; /* Reduced for readability */
    color: #fff;
    margin-bottom: 8px;
}

/* UX/UI Image Stack */
.uxui-image-stack {
    display: flex;
    gap: 30px;
}
.uxui-image-stack img {
    width: 276px;
    height: 545px;
    object-fit: cover;
    border: 0px solid lightgrey;
    border-radius: 17px;
}

.uxui-image-stack4 img {
    width: 271px;
    height: 540px;
    object-fit: cover;
    border: 0px solid lightgrey;
    border-radius: 17px;
    gap: 10px;
}


/* Existing styles from your provided CSS */

/* Updated jsanima section styles */
.jsanima1, .jsanima2, .jsanima3, .jsanima4 {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at bottom left, #000322 30%, transparent 50%) no-repeat,
        conic-gradient(from 90deg at 1px 1px, #000322 90deg, #8883 0) center / 50px 50px,
        linear-gradient(180deg, #000322 80%, #000322 100%);
    background-blend-mode: normal, lighten, normal;
}

.jsanima1 { z-index: 1; }
.jsanima2 { z-index: 2; }
.jsanima3 { z-index: 3; }
.jsanima4 { z-index: 4; }

.jsanima1-subtop, .jsanima2-subtop, .jsanima3-subtop, .jsanima4-subtop {
    width: 100vw;
    height: 12vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: transparent;
    position: relative;
}

.jsanima1-track, .jsanima2-track, .jsanima3-track, .jsanima4-track {
    display: flex;
    transition: transform 0.4s ease;
}

.jsanima1-item, .jsanima2-item, .jsanima3-item, .jsanima4-item {
    flex: 0 0 100vw;
    display: flex;
    height: 88vh; /* 100vh - 12vh grid-top */
    border-style: solid;
    border-width: 1px;
    border-color: white;

}

.jsanima1-left, .jsanima2-left, .jsanima3-left, .jsanima4-left {
    flex: 0 0 80vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.jsanima1-right, .jsanima2-right, .jsanima3-right, .jsanima4-right {
    flex: 0 0 20vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: white;
}

.animation-frame {
    width: 100%;
    height: 672px;
    border: none;
}

.jsanima1-arrow, .jsanima2-arrow, .jsanima3-arrow, .jsanima4-arrow {
    width: 54px;
    height: 54px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: none;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-image 0.4s ease, background 0.4s ease, color 0.4s ease;
}

.jsanima1-arrow:hover, .jsanima2-arrow:hover, .jsanima3-arrow:hover, .jsanima4-arrow:hover {
    background: #000322;
    color: #ffffff;
    border: 2px solid transparent;
    border-radius: 50%;
    border-image-source: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
    border-image-slice: 1;
}





#closing-section {
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000322;

}

.closing-content {
  transform: translateY(20px);
  transition: transform 1s ease;
  text-align: center;
  color: #fff;
}

.closing-content.float-up {
  transform: translateY(0);
}



.footer-spacer {
    height: 100vh;
}

.footer {
    height: 40vh;
    padding-top: 15px
  /* Ensures footer overlaps last grid section */
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;

}

.footer-left, .footer-right {
    padding: 0 10px;
    box-sizing: border-box;
}

.footer-container {
    position: relative;
    height: 100%;
}

.footer-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
    border-radius: 30px;
}

.footer-inner {
    position: absolute;
    inset: 6px;
    background: #000322;
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 95%;

}

.footer-left .footer-inner {
    justify-content: center;
    align-items: center;
    position: center;
}

.footer-text-stack-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.footer-text-stack-container .text-stack-img {
    width: 180px;
    height: 180px;
    border-radius: 200px;
    object-fit: cover;
}

.footer-text-stack-container .text-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.footer-text-stack-container .headingf {
    font-size: 40px;
    font-weight: 600;
    color: #ffffff;
}

.footer-text-stack-container .subheadingf {
    font-size: 20px;
    font-weight: 500;
    background: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-line {
    width: 100%;
    height: 1px;
    background: #fff;
    margin: 5px 0;
}

.footer-icon {
    width: 60px;
    height: 60px;
    margin-top: 10px;
}

.footer-profile-img{
  width: 60px;
  height: 60px;
  margin-top: 10px;
}
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 20px;
}

.contact-titlef {
    font-size: 13px;
    font-weight: 600;
    color: #3C9EEB;
}

.contact-textf {
    font-size: 28px;
    color: #fff;
}

.footer-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.footer-button {
    width: 140px;
    height: 40px;
    border-radius: 20px;
    background: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s, border 0.3s, color 0.3s;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
}

.footer-button:hover {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}

.footer-text {
    font-size: 13px;
    color: #fff;
    margin-top: auto;
}







/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    background: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 100;
}

.scroll-to-top::before {
    content: '↑';
    color: #fff;
    font-size: 24px;
}

.scroll-to-top:hover {
    background: linear-gradient(90deg, #15C7CB 15%, #3C9EEB 100%);
    color: #000322;
}






@media (max-width: 768px) {




  .desktop-iframe {
   display: none !important;
 }
  .mobile-iframe {
   display: block !important;
}

    /* Header */

    header {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }
    .site-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }

    .site-header .hamburger-menu {
        display: flex; /* Visible on mobile */
    }

    /* Ensure header-top adjusts */
    .site-header .header-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
    }


    .text-stack-container {
        gap: 8px;
    }
    .text-stack-img {
        width: 65px;
        height: 65px;
    }
    .text-stack .heading {
        font-size: 22px;
    }
    .text-stack .subheading {
        font-size: 14px;
    }



    .icon-bar {
        width: 100%;
        height: 60px;
        margin-right: 0;
        border-radius: 20px;
    }
    .icon-bar-inner {
        inset: 2px;
        border-radius: 18px;
    }
    .icon-bar-inner img {
        width: 44px;
        height: 44px;
    }

    /* Marquee */
    .marquee {
        height: 38px;
    }
    .marquee-group span {
        font-size: 25px;
        line-height: 38px;
        margin-right: 15px;
    }

    /* Banner */
    .banner {
        flex-direction: column;
        height: auto;
        padding: 15px;
        gap: 15px;
    }
    .banner-left {
        align-items: center;
        text-align: center;
    }
    .banner-subheading {
        font-size: 22px;
    }
    .banner-heading {
        font-size: 60px;
    }
    .banner-line {
        width: 6px;
        height: 40px;
        margin-top: 8px;
    }
    .banner-right {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .banner-button {
        width: 95px;
        height: 95px;
        font-size: 13px;
    }
    .banner-button:hover {
        width: 80px;
        height: 80px;
        font-size: 13px;
        justify-content: center;
        align-items: center;
    }

    /* Grid Sections */
    .grid2, .grid3, .grid4, .grid5, .grid6, .grid7,
    .griduxui1, .griduxui2, .griduxui3,
    .jsanima1, .jsanima2, .jsanima3, .jsanima4 {
        position: relative;
        height: auto;
        min-height: 100vh;
    }


    .grid-top {
        width: 100vw;
        height: 12vh;
        display: flex;
        align-items: center;
    }
    .heading-container {
        position: relative;
        width: 380px;
        height: 60px;
        border-radius: 0 30px 30px 0;
        margin-left: -5px;
    }
    .heading-container::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
        border-radius: inherit;
    }
    .heading-container-inner {
        position: absolute;
        inset: 4px;
        background: #000322;
        border-radius: 0 27px 27px 0;
        display: flex;
        align-items: center;
        padding: 0 20px;
        font-size: 23px;
        font-weight: 400;
        color: #fff;
    }








        .grid2-subtop, .grid3-subtop, .grid4-subtop, .grid5-subtop, .grid6-subtop, .grid7-subtop,
        .griduxui1-subtop, .griduxui2-subtop, .griduxui3-subtop, .jsanima1-subtop,
        .jsanima2-subtop, .jsanima3-subtop, .jsanima4-subtop {
            width: 100vw;
            height: 15vh;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            background: transparent;
            position: relative;
        }
        .left-group {
            flex: 0 0 auto;
        }
        .button-group {
            flex: 0 0 auto;
            display: flex;
            gap: 10px;
        }
        .subheading-content {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .sub-num {
            font-size: 60px; /* Reduced from 105px */
            font-weight: 600;
            background: linear-gradient(90deg, #15C7CB 15%, #3C9EEB 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .sub-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
        }
        .sub-title {
            font-size: 12px; /* Reduced from 45px */
            font-weight: 400;
            color: #fff;
        }
        .sub-line {
            width: 100%;
            height: 1px;
            background: #fff;
        }
        .sub-subtitle {
            font-size: 12px; /* Reduced from 30px */
            background: linear-gradient(90deg, #15C7CB 15%, #3C9EEB 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    .button-group {
        flex-direction: row;
        gap: 10px;
        margin-top: 10px;
    }
    .grid2-arrow, .grid3-arrow, .grid4-arrow, .grid5-arrow, .grid6-arrow, .grid7-arrow,
    .griduxui1-arrow, .griduxui2-arrow, .griduxui3-arrow,
    .jsanima1-arrow, .jsanima2-arrow, .jsanima3-arrow, .jsanima4-arrow {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    .grid2-arrow:hover, .grid3-arrow:hover, .grid4-arrow:hover, .grid5-arrow:hover,
    .grid6-arrow:hover, .grid7-arrow:hover,
    .griduxui1-arrow:hover, .griduxui2-arrow:hover, .griduxui3-arrow:hover,
    .jsanima1-arrow:hover, .jsanima2-arrow:hover, .jsanima3-arrow:hover, .jsanima4-arrow:hover {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    .grid-bottom,
    .grid2-item, .grid3-item, .grid4-item, .grid5-item, .grid6-item, .grid7-item,
    .griduxui1-item, .griduxui2-item, .griduxui3-item,
    .jsanima1-item, .jsanima2-item, .jsanima3-item, .jsanima4-item {
        flex-direction: column;
        height: auto;
    }
    .grid2-left, .grid3-left, .grid4-left, .grid5-left, .grid6-left, .grid7-left,
    .griduxui1-left, .griduxui2-left, .griduxui3-left,
    .jsanima1-left, .jsanima2-left, .jsanima3-left, .jsanima4-left {
        width: 100%;
        padding: 10px;
    }


    .jsanima1-right, .jsanima2-right, .jsanima3-right, .jsanima4-right {
        width: 100%;
        padding: 10px;

    }

  .griduxui1-right, .griduxui2-right, .griduxui3-right{
      width: 100%;
      padding: 10px;
      height: auto;
      align-items: center;


  }


  .grid2-right, .grid3-right, .grid4-right, .grid5-right, .grid6-right, .grid7-right{

    width: 100%;
    height: 400px;
    padding: 1px;
  }






    .grid2-left .video-box video,
        .grid3-left .video-box video,
        .grid4-left .video-box video,
        .grid5-left .video-box video,
        .grid6-left .video-box video,
        .grid7-left .video-box video {
            width: 350px;
            height: 219px;
            max-height: 400px; /* Custom height for mobile */
            border: 3px solid lightgrey;

        }

        .video-box .slideshow-image {
              width: 350px;
              height: 219px;
              max-height: 400px;
              border: 3px solid lightgrey;
          }




    .uxui-image-stack img {
        width: 206px;
        height: 445px;
        align-items: center;


        border-radius: 10px;
    }
    .uxui-image-stack4 img {
      width: 140px;
      height: 290px;
       align-items: center;

        border-radius: 10px;
    }






    .uxui-text-stack {
        gap: 8px;
    }
    .uxui-text-stack .uxui-title {
        font-size: 28px;
    }
    .uxui-text-stack .uxui-subtitle {
        font-size: 16px;
    }
    .uxui-text-stack .uxui-bullets li {
        font-size: 14px;
        margin-bottom: 6px;
    }

    /* Closing Section */
    #closing-section {
        height: 50vh;
        padding: 10px;
    }
    .closing-content h1 {
        font-size: 24px;
    }

    /* Footer */
    .footer {
         height: auto;
         min-height: 80vh; /* Ensures enough space for vertical stack */
         z-index: 10;
         padding: 10px 0; /* Slight top/bottom padding */
     }
     .footer-grid {
         display: flex;
         flex-direction: column;
         gap: 20px; /* Space between footer-left and footer-right */
         width: 100%;
     }
     .footer-left, .footer-right {
       width: 100%;
       padding: 10px;
   }

   .footer-container {
       background: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
       border-radius: 15px;
       padding: 5px; /* Creates a 5px gradient border */
   }

   }
     .footer-container::before {
         content: '';
         position: absolute;
         inset: 0;
         background: linear-gradient(90deg, #3C9EEB 15%, #15C7CB 100%);
         border-radius: 15px;
         z-index: 1; /* Ensure gradient border is visible */
     }
     .footer-inner {
         position: relative;
         inset: 5px;
         background: #000322;
         border-radius: 10px;
         padding: 10px;
         z-index: 2; /* Above gradient border */
         height: 98%;
         width: 98%;



     }
     .footer-text-stack-container .text-stack-img {
         width: 75px;
         height: 75px;
     }
     .footer-text-stack-container .heading {
         font-size: 24px;
     }
     .footer-text-stack-container .subheading {
         font-size: 18px;
     }
     .footer-icon {
         width: 40px;
         height: 40px;
     }

     .footer-profile-img{
       width: 45px;
       height: 45px;
       margin-top: 10px;
     .contact-title {
         font-size: 13px;
     }
     .contact-text {
         font-size: 18px;
     }
     .footer-buttons {
         gap: 10px;
     }
     .footer-button {
         width: 80px;
         height: 35px;
         font-size: 12px;
     }
     .footer-button:hover {
         width: 80px;
         height: 35px;
         font-size: 12px;
     }
     .footer-text {
         font-size: 10px;
     }


    /* Scroll to Top Button */
    .scroll-to-top {
        width: 40px;
        height: 40px;
        bottom: 10px;
        right: 10px;
        font-size: 18px;
    }
    .scroll-to-top::before {
        font-size: 18px;
    }
}


@media (min-width: 769px) {
    .site-header .hamburger-menu {
        display: none; /* Explicitly hidden on desktop */
    }
}