/* Glogal */
.custom-arrow-btn {
margin: 0 5px;

}
html[lang="ar"] .custom-arrow-btn {
    transform: rotate(270deg);
}
/* Glogal */



/* ========================= NAVBAR (START) ========================= */
/* ========================= NAVBAR (START) ========================= */
/* ========================= NAVBAR (START) ========================= */
/* ========================= NAVBAR (START) ========================= */
/* ========================= NAVBAR (START) ========================= */
/* ========================= NAVBAR (START) ========================= */
ul.navbar-nav {
    border-top: 2px solid rgb(255 255 255 / 5%);
    border-bottom: 2px solid rgb(255 255 255 / 5%);
    border-left: 3px solid rgb(255 255 255 / 15%);
    border-right: 3px solid rgb(255 255 255 / 15%);
    border-radius: 10px;
    background-color: #1E293952;
}
#navbar-bs {
    background-color: #10182852;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.navbar-toggler {
        background: #ffffff;
}
#navbarNav .nav-link {
    padding: 0.7rem 1.5rem; 
    border-radius: 0.375rem;
    color: white; 
}
a.nav-link.fw-semibold {
    color: white;
}
#navbarNav .nav-link:hover {
    color: #438BCF !important;
    background-color: rgba(13, 110, 253, 0.1);
    
}
#navbarNav .nav-link.active {
    color: #438BCF !important;
    background-color: rgba(13, 110, 253, 0.15);
}
@media (max-width: 767.98px) {
    ul.navbar-nav {
        background-color: #1E2939; 
        border-radius: 0.5rem;
        margin-top: 1rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
        padding: 0.5rem 0.2rem; 
        width: 100%; 
    }
    #navbarNav .nav-link {
        padding: 0.5rem 1rem;
        text-align: right;
    }
}
/* زر اللغة */
.lang-btn {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.25);
    color: white;
    padding: 0.35rem 0.65rem;
    border-radius: 10px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lang-btn:hover {
    border-color: #438BCF;
    color: #438BCF;
    background-color: rgba(13, 110, 253, 0.12);
}

/* القائمة المنسدلة */
.lang-dropdown {
    position: relative;
}

.lang-menu {
    position: absolute;
    top: 45px;
    right: 0;
    background: #1E293B;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 0.4rem 0;
    list-style: none;
    min-width: 130px;
    display: none; /* مخفية */
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
    z-index: 20;
}

.lang-menu li a {
    display: block;
    padding: 0.5rem 1rem;
    color: white;
    text-decoration: none;
    font-size: 0.95rem;
    transition: 0.3s;
}

.lang-menu li a:hover {
    background-color: rgba(13,110,253,0.15);
    color: #438BCF;
}

/* عند فتح المنيو */
.lang-dropdown.active .lang-menu {
    display: block;
}

/* موبايل */
@media (max-width: 767.98px) {
    .lang-btn {
        padding: 0.3rem 0.5rem;
        font-size: 1rem;
    }
}
@media (min-width: 426px) and (max-width: 769px) {
    .navbar-container {
        justify-content: center !important;
    }
}

/* ========================= NAVBAR (END) ========================= */
/* ========================= NAVBAR (END) ========================= */
/* ========================= NAVBAR (END) ========================= */
/* ========================= NAVBAR (END) ========================= */















/* ========================= FOOTER (START) ======================== */
/* ========================= FOOTER (START) ======================== */
/* ========================= FOOTER (START) ======================== */
/* ========================= FOOTER (START) ======================== */
/* ========================= FOOTER (START) ======================== */
/* ========================= FOOTER (START) ======================== */
/* ========================= FOOTER STYLES (FINAL NO-VAR VERSION) ========================= */
/* ========================= FOOTER STYLES (FINAL NO-VAR VERSION) ========================= */

/* --------- Footer Base --------- */
.footer-v3.bg-dark {
    background-color: #27272A !important; 
    overflow: hidden; 
}

.footer-v3 .text-info { color: #438BCF !important; }
.footer-v3 .text-secondary { color: #ccc !important; }


/* ------------------- 1. Column Entrance Animation ------------------- */

.footer-v3 .col-md-4 {
    opacity: 0; 
    transform: translateY(30px);
    animation: footerColumns 0.9s ease-out forwards;
}

.footer-v3 .col-md-4:nth-child(1) { animation-delay: 0.2s; }
.footer-v3 .col-md-4:nth-child(2) { animation-delay: 0.35s; }
.footer-v3 .col-md-4:nth-child(3) { animation-delay: 0.5s; }

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


/* ------------------- 2. Social Icons Hover Effect ------------------- */

/* ------------------- 1. Social Icons Base (التعديل) ------------------- */

.social-icons a {
    /* تحويل الرابط إلى كتلة مرنة لتحديد الخلفية والشكل */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; /* حجم ثابت للحاوية */
    height: 36px;
    padding: 0;
    border-radius: 50%; /* لجعل الحاوية دائرية */
    background-color: rgba(255, 255, 255, 0.05); /* خلفية شفافة خفيفة في الحالة العادية */
    transition: background-color 0.4s ease, transform 0.4s ease;
}

.social-icons a img {
    /* إزالة التكبير من الصورة نفسها، والتحكم فيه من الحاوية */
    transition: transform 0.3s ease; 
}

.social-icons a:hover img {
    /* تكبير الأيقونة قليلاً */
    transform: scale(1.1); 
    opacity: 1;
}


/* ------------------- 2. Specific Hover Colors (التلوين) ------------------- */

/* Facebook: أزرق فيسبوك */
.social-icons a[title="Facebook"]:hover {
    background-color: #1877F2; 
    transform: scale(1.1);
    color: white;
}

/* Twitter (X): أسود/داكن */
.social-icons a[title="Twitter"]:hover {
    background-color: #000000;
    transform: scale(1.1);
}

/* Pinterest: أحمر بنترست */
.social-icons a[title="Pinterest"]:hover {
    background-color: #E60023;
    transform: scale(1.1);
}

/* LinkedIn: أزرق لينكدان */
.social-icons a[title="LinkedIn"]:hover {
    background-color: #0A66C2;
    transform: scale(1.1);
}

/* Telegram: أزرق سماوي */
.social-icons a[title="Telegram"]:hover {
    background-color: #0088CC;
    transform: scale(1.1);
}
/* ------------------- 3. Contact & Location Icons Styling ------------------- */

.footer-v3 {
    padding-top: 8rem!important;
}
.footer-v3 .icon-img-invert {
    /* تطبيق التلوين الأزرق عبر الفلتر */
    filter: invert(36%) sepia(85%) saturate(301%) hue-rotate(180deg) brightness(97%) contrast(90%);
    opacity: 0.8; 
    transition: filter 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
}

/* تأثير HOVER على عنصر القائمة بأكمله */
.footer-v3 .list-unstyled li:hover img {
    transform: translateX(3px) scale(1.05);
    opacity: 1;
}


/* ------------------- 4. Link Hover Effect (Growing Underline) ------------------- */

.list-unstyled a {
    position: relative;
    color: #ccc !important; 
    transition: color 0.3s ease;
}

.list-unstyled a:hover {
    color: #438BCF !important; 
}

/* خط سفلي ينمو عند الـ HOVER */
.list-unstyled a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 1.5px;
    bottom: 0;
    left: 0;
    background-color: #438BCF;
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.list-unstyled a:hover::after {
    width: 100%; /* الخط ينمو من اليسار لليمين */
}

/* ------------------- Footer Bottom Image ------------------- */
.footer-v3 .logo-footer-img {
    /* max-width: 700px; */
    height: auto;
    opacity: 0;
    animation: fadeLogo 1s ease forwards;
    animation-delay: 0.7s;
}

@keyframes fadeLogo {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}
/* ========================= FOOTER (END) ======================== */
/* ========================= FOOTER (END) ======================== */
/* ========================= FOOTER (END) ======================== */
/* ========================= FOOTER (END) ======================== */
/* ========================= FOOTER (END) ======================== */
/* ========================= FOOTER (END) ======================== */















/* ====================================================== */
/* ====================================================== */
/* =================== START HOME PAGE  ================== */
/* ====================================================== */
/* ====================================================== */
/* ====================================================== */
/* ================== SLIDER ================== */
/* ================== SLIDER ================== */
.swiper {
    width: 100%;
    height: 100vh;
}

.swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay */
.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.60);
    z-index: 1;
}

/* Content */
.slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: #fff;
    width: 90%;
    max-width: 700px;
}

.slide-content h2,
.slide-content p {
    opacity: 0;
    transform: translateY(20px);
}

/* Fade In Animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.delay-0 { animation-delay: 0s; }
.delay-300 { animation-delay: .3s; }
.delay-500 { animation-delay: .5s; }

.swiper-pagination-bullet {
    background: #438BCF !important;
}
.swiper-button-next,
.swiper-button-prev {
    color: #438BCF;
}

/* ================= SCROLL INDICATOR ================ */
.scroll-indicator {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    color: #fff;
    text-decoration: none;
    animation: bounceInfinite 1.8s infinite ease-in-out;
}

.scroll-indicator i {
    font-size: 36px;
    width: 45px;
    height: 45px;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    transition: .3s;
}

.scroll-indicator:hover i {
    border-color: #438BCF;
    color: #438BCF;
    box-shadow: 0 0 12px rgba(67,139,207,0.6);
}

/* حركة دائمة */
@keyframes bounceInfinite {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-12px); }
    50%  { transform: translateY(0); }
    70%  { transform: translateY(12px); }
    100% { transform: translateY(0); }
}


/* SECTION 2 */
.section-2-bg {
    background-color: #252525;
    color: #fff;
}
/* ====== VIDEO HOVER EFFECT ====== */

.video-wrapper {
    overflow: hidden;
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.video-wrapper iframe {
    transition: transform 0.5s ease;
}

/* عند تمرير الماوس */
.video-wrapper:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 35px rgba(0,0,0,0.55);
}

/* عمل زوم بسيط للفيديو */
.video-wrapper:hover iframe {
    transform: scale(1.08);
}

/* إضافة لمعة خفيفة حسب ذوقك */
.video-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
    transition: box-shadow 0.5s ease;
}

.video-wrapper:hover::after {
    box-shadow: 0 0 20px 6px rgba(255, 255, 255, 0.2);
}




/* ================== FIXED HEIGHTS FOR FIRST THREE CARDS ================== */

.grid-item-1 { 
    min-height: 220px !important;   /* كارد قصير */
}

.grid-item-2 { 
    min-height: 350px !important;   /* كارد متوسط */
}

.grid-item-3 { 
    min-height: 480px !important;   /* كارد طويل */
}

/* البقية تبقى كما هي */
.grid-item-4, 
.grid-item-6, 
.grid-item-7, 
.grid-item-8 {
    min-height: 300px;
}

/* ================== YOUR ORIGINAL GRID CODE ================== */

.section-diversity,
.bg-light-gray {
    background-color: #f0f0f4 !important;
}

p.fw-semibold.mb-2.small.text-uppercase {
    color: #438BCF;
}

/* Grid */
.product-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Cards */
.product-card-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* Overlay */
.product-card-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.3) 100%);
    transition: background 0.5s ease;
}

/* Hover Effects */
.product-card-item:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.product-card-item:hover::before {
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
}

/* Overlay Text */
.product-overlay-text {
    position: relative; 
    z-index: 10; 
    color: #fff; 
    padding: 1rem;
    padding-top: 50px; 
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Grid Placement */
.grid-item-1 { grid-column: 1 / span 1; grid-row: 1 / span 1; }
.grid-item-4 { grid-column: 1 / span 1; grid-row: 2 / span 1; }

.grid-item-2 { grid-column: 2 / span 1; grid-row: 1 / span 2; } 

.grid-item-3 { grid-column: 3 / span 1; grid-row: 1 / span 1; }
.grid-item-6 { grid-column: 3 / span 1; grid-row: 2 / span 1; }
.grid-item-7 { grid-column: 3 / span 1; grid-row: 3 / span 1; }

/* الكارد الثامن يأخذ مكان الخامس */
.grid-item-8 {
    grid-column: 1 / span 2; /* عمود 1 و 2 */
    grid-row: 3 / span 1;    /* سطر واحد بالصف 3 */
}

/* Background Images */
.product-card-item.grid-item-1 { background-image: url('images/Products/1.png'); }
.product-card-item.grid-item-2 { background-image: url('images/Products/2.png'); }
.product-card-item.grid-item-3 { background-image: url('images/Products/3.png'); }
.product-card-item.grid-item-4 { background-image: url('images/Products/4.png'); }
/* .product-card-item.grid-item-5 { background-image: url('images/Products/5.png'); } */
.product-card-item.grid-item-6 { background-image: url('images/Products/6.png'); }
.product-card-item.grid-item-7 { background-image: url('images/Products/7.jpg'); }
.product-card-item.grid-item-8 { background-image: url('images/Products/5.png'); }

/* Responsive */
@media (max-width: 991.98px) {
    .product-grid-container {
        grid-template-columns: 1fr; 
        grid-template-rows: auto;
    }
    .product-card-item {
        grid-column: 1 / span 1 !important;
        grid-row: auto !important;
        min-height: 350px;
    }
}




/*  ===================== WHY CHOOSE US =====================  */
.icon-lg {
    width: 3rem; 
    height: 3rem; 
    stroke-width: 1.5; 
}

.feature-card {
    position: relative;
    overflow: hidden; 
    border: 1px solid #e0e0e0;
    transition: box-shadow 0.3s ease;
}
.feature-card:hover {
    background-color: #80ae3b15 !important;
}
.feature-card .me-3 {
    position: relative;
    z-index: 1; 
}
.feature-card .me-3 svg {
    color: #8cc63f !important; 
}

.feature-card::before {
    content: "";
    position: absolute;
    top: -50px; 
    right: -50px; 
    width: 150px;
    height: 150px;
    background-color: rgba(140, 198, 63, 0.08); 
    border-radius: 50%;
    z-index: 0;
    transform: rotate(45deg); 
}

.feature-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.bg-light-subtle {
    background-color: #f8f9fa !important; 
}
.display-5 {
    font-size: 3rem !important; 
    line-height: 1.2;
}
/*  ===================== WHY CHOOSE US =====================  */

/* ================== OUR VALUED CLIENTS ================== */

.section-clients .text-primary {
    color: #438BCF !important;
}

.clientLogosSwiper {
    width: 100%;
    height: auto; 
    padding-top: 20px;
    padding-bottom: 20px;
}
.clientLogosSwiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.clientLogosSwiper .swiper-slide img {
    max-height: 80px;
    width: auto;
    opacity: 0.7;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.clientLogosSwiper .swiper-slide img:hover {
    transform: scale(1.15);
    opacity: 1;
}

/*  ===================== OUR VALUED CLIENTS =====================  */

/* ===================== OUR PRESENCE ===================== */

/* Branch Cards */
.branch-card {
    height: 400px;
    cursor: pointer;
}
.branch-card-p {
    padding: 0;
    margin-top: 0;
}
.branch-img {
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
    transition: transform 0.5s ease;
}
.branch-card:hover .branch-img {
    transform: scale(1.05);
    filter: brightness(0.9);
}
.card-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.65) 25%, rgba(0,0,0,0) 75%);
    z-index: 2;
    justify-content: flex-end;
}

/* Tags */
.branch-tag {
    display: inline-block;
    padding: 0.3em 0.8em;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 5px;
    width: fit-content;
}
.badge-span-blue { background-color: #438BCF3D; }
.badge-span-yellow { background-color: #F2CF133D; }

/* Colors */
.bg-light-gray { background-color: #f0f0f4 !important; }
.text-primary { color: #438BCF !important; }
.text-dark { color: #212529 !important; }

/* Product Card */
.product-card-item-our {
    min-height: 400px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease, filter 0.3s ease;
    border-radius: 0px;
}


/* Overlay */
.product-card-item-our::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    background: linear-gradient(to top,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.7) 40%,
        rgba(0,0,0,0.4) 70%);
    transition: opacity 1s ease, background 1s ease;
}

/* Overlay Text */
.product-overlay-text {
    position: relative;
    z-index: 10;
    color: #fff;
    padding: 50px 1rem 1rem;
    transition: transform 0.3s ease;
}
.product-overlay-text h4 {
    color: #fff;
    font-size: 1.25rem;
}

/* Short Description */
.product-short-desc {
    transition: opacity 0.3s ease;
}

/* Hover Details */
.product-full-details {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, height 0.3s ease;
}
.product-full-details p {
    font-size: 0.875rem;
    color: #e0e0e0;
}
.product-card-item-our:hover::before {
    background: linear-gradient(to top,
        rgba(0,0,0,0.98) 0%,
        rgba(0,0,0,0.85) 40%,
        rgba(0,0,0,0.6) 70%);
}
.product-card-item-our:hover .product-short-desc {
    opacity: 0;
    height: 0;
    margin-bottom: 0 !important;
}
.product-card-item-our:hover .product-full-details {
    opacity: 1;
    visibility: visible;
    height: auto;
    transform: translateY(0);
}

/* Background Images */
.product-card-item-our.product-1 { background-image: url('images/Branches/branche1.jpg'); }
.product-card-item-our.product-2 { background-image: url('images/Branches/branche2.jpg'); }
.product-card-item-our.product-3 { background-image: url('images/Branches/branche3.jpg'); }
.product-card-item-our.product-4 { background-image: url('images/Branches/branche4.jpg'); }
/* Buttons */
.btn-slide {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
    border: 1px solid #fff;
    margin: 11px;
}
@media screen and (max-width: 426px) {
    .btn-slide {
        padding: 0.75rem 1rem;
    }
}
.btn-slide:hover { opacity: 0.9; }

.product-actions-buttons .btn-group a {
    margin-right: 10px;
}
.product-actions-buttons .btn-group a:last-child {
    margin-right: 0;
}
.product-actions-buttons .btn-slide {
    border: 1px solid #438BCF;
    color: #438BCF;
    border-radius: 5px;
    margin: 5px;
}
.product-actions-buttons .btn-slide:hover {
    background: #357abb;
    color: #fff;
    box-shadow: 0 4px 12px rgba(67,139,207,0.4);
}

/* Buttons Inside Card */
.product-actions .btn-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
}
.product-actions .btn-dark {
    background-color: #212529;
    border-color: #212529;
    color: #fff;
    padding: 0.5rem 1rem;
}
.product-actions .btn-dark:hover {
    background-color: #343a40;
    border-color: #343a40;
}
/* ===================== END ===================== */
/* ====================================================== */
/* ====================================================== */
/* =================== END HOME PAGE  =================== */
/* ====================================================== */
/* ====================================================== */
/* ====================================================== */









/* ================== StartAbout us ================== */
.hero-banner {
    width: 100%;
    height: 60vh; 
    position: relative;
    overflow: hidden; 
}
.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.60);
    z-index: 1;
}
.slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: #fff;
    width: 90%;
    max-width: 700px;
}
.slide-content h1,
.slide-content p,
.slide-content .btn-group {
    opacity: 1; 
    transform: translateY(0); 
    animation: fadeInUp 0.7s ease forwards; 
}
.delay-0 { animation-delay: 0s; }
.delay-300 { animation-delay: .3s; }
.delay-500 { animation-delay: .5s; }
.btn-slide:hover {
    background: #438BCF;
    color: #fff;
    box-shadow: 0 4px 10px rgba(13,110,253,0.5);
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.section-2-bg {
    background-color: #404041;
    color: #fff;
}

/* ================== End About us ================== */


/* ================== Start WHO WE ARE ================== */

.section-dedication.bg-light {
    background-color: #f0f0f4 !important;
}
.image-experience-block {
    height: 350px;     
    display: flex;
    align-items: flex-end; 
}
.dedication-img {
    height: 100%; 
    object-fit: cover;
    z-index: 0;
}
.image-overlay {
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}
.experience-counter {
    top: 0%; 
    left: 0%; 
    z-index: 2; 
    text-align: left;
}
.experience-counter .display-1 {
    font-size: 6rem; 
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.btn-slide-button {
    text-decoration: none;
    color: #FFFFFF;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    margin: 5px;
    font-weight: 600;
    transition: 0.3s;
    background: #438BCF;
    box-shadow: 0 4px 10px rgba(13,110,253,0.5);
}
.btn-slide-button:hover {
    background: #2a6bbf;
    box-shadow: 0 6px 15px rgba(13,110,253,0.7);
}
.section-dedication .lead {
    font-size: 1.25rem;
    line-height: 1.6;
}
a.btn.btn-primary.btn-lg.fw-semibold.d-inline-flex.align-items-center {
    border-radius: 5px !important;
}
/* ================== End WHO WE ARE ================== */


/*  ======================= Start WHAT DRIVES US ======================= */
.custom-vision-mission-bg { background-color: #F4F4F5; }
.custom-vision-mission-color { color: #92C24A; }
.vision-mission-image-wrapper {
    height: 600px; 
    max-width: 1000px; 
    margin: 0 auto; 
}
.vision-mission-image-wrapper .block-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.2) saturate(0.8) brightness(0.9);
}
.vision-card, .mission-card {
    background-color: rgba(255, 255, 255, 0.75); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    width: 30%; 
    min-width: 250px;
    z-index: 10;
    transition: 0.3s ease;
}
.vision-card:hover, .mission-card:hover {
background-color: #80ae3b1c !important;
}
.vision-card {
    bottom: 15%; 
    left: 0%; 
}   
.mission-card {
    top: 15%;
    right: -2%; 
}
@media (max-width: 991.98px) { 
    .vision-card {
        bottom: 7%;
        left: 5%;
    }
    .mission-card {
        top: 21%;
        right: 5%;
    }
}
@media (max-width: 767.98px) {
    .vision-mission-image-wrapper {
        height: 400px; 
        margin-bottom: 2rem;
    }

    .vision-card, .mission-card {
        position: static !important; 
        width: 90% !important; 
        margin: 1rem auto; 
    }
}
/* ======================= End WHAT DRIVES US  ======================= */


/*  ======================= Start Our Core Values =======================  */
.custom-value {
    color: #438BCF;
}
.value-item {
    transition: box-shadow 0.4s ease, background-color 0.4s ease;
    cursor: default; 
    position: relative;
    padding: 1.25rem;
    border-radius: 0.75rem;
    background-color: #ffffff;
}
.value-item:hover {
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.08); 
    background-color: #f8fef8; 
}
.value-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #438BCF1F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.value-item:hover .value-icon-wrapper {
    transform: scale(1.1); 
    box-shadow: 0 0.5rem 1rem rgba(140, 198, 63, 0.15); 
}
.value-icon-wrapper img {
    width: 30px;
    height: 30px;
    transition: transform 0.4s ease;
}
.value-item:hover .value-icon-wrapper img {
    transform: scale(1.05);
}
/*  ======================= End Our Core Values =======================*/



/* ================== Start TEAM SECTION ================== */
.section-team.bg-dark-custom {
    background-color: #384236 !important; 
    color: #fff;
}
.section-team .text-success {color: #8cbf40 !important; }
.section-team .btn-read-more {
    background-color: #558b2f;
    border-color: #558b2f;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.section-team .btn-read-more:hover {
    background-color: #6a9544;
    transform: translateY(-2px);
}
.member-card {
    aspect-ratio: 1 / 1.15; 
    position: relative;
    overflow: visible; 
    border-radius: 0.75rem; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.member-img {
    border-radius: 0.75rem; 
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.5s ease, transform 0.5s ease;
}
.member-overlay-text {
    position: absolute;
    bottom: 0; 
    width: auto;    
    z-index: 15;
    width: 90%;
    right: 1rem;
    left: 1rem;
    transform: translateY(50%); 
    background: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(10px);        
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 0.75rem;             
    padding: 0.75rem 1rem; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); 
    
    transition: transform 0.3s ease, background 0.3s ease;
}
.member-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.member-card:hover .member-img {
    filter: grayscale(0%); 
    transform: scale(1.05);
}
.section-team.bg-dark-custom {
    background-color: #384236 !important; 
    color: #fff;
}
.section-team .text-success {
    color: #8cbf40 !important; 
}
.section-team .btn-success {
    background-color: #558b2f !important;
    border-color: #558b2f !important;
}
.member-card {
    aspect-ratio: 1 / 1.15; 
}
.member-img {
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease, transform 0.3s ease;
    filter: grayscale(100%);
}
.member-overlay-text {
    background: #FFFFFF29;    
    z-index: 10;
    border-radius:0.375rem; 
}
.member-card:hover .member-img {
    filter: grayscale(0%); 
    transform: scale(1.03);
}
.custom-member-card-margin {
    margin-bottom: 4rem;
}
.btn-slide-button-green {
    text-decoration: none;
    color: #FFFFFF;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    margin: 5px;
    font-weight: 600;
    transition: 0.3s;
    background: #688E30; 
    box-shadow: 0 4px 10px rgba(104, 142, 48, 0.5); 
}
.btn-slide-button-green:hover {
    background: #7BA035; 
    box-shadow: 0 6px 15px rgba(104, 142, 48, 0.7); 
}
/* ================== End TEAM SECTION ================== */




/* ================== Start WHAT DRIVES US ================== */
.section-clients .text-primary {
    color: #438BCF !important;
}
.clientLogosSwiper.SwiperAbout {
    width: 100%;
    padding: 20px 0;
}
.clientLogosSwiper.SwiperAbout .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.clientLogosSwiper.SwiperAbout .swiper-slide img {
    max-height: 80px;
    width: auto;
    opacity: 0.7;
    filter: grayscale(1);
    transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
}
.clientLogosSwiper.SwiperAbout .swiper-slide img:hover {
    transform: scale(1.15);
    opacity: 1;
    filter: grayscale(0);
}
.btn-nav {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd !important;
    background: #fff !important;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================== END WHAT DRIVES US ================== */





/* ================== TIMELINE FIX ================== */

.section-timeline .timeline-year {
    font-size: clamp(6rem, 15vw, 10rem); 
    line-height: 1;
    opacity: 0.2; 
    color: #999 !important; 
    position: absolute;
    z-index: 5; 
    white-space: nowrap;
}
.timeline-year {
    filter: brightness(0);
}
.timeline-card {
    backdrop-filter: blur(2px);
    background: #FFFFFF29 !important;
    border: #ffffff ;
    width: 350px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    position: absolute;
    z-index: 10; 
    transition: 0.3s ease;
}.timeline-card:hover {
        background-color: #80ae3b1c !important;
}
.timeline-container {
    height: 900px; 
}
.timeline-container .year-left {
    left: 0;
}
.timeline-container .card-right {
    left: 200px;
    top: 100px;
}
.timeline-container .year-right {
    right: 0;
}
.timeline-container .card-left {
    right: 200px;
    top: 100px;
}
.timeline-container .event-1 { top: 0; } 
.timeline-container .event-2 { top: 25%; } 
.timeline-container .event-3 { top: 50%; } 
.timeline-container .event-4 { top: 75%; } 
@media (max-width: 991.98px) { 
    .timeline-container {
        height: auto; 
        padding: 20px 0;
    }
    
    .timeline-container .timeline-event {
        position: static !important; 
        margin-bottom: 40px;
    }

    .timeline-container .timeline-year,
    .timeline-container .timeline-card {
        position: static !important;
        transform: none;
        width: 100% !important;
        max-width: none;
        text-align: center !important;
    }

    .timeline-container .timeline-year {
        text-align: center !important;
        margin-top: 1rem;
        margin-bottom: -40px; 
    }

    .timeline-container .timeline-card {
        margin: 0 auto; 
    }
}
/* ================== END TIMELINE FIX ================== */


/*  ================== Start TRUSTED VOICES ==================  */
.bg-custom-testimonial {
    background: #F4F4F5;
}
.testimonialSwiper {
    height: 65vh;
}
.testimonialSwiper .swiper-slide {
    height: auto !important;
    display: flex !important;
}
.testimonial-card {
    max-height: 340px;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.testimonial-card img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
}
.testimonial-card p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 100px;
}
.swiper-pagination {
    /* margin-top: 40px !important; */
    /* position: relative !important; */
    /* bottom: 0 !important; */
}
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    opacity: 0.4;
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background-color: #438BCF;
}
/*  ================== END TRUSTED VOICES ==================  */










/* ================== SUBSIDIARIES SECTION ================== */
.subsidiary-card {
    height: 450px; 
    z-index: 1;
    position: relative;
    display: block;
    border-radius: 5px;
}
.subsidiary-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: brightness(0.8);
    transition: transform 0.3s ease;
}
.subsidiary-card:hover .subsidiary-img {
    transform: scale(1.05); 
}
.subsidiary-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
}
.subsidiary-overlay .badge {
    padding: 0.3em 0.8em;
    font-size: 0.8rem;
}
.branch-tag {
    display: inline-block;
    width: fit-content;
    padding: 0.3em 0.8em;
}
.badge-span-yellow {
    background-color: #F2CF133D;
    border-radius: 5px;
}



/* ================== CTA BANNER ================== */
.cat-custom-p {
    padding-top: 4rem !important;
    padding-bottom: 10rem !important;
}
.cta-banner {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/cat.png'); 
    background-size: cover;
    background-position: center center; 
    background-repeat: no-repeat; 
    position: relative;
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
}
.cta-banner .text-white-75 {
    color: rgba(255, 255, 255, 0.85);
}
.cta-button-wrapper .btn-success {
    background-color: #799a4c; 
    border-color: #799a4c;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.cta-button-wrapper .btn-success:hover {
    background-color: #6a8c3d;
    border-color: #6a8c3d;
    transform: scale(1.05);
}
@media (max-width: 767.98px) {
    .cta-banner {
        flex-direction: column;
        text-align: center;
    }
    .cta-content {
        margin-bottom: 1.5rem;
        margin-right: 0 !important;
    }
}
/* ================== CTA BANNER ================== */










/* ================== CONTACT US (START) ================== */
/* ================== CONTACT US (START) ================== */
/* ================== CONTACT US (START) ================== */
/* ================== CONTACT US (START) ================== */
/* ================== CONTACT US (START) ================== */
/* ================== CONTACT US (START) ================== */


/* ================== Start Contact us ================== */
.hero-banner {
    width: 100%;
    height: 60vh; 
    position: relative;
    overflow: hidden;
}
.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.60);
    z-index: 1;
}
.slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: #fff;
    width: 90%;
    max-width: 700px;
}
.slide-content h1,
.slide-content p,
.slide-content .btn-group {
    opacity: 1; 
    transform: translateY(0); 
    animation: fadeInUp 0.7s ease forwards; 
}
.delay-0 { animation-delay: 0s; }
.delay-300 { animation-delay: .3s; }
.delay-500 { animation-delay: .5s; }
.btn-slide:hover {
    background: #438BCF;
    color: #fff;
    box-shadow: 0 4px 10px rgba(13,110,253,0.5);
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.section-2-bg {
    background-color: #404041;
    color: #fff;
}
/* ================== END Contact us ================== */


/* ================== Start CONTACT SECTION ================== */
.custom-contact-bg {
    background-color: #F4F4F5;
}
.bg-light-card {
    background-color: #ffffff !important;
    border: 1px solid #eee;
    transition: 0.35s ease;
    cursor: pointer;
}
.bg-light-card:hover {
    transform: translateY(-8px);
    background-color: #DCBC0C !important;
    border-color: #DCBC0C;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.bg-light-card:hover h6,
.bg-light-card:hover p {
    color: #000000 !important;
}
.bg-yellow-soft {
    background-color: #DCBC0C;
    padding: 8px;
    border-radius: 8px;
}
.section-contact .contact-icon-wrapper {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: 0.35s ease;
}
.bg-light-card:hover .contact-icon-wrapper {
    transform: scale(1.15);
}.section-contact .contact-card {
    min-height: 150px;
}
.section-contact h6 {
    font-weight: 600 !important;
}
.map-container {
    border: 1px solid #ddd;
}
.map-container iframe {
    width: 100%;
    height: 100%;
    border: none !important;
}
/* ================== END CONTACT SECTION ================== */

/* ================== Start CONTACT FORM SECTION ================== */

.catalog-overlay {
    background: rgba(0, 0, 0, 0.45);
}
.download-btn {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 8px 20px;
    border-radius: 6px;
    transition: 0.3s ease;
}
.download-btn:hover {
    background-color: #DCBC0C;
    transform: translateY(-2px);
    color: #fff;
}
.section-contact-form .text-yellow {
    color: #DCBC0C;
}
.canctact-form-wrapper {
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    animation: fadeUp 1s ease forwards;
    opacity: 0;
}
.contact-form {
    background: transparent !important;
    color: #212529;
    padding: 0 !important;
    box-shadow: none !important;
}
.contact-form .form-control {
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: 0.3s ease;
}
.contact-form .form-control:focus {
    border-color: #DCBC0C;
    box-shadow: 0 0 8px rgba(220, 188, 12, 0.4);
}
.section-contact-form .bg-dark-card {
    background-color: #343a40 !important;
}
.btn-slide-button-yellow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #DCBC0C;
    color: #fff;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    margin: 5px 0;
    font-weight: 600;
    transition: 0.3s ease;
    box-shadow: 0 4px 10px rgba(172, 186, 40, 0.4);
}
.btn-slide-button-yellow:hover {
    background: #c4a60c;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(172, 186, 40, 0.6);
}
.btn-slide-button-yellow img {
    transition: transform 0.3s ease;
}
.btn-slide-button-yellow:hover img {
    transform: translateX(6px);
}
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ================== END CONTACT FORM SECTION ================== */


/* ================== FAQ SECTION ================== */
.custom-value {
    color: #438BCF;
}
.btn-slide-button {
    text-decoration: none;
    color: #FFFFFF;
    padding: 0.75rem 2rem;
    border-radius: 5px;
    margin: 5px;
    font-weight: 600;
    transition: 0.3s;
    background: #438BCF;
    box-shadow: 0 4px 10px rgba(13,110,253,0.5);
}
.btn-slide-button:hover {
    background: #2a6bbf;
    box-shadow: 0 6px 15px rgba(13,110,253,0.7);
}
.section-faq .accordion-button:after {
    display: none !important; 
}
.section-faq .accordion-icon-box {
    width: 35px;
    height: 35px;
    border-radius: 4px; 
    background-color: transparent; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}
.section-faq .accordion-icon {
    color: #000; 
    font-size: 1.2rem;
    transition: transform 0.3s ease, color 0.3s ease;
}
.section-faq .accordion-button:not(.collapsed) .accordion-icon-box {
    background-color: #438BCF; 
}
.section-faq .accordion-button:not(.collapsed) .accordion-icon {
    transform: rotate(45deg); 
    color: #fff; 
}
.section-faq .accordion-button {
    padding: 1rem 0 !important;
    font-size: 1.1rem;
    color: #212529 !important; 
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.section-faq .accordion-item {
    border-bottom: 1px solid #eee; 
}
.accordion-item.faq-item {
    border-radius: 6px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #eee !important;
}
button.accordion-button.fw-semibold {
    justify-content: space-between !important;
}




/* ================== CONTACT US (END) ================== */
/* ================== CONTACT US (END) ================== */
/* ================== CONTACT US (END) ================== */
/* ================== CONTACT US (END) ================== */
/* ================== CONTACT US (END) ================== */
/* ================== CONTACT US (END) ================== */
/* ================== CONTACT US (END) ================== */
/* ================== CONTACT US (END) ================== */



















/* ================== PRODUCT (START) ================== */
/* ================== PRODUCT (START) ================== */
/* ================== PRODUCT (START) ================== */
/* ================== PRODUCT (START) ================== */
/* ================== PRODUCT (START) ================== */
/* ================== PRODUCT (START) ================== */
/* ================== PRODUCT (START) ================== */

/* ================== START PRODUCT DETAIL PAGE ================== */
.product-coustom {
    padding-top: 10rem;
    padding-bottom: 6rem;
}
.main-product-img {
    height: 100%;
    object-fit: cover;
}
.overlay-logo {
    z-index: 10;
}
/*  Thumbnails  */
.product-thumbnails .thumbnail-img {
    height: 140px;
    width: 100%;
    object-fit: cover;
    cursor: pointer;
    border: 3px solid transparent;
    transition: 0.25s ease;
    border-radius: 6px;
}
.product-thumbnails .thumbnail-img:hover,
.product-thumbnails .thumbnail-img.active {
    border-color: #438BCF;
}
@media (max-width: 767.98px) {
    .product-thumbnails .thumbnail-img {
        height: 90px;
    }
}
/*  Buttons  */
.btn-slide {
    text-decoration: none;
    color: #fff;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 600;
    transition: 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-slide:hover {
    opacity: 0.9;
}
.product-actions-buttons .btn-group a {
    margin-right: 10px;
}
.product-actions-buttons .btn-group a:last-child {
    margin-right: 0;
}
.product-actions-buttons .btn-slide {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    border: 1px solid #438BCF;
    color: #438BCF;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    margin: 5px;
    font-weight: 600;
    transition: 0.3s;
}
.product-actions-buttons .btn-slide i {
    font-size: 1rem;
}
.product-actions-buttons .btn-slide:hover {
    background: #357abb;
    color: #fff;
    box-shadow: 0 4px 12px rgba(67, 139, 207, 0.4);
}
/* ================== END PRODUCT DETAIL PAGE ================== */





/* ================== START RELATED PRODUCTS SECTION ================== */

.bg-light-gray { 
    background-color: #f0f0f4 !important; 
}

.text-primary { 
    color: #438BCF !important; 
}

.product-card-item {
    min-height: 450px; 
    position: relative;
    cursor: pointer;
    overflow: hidden;
    z-index: 1; 
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.product-card-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5; 
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.4) 70%);
    transition: opacity 0.3s ease, background 0.3s ease;
}

.product-overlay-text {
    position: relative; 
    z-index: 10; 
    color: #fff; 
    padding: 50px 1rem 1rem 1rem;
    transition: transform 0.3s ease;
}

.product-overlay-text h4 {
    font-size: 1.25rem;
}

.product-short-desc {
    transition: opacity 0.3s ease;
}

.product-full-details {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    transform: translateY(20px); 
    transition: opacity 0.3s ease, transform 0.3s ease, height 0.3s ease;
}

.product-full-details p {
    font-size: 0.875rem; 
    color: #e0e0e0;
}

.product-actions .btn-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

.product-actions .btn-dark {
    background-color: #212529;
    border-color: #212529;
    color: #fff;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.product-actions .btn-dark:hover {
    background-color: #343a40;
    border-color: #343a40;
}

/*  Hover Effects  */

.product-card-item:hover {
    transform: scale(1.03); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.product-card-item:hover::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0.6) 70%);
}

.product-card-item:hover .product-short-desc {
    opacity: 0;
    height: 0;
    margin-bottom: 0 !important;
}

.product-card-item:hover .product-full-details {
    opacity: 1;
    visibility: visible;
    height: auto; 
    transform: translateY(0);
}

.product-card-item:hover .product-overlay-text {
    transform: translateY(-20px); 
}

/*  Product Images  */
.product-card-item.product-1 { background-image: url('images/Products/3.png'); }
.product-card-item.product-2 { background-image: url('images/Products/4.png'); }
.product-card-item.product-3 { background-image: url('images/Products/7.jpg'); }

.text-dark { color: #212529 !important; }

/* ================== END RELATED PRODUCTS SECTION ================== */



/* ================== PRODUCT (END) ================== */
/* ================== PRODUCT (END) ================== */
/* ================== PRODUCT (END) ================== */
/* ================== PRODUCT (END) ================== */
/* ================== PRODUCT (END) ================== */
/* ================== PRODUCT (END) ================== */
/* ================== PRODUCT (END) ================== */
/* ================== PRODUCT (END) ================== */

























/* ================== PRODUCTS (START) ================== */
/* ================== PRODUCTS (START) ================== */
/* ================== PRODUCTS (START) ================== */
/* ================== PRODUCTS (START) ================== */
/* ================== PRODUCTS (START) ================== */
/* ================== PRODUCTS (START) ================== */
/* ================== PRODUCTS (START) ================== */
/* ================== PRODUCTS (START) ================== */
/* ================== PRODUCTS (START) ================== */

/*  ======================= Start Our Products =======================  */
.hero-banner {
    width: 100%;
    height: 60vh;
    position: relative;
    overflow: hidden;
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.60);
    z-index: 1;
}
.slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: #fff;
    width: 90%;
    max-width: 700px;
}

.slide-content h1,
.slide-content p,
.slide-content .btn-group {
    opacity: 1; 
    transform: translateY(0); 
    animation: fadeInUp 0.7s ease forwards; 
}

.delay-0 { animation-delay: 0s; }
.delay-300 { animation-delay: .3s; }
.delay-500 { animation-delay: .5s; }

.btn-slide:hover {
    background: #438BCF;
    color: #fff;
    box-shadow: 0 4px 10px rgba(13,110,253,0.5);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.section-2-bg {
    background-color: #404041;
    color: #fff;
}

/*  ======================= End Our Products =======================  */





/* ================== START PRODUCTS GALLERY ================== */

.bg-light-gray { background-color: #f0f0f4 !important; }
.text-primary { color: #438BCF !important; }
.product-image-wrapper img {
    border-radius: 5px !important;
}
.product-card-item {
    min-height: 380px; 
    position: relative;
    cursor: pointer;
    overflow: hidden;
    z-index: 1; 
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.product-card-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5; 
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.4) 70%);
    transition: opacity 0.3s ease, background 0.3s ease;
}
.product-overlay-text {
    position: relative; 
    z-index: 10; 
    color: #fff; 
    padding: 0 1rem 1rem 1rem;
    padding-top: 50px; 
    transition: transform 0.3s ease;
}
.product-overlay-text h4 {
    color: #fff;
    font-size: 1.25rem;
}

.product-short-desc {
    transition: opacity 0.3s ease;
}
.product-full-details {
    opacity: 0;
    visibility: hidden;
    height: 0; 
    overflow: hidden;
    transform: translateY(20px); 
    transition: opacity 0.3s ease, transform 0.3s ease, height 0.3s ease;
}
.product-full-details p {
    font-size: 0.875rem; 
    color: #e0e0e0;
}

.product-actions .btn-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}
.product-actions .btn-dark {
    background-color: #212529; 
    border-color: #212529;
    color: #fff;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}
.product-actions .btn-dark:hover {
    background-color: #343a40;
    border-color: #343a40;
}
.product-card-item:hover {
    /* transform: scale(1.03);  */
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); */
}

.product-card-item:hover::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0.6) 70%);
}

.product-card-item:hover .product-short-desc {
    opacity: 0;
    height: 0;
    margin-bottom: 0 !important;
}

.product-card-item:hover .product-full-details {
    opacity: 1;
    visibility: visible;
    height: auto;
    transform: translateY(0);
}

.product-card-item:hover .product-overlay-text {
    transform: translateY(-20px);
}

.product-card-item.product-1 { background-image: url('images/Products/1.png'); }
.product-card-item.product-2 { 
    background-image: url('images/Products/2.png'); 
}
.product-card-item.product-3 { background-image: url('images/Products/3.png'); }
.product-card-item.product-4 { background-image: url('images/Products/4.png'); }
.product-card-item.product-5 { background-image: url('images/Products/5.png'); }
.product-card-item.product-6 { background-image: url('images/Products/6.png'); }
.product-card-item.product-7 { background-image: url('images/Products/7.jpg'); }
.text-primary { color: #438BCF !important; }
.text-dark { color: #212529 !important; }
/*  Buttons  */
.btn-slide {
    text-decoration: none;
    color: #fff;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 600;
    transition: 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-slide:hover {
    opacity: 0.9;
}
.product-actions-buttons .btn-group a {
    margin-right: 10px;
}
.product-actions-buttons .btn-group a:last-child {
    margin-right: 0;
}
.product-actions-buttons .btn-slide {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    border: 1px solid #438BCF;
    color: #438BCF;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    margin: 5px;
    font-weight: 600;
    transition: 0.3s;
}
.product-actions-buttons .btn-slide i {
    font-size: 1rem;
}
.product-actions-buttons .btn-slide:hover {
    background: #357abb;
    color: #fff;
    box-shadow: 0 4px 12px rgba(67, 139, 207, 0.4);
}
/* ================== END PRODUCTS GALLERY ================== */



/* ================== PRODUCTS (END) ================== */
/* ================== PRODUCTS (END) ================== */
/* ================== PRODUCTS (END) ================== */
/* ================== PRODUCTS (END) ================== */
/* ================== PRODUCTS (END) ================== */
/* ================== PRODUCTS (END) ================== */
/* ================== PRODUCTS (END) ================== */
/* ================== PRODUCTS (END) ================== */
/* ================== PRODUCTS (END) ================== */