/* Responsive CSS - Mobile Compatibility */

/* Mobile First Approach - Base styles for mobile */
@media (max-width: 767.98px) {   
    /* Complete removal of all horizontal spacing */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important; 
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Remove all container padding on mobile */
    .container,
    .container-fluid,
    .container-lg,
    .container-xl {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100vw !important;
    }
    
    /* Remove Bootstrap row gutters */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    .col-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3,
    .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8,
    .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto,
    .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4,
    .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
    .col-md-10, .col-md-11, .col-md-12, .col-md-auto,
    .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4,
    .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
    .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto,
    .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4,
    .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9,
    .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* Header - full width without spacing */
    .header-main {
        padding: 15px 10px !important;
        margin: 0 !important;
        width: 100vw !important;
    }
    
    /* Canvas header - full width */
    .canvas-header-main {
        padding: 15px 10px !important;
        margin: 0 !important;
        width: 100vw !important;
    }
    
    /* Slider section - full width */
    .slider-section {
        margin: 0 !important;
        padding: 0 !important;
        top: 0 !important;
        width: 100vw !important;
        height: 250px !important;
    }
    
    /* Owl carousel and slider items - mobile optimized */
    .slider-carousel {
        width: 100vw !important;
        height: 300px !important;
        overflow: hidden !important;
    }
    
    .slider-item {
        width: 100vw !important;
        height: 250px !important;
        background-size: cover !important;
        background-position: center !important;
        overflow: hidden !important;
    }
    
    .slider-item img {
        width: 100% !important;
        height: 300px !important;
        object-fit: cover !important;
    }
    
    .slider-content {
        position: relative !important;
        left: 20px !important;
        padding: 20px !important;
    }
    
    .slider-content h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .slider-content p {
        font-size: 0.9rem !important;
        max-width: 90% !important;
    }
    
    /* Owl carousel navigation - vertically centered */
    .owl-nav button { 
        top: 65% !important;  
    }
     
    .owl-nav button.owl-prev {
        right: 60px !important;
        left: auto !important;
    }
    
    .owl-nav button.owl-next {
        right: 10px !important;
        left: auto !important;
    }
    .bg-design{
        background-size: contain;
        padding: 0px !important;
    }
     
    /* All sections - full width */
    .product-banner-section, 
    .stats-section {
        margin: 0 !important;
        margin-top: 60px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100vw !important;
    }
     
    
    /* Products section container */
    .products-section .container {
        margin-top: 20px !important; 
        padding: 0 10px !important;
        margin: 0 !important;
        max-width: 100vw !important;
    }
    
    /* Media section container */
    .media-section .container {
        margin-top: 20px !important; 
        padding: 0 10px !important;
        margin: 0 !important;
        max-width: 100vw !important;
    }
    
    /* Stats section container */
    .stats-section .container {
        margin-top: 0px !important; 
        padding: 0 10px !important;
        margin: 0 !important;
        max-width: 100vw !important;
    }
    
    /* Footer - full width */
    .footer-section {
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
    }
    
    .footer-content {
        padding: 30px 10px !important;
        margin: 0 !important;
    }
    
    .footer-content .container-xl {
        padding: 0 10px !important;
        margin: 0 !important;
        max-width: 100vw !important;
    }
    
    /* Footer background - mobile solid color */
    .footer-bg {
        background-image: none !important;
        background-color: #db1222 !important;
    }

    .header-leaf-bg {
        width: 400px;
        right: -200px;
        top: -150px;
    }

    /* Hide social media group and divider on mobile */
    .header-social-group {
        display: none !important;
    }
    
    .header-divider {
        display: none !important;
    }
    
    /* Header adjustments for mobile */
    .header-main {
        padding: 15px 20px !important;
    }
    
    .header-logo {
        height: 80px !important;
    }
    
    /* Header navigation adjustments */
    .header-lang-search {
        gap: 10px !important;
    }
    
    .header-lang {
        font-size: 22px !important;
        margin-left: 5px;
    }
    
    .header-search-icon {
        font-size: 22px !important;
        margin-left: 5px;
    }
    
    .header-menu-btn {
        margin-left: 5px !important;
        font-size: 20px !important;
    }
    
    .header-menu-btn svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Canvas menu adjustments for mobile */
    .canvas-header-main {
        padding: 15px 20px !important;
    }
    
    .canvas-nav-menu {
        display: none !important;
    }
    
    .canvas-nav-link {
        font-size: 14px !important;
    }
    
    /* Slider section adjustments */
    .slider-section {
        margin-top: 0 !important;
        top: 0 !important;
    }
    
    /* Product banner adjustments */
    .product-banner-text {
        font-size: 24px !important;
        padding: 10px !important;
        line-height: 1.4 !important;
    }
    
    /* Products section adjustments */
    .products-title {
        font-size: 24px !important;
        margin-bottom: 20px !important;
    }
    
    .product-card-home {
        margin-bottom: 20px !important;
    }
    
    .product-name {
        font-size: 25px !important;
    }
    
    /* Media section adjustments */
    .media-title {
        font-size: 24px !important;
        margin-bottom: 20px !important;
    }
    
    /* Statistics section adjustments */
    .stat-card {
        margin-bottom: 20px !important;
        padding: 20px 15px !important;
    }
    
    .stat-content h4 {
        font-size: 16px !important;
    }
    
    /* Footer adjustments */
    .footer-content {
        padding: 30px 15px !important;
        text-align: center !important;
    }
    
    .footer-logo-section {
        text-align: center !important;
    }
    
    .footer-links-section {
        text-align: center !important;
    }
    
    .footer-contact-section {
        text-align: center !important;
    } 
    
    .footer-description {
        font-size: 15px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }
    
    .footer-title {
        font-size: 16px !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }
    
    .footer-links {
        text-align: center !important;
        list-style: none !important;
        padding: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px 20px !important;
    }
    
    .footer-links li {
        margin: 0 !important;
        text-align: center !important;
        display: inline-block !important;
    }
    
    .footer-links a {
        font-size: 15px !important;
        text-align: center !important;
    }
    
    /* Footer contact section - force override ALL Bootstrap classes */
    .footer-section .col-lg-3.col-md-12 {
        align-items: center !important;
        justify-content: center !important;
    }
    
    .footer-section .footer-contact-section {
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .footer-section .footer-contact-section .footer-title {
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    
    .footer-section .footer-contact-info {
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .footer-contact-info{
        gap: 0px !important;
    }
    
    .footer-section .contact-item {
        margin-bottom: 15px !important;
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .footer-section .contact-icon {
        display: none !important;
    }
    
    .footer-section .contact-icon i {
        color: white !important;
        font-size: 14px !important;
    }
    
    .footer-section .contact-text {
        font-size: 15px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        flex: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: white !important;
        display: block !important;
    }
    
    .footer-section .contact-text strong {
        color: white !important;
        display: block !important;
        margin-bottom: 3px !important;
        font-weight: bold !important;
    }
    
    .footer-divider {
        text-align: center !important;
    }
    
    .copyright-text {
        text-align: center !important;
    }
    
    /* Canvas menu content adjustments */
    .ios-card {
        margin-bottom: 20px !important;
    }
    
    .ios-card .card-content h5 {
        font-size: 16px !important;
    }
    
    .ios-card .card-content p {
        font-size: 13px !important;
    }
    
    /* Contact form adjustments */
    .contact-form-title {
        font-size: 18px !important;
        margin-bottom: 20px !important;
    }
    
    .contact-form .form-control {
        font-size: 14px !important;
        padding: 12px 15px !important;
    }
    
    .contact-submit-btn {
        font-size: 14px !important;
        padding: 12px 25px !important;
    }
    
    /* Contact info adjustments */
    .contact-info-item { 
        margin-bottom: 20px !important;
    }
    
    .contact-info-icon {
        
    background: linear-gradient(135deg, #c41e3a 0%, #a01729 100%);
    display: flex
;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex
;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    }
    .bg-design-iletisim{
        background-image:none !important; 
    }
    .bg-design-iletisim .container-xxl{
        top: 80px;
        padding-bottom: 50px;
        position: relative;
    }
    .contact-info-icon i {
        font-size: 20px !important;
    }
    
    .contact-info-content p {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
    
    /* Canvas Menu Mobile Styles */
    .canvas-menu {
        background-image: none !important;
        background-color: white !important;
    }
    
    .canvas-menu .canvas-header {
        background: white !important;
    }
    
    .canvas-menu .canvas-content {
        background: white !important;
    }
    
    /* Canvas Contact Menu Mobile Styles */
    #contactMenu .contact-info-item { 
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    #contactMenu .contact-info-icon {
        display: none !important;
    }
    
    #contactMenu .contact-info-content {
        font-size: 12px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        flex: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #333 !important;
        display: block !important;
    }
    
    #contactMenu .contact-info-content p {
        color: #333 !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }
    .overlay-menu.active {
        visibility: hidden;
        display: none !important;
    }
    .canvas-header-menu-btn{
        margin: 0px;
        margin-left: 15px;
    }
}