
/* GENERAL STYLES */

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* TOP HEADER STYLES */

.main-header-content {
    background-color: #11438d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    height: 110px;
    overflow: hidden;
}

/* LEFT LOGO */
.header-logo-left {
    background-color: #f1f1f1;
    padding: 0 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    /* angled cut design */
    clip-path: polygon(0 0, 75% 0, 95% 100%, 0% 100%);
}

.header-logo-left img {
    height: 95px;
    object-fit: contain;
}

/* CENTER TITLE (SANCHETI LOGO) */
.header-title {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-title img {
    height: 60px;
    object-fit: contain;
}

/* RIGHT CIRCULAR LOGOS */
.header-logos-right {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-right: 20px;
}

.header-logos-right img {
    height: 55px;
    width: 55px;
    object-fit: contain;
    border-radius: 50%;
    background: white;
    padding: 5px;
}

/* ===========================
   MOBILE RESPONSIVE HEADER
=========================== */

@media (max-width: 768px) {
    .main-header-content {
        flex-direction: column;
        height: auto;
        padding: 15px 0;
    }

    .header-logo-left {
        width: 100%;
        height: auto;
        clip-path: none;
        padding: 10px 0;
        background-color: white;
        box-shadow: none;
    }

    .header-logo-left img {
        height: 70px;
    }

    .header-title {
        justify-content: center;
        margin: 10px 0;
    }

    .header-title img {
        height: 40px;
    }

    .header-logos-right {
        gap: 10px;
        padding: 10px 0;
    }

    .header-logos-right img {
        height: 40px;
        width: 40px;
    }
}

/* NAVIGATION MENU STYLES */

.custom-menu-container {
    background-color: #2c3e50; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.custom-menu-container .navbar {
    padding: 0;
}

.custom-menu-container .nav-link {
    color: white !important;
    padding: 15px 18px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
}

.custom-menu-container .nav-link:hover,
.custom-menu-container .nav-item.dropdown.show > .nav-link {
    background-color: #0b263b; 
    color: #ffffff !important;
}

/* DROPDOWN */
.custom-menu-container .dropdown-menu {
    background-color: #2c3e50;
    border-radius: 0;
    border: none;
}

.custom-menu-container .dropdown-item {
    color: white !important;
    font-size: 15px;
    transition: background-color 0.3s;
}

.custom-menu-container .dropdown-item:hover {
    background-color: #0b263b;
}

/* RESPONSIVE NAVBAR */
@media (max-width: 991.98px) {
    .custom-menu-container .navbar-collapse {
        text-align: center;
        background-color: #2c3e50;
    }

    .custom-menu-container .nav-link {
        padding: 10px 15px;
    }
}


/* MARQUEE BANNER */

.marquee-banner {
    background-color: #f0f0f0;
    border-bottom: 5px solid #1a5e9f;
    overflow: hidden;
    white-space: nowrap;
    padding: 15px 0;
    font-family: Arial, sans-serif;
}

.marquee-content {
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    color: #001928;
    padding-left: 100%;
    animation: marquee-scroll 30s linear infinite;
}

.marquee-banner:hover .marquee-content {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

@media (max-width: 600px) {
    .marquee-content {
        font-size: 16px;
    }
}

/* MAIN CONTENT PLACEHOLDER */

.main-content-section {
    min-height: 400px;
    padding: 50px 20px;
    text-align: center;
}





