@import url(bootstrap.min.css);
@import url(bootstrap-grid.min.css);

/* @import url(fullview.min.css); */

@import url(fullpage.css);
@import url(animate.css);
@import url(all.css);
@import url(line-awesome.min.css);
@import url(owl.carousel.css);
@import url(jquery.fancybox.css);
@import url(odometer.css);
@import url(slick.css);
@import url(slick-theme.css);

/* Start Fonts */

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@font-face {
    font-family: 'bahij';
    src: url(../fonts/Bahij_TheSansArabic-Plain.ttf);
}


/* End Fonts */

:root {
    --main-color: #f37022;     /* اللون البرتقالي الأساسي */
    --sec-color: #29d6a9;      /* الأخضر المائل للتوركواز */
    --dark-color: #1b1b2b;     /* اللون الداكن العام */

    /* خلفية رئيسية من الداكن إلى الفاتح */
    --bg-grid: linear-gradient(130deg, #1b1b2b 0%, #0f0f1a 100%);

    /* زر متدرّج بين الأساسي والثانوي */
    --btn-grid: linear-gradient(270deg, #f37022 0%, #29d6a9 100%);
	
	--back-ground: radial-gradient(
        circle at 20% 20%,
        rgba(41,214,169,0.3) 0%,
        transparent 40%
    ),
    radial-gradient(
        circle at 80% 80%,
        rgba(243,112,34,0.25) 0%,
        transparent 45%
    ),
    #1b1b2b;

}
:root {
    --text-color: #ffffff;
    --text-light: #cccccc;
    --text-dark: #1b1b2b;
}
:root {
    --border-color: rgba(255,255,255,0.1);
    --shadow-color: rgba(0,0,0,0.2);
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

a:hover {
    text-decoration: none;
    color: var(--main-color);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

a:focus {
    text-decoration: none;
    /* color: inherit; */
}

button,
button:hover {
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background: #fff;
    text-align: start;
    color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-family: 'Roboto', sans-serif;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

section,
footer {
    position: relative;
    /* overflow: hidden; */
}

p {
    margin: 0;
    color: #fff;
    font-size: 15px;
    line-height: 25px;
}

ul {
    padding: 0;
    margin: 0;
    display: block;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

li {
    display: block;
    list-style: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

iframe {
    width: 100%;
    height: 100%;
}

.padding {
    padding: 0 !important;
}

img {
    max-width: 100%;
}

input,
button,
input:focus,
button:focus,
input:active,
button:active,
button:hover,
textarea:active,
textarea:focus,
select,
select:active,
select:focus {
    outline: none !important;
}

textarea {
    resize: none;
}

main {
    overflow: hidden;
    /* min-height: 100vh; */
}


/* Start Loading */

.loader {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 999999999999999999999999999999;
    background: #fff;
    transition: all .5s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader .loader-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}

.loader .loader-inner img {
    max-width: 250px;
}


/* End Loading */


/* Start Not-found */

.not-found .not-found-pro {
    max-width: 500px;
    margin: auto;
    text-align: center;
}

.not-found .not-found-pro img {
    max-height: 400px;
}

.not-found .not-found-pro h2 {
    font-size: 30px;
    color: var(--dark-color);
    font-weight: bold;
}

.not-found .not-found-pro h4 {
    margin: 15px 0;
    font-size: 20px;
    color: #777;
}

.not-found .not-found-pro p {
    margin: 25px 0 15px;
    font-size: 14px;
    color: #777;
    /* font-weight: bold; */
    position: relative;
}

.not-found .not-found-pro .btn.go-home {
    padding: 0;
    line-height: normal;
    min-height: auto;
    background: transparent;
    color: var(--sec-color);
    font-size: 20px;
    text-decoration: underline;
    margin: 0 auto;
}

.not-found .not-found-pro p::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    border-bottom: 1px #f1f1f1 solid;
    margin: auto;
    width: 100%;
    bottom: 0;
    height: 1px;
    z-index: -2;
}

.not-found .not-found-pro p::before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    margin: auto;
    z-index: -1;
    border: 1px #f1f1f1 solid;
}

.not-found.not-found-404 .not-found-pro h2 {
    margin: 20px 0;
}


/* End Not-found */


/* Start Select Nice */

select {
    display: none;
}

.nice-select {
    -webkit-tap-highlight-color: transparent;
    background-color: #fff;
    border: none;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    /* float: right; */
    font-family: inherit;
    font-size: 16px;
    font-weight: normal;
    line-height: 50px;
    outline: none;
    padding-right: 30px;
    padding-left: 30px;
    position: relative;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    color: #E2DDDD;
    width: 100%;
    background: transparent;
    border-bottom: 1px solid #707070;
    padding: 0 20px;
}

.nice-select:hover {
    border-color: #dbdbdb;
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
    border-color: #999;
}

.nice-select:after {
    content: "\f107";
    display: block;
    margin-top: 0;
    pointer-events: none;
    position: absolute;
    right: 15px;
    top: 0;
    -webkit-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    transition: all 0.15s ease-in-out;
    font-family: 'Line Awesome Free';
    font-weight: bold;
    border: none !important;
    transform: none !important;
    font-size: 16px;
    color: #a7a7a7;
    /* opacity: .35; */
}

.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
}

.nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none;
}

.nice-select.disabled:after {
    border-color: #cccccc;
}

.nice-select.wide {
    width: 100%;
}

.nice-select.wide .list {
    left: 0 !important;
    right: 0 !important;
}

.nice-select.right {
    float: right;
}

.nice-select.right .list {
    left: auto;
    right: 0;
}

.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px;
}

.nice-select.small:after {
    height: 4px;
    width: 4px;
}

.nice-select.small .option {
    line-height: 34px;
    min-height: 34px;
}

.nice-select .list {
    background-color: var(--white-color);
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9;
    width: 100%;
}

.nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: none;
    padding: 0 10px;
    text-align: start;
    transition: all 0.2s;
    color: #000;
    background: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background-color: var(--main-color);
    color: #212121;
}


/* End Select Nice */


/*** 

====================================================================
	Start Mobile Menu
====================================================================

***/

.nav-outer .mobile-nav-toggler {
    position: relative;
    float: right;
    font-size: 30px;
    line-height: 50px;
    cursor: pointer;
    color: #ffffff;
    display: none;
}

.mobile-menu {
    position: fixed;
    right: 0;
    top: 0;
    width: 300px;
    padding-inline-end: 0;
    max-width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: 999999;
}

.mobile-menu .nav-logo {
    position: relative;
    padding: 20px 20px;
    /* text-align: left; */
}

.mobile-menu .nav-logo img {
    max-width: 200px;
    max-height: 55px;
}

.mobile-menu-visible {
    overflow: hidden;
}

.mobile-menu-visible .mobile-menu {
    visibility: visible;
}

.mobile-menu .menu-backdrop {
    position: fixed;
    right: 0;
    top: 0;
    width: 0%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.90);
    -webkit-transform: translateX(101%);
    -ms-transform: translateX(101%);
    transform: translateX(101%);
    transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -webkit-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}

.mobile-menu-visible .mobile-menu .menu-backdrop {
    opacity: 1;
    width: 100%;
    visibility: visible;
    transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -webkit-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}

.mobile-menu .menu-box {
    position: absolute;
    right: -400px;
    top: 0px;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    background: var(--bg-grid);
    padding: 0px 0px;
    z-index: 5;
    border-radius: 0px;
    transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -webkit-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
    padding: 43px 0 0;
}

.mobile-menu-visible .mobile-menu .menu-box {
    right: 0px;
    -webkit-transition-delay: 600ms;
    -moz-transition-delay: 600ms;
    -ms-transition-delay: 600ms;
    -o-transition-delay: 600ms;
    transition-delay: 600ms;
}

.mobile-menu .close-btn {
    position: relative;
    top: 0;
    line-height: normal;
    /* width: 100%; */
    text-align: center;
    font-size: 20px;
    text-align: end;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    right: 0;
    background: transparent;
    padding: 10px 15px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
}

.mobile-menu-visible .mobile-menu .close-btn {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 900ms;
    -moz-transition-delay: 900ms;
    -ms-transition-delay: 900ms;
    -o-transition-delay: 900ms;
    transition-delay: 900ms;
}

.mobile-menu .close-btn:hover {
    opacity: 0.50;
}

.mobile-menu .navigation {
    position: relative;
    display: block;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.mobile-menu .navigation li {
    position: relative;
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.mobile-menu .navigation li>ul>li:last-child {
    border-bottom: none;
}

.mobile-menu .navigation li>ul>li:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.mobile-menu .navigation li>a {
    position: relative;
    display: block;
    line-height: 24px;
    padding: 10px 20px;
    font-size: 15px;
    /* color: #404040; */
    text-transform: capitalize;
}

.mobile-menu .navigation li:hover>a,
.mobile-menu .navigation li.current>a {
    color: var(--main-color);
}

.mobile-menu .navigation li.dropdown .dropdown-btn {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 44px;
    height: 44px;
    text-align: center;
    font-size: 16px;
    line-height: 44px;
    color: #404040;
    cursor: pointer;
    z-index: 5;
}

.mobile-menu .navigation li.dropdown .dropdown-btn:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 10px;
    width: 1px;
    height: 24px;
    border-left: 1px solid rgba(0, 0, 0, 0.10);
}

.mobile-menu .navigation li>ul,
.mobile-menu .navigation li>ul>li>ul {
    display: block;
    background: var(--bg-color);
    height: 0;
    transition: all .5s;
    overflow: hidden;
}

.sticky-header .navbar-header {
    display: none;
}

.sticky-header .outer-box .nav-btn {
    position: relative;
    top: 4px;
    float: right;
    font-size: 22px;
    color: #000000;
    cursor: pointer;
    margin-top: 0px;
    margin-left: 30px;
}

.sticky-header .outer-box .mobile-nav-toggler {
    position: relative;
    float: right;
    font-size: 28px;
    color: #000000;
    cursor: pointer;
    margin-left: 30px;
}

.sticky-header .outer-box .search-box-btn {
    color: #000000;
}

.sticky-header .outer-box {
    padding: 22px 0px;
}

.nav-outer2 .mobile-nav-toggler2 {
    position: relative;
    float: right;
    font-size: 30px;
    line-height: 50px;
    cursor: pointer;
    color: #ffffff;
    display: none;
}

.mobile-menu2 {
    position: fixed;
    right: 0;
    top: 0;
    width: 300px;
    padding-inline-end: 30px;
    max-width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: 999999;
}

.mobile-menu2 .nav-logo2 {
    position: relative;
    padding: 20px 20px;
    /* text-align: left; */
}

.mobile-menu2 .nav-logo2 img {
    max-width: 200px;
    max-height: 55px;
}

.mobile-menu-visible2 {
    overflow: hidden;
}

.mobile-menu-visible2 .mobile-menu2 {
    visibility: visible;
}

.mobile-menu2 .menu-backdrop2 {
    position: fixed;
    right: 0;
    top: 0;
    width: 0%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.90);
    -webkit-transform: translateX(101%);
    -ms-transform: translateX(101%);
    transform: translateX(101%);
    transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -webkit-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}

.mobile-menu-visible2 .mobile-menu2 .menu-backdrop2 {
    opacity: 1;
    width: 100%;
    visibility: visible;
    transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -webkit-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}

.mobile-menu2 .menu-box2 {
    position: absolute;
    right: -400px;
    top: 0px;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    background: #ffffff;
    padding: 0px 0px;
    z-index: 5;
    border-radius: 0px;
    transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -webkit-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
}

.mobile-menu-visible2 .mobile-menu2 .menu-box2 {
    right: 0px;
    -webkit-transition-delay: 600ms;
    -moz-transition-delay: 600ms;
    -ms-transition-delay: 600ms;
    -o-transition-delay: 600ms;
    transition-delay: 600ms;
}

.mobile-menu2 .close-btn2 {
    position: absolute;
    left: 15px;
    top: 32px;
    line-height: 30px;
    width: 30px;
    text-align: center;
    font-size: 20px;
    color: #202020;
    cursor: pointer;
    z-index: 10;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
}

.mobile-menu-visible2 .mobile-menu2 .close-btn2 {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 900ms;
    -moz-transition-delay: 900ms;
    -ms-transition-delay: 900ms;
    -o-transition-delay: 900ms;
    transition-delay: 900ms;
}

.mobile-menu2 .close-btn2:hover {
    opacity: 0.50;
}

.mobile-menu2 .navigation2 {
    position: relative;
    display: block;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.mobile-menu2 .navigation2 li {
    position: relative;
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.mobile-menu2 .navigation2 li>ul>li:last-child {
    border-bottom: none;
}

.mobile-menu2 .navigation2 li>ul>li:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.mobile-menu2 .navigation2 li>a {
    position: relative;
    display: block;
    line-height: 24px;
    padding: 10px 20px;
    font-size: 15px;
    color: #404040;
    text-transform: capitalize;
}

.mobile-menu2 .navigation2 li:hover>a,
.mobile-menu2 .navigation2 li.current>a {
    color: #111111;
}

.mobile-menu2 .navigation2 li.dropdown .dropdown-btn {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 44px;
    height: 44px;
    text-align: center;
    font-size: 16px;
    line-height: 44px;
    color: #404040;
    cursor: pointer;
    z-index: 5;
}

.mobile-menu2 .navigation2 li.dropdown .dropdown-btn:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 10px;
    width: 1px;
    height: 24px;
    border-left: 1px solid rgba(0, 0, 0, 0.10);
}

.mobile-menu2 .navigation2 li>ul,
.mobile-menu2 .navigation2 li>ul>li>ul {
    display: block;
    background: var(--bg-color);
    height: 0;
    transition: all .5s;
    overflow: hidden;
}

.sticky-header2 .navbar-header2 {
    display: none;
}

.sticky-header2 .outer-box2 .nav-btn2 {
    position: relative;
    top: 4px;
    float: right;
    font-size: 22px;
    color: #000000;
    cursor: pointer;
    margin-top: 0px;
    margin-left: 30px;
}

.sticky-header2 .outer-box2 .mobile-nav-toggler2 {
    position: relative;
    float: right;
    font-size: 28px;
    color: #000000;
    cursor: pointer;
    margin-left: 30px;
}

.sticky-header2 .outer-box2 .search-box-btn2 {
    color: #000000;
}

.sticky-header2 .outer-box2 {
    padding: 22px 0px;
}


/*** 

====================================================================
	End Sidebar style
====================================================================

***/


/* Start Header */

header.sticky {
    position: absolute;
    z-index: 9;
    right: 0;
    left: 0;
    width: 100%;
    top: 0;
    /* padding: 30px 0; */
    transition: all .5s;
}

.head-inner {
    display: flex;
    justify-content: space-between;
}

.head-inner .logo-h .logo {
    display: flex;
    max-width: 200px;
}

.head-inner .logo-h .logo .text-logo {
    max-width: 120px;
    padding-top: 37px;
    margin-right: -47px;
}

.head-inner .logo-h .logo .icon-logo {
    max-width: 120px;
}

.head-inner .nav-menu ul {
    display: flex;
    margin-top: 25px;
}

.head-inner .nav-menu ul li {
    margin: 0 14px;
    position: relative;
}

.head-inner .nav-menu ul li a {
    color: #FFFFFF;
    text-transform: capitalize;
    font-size: 16px;
    position: relative;
    /* font-family: 'light'; */
}

.head-inner .nav-menu ul li a::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    bottom: -24px;
     background: url(../images/small-star-bold-gold.svg); 
    width: 14px;
    height: 17px;
    background-size: contain;
    transition: all .5s;
    transform: scale(0);
}

.head-inner .nav-menu ul li.current-menu-item a::after,
.head-inner .nav-menu ul li a:hover::after {
    transform: none;
}

.btn {
    min-width: 179px;
    min-height: 45px;
    border: none;
    display: table;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #fff;
    position: relative;
    outline: none;
    box-shadow: none !important;
    background: transparent;
    border-radius: 50px;
    overflow: hidden;
    transition: all .5s;
    /* font-family: 'bold'; */
    line-height: 31px;
}

.btn::before,
.btn::after {
    opacity: 1;
    content: '';
    position: absolute;
    transition: all 0.4s;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: auto;
}

.btn::before {
    left: 0;
    z-index: 1;
    opacity: 0;
    background: var(--main-color);
    transform: scale(0.1, 1);
}

.btn::after {
    transition: all 0.3s;
    background: var(--btn-grid);
    transform: none;
}

.btn:hover::before,
.btn:hover::before {
    opacity: 1 !important;
    transform: scale(1, 1) !important;
}

.btn span {
    position: relative;
    z-index: 3;
}

.btn:hover,
.btn:focus,
.btn.btn-white:hover,
.btn.btn-white:focus {
    color: #fff;
}

.btn:hover::after,
.btn:hover::after {
    transform: scale(1, .1) !important;
    opacity: 0 !important;
}

.mobile-nav-toggler {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    background: var(--btn-grid);
    color: #fff;
    position: relative;
    border-radius: 4px;
    display: none;
}

.mobile-nav-toggler i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.head-inner .nav-menu ul.sub-menu {
    position: absolute;
    min-width: 160px;
    display: block;
    margin: 0;
    left: 0;
    background: var(--bg-grid);
    opacity: 0;
    visibility: hidden;
    height: 0;
    transition: all .5s;
    overflow: hidden;
}

.head-inner .nav-menu ul.sub-menu li {
    margin: 0;
}

.head-inner .nav-menu ul.sub-menu li a {
    font-size: 15px;
    padding: 10px;
    display: block;
    border-bottom: 1px rgb(255 255 255 / 16%) solid;
}

.head-inner .nav-menu ul.sub-menu li a:hover {
    background: var(--main-color);
    color: #ffff;
}

.head-inner .nav-right {
    display: flex;
    align-items: flex-start;
    padding: 12px 0 0;
}

.head-inner .nav-menu li.menu-item-has-children:hover ul.sub-menu {
    height: auto;
    opacity: 1;
    visibility: visible;
}

.head-inner .nav-menu ul li.menu-item-has-children::after {
    content: "\f107";
    position: absolute;
    right: -15px;
    font-family: 'Font Awesome 6 Pro';
    font-size: 12px;
    top: 3px;
}

.head-inner .nav-right .btn-search {
    background: none !important;
    border: none !important;
    color: #fff;
    font-size: 18px;
    padding: 0;
    margin-inline-end: 28px;
    margin-top: 13px;
}

.header-top {
    padding: 14px 0;
    position: relative;
}

.header-top::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.15;
    z-index: -1;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.head-top {
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

.head-top .time-info {
    display: flex;
    flex-wrap: wrap;
    border-inline-start: 1px solid #AFAFAF;
    padding-inline-start: 30px;
    margin-inline-start: 30px;
}

.head-top .time-info a {
    border-inline-start: 1px solid #AFAFAF;
    padding-inline-start: 30px;
    margin-inline-start: 30px;
}

.head-top .time-info span span,
.head-top .time-info a span {
    padding: 0;
    border: none;
    direction: rtl;
    display: inline-block;
}

.header-bottom {
    padding: 18px 0;
}

.head-top .time-info .date-h,
.head-top .time-info .time-h {
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    margin-inline-end: 22px;
}

@media (min-width: 576px) {
    .searchModal .modal-dialog {
        max-width: 1000px;
        height: 100vh;
        margin: 0 auto;
        display: table;
        width: 100%;
    }
}

.searchModal .modal-content {
    height: 100%;
    background: transparent;
    vertical-align: middle;
    display: table-cell;
}

.searchModal .modal-content .modal-body {
    padding: 0;
}

.searchModal .modal-content .modal-body .btn-close {
    position: fixed;
    top: 0;
    left: 0;
    margin: 20px;
    color: #fff;
    filter: brightness(0) invert(1);
}

.searchModal form {
    display: flex;
    max-width: 92%;
    margin: 0 auto;
}

.searchModal form input {
    width: calc(100% - 85px);
    height: 70px;
    padding: 0 20px;
}

.searchModal form button {
    width: 70px;
    height: 70px;
    background: var(--bg-grid);
    color: #fff;
    font-size: 20px;
    margin-inline-start: 15px;
}

.container-fluid {
    max-width: 1500px;
}


/* End Header */


/* Start Banner-h */

.banner-h {
    background: transparent linear-gradient(130deg, #1b1b2b 0%, #0f0f1a 100%) 0% 0% no-repeat padding-box;
    height: 100vh;
    padding: 23vh 0;
}

/* الخلفية الأصلية */
.banner-h {
    position: relative;
    overflow: hidden;
}

.banner-h::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url(//byko.company-bs.com/wp-content/themes/slt/assets/css/../https://byko.company-bs.com/wp-content/uploads/2025/12/maxresdefault-2.jpg)
        center/cover no-repeat;
    pointer-events: none;
}

/* طبقة الدوائر – 4 دوائر داخل نفس العنصر */
.banner-h::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle, rgba(41,214,169,0.18) 0%, transparent 70%) -180px -180px / 420px 420px no-repeat, /* أعلى يسار */
        radial-gradient(circle, rgba(41,214,169,0.15) 0%, transparent 70%) calc(100% + 180px) -180px / 420px 420px no-repeat, /* أعلى يمين */
        radial-gradient(circle, rgba(41,214,169,0.18) 0%, transparent 70%) -180px calc(100% + 180px) / 420px 420px no-repeat, /* أسفل يسار */
        radial-gradient(circle, rgba(41,214,169,0.15) 0%, transparent 70%) calc(100% + 180px) calc(100% + 180px) / 420px 420px no-repeat; /* أسفل يمين */
    
    animation: float-circles 18s infinite ease-in-out;
    pointer-events: none;
}

/* حركة ناعمة */
@keyframes float-circles {
    0%   { transform: translate(0,0); }
    25%  { transform: translate(25px,-20px); }
    50%  { transform: translate(-15px,25px); }
    75%  { transform: translate(20px,10px); }
    100% { transform: translate(0,0); }
}


.img-banner .img img {
    -webkit-mask-box-image: url(https://byko.company-bs.com/wp-content/uploads/2025/12/cropped-Icon-Alt-Colors.png);
    /* -webkit-mask-image: url(https://byko.company-bs.com/wp-content/uploads/2022/11/4656.png); */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.banner-h .img-banner {
    max-height: 60.460021905805036vh; 
    height: 75.460022vh;
    max-width: 519px; 
    margin-inline-start: auto;
}

.banner-h .img-banner .img {
    width: 100%;
    height: 100%;
}

.text-banner h1 {
    font-size: 3.25rem;
    line-height: 1.2;
    margin: 0 0 4.381161007667032vh;
}

.text-banner p {
    max-width: 567px;
    font-size: 18px;
    line-height: 28px;
    max-height: 84px;
    overflow: hidden;
    letter-spacing: 0.58px;
    color: #A7A7A7;
    /* max-height: 9.200438116100766vh; */
}

.text-banner .btn {
    margin: 2.381161vh 0 0;
}

.banner-h .text-banner {
    padding: 10vh 0 0;
}
/* حركة نعمة للصورة داخل الماسك */
.img-banner .img img {
    animation: softFloat 6s ease-in-out infinite alternate;
}

@keyframes softFloat {
    0% {
        transform: scale(1) translateY(0px);
    }
    100% {
        transform: scale(1.04) translateY(-6px);
    }
}


/* End Banner-h */


/* Start About-h */

.about-h {
    height: 100vh;
    padding: 28vh 0;
}

.overlay-img {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /* z-index: -1; */
    /* opacity: 0.3; */
    overflow: hidden;
}

.overlay-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about-h .overlay-img::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-grid);
    opacity: 0.93;
}

.title {
    margin: 0 0 8.214676889375685vh;
}

.title h3 {
    display: table;
    position: relative;
    margin: 0;
    padding: 0 0 15px;
    /* line-height: 28px; */
    font-size: 32px;
    letter-spacing: 1.02px;
    font-weight: 500;
}

.title h3::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 7px;
    background: linear-gradient(90deg, #FFFFFFB0 0%, #FFFFFF00 100%);
}

.text-about {
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 18px;
    padding: 32px 34px;
    box-shadow: 0 30px 60px rgba(0,0,0,.08);
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

/* Paragraph */
.text-about p {
    color: #fff;
    font-size: 17px;
    line-height: 28px;
    margin-bottom: 22px;
    max-height: none; /* مهم */
}

/* List */
.text-about ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 28px;
    margin: 0;
}

/* Items */
.text-about ul li {
    font-size: 16.5px;
    line-height: 26px;
    color: #b1b1b1;
    padding-inline-start: 26px;
    position: relative;
}

/* Bullet */
.text-about ul li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #999, #666);
    border-radius: 50%;
}
.text-about[data-float] {
    transform-style: preserve-3d;
}

@media (max-width: 991px) {

    .text-about {
        text-align: center;
        padding: 26px 22px;
    }

    .text-about ul {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .text-about ul li {
        text-align: center;
        padding-inline-start: 0;
    }

    .text-about ul li::before {
        display: none;
    }
}

.text-about ul li:nth-last-child(1),
.text-about ul li:nth-last-child(2) {
    margin-bottom: 0;
}

.text-about ul li::before {
    content: "";
    position: absolute;
    top: 6px;
    width: 15px;
    height: 15px;
    background: #FFF;
    left: 0;
    right: 0;
    border-radius: 50%;
}

.text-about ul li:nth-child(n+7) {
    display: none;
}

.img-about {
    width: 430px;
    height: 430px;
    background: transparent;
    border-radius: 50%;
    /* overflow: hidden; */
    position: relative;
    padding: 27px;
    border: 1px solid #707070;
}

.img-about .img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
}

.img-about .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.img-about .dot {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /* border: 1px solid #707070; */
    /* margin: 65px; */
    border-radius: 50%;
    z-index: 2;
    animation: spinoffPulse 15s linear infinite;
}

.img-about .dot::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background: #FFF;
    margin: 54px;
    border-radius: 50%;
}

@keyframes spinoffPulse {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* End About-h */


/* Start Services-h */

.services-h {
    height: 100vh;
    padding: 15vh 0;
}

.serv-block {
    height: 50.81161vh;
    display: block;
    width: 100%;
    text-align: center;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    transform: scale(.8);
}

.serv-block .img {
    width: 100%;
    height: 100%;
    position: relative;
}

.serv-block .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.serv-block .img::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
   
}

.owl-item.active.center .serv-block {
    width: 174%;
    position: relative;
    transform: translateX(-20%);
}

.owl-item.active.center {
    z-index: 4;
}

.serv-block .details {
    position: absolute;
    bottom: 0;
    z-index: 3;
    text-align: center;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 27px;
}

.serv-block .details h3 {
    letter-spacing: 0.83px;
    color: #FFF;
    font-size: 26px;
    line-height: 28px;
    font-weight: 500;
    margin: 0 0 27px;
}

.showMore {
    font-size: 16px;
    letter-spacing: 0.51px;
    color: #FFF;
    line-height: 28px;
    transition: all .3s;
}

.showMore i {
    font-size: 13px;
    margin-inline-start: 8px;
}

.owl-carousel .owl-dots {
    display: flex;
    justify-content: center;
    margin: 6.024096385542169vh 0 0;
}

.owl-carousel .owl-dots .owl-dot span {
    height: 11px;
    background: #FFFFFF;
    display: block;
    margin: 0 8px;
    width: 5px;
    transition: all .5s;
}

.owl-carousel .owl-dots .owl-dot.active span {
    height: 21px;
    background: var(--main-color);
}


/* End Services-h */


/* Start Projects-h */

.projects-h {
    height: 100vh;
    padding: 25vh 0;
}

.services-h .overlay-img::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-grid);
    opacity: 0.9;
}

.projects-h .overlay-img::after {
    content: "";
    position: absolute;
    right: 0;
}

.projects-h .overlay-img::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--back-ground);
    opacity: 0.84;
}

.pro-block {
    position: relative;
    display: block;
    text-align: center;
    height: 39.32092004381161vh;
    border-radius: 12px;
    overflow: hidden;
}

.projects-slider .item {
    padding: 0 15px;
}

.pro-block .img-block {
    width: 100%;
    height: 100%;
    position: relative;
}

.pro-block .img-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pro-block .img-block::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
   background: linear-gradient(
    180deg,
    rgba(243,112,34,0.05) 0%,
    rgba(41,214,169,0.25) 25%,
    rgba(27,27,43,0.85) 100%
);

}

.pro-block .details {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 20px;
}

.pro-block .details h3 {
    margin: 0 0 22px;
    color: #FFF;
    font-size: 26px;
    line-height: 28px;
    font-weight: 500;
    transform: translateY(44px);
    transition: all .3s;
}

.pro-block .details .showMore {
    transform: translateY(100px);
    display: block;
    opacity: 0;
}

.pro-block:hover .details h3,
.pro-block:hover .details .showMore {
    transform: none;
    opacity: 1;
}


/* End Projects-h */


/* Start Partners-h */

.partners-h {
    height: 100vh;
    padding: 20vh 0;
    overflow: hidden;
}

.partners-h .overlay-img::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--back-ground);
    opacity: 0.84;
}

.text-part h1 {
    color: #FFF;
    font-size: 87px;
    font-size: 4.838rem;
    line-height: 122px;
}

.text-part h1 span {
    color: var(--main-color);
}


/* End Partners-h */

/* تأكد أن العنصر يسمح بظهور الطبقات */
.services-h {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* الخلفية المتحركة (Gradient + Glow) */
.services-h::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(41,214,169,0.25), transparent 55%),
        radial-gradient(circle at 85% 70%, rgba(243,112,34,0.22), transparent 60%),
        linear-gradient(135deg, #1b1b2b, #1b1b2b);
    animation: floatGlow 14s ease-in-out infinite alternate;
    background-size: 200% 200%;
    filter: blur(2px);
    pointer-events: none;
}

/* الخلفية الأصلية للصورة الموجودة */
.services-h::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url(//byko.company-bs.com/wp-content/themes/slt/assets/css/../images/bg-banner.png)
        center/cover no-repeat;
    pointer-events: none;
}

/* الحركة */
@keyframes floatGlow {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 40%;
    }
    100% {
        background-position: 0% 100%;
    }
}

/* Start Partners-h */

.partners-slider .item {
    padding: 15px;
}

.comp-block {
    display: block;
    height: 199px;
    background: #FFFFFF00 0% 0% no-repeat padding-box;
    border: 1px solid #FFFFFF26;
    border-radius: 12px;
    padding: 20px;
    line-height: 159px;
}

.comp-block .img {
    width: 100%;
    height: 100%;
    line-height: 157px;
}

.comp-block .img img {
    display: inline-block;
    max-height: 100%;
}


/* End Partners-h */


/* Start Footer */

footer {
    height: 100vh;
    padding: 20vh 0 0;
}

.overlay-img::after {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    content: "";
}

footer .overlay-img::after {
    background: #000;
    opacity: 0.72;
}

.btn.btn-big {
    margin-inline-start: auto;
    min-width: 254px;
    min-height: 139px;
    border-radius: 28px;
    line-height: 127px;
    font-size: 22px;
    font-weight: 500;
    background: transparent;
    overflow: visible;
}

.btn.btn-big::after {
    background: transparent linear-gradient(107deg, #89D1BD 0%, #f37022 100%);
    opacity: .2;
    border-radius: 28px;
}

.text-foot h1 {
    font-size: 67px;
    line-height: 80px;
    font-weight: 500;
    margin: 0;
}

.text-foot h1 span {
    color: var(--main-color);
}

.links-f {
    display: flex;
    justify-content: center;
    margin: 1.381161vh 0;
    flex-wrap: wrap;
    align-items: center;
    -webkit-align-items: center;
    width: 100%;
    /* padding-inline-end: 30px; */
}

.links-f span {
    margin-inline-end: 50px;
    color: #FFf;
    font-size: 22px;
}

.links-f a {
    display: flex;
    margin: 1vh 0;
    margin-inline-end: 50px;
    align-items: center;
    -webkit-align-items: center;
    max-width: 25%;
}

.links-f a .icon {
    width: 42px;
    height: 42px;
    line-height: 42px;
    border: 1px solid #BFBFBF;
    text-align: center;
    border-radius: 50%;
    font-size: 24px;
}

.links-f a span {
    margin: 0;
    width: calc(100% - 42px);
    padding-inline-start: 12px;
    font-size: 18px;
    line-height: 28px;
    font-weight: normal;
    transition: all .5s;
}

.links-f a .icon i {
    font-family: 'Line Awesome Free';
    font-weight: bold;
}

.links-f a .icon i.fab.fa-whatsapp {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
}

.links-s {
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    margin: 5.381161vh 0;
}

.links-s span {
    color: #FFF;
    font-size: 18px;
    margin-inline-end: 17px;
}

.links-s a {
    font-size: 20px;
    margin: 0 10px;
}

.links-f a:hover,
.links-s a:hover,
.links-f a:hover span,
.links-s a:hover span {
    color: var(--main-color);
}

.links-f a:hover .icon {
    border-color: var(--main-color);
}

.ryad-logo {
    height: 70px;
    display: table;
    max-height: 70px;
    overflow: hidden;
    position: relative;
    top: 10px;
    padding-top: 10px;
}

.footer-bottom {
    position: relative;
}

.footer-bottom::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.15;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: -1;
}

.footer-bottom .row {
    align-items: center;
    -webkit-align-items: center;
}

.copyRight p {
    display: flex;
    justify-content: flex-end;
    font-size: 14px;
    font-weight: normal;
}

.social-h {
    display: flex;
}

.social-h a {
    margin: 0 10px;
    font-size: 18px;
}

.social-h a:last-child {
    margin-inline-end: 0;
}

.social-h a:first-child {
    margin-inline-start: 0;
}

.head-top .time-info i {
    color: var(--main-color);
    margin-inline-end: 12px;
}

.head-top .time-info .date-h {
    margin: 0;
}


/* End Footer */


/* Start About-page */

.breadcrumb {
    margin: 0;
    background: linear-gradient(99deg, #120044 0%, #010017 100%);
    padding: 250px 0 110px;
}

.breadcrumb .overlay-img::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(99deg, #120044 0%, #010017 100%);
    z-index: -2;
}

.text-bread h1 {
    font-size: 46px;
    font-weight: bold;
    line-height: 72px;
    margin: 0;
    letter-spacing: 1.47px;
}

.body-inner {
    padding: 80px 0;
    height: auto;
}

.about-h.about-page.body-inner {
    padding: 150px 0;
}

.text-about h3 {
    color: #FFF;
    font-size: 32px;
    line-height: 43px;
    margin: 0 0 33px;
    font-weight: 500;
}

.body-inner .text-about p {
    max-height: fit-content;
    margin: 33px 0;
}

.body-inner .text-about ul {
    margin: 33px 0;
}

.body-inner .text-about ul li:nth-child(n+7) {
    display: block;
}

.vision-h .overlay-img::after {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0.9;
    background: var(--bg-grid);
}

.imgs-about {
    display: flex;
    justify-content: space-between;
    height: 100%;
    position: relative;
    max-width: 396px;
    margin: 0 auto;
}

.imgs-about .img {
    width: 178px;
    height: 492px;
    -webkit-mask-box-image: url(../images/About-shape.svg);
    position: absolute;
    right: 0;
    top: 0;
}

.imgs-about .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center left;
}

.imgs-about .img:first-child {
    /* border-radius: 50% 32% 0 0; */
    overflow: hidden;
    -webkit-mask-box-image: url(../images/About-shape2.svg);
    top: auto;
    right: auto;
    left: 0;
    bottom: 0;
    margin: 0;
}

.vision-h.about-page.body-inner {
    padding: 0;
}

.vision-h .col-md-7.col-sm-12 {
    padding-top: 70px;
    padding-bottom: 70px;
}

.values-h.about-page.body-inner {
    padding: 90px 0;
}

.values-h .overlay-img::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    background: var(--bg-grid);
}

.img-value {
    height: 443px;
}

.img-value .img {
    width: 100%;
    height: 100%;
    -webkit-mask-box-image: url(../images/shape-rotate.svg);
}

.img-value .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* End About-page */


/* Start Help-page */

.overlay-img::after {
    background: linear-gradient(105deg, #120044 0%, #010017 100%);
    opacity: 0.93;
}

.help-block {
    display: flex;
    margin: 15px 0;
    align-items: center;
    -webkit-align-items: center;
    position: relative;
    border: 1px solid #606060;
    border-radius: 12px;
    padding: 27px;
    overflow: hidden;
    transition: all .5s;
}

.help-block::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    background: #fff;
    z-index: -1;
    opacity: .2;
}

.help-block .icon {
    width: 98px;
    height: 98px;
    background: #FFF;
    padding: 14px;
    line-height: 70px;
    text-align: center;
    border-radius: 50%;
}

.help-block .details {
    width: calc(100% - 98px);
    padding-inline-start: 35px;
}

.help-block .details h3 {
    letter-spacing: 0.7px;
    color: #FFF;
    font-size: 22px;
    line-height: 35px;
    font-weight: normal;
}

.help-block:hover {
    border-color: #D9D9D9;
}

.pagination {
    flex-wrap: wrap;
    justify-content: center;
    margin: 55px 0 0;
}

.pagination .page-item {
    margin: 5px 9px;
}

.pagination .page-item .page-link {
    width: 54px;
    height: 54px;
    background: #FFFFFF00 0% 0% no-repeat padding-box;
    border: 1px solid #A6A6A6;
    line-height: 52px;
    padding: 0;
    text-align: center;
    border-radius: 50%;
    letter-spacing: 0.58px;
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    transition: all .5s;
}

.pagination .page-item.active .page-link,
.pagination .page-item:hover .page-link {
    background: #fff;
    color: #f37022;
}


/* End Help-page */


/* Start Single-help */

.single-help.body-inner {
    background: linear-gradient(103deg, #120044 0%, #010017 100%);
    padding-top: 260px;
}

.single-help .text-help h3 {
    letter-spacing: 0.83px;
    color: #FFF;
    font-size: 26px;
    line-height: 35px;
    margin: 0 0 41px;
}

.single-help .text-help p {
    max-width: 996px;
    margin: 40px 0;
    letter-spacing: 0.58px;
    color: #A7A7A7;
    font-size: 18px;
    line-height: 28px;
}

.single-help .text-help .btn {
    margin-top: 60px;
}

.btn.btn-border::after {
    background: transparent;
    border: 1px #707070 solid;
    border-radius: 50px;
}

.btn.btn-border {
    min-width: 233px;
    min-height: 55px;
    line-height: 43px;
    letter-spacing: 0.51px;
    font-size: 16px;
}

.btn.btn-border i {
    font-size: 14px;
    margin-inline-end: 12px;
}


/* End Single-help */


/* Start Services-page */

.body-inner .serv-block {
    height: 300px;
    transform: none;
    margin: 15px 0;
}


/* End Services-page */


/* Single Single-serv */

.slick-slider {
    direction: ltr;
}

.slider-single-pro {
    display: flex;
    position: relative;
}

.slider.slider-for {
    width: calc(100% - 155px);
    padding-right: 5px;
}

.slider.slider-nav.thumb-image {
    width: 155px;
}

.blokc-single-g {
    height: 318px;
    overflow: hidden;
    position: relative;
}

.blokc-single-g img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

.thumbnail-image {
    height: 100px;
    overflow: hidden;
}

.thumbnail-image .thumbImg {
    height: 100%;
    width: 100%;
}

.thumbnail-image .thumbImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slick-prev.slick-arrow,
.slick-next.slick-arrow {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: var(--main-color);
    height: 25px;
    z-index: 3;
    opacity: .5;
    transform: none;
}

.slick-next.slick-arrow {
    top: auto;
    bottom: 9px;
}

.text-single {
    margin-bottom: 30px;
    padding-inline-end: 0px;
}

.blokc-single-g a {
    display: flex;
    width: 45px;
    height: 45px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
    justify-content: center;
    align-items: center;
    background: rgb(16 0 60 / 70%);
    border-radius: 50%;
    margin: 20px;
    font-size: 26px;
    color: var(--main-color);
    outline: 0;
}

.blokc-single-g a:hover {
    text-decoration: none;
}

.slider-single-pro .slider-for::before {
    content: "";
    position: absolute;
    bottom: 8px;
    right: -40px;
    background: url(../images/after-slider.png);
    width: 228px;
    height: 228px;
    background-repeat: no-repeat;
    background-position: bottom right;
}

@media(max-width: 991px) {
    .slider-single-pro {
        display: block;
    }
    .slider.slider-for {
        width: 100%;
    }
    .slider.slider-nav.thumb-image {
        width: 100%;
        margin-top: 15px;
    }
    .thumbnail-image {
        padding: 0 2px;
    }
}

.text-single h3 {
    font-size: 18px;
    margin: 0 0 15px 0;
    color: var(--main-color);
    /* font-family: 'ge-ss-m'; */
}

.text-single h3 span {
    display: inline-block;
    margin: 0 5px;
}

.text-single h3 img {
    width: 33px;
    height: 33px;
}

.text-single p {
    color: #a7a7a7;
    font-size: 18px;
    line-height: 28px;
}

.single-serv-ul {
    margin-top: 40px;
}

.single-serv-ul li {
    max-width: 50%;
    flex: 0 0 50%;
}

.about-con {
    margin-top: px;
}

.about-con h2 {
    position: relative;
    display: inline-block;
    font-size: 22px;
    margin: 0;
    color: #553470;
    font-family: 'ge-ss-l';
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.about-con h2::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    width: 9px;
    height: 9px;
    margin: 0 auto;
    text-align: center;
    border-radius: 100%;
    background-color: #F15638;
}

.about-con ul {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
}

.about-con p {
    color: #303030;
    font-size: 16px;
}

.about-con li {
    position: relative;
    padding: 0 23px;
    color: #a7a7a7;
    font-size: 16px;
    margin-bottom: 8px;
}

.about-con li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 10px;
    height: 10px;
    background-color: var(--main-color);
    border-radius: 100%;
    right: 0;
}

.container-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    margin: 0 auto;
    opacity: .2;
}

.slider-home .container-line,
.page-header .container-line {
    z-index: 1;
}

.home-services .container-line,
.h-about .container-line {
    opacity: .06;
}

.container-line-center {
    width: 70%;
    margin: 0 auto;
    position: relative;
    height: 100%;
}

.line-item {
    float: left;
    width: 25%;
    height: 100%;
    box-sizing: border-box;
    border-right: 1px solid #707070;
    height: 100%;
    position: relative;
}

.line-item:first-child {
    border-left: 1px solid #707070;
}

.line-item:first-child {
    border-left: 1px solid #707070;
}

.line-item {
    border-right: 1px solid #707070;
}

.line-item:first-child {
    border-right: 1px solid #707070;
}

.line-item.one:before {
    content: '';
    position: absolute;
    top: 0;
    left: -3px;
    width: 5px;
    height: 30px;
    -webkit-animation: scroll2 8s ease-out infinite;
    -moz-animation: scroll2 8s ease-out infinite;
    -ms-animation: scroll2 8s ease-out infinite;
    -o-animation: scroll2 8s ease-out infinite;
    animation: scroll2 8s ease-out infinite;
}

.line-item.two:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: -3px;
    width: 5px;
    height: 30px;
    -webkit-animation: scroll1 6s ease-out infinite;
    -mox-animation: scroll1 6s ease-out infinite;
    -ms-animation: scroll1 6s ease-out infinite;
    -o-animation: scroll1 6s ease-out infinite;
    animation: scroll1 6s ease-out infinite;
}

.line-item.three:before {
    content: '';
    position: absolute;
    top: 0;
    right: -3px;
    width: 5px;
    height: 30px;
    -webkit-animation: scroll3 4s ease-out infinite;
    -moz-animation: scroll3 4s ease-out infinite;
    -ms-animation: scroll3 4s ease-out infinite;
    -o-animation: scroll3 4s ease-out infinite;
    animation: scroll3 4s ease-out infinite;
}

.line-item.four:before {
    content: '';
    position: absolute;
    top: 0;
    right: -3px;
    width: 5px;
    height: 30px;
    -webkit-animation: scroll4 5s ease-out infinite;
    -moz-animation: scroll4 5s ease-out infinite;
    -ms-animation: scroll4 5s ease-out infinite;
    -o-animation: scroll4 5s ease-out infinite;
    animation: scroll4 5s ease-out infinite;
}

.line-item.five:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: -3px;
    width: 5px;
    height: 30px;
    -webkit-animation: scroll5 4s ease-out infinite;
    -moz-animation: scroll5 4s ease-out infinite;
    -ms-animation: scroll5 4s ease-out infinite;
    -o-animation: scroll5 4s ease-out infinite;
    animation: scroll5 4s ease-out infinite;
}

.line-item.one:before {
    background-color: #707070;
}

.line-item.two:before {
    background-color: #F15638;
}

.line-item.three:before {
    background-color: #707070;
}

.line-item.four:before {
    background-color: #F15638;
}

.line-item.five:before {
    background-color: #707070;
}


/******************************************/

.home-services .line-item.one:before,
.home-services .line-item.three:before,
.home-services .line-item.five:before,
.h-about .line-item.one:before,
.h-about .line-item.three:before,
.h-about .line-item.five:before {
    background-color: #062E52;
}

@-webkit-keyframes scroll2 {
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        top: 0
    }
    50% {
        top: 50%
    }
    100% {
        top: 100%;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
}

@keyframes scroll2 {
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        top: 0
    }
    50% {
        top: 50%
    }
    100% {
        top: 100%;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
}

@-webkit-keyframes scroll1 {
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        bottom: 0
    }
    50% {
        bottom: 50%
    }
    100% {
        bottom: 100%;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
}

@keyframes scroll1 {
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        bottom: 0
    }
    50% {
        bottom: 50%
    }
    100% {
        bottom: 100%;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
}

@-webkit-keyframes scroll3 {
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        top: 0
    }
    50% {
        top: 50%
    }
    100% {
        top: 100%;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
}

@keyframes scroll3 {
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        top: 0
    }
    50% {
        top: 50%
    }
    100% {
        top: 100%;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
}

@-webkit-keyframes scroll4 {
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        bottom: 0
    }
    50% {
        bottom: 50%
    }
    100% {
        bottom: 100%;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
}

@keyframes scroll4 {
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        top: 0
    }
    50% {
        top: 50%
    }
    100% {
        top: 100%;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
}

@-webkit-keyframes scroll5 {
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        top: 0
    }
    50% {
        top: 50%
    }
    100% {
        top: 100%;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
}

@keyframes scroll5 {
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        top: 0
    }
    50% {
        top: 50%
    }
    100% {
        top: 100%;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
}


/* End Single-serv */


/* Start Projects-page */

.body-inner .pro-block {
    height: 359px;
    margin: 15px 0;
}

.body-inner .comp-block {
    margin: 15px 0;
}


/* End Projects-page */


/* Start Jobs-page */

.form-group {
    margin: 0 0 30px;
}

.form-group .form-control {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 0.5px solid #a7a7a7;
    color: #fff;
    font-size: 15px;
    border-radius: 2px;
    transition: all .5s;
    padding: 0 20px;
    height: 50px;
    box-shadow: none !important;
    position: relative;
}

.form-group label {
    color: #a7a7a7;
    font-weight: bold;
    margin: 0 0 9px;
}

.form-group .form-control:focus {
    border-color: var(--main-color);
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.file-upload-group.form-control .file-uploadH {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
    display: block !IMPORTANT;
}

.form-group .file-upload-group.form-control {
    line-height: 48px;
}

.accordion-item {
    border: none;
    margin: 15px 0;
    border-radius: 0 !important;
    background: transparent;
}

.accordion-item .accordion-header button {
    background: var(--btn-grid);
    color: #fff;
}

.accordion-item .accordion-header button:not(.collapsed) {
    background: var(--main-color);
    color: #fff;
}


/* End Jobs-page */


/* Start Archive-page */

.blog-block {
    margin: 15px 0;
    border-radius: 8px;
    overflow: hidden;
}

.blog-block .img-block {
    height: 235px;
    overflow: hidden;
}

.blog-block .img-block .img {
    display: block;
    width: 100%;
    height: 100%;
}

.blog-block .img-block .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.blog-block .details {
    padding: 20px 0 0;
}

.blog-block .details .name {
    display: block;
    font-size: 18px;
    margin: 0 0 15px;
}

.blog-block .details p {
    font-size: 15px;
    line-height: 1.8;
    margin: 15px 0;
    max-height: 52px;
    overflow: hidden;
}

.blog-block .details .date {
    display: block;
    font-size: 12px;
    color: var(--main-color);
}

.blog-block .details .readMore {
    display: block;
    margin: 30px 0 0;
    font-size: 14px;
}

.inner-archive .img {
    margin: 30px 0;
}

.inner-archive p {
    max-width: 800px;
    margin: 30px 0;
    line-height: 2;
    color: #a7a7a7;
}

.inner-archive h3 {
    font-size: 25px;
    margin: 30px 0;
    color: var(--main-color);
}

.form-group textarea.form-control {
    padding: 20px;
    height: 150px;
}

.body-inner .title {
    margin: 0 0 32px;
}

.title p {
    margin: 20px 0 0;
    font-size: 16px;
    max-width: 500px;
    line-height: 2;
}

.banner-h .container-fluid {
    position: relative;
    z-index: 2;
}

.fp-viewing-2Page header.sticky .header-top, .fp-viewing-3Page header.sticky .header-top, .fp-viewing-4Page header.sticky .header-top, .fp-viewing-5Page header.sticky .header-top, .fp-viewing-6Page header.sticky .header-top {
    display: none;
}

footer .title.hovered {
    margin: 0 0 2.214677vh;
}

.img-bottom {
    position: absolute;
    bottom: 0;
    width: 120px;
    height: 70px;
    margin: 5vh 1vw;
    right:auto;
    left: 30px;
}

.goSec {
    position: absolute;
    right: 0;
    bottom: 40px;
    z-index: 3;
    letter-spacing: 0.58px;
    color: #FFF;
    font-size: 18px;
    transform: rotate(90deg);
    margin-right: -6px;
}

.goSec i {
    transform: rotate(-90deg);
    color: var(--main-color);
    margin-inline-start: 6px;
    animation: upDown 5s infinite linear;
}

@keyframes upDown  {
    0%, 100% {
        transform: translateX(-5px) rotate(-90deg)
    }
    50% {
        transform: translateX(5px) rotate(-90deg)
    }
}

.btn.btn-big::after {
    transform: none !important;
    opacity: .2 !important;
}

.btn.btn-big::before {
    opacity: 1;
    width: 30px;
    height: 22px;
    border: none;
    transform: none;
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    background: transparent linear-gradient(107deg, #89D1BD 0%, #f37022 100%);
    opacity: .2;
    margin: -20px auto;
    right: 0;
    left: 0;
}

.btn.btn-big::before {
    opacity: .2 !important;
}

.btn.btn-big {
    /*margin-top: ;*/
}

footer .footer-top {
    height: calc(98vh - 240px);
}

.ryad-logo .lolo-co {
    padding: 0 !important;
}

.ryad-logo svg {
    margin-top: -29px;
}

.goTop {
    width: 38px;
    height: 38px;
    background: transparent linear-gradient(180deg, #89D1BD 0%, #f37022 100%) 0% 0% no-repeat padding-box;
    display: flex;
    justify-content: center;
    padding: 10px;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;
    margin: 27px;
}

.se-head {
    display: flex;
    margin: 0 0 20px;
}

.se-head .icon {
    width: 35px;
    margin-inline-end: 10px;
}

.se-head .icon img {
    filter: brightness(0) invert(1);
}

.text-single .btn {
    margin: 30px 0;
}

.modal .modal-dialog .modal-content {
    background: var(--bg-grid);
    padding: 20px;
}

.list-inner {margin: 30px 0;padding: 30px;background: #261a4a;max-width: 500px;border-radius: 8px;}

.list-inner ul li {
    list-style: auto;
    display: list-item;
    margin: 10px 0;
}

.list-inner ul {padding-inline-start: 20px;}

.list-inner ul li a {
    font-size: 20px;
}

.inner-archive .shareNow h3 {
    margin: 30px 0 10px;
}

.inner-archive .shareNow {
    margin: 30px 0 40px;
}

.inner-archive .shareNow .social-in {
    display: flex;
    flex-wrap: wrap;
}

.inner-archive .shareNow .social-in a i {
    display: block;
    margin: 0 0 10px;
    padding: 10px 25px;
    margin-inline-end: 10px;
    background: var(--main-color);
    border-radius: 2px;
}

.inner-archive .shareNow .social-in a i.fab.fa-facebook-f {
    background: #1877F2;
}

.inner-archive .shareNow .social-in a i.fab.fa-twitter {
    background: #1DA1F2;
}

.inner-archive .shareNow .social-in a i.fab.fa-linkedin-in {
    background: #0A66C2;
}

.inner-archive .shareNow .social-in a i.fab.fa-whatsapp {
    background: #25D366;
}

.inner-archive .shareNow .social-in a:hover {
    opacity: .9;
    color: #fff;
}

.nextBlog .nav-item-prev {
    display: table;
}

.nextBlog .nav-item-prev .ct-image-container {
    width: 70px;
    height: 70px;
    position: relative;
    display: table-cell;
}

.nextBlog .nav-item-prev .ct-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: revert;
}

.nextBlog .nav-item-prev .ct-image-container::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--sec-color);
    transition: all .5s;
    opacity: 0;
}

.nextBlog .nav-item-prev:hover .ct-image-container::after {
    opacity: .5;
}

.nextBlog .nav-item-prev .ct-image-container::before {
    content: "\f060";
    font-family: 'Font Awesome 6 Pro';
    font-size: 24px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 24px;
    margin: auto;
    z-index: 3;
    transform: scale(0);
    transition: all .5s;
    line-height: 24px;
    color: #fff;
}

.nextBlog .nav-item-prev:hover .ct-image-container::before {
    transform: none;
}

.nextBlog .nav-item-prev .item-content {
    display: table-cell;
    vertical-align: middle;
    padding-inline-start: 18px;
}

.nextBlog .nav-item-prev .item-content .item-label {
    font-size: 15px;
    display: block;
    color: #fff;
}

.nextBlog .nav-item-prev .item-content .item-title {
    font-size: 20px;
    margin: 10px 0 0;
    display: block;
    color: var(--main-color);
}

.text-foot h1 {
    font-size: 67px;
    line-height: 80px;
    font-weight: 500;
    margin: 0 0 30px;
}

.fa, .far, .fas {
    font-family: 'Font Awesome 5 Pro' !important;
}

.blog-block .details .readMore i {
    margin-inline-start: 4px;
}

form {
    direction: ltr;
}

.form-group .file-upload-group.form-control span {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 0 40px;
}

.accordion-button::after {
    margin: 0;
    margin-inline-start: auto;
}

div#searchModal .modal-content {
    background: transparent;
}

.breadcrumb .overlay-img.parallax-image img {
    max-width: 50%;
    /* object-fit: contain; */
    object-position: right center;
}

.breadcrumb .overlay-img {
    text-align: right;
}

.req-page .img-about {
    margin: 0;
    margin-inline-start: auto;
}

.text-bread {
    display: flex;
    justify-content: space-between;
}

.text-bread .img-bottom {
    position: relative;
    margin: 0;
}

.singe-Serv-2 .slider.slider-for {
    width: 100%;
}

.singe-Serv .slick-prev.slick-arrow, .singe-Serv .slick-next.slick-arrow {
    width: 40px;
    height: 40px;
    padding: 0;
    top: 0;
    bottom: 0;
    margin: auto 15px;
    background: transparent;
    opacity: 1;
    color: #fff;
    transition: all .5s;
}

.singe-Serv .slick-prev.slick-arrow {
    right: 0;
    left: auto;
}

.singe-Serv .slick-prev:before, .singe-Serv .slick-next:before {
    font-size: 28px;
    color: inherit;
    transition: all .5s;
}

/* End Archive-page */
/* ================================
   INTRO CONTAINER
================================= */
#intro-loader {
    position: fixed;
    inset: 0;
    background: #0d0d15;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999999;
    overflow: hidden;
}

/* SMOKE LIGHT */
.intro-smoke {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
    filter: blur(80px);
    opacity: .25;
    animation: smokeMove 6s ease-in-out infinite;
}
@keyframes smokeMove {
    0% { transform: scale(1) translate(0,0); }
    50% { transform: scale(1.15) translate(50px,-40px); }
    100% { transform: scale(1) translate(0,0); }
}

/* LOGO IMAGE */
.intro-logo-img {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: logoPop 1.4s ease forwards;
}
.intro-logo-img img {
    width: 380px;
    opacity: 0;
    transform: scale(.6);
    animation: imgFade 1.4s ease forwards;
}

@keyframes imgFade {
    0%   { opacity: 0; transform: scale(.6); }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

/* EXIT FADE */
#intro-loader.fade-out {
    animation: loaderFadeOut 1s ease forwards;
}
@keyframes loaderFadeOut {
    from { opacity: 1; }
    to { opacity: 0; visibility: hidden; }
}

/* ===========================
   Floating Buttons (Professional)
   =========================== */

.floating-buttons {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 999999;
}

.float-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    text-decoration: none;
    transition: 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* واتساب (زيتي) */
.fb-whatsapp {
    background: #0b3d2e;
}

.fb-whatsapp:hover {
    background: #09634b;
    transform: translateY(-4px);
}

/* اتصال (برتقالي) */
.fb-call {
    background: #f28f1a;
}

.fb-call:hover {
    background: #d67505;
    transform: translateY(-4px);
}

/* مؤثر النبض */
.float-btn::after {
    content: "";
    position: absolute;
    width: 110%;
    height: 110%;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    top: 0;
    left: 0;
    transform: scale(0);
    transition: 0.4s ease;
}

.float-btn:hover::after {
    transform: scale(1);
}

/* شاشات الموبايل */
@media (max-width: 600px) {
    .float-btn {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }
    .floating-buttons {
        bottom: 15px;
        left: 15px;
        gap: 10px;
    }
}
.head-inner .logo-h .logo {
    display: inline-block;   
    transform-origin: center center;
}/* الحركة الاحترافية – تعمل مرة واحدة فقط عند التحميل */
@keyframes logoElegant {

  /* بداية الظهور */
  0% {
    opacity: 0;
    transform: translateY(-15px) scale(0.85) rotate(-4deg);
  }

  /* دخول ناعم */
  25% {
    opacity: 1;
    transform: translateY(0px) scale(1.05) rotate(2deg);
  }

  /* ارتداد خفيف — فخم */
  45% {
    transform: translateY(3px) scale(1) rotate(0deg);
  }

  /* ثبات — يعطي إحساس قوة البراند */
  70% {
    transform: translateY(0px) scale(1);
  }

  /* الوضع النهائي (بدون تكرار) */
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}

/* تطبيق الحركة */
.logo-animation {
  animation: logoElegant 1.6s ease-out forwards;
  animation-iteration-count: 1; /* مرة واحدة فقط */
}

/* Vision + Mission Section */
.vision-mission-sec {
    padding: 80px 0;
    background: var(--back-ground);
}

.vm-box {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    padding: 50px;
    text-align: center;
    box-shadow: 0 10px 35px rgba(0,0,0,0.25);
    backdrop-filter: blur(6px);
    transition: 0.3s;
}

.vm-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.35);
}

.vm-inner {
    margin-bottom: 20px;
}

.vm-title {
    color: var(--main-color);
    font-size: 26px;
    margin-bottom: 15px;
}

.vm-text {
    color: var(--text-light);
    font-size: 15px;
    line-height: 26px;
}

.vm-img img {
    width: 80px;
    margin-top: 15px;
    opacity: 0.9;
    transition: 0.3s;
}

.vm-img img:hover {
    opacity: 1;
    transform: scale(1.05);
}
/* Goals Section */
.goals-sec {
    padding: 90px 0;
    background: var(--bg-grid);
}

.goals-sec .title h3 {
    color: var(--sec-color);
    font-size: 32px;
    margin-bottom: 50px;
}

.goal-box {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    color: var(--text-light);
    transition: 0.3s;
    box-shadow: 0 5px 25px rgba(0,0,0,0.25);
    backdrop-filter: blur(8px);
}

.goal-box:hover {
    transform: translateY(-12px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.35);
    background: rgba(255,255,255,0.08);
}

.goal-box h4 {
    color: var(--main-color);
    margin-bottom: 12px;
    font-size: 20px;
}

.goal-box p {
    color: var(--text-light);
    font-size: 15px;
    line-height: 25px;
}

.goals-img img {
    margin-top: 40px;
    max-width: 260px;
    opacity: 0.9;
}



	/* -----------------------------
   SECTION WRAPPER
------------------------------ */
.services-h {
    position: relative;
    padding: 120px 0 140px;
    overflow: visible !important;
    z-index: 5;
}

/* -----------------------------
   KO BACKGROUND
------------------------------ */
.ko-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ko-letter {
    position: absolute;
    font-weight: 900;
    font-family: Arial, sans-serif;
    color: rgba(255,255,255,0.04);
    animation: floatKO 7s ease-in-out infinite;
}

.ko-k {
    font-size: 550px;
    left: -9%;
    top: -2%;
}

.ko-o {
    font-size: 430px;
    right: -5%;
    bottom: 3%;
    color: rgba(255,255,255,0.07);
}

@keyframes floatKO {
    0% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
    100% { transform: translateY(0); }
}

/* -----------------------------
   SLIDER ITEMS
------------------------------ */
.serv-block {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    overflow: hidden;
    transition: 0.35s ease;
    position: relative;
}

.serv-block:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.22);
}

/* Image */
.serv-block .img img {
    width: 100%;   
    object-fit: cover;
}

/* -----------------------------
   DETAILS (NO ABSOLUTE)
------------------------------ */
.details {
    background: radial-gradient(
        circle at 20% 20%,
        rgba(41,214,169,0.3) 0%,
        transparent 40%
    ),
    radial-gradient(
        circle at 80% 80%,
        rgba(243,112,34,0.25) 0%,
        transparent 45%
    ),
    #1b1b2b;
    text-align: center;
    padding: 22px 20px;
    color: #fff;
}

.details h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
}

.showMore {
    font-size: 15px;
    cursor: pointer;
    font-weight: 500;
    opacity: 0.9;
}

/* -----------------------------
   POPUP
------------------------------ */
.hover-popup {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(25px);
    width: 85%;
    background: #1c1c29;
    padding: 18px 20px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease;
    z-index: 10;
}

.serv-block:hover .hover-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.hover-popup h4 {
    color: #fff;
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 600;
}

.hover-popup ul {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.hover-popup ul li {
    color: #ddd;
    font-size: 14px;
    margin-bottom: 6px;
    padding-left: 14px;
    position: relative;
}

.hover-popup ul li::before {
    content: "•";
    color: #ff7b22;
    position: absolute;
    left: 0;
}

.popup-btn {
    display: inline-block;
    padding: 7px 14px;
    background: #ff7b22;
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}
.services-h {
    position: relative;
    overflow: hidden !important;
    padding-bottom: 140px !important;
}

.services-slider .owl-stage-outer {
    padding-bottom: 120px !important;
}

.owl-stage {
    height: auto !important;
}

/* =====================================================
   GLOBAL SECTION BACKGROUND (REUSABLE)
===================================================== */

/* الحاوية الأساسية للخلفية */
.section-bg{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(41,214,169,0.22) 0%,
            transparent 42%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(243,112,34,0.22) 0%,
            transparent 45%
        ),
        #1b1b2b;
}

/* =====================================================
   KO BACKGROUND LETTERS
===================================================== */
.ko-bg{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.ko-letter{
    position: absolute;
    font-weight: 900;
    font-family: Arial, sans-serif;
    line-height: 1;
    user-select: none;
    color: rgba(255,255,255,0.04);
    animation: koFloat 8s ease-in-out infinite;
}

/* حرف K */
.ko-k{
    font-size: 520px;
    left: -10%;
    top: -8%;
}

/* حرف O */
.ko-o{
    font-size: 420px;
    right: -8%;
    bottom: -5%;
    color: rgba(255,255,255,0.07);
    animation-delay: 2s;
}

/* الحركة */
@keyframes koFloat{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-20px);
    }
    100%{
        transform: translateY(0);
    }
}

/* =====================================================
   SECTION CONTENT ABOVE BACKGROUND
===================================================== */

/* أي سيكشن فيه section-bg */
.banner-h,
.about-h,
.services-h,
.projects-h,
.partners-h{
    position: relative;
    overflow: hidden;
}

/* المحتوى دايمًا فوق الخلفية */
.banner-h .container,
.banner-h .container-fluid,
.about-h .container,
.services-h .container,
.projects-h .container,
.partners-h .container{
    position: relative;
    z-index: 3;
}

/* =====================================================
   OPTIONAL: DARK OVERLAY (لو احتجت تهدئة الخلفية)
===================================================== */
.section-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.25);
    z-index:-1;
}



	/* -----------------------------
   SECTION WRAPPER
------------------------------ */
.services-h {
    position: relative;
    padding: 120px 0 140px;
    overflow: visible !important;
    z-index: 5;
}

/* -----------------------------
   KO BACKGROUND
------------------------------ */
.ko-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ko-letter {
    position: absolute;
    font-weight: 900;
    font-family: Arial, sans-serif;
    color: rgba(255,255,255,0.04);
    animation: floatKO 7s ease-in-out infinite;
}

.ko-k {
    font-size: 550px;
    left: -9%;
    top: -2%;
}

.ko-o {
    font-size: 430px;
    right: -5%;
    bottom: 3%;
    color: rgba(255,255,255,0.07);
}

@keyframes floatKO {
    0% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
    100% { transform: translateY(0); }
}

/* -----------------------------
   SLIDER ITEMS
------------------------------ */
.serv-block {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    overflow: hidden;
    transition: 0.35s ease;
    position: relative;
}

.serv-block:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.22);
}

/* Image */
.serv-block .img img {
    width: 100%;   
    object-fit: cover;
}

/* -----------------------------
   DETAILS (NO ABSOLUTE)
------------------------------ */
.details {
    background: radial-gradient(
        circle at 20% 20%,
        rgba(41,214,169,0.3) 0%,
        transparent 40%
    ),
    radial-gradient(
        circle at 80% 80%,
        rgba(243,112,34,0.25) 0%,
        transparent 45%
    ),
    #1b1b2b;
    text-align: center;
    padding: 22px 20px;
    color: #fff;
}

.details h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
}

.showMore {
    font-size: 15px;
    cursor: pointer;
    font-weight: 500;
    opacity: 0.9;
}

/* -----------------------------
   POPUP
------------------------------ */
.hover-popup {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(25px);
    width: 85%;
    background: #1c1c29;
    padding: 18px 20px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease;
    z-index: 10;
}

.serv-block:hover .hover-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.hover-popup h4 {
    color: #fff;
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 600;
}

.hover-popup ul {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.hover-popup ul li {
    color: #ddd;
    font-size: 14px;
    margin-bottom: 6px;
    padding-left: 14px;
    position: relative;
}

.hover-popup ul li::before {
    content: "•";
    color: #ff7b22;
    position: absolute;
    left: 0;
}

.popup-btn {
    display: inline-block;
    padding: 7px 14px;
    background: #ff7b22;
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}
.services-h {
    position: relative;
    overflow: hidden !important;
    padding-bottom: 140px !important;
}

.services-slider .owl-stage-outer {
    padding-bottom: 120px !important;
}

.owl-stage {
    height: auto !important;
}
	/* =====================================================
   SERVICES 3D RING – FULL CSS
===================================================== */

.services-3d-ring{
    position: relative;
    padding: 120px 0;
    overflow: hidden;
   color: #fff;
    font-family: inherit;
}

/* =====================================================
   SECTION BACKGROUND (Brand Identity)
===================================================== */
.section-bg{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    
}

/* =====================================================
   KO BACKGROUND LETTERS
===================================================== */
.ko-bg{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.ko-letter{
    position: absolute;
    font-weight: 900;
    font-family: Arial, sans-serif;
    line-height: 1;
    user-select: none;
    color: rgba(255,255,255,0.04);
    filter: blur(1px);
    animation: koFloat 10s ease-in-out infinite;
}

/* K */
.ko-k{
    font-size: 520px;
    left: -12%;
    top: -10%;
}

/* O */
.ko-o{
    font-size: 420px;
    right: -10%;
    bottom: -8%;
    color: rgba(255,255,255,0.07);
    animation-delay: 3s;
}

@keyframes koFloat{
    0%{ transform: translateY(0); }
    50%{ transform: translateY(-26px); }
    100%{ transform: translateY(0); }
}

/* =====================================================
   LAYER ORDER
===================================================== */
.services-3d-ring .container{
    position: relative;
    z-index: 3;
}

/* =====================================================
   3D RING WRAPPER
===================================================== */
.ring-wrapper{
    position: relative;
    height: 520px;
    perspective: 1800px;
    z-index: 2;
}

.ring{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
}

/* =====================================================
   3D CARD POSITION
===================================================== */
.ring-card{
    position: absolute;
    width: 280px;
    height: 380px;
    left: 50%;
    top: 50%;
    margin-left: -140px;
    margin-top: -190px;
    transform-style: preserve-3d;
}

/* =====================================================
   CARD INNER (FLIP)
===================================================== */
.card-inner{
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1.1s cubic-bezier(.17,.67,.14,.93);
}

.ring-card:hover .card-inner{
    transform: rotateY(180deg);
}

/* =====================================================
   CARD FACES
===================================================== */
.card-face{
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 35px 80px rgba(0,0,0,.55);
}

/* ================= FRONT ================= */
.card-face.front img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.front-content{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 22px;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.88),
        rgba(0,0,0,.25),
        transparent
    );
}

.front-content h3{
    font-size: 1.35rem;
    margin: 0;
    font-weight: 600;
}

/* ================= BACK ================= */
.card-face.back{
    background: linear-gradient(135deg,#0f1626,#07070f);
    transform: rotateY(180deg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-face.back h4{
    font-size: 1.45rem;
    margin-bottom: 15px;
    color: #29d6a9;
}

.card-face.back ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-face.back ul li{
    font-size: .9rem;
    margin-bottom: 8px;
    padding-left: 18px;
    position: relative;
    opacity: .9;
}

.card-face.back ul li::before{
    content: "✦";
    position: absolute;
    left: 0;
    color: #f37022;
}

/* Button */
.card-face.back .btn{
    align-self: center;
    padding: 11px 28px;
    border-radius: 32px;
    background: linear-gradient(135deg,#29d6a9,#1fb596);
    color: #000;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 700;
    transition: .35s ease;
}

.card-face.back .btn:hover{
    background: linear-gradient(135deg,#f37022,#ff9c4a);
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 991px){
    .ring-wrapper{
        height: 460px;
    }
    .ring-card{
        width: 250px;
        height: 340px;
        margin-left: -125px;
        margin-top: -170px;
    }
}

@media (max-width: 600px){
    .ring-wrapper{
        height: 420px;
    }
    .ring-card{
        width: 220px;
        height: 300px;
        margin-left: -110px;
        margin-top: -150px;
    }
}

@media (max-width: 991px) {

    /* تأكيد Stack عمودي */
    .content-section .row {
        flex-direction: column;
        align-items: center;
    }

    /* العمود نفسه */
    .content-section .col-md-5 {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /* البلوك الأساسي */
    .img-about {
        position: relative;
        left: 0;
        right: 0;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        transform: none !important;
    }

    /* العنصر الداخلي (الدائرة) */
    .img-about .img {
        margin: 0 auto;
        display: block;
        max-width: 280px;
    }

    /* إلغاء أي absolute قديم */
    .img-about *,
    .img-about::before,
    .img-about::after {
        transform: none !important;
    }
}