@font-face{
	font-family:tajawal;
	src:url(../fonts/IBMPlexSansArabic-Regular.ttf) format("truetype"),url(../fonts/IBMPlexSansArabic-Bold.ttf) format("truetype"),
        url(../fonts/IBMPlexSansArabic-Medium.ttf) format("truetype")
}

.rtl {
    direction: rtl;
}
h1,h2,h3,h4,h5,h6,a,p,span,input,label,textarea,button{
    font-family: 'tajawal';
}
a {
    text-decoration: none;
    cursor: pointer;
    color: #85B9A1;
}
label{
    color:#0f2b3f;
}
header {
    float: left;
    width: 100%;
    background: #6BCAC8;
}
#navbar.sticky-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 11;
}
#navbar {
    background: rgb(255 255 255/71%);
}
#navbar ul li a {
    font-family: 'tajawal';
    font-size: .9rem;
    color: #0e344a;
    padding: 1.55rem 0;
    transition: .5s ease;
}

#slider{
  width: 100%;           /* يمتد عرض الصفحة */
  min-height: 100vh;      /* ارتفاع مناسب للبانر */
  position: relative;     /* أبسط من absolute هنا */
  background: url(../images/back.jpg) center bottom / 100% auto no-repeat;
  /* شرح:
     background-size: 100% auto  => يطابق العرض ويحتفظ بالتناسب
     position: center bottom     => يثبت الصورة من الأسفل للقص العمودي الجميل
  */
}

/*
#slider .word-1 {
    background: url(../images/word-1.svg) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 55%;
    left: 20%;
    right: 20%;
    width: 60%;
    height: 100%;
    z-index: 4;
}

#slider .word-2 {
    background: url(../images/word-2.svg) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 50%;
    left: 20%;
    right: 20%;
    width: 60%;
    height: 100%;
    z-index: 4;
}
*/
.max-height {
    max-height: 1020px;
    position: absolute;
    bottom: 0;
    width: 100%;
    right: 0;
    left: 0;
    height: 100vh;
}
.h-100 {
    height: 100%!important;
}
.d-flex {
    display: flex!important;
}
#slider .earth {
    background: url(../images/EARTH.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
}
#slider .ola {
    background: url(../images/Ola.webp) no-repeat bottom;
    background-size: contain;
    position: absolute;
    right: 0;
    bottom: 22%;
    width: 60%;
    height: 100%;
}
#slider .diriyah-1 {
    background: url(../images/Diriyah-1.webp) no-repeat center bottom;
    background-size: contain;
    position: absolute;
    left: 6px;
    bottom: 20%;
    width: 69%;
    height: 100%;
    z-index: 1;
}
#slider .diriyah-2 {
    background: url(../images/Diriyah-2.webp) no-repeat center bottom;
    background-size: contain;
    position: absolute;
    right: 13%;
    bottom: 27.7%;
    width: 65%;
    height: 100%;
}
#slider .sea {
    background: url(../images/sea.webp) no-repeat bottom;
    background-size: contain;
    position: absolute;
    right: 0;
    bottom: 13%;
    width: 70%;
    height: 100%;
    z-index: 1;
}
#slider .sindala {
    background: url(../images/Sindala.webp) no-repeat bottom;
    background-size: contain;
    position: absolute;
    right: 0;
    bottom: 25.4%;
    width: 89%;
    height: 100%;
    z-index: 3;
}
#slider .bicycle-1 {
    background: url(../images/bicycle-1.webp) no-repeat center bottom;
    background-size: contain;
    position: absolute;
    left: 23%;
    bottom: 20%;
    width: 18%;
    height: 100%;
    z-index: 5;
}
#slider .bicycle-2 {
    background: url(../images/bicycle-2.webp) no-repeat center bottom;
    background-size: contain;
    position: absolute;
    left: 39%;
    bottom: 15%;
    width: 14%;
    height: 100%;
    z-index: 5;
}
#slider .sun {
    background: url(../images/sun.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 65%;
    width: 15%;
    height: 100%;
    right: 60%;
    z-index: 0;
}
#slider .palm {
    background-size: contain;
    position: absolute;
    bottom: 40%;
    width: 15%;
    height: 100%;
    left: 21%;
    z-index: 0;
}
#slider .mokab {
    background: url(../images/mokab.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 18%;
    width: 156%;
    height: 100%;
    left: 0;
    z-index: 1;
    right: -29%;
    left: -25%;
}
#slider .man {
    background: url(../images/man.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 20%;
    width: 90%;
    height: 100%;
    left: auto;
    right: -45%;
    z-index: 2;
}
#slider .woman {
    background: url(../images/women.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 20%;
    width: 65%;
    height: 100%;
    left: -22%;
    right: auto;
    z-index: 3;
}
#slider .horse {
    background: url(../images/horse.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 32%;
    width: 55%;
    height: 100%;
    left: 11%;
    z-index: 10;
}
#slider .smoke {
    background: url(../images/foge-rocet.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 38%;
    width: 53%;
    height: 100%;
    left: 25%;
    z-index: 3;
}
#slider .smokeline {
    background: url(../images/line-rocet.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 32%;
    width: 16%;
    height: 100%;
    left: 43%;
    z-index: 2;
}
#slider .roket {
    background: url(../images/ROKET.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 70%;
   width: 32%;
    height: 100%;
    left: 36%;
    z-index: 9;
}
#slider .theline {
    background: url(../images/theline.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 22%;
    width: 94%;
    height: 100%;
    left: 0;
    z-index: 3;
}
#slider .mountain-1 {
    background: url(../images/mountain-1.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 27%;
    width: 80%;
    height: 100%;
    right: -15%;
    z-index: 2;
}
#slider .mountain-2 {
    background: url(../images/mountain-2.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 48%;
    width: 50%;
    height: 100%;
    right: 30%;
    z-index: 1;
}
#slider .road {
    background: url(../images/road.webp) no-repeat bottom;
    background-size: contain;
    position: absolute;
    left: 0;
    bottom: 4%;
    width: 91%;
    height: 100%;
    z-index: 3;
}
#slider .garden {
    background: url(../images/Kings-garden.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 15%;
    width: 36%;
    height: 100%;
    right: 6%;
    z-index: 2;
}
#slider .solarenergy {
    background: url(../images/Solar-energy.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 30%;
    width: 80%;
    height: 100%;
    left: 0;
    z-index: 1;
}
#slider .aerial-lift {
    background: url(../images/Aerial-lift.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 50%;
    width: 55%;
    height: 100%;
    left: 0;
    z-index: 0;
}
#slider .seer {
    background: url(../images/seer.webp) center bottom no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 10%;
    width: 38%;
    height: 100%;
    left: 31%;
    z-index: 5;
}

.section {
    float: left;
    width: 100%;
    overflow: hidden;
}
#info {
    background-size: contain;
    color: rgba(255, 255, 255,1)!important;
    position: relative;
    padding: 1rem 0rem 5rem 0rem;
    position: relative;
    z-index: 10;
    margin-top: -5px;
    /* background-color: #e7e7e717 !important; */
}
#info .card{
    box-shadow: 0 20px 27px 0 rgba(0,0,0,.05);
}
#info .card-body {
    flex: 1 1 auto;
    color: rgb(103, 116, 142);
}
#info .card-body p,#info .card-body h5{
    font-family: 'tajawal';
    text-align: justify;
}
#info .card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-border-width: 0;
    --bs-card-border-color: rgba(0,0,0,.125);
    --bs-card-border-radius: 1rem;
    --bs-card-box-shadow: 0 20px 27px 0 rgba(0,0,0,.05);
    --bs-card-inner-border-radius: 3px;
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: #fff;
    --bs-card-bg: #fff;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
}
.btn-submit{
    background: #0f2b3f;
    border-color: #0f2b3f;
    color: #fff;
}
.btn-submit:hover{
    color:#fff
}
hr.horizontal.dark {
    background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.4),transparent);
}
hr.horizontal {
    background-color: transparent;
}

footer {
    float: left;
    width: 100%;
    background: #0f2b3f;
    border: none;
    color: #fff;
    margin: 0;
    font-family: 'tajawal';
}
footer p.small {
    font-size: .76rem;
    font-family: 'tajawal';
}
body .text-info {
    color: rgba(13, 202, 240,1)!important;
}

@media screen and (max-height: 600px){
    .max-height {
        max-height: 530px;
    }
}

@media screen and (max-width: 600px){
    #slider .max-height {
        bottom: 0%;
    }
}

@media screen and (max-height: 960px) and (max-width: 440px){
    .max-height {
        max-height: 185px;
    }
}

/* @media screen and (max-height: 1180px) and (max-width: 820px){
    .max-height {
        max-height: 390px;
    }
}

@media screen and (max-height: 1024px) and (max-width: 768px){
    .max-height {
        max-height: 370px;
    }
}

@media screen and (max-height: 1368px) and (max-width: 912px){
    .max-height {
        max-height: 430px;
    }
}

@media screen and (max-width: 600px){
    .max-height {
        max-height: 185px;
    }
}
@media screen and (min-height: 800px){
    .max-height {
        max-height: 770px;
        }
} */