/* 
 * Shared CSS - Egypt Assistance Project
 * Contains reusable components, typography, and layout overrides.
 * 
 * Dependencies:
 * - colors.css (Defines CSS variables)
 * - Bootstrap 5 (Framework)
 */

/* =========================================
   1. Typography & Global Resets
   ========================================= */

body {
    font-family: 'Poppins', sans-serif;
    color: #333;
}

body p {
    font-size: 18px;
}

/* Section Titles (not banners) - use colors.css --color-dark-blue */
.section-title {
    color: var(--color-dark-blue);
    font-weight: 700;
    margin-bottom: 3rem;
    text-align: center;
    font-size: 50px;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 30px;
    }
}


/* Section headings (h2 display-5 etc. in content sections) */
section .section-heading,
h2.section-heading {
    color: var(--color-dark-blue) !important;
}

/* Subtitles: text under stats, card titles - use colors.css --color-darker-blue */
.sub-title {
    color: var(--color-darker-blue);
    font-weight: 500 !important;
    font-family: 'Patrick Hand', cursive;
    font-style: italic;
}

.experience-years {
    color: var(--color-darker-blue);
}

.stats-number {
    color: var(--color-dark-blue);
    font-weight: 500;
    font-size: 80px;
    line-height: 120%;
}

/* Stats labels (e.g. "Cases", "Partners", "Alarm Center", "Emergency Response") */
.stats-label,
.stat-label {
    color: var(--color-darker-blue) !important;
}

/* Card titles (service cards, feature cards, team member names) */
.card-title,
.card-feature h4,
.card-accent-left h5,
.team-member-name,
.service-title {
    color: var(--color-darker-blue) !important;
}


/* Text Colors (Semantic) */
.text-brand-blue { color: var(--color-blue) !important; }
.text-brand-dark-blue { color: var(--color-dark-blue) !important; }
.text-brand-darker-blue { color: var(--color-darker-blue) !important; }
.text-brand-red { color: var(--color-red) !important; }
.text-brand-gold { color: var(--color-gold) !important; }
.text-brand-white { color: var(--color-white) !important; }

/* =========================================
   2. Buttons
   ========================================= */

/* Primary Button (Blue) - use colors.css --color-blue */
.btn-blue, 
.btn-brand-primary {
    background-color: var(--color-blue);
    color: var(--color-white);
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem; /* rounded-3 */
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
}

.btn-blue:hover, 
.btn-brand-primary:hover {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Secondary Button (Red) */
.btn-red, 
.btn-brand-secondary {
    background-color: var(--color-red);
    color: var(--color-white);
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 0.25rem;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
}

.btn-red:hover, 
.btn-brand-secondary:hover {
    background-color: #c92a25; /* Darker red */
    color: var(--color-white);
}

/* =========================================
   3. Cards & Containers
   ========================================= */

/* Feature Cards (e.g. "Why We Are Trusted") */
.card-feature {
    height: 100%;
    border: 1px solid rgba(0,0,0,0.125);
    padding: 1.5rem;
    text-align: center;
    border-radius: 0.5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    background-color: var(--color-white);
    transition: transform 0.3s ease;
}

.card-feature:hover {
    transform: translateY(-5px);
}

.card-feature-icon {
    color: var(--color-gold); /* Previously text-warning */
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

/* Highlight Cards with Left Border */
.card-accent-left {
    height: 100%;
    border: 1px solid #dee2e6;
    padding: 1.5rem;
    text-align: center;
    border-radius: 10px !important;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    border-left-width: 15px !important;
    border-left-style: solid !important;
    background-color: var(--color-white);
    transition: transform 0.3s ease;
}

.card-accent-left:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

.card-accent-red { border-left-color: var(--color-red) !important; }
.card-accent-gold { border-left-color: var(--color-gold) !important; }
.card-accent-blue { border-left-color: var(--color-blue) !important; }

/* Service Cards */

.service-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.service-card:hover .service-card-img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.service-card:hover .service-card-overlay {
    background: linear-gradient(
        to top,
        rgba(8, 45, 82, 0.95) 0%,
        rgba(8, 45, 82, 0.7) 60%,
        transparent 100%
    );
}

.service-card:hover .service-card-arrow {
    transform: translateX(6px) scale(1.02);
    color: var(--color-red) !important;
    font-size: 150px;
}

/* Success Case Cards */
.success-case-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.success-case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

.success-case-img {
    height: 250px;
    object-fit: cover;
}

.case-content p {
    line-height: 1.8;
    color: #444;
}

.case-content .lead {
    font-size: 1.1rem;
    color: #333;
}

.case-content h5 {
    margin-top: 1.5rem;
}

/* Services Sub Navigation */
.services-subnav {
    z-index: 1050 !important;
}

.services-subnav a:hover {
    color: var(--color-blue) !important;
}

    
/* =========================================
   4. Layout & Sections
   ========================================= */

/* Page Banners */
.page-banner {
    position: relative;
    color: var(--color-white);
    min-height: 400px;
    height: 500px;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Standardized gradient overlay */
    background: linear-gradient(rgba(3, 5, 105, 0.42), rgba(2, 4, 117, 0.56));
    z-index: 1;
}

.page-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-banner-title {
    font-weight: 700;
    margin-bottom: 1rem;
    /* Standardized size (roughly display-4/display-3) */
    font-size: 3rem; 
}

@media (min-width: 992px) {
    .page-banner-title {
        font-size: 3.5rem;
    }
}

.page-banner-text {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1.5;
}
@media (max-width: 767px) {
    .mobile-align-center {
        text-align: center;
    }
    .mobile-align-center h1 {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .page-banner-text {
        font-size: 16px;
    }
}
.page-banner-text.large {
    font-size: 32px !important;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .page-banner-text.large {
        font-size: 18px !important;
        line-height: 1.4;
    }
}

/* Service hero images (top banners on service pages) */
@media (max-width: 767.98px) {
    .service-hero-img {
        height: 300px !important; /* roughly 50% of 600px */
    }
}


/* Backgrounds */
.bg-dark-blue {
    background-color: var(--color-blue);
    color: var(--color-white);
}

/* Specific Page Sections */
#global-strength {
    background: linear-gradient(rgba(10, 59, 108, 0.562), rgba(10, 59, 108, 0.596)), url('/assets/img/HOME_PAGE_PHOTOS/global-banner.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;   
}

#global-strength h1 {
    font-size: 50px;
}

#global-strength p {
    font-size: 40px;
    font-weight: 600;
}
@media (max-width: 767px) {
    #global-strength p {
      font-size: 16px;
    }
  }

#services-title-bar {
    background: #0A3B6C;
    background: linear-gradient(90deg,rgba(10, 59, 108, 1) 0%, rgba(78, 144, 212, 1) 52%);
}

.first-slide-title {
    font-size: clamp(36px, 4.5vw, 60px);
    font-weight: 600;
    white-space: nowrap;
}
.first-slide-title b {
    font-weight: 900;
}

/* Navigation Overrides */
.navbar-brand {
    font-weight: bold;
    color: var(--color-blue);
}

.nav-link {
    color: var(--color-blue);
    font-weight: 500;
}

.nav-link:hover {
    color: var(--color-red);
}

footer {
    background-color: #f8f9fa;
}

/* Desktop vs Mobile Footer */
.footer-desktop {
    display: block;
}

.footer-mobile {
    display: none;
}

@media (max-width: 767.98px) {
    .footer-desktop {
        display: none;
    }

    .footer-mobile {
        display: block;
        background-color: var(--color-white);
        border-top: 1px solid #e1e5ea;
    }
}

/* Mobile Footer Styling */
.footer-mobile-logo {
    height: 40px;
    width: auto;
}

.footer-mobile-follow span {
    color: var(--color-blue);
}

.footer-mobile-accordion {
    margin-top: 0.75rem;
}

.footer-mobile-card {
    background-color: var(--color-white);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.footer-mobile-toggle {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.9rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    color: var(--color-blue);
}

.footer-mobile-toggle i {
    font-size: 1rem;
}

.footer-mobile-list {
    padding: 0 1.1rem 1.1rem;
    font-size: 0.9rem;
    color: var(--color-blue);
}

.footer-mobile-list a {
    color: var(--color-blue);
}

.footer-mobile-partner-btn {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    font-weight: 600;
    font-size: 1rem;
}

.footer-mobile-newsletter h6 {
    font-size: 1rem;
}

.footer-mobile-newsletter p {
    font-size: 0.9rem;
}

.footer-mobile-input-group {
    display: flex;
    align-items: center;
    background-color: #f4f5f7;
    border-radius: 999px;
    padding: 0.1rem 0.15rem 0.1rem 0.9rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.footer-mobile-input-group .form-control {
    background: transparent;
    box-shadow: none;
    font-size: 0.9rem;
}

.footer-mobile-input-group .form-control:focus {
    outline: none;
    box-shadow: none;
}

.footer-mobile-input-btn {
    color: var(--color-dark-blue);
    padding: 0.45rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-mobile-input-btn i {
    font-size: 1.1rem;
}

.footer-mobile-badges img {
    max-height: 40px;
}

.footer-mobile-bottom {
    background-color: var(--color-blue);
}

/* =========================================
   5. Forms & Misc
   ========================================= */

.form-control:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 0.2rem rgba(10, 59, 108, 0.15);
}

.form-control::placeholder {
    color: #adb5bd;
}

.img-crop-left {
    width: 650px;
    height: 570px;
    overflow: hidden;
}

.img-crop-right {
    width: 650px;
    height: 480px;
    overflow: hidden;
}

.img-crop-right-roadside {
    width: 650px;
    height: 620px;
    overflow: hidden;
}

.img-crop-left-roadside {
    width: 570px;
    height: 358px;
    overflow: hidden;
}
.mta-transport-img {
    height: 680px;
    width: 100%;
    object-fit: cover;
}
.img-home-support {
    height: 380px;
    width: 100%;
    object-fit: cover;
}

.img-cost-containment {
    height: 360px;
    width: 100%;
    object-fit: cover;
}

.eap-right-img {
    height: 400px;
    width: 100%;
    object-fit: cover;
}

.mta-img-crop {
    height: 320px;
    width: 100%;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .mta-transport-img {
        height: 300px;
        width: 100%;
        margin-top: 200px;
    }

    .img-crop-left-roadside {
        height: 250px;
        width: 100%;
        object-fit: cover;
        margin-bottom: 1.5rem;
    }
}
.mta-mobile-center {
    text-align: left;
}
@media (max-width: 767.98px) {
    .mta-mobile-center {
        text-align: center;
    }
}
.modal-xl {
    max-width: 900px;
}

#avita-link:hover {
    color: var(--color-turquoise) !important;
}

/* =========================================
   6. RTL Adjustments (Arabic)
   ========================================= */

/* About Us - Our Values: place icons on the right in Arabic */
.lang-ar .about-value-item {
    flex-direction: row-reverse;
    text-align: right;
}

.lang-ar .about-value-item > .me-4 {
    margin-right: 0 !important;
    margin-left: 1.5rem !important;
}

/* Service lists (check icons and bullets) - icon on the right in Arabic */
.lang-ar .service-check-item {
    flex-direction: row-reverse;
    text-align: right;
}

.lang-ar .service-check-item > .me-3 {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

.lang-ar .service-bullet-item {
    flex-direction: row-reverse;
    text-align: right;
}

.lang-ar .service-bullet-item > .me-3 {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

/* Deprecated ID helpers (kept for backward compatibility during refactor) */
#home-card-1 { border-left: 15px solid var(--color-red) !important; }
#home-card-2 { border-left: 15px solid var(--color-gold) !important; }
#home-card-3 { border-left: 15px solid var(--color-blue) !important; }

/* Split Section - Image + Colored Content (Travel Assistance Services, etc.) */
.split-row {
    max-height: 400px;
}

.split-row-img {
    max-height: 400px;
    overflow: hidden;
}

.split-row-content {
    max-height: 400px;
}

.bg-turquoise {
    background-color: var(--color-turquoise);
}

/* Map Shift Left  Our Network Page */
.text-over-map {
    position: relative;
    z-index: 5;
  }
  
  .map-shift-left {
    margin-left: -120px;
    position: relative;
    z-index: 1;
  }
  
  @media (max-width: 991px) {
    .map-shift-left {
      margin-left: 0;
    }
  }
  
  /* Global Highlights Card */
  .global-highlight-card {
    background-color: var(--color-grey);

  }