:root{
--primary:#3f588e;
--secondary:#00a6ff;
--dark:#0d1b2a;
--light:#ffffff;
--gray:#f5f7fa;
}

body{
font-family:'Poppins',sans-serif;
overflow-x:hidden;
color:#333;
line-height:1.7;
text-align: justify;
}

a{
text-decoration:none;
transition:.3s;
}

img{
max-width:100%;
}

section{
position:relative;
}

/* ==========================
HEADER
========================== */

.main-header{
/*height:90px;*/
position:relative;
width:100%;
z-index:9999;
padding:0;
background:#fff;
transition:all .4s ease;
box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.main-header.sticky{
position:fixed;
top:0;
left:0;
width:100%;
background:#fff;
box-shadow:0 5px 20px rgba(0,0,0,.12);
animation:slideDown .4s ease;
}

.nav-link{
position:relative;
font-weight:600;
text-transform: uppercase;
padding:12px 18px !important;
color:#222;
transition:all .3s ease;
}

/* Hover */
.nav-link:hover{
color:var(--primary);
}

/* Active Menu */
.nav-link.active{
color:var(--primary);
}

/* Underline Animation */
.nav-link::after{
content:'';
position:absolute;
left:18px;
bottom:5px;
width:0;
height:3px;
background:var(--primary);
border-radius:10px;
transition:.3s;
}

.nav-link:hover::after,
.nav-link.active::after{
width:calc(100% - 36px);
}

@keyframes slideDown{
from{
transform:translateY(-100%);
}
to{
transform:translateY(0);
}
}

.navbar-brand img{
height:auto;
}

/*.main-header.sticky .nav-link{
color:#222;
}*/

/* ==========================
DROPDOWN
========================== */

.dropdown-custom{
position:relative;
}

.submenu{
position:absolute;
top:100%;
left:0;
width:250px;
background:#fff;
padding:10px 0;
list-style:none;
box-shadow:0 10px 25px rgba(0,0,0,.15);
opacity:0;
visibility:hidden;
transition:.3s;
border-radius:8px;
}

.submenu li a{
display:block;
padding:12px 20px;
color:#222;
}

.submenu li a:hover{
background:#f4f4f4;
padding-left:25px;
}

@media(min-width:992px){

.dropdown-custom:hover .submenu{
opacity:1;
visibility:visible;
}

}

/* ==========================
HERO
========================== */

.hero-section{
position:relative;
height:100vh;
min-height:calc(100vh - 90px);
}

.hero-slide{
position:relative;
height:100vh;
}

.hero-bg{
width:100%;
height:100%;
object-fit:cover;
}

.overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
}

.hero-content{
position:absolute;
top:50%;
transform:translateY(-50%);
max-width:700px;
color:#fff;
z-index:5;
}

.hero-content h1{
font-size:60px;
font-weight:800;
margin-bottom:20px;
text-align: start;
}

.hero-content p{
font-size:20px;
margin-bottom:30px;
}

.btn-primary-custom{
background:var(--primary);
color:#fff;
padding:14px 35px;
border-radius:50px;
font-weight:600;
}

.btn-primary-custom:hover{
background:#003f85;
color:#fff;
}

.btn-outline-custom{
border:2px solid #fff;
color:#fff;
padding:14px 35px;
border-radius:50px;
margin-left:10px;
}

.btn-outline-custom:hover{
background:#fff;
color:#000;
}

/* ==========================
FEATURES
========================== */

.features-section{
padding:80px 0;
background:#fff;
}

.feature-box{
padding:35px;
border-radius:20px;
background:#fff;
box-shadow:0 5px 25px rgba(0,0,0,.08);
text-align:center;
transition:.4s;
height:100%;
}

.feature-box:hover{
transform:translateY(-10px);
}

.feature-box .icon{
font-size:45px;
color:var(--primary);
margin-bottom:20px;
}

/* ==========================
ABOUT
========================== */

.about-section{
padding:100px 0;
}

.subtitle{
display:inline-block;
color:var(--primary);
font-weight:700;
letter-spacing:2px;
margin-bottom:15px;
}

.section-heading h2{
font-size:40px;
font-weight:800;
margin-bottom:25px;
text-align: start;
}

.about-image-wrapper{
position:relative;
padding-top:90px;
}

.about-image-wrapper img{
width:100%;
border-radius:20px;
display:block;
}

/*.counter-box{
position:absolute;
bottom:-30px;
left:50%;
transform:translateX(-50%);
background:#fff;
padding:25px;
border-radius:15px;
box-shadow:0 15px 30px rgba(0,0,0,.15);
display:flex;
gap:35px;
}*/

.counter-box{
position:absolute;
bottom:0;
left:0;
width:100%;
background:#3f588e;
padding:25px 20px;
display:flex;
justify-content:space-around;
align-items:center;
border-radius:0 0 20px 20px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
z-index:10;
}

.counter-item{
text-align:center;
color:#fff;
}

.counter-item h3{
font-size:38px;
font-weight:800;
color:#fff;
margin-bottom:5px;
}

.counter-item p{
margin:0;
font-size:15px;
color:rgba(255,255,255,.9);
}

/*.counter-item h3{
font-size:36px;
font-weight:800;
color:var(--primary);
}*/

/* ==========================
RESORTS
========================== */

.resorts-section{
padding:120px 0;
background:#bac3ca;
}

.resort-card{
background:#fff;
border-radius:20px;
overflow:hidden;
transition:.4s;
height:100%;
box-shadow:0 5px 25px rgba(0,0,0,.08);
}

.resort-card:hover{
transform:translateY(-10px);
}

.resort-image{
overflow:hidden;
}

.resort-image img{
transition:.6s;
width:100%;
height: 240px;
object-fit: cover !important;
}

.resort-card:hover img{
transform:scale(1.1);
}

.resort-content{
padding:25px;
}

/* ==========================
WHY US
========================== */

.why-section{
padding:100px 0;
}

.why-list{
list-style:none;
padding:0;
}

.why-list li{
padding:12px 0;
font-size:17px;
}

.why-list i{
color:green;
margin-right:10px;
}

/* ==========================
FOOTER
========================== */

.footer{
background:#bac3ca;
color:#222;
padding-top:70px;
}

.footer h5{
margin-bottom:25px;
font-weight:700;
color:#222;
}

.footer-links{
list-style:none;
padding:0;
}

.footer-links li{
margin-bottom:12px;
}

.footer-links a{
color:#222;
}

.footer-links a:hover{
padding-left:5px;
}

.contact-info{
list-style:none;
padding:0;
}

.contact-info li{
margin-bottom:20px;
}

.contact-info i{
margin-right:10px;
}

.social-icons a{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:50%;
background:#3f588e;
color:#fff;
margin-right:8px;
}

.copyright{
margin-top:50px;
padding:20px 0;
border-top:1px solid rgba(255,255,255,.2);
}

.copyright a{
color: #3f588e;
font-weight: 600;
}

/* ==========================
BACK TO TOP
========================== */

#backToTop{
position:fixed;
right:25px;
bottom:25px;
width:50px;
height:50px;
border:none;
border-radius:50%;
background:#3f588e;
color:#fff;
display:none;
z-index:999;
}

/* ==========================
SWIPER
========================== */

.swiper-button-next,
.swiper-button-prev{
color:#fff;
}

.swiper-pagination-bullet{
background:#fff;
}

.hero-bg{
animation:zoomHero 12s linear infinite;
}

@keyframes zoomHero{
from{
transform:scale(1);
}
to{
transform:scale(1.15);
}
}


/* =====================================
CONTACT PAGE PREMIUM
===================================== */

.page-banner{
position:relative;
height:450px;
display:flex;
align-items:center;
background:url('../images/contactus_banner.jpg') center center/cover no-repeat;
overflow:hidden;
}

.page-banner::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(10,20,50,.85),
rgba(10,20,50,.55)
);
}

.page-banner-content{
position:relative;
z-index:2;
color:#fff;
}

.page-banner h1{
font-size:55px;
font-weight:700;
margin-bottom:15px;
}

.breadcrumb-custom{
font-size:18px;
}

.breadcrumb-custom a{
color:#d4af37;
}


/* =====================================
ABOUT COMPANY
===================================== */

.about-company-section{
padding:100px 0;
}

.section-tag{
display:inline-block;
color:#d4af37;
font-weight:700;
letter-spacing:2px;
margin-bottom:15px;
text-transform:uppercase;
}

.about-content h2{
font-size:52px;
font-weight:800;
margin-bottom:25px;
}

.about-image-box{
position:relative;
}

.about-image-box img{
border-radius:25px;
box-shadow:0 20px 50px rgba(0,0,0,.15);
}

.experience-box{
position:absolute;
bottom:30px;
left:-30px;
background:linear-gradient(135deg,#071739,#0d2d67);
padding:25px 35px;
border-radius:20px;
color:#fff;
display:flex;
align-items:center;
gap:20px;
border:2px solid #d4af37;
box-shadow:0 15px 40px rgba(0,0,0,.2);
}

.experience-box i{
font-size:40px;
color:#d4af37;
}

.experience-box h3{
font-size:40px;
margin:0;
}

.btn-gold{
background:#3f588e;
color:#fff;
padding:14px 35px;
border-radius:50px;
display:inline-block;
margin-top:20px;
}

.btn-gold:hover{
background:#d4af37;
color:#fff;
}

/* =====================================
VISION MISSION
===================================== */

.vision-mission-section{
padding:100px 0;
background:#f8f9fc;
}

.section-title{
margin-bottom:60px;
}

.section-title h2{
font-size:50px;
font-weight:800;
}

.purpose-card{
background:linear-gradient(135deg,#071739,#0d2d67);
padding:50px;
border-radius:25px;
color:#fff;
height:100%;
position:relative;
overflow:hidden;
transition:.5s;
border:2px solid #d4af37;
}

.purpose-card:hover{
transform:translateY(-10px);
}

.purpose-icon{
width:80px;
height:80px;
background:#d4af37;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:25px;
}

.purpose-icon i{
font-size:32px;
color:#071739;
}

/* =====================================
TEAM
===================================== */

.team-section{
padding:100px 0;
}

.team-card{
background: linear-gradient(135deg, #071739, #3f588e);
border: 2px solid #d4af37;
border-radius:25px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.5s;
height:100%;
}

.team-card:hover{
transform:translateY(-15px);
}

.team-card:hover img{
transform:scale(1.08);
}

.team-image{
overflow:hidden;
}

.team-image img{
width:100%;
height:500px; 
/*object-fit:cover;*/
transition:.6s;
}

.team-content{
padding:25px;
text-align:center;
}

.team-content h5{
font-size: 18px;
font-weight:700;
margin-bottom:8px;
color: #fff;
}

.team-content span{
color:#fff;
}

/* =====================================
SERVICES LUXURY SECTION
===================================== */

.service-block{
padding:120px 0;
position:relative;
overflow:hidden;
}

.service-block:not(:last-child){
margin-bottom:50px;
}

.service-odd{
background:#fff;
}

.service-even{
background:#f8f9fc;
}

/* Decorative dots */

.service-block::before{
content:'';
position:absolute;
width:120px;
height:120px;
background-image:radial-gradient(
#d4af37 1px,
transparent 1px
);
background-size:12px 12px;
opacity:.25;
}

.service-odd::before{
right:5%;
top:15%;
}

.service-even::before{
left:5%;
bottom:15%;
}

/* =====================
IMAGE
===================== */

.service-image{
position:relative;
overflow:hidden;
border-radius:25px;
}

.service-image img{
width:100%;
height:450px;
object-fit:cover;
border-radius:25px;
transition:all .8s ease;
}

.service-image:hover img{
transform:scale(1.08);
}

/* Gold Border Layer */

.service-image::after{
content:'';
position:absolute;
top:18px;
left:18px;
width:100%;
height:100%;
border:2px solid #d4af37;
border-radius:25px;
z-index:-1;
transition:.4s;
}

.service-image:hover::after{
top:10px;
left:10px;
}

/* Floating Icon */

.service-badge{
position:absolute;
bottom:25px;
left:25px;
width:90px;
height:90px;
background:#071739;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
border:2px solid #d4af37;
box-shadow:0 15px 35px rgba(0,0,0,.25);
z-index:5;
}

.service-badge i{
font-size:35px;
color:#d4af37;
}

/* =====================
CONTENT
===================== */

.service-content{
padding:20px 40px;
}

.service-number{
display:block;
font-size:100px;
font-weight:800;
line-height:1;
color:rgba(63,88,142,.08);
margin-bottom:-10px;
}

.service-content h2{
font-size:40px;
font-weight:700;
margin-bottom:20px;
color:#3f588e;
}

.service-divider{
width:80px;
height:4px;
background:#d4af37;
margin-bottom:25px;
border-radius:50px;
}

.service-content p{
font-size:17px;
margin-bottom:25px;
}

.service-list{
list-style:none;
padding:0;
margin:0 0 30px;
}

.service-list li{
padding:10px 0;
font-size:17px;
}

.service-list li i{
color:#d4af37;
margin-right:10px;
}

.btn-service{
display:inline-block;
padding:14px 35px;
background:#3f588e;
color:#fff;
border-radius:50px;
font-weight:600;
transition:.4s;
}

.btn-service:hover{
background:#d4af37;
color:#071739;
transform:translateY(-3px);
}

/* =====================
SECTION ANIMATION
===================== */

.service-content{
animation-duration:1s;
}

.service-image{
animation-duration:1s;
}


/* =====================================
NEWS PAGE
===================================== */

.news-section{
padding:100px 0;
background:#f8f9fc;
position:relative;
}

.news-item{
background:#fff;
border-radius:25px;
overflow:hidden;
box-shadow:0 10px 35px rgba(0,0,0,.08);
margin-bottom:40px;
transition:.5s;
}

.news-item:hover{
transform:translateY(-8px);
box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.news-image{
overflow:hidden;
height:100%;
}

.news-image img{
width:100%;
height:320px;
object-fit:cover;
transition:.8s;
}

.news-item:hover .news-image img{
transform:scale(1.08);
}

.news-content{
padding:40px;
}

.news-date{
display:inline-flex;
align-items:center;
gap:10px;
font-size:14px;
font-weight:600;
color:#d4af37;
margin-bottom:15px;
text-transform:uppercase;
}

.news-date i{
font-size:16px;
}

.news-content h3{
font-size:34px;
font-weight:800;
line-height:1.3;
color:#071739;
margin-bottom:20px;
}

.news-divider{
width:80px;
height:4px;
background:#d4af37;
border-radius:30px;
margin-bottom:20px;
}

.news-content p{
font-size:17px;
line-height:1.8;
margin-bottom:0;
color:#555;
}

/* Decorative Dots */

.news-item{
position:relative;
}

.news-item::after{
content:'';
position:absolute;
right:35px;
top:50%;
width:70px;
height:70px;
background-image:radial-gradient(
#d4af37 1.5px,
transparent 1.5px
);
background-size:12px 12px;
opacity:.35;
transform:translateY(-50%);
}

/* Section Title */

.news-title{
margin-bottom:70px;
}

.news-title h2{
font-size:52px;
font-weight:800;
color:#071739;
}

.news-subtitle{
display:inline-block;
color:#d4af37;
font-weight:700;
letter-spacing:2px;
margin-bottom:10px;
text-transform:uppercase;
}

/* =====================================
CONTACT BOXES
===================================== */

.contact-boxes{
padding:100px 0 80px;
background:#f8f9fc;
margin-top:-80px;
position:relative;
z-index:10;
}

.contact-card{
position:relative;
background:linear-gradient(
135deg,
#071739,
#3f588e
);
border:2px solid #d4af37;
border-radius:25px;
padding:60px 30px 40px;
text-align:center;
overflow:visible;
transition:.5s;
height:100%;
box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.contact-card::before{
content:'';
position:absolute;
width:180px;
height:180px;
background:rgba(255,255,255,.05);
border-radius:50%;
top:-70px;
right:-70px;
}

.contact-card:hover{
transform:translateY(-15px);
box-shadow:0 25px 50px rgba(0,0,0,.25);
}

.contact-card:hover .contact-icon{
transform:translateY(-8px) rotate(10deg);
}

.contact-icon{
width:90px;
height:90px;
background:linear-gradient(
135deg,
#f4e2a3,
#d4af37
);
display:flex;
align-items:center;
justify-content:center;
border-radius:20px;
position:absolute;
left:50%;
top:-45px;
transform:translateX(-50%);
transition:.4s;
}

.contact-icon i{
font-size:34px;
color:#0d2d67;
}

.contact-card h4{
color:#d4af37;
margin-top:10px;
margin-bottom:20px;
font-weight:700;
}

.contact-card p{
color:#fff;
margin:0;
}

/* =====================================
CONTACT FORM
===================================== */

.contact-form-section{
padding:100px 0;
background:#fff;
}

.contact-form-box{
background:#fff;
padding:50px;
border-radius:25px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.contact-form-box h2{
font-weight:800;
margin-bottom:15px;
}

.contact-form-box .subtitle{
color:#d4af37;
}

.form-control{
height:58px;
border-radius:12px;
border:1px solid #ddd;
}

textarea.form-control{
height:180px;
}

.form-control:focus{
box-shadow:none;
border-color:#3f588e;
}

.btn-send{
background:#3f588e;
color:#fff;
padding:14px 35px;
border-radius:50px;
font-weight:600;
border:none;
}

.btn-send:hover{
background:#2d4370;
}

/* =====================================
WORKING HOURS
===================================== */

.hours-box{
background:linear-gradient(
135deg,
#071739,
#0d2d67
);
padding:25px;
border-radius:20px;
color:#fff;
margin-top:25px;
border-left:5px solid #d4af37;
}

/* =====================================
MAP
===================================== */

.map-box{
overflow:hidden;
border-radius:25px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.map-box iframe{
width:100%;
height:500px;
border:none;
}

/* ==========================
LANGUAGE SWITCHER
========================== */

.lang-switch-item{
    margin-left:15px;
    display:flex;
    align-items:center;
}

.lang-switch-btn{
    background:linear-gradient(
    135deg,
    #3f588e,
    #5f7cbc
    );
    color:#fff !important;
    padding:10px 22px;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.5px;
    border:2px solid transparent;
    transition:all .35s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:110px;
}

/*.lang-switch-btn:hover{
    background:#fff;
    color:#3f588e !important;
    border-color:#3f588e;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(63,88,142,.25);
}*/






















/* =====================================
RTL SUPPORT
===================================== */

html[dir="rtl"] body{
    direction:rtl;
    text-align:right;
    font-family:'Tajawal', sans-serif;
}

/* Header */

html[dir="rtl"] .navbar-nav{
    margin-right:auto;
    margin-left:0;
}

html[dir="rtl"] .nav-link::after{
    left:auto;
    right:18px;
}

/* Dropdown */

html[dir="rtl"] .submenu{
    left:auto;
    right:0;
    text-align:right;
}

html[dir="rtl"] .submenu li a:hover{
    padding-right:25px;
    padding-left:20px;
}

/* Hero */

html[dir="rtl"] .hero-content{
    text-align:right;
}

/* Buttons */

html[dir="rtl"] .btn-outline-custom{
    margin-left:0;
    margin-right:10px;
}

/* About */

html[dir="rtl"] .about-content,
html[dir="rtl"] .service-content,
html[dir="rtl"] .news-content{
    text-align:right;
}

html[dir="rtl"] .experience-box{
    left:auto;
    right:-30px;
}

/* Lists */

html[dir="rtl"] .why-list i,
html[dir="rtl"] .service-list li i,
html[dir="rtl"] .contact-info i{
    margin-right:0;
    margin-left:10px;
}

/* Service Badge */

html[dir="rtl"] .service-badge{
    left:auto;
    right:25px;
}

/* Service Border */

html[dir="rtl"] .service-image::after{
    left:auto;
    right:18px;
}

html[dir="rtl"] .service-image:hover::after{
    right:10px;
}

/* News */

html[dir="rtl"] .news-item::after{
    right:auto;
    left:35px;
}

html[dir="rtl"] .news-date{
    justify-content:flex-start;
}

/* Contact */

html[dir="rtl"] .contact-icon{
    left:auto;
    right:50%;
    transform:translateX(50%);
}

html[dir="rtl"] .hours-box{
    border-left:none;
    border-right:5px solid #d4af37;
}

/* Footer */

html[dir="rtl"] .footer,
html[dir="rtl"] .copyright{
    text-align:right;
}

html[dir="rtl"] .social-icons a{
    margin-right:0;
    margin-left:8px;
}

html[dir="rtl"] .text-md-end{
    text-align: left !important;
}

html[dir="rtl"] #backToTop{
    left:25px;
}

/* Breadcrumb */

html[dir="rtl"] .breadcrumb-custom{
    direction:rtl;
}

html[dir="rtl"] .lang-switch-item{
    margin-left:0;
    margin-right:15px;
}