/**
 * Harabat Brand - Responsive Adjustments CSS
 */

/* Widescreen container offset */
@media (min-width: 1440px) {
    .container {
        max-width: 1320px;
    }
}

/* Tablet Landscape and Smaller (Medium viewports) */
@media (max-width: 991.98px) {
    .harabat-header {
        padding: 10px 0;
    }
    


    .brand-logo-img {
        height: 72px;
    }
    
    .navbar-toggler-custom {
        display: flex;
    }
    
    .harabat-hero {
        padding-top: 120px;
        padding-bottom: 60px;
        text-align: center;
    }
    
    .hero-title {
        font-size: 2.6rem;
    }
    
    .hero-composite-wrap {
        margin-top: 50px;
        height: 320px;
    }
    
    .hero-composition-box {
        max-width: 200px;
    }
    
    .hero-composition-box img {
        height: 150px;
    }
    
    .vitrine-card {
        min-height: auto;
    }
    
    .vitrine-img-wrap {
        height: 200px;
    }
    
    .story-img-composition {
        height: 350px;
        margin-top: 40px;
    }
    
    .frame-1 {
        height: 280px;
    }
    
    .frame-2 {
        height: 200px;
    }
    
    .cta-images-composition {
        margin-top: 30px;
        height: 200px;
    }
    
    .cta-img-box {
        width: 130px;
        height: 130px;
    }
    
    .product-detail-hero {
        margin-top: 40px;
    }
    
    .product-detail-name {
        font-size: 2.4rem;
        margin-top: 20px;
    }
    
    .detail-img-box {
        min-height: 300px;
    }
    
    .detail-img-box img {
        max-height: 300px;
    }
}

/* Small Screens (Mobile viewports) */
@media (max-width: 767.98px) {
    .hero-title {
        font-size: 2.2rem;
    }
    
    .story-headline {
        font-size: 2.2rem;
    }
    
    .cta-title {
        font-size: 1.8rem;
    }
    
    .editorial-story {
        padding: 50px 0;
    }
    
    .premium-divider {
        margin: 40px 0;
    }
    
    .feature-item-box {
        padding: 25px 15px;
    }
    
    .offcanvas {
        width: 85% !important;
    }
    
    .map-placeholder-box {
        height: 280px;
    }
}

/* Extra Small Screens (Micro viewports) */
@media (max-width: 360px) {
    .hero-title {
        font-size: 1.9rem;
    }
    
    .brand-logo-text {
        font-size: 1.4rem;
    }
    
    .cta-actions .btn {
        width: 100%;
    }
}