/* ====================== [ Responsive Styles ] ====================== */

/* Logo Responsive Styles */
.navbar .logo img {
    height: 40px;
    width: auto;
    max-width: 100%;
    transition: all 0.3s ease;
}

/* Tablet and below */
@media screen and (max-width: 991px) {
    .navbar .logo img {
        height: 35px;
    }
    
    .navbar {
        top: 20px;
    }
    
    .navbar .container {
        padding: 0 20px;
    }
    
    /* Hide navigation links on mobile - they'll be in hamburger menu */
    .navbar .navbar-nav {
        display: none;
    }
    
    /* Make hamburger menu icon visible */
    .navbar .menu-icon {
        display: block;
    }
    
    /* Adjust top navigation spacing */
    .navbar .topnav .butn {
        padding: 8px 20px;
        font-size: 14px;
    }
    
    .navbar .topnav .butn .icon {
        margin-left: 5px;
    }
}

/* Mobile devices */
@media screen and (max-width: 767px) {
    .navbar .logo img {
        height: 30px;
    }
    
    .navbar {
        top: 15px;
        padding: 10px 0;
    }
    
    .navbar .container {
        padding: 0 15px;
    }
    
    /* Hide Join Now button on very small screens */
    .navbar .topnav .butn span:first-child {
        display: none;
    }
    
    .navbar .topnav .butn {
        padding: 8px 15px;
        min-width: auto;
    }
    
    /* Show only icon in button */
    .navbar .topnav .butn .icon {
        margin-left: 0;
    }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
    .navbar .logo img {
        height: 28px;
    }
    
    .navbar {
        top: 10px;
    }
    
    .navbar .container {
        padding: 0 10px;
    }
    
    /* Compact hamburger menu */
    .navbar .menu-icon {
        font-size: 20px;
    }
}

/* Header/Hero Section Responsive */
@media screen and (max-width: 991px) {
    .header-sa .caption h1 {
        font-size: 60px;
        letter-spacing: -2px;
    }
    
    .header-sa .imgs canvas {
        height: 300px !important;
        margin-top: 50px !important;
    }
}

@media screen and (max-width: 767px) {
    .header-sa {
        min-height: auto;
        padding: 100px 0 40px;
    }
    
    .header-sa .caption h1 {
        font-size: 40px;
        letter-spacing: -1px;
    }
    
    .header-sa .caption .butn {
        margin-top: 20px;
        font-size: 14px;
    }
    
    .header-sa .caption .text {
        margin-top: 40px;
    }
    
    .header-sa .caption .text p {
        font-size: 14px;
    }
    
    .header-sa .imgs {
        margin-top: 40px;
    }
    
    .header-sa .imgs canvas {
        height: 250px !important;
        margin-top: 30px !important;
        transform: scale(1) !important;
    }
    
    .header-sa .imgs .circle {
        width: 80px;
        height: 80px;
    }
}

@media screen and (max-width: 480px) {
    .header-sa .caption h1 {
        font-size: 32px;
    }
    
    .header-sa .imgs canvas {
        height: 200px !important;
    }
}

/* Hamburger Menu Responsive */
@media screen and (max-width: 767px) {
    .hamenu .logo img {
        height: 35px !important;
        width: auto !important;
    }
    
    .hamenu .menu-links {
        width: 100%;
    }
    
    .hamenu .cont-info {
        display: none;
    }
    
    .hamenu .main-menu .link {
        font-size: 30px;
    }
}

/* Navigation scroll state */
.navbar.nav-scroll .logo img {
    height: 35px;
}

@media screen and (max-width: 767px) {
    .navbar.nav-scroll .logo img {
        height: 28px;
    }
}

/* Ensure proper spacing for mobile */
@media screen and (max-width: 991px) {
    .section-padding {
        padding: 60px 0;
    }
}

@media screen and (max-width: 767px) {
    .section-padding {
        padding: 40px 0;
    }
}