@charset "utf-8";

/******* Fonts Import Start **********/
@font-face {
    font-family: regular-en;
    src: url(../fonts/Chillax-Regular.otf);
}

@font-face {
    font-family: medium-en;
    src: url(../fonts/Chillax-Medium.otf);
}

/********* Fonts Face CSS End **********/



/********** Template CSS **********/
:root {
    --primary: #016837;
    --primary-text: #016837;
    --primary-headers: #23282cc7;
    --secondary: #016837;
    --secondary-text: #ff6900;
    --light: #eef9ff;
    --dark: #091e3e;
}

@font-face {
    font-family: Tajawal;
    src: url('../fonts/Tajawal-Regular.ttf');
}

@font-face {
    font-family: 'light';
    src: url('../fonts/Tajawal-Light.ttf');
}

@font-face {
    font-family: 'medium';
    src: url('../fonts/Tajawal-Medium.ttf');
}

html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] span,
html[dir="rtl"] a,
html[dir="rtl"] li,
html[dir="rtl"] label,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] button,
html[dir="rtl"] summary,
html[dir="rtl"] strong,
html[dir="rtl"] small {
  font-family: Tajawal !important;
}



html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
  font-family: 'medium' !important;
}


.section-title {
    font-family: medium-en;
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    color: var(--secondary);
    font-family: medium-en;

}

.section-desc {
    font-family: regular-en;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    color: #000;
    font-family: regular-en;

}

.breadcrumb {
    color: #000;
    font-size: 14px;
    font-family: regular-en;
    margin-bottom: 0;
}

.breadcrumb:hover {
    color: var(--secondary-text);

}

.active-breadcrumb {
    color: var(--primary-text);
    font-size: 14px;
    font-family: medium-en;
    margin-bottom: 0;
}

/* -------- Landing page ------- */

/*!================================= Navbar Start */
nav {
    background-color: transparent !important;
    z-index: 9;
}

.custom-confirm-button {
    background-color: #016837; /* Default confirm button color */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
}


.navbar-expand-lg .navbar-nav .nav-link {
    color: #fff;
    font-weight: bold;
    font-family: regular-en;

}

.navbar-expand-lg .navbar-nav .nav-item div .btn {
    color: #fff;
    font-weight: bold;
    font-family: regular-en;
}

html[target="inner"] .navbar-expand-lg .navbar-nav .nav-link {
    color: #000;
}

html[target="inner"] .navbar-expand-lg .navbar-nav .nav-item div .btn {
    color: #000;
}

html[target="inner"] nav {
    box-shadow: 0px 2px 5px #88888813;
}

.sticky-top {
    background-color: #fff !important;
    /* position: static !important; */
}


/* .sticky-top .navbar-brand {
    height: 5px;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
} */
.small-brand {
    display: none;
}

.large-brand {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    padding-top: 7px;
}

.sticky-top .navbar-nav .nav-link {
    color: #000;
    font-weight: 400;


}

.sticky-top .navbar-nav .nav-item div .btn {
    color: #000;
    font-weight: 400;

}

@media(max-width:767px) {
    nav {

        background-color: #fff !important;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        color: #000;
        font-weight: 400;
        font-family: regular-en;

    }

    .navbar-expand-lg .navbar-nav .nav-item div .btn {
        color: #000;
        font-weight: 400;

    }


    .navbar-expand-lg .navbar-nav .nav-item div .btn {
        padding: 0px;
    }
}

@media (max-width: 991.98px) {

    .sticky-top .navbar-brand {
        display: block;
    }

    .small-brand {
        display: block;
    }

    .large-brand {
        display: none;
    }
}

/*!================================= Navbar End */

/*&-------------------------------------------------- Carousel Start --> */
#carouselExampleAutoplaying {
    margin-top: -150px !important;
    z-index: 1;
}

.dark-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    z-index: 1;
    -webkit-transition: background-color .3s;
    -o-transition: background-color .3s;
    transition: background-color .3s;
    border-radius: 15px;
}
section.container-xxl.categs {
    max-height: 540px; /* Adjust based on expected content */
}

.carousel-item {
    position: relative !important;
    padding: 0px !important;

}

.slider-caption {
    /* position: absolute; */
    /* top: 25%; */
    color: #fff;
    /* styleName: Header0 - Alexandria Bold */
    font-family: Noto;
    font-size: 55px;
    font-weight: 700;
    text-align: center !important;
    font-family: medium-en;
}


.slider-content {
    z-index: 1;
    top: 45%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: regular-en;
}

.slide-title {
    font-family: 'medium';
    font-size: 35px;
    font-weight: 500;
    text-align: start;
    color: #8ec52f;
    font-family: medium-en;

}

.slide-desc {
    font-family: 'light';
    font-size: 20px;
    font-weight: 600;
    text-align: start;
    color: #fff;
    font-family: regular-en;

}
.active>.page-link {
    background-color: #016837 !important;
    border-color: #016837;
    font-family: regular-en;
}
.page-link {
    color: #000000;
    font-family: regular-en;
}

.read-more-btn {
    background-color: var(--primary-text);
    color: #fff;
    font-family: medium-en;
}

.read-more-btn:hover {
    background-color: var(--secondary-text);
    color: #fff;
}

#carouselExampleAutoplaying,
.carousel-inner,
.carousel-item {
    max-height: 90vh;
}

@media (max-width: 991.98px) {
    .slider-caption {
        font-size: 35px;
        font-weight: 700;
    }

    .slide-title {
        font-size: 25px;
        font-weight: 500;
    }

    #carouselExampleAutoplaying {
        margin-top: auto !important;
    }

    .slider-content {
        top: 25%;
    }

    .carousel-control-next,
    .carousel-control-prev {
        top: -10%;
    }

    .dark-overlay::before {
        border-radius: 0;
    }

    .home-slider {
        height: fit-content;
        min-height: 450px;
    }

    .home-slider .carousel-item img {
        height: fit-content;
        min-height: 450px;
        object-fit: cover;
        border-radius: 0;
    }
}

@media (min-width: 991.98px) {

    #carouselExampleAutoplaying,
    .carousel-inner,
    .carousel-item {
        max-height: 100vh;
    }
}

@media (min-width: 991.98px) {
    .slider-caption {
        color: #fff;
        font-size: 55px;
        font-weight: 700;
    }
}

/*&-------------------------------------------------- Carousel End --> */

/* ^--------------- small cards in directs start --> */
.card {
    border-radius: 15px;
    border: 0px;
    box-shadow: 0px 0px 5px #0000001A;
}

.cat-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #e5ffc626;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border: 0px;
    min-height: 145px;
}
.coming-soon {
    color: var(--primary-text);
    font-size: 40px;
    text-align: center;
    margin-top: 40px;
    animation: floatUpDown 2s ease-in-out infinite;
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: default;
}

.coming-soon:hover {
    transform: scale(1.05);
    color: var(--secondary-text); /* Optional hover effect */
}

/* Floating animation keyframes */
@keyframes floatUpDown {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

.cat-card-body p {
    font-family: regular-en;

}

.cat-card-title {
    font-family: 'bold';
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    color: #000;
    text-decoration: none;
    font-family: medium-en;
    text-transform: capitalize;
}

.cat-card-title:hover {
    color: var(--secondary-text);

}

.card-img-top {}

.show-more-btn {
    background-color: var(--secondary);
    color: #fff;
    font-family: medium-en;
}

.show-more-btn:hover {
    background-color: var(--secondary-text);
    color: #fff;
}

/* <!-- ======================= Blog  start --> */
.blog-card-body {
    background: transparent;
}

.blog-card-cat {
    background-color: #b6f3714b;
    color: #016837;
    font-family: medium-en;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    border-radius: 10px;
    width: fit-content;
}

.blog-card-cat:hover {
    background-color: var(--secondary-text);
    color: #fff;
}

.blog-card-body .cat-card-title {
    text-align: left;
    font-family: medium-en;

}

.blog-card-body p {
    text-align: left;
    font-family: regular-en;
    color: var(--primary-headers);
}

.blog-card-img-top {
    border-radius: 15px;
    object-fit: cover;
}

.blog-cat-overlay {
    opacity: 1;
    background-color: #27272788;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    font-size: 18px;
    transition: all 0.3s ease;
    font-family: medium-en;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;}

.blog-card:hover .blog-cat-overlay {
    opacity: 1;
    background-color: #27272788;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    font-size: 20px;
    transition: all 0.3s ease;
    font-family: medium-en;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-title {
    font-family: medium-en;
    color: var(--secondary-text);

}

.blog-card-side {
    border-bottom: 0.5px solid #7bb33b83;
    padding-bottom: 10px;
}

.button-primary,
.button-primary:focus {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
    border: 0;
    font-family: medium-en;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.button-primary:hover,
.button-primary:active {
    color: #fff;
    background-color: var(--secondary-text);
    font-family: medium-en;
    border-color: var(--primary)
}

.search-input {
    border-radius: 5px !important;
    padding: 10px;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;

}

.search-input:focus {
    outline: none;
    box-shadow: none;
    border: 0px;
}

.search-bar-ct {
    background-color: #aabf911a;

}

@media (max-width: 767px) {

    .blog-cat-overlay {
        opacity: 1;
        background-color: #27272788;
        border-radius: 15px;
        font-size: 20px;
        transition: all 0.3s ease;
        font-family: medium-en;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* <!-- ======================= Blog  end --> */

/* ~------------------------About US Start --> */

.rigth-yellow {
    border-right: 2px solid var(--secondary-text);
    border-left: 2px solid var(--primary);
}

.about-summary {
    font-family: medium-en;
    color: var(--primary);
    font-size: 20px;
}

.about-img-card {
    max-height: 350px;
    overflow: hidden;
    border-radius: 15px;
}

.about-img-card img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: 15px;
}

.about-slider-caption {
    font-family: medium-en;
    color: #fff;
    font-size: 35px;
    text-decoration: none;
    line-height: 35px;
}

.about-slider-caption:hover {
    color: #fff;

}

.slider-content2 {
    z-index: 1;
    top: 170px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: regular-en;
    /* background-color: #0000003f; */
    padding: 10px;
}

@media (min-width: 991.98px) {

    #carouselExampleAutoplaying2 .carousel-inner .carousel-item {
        max-height: 400px;
    }
}

@media (max-width: 991.98px) {

    .carousel-control-next,
    .carousel-control-prev {
        top: -10%;
    }

    .slider-content2 {
        top: 80px;
    }

    .about-slider-caption {
        font-size: 30px;
    }

    .about-img-card img {
        border-radius: 15px;
    }

    #carouselExampleAutoplaying2.dark-overlay::before {
        border-radius: 15px;
    }
}

/* ~------------------------About US End --> */
.statistics {
    background-image: url(../img/bg/2.webp);
    min-height: 350px;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: medium-en;
}

.counter-modern-title {
    font-family: medium-en;
    font-size: 27px;
    text-decoration: none;
    /* line-height: 35px; */
}
.counter {
    font-family: medium-en;
    font-size: 30px;
    text-decoration: none;
    line-height: 18px;
}

@media (max-width: 991.98px) {
    .statistics {
        min-height: fit-content;
        background-size: contain;
        /* background-repeat: no-repeat; */

    }
}

/*======================
3. Footer
========================*/
.ct-footer {
    padding: 80px 0 0;
    background-image: url(../img/bg/2.webp);
    background-size: cover;
    background-position: center;

}

a {
    text-decoration: none
}

.ct-footer p {
    margin-bottom: 20px;
    color: #515151;
}

.ct-footer a,
.ct-footer i {
    color: #515151;
}

.ct-footer a:hover {
    color: #85B72C;
}

.footer-widget {
    padding-bottom: 40px;
}
.footer-widget .widget-title,
.footer-logo {
    margin-bottom: 20px;
}

.footer-logo {
    width: 180px;
}

.footer-widget ul {
    margin: 0;
}

.footer-widget ul li+li {
    margin: 10px 0 0;
}

.footer-widget ul li a {
    position: relative;
    display: block;
    -webkit-transform: translateX(-15px);
    -ms-transform: translateX(-15px);
    transform: translateX(-15px);
}

.footer-widget ul li a::before {
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 28px;
    margin-left: auto;
    font-size: 10px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    color: #85B72C;
    padding-right: 10px;
}

.footer-widget ul li a i {
    font-weight: 400;
}

.footer-widget ul li a:hover {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.footer-widget ul li a:hover::before {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.footer-widget ul.social-media li {
    display: inline-block;
    margin-top: 0;
}

.footer-widget ul.social-media li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    border: 0;
    background-color: #f7f4ee;
    color: #515151;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.footer-widget ul.social-media li a::before {
    display: none;
}

.footer-widget ul.social-media li a i {
    color: #515151;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.footer-widget ul.social-media li a:hover {
    background-color: #85B72C;
    border-color: #85B72C;
    color: #fff;
}

.footer-widget ul.social-media li a:hover i {
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px 0;
}

.footer-bottom a {
    font-weight: 600;
    color: #515151;
}

.video-card iframe {
    height: 300px;
    border-radius: 15px;
}

/*---------------------- products start -----------------------*/
.product-card-title {
    background-color: #016837;
    color: #016837;
    font-family: medium-en;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    /* border-radius: 10px; */
    width: fit-content;
    bottom: 10%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.product-card-title:hover {
    background-color: var(--secondary-text);
    color: #fff;
}

::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

@font-face {
    font-family: 'main';
    src: url('../fonts/Almarai-Regular.ttf');
}

@font-face {
    font-family: 'light';
    src: url('../fonts/Almarai-Light.ttf');
}

.main_title h6 {
    font-family: 'light' !important;
    font-size: 16px;
    font-weight: 400 !important;
    text-align: right;


}

.main_title span {
    color: #DEAD69;
}

.product-slider-img {
    width: 100%;
    /* height: 100%; */
}

@media(min-width:767px) {
    .product-slider-img {

        height: 570px;
    }
}

.carousel-indicators {
    overflow-x: auto;
    display: flex;
    justify-content: start;
    gap: 10px;
    padding: 10px;
    position: static;
    scroll-behavior: smooth;
}

.carousel-indicators::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar */
}

.carousel-indicators {
    -ms-overflow-style: none;
    /* Hide scrollbar in IE and Edge */
    scrollbar-width: none;
    /* Hide scrollbar in Firefox */
}

.slider-pagin img {
    max-width: 80px;
    /* Thumbnail size */
    height: auto;
    cursor: pointer;
}


.slider-right-arrow {
    position: absolute;
    top: 42%;
    /* bottom: 0; */
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    /* background: 0 0; */
    border: 0;
    right: -20px;
    /* opacity: .5; */
    transition: opacity .15s ease;
}

.slider-left-arrow {
    position: absolute;
    top: 42%;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 15%;
    padding: 0;
    height: fit-content;
    color: #fff;
    text-align: center;
    /* background: 0 0; */
    border: 0;
    /* opacity: .5; */
    left: -20px;
    transition: opacity .15s ease;
}

.product-slider-img {
    border-radius: 21px;
    height: 70%;
}

#custCarousel .carousel-indicators>li {
    width: 100px;
}

#custCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5;
    border-radius: 21px;
    width: 120px !important;
    height: 100%;
    object-fit: cover;
}

.list-inline-item:not(:last-child) {
    margin-left: 10px;
}

#custCarousel .carousel-indicators li.active img {
    opacity: 1;
    object-fit: cover;
}

#custCarousel .carousel-indicators li:hover img {
    opacity: 1;
    object-fit: cover;

}

a[data-bs-target="#custCarousel"].active img {
    opacity: 1 !important;
    object-fit: cover;
}

.product-slider-img {

    /* width: 100%; */
    object-fit: cover;
    /* height:450px; */
}

.carousel-indicators {
    margin-right: 10px;
    margin-left: 10px;
}

#custCarousel .carousel-indicators>li:first-child {
    margin-left: 0px;
}

@media(max-width:767px) {
    .carousel-control-prev {
        height: fit-content;
        top: 40%;
    }

    .carousel-control-next {
        height: fit-content;
        top: 40%;
    }

    .slider-right-arrow,
    .slider-left-arrow {
        top: 35%;
    }

    .carousel-indicators {
        margin-right: 0px;
        margin-left: 0px;
    }

}

.carousel-indicators {
    direction: ltr;
}

@media(min-width:767px) {
    .carousel-item {
        /* height: 450px !important; */
        object-fit: contain;
    }

    /* .carousel-item img
    {
        height: 550px;
        border-radius: 20px;
    } */
}

.carousel-control-prev,
.carousel-control-next {
    /*display: none;*/
}

.timeline-container {
    position: relative;
    /* max-width: 600px; */
    /* margin: 0 auto; */
    padding: 20px 0;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    position: relative;
    padding-left: 30px;
    padding-top: 20px;
    cursor: pointer;
    z-index: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: #FFF;
    border: 5px solid #dead69;
    border-radius: 50%;
    z-index: 1;
}

.timeline-line {
    position: absolute;
    width: 3px;
    background-color: #D9D9D9;
    top: 12px;
    bottom: 0;
    right: 8px;
}

.timeline-item-content {
    /* padding-left: 20px; */
}

.timeline-item h4 {
    margin: 0;
    font-size: 16px;
    color: #2196F3;
}

.timeline-item p {
    margin: 4px 0;
    font-size: 14px;
}

.timeline-details {
    max-height: 0;
    padding-left: 20px;
    font-size: 14px;
    overflow: hidden;
    padding-bottom: 0px;
    color: #555;
    transition: max-height 2s ease-in-out;
    /* Smooth transition */
    /* transition: padding-bottom 0.5s ease-in; */
    /* Smooth transition */
}

.timeline-item.expanded .timeline-details {
    max-height: 1500px;
    /* Set a high enough value to handle the content */
    transition: max-height 2s ease-in-out;
    /* transition: max-height 5s ease-in; */
    /* Smooth transition */
    /* transition: padding-bottom 0.5s ease-in-out; Smooth transition */
    /* padding-bottom: 15px; */

}

.slider-pics {
    height: fit-content !important;
}

/* .carousel-control-next, .carousel-control-prev
{
    z-index: 0 !important;
} */
.product-points li span {
    color: #000;
    font-size: 18px;
    font-family: medium-en;
}

/*---------------------- products End -----------------------*/
.contact-info{
    box-shadow: 0px 0px 4px rgba(104, 104, 104, 0.144);
    border-radius: 5px;
    min-height: 135px;
}
/*!--------------- RTL Start ------------------------------ */
html[dir="rtl"] .text-start {
    text-align: right !important;
}

html[dir="rtl"] .blog-card-body .cat-card-title,
html[dir="rtl"] .blog-card-body p,
html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

html[dir="rtl"] .product-card-title {
    right: 0;
    border-radius: 10px 0 0 10px;
}
html[dir="rtl"] .button-primary ,html[dir="rtl"] .button-primary:focus
{
    border-radius: 10px 0 0 10px;

}
/*!--------------- RTL End -------------------------------- */