/* assets/css/homepage-style.css */

/* ============================================= */
/* 1. CSS Variables (Custom Properties)          */
/* ============================================= */

/* Main container */
.fortch-product-slider-section {
    position: relative;
    padding: 0 20px;
}

/* Header with title and buttons */
.fortch-slider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.fortch-slider-nav {
    display: flex;
    gap: 10px;
}

/* Navigation buttons - ensure they're visible */
.fortch-product-slider-section .fortch-swiper-button-next,
.fortch-product-slider-section .fortch-swiper-button-prev {
    position: static !important; /* Force override Swiper's absolute positioning */
    display: flex !important; /* Ensure display */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    background-color: var(--couleur-principale);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 50%; /* Optional rounded look */
    cursor: pointer;
    opacity: 1 !important; /* Force visible */
    visibility: visible !important; /* Force visible */
}

/* Arrow icons */
.fortch-product-slider-section .fortch-swiper-button-next::after,
.fortch-product-slider-section .fortch-swiper-button-prev::after {
    content: '' !important; /* Required for Swiper arrows */
    font-family: 'swiper-icons' !important; /* Required for default arrows */
    font-size: 20px;
    color: #fff !important;
    background-color: transparent !important; /* Remove your bg color if using default arrows */
}

/* Specific arrow characters if default ones aren't showing */
.fortch-product-slider-section .fortch-swiper-button-next::after {
    content: '❯' !important;
}
.fortch-product-slider-section .fortch-swiper-button-prev::after {
    content: '❮' !important; 
}

 @media (max-width: 768px) {
            .fortch-product-slider-section .fortch-swiper-button-next,
.fortch-product-slider-section .fortch-swiper-button-prev {
    width: 30px;
    height: 30px;}
    
    .fortch-product-slider-section .fortch-swiper-button-next::after,
.fortch-product-slider-section .fortch-swiper-button-prev::after {
  
    font-size: 15px;
   
}
}
/* ============================================= */
/* 2. General & Global Styles                    */
/* ============================================= */
.sfe-homepage-container {
    font-family: var(--sfe-font-primary);
    color: var(--texte-principal);
    line-height: 1.6;
}

.sfe-homepage-container h1,
.sfe-homepage-container h2 {
    font-family: var(--sfe-font-primary);
   
    margin-bottom: 1rem;
}

.sfe-slide-content-title{
    font-size: 22px;
    line-height: 45px;
}

.sfe-section-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 1rem;
}

/* ============================================= */
/* 3. Slider Section                             */
/* ============================================= */
.sfe-slider-section {
    width: 100%;
    height: 45vh; /* Full viewport height */
    position: relative;
    color: var(--couleur-texte-sur-principale);
    
}

.sfe-main-slider, .hero-swiper-slide {
    height: 100%;
    
}

.hero-swiper-slide {
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(30, 58, 95, 0.6); /* Overlay using main color */
}

.sfe-slide-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
    padding: 8px;
}

.sfe-slide-content-title {
    color: var(--couleur-texte-sur-principale);
   font-size: 45px;
    line-height: 45px;
    font-weight: 700;
}

.sfe-slide-content p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

/* Swiper Navigation & Pagination */
.sfe-main-slider .swiper-button-next,
.sfe-main-slider .swiper-button-prev {
    color: var(--couleur-secondaire);
    transition: opacity 0.3s ease;
}
.sfe-main-slider .swiper-button-next:hover,
.sfe-main-slider .swiper-button-prev:hover {
    opacity: 0.7;
}

.sfe-main-slider .swiper-pagination-bullet-active {
    background-color: var(--couleur-secondaire);
}


/* ============================================= */
/* 4. Buttons                                    */
/* ============================================= */
.sfe-btn {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    border-radius: var(--rayon-bordure);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.sfe-btn-primary {
    background-color: var(--couleur-principale);
    color: var(--couleur-texte-sur-principale);
    border-color: var(--couleur-principale);
}
.sfe-btn-primary:hover {
    background-color: transparent;
    border-color: var(--couleur-texte-sur-principale);
    color: var(--couleur-texte-sur-principale);
}

.sfe-btn-secondary {
    background-color: var(--couleur-secondaire);
    color: var(--couleur-texte-sur-secondaire);
    border-color: var(--couleur-secondaire);
}
.sfe-btn-secondary:hover {
    background-color: var(--couleur-principale);
    color: var(--couleur-texte-sur-principale);
    border-color: var(--couleur-principale);
}

/* ============================================= */
/* 5. Social Media Section                       */
/* ============================================= */
     /* Social section styling */
        .sfe-social-section {
           
            margin: 0 auto;
            padding: 0 20px;
            text-align: center;
             background-color: var(--couleur-principale);
        }
        
        
        .sfe-social-icons {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 50px;
            flex-wrap: wrap;
        }
        
        .sfe-social-icons a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #f0f0f0;
            color: #333;
            font-size: 24px;
            transition: all 0.3s ease;
            text-decoration: none;
        }
        
        .sfe-social-icons a:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        /* Individual icon colors on hover */
        .sfe-social-icons a[aria-label="Facebook"]:hover {
            background-color: #1877f2;
            color: white;
        }
        
        .sfe-social-icons a[aria-label="Twitter"]:hover {
            background-color: #1da1f2;
            color: white;
        }
        
        .sfe-social-icons a[aria-label="Instagram"]:hover {
            background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
            color: white;
        }
        
        .sfe-social-icons a[aria-label="LinkedIn"]:hover {
            background-color: #0077b5;
            color: white;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {

            .sfe-social-section {
                padding: 40px 20px;
            }
            
            .sfe-section-content h2 {
                font-size: 1.5rem;
            }
            
            .sfe-social-icons a {
                width: 50px;
                height: 50px;
                font-size: 20px;
            }
        }
        
        @media (max-width: 480px) {
            .sfe-social-icons {
                gap: 15px;
            }
            
            .sfe-social-icons a {
                width: 45px;
                height: 45px;
                font-size: 18px;
            }
            
            .sfe-btn {
   
    font-size: 12px;
  
}
        }

/* ============================================= */
/* 6. About Us Section                           */
/* ============================================= */
.sfe-about-section {
    background-color: var(--fond-principal);
}

.sfe-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.sfe-about-image img {
    width: 100%;
    height: auto;
    border-radius: var(--rayon-bordure);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.sfe-about-text h2 {
    margin-top: 0;
}

/* ============================================= */
/* 7. Responsive Design                          */
/* ============================================= */
@media (max-width: 768px) {
    .sfe-slide-content-title {
   font-size: 32px;
    line-height: 33px;
}
    .sfe-slide-content p {
        font-size: 1rem;
    }
    .sfe-about-grid {
        grid-template-columns: 1fr;
    }
    .sfe-about-image {
        order: -1; /* Move image to the top on mobile */
    }
    .sfe-section-content {
        padding: 2rem 1rem;
    }
}


     /* Logo section styling */
        .logo-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
            text-align: center;
        }
        
        .logo-section h2 {
            margin-bottom: 30px;
            color: #333;
            font-size: 2rem;
        }
        
        .logo-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }
        
        .logo-item {
            flex: 1;
            min-width: 150px;
            max-width: 200px;
            transition: transform 0.3s ease;
        }
        
        .logo-item:hover {
            transform: scale(1.05);
        }
        
        .logo-link {
            display: block;
            text-decoration: none;
            color: #333;
        }
        
        .logo-img {
            width: 100%;
            height: auto;
            object-fit: contain;
            filter: grayscale(100%);
            opacity: 0.7;
            transition: all 0.3s ease;
        }
        
        .logo-link:hover .logo-img {
            filter: grayscale(0%);
            opacity: 1;
        }
        
        .logo-caption {
            margin-top: 10px;
            font-weight: 600;
            font-size: 1rem;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .logo-item {
                min-width: 120px;
                max-width: 150px;
            }
            
            .logo-section h2 {
                font-size: 1.5rem;
            }
        }
        
        @media (max-width: 480px) {
            .logo-container {
                gap: 15px;
            }
            
            .logo-item {
                min-width: 100px;
                max-width: 120px;
            }
            
            .logo-caption {
                font-size: 0.8rem;
            }
        }