/* Responsive CSS for STMR Innovation - Mobile First Approach */



/* Base Mobile Styles */

@media (max-width: 768px) {

    /* Layout adjustments */

    .container {

        padding: 0 15px;

    }

    

    /* Typography adjustments */

    h1 {

        font-size: 28px;

    }

    

    h2 {

        font-size: 24px;

    }

    

    /* Navigation Mobile Styles */

    nav {

        padding: 10px 15px;

        position: relative;

        display: flex;

        justify-content: space-between;

        align-items: center;

        flex-wrap: wrap;

    }

    

    .nav-left {

        display: flex;

        align-items: center;

        z-index: 1001;

    }

    

    .nav-center {

        display: none;

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        background: #fff;

        box-shadow: 0 5px 15px rgba(0,0,0,0.1);

        z-index: 1000;

        width: 100%;

        overflow-y: auto;

        max-height: 80vh;

    }

    

    .nav-center.active {

        display: block;

    }

    

    #nav-links {

        display: flex;

        flex-direction: column;

        padding: 0;

        margin: 0;

        list-style: none;

    }

    

    #nav-links > li {

        width: 100%;

        margin: 0;

        border-bottom: 1px solid rgba(0,0,0,0.05);

    }

    

    #nav-links > li > a {

        padding: 15px;

        display: block;

        color: #333;

        text-decoration: none;

    }

    

    .dropdown {

        position: static;

        display: none;

        width: 100%;

        box-shadow: none;

        padding: 0;

        margin: 0;

        background: #f8f8f8;

    }

    

    .dropdown li {

        width: 100%;

        padding: 0;

        margin: 0;

    }

    

    .dropdown li a {

        padding: 12px 20px;

        display: block;

        color: #333;

        text-decoration: none;

    }

    

    .has-dropdown.active .dropdown {

        display: block;

    }

    

    .has-dropdown > a:after {

        content: '▼';

        margin-left: 5px;

        font-size: 12px;

    }

    

    .has-dropdown.active > a:after {

        content: '▲';

    }

    

    .submenu {

        position: static;

        display: none;

        width: 100%;

        box-shadow: none;

        background: #f0f0f0;

        padding: 0;

    }

    

    .submenu li a {

        padding: 12px 30px;

    }

    

    .hamburger {

        display: block;

        font-size: 24px;

        cursor: pointer;

        z-index: 1001;

        border: none;

        background: transparent;

    }

    

    .nav-right {

        display: flex;

        align-items: center;

        z-index: 1001;

    }

    

    /* Hide text in buttons on mobile */

    .btn-signin span, 

    .btn-dashboard span {

        display: none;

    }

}



/* Tablet styles */

@media (min-width: 769px) and (max-width: 1024px) {

    /* Layout adjustments */

    .container {

        padding: 0 20px;

    }

    

    /* Navigation */

    nav {

        padding: 15px 20px;

    }

}



/* Desktop styles */

@media (min-width: 1025px) {

    /* Layout */

    .container {

        max-width: 1200px;

        margin: 0 auto;

    }

    

    /* Hide mobile elements */

    .hamburger {

        display: none;

    }

    

    /* Navigation */

    nav {

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 15px 30px;

    }

    

    .nav-center {

        display: block;

    }

    

    #nav-links {

        display: flex;

        list-style: none;

        margin: 0;

        padding: 0;

    }

    

    #nav-links > li {

        position: relative;

        margin: 0 10px;

    }

    

    #nav-links > li > a {

        padding: 10px 15px;

        display: block;

        color: #333;

        text-decoration: none;

        transition: all 0.3s ease;

    }

    

    .dropdown {

        position: absolute;

        top: 100%;

        left: 0;

        display: none;

        background: #fff;

        min-width: 200px;

        box-shadow: 0 2px 10px rgba(0,0,0,0.1);

        border-radius: 4px;

        z-index: 1000;

        padding: 5px 0;

    }

    

    #nav-links > li:hover > .dropdown {

        display: block;

        animation: fadeIn 0.3s ease;

    }

    

    @keyframes fadeIn {

        from { opacity: 0; transform: translateY(10px); }

        to { opacity: 1; transform: translateY(0); }

    }

    

    .has-dropdown > a:after {

        content: '▼';

        margin-left: 5px;

        font-size: 10px;

    }

}



/* Large screens */

@media (min-width: 1400px) {

    .container {

        max-width: 1360px;

    }

    

    nav {

        padding: 20px 40px;

    }

}



/* Additional styles for modern navigation and hero integration */



/* Extra small devices (phones, 576px and down) */

@media (max-width: 576px) {

    .stmr-nav {

        padding: 10px 15px;

    }

    

    .stmr-nav .logo {

        font-size: 15px;

    }

    

    .stmr-nav .logo-img {

        height: 30px;

    }

    

    .hero-section {

        margin-top: -60px;

        padding-top: 80px;

    }

    

    

    .stmr-nav .btn-signin, 

    .stmr-nav .btn-dashboard {

        padding: 6px 10px;

        font-size: 0.85em;

    }

}



/* Small devices (tablets, 768px and down) */

@media (max-width: 768px) {

    .stmr-nav .nav-menu {

        max-width: 90%;

    }

    

    .slideshow-container {

        margin-top: 0;

    }

    

    /* Make dropdowns easier to use on touch devices */

    .stmr-nav .submenu li a {

        padding: 12px 18px;

    }

    

    .stmr-nav .dropdown-toggle::after {

        margin-left: 8px;

    }

}



/* Medium devices (tablets, between 768px and 992px) */

@media (min-width: 769px) and (max-width: 992px) {

    .stmr-nav .nav-menu > li > a {

        padding: 10px 12px;

        font-size: 0.95em;

    }

    

    .stmr-nav .btn {

        padding: 8px 15px;

    }

    

    .hero-section {

        margin-top: -70px;

        padding-top: 80px;

    }

}



/* Large devices (desktops, between 992px and 1200px) */

@media (min-width: 993px) and (max-width: 1200px) {

    .stmr-nav .nav-menu > li {

        margin: 0 3px;

    }

}



/* Hero section enhancements */

.hero-section {

    position: relative;

}



.hero-section::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 70px; /* Same as nav height */

    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);

    pointer-events: none;

    z-index: 2;

}



/* Fix for hero slider on all devices */

.slideshow-container {

    position: relative;

    z-index: 1;

}



/* Ensure nav stays on top of content */

.stmr-nav {

    z-index: 1050;

}