@font-face {
    font-family: "LamaRounded";
    src: url("font/Lama-Rounded/Fonts/Web/Standard/LamaRounded-Regular.woff") format("woff");
    font-style: normal;
}

:root{
    --primary-color: #386C7E;
    --secondary-color: #F4E9D2;
    --dark-color: #36454F;
    --light-color: #ffffff;
    --black-color: #000000;
    --white-color: #ffffff;
    --green-color: #52B788;
}

/* Start Loading Page */
.loading{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color:var(--primary-color) !important;
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
    z-index: 5000;
    text-align: center;
    line-height: 90vh;
}
.loading.display-none{
    position: fixed;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color:var(--primary-color) !important;
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
    z-index: -5000;
    text-align: center;
    line-height: 90vh;
    transition: all 0.5s;
}
@keyframes fadeIn{
    to{
        opacity: 1;
    }
}
.fade-in{
    opacity: 0;
    animation: fadeIn is ease-in forwards;
}
/* Start Loading Page */

.rtl{
    direction: rtl;
    text-align: right;
}

.ltr{
    direction: ltr;
    text-align: left;
}

html , body{
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

body{
    font-family: "LamaRounded" , sans-serif !important;
    background-color: var(--primary-color);
}

/* Start Scrollbar */
::-webkit-scrollbar {
    width: 7px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--primary-color); 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 10px;
}
/* End Scrollbar */

::selection{
    background-color: var(--light-color);
    color: var(--primary-color);
}

.text-primary{
    color: var(--primary-color) !important;
}

.text-secondary{
    color: var(--secondary-color) !important;
}

.text-light{
    color: var(--light-color);
}

.text-dark{
    color: var(--dark-color);
}

.text-green{
    color: var(--green-color) !important;
}

.navbar-section{
    margin-bottom: 100px;
}

.navbar{
    background-color: #fafafa03;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    padding: 15px;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url(../../images/icons/navbar-icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.navbar-brand-logo , footer-brand-logo{
    width: 170px;
    height: auto;
}

.nav-item .nav-link{
    margin-left: 5px;
    color: var(--white-color);
    font-weight: bold;
    font-size: 11pt;
}

.nav-item .nav-link:hover{
    color: var(--secondary-color);
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
    color: var(--white-color);
    border-bottom: 1px solid var(--white-color);
    width: fit-content;
}

a{
    text-decoration: none;
}

.cursor-pointer{
    cursor: pointer;
}

.btn-light{
    width: auto;
    background-color: var(--light-color);
    color: var(--primary-color);
    border-radius: 15px;
    transition: all ease-in-out 0.2s;
    border: 1px solid var(--light-color);
}

.btn-light:hover{
    background-color: unset;
    color: var(--secondary-color);
    border: 1px solid var(--light-color);
}

.btn-outline-light{
    width: auto;
    background-color: unset;
    color: var(--light-color);
    border-radius: 15px;
    border: 1px solid var(--light-color);
    font-weight: bold;
}

.btn-outline-light:hover{
    background-color: unset;
    color: var(--secondary-color);
}

.btn-green{
    width: auto;
    background-color: var(--green-color);
    color: var(--light-color);
    border-radius: 10px;
    border: 1px solid var(--green-color);
}

.btn-green:hover{
    width: auto;
    background-color: var(--green-color);
    color: var(--light-color);
    border-radius: 10px;
    border: 1px solid var(--green-color);
}

.hero-section{
    position: relative;
    width: 100%;
    height: 15.2cm;
    background-image: url(../../images/pages/hero-section.webp);
    /* background-size: 100% 120%; */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: var(--light-color);
    text-align: center;
    align-content: center;
}

.hero-section::after {
    display: block;
    content: "";
    width: 100%;
    height: 50px;
    background-image: url(../../images/pages/overley.png);
    background-size: 100% 100%;
    position: absolute;
    bottom: -20px;
    right: 0;
}

.hero-section-text{
    width: inherit;
    position: absolute;
    top: 15%;
    right: 0;
    color: var(--light-color);
}

p{
    font-size: 14pt;
    line-height: 1.0cm;
}

.save-earth-section{
    width: 100%;
    height: 10cm;
    position: relative;
    background-image: url(../../images/pages/save-earth.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.save-earth-layer-2{
    position: absolute;
    top: -55px;
    /*width: 40%;*/
    width: 65%;
    height: 65%;
    border-radius: 20px;
}

.step-number{
    width: 100%;
    background-image: url(../../images/pages/step-number.svg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 20px;
    text-align: center;
}

.start-journey{
    background-image: url(../../images/pages/start_journey.webp);
    background-size: 100% 100%;
    /* background-size: cover; */
    /* padding: 20px; */
}

@media only screen and (max-width: 600px) {
    .start-journey{
        background-image: url(../../images/pages/start_journey.webp);
        /* background-size: 100% 100%; */
        /*background-size: cover;*/
        /* padding: 20px; */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom;
    }
}

footer{
    background-color: #1B5367;
}

footer ul{
    padding: 0;
    list-style: none;
}

footer ul li{
    padding: 10px;
}

footer ul li a{
    color: var(--light-color);
}

footer ul li a:hover{
    color: var(--secondary-color);
}

.back-to-up{
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: unset;
    outline: unset;
    place-items: center;
}

.testimonial-card{
    width: 100%;
    height: auto;
    padding: 25px;
    background-color: #449C9D;
    border-radius: 15px;
    color: var(--light-color);
}

.testimonial-user-pic{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: contain;
    float: right;
    margin-left: 5px;
}

.testimonial-card-footer-button{
    background-color: unset;
    border: 1px solid var(--light-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.owl-carousel .owl-item img{
    display: unset;
    width: auto;
}

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 1px;
    background: #3EC400;
    display: block;
    /* -webkit-backface-visibility: visible; */
    transition: opacity 200ms ease;
    border-radius: 30px;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
    background-color: var(--light-color);
}

.owl-dots{
    position: absolute;
    top: 5%;
    right: 2%;
}

.right-orange-lines{
    width: 100%;
    background-image: url(../../images/pages/right-orange-lines.png);
    background-size: 30% auto;
    background-position: 115%;
    background-repeat: no-repeat;
}

.left-orange-lines{
    width: 100%;
    background-image: url(../../images/pages/left-orange-lines.png);
    background-size: 35% auto;
    background-position: -30%;
    background-repeat: no-repeat;
}

.page-title{
    background-image: url(../../images/pages/page-title.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 30px;
}

.page-title::after {
    display: block;
    content: "";
    width: 100%;
    height: 50px;
    background-image: url(../../images/pages/overley.png);
    background-size: 100% 100%;
    position: absolute;
    bottom: -20px;
    right: 0;
}

section{
    width: 100%;
    position: relative;
}

.hand-image , .program-earth{
    position: absolute;
    top: -20px;
    right: 0;
    width: 35vw;
    z-index: -1;
}

.success-stories{
    width: 100%;
    padding: 20px;
    background-color: #7599a6;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    color: var(--light-color);
    border-radius: 20px;
}

.success-stories-image{
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.success-stories-carousel{
    -webkit-box-shadow: 13px 13px 11px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 13px 13px 11px 0px rgba(0,0,0,0.75);
    box-shadow: 13px 13px 11px 0px rgba(0,0,0,0.75);
}

.program-list{
    list-style: url(../../images/icons/check-green.svg);
    color: var(--light-color);
    font-size: 12pt;
}

.program-list li{
    padding-top: 15px;
}

.program-goals{
    float: left;
    position: relative;
    background-color: #52B788;
    text-align: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.program-goal-number{
    position: absolute;
    right: 13px;
    font-size: 17pt;
    font-weight: bold;
}

.program-define{
    position: absolute;
    top: 12%;
    left: 0;
    width: 35vw;
    z-index: -1;
}

.contact-us-section{
    background-color: #407283;
    border-radius: 15px;
    padding: 20px;
}

input, textarea , select {
    color: var(--light-color) !important; 
    border: solid 1px #386C7E !important;
    background-color: #4A7989 !important;
    padding: 10px !important;
}

input:focus, textarea:focus, select:focus {
    border-color: #386C7E !important; 
    background-color: #4A7989 !important;
    opacity: 100% !important;
}

.input-group-text{
    border: solid 1px #386C7E !important;
    background-color: #4A7989 !important;
}

::placeholder{
    text-align: left;
    color: var(--light-color) !important;
}

.auth-quote{
    width: 100%;
    min-height: 100vh;
    height: 100%;
    padding: 30px;
    background-image: url(../../images/pages/auth-quote-section.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.auth-quote-text{
    height: 70vh;
    align-content: center;
    color: var(--light-color);
}

.auth-form{
    width: 100%;
    padding: 20px;
    background-color: #407283;
    color: var(--light-color);
    border-radius: 15px;
}

.bi-eye , .bi-eye-slash{
    color: var(--light-color);
    font-size: 14pt;
}

.account-type{
    width: 100%;
    background-color: #557f8e;
    color: var(--light-color);
    padding: 20px;
    border: 1px solid var(--light-color);
    border-radius: 30px;
    transition: all ease-in-out 0.2s;
}

.account-type:hover{
    border: 1px solid var(--green-color);
}

.navbar-nav .dropdown-menu{
    background-color: var(--primary-color);
}

.dropdown-divider{
    background-color: var(--light-color);
}

.language-icon{
    width: 25px;
    border-radius: 50%;
}
.terms-list ul{
    list-style-type: square;
    color: white;
}
.terms-text p{
    color: #FFFFFF !important;
    opacity: 70% !important;
}

.error-btn-green{
    width: auto;
    background-color: var(--green-color);
    color: var(--light-color);
    border-radius: 15px;
    border: 1px solid var(--green-color);
    padding: 15px;
}

.search-section{
    width: 100%;
    border-radius: 15px;
    border: 1px solid var(--green-color);
    background-color: #588493;
    padding: 15px;
}

.search-section input{
    border-radius: 15px;
    background-color: var(--white-color) !important;
    color: var(--primary-color) !important;
}

.search-section input::placeholder{
    color: var(--dark-color) !important;
}

.most-viewed-section{
    width: 100%;
    border-radius: 15px;
    border: 1px solid var(--green-color);
    background-color: #588493;
    color: var(--light-color);
    padding: 15px;
}

.most-viwed-image{
    width: 100%;
    height: 2cm;
    object-fit: cover;
    border-radius: 10px;
}

.blog-section{
    width: 100%;
    border-radius: 15px;
    border: 1px solid var(--green-color);
    background-color: #588493;
    color: var(--light-color);
    padding: 15px;
}

.blog-image{
    width: 100%;
    min-height: 4cm;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.category-section {
    width: 100%;
    border-radius: 15px;
    border: 1px solid var(--green-color);
    background-color: #588493;
    color: var(--light-color);
    padding: 15px;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}

.category-section:hover{
    background-color: var(--green-color);
}

.category-section-active{
    width: 100%;
    border-radius: 15px;
    border: 1px solid var(--green-color);
    background-color: var(--green-color);
    color: var(--light-color);
    padding: 15px;
    cursor: pointer;
}

.prev-next {
    color: white; 
    background-color: white; 
    border: none; 
    font-weight: bold;
    text-align: center;
    display: flex; 
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    /* padding: 8px 15px;  */
    
    height: auto; 
}
.prev{
    margin-left: 6px;
}
.page-num {
    color: white !important; 
    background-color: transparent !important; 
    border: none; 
    font-weight: bold;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    transition: all ease-in-out 0.3s;
    margin-left: 6px;
}

.page-num-active{
    color: white !important; 
    background-color: var(--green-color) !important;
    border: none; 
    font-weight: bold;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-left: 6px;
}

.page-num:hover{
    background-color: var(--green-color) !important;
}

input:-webkit-autofill,
input:focus:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #d3d6ff inset !important; /* إضافة تأثير الظل */
  box-shadow: 0 0 0px 1000px #d3d6ff inset !important; /* إضافة تأثير الظل */
  transition: background-color 5000s ease-in-out 0s; /* تحسين الانتقال */
}

.single-blog-image{
    width: 100%;
    height: 8cm;
    object-fit: cover;
    border-radius: 15px;
}

.single-blog-text{
    color: var(--light-color);
    text-align: justify;
}

.share-blog{
    width: 100%;
    border-radius: 15px;
    border: 1px solid var(--green-color);
    background-color: #588493;
    color: var(--light-color);
    padding: 15px;
}

.share-blog-icons{
    display: flex;
    justify-content: space-around;
    overflow-x: auto;
    overflow-y: hidden;
}

.share-blog-icons a img{
    width: 35px;
}

.form-select {
    --bs-form-select-bg-img: url(../../images/icons/arrow-down-light.svg) !important;
}

.tags-section{
    display: flow;
    width: 100%;
    border-radius: 15px;
    border: 1px solid var(--green-color);
    background-color: #588493;
    color: var(--light-color);
    padding: 15px;
    overflow-x: auto;
    overflow-y: hidden;
}

.tags-section .single-tag{
    width: max-content;
    background-color: var(--light-color);
    color: var(--primary-color);
    padding: 7px;
    border-radius: 10px;
    font-size: 11pt;
}