/* ==========================================================
   HERO THEME 1
========================================================== */

:root {

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

    --ebhro3-theme1-container-width: 1440px;


    /* ==========================================
       BACKGROUND
    ========================================== */

    --ebhro3-theme1-hero-background-color: #FFFAF3;

    --ebhro3-theme1-primary-accent: rgb(42, 150, 88);

    --ebhro3-theme1-primary-accent-light: rgba(37, 99, 235, .14);

    --ebhro3-theme1-secondary-overlay: rgba(42, 150, 88, .025);

    --ebhro3-theme1-line-color: rgba(42, 150, 89, 0.137);

    --ebhro3-floating-circle-1: rgba(37, 99, 235, .45);

    --ebhro3-floating-circle-2: rgba(42, 150, 88, .15);

    /* ==========================================
       TYPOGRAPHY
    ========================================== */

    --ebhro3-theme1-title-color: #06266B;

    --ebhro3-theme1-description-color: #06266B;

    --ebhro3-theme1-list-color: #06266B;


    /* ==========================================
       IMAGE
    ========================================== */

    --ebhro3-theme1-image-panel-color: #1A2234;

    --ebhro3-theme1-image-overlay: rgba(37, 99, 235, .08);

}

/* ==========================================================
   HERO
========================================================== */

.ebhro3-content.en {

    direction: ltr;
}

.ebhro3-hero {

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 75vh;

    background: var(--ebhro3-theme1-hero-background-color);

    width: 100%;

    padding-block: 1.2rem;

}






/* ==========================================
   LARGE DIAGONAL SHAPE
========================================== */

.ebhro3-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(125deg,

            transparent 0%,

            transparent 57%,

            var(--ebhro3-theme1-secondary-overlay) 57%,

            var(--ebhro3-theme1-secondary-overlay) 100%);

}






/* ==========================================
   DECORATIVE LINES
========================================== */

.ebhro3-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        repeating-linear-gradient(-35deg,

            transparent 0,

            transparent 48px,

            var(--ebhro3-theme1-line-color) 48px,

            var(--ebhro3-theme1-line-color) 50px);

    opacity: .35;

    pointer-events: none;

}






.ebhro3-container {

    position: relative;

    z-index: 2;

    max-width: var(--ebhro3-theme1-container-width);

    width: calc(100% - 1em);

    margin: 0 auto;

}






.ebhro3-content {

    display: grid;

    grid-template-columns: 1.5fr .5fr;

    align-items: center;

    gap: 50px;

}

.ebhro3-text-block {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 0.8rem;

}

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

.ebhro3-title {

    position: relative;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    color: var(--ebhro3-theme1-title-color);

    font-size: clamp(2.4rem, 4vw, 4.3rem);

    font-weight: 900;

    line-height: 1.15;

    margin-bottom: 20px;
}

/* الخط السفلى */

.ebhro3-title::after {

    content: "";

    position: absolute;

    right: 60px;

    bottom: -5px;

    height: 3px;

    width: 68%;

    background: var(--ebhro3-theme1-primary-accent);
}






/* مربع Accent */

.ebhro3-title::before {

    content: "";

    height: 10px;

    aspect-ratio: 1;

    background: var(--ebhro3-theme1-primary-accent);

    transform: rotate(45deg);

    margin-inline: 20px;

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.ebhro3-description {

    max-width: 650px;

    color: var(--ebhro3-theme1-description-color);

    font-size: clamp(1.05rem, 1.4vw, 1.28rem);

    line-height: 2.1;

}





/* ==========================================================
   LIST
========================================================== */

.ebhro3-list {

    list-style: none;

    display: flex;

    flex-direction: column;

}

.ebhro3-list-item {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 64px;

    color: var(--ebhro3-theme1-list-color);

    font-size: 1.06rem;

    line-height: 1.8;

    overflow: hidden;

}

/* الخط الفاصل */

.ebhro3-list-item:not(:last-child)::after {

    content: "";

    position: absolute;

    right: 0;

    left: 0;

    bottom: 0;

    height: 1px;

    background: var(--ebhro3-theme1-line-color);

}





/* العلامة الحمراء */

.ebhro3-list-item::before {

    content: "";

    display: block;

    min-width: 10px;

    min-height: 10px;

    margin-inline: 3px 10px;

    background: var(--ebhro3-theme1-primary-accent);

    transform: rotate(45deg);

}





.ebhro3-list-item:nth-child(odd) {

    background:

        linear-gradient(90deg,

            rgba(42, 150, 88, .05),

            transparent 32%);

}





.ebhro3-list-item strong {

    font-weight: 800;

}





/* ==========================================================
   CONTACT BUTTONS
========================================================== */

.ebctaf1-contact-buttons {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

}





.ebctaf1-btn {

    position: relative;

    overflow: hidden;

}





.ebctaf1-btn::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(120deg,

            transparent,

            rgba(255, 255, 255, .18),

            transparent);

    transform: translateX(-180%);

    animation: ebhro3-theme1-btnLight 5s linear infinite;

}

@keyframes ebhro3-theme1-btnLight {

    100% {

        transform: translateX(220%);

    }

}

/* ==========================================================
   IMAGE
========================================================== */

.ebhro3-image-block {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

}

/* ==========================================
   MAIN PANEL
========================================== */

.ebhro3-image-wrapper {

    position: relative;

}

/* ==========================================
   RED PANEL
========================================== */

.ebhro3-image-wrapper::after {

    content: "";

    position: absolute;

    inset: 0px;

    background:

        linear-gradient(135deg,

            var(--ebhro3-theme1-image-panel-color) 0%,

            var(--ebhro3-theme1-primary-accent-light) 55%,

            var(--ebhro3-theme1-primary-accent-light) 100%);

    z-index: -2;

}

.ebhro3-image {

    display: block;

    max-width: 420px;
    margin: auto;
    object-fit: contain;

    animation: ebhro3-theme1-imageMove 6s ease-in-out infinite;

}


@keyframes ebhro3-theme1-imageMove {

    0% {

        transform:

            translateY(0) rotate(0deg) scale(1);

    }

    50% {

        transform:

            translateY(-10px) rotate(-1deg) scale(1.03);

    }

    100% {

        transform:

            translateY(0) rotate(0deg) scale(1);

    }

}





/* ==========================================================
   DECORATION
========================================================== */

.ebhro3-floating-circle {

    position: absolute;

    top: -25px;

    left: -10px;

    width: 65px;

    aspect-ratio: 1;

    background:

        radial-gradient(circle,

            var(--ebhro3-floating-circle-1),

            var(--ebhro3-floating-circle-2),

            transparent);

    border-radius: 50%;

}


.ebhro3-floating-reverse {

    top: auto;

    left: auto;

    right: -10px;

    bottom: -35px;

}


/* ==========================================================
   RESPONSIVE
========================================================== */


@media (max-width:768px) {
    .ebhro3-content {

        grid-template-columns: 1fr;

    }

    .ebhro3-title {

        text-align: center;

    }



    .ebhro3-title::after {

        right: 50%;

        transform: translateX(50%);

    }

    .ebhro3-description {

        text-align: center;

    }

    .ebhro3-image {

        max-width: 320px;

    }

    .ebhro3-image-block::before,

    .ebhro3-image-block::after {

        display: none;

    }

    .ebhro3-floating-circle {


        left: 0px
    }


    .ebhro3-floating-reverse {


        right: 0px;

        bottom: -35px;

    }

}




@media (max-width:576px) {



    .ebhro3-image {

        max-width: 260px;


    }

}