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

html {
    overflow-x: hidden;
    max-width: 100%;
    
}

body {
    background-color: #ffffff; /* Your actual page background */
    max-width: 2048px;
    margin: 0 auto;           /* This is the magic: centers the body horizontally */
    
    /* Security for your "Bow" cards and floating Navbar */
    overflow-x: hidden;
    position: relative; 
    
    /* Ensures the body takes up at least the full height of the screen */
    min-height: 100vh;
    box-shadow: 0 0 50px rgba(0,0,0,0.05); /* Optional: subtle shadow to define the page edges */
}
.by{
    font-size: 10px;
    color: black !important;
    font-weight: 400;
}
/* Navbar Background and Height */
.navbar {
    width: 70%;
    background-color: #64b5f6;
    border-bottom: 1px solid #eaeaea;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    padding: 10px 40px;
    /* Increased horizontal padding for breathing room */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border-radius: 8px;

    /* This now targets the logo, tabs, and button directly */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Ensure the container isn't trapping the items */
.nav-container {
    display: contents;
    /* This "dissolves" the container so its children are treated as direct children of .navbar */
}

/* Flex Container to Center Everything */

/* Logo Styling */
.nav-logo {
    display: flex;

    /* Vertical centering (cross-axis) */
    align-items: center;

    /* Horizontal centering (main-axis) */
    justify-content: center;

    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: bold;

    /* Ensuring the container has enough height to show the centering */
    height: 100%;
}

.nav-logo img {
    height: 30px;
    width: 30px;

    /* Remove the old border and padding */
    border: none;
    padding: 0;

    /* This creates a 2px "outline" that follows the shape of your image */

}

.nav-logo span {
    color: white;
    font-size: 12px;

}

/* Tabs List Styling */
.nav-tabs {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.nav-tabs a {
    text-decoration: none;
    color: white;
    font-weight: 400;
    transition: color 0.3s ease;
}

/* Hover Effect */
.nav-tabs a {
    text-decoration: none;
    color: white;
    /* Changed to white for better visibility on blue */
    font-weight: 500;
    position: relative;
    /* Required for the absolute line to anchor here */
    padding-bottom: 5px;
    /* Space for the underline */
    transition: color 0.3s ease;
}

/* Create the underline using ::after */
.nav-tabs a::after {
    content: '';
    position: absolute;
    width: 0;
    /* Start with no width */
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: white;
    transition: width 0.3s ease;
    /* This creates the growth animation */
}

/* Trigger the animation on hover */


.nav-tabs a:hover::after {
    width: 100%;
    /* Grow to full width on hover */
}

.nav-button button {
    background: white;
    padding: 5px 10px;
    font-weight: 500;
    border-radius: 12px;

    /* FIX: Set a 2px transparent border here */
    border: 2px solid transparent;

    /* Smooth transition for the colors */
    transition: all 0.3s ease;
    cursor: pointer;
}

.nav-button button:hover {
    background-color: #64b5f6;
    /* Now only the color changes, not the size */
    border: 2px solid white;
    color: white;
}

.homemain {
    display: flex;

    align-items: center;
    justify-content: space-around;
    padding: 20px;
    height: 70vh;
}

.homemain .soci {
    flex: 1;
    padding: 1em;

    display: flex;
    flex-direction: column;

    /* Vertical alignment (Top) */
    justify-content: flex-start;

    /* Horizontal alignment (Left) */
    align-items: flex-start;

    img {
        height: 20px;
        width: 20px;
        margin-left: 5px;
        margin-bottom: 20px;

        /* 1. Set the initial transition speed and style */
        transition: transform 0.3s ease;
        cursor: pointer;
    }

    img:hover {
        /* 2. Scale the image up (1.5 = 150% size) */
        transform: scale(1.5);
    }

    span {

        writing-mode: vertical-lr;
        transform: rotate(180deg);
        display: inline-block;
        letter-spacing: 5px;
        font-weight: 100;
        /* Optional: If the rotation makes it look 'off-center', 
           use margin-left to nudge it. */
        margin-left: 2px;
    }
}


.homemain .tagline {
    padding: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 7;
}

/* 1. The Wrapper that keeps the spans together */
.title-group {
    position: relative;
    /* Essential for positioning the 2nd span */
    display: inline-block;
    text-align: center;


}

.homemain .tagline span:first-of-type {
    font-size: 4rem;
    font-weight: 800;
    color: black;

    text-align: center;
    line-height: .8;
    margin-bottom: 0;
    /* Removed margin to prevent gap */
}

/* 2. The Tilted Side Span */
.homemain .tagline span:nth-of-type(2) {
    position: absolute;

    /* Position it to the top-right of the first span */
    bottom: -80px;
    right: 1em;
    font-family: 'borel';
    font-size: 1.6rem;
    color: #64b5f6;
    /* Darker color so it's visible */

    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    line-height: .9;
    /* The Tilt */
    transform: rotate(-15deg);

    /* Keeps it from wrapping */
    white-space: nowrap;
}

.homemain .tagline .nee {
    color: #F064B5 !important;
    /* Maybe a highlight yellow? */

}

.waved-container {
    width: 100%;
    margin-top: 3em;
    min-height: 10vh;
    background-color: #64b4f630;
    color: #349EF3;


    /* Apply the initial clip-path */
    clip-path: polygon(0% 15%, 15% 5%, 30% 15%, 50% 5%, 70% 15%, 85% 5%, 100% 15%, 100% 100%, 0% 100%);

    /* Link the animation */
    animation: wave-move 4s ease-in-out infinite alternate;

    p {
        color: black;
        font-size: 12px;
    }
}

@keyframes wave-move {
    0% {
        clip-path: polygon(0% 15%, 15% 5%, 30% 15%, 50% 5%, 70% 15%, 85% 5%, 100% 15%, 100% 100%, 0% 100%);
    }

    100% {
        /* Shift the peaks and valleys slightly */
        clip-path: polygon(0% 5%, 20% 15%, 40% 5%, 60% 15%, 80% 5%, 90% 15%, 100% 5%, 100% 100%, 0% 100%);
    }
}

.content {
    padding: 3rem;

    text-align: center;
}


.folder-wrapper {
    margin: 0;
    width: 100%;
    height: 600px;
    display: flex;
    background-color: #64b4f630;
    justify-content: center;
    align-items: end;
    padding-bottom: 5em;
    perspective: 1000px;
    /* Adds 3D depth */
}

.folder-body {
    position: relative;
    width: 520px;
    height: 300px;
    background: #d2ecff;
    /* Light inner folder color */
    backdrop-filter: blur(12px);
    border: solid #72befc26 1px;
    -webkit-backdrop-filter: blur(12px);
    border-radius: 15px 15px 15px 15px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Base Card Styling */
.f-card {
    position: absolute;
    width: 480px;
    height: 230px;
    left: 20px;
    bottom: 20px;
    background: white;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: bottom center;

    span {
        font-size: 2em;
        font-weight: 500;
        color: black;
    }

    span:nth-of-type(2) {
        font-size: 1em;
        font-weight: 500;
        color: rgb(52, 52, 52);
        margin-right: 7em;
    }
}

/* Random Initial Stacked Positions */
.feature-1 {
    background: rgba(255, 251, 0, 0.315) !important;
    /* 40% opacity of your blue */

    /* 2. The Blur: This frosts the cards behind the folder */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transform: rotate(-3deg) translateY(0);
    z-index: 3;
}

.feature-2 {
    background: rgba(255, 0, 162, 0.315) !important ;
    /* 40% opacity of your blue */

    /* 2. The Blur: This frosts the cards behind the folder */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: rotate(2deg) translateY(5px);
    z-index: 2;
}

.feature-3 {
    background: rgba(89, 255, 0, 0.315) !important;
    /* 40% opacity of your blue */

    /* 2. The Blur: This frosts the cards behind the folder */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: rotate(-1deg) translateY(10px);
    z-index: 1;
}

.chip {
    width: 40px;
    height: 30px;
    background: white;
    border-radius: 4px;
    margin-bottom: 10px;
    opacity: .8;
}

/* Folder Front (The "Pocket") */
.folder-front {
    position: absolute;
    bottom: 0;
    width: 105%;
    height: 140px;
    z-index: 10;
    display: flex;
    padding: 20px;
    align-items: flex-end;

    /* 1. Translucency: Use RGBA instead of a hex code */
    background: rgba(35, 130, 208, 0.8);
    /* 40% opacity of your blue */

    /* 2. The Blur: This frosts the cards behind the folder */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Required for Safari support */

    /* 3. The Glass Shine: A subtle light border makes the edge look like glass */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 5px 40px 15px 15px;
    transform: skewX(10deg) translateX(-10px);

    /* 4. Soft Shadow: One deep shadow to give it lift */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);

    span {
        font-size: 1.3em;
        font-weight: 600;
        color: white;
    }
}

/* THE SCATTER ANIMATION */
.folder-body:hover .feature-1 {
    transform: translate(-420px, -150px) rotate(-15deg);
}

.folder-body:hover .feature-2 {
    transform: translate(0, -180px) rotate(0deg);
}

.folder-body:hover .feature-3 {
    transform: translate(420px, -150px) rotate(15deg);
}


/* --- Optimized Bow Section --- */
.stage {
    width: 100%;
    height: 700px;
    perspective: 2000px;
    /* Increased for smoother 3D */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    overflow: hidden;
    position: relative;
    padding-top: 50px;
}

.bow-container {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.center-text {
    position: absolute;
    /* This centers the div itself within the .stage */
    bottom: -20px;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Dimensions to fit your cut.png */
    width: 300px;
    /* Adjust based on your image aspect ratio */
    height: 150px;
    /* Adjust based on your image aspect ratio */

    /* Background Image Setup */
    background-image: url('cut.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    /* Centering the Text inside the Image */
    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 5;
    /* Behind the very front cards, but above the stage */
    font-family: 'borel', cursive;
    font-size: 2rem;
    color: #349EF3;
    /* Or white, depending on cut.png color */
    font-weight: 600;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
}

.card {
    position: absolute;
    width: 280px;
    height: 380px;
    left: 50%;
    top: 10%;
    /* Lifted up slightly */
    margin-left: -140px;
    background: #ffffff82;
    backdrop-filter: blur(.2px);
    border-radius: 24px;
    border: 1px solid #e4e0e0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backface-visibility: hidden;
    /* We move the origin further down to make the "Bow" flatter */
    transform-origin: center 900px;
    transition: box-shadow 0.3s ease;
}


.card:hover {
    box-shadow: 0 20px 40px rgba(100, 181, 246, 0.3);
}

.card img {
    margin-top: 10px;
    margin-left: 00px;
    width: 100%;
    height: 70%;
    object-fit: contain;
}

.card-content {
    position: absolute;
    bottom: 0;
    padding: 25px 20px;

    width: 100%;

}

i {
    margin-right: 10px;
}

.bagg {
    position: absolute;
    width: 100%;
    height: 110%;
    margin: 0;

    background-color: #ffffff;
    opacity: 0.1;
    background: radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent) 20px 20px, linear-gradient(#349EF3 1.6px, transparent 1.6px) 0 -0.8px, linear-gradient(90deg, #349EF3 1.6px, #ffffff 1.6px) -0.8px 0;
    background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;
}


/* General Footer Styling */
.site-footer {
    background-color: white;
    margin-top: 3em;
    padding: 60px 20px 30px;
    border-top: solid rgb(245, 245, 245) 1px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Responsive Grid */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile: 1 column */
    gap: 40px;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        /* Desktop: 4 columns */
    }
}

/* Typography */
.footer-logo {

    font-size: 1.5rem;
    margin-bottom: 15px;
}

.footer-logo span {
    color: #349EF3;
}

.footer-column h3 {

    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* Links & Lists */
.footer-links,
.contact-list {
    list-style: none;
    padding: 0;
}

.footer-links li,
.contact-list li {
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.footer-links a,
.contact-list a {

    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #349EF3;
}

/* Download Buttons */
.download-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-download {
    background: #000;
    border: 1px solid #374151;
    color: #fff;
    padding: 8px 15px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.8rem;
    text-align: center;
}

.qr-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* This centers the 'Scan to Mobile' text AND the QR box */
    text-align: center;
}

/* QR Code Section */
.qr-wrapper {
    background: #fff;
    padding: 12px;
    /* Increased slightly for better visual balance */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centers vertically in a column */
    align-items: center;
    /* Centers horizontally in a column */
    border-radius: 8px;

    /* Ensures the wrapper itself is centered if it's inside a larger flex/grid container */
    margin: 0 auto;

    /* Optional: gives it a consistent size if the QR image is small */
    min-width: 120px;
    text-align: center;
}

.qr-wrapper img {
    display: block;
    max-width: 50%;
    /* Prevents the image from overflowing */
    height: auto;
}

.qr-caption {
    font-size: 0.75rem;
    margin-top: 8px;


}

/* Bottom Bar */
.footer-bottom {
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid #1f2937;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    font-size: 0.8rem;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.special-links a {
    margin-left: 20px;
    color: #9ca3af;
    text-decoration: none;
}

.special-links a:hover {
    color: black;
}

.reels-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

.reels-header h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.reels-header p {
    color: #666;
    margin-bottom: 40px;
}

.reels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.reel-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.reel-card:hover {
    transform: translateY(-10px);
}

.reel-card iframe {
    width: 100%;
    height: 450px; /* Explicit height often helps Instagram's scripts initialize */
    aspect-ratio: 9 / 16; 
    border: none;
    display: block; /* Removes any tiny bottom spacing gaps */
}

.reel-info {
    padding: 15px;
    border-top: 1px solid #eee;
}

.reel-info h3 {
    font-size: 1.1rem;
    margin: 0;
    color: #333;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .reels-grid {
        display: flex; /* Switch from grid to flex for easy horizontal alignment */
        flex-wrap: nowrap; /* Prevent items from dropping to the next line */
        overflow-x: auto; /* Enable horizontal scroll */
        scroll-snap-type: x mandatory; /* Makes the cards "snap" into place */
        gap: 15px;
        padding: 10px 20px 30px 20px; /* Extra bottom padding for the scrollbar */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
    }

    .reel-card {
        flex: 0 0 85%; /* Shows 85% of one card so the next one is visible (peek effect) */
        scroll-snap-align: center; /* Snaps the card to the middle of the screen */
        min-width: 280px;
    }

    .reels-header h2 {
        font-size: 1.8rem;
    }

    /* Optional: Hide scrollbar for a cleaner look, or style it */
    .reels-grid::-webkit-scrollbar {
        height: 4px;
    }
    .reels-grid::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }
}