/* =========================================
   UPDATED SERVICES GRID STYLES (En/Fr)
   ========================================= */ 
/* Uniform Grid System */
#links-list .row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 30px;
    /* Consistent vertical spacing */
} 
#links-list .col-md-4 {
    display: flex;
    flex-direction: column;
    margin-top: 30px !important;
    /* Normalize top margin */
} 
/* Unified Card Container (Photo & Video) */
#links-list a.card-hover,
/* If <a> has class */
#links-list .card-hover,
/* If <div> has class */
#links-list .video-card {
    display: block;
    width: 100%;
    height: 100% !important;
    /* Override any inline styles */
    min-height: 400px;
    /* Taller, premium aspect ratio */
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    /* Subtle shadow */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    background-color: #000;
    /* Dark bg for loading/gaps */
    text-decoration: none;
} 
/* Hover Effect: Lift & Glow */
#links-list a.card-hover:hover,
#links-list .card-hover:hover,
#links-list .video-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(251, 180, 47, 0.15);
    /* Soft gold glow */
} 
/* Image & Video Filling */
#links-list .card-hover img,
#links-list .video-container video,
#links-list .video-container {
    width: 100%;
    height: 100% !important;
    /* Override responsive-fixes.css global reset */
    object-fit: cover !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: transform 0.8s ease;
} 
/* Image Zoom on Hover */
#links-list .card-hover:hover img,
#links-list .video-card:hover video {
    transform: scale(1.08);
} 
/* Gradient Overlay for Text Readability */
#links-list .card-overlay,
#links-list .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
    padding: 120px 25px 25px 25px;
    /* Large top padding for gradient fade */
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
} 
/* Typography */
#links-list .card-overlay p,
#links-list .card-content p {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
    opacity: 0.95;
    transform: translateY(5px);
    transition: transform 0.4s ease, opacity 0.4s ease;
    text-align: center;
    font-family: 'Josefin Sans', sans-serif;
} 
/* Lift text slightly on hover */
#links-list .card-hover:hover p,
#links-list .video-card:hover p {
    transform: translateY(0);
    opacity: 1;
    color: #FBB42F;
    /* Gold tint on hover */
} 
/* Responsive Adjustments */
@media (max-width: 768px) {
    #links-list .col-md-4 {
        margin-top: 20px !important;
    } 
    #links-list a.card-link-wrapper,
    #links-list .card-hover,
    #links-list .video-card {
        min-height: 300px;
        /* Slightly shorter on mobile */
    }
} 
/* =========================================
   WEBSITE CREATION PORTFOLIO FIXES
   (For Creation-Site-Web-marrakech.html)
   ========================================= */ 
/* Card Styling Override */
#cardsContainer .project-card,
#cardsContainer .en-project-card {
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s ease !important;
    background: #fff !important;
    overflow: hidden;
} 
/* Hover Effect: Premium Lift */
#cardsContainer .project-card:hover,
#cardsContainer .en-project-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(251, 180, 47, 0.2) !important;
    /* Gold shadow */
} 
/* Image Container */
#cardsContainer .image-container {
    border-radius: 12px !important;
    margin: 10px 10px 0 10px !important;
    height: 320px !important;
    /* Slight adjust */
    position: relative;
    overflow: hidden !important;
    background-color: #f7f7f7;
} 
/* Ensure Scroll Effect works nicely */
#cardsContainer .image-container img {
    width: 100%;
    /* Transition controlled by scroll-on-hover class usually, but enforce smooth here */
    transition: transform 3s ease-in-out !important;
} 
/* Title Styling */
#cardsContainer .card-body h5 {
    color: #2d2b6d !important;
    font-weight: 700 !important;
    margin-top: 10px !important;
    transition: color 0.3s ease;
} 
#cardsContainer .project-card:hover .card-body h5,
#cardsContainer .en-project-card:hover .card-body h5 {
    color: #fbb42f !important;
    /* Turn gold on hover */
} 
/* Fix spacing on Special "Your Project Here" Card */
#cardsContainer .project-card.d-flex {
    background: linear-gradient(145deg, #ffffff, #fdfdfd) !important;
} 
/* =========================================
   SERVICE ICONS GRID (Website Creation Page)
   ========================================= */
.service-card {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border: 1px solid transparent !important;
    background: #fff;
} 
.service-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(251, 180, 47, 0.2) !important;
    /* Gold Glow */
    border-color: rgba(251, 180, 47, 0.3) !important;
} 
/* Optional: Icon animation */
.service-card:hover .card-icon img {
    transform: scale(1.1);
    transition: transform 0.4s ease;
} 
.service-card:hover h3 {
    color: #fbb42f !important;
    transition: color 0.3s ease;
}
/* =========================================
   MODAL STYLES (Fix for broken/visible modal)
   ========================================= */ 
#imageModal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 99999; /* High z-index to sit on top of everything */
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
} 
/* Modal Content (Image) */
#imageModal .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 1200px;
    background-color: transparent;
    border: none;
} 
#imageModal .modal-content img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
} 
/* The Close Button */
#imageModal .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    opacity: 0.8;
    cursor: pointer;
    z-index: 100000;
} 
#imageModal .close:hover,
#imageModal .close:focus {
    color: #fbb42f; /* Gold on hover */
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
} 
/* Animation */
#imageModal .modal-content {
    animation-name: zoom;
    animation-duration: 0.6s;
} 
@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
} 
/* Responsive */
@media only screen and (max-width: 700px){
  #imageModal .modal-content {
    width: 95%;
  }
} 

/* =========================================
   INTRO CARD REDESIGN (Who We Are)
   ========================================= */ 
/* Use a more specific selector to allow overrides */
.intro-overlay .intro-card {
    border-radius: 12px !important;
    background: #fff;
    border: none !important;
    /* Add a subtle gold left border for a premium touch */
    border-left: 5px solid #FBB42F !important;
    /* Deep shadow to lift it off the image */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
    /* Optional: Slight transparency if you want glassmorphism (commented out for solid premium feel) */
    /* background: rgba(255, 255, 255, 0.98); */
    /* backdrop-filter: blur(10px); */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-left: -50px; /* Overlap logic - adjusting for desktop */
} 
/* Hover effect for the card */
.intro-overlay .intro-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(251, 180, 47, 0.2) !important;
} 
/* Typography styles */
.intro-overlay .intro-card h4 {
    font-size: 1.75rem;
    font-weight: 700 !important;
    color: #2d2b6d; /* Dark Blue */
    margin-bottom: 20px !important;
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: -0.5px;
} 
.intro-overlay .intro-card p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    font-weight: 400;
} 
/* Responsive Overlap Fixes */
@media (max-width: 1199px) {
    .intro-overlay .intro-card {
        margin-left: -30px;
    }
} 
@media (max-width: 991px) {
    .intro-overlay .intro-card {
        margin-left: 0;
        margin-top: -30px; /* Vertical overlap on tablet */
        width: 90%;
        margin-inline: auto;
    }
} 
@media (max-width: 767px) {
    .intro-overlay .intro-card {
        margin-top: 20px;
        width: 100%;
        border-left-width: 4px !important;
    }
    
    .intro-overlay .intro-card h4 {
        font-size: 1.5rem;
    }
} 

/* =========================================
   VISUAL UPDATES (Black text & SEO Card)
   ========================================= */ 
/* 1. Intro Card Title -> Pure Black */
.intro-overlay .intro-card h4 {
    color: #000000 !important; /* Was #2d2b6d blue */
} 
/* 2. SEO Description Card Styling (Premium Look) */
.seo-card {
    background: #fff;
    border: none;
    border-radius: 12px !important;
    /* Deep shadow to match intro card styling */
    box-shadow: 0 10px 40px rgba(0,0,0,0.08) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Optional: Subtle border top/bottom or left accent */
    border-top: 4px solid #FBB42F;
    position: relative;
    overflow: hidden;
} 
.seo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(251, 180, 47, 0.15) !important;
} 
.seo-card p {
    color: #444; /* Dark grey for readability, not harsh black */
    font-size: 1.15rem;
    line-height: 1.8;
    font-weight: 500; /* Slightly bolder for importance */
} 
.seo-card p strong {
    color: #000; /* Key terms in black */
    font-weight: 700;
}