@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');


/* جعل الانتقال بين أقسام الصفحة سلسًا عند الضغط على الروابط */
html {
    scroll-behavior: smooth;
}
/* ==========================================================
   1. GLOBAL & HERO HEADER STYLES
   ========================================================== */

.top-bar-content {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 100px;
}

.hero-header-section {
    height: 100vh;
    min-height: 700px;
    max-height: none;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
    background: linear-gradient(
        rgba(75, 57, 133, 0.78),
        rgba(75, 57, 133, 0.78)
    ),
    url("../img/banner-insurance-industry-blog.jpg") center center;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.hero-header-section .container {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   2. TOP BAR & LANGUAGE SWITCHER
   ========================================================== */

.top-bar {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.top-bar-content {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.language-switcher {
    white-space: nowrap;
}

.language-switcher a {
    font-family: 'Cairo', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}


/* ==========================================================
   3. CONTACT INFO (TOP HEADER)
   ========================================================== */

.contact-info {
    display: flex;
    align-items: center;
    gap: 45px;
}

.email-info,
.phone-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.contact-icon-box {
    width: 42px;
    height: 42px;
    background-color: #d2b551;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.contact-icon-box img {
    width: 20px;
    height: auto;
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}
#headerx .top-bar-content {
    padding-top: 20px !important;
}
.contact-icon-box:hover {
    background-color: #ffffff !important;
}

.contact-icon-box:hover img {
    filter: brightness(0) saturate(100%) invert(75%) sepia(55%) saturate(550%) hue-rotate(5deg) brightness(95%) contrast(90%);
}

.contact-text {
    display: flex;
    flex-direction: column;
}

.contact-text span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
}

.contact-text a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}


/* ==========================================================
   4. NAVBAR & FLOATING CONTAINER
   ========================================================== */

.floating-nav-container {
    margin-top: 12px;
}


.main-navbar {
    min-height: 105px;
    background-color: #ffffff;
    border-radius: 9px;
    padding: 15px 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

#logo img {
    width: 250px;
    max-width: 100%;
    height: auto;
    display: block;
}

#nav {
    display: flex;
    align-items: center;
    gap: 42px;
}

/* ==========================================================
   NAVBAR - الشكل الطبيعي في بداية الصفحة
   ========================================================== */

#floating-navbar {
    position: relative;
    width: 100%;
    z-index: 9999;
}


/* ==========================================================
   NAVBAR AFTER SCROLL
   عند النزول تصبح ثابتة أعلى الشاشة وبعرض كامل
   ========================================================== */

#floating-navbar.nav-scrolled {
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;

}


/* إزالة حدود الـ container عند النزول */

#floating-navbar.nav-scrolled #navbar-container {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}


/* شكل الصندوق بعد النزول */

#floating-navbar.nav-scrolled #navbar-box {
	 	background:rgba(240,240,240,0.87)!important;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.90) !important;
		width: 100%;
    	border-radius: 0 !important;
    	padding-top: 25px !important;
        padding-bottom: 25px !important;
}

#nav a {
	
    color: #4b3985 !important;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    transition: color 0.2s ease;
}

#nav a:hover,
#nav a.active,
#nav a.text-warning {
    color: #d2b551 !important;
}

.navbar-toggler {
    display: none !important;
}

#headerx .container.floating-nav-container {
    width: 75%;
}





/* ==========================================================
   5. HERO CONTENT & BUTTONS
   ========================================================== */

.hero-content-area {
    min-height: 800px;
    display: flex;
    align-items: center;
	
}

.hero-content {
    margin-top: 40px;
}

.hero-subtitle {

    display: block;
    font-size: 80px;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: #ffffff !important;
}

.hero-content h1 {
    font-size: 150px;
    font-weight: 800;
    margin-bottom: 35px;
    color: #ffffff;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 14px 35px;
    margin-top: 14px;
    background: transparent; 
    border: 1px solid #ffffff; 
    border-radius: 8px;
    color: #ffffff; 
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s ease;
}

.hero-content-area .desktop-text {
    display: block;
    margin-bottom: 20px !important;
}


.hero-btn:hover {
    background-color: #d2b551;
    border-color: #d2b551;
    color: #000000;
}


/* ==========================================================
   6. ANIMATED BACKGROUND SHAPES
   ========================================================== */

.animated-shapes-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.floating-shapes-img {
    position: absolute;
    height: auto;
    opacity: 0.4;
}

.shape-1 {
    width: 130px;
    bottom: 55%;
    left: 5%;
    animation: floatAnim1 4s ease-in-out infinite;
}

.shape-2 {
    width: 130px;
    bottom: 15%;
    right: 8%;
    animation: floatAnim2 3.5s ease-in-out infinite;
}

.shape-3 {
    width: 120px;
    bottom: 55%;
    right: 8%;
    animation: floatAnim1 5s ease-in-out infinite;
}

.shape-4 {
    width: 130px;
    bottom: 10%;
    left: 6%;
    animation: floatAnim2 4.5s ease-in-out infinite;
}

@keyframes floatAnim1 {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(-10px); }
}

@keyframes floatAnim2 {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(-15px); }
}


/* ==========================================================
   7. HEADER FONT SIZE REFINEMENTS
   ========================================================== */

.container.px-5.d-flex.justify-content-between.align-items-center .language-switcher .text-white.text-decoration-none.small.fw-bold {
    font-size: large;
}

.email-info.d-flex.align-items-center.gap-2 .text-start.d-none.d-md-block .text-white.text-decoration-none.small.fw-bold {
    font-size: large;
}

.phone-info.d-flex.align-items-center.gap-2 .text-start.d-none.d-md-block .text-white.text-decoration-none.small.fw-bold {
    font-size: large;
}


/* ==========================================================
   8. OFFCANVAS NAVBAR STYLING
   ========================================================== */

.offcanvas-body .navbar-nav .nav-link {
    color: #4b3985 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    transition: color 0.2s ease !important;
    padding: 10px 0 !important;
}

.offcanvas-body .navbar-nav .nav-link:hover,
.offcanvas-body .navbar-nav .nav-link.active,
.offcanvas-body .navbar-nav .nav-link.text-warning {
    color: #d2b551 !important;
}

/* ==========================================================
   MOBILE OFFCANVAS MENU
   إصلاح حجم القائمة في الشاشات الصغيرة
   ========================================================== */

@media (max-width: 885px) {

    /* القائمة نفسها */
    .offcanvas {
        width: 280px !important;
        max-width: 80% !important;
    }

    /* رأس القائمة */
    .offcanvas-header {
        padding: 25px !important;
    }

    /* محتوى القائمة */
    .offcanvas-body {
        padding: 20px 25px !important;
    }

    /* روابط القائمة */
    .offcanvas-body .navbar-nav {
        width: 100% !important;
    }

    .offcanvas-body .navbar-nav .nav-link {
        display: block !important;
        width: 100% !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid rgba(75, 57, 133, 0.1);
    }

}


/* ==========================================================
   9. SERVICES CAROUSEL & CARDS
   ========================================================== */

.my-carousel-wrapper {
    width: 80% !important;
    margin: 40px auto 50px auto !important;
    position: relative !important;
}

.carousel-control-prev, 
.carousel-control-next {
    width: 45px !important;  
    height: 45px !important; 
    background-color: #4b3d8e !important;
    border-radius: 50% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0 !important; 
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    position: absolute !important;
    z-index: 10;
}

.my-carousel-wrapper:hover .carousel-control-prev, 
.my-carousel-wrapper:hover .carousel-control-next {
    opacity: 1 !important;
    visibility: visible !important;
}

.carousel-control-prev { left: -60px !important; }
.carousel-control-next { right: -60px !important; }

.carousel-control-prev:hover, 
.carousel-control-next:hover {
    background-color: #d4af37 !important; 
    transform: translateY(-50%) scale(1.1) !important; 
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px !important;
    height: 20px !important;
    background-size: 100% 100% !important;
}

.carousel-inner .row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    margin: 0;
}

.carousel-item .col-4 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    display: flex;
    justify-content: center;
    padding: 0 10px;
}

.service-card {
    position: relative !important;
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 0px 15px 15px 15px !important;
    width: 100% !important;
    max-width: 400px !important; 
    height: 200px !important;    
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px !important;
    text-align: center !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
}

.card-bg-img {
    position: absolute !important;
    top: 0; 
    right: 0;
    width: 100% !important;
    opacity: 1 !important; 
    transition: opacity 0.3s ease !important;
    z-index: 0 !important;
}

.service-card:hover {
    background-color: #4b3d8e !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(75, 61, 142, 0.2) !important;
}

.service-card:hover .card-bg-img {
    opacity: 1 !important;
}

.service-icon, 
.service-card h3, 
.service-line {
    position: relative !important;
    z-index: 1 !important;
}

.service-icon img {
    width: 100px !important;
    height: 100px !important;
    object-fit: contain !important;
    margin-top: 2px !important;
}

.service-card h3 {
    color: #4b3985 !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    margin: 0 0 5px 0 !important;
    text-transform: uppercase !important;
    transition: color 0.3s ease !important;
}

.service-line {
    width: 95px !important;
    height: 2px !important;
    margin-top: 15px;
    background-color: #c7c3bd !important;
    display: block !important;
    transition: background-color 0.3s ease !important;
}

.service-card:hover h3 { 
    color: #ffffff !important; 
}

.service-card:hover .service-line { 
    background-color: #d4af37 !important; 
}

.carousel-indicators {
    bottom: -50px !important; 
    gap: 8px;
    margin-bottom: 0;
}

.carousel-indicators button {
    width: 9px !important;
    height: 3px !important;
    background-color: #d1d5db !important;
    border-radius: 4px !important;
    border: none !important;
    opacity: 1 !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
}

.carousel-indicators button.active {
    background-color: #4b3d8e !important;
    width: 19px !important;
}


/* ==========================================================
   10. CONTACT FORM SECTION
   ========================================================== */

.text-custom-purple {
    color: #4b3d8e !important;
}

.custom-input {
    background-color: #f9f9f9 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;
    padding: 12px 15px !important;
    font-size: 13px !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
}

.custom-input:focus{
    background-color: #ffffff !important;
    border-color: #4b3d8e !important;
    box-shadow: 0 0 0 3px rgba(75, 61, 142, 0.15) !important;
    text-align: center;
}

.btn-custom-purple {
    background-color: #4b3d8e !important;
    border: 1px solid #4b3d8e !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.btn-custom-purple:hover {
    background-color: #d4af37 !important;
    border-color: #d4af37 !important;
    color: #000000 !important;
}

#leftsec h2 {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    font-size: 40px;
}

#writes .card h5 {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 25px !important;
    font-size: 28px;
    color: #4b3d8e !important;
}

#leftsec {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

#leftsec img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
}


/* ==========================================================
   11. WHY CHOOSE US / BENEFITS SECTION
   ========================================================== */

.why-choose-us-section .row {
    display: flex !important;
    align-items: stretch !important;
}

.bg-purple {
    background-color: #4b3d8e !important;
}

#left-image-sec {
    display: flex !important;
}

.handshake-img-box {
    width: 100% !important;
    height: 100% !important;
    flex-grow: 1 !important;
}

.handshake-img-box img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}

#writes-benefits span.text-warning {
    font-size: 14px !important;    
    font-weight: 400 !important;   
}

#writes-benefits h2 {
    font-size: 38px !important;    
    font-weight: 800 !important;   
}

#writes-benefits h6 {
    font-size: 15px !important;    
    font-weight: 600 !important;   
    line-height: 1.4 !important;   
    margin-top: 5px !important;
}

.icon-circle {
    background-color: #d4af37 !important;
    color: #4b3d8e !important;
    min-width: 50px;
    min-height: 50px;
    transition: all 0.3s ease-in-out !important;
    cursor: pointer;
}

.icon-circle img.custom-icon {
    width: 40px !important;    
    height: 40px !important;   
    object-fit: contain !important;
    transition: all 0.3s ease-in-out !important;
}

.col-md-6:hover .icon-circle {
    background-color: #ffffff !important;
    transform: scale(1.08);
}

.col-md-6:hover .icon-circle img.custom-icon {
    filter: brightness(0) saturate(100%) invert(82%) sepia(51%) saturate(542%) hue-rotate(360deg) brightness(101%) contrast(92%);
}


/* ==========================================================
   12. MAJOR CLIENTS SECTION & LOGO SLIDER
   ========================================================== */

.major-clients-section {
    background-color: #f9f9f9;
}

#clients-title {
    font-size: 32px !important;    
    font-weight: 700 !important;   
    color: #4b3d8e !important;     
    text-align: center !important; 
    text-transform: uppercase;     
    margin-bottom: 20px;
}

#insure-title{
    font-size: 40px !important;    
    font-weight: 700 !important;   
    color: #4b3d8e !important;     
    text-align: center !important; 
    text-transform: uppercase;     
    margin-bottom: 40px;
}

#carouselExampleControls .carousel-inner {
    display: flex;
    flex-wrap: nowrap;
}

#carouselExampleControls .carousel-item {
    display: block !important;
    flex: 0 0 20% !important;
    width: 100% !important;
    margin-right: 0 !important;
    opacity: 1 !important;
}

#carouselExampleControls .client-img {
    max-height: 80px !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

#carouselExampleControls .client-img:hover {
    opacity: 1;
}

.clients-slider { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    width: 100%; 
} 

.clients-slider-wrapper { 
    overflow: hidden; 
    width: 100%; 
} 

.clients-slider-track { 
    display: flex; 
    transition: transform 0.5s ease; 
} 

.client-item { 
    min-width: 20%; 
    padding: 10px 15px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.client-item img { 
    width: 100%; 
    height: 130px; 
    object-fit: contain; 
    display: block; 
} 

.clients-arrow { 
    border: none; 
    background: transparent; 
    color: rgba(141,141,141,0.20); 
    font-size: 60px; 
    cursor: pointer; 
    padding: 0; 
    width: auto; 
    height: auto; 
} 

/* ==========================================================
   ABOUT US SECTION
   ========================================================== */

.about-section {
    padding: 50px 0;
	margin-top: 1%;
}


/* الحاوية الرئيسية */
.about-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}


/* ==========================================================
   الجزء الخاص بالنص
   ========================================================== */

.about-content {
    width: 48%;
}


.about-content h2 {
    font-size: 50px;
    font-weight: 700;
    color: #514783;
    margin-bottom:40px;
    line-height: 1;
}


.about-content p {
    font-size: 22px;
    line-height: 1.75;
    color: #3f3f3f;
    margin: 0;
    text-align: justify;
    letter-spacing: 0.5px;
}


/* زر more */
.more-btn {
    display: block;
    text-align: right;
    margin-top: 10px;
    font-size: 22px;
    font-weight: 700;
    color: #514783;
    text-decoration: none;
    transition: 0.3s;
}

html[lang="ar"] .about-content .more-btn {
    display: inline-block;
    direction: rtl;
    float: left;
}

html[lang="ar"] .title-line {
	align-content: flex-end
}



.more-btn:hover {
    color: #2f2860;
}


/* ==========================================================
   الجزء الخاص بالصورة
   ========================================================== */

.about-image-box {
    width: 52%;
    position: relative;
    padding-left: 40px;
    padding-bottom: 30px;
}


/* المربع البنفسجي خلف الصورة */
.purple-shape {
    position: absolute;

    width: 250px;
    height: 250px;

    background-color: #514783;

    border-radius: 30px;

    left: 0;
    bottom: 0;

    z-index: 1;
}


/* الصورة */
.about-image-box img {
    position: relative;

    width: 100%;
    height: 420px;

    object-fit: cover;

    border-radius: 8px;

    z-index: 2;
}



/* ==========================================================
   القسم الرئيسي للخدمات
   ========================================================== */

.our-services-section {
    padding: 60px 0 75px;
    background: #f7f7f7;
}


/* ==========================================================
   عنوان OUR SERVICES
   ========================================================== */

.services-title {
    text-align: center;
    margin-bottom: 55px;
}


/* تنسيق عنوان القسم الرئيسي */

.services-title h2 {
    margin: 0;
    font-size: 45px;
    font-weight: 700;
    color: #514783;
    text-transform: uppercase;
}

html[lang="ar"] .our-services-section .service-content p {
    text-align: justify;
    direction: rtl;
}


/* ==========================================================
   الصف الذي يحتوي على كروت الخدمات
   ========================================================== */

.services-row {
    display: flex;
    gap: 30px;
}


/* ==========================================================
   كارت الخدمة الرئيسي
   ========================================================== */

.service-box {
    flex: 1;

    display: flex;
    align-items: center;

    gap: 40px;

    padding: 30px 38px;

    min-height: 230px;

    background: #ffffff;

    border-radius: 25px;

    box-shadow:
        0 8px 25px rgba(81, 71, 131, 0.12);
}


/* ==========================================================
   دائرة أيقونة الخدمة
   ========================================================== */

.service-icon {
    width: 135px;
    height: 135px;

    min-width: 135px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #4b3586;
}


/* حجم الأيقونة الموجودة داخل الدائرة */

.service-icon img {
    width: 70px;
    height: 70px;

    object-fit: contain;
}


/* ==========================================================
   محتوى الخدمة النصي
   ========================================================== */

.service-content {
    flex: 1;
}


/* عنوان كل خدمة */

.service-content h3 {
    margin: 0 0 14px;

    font-size: 24px;
    font-weight: 700;

    color: #18233f;
}


/* الخط الذهبي أسفل عنوان الخدمة */

.title-line {
    width: 55px;
    height: 3px;

    margin-bottom: 20px;

    background: #c9a34a;

    border-radius: 10px;
}


/* النص الوصفي للخدمة */

.service-content p {
    margin: 0;

    font-size: 17px;

    line-height: 1.7;

    color: #596070;
}

/* ==========================================================
   GOALS SECTION
========================================================== */


/* تنسيق المساحة الخارجية الخاصة بقسم الأهداف */
.goals-section {
    padding: 30px 0 25px;
    background-color: #ffffff;
	margin-bottom: 45px;
}


/* تنسيق الإطار الرئيسي الذي يحتوي على جميع الأهداف */
.goals-box {
    border: 2px solid #4d4784;
    border-radius: 5px;
    padding: 25px 28px 30px;
}


/* تنسيق عنوان GOALS */
.<strong>goals-title</strong> {
    color: #4d4784;
    font-size: 38px;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
}


/* تنسيق الخط الذهبي الموجود أسفل العنوان */
.goals-line {
    width: 38px;
    height: 2px;
    background-color: #c7a84c;
    margin-top: 7px;
    margin-bottom: 15px;
}


/* تنسيق قائمة أهداف الشركة */
.goals-list {
    margin: 0;
    padding-left: 35px;
    color: #333333;
}


/* تنسيق كل هدف داخل القائمة */
.goals-list li {
    font-size: 20px;
    line-height: 1.55;
    margin-bottom: 3px;
}


/* إزالة المسافة الزائدة من آخر هدف */
.goals-list li:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   RESPONSIVE - ضبط قسم الأهداف على الشاشات الصغيرة
========================================================== */

@media (max-width: 768px) {

    /* تقليل المسافات داخل الصندوق في الموبايل */
    .goals-box {
        padding: 20px;
    }


    /* تصغير حجم الكتابة لتناسب شاشة الموبايل */
    .goals-list li {
        font-size: 14px;
    }

}





/* ==========================================================
   التعديل على التابلت والشاشات المتوسطة
   ========================================================== */

@media (max-width: 991px) {

    .services-row {
        flex-direction: column;
    }

    .service-box {
        width: 100%;
    }

}


/* ==========================================================
   التعديل على الموبايل
   ========================================================== */

@media (max-width: 576px) {

    .our-services-section {
        padding: 45px 15px;
    }


    /* تصغير عنوان القسم */

    .services-title h2 {
	font-size: 40px;
    font-weight: 600;
    }


    /* تحويل محتوى الكارت للوضع العمودي */

    .service-box {
        flex-direction: column;

        text-align: center;

        gap: 20px;

        padding: 30px 20px;
    }


    /* توسيط الخط الذهبي في الموبايل */

    .title-line {
        margin-left: auto;
        margin-right: auto;
    }


    /* تصغير النص على الموبايل */

    .service-content p {
        font-size: 16px;
    }

}

/* ==========================================================
   RESPONSIVE - TABLET
   ========================================================== */

@media (max-width: 991px) {

    .about-row {
        flex-direction: column;
        gap: 40px;
    }

    .about-content,
    .about-image-box {
        width: 100%;
    }

    .about-content {
        text-align: center;
    }

    .about-content p {
        text-align: center;
    }

    .more-btn {
        text-align: center;
    }

}


/* ==========================================================
   RESPONSIVE - MOBILE
   ========================================================== */

@media (max-width: 576px) {

    .about-section {
        padding: 40px 15px;
    }

    .about-content h2 {
        font-size: 42px;
    }

    .about-content p {
        font-size: 17px;
        line-height: 1.7;
    }

    .about-image-box {
        padding-left: 20px;
        padding-bottom: 20px;
    }

    .purple-shape {
        width: 180px;
        height: 180px;

        border-radius: 25px;
    }

    .about-image-box img {
        height: 280px;
    }

}




/* ==========================================================
   13. SITE FOOTER
   ========================================================== */
.footer-label {
    color: #d4af37;
}
.site-footer {
    background-color: #4b3d8e !important;
    color: #ffffff !important;
}

.left-footer-col .footer-logo {
    display: block !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    width: 85% !important;
}

.left-footer-col .footer-logo img {
    width: 100% !important;
    height: 100px !important;         
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
}

.left-footer-col .footer-desc {
    font-size: 18px !important;    
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.8 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 85% !important;
}

.site-footer h6.footer-heading {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    margin-bottom: 20px !important;
    position: relative;
    display: inline-block;
}

.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 35px;
    height: 3px;
    background-color: #d4af37;
    border-radius: 2px;
}

.site-footer .footer-links {
    padding-left: 30px !important;
}

.site-footer .footer-links a {
    font-size: 18px !important;    
    color: rgba(255, 255, 255, 0.85) !important;
    transition: color 0.3s ease !important;
}

.site-footer .footer-links a:hover {
    color: #d4af37 !important;
    text-decoration: underline !important;
}

.site-footer .contact-info-list, 
.site-footer .contact-info-list li {
    font-size: 18px !important;    
    color: #ffffff !important;
    line-height: 1.8 !important;
}

.site-footer .contact-info-list a {
    color: #ffffff !important;
    transition: color 0.3s ease !important;
}

.site-footer .contact-info-list a:hover {
    color: #d4af37 !important;
}

.site-footer .map-link {
    font-size: 15px !important;    
    color: #d4af37 !important;
}

.site-footer .map-link:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

.site-footer hr.footer-divider {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.site-footer .copyright-text {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

.scroll-top-btn,
.site-footer .scroll-top-btn {
    width: 54px !important;          
    height: 54px !important;         
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;      
    background-color: transparent !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.scroll-top-btn img,
.scroll-top-icon {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
}

.scroll-top-btn:hover,
.site-footer .scroll-top-btn:hover {
    background-color: #d4af37 !important;
    transform: none !important;
}

.social-icon-btn {
    width: 38px !important;
    height: 38px !important;
    background-color: #d4af37 !important;
    transition: all 0.3s ease-in-out !important;
    border-radius: 50% !important;
}

.social-icon-btn img.social-img {
    width: 25px !important;
    height: 25px !important;
    object-fit: contain !important;
    transition: filter 0.3s ease-in-out !important;
}

.social-icon-btn:hover {
    background-color: #ffffff !important;
    transform: translateY(-3px);
}





/* ==========================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================== */

/* Tablet & Smaller (< 992px) */
@media (max-width: 992px) {
    .hero-header-section .container,
    .top-bar-content {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .hero-header-section .container .bg-white,
    .main-navbar {
        width: calc(100% - 30px) !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
        padding: 20px 25px !important;
        justify-content: space-between !important;
    }

    #nav {
        display: flex !important;
        gap: 30px !important;
    }

    #nav a {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    #logo img {
        width: 200px !important;
        margin-left: 40px;
    }

    #addressx {
        gap: 15px !important;
    }

    .contact-icon-box {
        width: 35px !important;   
        height: 35px !important;  
    }

    .contact-icon-box img {
        width: 40px !important;   
    }

    .email-info a.small.fw-bold,
    .phone-info a.small.fw-bold {
        font-size: 14px !important; 
    }

    .email-info span,
    .phone-info span {
        font-size: 0.9rem !important;
    }

    .hero-content-area {
        padding-left: 20px !important;
        padding-right: 20px !important;
        text-align: left !important;
    }

    .hero-content-area h1 {
        font-size: 50px !important;
    }

    .hero-content-area .row,
    .hero-content-area .col-lg-12,
    .row.align-items-center .col-lg-12 .text-uppercase.text-white.fw-semibold.tracking-wide.mb-2.d-block {
        text-align: left !important;
    }

    .navbar-toggler {
        display: none !important;
    }

    .client-item { 
        min-width: 33.333%; 
    } 
}

/* Tablet Layout Adaptation (< 870px) */
@media (max-width: 870px) {
    .top-bar-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        height: auto !important;
        padding: 15px 0 !important;
    }

    .animated-shapes-container {
        display: none !important;
    }

    .top-bar-content > .container {
       display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
       width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 10px !important;
    }

    .language-switcher {
        width: 100% !important;
        text-align: center !important;
   }

    #addressx {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .hero-content-area {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .hero-content-area .row {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 !important;
    }

    .hero-content-area .col-lg-12 {
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
    }

    .hero-content-area span.text-uppercase {
        text-align: center !important;
        background: transparent !important;
        display: block !important;
        width: 100% !important;
        font-size: 20px !important;
    }

    .hero-content-area h1 {
        text-align: center !important;
        width: 100% !important;
        font-size: 50px !important;
    }

    .hero-content-area div {
        text-align: center !important;
    }

    .desktop-text {
        display: table !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .hero-header-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .carousel-control-prev, 
    .carousel-control-next {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-flex !important;
        margin: 20px 8px 0 8px !important;
    }

    .my-carousel-wrapper {
        text-align: center !important;
        margin-bottom: 40px !important;
    }

    .carousel-item:nth-child(8) .row > .col-4:nth-child(2),
    .carousel-item:nth-child(8) .row > .col-4:nth-child(3) {
        display: none !important;
    }
}

/* Tablet Menu Toggle Breakpoint (< 885px) */
@media (max-width: 885px) {
    #nav {
        display: none !important;
    }
    .navbar-toggler {
        display: block !important;
    }

    .hero-header-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hero-header-section .container > .bg-white,
    .hero-header-section .container .rounded-3 {
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        border-radius: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important;
    }

    .top-bar-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        height: auto !important;
        padding: 15px 0 !important;
    }

    .top-bar-content > .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 10px !important;
    }

    .language-switcher {
        width: 100% !important;
        text-align: center !important;
    }

    #addressx {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important;
    }
    
    .animated-shapes-container {
        display: none !important;
    }
}

/* Medium Screen Refinements (601px to 870px) */
@media (max-width: 870px) and (min-width: 601px) {
    #addressx {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 25px !important;
    }
    .email-info, .phone-info {
        display: flex !important;
        align-items: center !important;
    }
}

/* Small Screens & Mobile (< 600px) */
@media (max-width: 600px) {
    .contact-icon-box {
        display: none !important;    
    }

    #addressx {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .email-info, 
    .phone-info {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-align: center !important;
    }

    .email-info span,
    .phone-info span {
        font-size: 0.9rem !important;
    }

    #logo img {
        width: 170px !important;
        margin-left: 10px;
    }

    .hero-content-area span.text-uppercase {
        font-size: 10px !important;
    }

    .hero-content-area h1 {
        font-size: 30px !important;
    }

    .hero-content-area div {
        text-align: center !important;
    }

    .hero-btn {
        display: block !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        margin: 0px 0px;
    }

    .carousel-item .col-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    .service-card {
        height: auto !important;
        min-height: unset !important;
        padding: 15px 10px !important;
    }

    .service-icon img {
        width: 60px !important;
        height: 60px !important;
        object-fit: contain !important;
        margin-top: 2px !important;
    }

    .service-card h3 {
        font-size: 15px !important;
        margin: 0 0 5px 0 !important;
    }

    .service-line {
        display: none !important;
    }

    .carousel-indicators {
        display: none !important;
    }

    .client-item { 
            min-width: 50% !important;

    } 

    .client-item img { 
        height: 120px; 
        max-width: 100%; 
    } 

    .clients-arrow { 
        width: 38px; 
        height: 38px; 
        font-size: 22px; 
    } 

    #clients-title {
        font-size: 22px !important;
    }
}

/* Mobile Why Choose Us Alignment (< 852px) */
@media (max-width: 852px) {
    #writes-benefits .col-md-6 {
        width: 33.333% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    #writes-benefits .icon-circle {
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }

    #writes-benefits h6 {
        text-align: center !important;
        font-size: 11px !important;
        line-height: 1.4;
    }
}

/* Footer Additional Adjustments */
@media screen {
    .row.g-4.mb-5 .col-lg-4.mb-4.mb-lg-0 .text-uppercase.fw-bold.mb-4.position-relative.pb-2.footer-heading {
        margin-left: 30px;
    }
    .list-unstyled.footer-links .mb-2 .text-decoration-none {
        padding-left: 0px;
        margin-left: -1px;
    }
}
/* ==========================================================
   ABOUT SECTION ANIMATION
   التحكم في حركة سكشن ABOUT
   ========================================================== */


/* الكلام والعنوان يدخلان من الشمال */
.about-content {
    opacity: 0;
    transform: translateX(-100px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


/* الصورة تدخل من اليمين */
.about-image-box {
    opacity: 0;
    transform: translateX(100px);
    transition:
        opacity 1s ease,
        transform 1s ease;
}


/* المربع البنفسجي يظهر تدريجياً */
.purple-shape {
    opacity: 0;
    transform: scale(0.7);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


/* حالة ظهور الكلام */
.about-section.show .about-content {
    opacity: 1;
    transform: translateX(0);
}


/* حالة ظهور الصورة */
.about-section.show .about-image-box {
    opacity: 1;
    transform: translateX(0);
}


/* حالة ظهور المربع البنفسجي */
.about-section.show .purple-shape {
    opacity: 1;
    transform: scale(1);
}



/* ==========================================================
   SERVICES SECTION ANIMATION
   التحكم في سرعة وحركة عناصر قسم الخدمات
   ========================================================== */

/* إعداد الحالة قبل ظهور العنوان */
.services-title {
    opacity: 0;
    transform: translateY(-80px);
    transition: all 0.8s ease;
}

/* عند ظهور العنوان */
.services-title.show {
    opacity: 1;
    transform: translateY(0);
}


/* المربع الأول يدخل من الشمال */
.service-box:first-child {
    opacity: 0;
    transform: translateX(-120px);
    transition: all 0.9s ease;
}


/* المربع الثاني يدخل من اليمين */
.service-box:last-child {
    opacity: 0;
    transform: translateX(120px);
    transition: all 0.9s ease 0.2s;
}


/* ظهور المربعات */
.service-box.show {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================
   الشكل الأساسي لقسم GOALS
========================================= */

.goals-section {
    opacity: 0;
    transform: translateY(80px);
    transition: all 0.8s ease;
}


/* =========================================
   ظهور القسم من أسفل إلى أعلى
========================================= */

.goals-section.show {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   تأثير الماوس وتحويل الخلفية للبنفسجي
========================================= */

.goals-section.show:hover {
    background: #4f4687;
    border-color: #d4af37;
}


/* =========================================
   تحويل الكتابة إلى الأبيض عند الماوس
========================================= */

.goals-section.show:hover,
.goals-section.show:hover p,
.goals-section.show:hover li {
    color: #ffffff;
}


/* =========================================
   تحويل عنوان GOALS إلى اللون الذهبي
========================================= */

.goals-section.show:hover h2 {
    color: #d4af37;
}







/* ==========================================
   CONTACT SECTION ANIMATION
========================================== */

/* الجزء الشمال */
#leftsec {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s ease;
}

/* الجزء اليمين */
#writes {
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s ease;
}

/* عند ظهور السيكشن */
#leftsec.show,
#writes.show {
    opacity: 1;
    transform: translateX(0);
}


/* العناوين من فوق */
#leftsec h2,
#writes h5 {
    opacity: 0;
    transform: translateY(-50px);
    transition: all 0.8s ease 0.3s;
}

#leftsec.show h2,
#writes.show h5 {
    opacity: 1;
    transform: translateY(0);
}


/* الصورة */
#leftsec img {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease 0.4s;
}

#leftsec.show img {
    opacity: 1;
    transform: translateY(0);
}


/* الفورم */
#writes form {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease 0.5s;
}

#writes.show form {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================
   ABOUT US - MORE BUTTON ANIMATION
========================================== */

/* التحكم في إعدادات الحركة */
:root {
    --more-delay: 1.5s;      /* وقت انتظار قبل حركة الزرار */
    --more-duration: 1.2s;   /* مدة الحركة - كل ما الرقم يزيد الحركة تبقى أبطأ */
    --more-distance: 250px;  /* المسافة اللي الزرار يبدأ منها */
}


/* حالة الزرار قبل الحركة */
.more-btn {
    opacity: 0;
}


/* تشغيل الحركة بعد ظهور About Us */
.about-section.show .more-btn {
    animation: moreFromImage 
               var(--more-duration)
               cubic-bezier(0.22, 1, 0.36, 1)
               var(--more-delay)
               forwards;
}


/* حركة الزرار من ناحية الصورة إلى مكانه */
@keyframes moreFromImage {

    0% {
        opacity: 0;
        transform: translateX(var(--more-distance)) scale(0.8);
    }

    20% {
        opacity: 1;
    }

    75% {
        opacity: 1;
        transform: translateX(-10px) scale(1.04);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

}

/* ==========================================================
   NAVBAR DROP DOWN ANIMATION
   نزول الشريط من أعلى إلى أسفل عند الـ Scroll
   ========================================================== */

#floating-navbar.nav-scrolled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
	height: auto;
    z-index: 9999;
    animation: navbarDrop 1s ease-out forwards;
    }


/* حركة نزول النافبار من فوق */
@keyframes navbarDrop {

    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }

}

/* ==========================================================
   PRELOADER
   ========================================================== */

.preloader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: #4b3d8e;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 99999;

    transition: opacity 0.5s ease;
}


/* ==========================================================
   الحاوية
   ========================================================== */

.loader {
    position: relative;
    width: 100px;
    height: 100px;
}


/* ==========================================================
   المربع
   ========================================================== */

.box {
    position: absolute;

    width: 58px;
    height: 58px;

    left: 50%;
    top: 40%;

    background: #e4c62b;

    transform-origin: center;

    animation: boxMove 1.6s infinite ease-in-out;
}


/* ==========================================================
   الظل
   ========================================================== */

.shadow {
    position: absolute;

    width: 65px;
    height: 8px;

    left: 50%;
    bottom: 5px;

    transform: translateX(-50%);

    background: rgba(35, 25, 90, 0.5);

    border-radius: 50%;

    filter: blur(3px);

    animation: shadowMove 1.6s infinite ease-in-out;
}


/* ==========================================================
   حركة المربع
   ========================================================== */

@keyframes boxMove {

    0% {
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            translateY(0px);
    }

    25% {
        transform:
            translate(-50%, -50%)
            rotate(45deg)
            translateY(-12px);
    }

    50% {
        transform:
            translate(-50%, -50%)
            rotate(90deg)
            translateY(0px);
    }

    75% {
        transform:
            translate(-50%, -50%)
            rotate(135deg)
            translateY(-12px);
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotate(180deg)
            translateY(0px);
    }
}


/* ==========================================================
   حركة الظل
   ========================================================== */

@keyframes shadowMove {

    0%,
    50%,
    100% {
        transform:
            translateX(-50%)
            scaleX(1);

        opacity: 0.5;
    }

    25%,
    75% {
        transform:
            translateX(-50%)
            scaleX(0.65);

        opacity: 0.2;
    }
}


/* ==========================================================
   PRELOADER
   ========================================================== */

.preloader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: #4b3d8e;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 99999;

    transition: opacity 0.5s ease;
}


/* ==========================================================
   الحاوية
   ========================================================== */

.loader {
    position: relative;
    width: 100px;
    height: 100px;
}


/* ==========================================================
   المربع
   ========================================================== */

.box {
    position: absolute;
    width: 58px;
    height: 58px;
    left: 50%;
    top: 40%;
    background: #e4c62b;
    transform-origin: center;
   animation: boxMove 1.6s infinite ease-in-out;
}

/* ==========================================================
   الظل
   ========================================================== */

.shadow {
    position: absolute;
    width: 65px;
    height: 8px;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
    background: rgba(35, 25, 90, 0.5);
    border-radius: 50%;
    filter: blur(3px);
    animation: shadowMove 1.6s infinite ease-in-out;
}

/* ==========================================================
   حركة المربع
   ========================================================== */

@keyframes boxMove {

    0% {
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            translateY(0px);
    }

    25% {
        transform:
            translate(-50%, -50%)
            rotate(45deg)
            translateY(-12px);
    }

    50% {
        transform:
            translate(-50%, -50%)
            rotate(90deg)
            translateY(0px);
    }

    75% {
        transform:
            translate(-50%, -50%)
            rotate(135deg)
            translateY(-12px);
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotate(180deg)
            translateY(0px);
    }
}


/* ==========================================================
   حركة الظل
   ========================================================== */

@keyframes shadowMove {

    0%,
    50%,
    100% {
        transform:
            translateX(-50%)
            scaleX(1);

        opacity: 0.5;
    }

    25%,
    75% {
        transform:
            translateX(-50%)
            scaleX(0.65);

        opacity: 0.2;
    }
}


/* ==========================================================
   إخفاء الـ PRELOADER
   ========================================================== */

.preloader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ========================================
   MOBILE OFFCANVAS MENU
======================================== */

#offcanvasNavbar {
    width: 100%;
    max-width: 420px;
    border: none;
    background: #ffffff;
}

/* رأس القائمة */
#offcanvasNavbar .offcanvas-header {
    padding: 30px 35px;
    border-bottom: 1px solid #eeeeee;
}

/* زر الإغلاق */
#offcanvasNavbar .btn-close {
    transform: scale(1.3);
}

/* محتوى القائمة */
#offcanvasNavbar .offcanvas-body {
    padding: 25px 35px;
}

/* القائمة */
#offcanvasNavbar .navbar-nav {
    gap: 0 !important;
}

/* كل عنصر */
#offcanvasNavbar .nav-item {
    border-bottom: 1px solid #e5e5e5;
}

/* الروابط */
#offcanvasNavbar .nav-link {
    padding: 22px 0;
    font-size: 1.3rem;
    letter-spacing: 1px;
    color: #403d6d !important;
}

/* العنصر النشط */
#offcanvasNavbar .nav-link.active {
    color: #d2b551 !important;
}


/* ========================================
   NAVBAR SCROLL EFFECT
======================================== */

/* الوضع الطبيعي */
#floating-navbar {
    position: absolute;
    top: 120px;
    left: 0;
    width: 100%;
    z-index: 1000;

    transition:
        top 0.4s ease,
        background 0.4s ease,
        box-shadow 0.4s ease;
}


/* عند النزول للأسفل */
#floating-navbar.nav-scrolled {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    padding: 10px 0;

    background: rgba(255, 255, 255, 0.98);

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);

    animation: navbarSlideDown 0.4s ease;

}


/* إزالة شكل الصندوق الكبير عند الـ scroll */
#floating-navbar.nav-scrolled #navbar-box {

    box-shadow: none !important;

    border-radius: 0 !important;

}


/* حركة الظهور */
@keyframes navbarSlideDown {

    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }

}

/* ==========================================================
   ABOUT US HERO
   صورة وخلفية صفحة About Us فقط
   ========================================================== */

.about-page-hero {
    height: 50vh !important;
    min-height: 600px !important;
    max-height: none !important;
    width: 100% !important;
    background-image:
        linear-gradient(
            rgba(75, 57, 133, 0.78),
            rgba(75, 57, 133, 0.78)
        ),
        url("../img/38f7be45-5920-45f0-b345-f43bf3f2cbb0 (1).jpg")!important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ==========================================================
   ABOUT US HERO CONTENT
   ========================================================== */
/* ==========================================================
   ABOUT US - تثبيت الـ TOP BAR في الأعلى
   ========================================================== */

.about-page-hero .top-bar-content {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    margin: 0 auto !important;
    padding-top: 20px !important;

    z-index: 100 !important;
}


/* الـ Container الداخلي */
.about-page-hero .top-bar-content > .container {
    position: static !important;

    width: 100% !important;

    margin: 0 auto !important;
}




#about-us {
    position: absolute !important;

    top: 60% !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: none !important;

    transform: translateY(-50%) !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;

    z-index: 10 !important;
}


/* مجموعة ABOUT US */
#about-us .about-hero-inner {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    width: 100% !important;
}


/* عنوان ABOUT US */
#about-us .about-hero-inner h1 {

    margin: 0 0 10px 0 !important;

    text-align: center !important;

}


/* الكتابة الصغيرة */
#about-us .about-hero-subtitle {

    display: block !important;

    width: auto !important;

    margin: 0 !important;

    text-align: center !important;

    color: #ffffff !important;

}
#about-us .about-hero-subtitle a {
    color: #ffffff !important;
    text-decoration: none !important;
}

#about-us .about-hero-subtitle a:hover {
    color: #d2b551 !important;
}


/* ==========================================================
   ABOUT US - التحكم في أيقونات التأمين
   ========================================================== */

.about-page-hero .floating-shapes-img {
    width: 110px !important;
    height: auto !important;
}


/* الأيقونة العلوية اليسرى - السيارة */
.about-page-hero .shape-1 {
    left: 5% !important;
    top: 30% !important;
}


/* الأيقونة العلوية اليمنى - الأشخاص */
.about-page-hero .shape-2 {
    right: 4% !important;
    top: 25% !important;
}


/* الأيقونة السفلية اليسرى - المنزل */
.about-page-hero .shape-3 {
    left: 7% !important;
    bottom: 10% !important;
}


/* الأيقونة السفلية اليمنى - القلب */
.about-page-hero .shape-4 {
    left: 80% !important;
    bottom: 20% !important;
}


/* ==========================================================
   ABOUT US PAGE ONLY
   ========================================================== */


/* ==========================================================
   ABOUT US SECTION
   ========================================================== */

body:has(.about-page-hero) .about-section {
    width: 100%;
    padding: 25px 0 90px;
    background: #ffffff;
}


/* الحاوية الرئيسية */
body:has(.about-page-hero) .about-section > .container {
    max-width: 1200px;
    margin: 0 auto;
}


/* ==========================================================
   العنوان + الفقرة الأولى
   ========================================================== */

body:has(.about-page-hero) .about-intro {
    width: 100%;
    margin: 0 0 60px;
}


/* عنوان ABOUT US */
body:has(.about-page-hero) .about-intro h2 {
    margin: 0 0 10px;
    color: #51418b;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.2;
}


/* الفقرة الأولى */
body:has(.about-page-hero) .about-intro p {
    margin: 0;
    color: #222222;
    font-size: 20px;
    line-height: 1.65;
    font-weight: 400;
}


/* ==========================================================
   الصورة + النص بجانب بعض
   ========================================================== */

body:has(.about-page-hero) .about-details {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 55px;
    align-items: center;
}


/* ==========================================================
   صندوق الصورة
   ========================================================== */

body:has(.about-page-hero) .about-image-box {
    position: relative;
    width: 100%;
    padding: 0 0 0 20px;
    z-index: 1;
}


/* المربع البنفسجي خلف الصورة */
body:has(.about-page-hero) .about-image-box .purple-shape {
    position: absolute;
    left: 0;
    bottom: -28px;
    width: 230px;
    height: 230px;
    background: #51418b;
    border-radius: 25px;
    z-index: -1;
}


/* الصورة */
body:has(.about-page-hero) .about-image-box img {
    position: relative;
    display: block;
    width: 100%;
    height: 405px;
    object-fit: cover;
    border-radius: 6px;
    z-index: 2;
}


/* ==========================================================
   النص الموجود بجانب الصورة
   ========================================================== */

body:has(.about-page-hero) .about-details-text {
    width: 100%;
}


body:has(.about-page-hero) .about-details-text p {
    margin: 0 0 32px;
    color: #222222;
    font-size: 18px;
    line-height: 1.65;
    text-align: left;
}


body:has(.about-page-hero) .about-details-text p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 991px) {

    body:has(.about-page-hero) .about-section {
        padding: 30px 20px 70px;
    }


    body:has(.about-page-hero) .about-section > .container {
        max-width: 100%;
    }


    body:has(.about-page-hero) .about-intro {
        margin-bottom: 45px;
    }


    body:has(.about-page-hero) .about-intro h2 {
        font-size: 38px;
    }


    body:has(.about-page-hero) .about-intro p {
        font-size: 18px;
    }


    /* الصورة والنص يصبحان تحت بعض في التابلت */
    body:has(.about-page-hero) .about-details {
        grid-template-columns: 1fr;
        gap: 50px;
    }


    body:has(.about-page-hero) .about-image-box {
        max-width: 600px;
        margin: 0 auto;
    }


    body:has(.about-page-hero) .about-details-text p {
        font-size: 18px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 576px) {

    body:has(.about-page-hero) .about-section {
        padding: 25px 20px 60px;
    }


    body:has(.about-page-hero) .about-intro {
        margin-bottom: 40px;
    }


    body:has(.about-page-hero) .about-intro h2 {
        font-size: 32px;
    }


    body:has(.about-page-hero) .about-intro p {
        font-size: 16px;
        line-height: 1.7;
    }


    body:has(.about-page-hero) .about-details {
        gap: 40px;
    }


    body:has(.about-page-hero) .about-image-box {
        padding-left: 10px;
    }


    body:has(.about-page-hero) .about-image-box img {
        height: 300px;
    }


    body:has(.about-page-hero) .about-image-box .purple-shape {
        width: 150px;
        height: 150px;
        bottom: -20px;
    }


    body:has(.about-page-hero) .about-details-text p {
        font-size: 16px;
        line-height: 1.7;
    }

}

/* ==========================================================
   ABOUT US - VISION / MISSION / VALUES
   ========================================================== */

.about-values-section {
    width: 100%;
    padding: 25px 0 60px;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}


/* الحاوية */
.about-values-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    gap: 20px;

    position: relative;
    z-index: 2;
}


/* ==========================================================
   CARDS
   ========================================================== */

.about-info-card {
    width: 33.333%;
    min-height: 220px;

    padding: 25px 22px;

    border: 3px solid #51418b;
    border-radius: 5px;

    background-color: #ffffff;

    box-sizing: border-box;

    /* مهم: لا يوجد Hover */
    transition: none !important;
}


/* ==========================================================
   TITLES
   ========================================================== */

.about-info-card h3 {
    margin: 0;

    font-size: 25px;
    font-weight: 700;

    color: #51418b;

    text-transform: uppercase;
}


/* ==========================================================
   GOLD LINE
   ========================================================== */

.about-card-line {
    width: 45px;
    height: 3px;

    background-color: #d4af37;

    margin-top: 10px;
    margin-bottom: 16px;

    position: relative;
}



	
/* الخط الرمادي */
.about-card-line::after {
    content: "";

    position: absolute;

    left: 45px;
    top: 0;

    width: 100px;
    height: 2px;

    background-color: #e5e5e5;
}


/* ==========================================================
   PARAGRAPH
   ========================================================== */

.about-info-card p {
    margin: 0;

    font-size: 17px;
    line-height: 1.7;

    color: #222222;
}


/* ==========================================================
   VALUES
   ========================================================== */

.values-card ul {
    margin: 0;
    padding-left: 18px;

    color: #222222;

    font-size: 17px;
    line-height: 1.65;
}

.values-card li {
    margin-bottom: 2px;
}



/* ==========================================================
   منع أي Hover من تغيير الألوان
   ========================================================== */

.about-info-card:hover {
    background-color: #ffffff;
    color: inherit;
    border-color: #51418b;
}


/* Mission يظل بنفسجي عند Hover */
.mission-card:hover {
    background-color: #51418b !important;
    border-color: #51418b !important;
}

.mission-card:hover h3,
.mission-card:hover p {
    color: #ffffff !important;
}
/* vision-card يظل بنفسجي عند Hover */
.vision-card:hover {
    background-color: #51418b !important;
    border-color: #51418b !important;
}

.vision-card:hover h3,
.vision-card:hover p {
    color: #ffffff !important;
}
/* values-card يظل بنفسجي عند Hover */
.values-card:hover {
    background-color: #51418b !important;
    border-color: #51418b !important;
}

.values-card:hover h3,
.values-card:hover ul {
    color: #ffffff !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 991px) {

    .about-values-container {
        max-width: 90%;
        gap: 15px;
    }


    /* تصغير الخط الممتد حتى لا يخرج من البوكس */
    .about-card-line::after {
        left: 35px;
        max-width: 180px;
    }


    .about-info-card {
        padding: 22px 18px;
        min-height: 220px;
    }


    .about-info-card h3 {
        font-size: 20px;
    }


    .about-info-card p,
    .values-card ul {
        font-size: 15px;
        line-height: 1.6;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .about-values-section {
        padding: 30px 20px 50px;
    }


    .about-values-container {
        max-width: 100%;
        flex-direction: column;
        gap: 20px;
    }


    /* كل البوكسات نفس العرض والارتفاع */
    .about-info-card {
        width: 100%;
        min-height: 220px;
        height: 220px;
        padding: 22px 20px;
    }


    /* العنوان */
    .about-info-card h3 {
        font-size: 20px;
    }


    /* الخط الذهبي + الرمادي */
    .about-card-line {
        width: 35px;
        height: 3px;
        margin-top: 8px;
        margin-bottom: 14px;
    }


    /* الخط الرمادي لا يخرج خارج البوكس */
    .about-card-line::after {
        left: 35px;
        width: calc(100vw - 120px);
        max-width: 220px;
        height: 2px;
    }


    /* النص */
    .about-info-card p,
    .values-card ul {
        font-size: 15px;
        line-height: 1.6;
    }


    .values-card ul {
        padding-left: 18px;
    }

}
/* ==========================================================
   ABOUT US HERO TEXT - SLIDE UP
   ========================================================== */

#about-us .about-hero-inner {
    opacity: 0;
    transform: translateY(180px);
    animation: aboutUsTextUp 1.2s ease-out forwards;
}


/* الحركة من أسفل إلى أعلى */
@keyframes aboutUsTextUp {

    from {
        opacity: 0;
        transform: translateY(180px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}
/* ==========================================================
   ABOUT US - TWO TITLES SYNCHRONIZED ANIMATION
   ========================================================== */


/* ----------------------------------------------------------
   العنوان الأول داخل الـ HERO
   يطلع من أسفل إلى أعلى
   ---------------------------------------------------------- */

#about-us .about-hero-inner {
    opacity: 0;
    transform: translateY(250px);

    animation: aboutHeroTextUp 1.4s ease-out forwards;
}


/* ----------------------------------------------------------
   العنوان الثاني بعد الـ HERO
   ينزل من أعلى إلى أسفل
   ---------------------------------------------------------- */

body:has(.about-page-hero) .about-intro h2 {
    opacity: 0;
    transform: translateY(-250px);

    animation: aboutIntroTitleDown 1.4s ease-out forwards;
}


/* ==========================================================
   ANIMATION 1
   HERO TITLE - من تحت إلى فوق
   ========================================================== */

@keyframes aboutHeroTextUp {

    from {
        opacity: 0;
        transform: translateY(250px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ==========================================================
   ANIMATION 2
   ABOUT TITLE - من فوق إلى تحت
   ========================================================== */

@keyframes aboutIntroTitleDown {

    from {
        opacity: 0;
        transform: translateY(-250px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* ==========================================================
   ABOUT US - INTRO TEXT ANIMATION
   النص الأول ينزل من أعلى إلى مكانه
   ========================================================== */

body:has(.about-page-hero) .about-intro p{
    opacity: 0;
    transform: translateY(-250px);
    animation: aboutIntroTextDown 1.4s ease-out forwards;
}


/* الحركة */
@keyframes aboutIntroTextDown {

    from {
        opacity: 0;
        transform: translateY(-250px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/*--------------------------*/


/* ==========================================================
contact us   صورة وخلفية صفحة About Us فقط
   ========================================================== */

.contacts-hero{
    height: 50vh !important;
    min-height: 600px !important;
    max-height: none !important;
    width: 100% !important;
    background-image:
        linear-gradient(
            rgba(75, 57, 133, 0.78),
            rgba(75, 57, 133, 0.78)
        ),
        url("../img/qweqwewqe.jpg")!important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ==========================================================
   ABOUT US - تثبيت الـ TOP BAR في الأعلى
   ========================================================== */

.contacts-hero .top-bar-content {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    margin: 0 auto !important;
    padding-top: 20px !important;

    z-index: 100 !important;
}


/* الـ Container الداخلي */
.contacts-hero .top-bar-content > .container {
    position: static !important;

    width: 100% !important;

    margin: 0 auto !important;
}




#contsro {
    position: absolute !important;

    top: 60% !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: none !important;

    transform: translateY(-50%) !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;

    z-index: 10 !important;
}


/* مجموعة contsro */
#contsro .about-hero-inner {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    width: 100% !important;
}


/* عنوان contsro */
#contsro .about-hero-inner h1 {

    margin: 0 0 10px 0 !important;

    text-align: center !important;

}


/* الكتابة الصغيرة */
#contsro .about-hero-subtitle {

    display: block !important;

    width: auto !important;

    margin: 0 !important;

    text-align: center !important;

    color: #ffffff !important;

}
#contsro .about-hero-subtitle a {
    color: #ffffff !important;
    text-decoration: none !important;
}

#contsro .about-hero-subtitle a:hover {
    color: #d2b551 !important;
}


/* ==========================================================
   ABOUT US HERO TEXT - SLIDE UP
   ========================================================== */

#contsro .about-hero-inner {
    opacity: 0;
    transform: translateY(180px);
    animation: aboutUsTextUp 1.2s ease-out forwards;
}


/* الحركة من أسفل إلى أعلى */
@keyframes aboutUsTextUp {

    from {
        opacity: 0;
        transform: translateY(180px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}
/* ==========================================================
   ABOUT US - TWO TITLES SYNCHRONIZED ANIMATION
   ========================================================== */


/* ----------------------------------------------------------
   العنوان الأول داخل الـ HERO
   يطلع من أسفل إلى أعلى
   ---------------------------------------------------------- */

#contsro .about-hero-inner {
    opacity: 0;
    transform: translateY(250px);

    animation: aboutHeroTextUp 1.4s ease-out forwards;
}

/* ==========================================================
   CONTACT US - MESSAGE SECTION
   ========================================================== */

.contact-message-section {
    width: 100%;
    padding: 35px 0 45px;
    position: relative;
    overflow: hidden;

    /* الخلفية */
    background-color: #ffffff;
}


/* ==========================================================
   CONTAINER
   ========================================================== */

.contact-message-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
    padding: 0 20px;

    box-sizing: border-box;

    position: relative;
    z-index: 2;
}


/* ==========================================================
   TITLE
   ========================================================== */

.contact-message-title {
    width: 100%;

    text-align: center;

    margin-bottom: 55px;
}


.contact-message-title span {
    display: block;

    margin-bottom: 12px;

    color: #d4af37;

    font-size: 17px;
    font-weight: 400;
}


.contact-message-title h2 {
    margin: 0;

    color: #51418b;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.15;

    text-transform: uppercase;

    text-align: center;
}


/* ==========================================================
   MAIN CONTENT
   ========================================================== */

.contact-message-content {
    width: 100%;

    display: grid;

    grid-template-columns: 540px 1fr;

    column-gap: 110px;

    align-items: start;
}


/* ==========================================================
   FORM
   ========================================================== */

.contact-message-form {
    width: 100%;
}


.contact-message-form input,
.contact-message-form textarea {
    width: 100%;

    box-sizing: border-box;

    display: block;

    border: none;
    outline: none;

    background-color: #ffffff;

    box-shadow: 0 4px 18px rgba(81, 65, 139, 0.08);

    padding: 0 15px;

    margin: 0 0 16px;

    color: #222;

    font-family: inherit;
}


/* INPUTS */

.contact-message-form input {
    height: 60px;

    font-size: 14px;
}


/* TEXTAREA */

.contact-message-form textarea {
    height: 148px;

    padding-top: 18px;

    font-size: 14px;

    resize: none;
}


/* PLACEHOLDER */

.contact-message-form input::placeholder,
.contact-message-form textarea::placeholder {
    color: #777777;

    opacity: 1;

    font-size: 14px;
}


/* ==========================================================
   SEND BUTTON
   ========================================================== */

.contact-message-form button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 178px;

    height: 51px;

    padding: 0 28px;

    border: none;
    border-radius: 5px;

    background-color: #51418b;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}


.contact-message-form button:hover {
    background-color: #403276;

    transform: translateY(-2px);
}


/* ==========================================================
   CONTACT INFORMATION
   ========================================================== */

.contact-message-info {
    width: 100%;

    text-align: center;
}


/* ==========================================================
   OFFICE BLOCK
   ========================================================== */

.contact-office {
    width: 100%;

    margin: 0 0 25px;

    text-align: center;
}


/* OFFICE TITLE */

.contact-office h3 {
    margin: 0 0 8px;

    color: #51418b;

    font-size: 24px;
    font-weight: 600;

    line-height: 1.3;
}


/* OFFICE TEXT */

.contact-office p {
    margin: 0 0 4px;

    color: #111111;

    font-size: 15px;
    font-weight: 400;

    line-height: 1.45;
}


/* PHONE / EMAIL */

.contact-office p span {
    color: #51418b;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 991px) {

    .contact-message-container {
        max-width: 92%;
    }


    .contact-message-title {
        margin-bottom: 45px;
    }


    .contact-message-title h2 {
        font-size: 36px;
    }


    .contact-message-content {
        grid-template-columns: 1fr 1fr;

        column-gap: 45px;
    }


    .contact-office h3 {
        font-size: 21px;
    }


    .contact-office p {
        font-size: 14px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .contact-message-section {
        padding: 35px 0 45px;
    }


    .contact-message-container {
        max-width: 100%;

        padding: 0 20px;
    }


    .contact-message-title {
        margin-bottom: 35px;
    }


    .contact-message-title span {
        font-size: 16px;
    }


    .contact-message-title h2 {
        font-size: 30px;

        line-height: 1.2;
    }


    .contact-message-content {
        display: flex;

        flex-direction: column;

        gap: 40px;
    }


    .contact-message-form {
        width: 100%;
    }


    .contact-message-form input {
        height: 55px;
    }


    .contact-message-form textarea {
        height: 140px;
    }


    .contact-message-info {
        width: 100%;
    }


    .contact-office {
        margin-bottom: 30px;
    }


    .contact-office h3 {
        font-size: 21px;
    }


    .contact-office p {
        font-size: 14px;
    }

}

/* ==========================================================
   CONTACT US - INCREASE TEXT SIZE
   ========================================================== */

/* الكتابة داخل الفورم */
.contact-message-form input,
.contact-message-form textarea {
    font-size: 16px !important;
}

/* Placeholder */
.contact-message-form input::placeholder,
.contact-message-form textarea::placeholder {
    font-size: 16px !important;
}


/* ==========================================================
   CONTACT INFORMATION - RIGHT SIDE
   ========================================================== */

.contact-office h3 {
    font-size: 27px !important;
}

.contact-office p {
    font-size: 17px !important;
}

.contact-office p span {
    font-size: 17px !important;
}


/* ==========================================================
   BUTTON
   ========================================================== */

.contact-message-form button {
    font-size: 16px !important;
}

/* ==========================================================
   CONTACT US - GOOGLE MAP
   ========================================================== */

.contact-google-map {

    width: 100%;

    max-width: 1400px;

    margin: 50px auto 80px;

    padding: 0 20px;

    box-sizing: border-box;
}


.contact-google-map iframe {

    display: block;

    width: 100%;

    height: 450px;

    border: 0;

    border-radius: 5px;

    box-shadow: 0 4px 20px rgba(81, 65, 139, 0.12);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 991px) {

    .contact-google-map {

        max-width: 92%;

        padding: 0;
    }

    .contact-google-map iframe {

        height: 400px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .contact-google-map {

        max-width: 100%;

        padding: 0 20px;

        margin-top: 40px;
    }

    .contact-google-map iframe {

        height: 350px;
    }

}

.insurance-authority-logo {
    width: 170px;
    height: auto;
    display: block;
}

.clients-slider .client-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.clients-slider .client-item img {
    max-width: 64% !important;
    max-height: 64% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* =========================================
   CONTACT US SECTION
========================================= */

.contact-section {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 30px 60px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    color: #4b438f;
}


/* =========================================
   HEADER
========================================= */

.contact-header {
    text-align: center;
    margin-bottom: 30px;
}

.contact-subtitle {
    display: block;
    color: #d6a928;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 8px;
}

.contact-header h2 {
    margin: 0;
    color: #3f2c86;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
}

.contact-header p {
    max-width: 900px;
    margin: 12px auto 0;
    color: #68718f;
    font-size: 18px;
    line-height: 1.6;
}


/* =========================================
   MAIN TWO COLUMNS
========================================= */

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: stretch;
}


/* =========================================
   CONTACT FORM BOX
========================================= */

.contact-form-box {
    background: #ffffff;
    border: 1px solid #dfe2ec;
    border-radius: 8px;
    padding: 28px 30px;
    box-shadow: 0 4px 15px rgba(63, 44, 134, 0.04);
    box-sizing: border-box;
}

.contact-form-box h3 {
    margin: 0 0 6px;
    color: #3f2c86;
    font-size: 28px;
    font-weight: 700;
}

.form-description {
    margin: 0 0 18px;
    color: #66708d;
    font-size: 16px;
    line-height: 1.5;
}


/* =========================================
   FORM FIELDS
========================================= */

.form-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
    border: 1px solid #dce1eb;
    border-radius: 6px;
    background: #ffffff;
    box-sizing: border-box;
    transition: 0.3s ease;
}

.form-field:focus-within {
    border-color: #4b3b91;
    box-shadow: 0 0 0 2px rgba(75, 59, 145, 0.08);
}

.field-icon {
    width: 48px;
    min-width: 48px;
    text-align: center;
    color: #4b438f;
    font-size: 20px;
}

.form-field input,
.form-field textarea {
    width: 100%;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #333333;
    font-size: 15px;
    font-family: inherit;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #737b94;
    opacity: 1;
}


/* =========================================
   MESSAGE FIELD
========================================= */

.message-field {
    height: 105px;
    align-items: flex-start;
}

.message-field .field-icon {
    padding-top: 16px;
}

.message-field textarea {
    height: 100%;
    padding: 15px 10px 15px 0;
    resize: vertical;
    line-height: 1.5;
}


/* =========================================
   SEND BUTTON
========================================= */

.send-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    width: 280px;
    height: 50px;

    margin-top: 14px;

    border: none;
    border-radius: 5px;

    background: #4b3b91;
    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition: all 0.3s ease;
}

.send-button:hover {
    background: #392c78;
    transform: translateY(-1px);
}

.send-arrow {
    font-size: 18px;
}


/* =========================================
   BRANCHES
========================================= */

.branches-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* =========================================
   BRANCH CARD
========================================= */

.branch-card {
    display: flex;
    align-items: center;

    min-height: 125px;

    padding: 16px 18px;

    background: #ffffff;

    border: 1px solid #dfe2ec;
    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(63, 44, 134, 0.04);

    box-sizing: border-box;
}


/* =========================================
   BRANCH ICON
========================================= */

.branch-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 92px;
    min-width: 92px;
    height: 92px;

    margin-right: 28px;

    border-radius: 7px;

    background: #4b3b91;

    color: #ffffff;

    font-size: 42px;
}


/* =========================================
   BRANCH CONTENT
========================================= */

.branch-content {
    flex: 1;
}

.branch-content h3 {
    margin: 0 0 8px;

    color: #2f2078;

    font-size: 21px;
    font-weight: 700;
}

.branch-info p {
    margin: 3px 0;

    color: #68718f;

    font-size: 15px;
    line-height: 1.45;
}

.branch-info p span {
    display: inline-block;

    width: 25px;

    color: #d6a928;

    font-weight: bold;
    font-size: 16px;
}


/* =========================================
   GOOGLE MAP
========================================= */

.contact-map {
    width: 100%;
    margin-top: 20px;

    overflow: hidden;

    border-radius: 8px;

    border: 1px solid #dfe2ec;

    box-shadow: 0 4px 15px rgba(63, 44, 134, 0.05);
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 360px;

    border: 0;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px) {

    .contact-section {
        padding: 20px 20px 50px;
    }

    .contact-header h2 {
        font-size: 34px;
    }

    .contact-header p {
        font-size: 16px;
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .branch-card {
        min-height: 115px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .contact-section {
        padding: 15px 12px 40px;
    }

    .contact-header {
        margin-bottom: 22px;
    }

    .contact-subtitle {
        font-size: 16px;
    }

    .contact-header h2 {
        font-size: 27px;
        line-height: 1.25;
    }

    .contact-header p {
        font-size: 14px;
        line-height: 1.5;
    }


    /* Form */

    .contact-form-box {
        padding: 22px 18px;
    }

    .contact-form-box h3 {
        font-size: 24px;
    }

    .form-description {
        font-size: 14px;
    }

    .form-field {
        height: 48px;
    }

    .message-field {
        height: 110px;
    }

    .send-button {
        width: 100%;
    }


    /* Branch */

    .branch-card {
        min-height: auto;
        padding: 15px;
        align-items: flex-start;
    }

    .branch-icon {
        width: 65px;
        min-width: 65px;
        height: 65px;

        margin-right: 15px;

        font-size: 30px;
    }

    .branch-content h3 {
        font-size: 18px;
    }

    .branch-info p {
        font-size: 13px;
    }

    .branch-info p span {
        width: 20px;
    }


    /* Map */

    .contact-map iframe {
        height: 280px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .contact-header h2 {
        font-size: 23px;
    }

    .contact-form-box {
        padding: 18px 14px;
    }

    .branch-card {
        padding: 13px;
    }

    .branch-icon {
        width: 55px;
        min-width: 55px;
        height: 55px;

        margin-right: 12px;

        font-size: 25px;
    }

    .branch-content h3 {
        font-size: 16px;
    }

    .branch-info p {
        font-size: 12px;
    }

}

.language-links {
    margin-top: 25px !important;
}

.branch-icon img {
    width: 85px;
    height: auto;
    object-fit: contain;
    display: block;
}

.send-button {
    background-color: #51418b; /* اللون الحالي */
    color: #fff;
    transition: background-color 0.3s ease;
}
.send-button:hover {
    background-color: #d2b452;
    transform: translateY(-2px);
}



@media (max-width: 576px) {

    /* تصحيح العمود الثاني في الفوتر */
    footer .col-lg-4:nth-child(2) {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
    }

	
    /* تصحيح الـ row الداخلي */
    footer .col-lg-4:nth-child(2) .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Quick Links */
    footer .col-lg-4:nth-child(2) .footer-links {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
	
	    .col-lg-4.mb-4.mb-lg-0:nth-child(2) > .footer-heading {
        margin-left: 12px !important;
        padding-left: 0 !important;
    }


    /* القائمة نفسها */
    footer .col-lg-4:nth-child(2) ul {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* العناصر */
    footer .col-lg-4:nth-child(2) li {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Insurance Authority */
    footer .col-lg-4:nth-child(2) .insurance-authority {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

}
.site-footer .footer-desc {
    text-align: justify !important;
    line-height: 1.5 !important;
    margin-bottom: 24px;
}
 
/* Fix clients slider direction on Arabic pages */
html[lang="ar"] .clients-slider,
html[lang="ar"] .clients-slider-wrapper,
html[lang="ar"] .clients-slider-track {
    direction: ltr;
}

/* تحسين الخط العربي */
html[lang="ar"] body,
html[lang="ar"] body button,
html[lang="ar"] body input,
html[lang="ar"] body textarea,
html[lang="ar"] body select,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
    font-family: 'Cairo', sans-serif !important;
}

/* ضبط اتجاه الهيدر العربي فقط */
html[lang="ar"] #headerx {
    direction: rtl;
}

html[lang="ar"] .top-bar-content {
    direction: rtl;
}

html[lang="ar"] .top-bar-content > .container {
    direction: rtl;
    flex-direction: row-reverse;
}

html[lang="ar"] .language-switcher {
    text-align: right;
}

html[lang="ar"] #addressx {
    direction: rtl;
}

html[lang="ar"] #navbar-box {
    direction: rtl;
}

html[lang="ar"] #nav {
    flex-direction: row-reverse;
}

html[lang="ar"] .hero-content-area {
    direction: rtl;
    text-align: right !important;
}

html[lang="ar"] .hero-content-area .row {
    direction: rtl;
}

html[lang="ar"] .hero-content-area .hero-btn {
    direction: rtl;
}

/* تكبير الخط في الهيرو العربي فقط */
html[lang="ar"] .hero-content-area .desktop-text {
    font-size: 22px !important;
    font-weight: 400 !important;
}

html[lang="ar"] .hero-content-area h1 {
    font-size: 58px !important;
    font-weight: 800 !important;
}

html[lang="ar"] .hero-content-area .hero-btn {
    font-size: 19px !important;
    min-width: 210px;
    padding: 17px 40px;
}


/* إنزال عنوان كروت الكارسول تحت الدائرة */
.service-card .service-icon {
    margin-bottom: 8px !important;
}

.service-card h3 {
    margin-top: 4px !important;
}


.language-switcher a:hover {
    color: #d2b551 !important;
    transition: color 0.3s ease;
}

/* Keep Arabic navbar items in the same positions as English */
html[lang="ar"] #navbar-box {
    direction: ltr;
}

html[lang="ar"] #nav {
    flex-direction: row;
}

html[lang="ar"] #nav a {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .top-bar-content {
    direction: rtl;
}

/* Keep phone number in correct order */
html[lang="ar"] .top-bar-content a[href^="tel:"],
html[lang="ar"] .top-bar-content .phone-number {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    text-align: left;
}

/* Keep email address in correct order */
html[lang="ar"] .top-bar-content a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    text-align: left;
}

html[lang="ar"] {
    direction: rtl;
}

html[lang="ar"] a[href^="tel:"],
html[lang="ar"] a[href^="fax:"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Fix email icon position in Arabic header only */
html[lang="ar"] #addressx .email-info {
    flex-direction: row-reverse;
}

html[lang="ar"] #addressx .phone-info {
    flex-direction: row-reverse;
}

html[lang="ar"] #addressx .contact-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html[lang="ar"] #addressx .contact-icon-box img {
    display: block;
    width: 45px;
    height: 45px;
    object-fit: contain;
}


html[lang="ar"] #headerx .shape-3 {
    left: 15%;
    right: auto;
}



/* تنسيق قسم من نحن - الصفحة العربية فقط */
html[lang="ar"] .about-section {
    direction: rtl;
    text-align: right;
}

/* العنوان الرئيسي */
html[lang="ar"] .about-section .about-intro h2 {
    direction: rtl;
    text-align: right;
    font-size: 46px;
    line-height: 1.5;
    margin-bottom: 15px;
    color: #514783;
}

/* الفقرة الأولى */
html[lang="ar"] .about-section .about-intro p {
    direction: rtl;
    text-align: justify;
    font-size: 21px;
    line-height: 1.9;
    letter-spacing: 0;
    color: #333333;
    margin: 0;
}

/* النص الموجود بجانب الصورة */
html[lang="ar"] .about-section .about-details-text {
    direction: rtl;
    text-align: right;
}

/* الفقرات بجانب الصورة */
html[lang="ar"] .about-section .about-details-text p {
    direction: rtl;
    text-align: justify;
    font-size: 20px;
    line-height: 1.9;
    letter-spacing: 0;
    color: #333333;
    margin-bottom: 28px;
}

/* ضبط الخط على الموبايل */
@media (max-width: 768px) {
    html[lang="ar"] .about-section .about-intro h2 {
        font-size: 34px;
    }

    html[lang="ar"] .about-section .about-intro p,
    html[lang="ar"] .about-section .about-details-text p {
        font-size: 17px;
        line-height: 1.8;
        text-align: right;
    }
}


/* حقل رقم الهاتف - الصفحة العربية */
html[lang="ar"] input[type="tel"],
html[lang="ar"] input[name*="phone"],
html[lang="ar"] input[name*="tel"] {
    direction: rtl !important;
    text-align: right !important;
}

/* مكان النص الإرشادي داخل الحقل */
html[lang="ar"] input[type="tel"]::placeholder,
html[lang="ar"] input[name*="phone"]::placeholder,
html[lang="ar"] input[name*="tel"]::placeholder {
    direction: rtl;
    text-align: right;
}


/* الفروع - الصفحة العربية فقط */
html[lang="ar"] .branch-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
    direction: rtl;
    padding: 20px 25px;
}

/* تثبيت حجم الأيقونة */
html[lang="ar"] .branch-icon {
    flex: 0 0 90px;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* الصورة داخل الأيقونة */
html[lang="ar"] .branch-icon img {
    display: block;
    max-width: 90px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* محتوى الفرع */
html[lang="ar"] .branch-content {
    flex: 1;
    min-width: 0;
    text-align: right;
    direction: rtl;
}

/* عنوان الفرع */
html[lang="ar"] .branch-content h3 {
    text-align: right;
    margin-bottom: 10px;
}

/* بيانات الفرع */
html[lang="ar"] .branch-info p {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    direction: rtl;
    text-align: right;
    margin-bottom: 8px;
}

/* الأيقونات الصغيرة بجانب بيانات الفرع */
html[lang="ar"] .branch-info p span {
    flex: 0 0 18px;
    width: 18px;
    text-align: center;
}


/* تنسيق كروت الرؤية والرسالة والقيم - عربي فقط */
html[lang="ar"] .about-values-section {
    direction: rtl;
}

html[lang="ar"] .about-values-section .about-info-card {
    direction: rtl;
    text-align: right;
    padding: 28px 30px;
    box-sizing: border-box;
}

/* العناوين */
html[lang="ar"] .about-values-section .about-info-card h3 {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.6;
    margin: 0 0 12px;
}

/* الخط الذهبي أسفل العنوان */
html[lang="ar"] .about-values-section .about-card-line {
    margin-right: 0;
    margin-left: auto;
    margin-bottom: 18px;
}

/* نص الرؤية والرسالة */
html[lang="ar"] .about-values-section .about-info-card p {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', sans-serif;
    font-size: 19px;
    line-height: 2;
    letter-spacing: 0;
    word-spacing: 0;
    margin: 0;
}

/* قائمة القيم */
html[lang="ar"] .about-values-section .about-info-card ul {
    direction: rtl;
    text-align: right;
    padding-right: 20px;
    padding-left: 0;
    margin: 0;
}

/* كل قيمة في القائمة */
html[lang="ar"] .about-values-section .about-info-card li {
    font-family: 'Cairo', sans-serif;
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 5px;
    padding-right: 0;
}

/* ضبط الخطوط على الموبايل */
@media (max-width: 768px) {
    html[lang="ar"] .about-values-section .about-info-card {
        padding: 22px 20px;
    }

    html[lang="ar"] .about-values-section .about-info-card h3 {
        font-size: 24px;
    }

    html[lang="ar"] .about-values-section .about-info-card p,
    html[lang="ar"] .about-values-section .about-info-card li {
        font-size: 16px;
        line-height: 1.85;
    }
}


/* الخطوط أسفل العناوين - الصفحة العربية فقط */
html[lang="ar"] .about-values-section .about-card-line {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* جعل الخط الرمادي يمتد إلى اليسار مثل كارت رسالتنا */
html[lang="ar"] .about-values-section .about-card-line::after {
    left: auto !important;
    right: 45px !important;
}



/* مميزاتنا - الصفحة العربية فقط */
html[lang="ar"] #writes-benefits .col-md-6 {
    gap: 14px !important;
}

/* تكبير النص وزيادة المسافة بين السطور */
html[lang="ar"] #writes-benefits h6 {
    font-size: 17px !important;
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
}

/* منع التصاق النص بالأيقونة */
html[lang="ar"] #writes-benefits .icon-circle {
    flex-shrink: 0;
    margin: 0 0 15 0 px !important;
	
}


/* تكبير دوائر الأيقونات في الصفحة العربية فقط */
html[lang="ar"] #writes-benefits .icon-circle {
    min-width: 60px !important;
    min-height: 60px !important;
    width: 60px !important;
    height: 60px !important;
    flex-shrink: 0;
	padding-top: 10 px !important;
}

/* تكبير الأيقونات داخل الدوائر */
html[lang="ar"] #writes-benefits .icon-circle img.custom-icon {
    width: 55px !important;
    height: 55px !important;
    object-fit: contain !important;
}

/* رفع الكتابة قليلًا بمحاذاة الدوائر - عربي فقط */
html[lang="ar"] #writes-benefits h6 {
    transform: translateY(-7px);
}


/* توحيد مواضع الأشكال في الصفحات العربية */
html[lang="ar"] .animated-shapes-container .shape-1 {
    left: 5% !important;
    right: auto !important;
}

html[lang="ar"] .animated-shapes-container .shape-2 {
    right: 8% !important;
    left: auto !important;
}

html[lang="ar"] .animated-shapes-container .shape-3 {
    right: 15% !important;
    left: auto !important;
}

html[lang="ar"] .animated-shapes-container .shape-4 {
    left: 6% !important;
    right: auto !important;
}