:root {
 	--color-white: #FFFFFF;
 	--color-dark: #2D3748;
 	--color-gray: #4A5568;
 	--color-light-gray: #718096;
 	--color-cornflowerblue-100: #2296f3;
 	--color-cornflowerblue-200: rgba(34, 150, 243, 0.5);
 	--color-cornflowerblue-300: rgba(34, 150, 243, 0.1);
 	--color-gold-200: rgba(255, 202, 13, 0.85);
 	--color-whitesmoke: #f4f6f8;
 	--color-darkslategray-100: #3f3d56;
 	--color-darkslategray-300: rgba(63, 61, 86, 0.85);
 	--color-gray-100: #0a142f;
 	--color-lightgray: rgba(205, 214, 218, 0.25);
 	--color-lightslategray: #9d96a8;
 	--color-lightsteelblue: rgba(147, 169, 187, 0.1);
 	--color-black: #000;

 	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
 	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
 	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

 	--font-poppins: "Poppins", sans-serif;
 	--font-inter: "Inter", sans-serif;
 }
 body {
    margin: 0;
    padding: 0;
}

.landing-page {
    width: 100%;
    max-width: 100vw; /* Ensures it never exceeds viewport width */
}

/* Hamburger Menu Icon - ADD THIS */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
    padding: 5px;
}

.hamburger span {
    width: 28px;
    height: 3px;
    background-color: #333;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Hamburger Animation */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    display: block;
    opacity: 1;
}

/* Update your existing navbar for mobile */
@media screen and (max-width: 768px) {
    .navbar {
        width: calc(100% - 40px);
        padding: 15px 20px;
    }

    /* Show hamburger on mobile */
    .hamburger {
        display: flex;
    }

    /* Hide desktop menu and convert to slide-in */
    .home-parent {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background-color: var(--color-white);
        flex-direction: column;
        align-items: flex-start;
        padding: 100px 30px 30px;
        gap: 0;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        z-index: 999;
    }

    .home-parent.active {
        right: 0;
    }

    .home, .about, .services {
        width: 100%;
        padding: 15px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .services-parent {
        width: 100%;
        padding: 15px 0;
        border-bottom: 1px solid #f0f0f0;
        justify-content: space-between;
    }

    /* Keep login button visible */
    .component-8 {
        display: none; /* Hide desktop login button */
    }

    /* Add login to mobile menu */
    .home-parent::after {
        content: '';
        margin-top: 20px;
    }
}

@media screen and (max-width: 480px) {
    .navbar {
        width: calc(100% - 30px);
        top: 20px;
        padding: 12px 15px;
    }

    .logo-big-2-icon {
        height: 35px;
    }

    .home-parent {
        width: 260px;
    }
}   

:root {
  	
  	/* Common Style Variables */
  	
  	/* Color */
  	--color-black: #000;
  	--color-cornflowerblue-100: #2296f3;
  	--color-cornflowerblue-200: rgba(34, 150, 243, 0.5);
  	--color-cornflowerblue-300: rgba(34, 150, 243, 0.1);
  	--color-darkslategray-100: #3f3d56;
  	--color-darkslategray-200: rgba(63, 61, 86, 0.2);
  	--color-darkslategray-300: rgba(63, 61, 86, 0.85);
  	--color-gainsboro: rgba(217, 217, 217, 0.3);
  	--color-gold-100: #ffca0d;
  	--color-gold-200: rgba(255, 202, 13, 0.85);
  	--color-gold-300: rgba(255, 202, 13, 0.2);
  	--color-gray-100: #0a142f;
  	--color-gray-200: rgba(255, 255, 255, 0.1);
  	--color-lightgray: rgba(205, 214, 218, 0.25);
  	--color-lightskyblue: #aadaff;
  	--color-lightslategray: #9d96a8;
  	--color-lightsteelblue: rgba(147, 169, 187, 0.1);
  	--color-white: #fff;
  	--color-whitesmoke: #f4f6f8;
  	
  	/* Gap */
  	--gap-10: 10px;
  	--gap-11: 11px;
  	--gap-15: 15px;
  	--gap-16: 16px;
  	--gap-20: 20px;
  	--gap-24: 24px;
  	--gap-52: 52px;
  	
  	/* Padding */
  	--padding-0: 0px;
  	--padding-3: 3px;
  	--padding-40: 40px;
  	--padding-48: 48px;
  	--padding-52: 52px;
  	--padding-60: 60px;
  	--padding-80: 80px;
  	--padding-17_6: 17.6px;
  	
  	/* BorderRadius */
  	--br-4: 4px;
  	--br-6: 6px;
  	--br-8: 8px;
  	--br-24: 24px;
  	--br-100: 100px;
  	
  	/* Font */
  	--font-inter: Inter;
  	--font-poppins: Poppins;
  	--font-qualy-neue: Qualy Neue;
  	
  	/* FontSize */
  	--fs-12: 12px;
  	--fs-16: 16px;
  	--fs-20: 20px;
  	--fs-24: 24px;
  	--fs-28: 28px;
  	--fs-30: 30px;
  	--fs-40: 40px;
  	--fs-48: 48px;
  	
  	/* WidthHeights */
  	--height-14: 14px;
  	--height-40: 40px;
  	--height-48: 48px;
  	--width-14: 14px;
  	--width-24: 24px;
  	--width-40: 40px;
  	--width-48: 48px;
  	--width-408: 408px;
  	--width-1120: 1120px;
  	
  	/* LineHeights */
  	--lh-20: 20px;
  	--lh-24: 24px;
  	--lh-26: 26px;
  	--lh-28: 28px;
  	--lh-36: 36px;
  	--lh-60: 60px;
  	
  	/* LetterSpacings */
  	--ls-0_25: 0.25px;
  	
  	/* Opacities */
  	--opacity-0_5: 0.5;
  	
}