/*
Theme Name: Schaduf GS Child
Theme URI: http://example.com
Description: Child Theme of Hello Elementor for Schaduf GS
Author: Aya Gamal
Author URI: http://example.com
Template: hello-elementor
Version: 1.0
Text Domain: schadufgs
*//* منع ألوان الروابط الافتراضية */



/*-----------------HEADER----------------------*/
.elementor-nav-menu li.menu-item-has-children .sub-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 0.25s ease;
    pointer-events: none;
}

.elementor-nav-menu li.menu-item-has-children.dropdown-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

body.header-scrolled {
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
/* Test if Child Theme CSS is working */
/* Overlay على كل Slide */


.carousel-overlay .swiper-slide {
    position: relative;
}

/* Gradient Overlay */
.carousel-overlay .swiper-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.55) 20%,
        rgba(0, 0, 0, 0.25) 35%,
        rgba(0, 0, 0, 0) 45%
    );
    z-index: 1;
    pointer-events: none;
}

/* كل محتوى السلايد فوق الـ Overlay */
.carousel-overlay .swiper-slide .e-con-inner {
    position: relative;
    z-index: 2;
}

/* العنوان فوق الجميع */
.carousel-overlay .slide-heading {
    position: relative;
    z-index: 9999;
}
   Hover underline
================================ */
.gallery-home .elementor-gallery-item__title,
.gallery-home figcaption {
    position: relative;
    display: inline-block;
}

/* الخط نفسه */
.gallery-home .elementor-gallery-item__title::after,
.gallery-home figcaption::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 1px;               /* رفيع */
    background-color: #ffffff;
    transition: width 0.3s ease;
}

/* يظهر عند الهوفر */
.gallery-home .elementor-gallery-item:hover 
.elementor-gallery-item__title::after,
.gallery-home .elementor-gallery-item:hover 
figcaption::after {
    width: 250px;               /* طول الخط */
}

/*الهيدر يتغير لونه لتحت*/
/* smooth transition */
.header {
    background-color: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 1000; /* keep it on top */
}

/* عند السكروول: خلفية أبيض + ظل */
.header.elementor-sticky--effects {
    background-color: #fff !important; /* الخلفية أبيض */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; /* ظل خفيف */
}

/* روابط الهيدر عند السكروول */
.header.elementor-sticky--effects .custom-menu-class a {
    color: #000 !important; /* لون النص أسود */
}

/* روابط المينو الفرعي عند السكروول */
.header.elementor-sticky--effects #menu-main-menu .sub-menu a {
    color: #333 !important; /* لون رمادي داكن */
}


/* =====================================================
   Media Carousel – Caption centered & always visible
   Light overlay normal / darker overlay on hover
===================================================== */

/* الأساس - Overlay */
.caption-hover-overlay .elementor-carousel-image-overlay {
    opacity: 1 !important;
    visibility: visible !important;

    display: flex;
    align-items: center;       /* عمودي */
    justify-content: center;   /* أفقي */

    text-align: center;
    padding: 20px;

    /* Overlay في الوضع العادي */
    background: rgba(0, 0, 0, 0.35) !important;

    transition: background 0.4s ease;
}

/* منع Elementor من إخفاء الكابشن */
.caption-hover-overlay .swiper-slide:not(:hover)
.elementor-carousel-image-overlay {
    opacity: 1 !important;
}

/* عند الهوفر – Overlay أغمق */
.caption-hover-overlay .swiper-slide:hover
.elementor-carousel-image-overlay {
    background: rgba(0, 0, 0, 0.55) !important;
}

/* النص داخل Overlay */
.caption-hover-overlay .elementor-carousel-image-overlay * {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    position: relative;       /* ضروري للخط */
    text-decoration: none;
    transition: color 0.3s ease;
}

/* الخط المخفي افتراضيًا */
.caption-hover-overlay .elementor-carousel-image-overlay *::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background-color: #ffffff;
    transition: width 0.3s ease;
}

/* عند hover على السلايد يظهر الخط */
.caption-hover-overlay .swiper-slide:hover
.elementor-carousel-image-overlay *::after {
    width: 100%;
}

/* =====================================================
   Continuous Carousel Style
===================================================== */

/* =====================================================
   Image Marquee – Continuous Horizontal Scroll
===================================================== */

.image-marquee {
    overflow: hidden;
    width: 100%;
}

.image-marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 80s linear infinite;
}

.image-marquee-track img {
    height: 100px;        /* تحكمي في ارتفاع الصور */
    width: 100px;
    margin-right: 40px;  /* مسافة بين الصور */
    flex-shrink: 0;
    object-fit: contain;
}

/* الحركة */
@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/*جاليري لوجو تكنولوجيا */

.clients-logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* نفس عدد الأعمدة */
  gap: 30px 40px;
  max-width: 1250px;   /* يتحكم في عرض الجاليري */
  margin: 0 auto;     /* ده اللي بيخليه في النص */
  align-items: center;
  justify-items: center;
}

.clients-logos img {
  max-width: 160px;
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(100%) brightness(0.50);
  opacity: 0.85;
}
@media (max-width: 1024px) {
  .clients-logos {
    grid-template-columns: repeat(4, 1fr);
  }
}


@media (max-width: 768px) {
  .clients-logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .clients-logos {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*جاليريي نولدج*/
/*جاليري لوجو تكنولوجيا */

.clients-logos1 {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* نفس عدد الأعمدة */
  gap: 30px 40px;
  max-width: 1250px;   /* يتحكم في عرض الجاليري */
  margin: 0 auto;     /* ده اللي بيخليه في النص */
  align-items: center;
  justify-items: center;
}

.clients-logos1 img {
  max-width: 160px;
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(100%) brightness(0.50);
  opacity: 0.85;
}
@media (max-width: 1024px) {
  .clients-logos1 {
    grid-template-columns: repeat(4, 1fr);
  }
}


@media (max-width: 768px) {
  .clients-logos1 {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .clients-logos1 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*جاليريي ديفلوبمنت*/
/*جاليري لوجو ديفلوبمنت */

.clients-logos2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* نفس عدد الأعمدة */
  gap: 30px 40px;
  max-width: 1250px;   /* يتحكم في عرض الجاليري */
  margin: 0 auto;     /* ده اللي بيخليه في النص */
  align-items: center;
  justify-items: center;
}

.clients-logos2 img {
  max-width: 160px;
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(100%) brightness(0.50);
  opacity: 0.85;
}
@media (max-width: 1024px) {
  .clients-logos2 {
    grid-template-columns: repeat(4, 1fr);
  }
}


@media (max-width: 768px) {
  .clients-logos2 {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .clients-logos2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*الكلاينت*/
/* wrapper */
.image-marquee {
    overflow: hidden;
    width: 100%;
}

/* moving track */
.image-marquee-track {
    display: flex;
    align-items: center;
    gap: 60px;
    width: max-content;
    animation: marquee-scroll 35s linear infinite;
    will-change: transform;
}

/* images */
.image-marquee-track img {
    height: 60px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}

/* animation */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* optional UX */
.image-marquee:hover .image-marquee-track {
    animation-play-state: paused;
}
@media (max-width: 768px) {
    .image-marquee-track {
        gap: 30px;
        animation-duration: 45s;
    }

    .image-marquee-track img {
        height: 40px;
    }
}

/*logos*/
/* =======================
   DESKTOP
======================= */

.clients-logos,
.clients-logos1,
.clients-logos2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* في النص */
    align-items: center;
    gap: 40px; /* المسافة بين اللوجوهات */
}

.clients-logos img,
.clients-logos1 img,
.clients-logos2 img {
    max-width: 120px;
    height: auto;
    object-fit: contain;
}


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

@media (max-width: 767px) {

    .clients-logos,
    .clients-logos1,
    .clients-logos2 {
        gap: 12px; /* مسافة أقل على الموبايل */
    }

    .clients-logos img,
    .clients-logos1 img,
    .clients-logos2 img {
        max-width: 75px;
        max-height: 45px;
        width: auto;
        height: auto;
        object-fit: contain;
    }
}
/*--------------------------------------project slider-----------------------------*/
.project-hero-slider {
    --slide-width: 80vw;
    --slide-gap: 8px;

    position: relative;
    width: 100vw;
    height: 80vh;
    margin-left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    background: #fff;
}

.project-slider-viewport {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.project-slider-track {
    display: flex;
    gap: var(--slide-gap);
    height: 100%;
    transition: transform 0.65s ease;
    will-change: transform;
}

.project-slide {
    flex: 0 0 var(--slide-width);
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #111;
}

.project-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    cursor: pointer;
    z-index: 10;
}

.project-prev { left: 14px; }
.project-next { right: 14px; }

/* Lightbox */
.project-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.project-lightbox-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}
/*--------------------bottom slider------------*/
.rp-dark-carousel-wrap{
    width:90vw;
    margin-left:50%;
    transform:translateX(-50%);
    position:relative;
    padding:0 50px;
    overflow:hidden;
}

.rp-dark-carousel-wrap *{
    box-sizing:border-box;
}

.rp-dark-viewport{
    overflow:hidden;
}

.rp-dark-track{
    display:flex;
    gap:10px;
    transition:transform .55s ease;
    will-change:transform;
}

.rp-dark-slide{
    flex:0 0 calc((100% - 30px)/4);
}

.rp-dark-card{
    position:relative;
    display:block;
    height:214px;
    overflow:hidden;
    text-decoration:none;
    background:#e9e9e9;
}

.rp-dark-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .45s ease;
}

.rp-dark-card:hover .rp-dark-image{
    transform:scale(1.05);
}

.rp-no-image{
    background:#dcdcdc;
}

.rp-dark-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.62) 0%,
        rgba(0,0,0,.28) 32%,
        rgba(0,0,0,0) 60%
    );
}

.rp-dark-title{
    position:absolute;
    left:20px;
    bottom:16px;
    z-index:3;
    color:#fff !important;
    margin:0;
    font-size:15px;
    max-width:86%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.rp-dark-arrow{
    position:absolute;
    top:50%;
	color:#367941 !important;
    transform:translateY(-50%);
    width:34px;
    height:54px;
    border:0;
    background:transparent;
    font-size:34px;
    cursor:pointer;
    z-index:10;
}

.rp-prev{
    left:4px;
}

.rp-next{
    right:4px;
}

@media(max-width:1200px){

    .rp-dark-slide{
        flex:0 0 calc((100% - 20px)/3);
    }

    .rp-dark-card{
        height:200px;
    }
}

@media(max-width:900px){

    .rp-dark-slide{
        flex:0 0 calc((100% - 10px)/2);
    }

    .rp-dark-card{
        height:190px;
    }
}

@media(max-width:600px){

    .rp-dark-carousel-wrap{
        width:100vw;
        padding:10px 12px 16px;
    }

    .rp-dark-slide{
        flex:0 0 94%;
    }

    .rp-dark-card{
        height:190px;
    }

    .rp-dark-track{
        gap:8px;
    }
}

/*------------------------------careers----------------*/


/*------------------------------ CAREERS ------------------------------*/
/*------------------------------careers----------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* GLOBAL */
.schaduf-careers-layout,
.schaduf-careers-layout *{
    font-family:'Poppins', sans-serif;
    box-sizing:border-box;
}

/* TEXT */
.schaduf-careers-layout p,
.schaduf-careers-layout span,
.schaduf-careers-layout label,
.schaduf-careers-layout input,
.schaduf-careers-layout textarea,
.schaduf-careers-layout button,
.schaduf-careers-layout a{
    font-size:13px;
}

/* TITLE */
.schaduf-careers-layout h2{
    font-size:20px;
    font-weight:700;
    color:#000;
}

/* LAYOUT */
.schaduf-careers-layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:40px;
    padding:40px 20px;
}

/* LEFT */
.job-item{
    background:#fff !important;
    border:1px solid #e7e7e7 !important;
    padding:18px 20px;
    margin-bottom:10px;
    display:flex;
    justify-content:space-between;
    cursor:pointer;
}

.job-item span:first-child{
    color:#000 !important;
    font-weight:600;
}

.plus-icon{
    color:#367941 !important;
    font-weight:700;
}

.job-item.active{
    border-color:#367941 !important;
}

/* RIGHT */
.job-details{display:none;}
.job-details.active{display:block;}

.job-box{
    background:#fff;
    border:1px solid #eee;
    padding:25px;
}

/* APPLY LINK */
.apply-btn{
    color:#367941 !important;
    font-weight:700;
}

/* FORM BASE */
.career-form input,
.career-form textarea,
.career-form select{
    width:100%;
    padding:11px;
    border:1px solid #ddd;
    margin:10px 0;
    outline:none;
}

/* CV FILE INPUT */
.career-form input[type="file"]{
    padding:10px;
    border:1px dashed #bbb;
    background:#fafafa;
    cursor:pointer;
}

/* BUTTON (UPDATED: BLACK BUTTON) */
.career-form button{
    background:#000 !important;
    color:#fff !important;
    padding:14px 35px;
    border:0;
    cursor:pointer;
    transition:0.3s ease;
}

.career-form button:hover{
    opacity:0.85;
}

/* SUCCESS */
.global-success{
    margin:20px 0;
    padding:15px;
    border-left:4px solid #367941;
    background:#f3fbf3;
}

/* CV CUSTOM UPLOAD */
.cv-upload-box{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:10px 0;
}

.cv-label{
    font-weight:600;
    color:#000;
}

.cv-btn{
    display:inline-block;
    padding:12px 18px;
    border:1px dashed #bbb;
    background:#fafafa;
    cursor:pointer;
    width:fit-content;
    color:#367941;
    font-weight:600;
}

.cv-btn:hover{
    border-color:#367941;
    background:#f3fbf3;
}

.cv-file-name{
    font-size:12px;
    color:#666;
}

/* MOBILE */
@media(max-width:768px){
    .schaduf-careers-layout{
        grid-template-columns:1fr;
    }
}

/* LIGHT CLEAN */
.project-slider-arrow{
    width: 50px;
    height: 50px;
    color: #367941 !important;
    transition: all .3s ease;
}

.project-lightbox{
    position:fixed !important;
    inset:0 !important;
    z-index:999999 !important;
}

.project-lightbox .project-lightbox-prev,
.project-lightbox .project-lightbox-next{
    position:fixed !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:50px !important;
    height:50px !important;
    border-radius:50% !important;
    background:#367941 !important;
    color:#fff !important;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999999 !important;
}

.project-lightbox .project-lightbox-prev{left:15px !important;}
.project-lightbox .project-lightbox-next{right:15px !important;}

.project-lightbox .project-lightbox-close{
    position:fixed !important;
    top:15px !important;
    right:15px !important;
    width:50px !important;
    height:50px !important;
    border-radius:50% !important;
    background:#367941 !important;
    color:#fff !important;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px !important;
    z-index:99999999 !important;
}
.career-empty-state{
    background:#f5f5f5;
    border-left:4px solid #367941;
    padding:20px 24px;
    margin:20px 0;
    border-radius:4px;
    color:#444;
    font-size:14px;
    line-height:1.7;
}

.career-empty-state strong{
    display:block;
    color:#000;
    font-size:16px;
    margin-bottom:6px;
}
/* ==========================================
   FORCE THEME COLORS OVERRIDE
========================================== */

/* جميع الروابط */
a,
a:visited,
a:hover,
a:focus,
a:active {
    color: inherit !important;
    text-decoration: none !important;
}

/* أزرار Elementor */
.elementor-button,
.elementor-button:visited,
.elementor-button:hover,
.elementor-button:focus,
.elementor-button:active {
    background-color: #367941 !important;
    border-color: #367941 !important;
    color: #ffffff !important;
}

/* أي أيقونة داخل زر */
.elementor-button i,
.elementor-button svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}
/* ==========================================
   GLOBAL LINKS
========================================== */

a,
a:visited,
a:hover,
a:focus,
a:active{
    color:inherit !important;
    text-decoration:none !important;
}

/* ==========================================
   ELEMENTOR BUTTONS
========================================== */

.elementor-button,
.elementor-button:visited,
.elementor-button:hover,
.elementor-button:focus,
.elementor-button:active{
    background-color:#367941 !important;
    border-color:#367941 !important;
    color:#ffffff !important;
}

.elementor-button i,
.elementor-button svg{
    color:#ffffff !important;
    fill:#ffffff !important;
}

/* ==========================================
   PROJECT SLIDER ARROWS
   (الخلفية موجودة أصلاً)
========================================== */

.project-slider-arrow,
.project-slider-arrow:hover,
.project-slider-arrow:focus,
.project-slider-arrow:active{
    background:#ffffff !important;
    color:#367941 !important;
    border:none !important;
}

.project-slider-arrow i,
.project-slider-arrow svg{
    color:#367941 !important;
    fill:#367941 !important;
}

/* ==========================================
   SWIPER / ELEMENTOR ARROWS
   (لا يضيف خلفية لو مش موجودة)
========================================== */

.swiper-button-prev,
.swiper-button-next,
.swiper-button-prev:hover,
.swiper-button-next:hover,
.elementor-swiper-button,
.elementor-swiper-button:hover,
.elementor-swiper-button:focus{
    color:#367941 !important;
}

.swiper-button-prev:after,
.swiper-button-next:after{
    color:#367941 !important;
}

.elementor-swiper-button svg{
    fill:#367941 !important;
    color:#367941 !important;
}

/* ==========================================
   RELATED PROJECTS ARROWS
   (بدون إضافة خلفية)
========================================== */

.rp-dark-arrow,
.rp-dark-arrow:hover,
.rp-dark-arrow:focus,
.rp-dark-arrow:active{
    color:#367941 !important;
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
}

.rp-dark-arrow svg{
    fill:#367941 !important;
    color:#367941 !important;
}

.rp-dark-arrow:before,
.rp-dark-arrow:after{
    color:#367941 !important;
}

/* ==========================================
   FORCE THEME ACCENT COLOR
========================================== */

:root{
    --e-global-color-accent:#367941 !important;
    --wp--preset--color--accent:#367941 !important;
}