:root {
 --brand-yellow: #FFC800;
 --brand-teal: #4DD0E1;
 --brand-black: #000000;
 --text-gray: #4a4a4a;
}
body {
	font-family: 'Gordita';
	font-style: normal;
	overflow-x: hidden;
	
}
/* --- Navbar Styling --- */
        .navbar {
	background: white;
}
.navbar-nav {
	border:1px solid #f6f6f6;
	border-radius:35px;
	padding:4px 16px;
}
.navbar-brand span {
	font-size: 1.5rem;
}
.nav-link {
	color: var(--brand-black) !important;
	font-weight: 500;
	padding: 0.5rem 1rem !important;
	transition: color 0.3s;
}
.nav-link:hover, .nav-link.active {
	color: var(--brand-yellow) !important;
}
/* --- Mega Menu Specifics --- */
        
        /* 1. Make the parent dropdown static so the child can be full width */
        .nav-item.dropdown.has-megamenu {
	position: static;
}
/* 2. The Mega Menu Box */
        .dropdown-menu.megamenu {
	width: 100%;
	margin-top: 0;
	border-radius: 0 0 15px 15px; /* Rounded bottom corners like the image */
	border: 1px solid #eee;
	border-top: none;
	padding: 2rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	border-top: 3px solid var(--brand-yellow); /* Yellow accent line on top */
	left:0;
}
/* 3. Mega Menu Columns */
        .megamenu h6 {
	
	font-size: 1rem;
	margin-bottom: 1rem;
	color: black;
}
.megamenu ul {
	list-style: none;
	padding: 0;
	margin-bottom: 2rem;
}
.megamenu ul li {
	margin-bottom: 0.5rem;
}
.megamenu ul li a {
	text-decoration: none;
	color: #555;
	font-size: 0.9rem;
	font-weight: 400;
	transition: color 0.2s, padding-left 0.2s;
	display: block;
}
.megamenu ul li a:hover {
	color: var(--brand-yellow); /* Hover color */
	padding-left: 5px; /* Subtle slide effect */
}

        /* 4. Animation for Dropdown */
        @media (min-width: 992px) {
			/* Logic to make submenu appear to the right on desktop */
  .dropdown-menu li {
    position: relative;
  }
  .dropdown-menu .submenu { 
    display: none;
    position: absolute;
    left: 100%; top: -7px;
  }
  .dropdown-menu>li:hover>.submenu {
    display: block;
  }
 .dropdown-menu.megamenu {
 display: block;
 opacity: 0;
 visibility: hidden;
 top: 110%; /* Start slightly lower */
 transition: all 0.3s ease;
}
            /* Show on hover logic handled by CSS or JS helper below */
            .nav-item.dropdown.has-megamenu:hover .dropdown-menu.megamenu {
 opacity: 1;
 visibility: visible;
 top: 100%; /* Slide up to position */
}
/* Targets any dropdown that IS NOT the megamenu */
    .navbar .dropdown:hover > .dropdown-menu:not(.megamenu) {
        /* Forces the menu to show and sets position */
        display: block;
        margin-top: 0; 
        
        /* Adds the animated fade-in effect */
        opacity: 1;
        transition: opacity 0.3s ease;
    }
    
    /* Initially hides the menu to allow the hover CSS to control visibility */
     .navbar .dropdown-menu:not(.megamenu) {
        opacity: 0;
        display: none; 
    }
	/* 💡 Third Level Positioning: Shifts the new menu horizontally */
    .dropdown-menu .dropdown-menu {
        margin-left: 0;
        margin-top: 0;
        left: 100%; /* Positions the 3rd level menu flush to the right of the 2nd level */
        top: 0;
    }

    /* 💡 Third Level Hover Control (Overrides Bootstrap's default hiding logic) */
    .dropdown-menu .dropdown:hover > .dropdown-menu {
        display: block; /* Forces the 3rd level menu to appear on hover */
        opacity: 1;
        visibility: visible;
    }
	
}

        /* Mobile specific adjustments */
        @media (max-width: 991px) {
 .dropdown-menu.megamenu {
 width: auto;
 margin: 0 15px;
}
 .megamenu .row > div {
 margin-bottom: 1.5rem;
}
 /* Make nested dropdowns visually distinct (indented) */
  .dropdown-menu .dropdown-menu {
    margin-left: 20px; 
    border-left: 2px solid #ddd;
    border-radius: 0;
    background-color: transparent; /* Or a light gray like #f8f9fa */
  }

  /* Fix Mega Menu on mobile to fit width */
  .navbar-nav .dropdown-menu.megamenu {
    position: static; /* Allows it to flow within the document */
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  
  /* Optional: Scrollable navbar if menu is very long */
  .navbar-collapse {
    max-height: 80vh;
    overflow-y: auto;
  }
}
/* --- Rest of Page Styling (From previous request) --- */
        .hero-section {
	background-color:#fece09;
	border-radius: 20px;
	padding: 3rem 2rem;
	margin-top:10px;
	position: relative;
}
.hero-img {
	max-width: 100%;
	height: auto;
	border-radius: 0 0 20px 20px;
}
.section-title {
	font-weight: 700;
	margin-bottom: 3rem;
	text-align: center;
	text-transform: uppercase;
}
.icon-circle {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	margin-bottom: 1rem;
	flex-shrink: 0;
}
.bg-icon-yellow {
	background-color: #FFE082;
	color: black;

}
.bg-icon-teal {
	background-color: #B2EBF2;
	color: black;
	
}
.why-us-card {
	background-color: #f5f5f5;
	border-radius: 15px;
	padding: 2rem;
	height: 100%;
	transition: transform 0.3s ease;
}
.why-us-card:hover {
	transform: translateY(-5px);

}
.why-us-icon {
	width: 50px;
	height: 50px;
	background-color: black;
	border-radius: 50%;
	color: var(--brand-yellow);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}
footer {
	background-color: #f4f4f4;
	padding:2rem 0;
	text-align: center;
}
footer a {
	text-decoration: none;
	color: #333;
	margin: 0 10px;
}
.about-right-banner-img {
	background-image:url(../images/about-banner-img.jpg);
	background-position:right bottom;
	background-repeat:no-repeat;
	min-height:419px;
	background-size:contain;
}
.f27{ font-size:27px; line-height:43px;}
p{font-size:16px; color:#000;}
.text-secondary{color:#000!important;}
.text-muted{color:#000!important;}
.footer-social-list{ list-style:none; margin-bottom:0;}
.footer-social-list li{ float:left;} 
.footer-social-list li a{ width:30px; height:30px; background:#000; display:flex; justify-content:center; align-items: center; border-radius:6px;}
footer a:hover{ color:#c32427;}
.footer-social-list li a:hover{ background:#c32427;}
.dropdown-menu span{font-size:12px;}
@media only screen and (min-width:320px) and (max-width: 640px) {
	.navbar-nav li{width:100%;}
	.navbar-nav { padding: 19px 16px; border-radius: 8px;}
	.dropdown-menu .dropdown-menu{margin-left:0;}
	}

