@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
:root {
            --color1: #045862;
            --color2: #d3913d;
            --color3:#7d9e57;
                --light-bg:#f5f0e7;
            
     
            --font1:"Space Grotesk", sans-serif;
            --font2:"Space Grotesk", sans-serif;  
            
        }

body{
margin:0;
font-family: var(--font1); 
            color: rgb(38, 44, 44);
            font-size: 16px;
            text-align: left;

}

   @media(max-width:769px)
        {
          body{text-align: center;}
        }
a{text-decoration: none;}
        img { display: block; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font2); 
  font-weight:500;
 
  margin: 0;
}
ul { margin: 0; padding: 0; list-style: none; }
.container { width: 80%; max-width: 100%; }
@media (max-width: 1401px) {
   .container {
        width: 80%;
    }
}
@media (max-width: 1204px) {
   .container {
        width: 95%;
    }
}

figcaption, figure{margin: 0; padding: 0;}

.cr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}




/*=====================================
HEADER
=====================================*/
/* Normal Header */




.main-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;

    padding:8px 0;   /* Reduced from 25px */

    background:transparent;
    transition:all .4s ease;
}

/* Desktop Logo */

.desktop-logo img{
    max-width:170px;   /* Reduced */
    transition:.35s;
}

/* Mobile Logo */

.mobile-logo img{
    max-width:135px;
    transition:.35s;
}

/* On Scroll */

.main-header.header-fixed{

    padding:5px 0;     /* Smaller */

    background:rgba(4,88,98,.95);

    backdrop-filter:blur(12px);

    box-shadow:0 8px 25px rgba(0,0,0,.18);

}

/* Scroll Logo */

.main-header.header-fixed .desktop-logo img{
    max-width:65px;
}

.main-header.header-fixed .mobile-logo img{
    max-width:60px;
}

.header-wrapper{
display:flex;
align-items:center;
justify-content:space-between;
position:relative;
}

/*==============================
DESKTOP MENU
==============================*/
.desktop-menu{width: 33%;}
.left-menu{justify-content: end;}

.desktop-menu ul{
display:flex;
align-items:center;
gap:30px;
margin:0;
padding:0;
list-style:none;
}

.desktop-menu li{
position:relative;
}

.desktop-menu a{
color:#fff;
text-decoration:none;
font-size:14px;
font-weight:500;
letter-spacing:2px;
text-transform:uppercase;
transition:.35s;
display:flex;
align-items:center;
gap:8px;
}

.desktop-menu a:hover{
color:#d3913d;
}

/*==============================
LOGO
==============================*/

.desktop-logo img{
max-width:220px;
display:block;
}

.mobile-logo img{
max-width:180px;
}

/*==============================
DROPDOWN
==============================*/

.desktop-menu .dropdown-menu{

position:absolute;

top:100%;

left:0;

min-width:240px;

padding:12px 0;

border:none;

background:#111;

border-radius:12px;

display:none;

box-shadow:0 15px 35px rgba(0,0,0,.25);

}

.desktop-menu .dropdown:hover>.dropdown-menu{

display:block;

animation:drop .35s;

}

@keyframes drop{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.desktop-menu .dropdown-menu li{

width:100%;

}

.desktop-menu .dropdown-menu a{

display:block;

padding:12px 20px;

font-size:13px;

letter-spacing:1px;

color:#fff;

}

.desktop-menu .dropdown-menu a:hover{

background:#d3913d;

color:#fff;

}

/*==============================
MOBILE TOGGLER
==============================*/

.mobile-toggler{

width:54px;

height:54px;

border:none;

background:#000;

border-radius:50%;

display:none;

justify-content:center;

align-items:center;

flex-direction:column;

gap:5px;

transition:.35s;

box-shadow:0 10px 25px rgba(0,0,0,.25);

}

.mobile-toggler:hover{
    background:#d3913d;
}

.mobile-toggler span{

display:block;

width:22px;

height:2px;

background:#fff;

border-radius:10px;

transition:.3s;

}

/*==============================
OFFCANVAS
==============================*/

.offcanvas{

width:320px;

background:#045862;

color:#fff;

}

.offcanvas-header{

border-bottom:1px solid rgba(255,255,255,.15);

padding:20px;

}

.offcanvas .btn-close{

filter:invert(1);

opacity:1;

}

.mobile-nav{
    list-style:none;
    margin:0;
    padding:0;
}

.mobile-nav>li{
    border-bottom:1px solid rgba(255,255,255,.10);
}

.mobile-nav>li>a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#fff;
    padding:16px 0;
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    text-transform:uppercase;
}

.mobile-nav .dropdown-menu{
    position:static !important;
    transform:none !important;
    border:none;
    box-shadow:none;
    background:rgba(255,255,255,.05);
    margin:0 0 12px;
    padding:0;
    width:100%;
}

.mobile-nav .dropdown-item{
    color:#fff;
    padding:12px 20px;
    font-size:14px;
    background:transparent;
}

.mobile-nav .dropdown-item:hover{
    background:#d3913d;
    color:#fff;
}

.mobile-nav .dropdown-toggle::after{
    margin-left:auto;
}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:991.98px){

.desktop-menu,

.desktop-logo{

display:none!important;

}

.mobile-logo{

display:block;

}

.mobile-toggler{

display:flex;

}

.main-header{

padding:15px 0;

}

.header-wrapper{

justify-content:space-between;

}

}

@media(min-width:992px){

.mobile-logo,

.mobile-toggler{

display:none;

}

}

body.menu-open .mobile-logo,
body.menu-open .mobile-toggler{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.3s ease;
}

.mobile-logo,
.mobile-toggler{
    transition:.3s ease;
}

.offcanvas{
    z-index:99999;
}

.offcanvas-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.btn-close{
    filter:invert(1);
    opacity:1;
}





.logo img{
margin-left: auto; margin-right: auto;
}

.right-area{
display:flex;
align-items:center;
gap:25px;
}

.phone{
color:#fff;
font-size:14px;
font-weight:600;
letter-spacing:1px;
}

.book-btn{
padding:14px 28px;
background:var(--gold);
color:#fff;
font-size:13px;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
transition:.4s;
}

.book-btn:hover{
background:#fff;
color:#000;
}





.banner-slider,
.banner-slider .carousel-inner,
.banner-slider .carousel-item{
height:100vh;
}

.banner-slide{
height:100vh;
position:relative;
overflow:hidden;
}

/* IMAGE */
.banner-img{
width:100%;
height:100%;
object-fit:cover;
position:absolute;
inset:0;
transform:scale(1);
transition:transform 7s linear;
}

.carousel-item.active .banner-img{
transform:scale(1.1);
}

/* OVERLAY */
.overlay{
position:absolute;
inset:0;
background:rgba(48,30,11,.55);
z-index:1;
animation:overlayFade 1s ease;
}

@keyframes overlayFade{
from{
opacity:0;
}
to{
opacity:1;
}
}

/* CONTENT WRAPPER */
.banner-content{
position:absolute;
z-index:2;
max-width:1000px;
display:flex;
flex-direction:column;
justify-content:center;
/* height:100vh; */
padding:0 20px;
top: auto;
bottom: 20px;
}

/* SUBTITLE */
.banner-subtitle{
display:block;
color:#ce9f62;
letter-spacing:5px;
font-size:14px;
text-transform:uppercase;
margin-bottom:20px;
}

/* HEADING */
.banner-content .banner-title{
font-size:80px;
line-height:.9;
font-weight:700;
color:#fff;
margin-bottom:25px;
}

/* TEXT */
.banner-content p{
color:#fff;
font-size:18px;
line-height:1.8;
max-width:650px;
margin-bottom:35px;
}

/* BUTTON */
.banner-btn{
display:inline-flex;
width:auto;
align-self:flex-start;
padding:18px 42px;
background:var(--color2);
color:#fff;
font-size:14px;
letter-spacing:2px;
text-transform:uppercase;
transition:.4s;
}

.banner-btn:hover{
background:#fff;
color:#000;
}

/* CONTROLS */
.carousel-control-prev,
.carousel-control-next{
width:70px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
width:55px;
height:55px;
border:1px solid rgba(255,255,255,.4);
border-radius:50%;
}


/* =========================
BANNER CONTENT ANIMATION
========================= */

.banner-content .banner-subtitle,
.banner-content .banner-title,
.banner-content p,
.banner-content .banner-btn{
opacity:0;
transform:translateY(50px);
}

/* Active Slide */
.carousel-item.active .banner-subtitle{
animation:fadeUp .8s ease forwards;
}

.carousel-item.active .banner-title{
animation:fadeUp .8s ease forwards;
animation-delay:.2s;
}

.carousel-item.active p{
animation:fadeUp .8s ease forwards;
animation-delay:.4s;
}

.carousel-item.active .banner-btn{
animation:fadeUp .8s ease forwards;
animation-delay:.6s;
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(50px);
}
to{
opacity:1;
transform:translateY(0);
}
}



/* =========================
RESPONSIVE BREAKPOINTS
========================= */

/* Large tablets */
@media (max-width: 1200px){
.banner-content .banner-title{
font-size:60px;
}
}
@media (max-width:991.98px){

.banner-slide{
    padding-top:80px;
}

.banner-content{
    height:calc(100vh - 80px);
}

}

/* Tablets */
@media (max-width: 991px){
.banner-content{
max-width:600px;
}

.banner-content .banner-title{
font-size:60px;
}

.banner-content p{
font-size:16px;
}

.banner-subtitle{
font-size:12px;
letter-spacing:3px;
}

.carousel-control-prev,
.carousel-control-next{
width:55px;
}
}

/* Mobile */
@media (max-width: 767px){
.banner-content{
text-align:center;
justify-content:center;
max-width: 100%;
}

.banner-content .banner-title{
font-size:42px;
line-height:1.1;
}

.banner-content p{
font-size:14px;
max-width:100%;
}

.banner-btn{
padding:14px 28px;
font-size:12px;
margin-left: auto;
margin-right: auto;
}

.carousel-control-prev,
.carousel-control-next{
width:45px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
width:40px;
height:40px;
}
}

/* Small mobile */
@media (max-width: 480px){
.banner-content .banner-title{
font-size:34px;
}

.banner-subtitle{
font-size:11px;
}

.banner-content p{
font-size:13px;
}
}

.banner-slider{
    position:relative;
    overflow:visible;
}

.banner-shape{
    position:absolute;
    right:40px;
    bottom:-140px;
    z-index:10;

    

    overflow:hidden;
}

.testimonial-image-section{
    padding:100px 0;
    overflow:hidden;
}

.rotating-image{
    max-width:300px;
   width:100%;
    height:100%;
    object-fit:contain;

    will-change:transform;
    transition:transform .1s linear;
    transform-origin:center center;
}

@media(max-width:991px){

    .banner-shape{
        right:20px;
        bottom:-90px;
    }

    .rotating-image{
        width:280px;
    }
}

@media(max-width:767px){

    .banner-shape{
        right:10px;
        bottom:-60px;
    }

    .rotating-image{
        width:180px;
    }
}

.catering-team-section{
    position:relative;
    background:#f8f6ef;
    padding:120px 0;
    overflow:hidden;
}

.title-shape{
    position:absolute;
    top:15%;
    left:15%;
    width:180px;
    z-index:1;
    pointer-events:none;
    will-change:transform;
}

/* Heading */

.section-tag{
    font-size:13px;
    font-weight:600;
    letter-spacing:3px;
    color:var(--color3);
    margin-bottom:20px;
}

.section-heading h1{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(42px,6vw,80px);
    line-height:.9;
    font-weight:400;
    color:var(--color1);
    margin:0;
}

/* Grid */

.catering-grid{
    display:grid;
    grid-template-columns:.9fr 1.3fr 1fr;
    gap:50px;
    margin-top:70px;
    align-items:start;
}

/* Left */

.counter-column{
    min-width:0;
}

.small-img{
    width:100%;
    max-width:260px;
    border-radius:20px;
    display:block;
}

.counter-number{
    font-size:clamp(60px,8vw,80px);
    line-height:.8;
    color:var(--color1);
    margin-top:25px;
}

.counter-number sup{
    font-size:.35em;
    top:-.6em;
    position:relative;
}

.counter-text{
    font-size:20px;
    color:var(--color3);
}

/* Center */

.content-column h3{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(28px,3vw,36px);
    line-height:1.2;
    color:var(--color1);
    margin-bottom:25px;
}

.content-column p{
   color:#5f6d67;
    font-size:17px;
    line-height:1.8;
    margin-bottom:35px;
}

/* Button */

.about-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 30px;
    background:var(--color2);
    color:#fff;
    border-radius:50px;
    text-decoration:none;
    transition:.4s;
}

.about-btn:hover{
    background:var(--color1);
    color:#fff;
}

/* Right Image */

.image-column{
    min-width:0;
}

.large-img{
    width:100%;
    max-width:420px;
    height:560px;
    object-fit:cover;
    border-radius:20px;
    display:block;
}

/* Floating Shapes */

.floating-shape{
    position:absolute;
    pointer-events:none;
    z-index:1;
}

.leaf-shape{
    top:70px;
    left:15%;
    width:120px;
    animation:floatShape 6s ease-in-out infinite;
}

.tomato-shape{
    top:170px;
    left:10%;
    width:45px;
    animation:floatShape 5s ease-in-out infinite;
}

@keyframes floatShape{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-20px);
    }
}

@media(max-width:991px){

.catering-grid{
    grid-template-columns:1fr;
    gap:50px;
}

.counter-column,
.content-column,
.image-column{
    max-width:700px;
    width:100%;
    margin:auto;
}

.small-img,
.large-img{
    max-width:100%;
}

.large-img{
    height:auto;
}

.counter-column{
    text-align:center;
}

}

@media(max-width:767px){

.catering-team-section{
    padding:80px 0;
}

.section-heading h1{
    font-size:42px;
}

.content-column h3{
    font-size:28px;
}

.content-column p{
    font-size:15px;
}

.counter-number{
    font-size:70px;
}

.counter-text{
    font-size:16px;
}

.about-btn{
    padding:14px 24px;
    font-size:13px;
}

.leaf-shape{
    width:80px;
}

.tomato-shape{
    width:30px;
}

}




/* =========================
   EVENT PANELS
========================= */

.event-wrapper{
    position: relative;
    z-index: 1;
}


.event-panel{
    position: sticky;
    top: 0;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: clip; /* prevents x-scroll */
    width: 100%;
    max-width: 100%;
    isolation: isolate;
}
.event-card{
    opacity:0;
    transform:translateY(80px);
    transition:1s ease;
}

.event-panel.active .event-card{
    opacity:1;
    transform:translateY(0);
}
.panel-bg-img{
    transform:scale(1.15);
    transition:transform 1.5s ease;
}

.event-panel.active .panel-bg-img{
    transform:scale(1);
}

/* =========================
   BACKGROUND IMAGE
========================= */

.panel-bg-img{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;

    z-index: 0;
}

/* =========================
   OVERLAY
========================= */

.event-overlay{
    position: absolute;
    inset: 0;
/* 
    background: rgba(0,0,0,.55); */

    z-index: 1;
}

/* =========================
   HUGE BACKGROUND TEXT
========================= */

.bg-title{
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(80px,14vw,280px);
    font-weight: 700;

    color: rgba(255,255,255,.08);

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    width: 100%;
    max-width: 100%;

    overflow: hidden;

    z-index: 2;
    pointer-events: none;
}

/* =========================
   CONTAINER FIX
========================= */

.event-panel .container{
    position: relative;
    z-index: 5;
}

.event-panel .row{
    margin-left: 0;
    margin-right: 0;
}

.event-panel [class*="col-"]{
    padding-left: 0;
    padding-right: 0;
}

/* =========================
   CARD
========================= */

.event-card{
    position: relative;
    z-index: 5;

    width: 100%;
    max-width: 420px;

    margin: auto;

    padding: 40px;

    text-align: center;

    border-radius: 24px;

    background: rgba(4,88,98,.92);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition: .5s;
}

.event-card:hover{
    transform: translateY(-10px);
}

/* =========================
   IMAGE CIRCLE
========================= */

.event-img-wrap{
    width: 220px;
    height: 220px;

    margin: 0 auto 35px;

    border-radius: 50%;
    overflow: hidden;
}

.event-img{
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;

    transition: 1s;
}

.event-card:hover .event-img{
    transform: scale(1.1);
}

/* =========================
   TITLE
========================= */

.event-card h3{
    font-family: 'Cormorant Garamond', serif;

    font-size: 60px;
    font-weight: 400;

    color: #fff;

    margin-bottom: 20px;
}

/* =========================
   TEXT
========================= */

.event-card p{
    color: #fff;

    line-height: 1.8;
    font-size: 16px;

    margin: 0;
}

/* =========================
   TABLET
========================= */

@media (max-width:991.98px){

    .event-card{
        max-width: 380px;
    }

    .event-img-wrap{
        width: 180px;
        height: 180px;
    }

    .event-card h3{
        font-size: 44px;
    }

    .bg-title{
        font-size: clamp(60px,12vw,140px);
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width:767.98px){

    .event-panel{
        position: relative;
        height: 90vh;
    }

    .bg-title{
        font-size: clamp(50px,14vw,80px);
    }

    .event-card{
        max-width: 100%;
        padding: 25px;
    }

    .event-img-wrap{
        width: 140px;
        height: 140px;
    }

    .event-card h3{
        font-size: 34px;
    }

    .event-card p{
        font-size: 14px;
        line-height: 1.7;
    }
}

/* SECTION */

.why-choose{
    background:var(--light-bg);
    padding:120px 0;
    position:relative;
    overflow:hidden;
}

/* TAG */

.industries-subtitle{
    color:var(--color2);
    letter-spacing:2px;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    margin-bottom:20px;
}

/* TITLE */

.main-title{
    font-family:'Cormorant Garamond',serif;
    font-size:85px;
    line-height:.9;
    color:#3a2a17;
    margin-bottom:50px;
}

/* FEATURES */

.feature-box{
    margin-bottom:30px;
    transition:.4s;
}

.feature-box:hover{
    transform:translateY(-8px);
}

.feature-icon{
    width:70px;
    height:70px;
    border:2px solid var(--color2);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:15px;
}

.feature-icon i{
    font-size:28px;
    color:var(--color2);
}

.feature-title{
    font-family:'Cormorant Garamond',serif;
    font-size:42px;
    color:#4b3118;
    line-height:1;
    margin-bottom:10px;
}

.feature-text{
    color:#666;
    font-size:18px;
    line-height:1.7;
}

.custom-divider{
    width:100%;
    height:1px;
    background:#d8d0c2;
    margin:25px 0 35px;
}

.description{
    color:#5b5b5b;
    font-size:20px;
    line-height:1.8;
    margin-bottom:35px;
}

/* BUTTON */

.btn-custom{
    background:var(--color2);
    color:#fff;
    border-radius:50px;
    padding:15px 38px;
    text-decoration:none;
    font-weight:600;
    display:inline-block;
    transition:.4s;
}

.btn-custom:hover{
    background:var(--color1);
    color:#fff;
}

/* IMAGE SIDE */

.image-wrapper{
    position:relative;
    padding-bottom:120px;
}

.main-image{
    width:100%;
    border-radius:22px;
    min-height:650px;
    object-fit:cover;
    transition:1s;
}

.image-wrapper:hover .main-image{
    transform:scale(1.08);
}

.image-box{
    overflow:hidden;
    border-radius:22px;
}

/* FLOATING FOOD IMAGE */

.food-image{
    position:absolute; /* safer for now */
    width:420px;
    bottom:-60px;
    left:0;
    z-index:10;
    filter:drop-shadow(0 25px 25px rgba(0,0,0,.25));
    will-change: transform;
}

@keyframes floatFood{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
}

/* ANIMATION */

.fade-up{
    opacity:0;
    transform:translateY(50px);
    transition:.8s;
}

.fade-up.active{
    opacity:1;
    transform:translateY(0);
}

/* RESPONSIVE */

@media(max-width:1200px){

    .main-title{
        font-size:70px;
    }

    .food-image{
        width:330px;
    }
}

@media(max-width:991px){

    .why-choose{
        padding:80px 0;
    }

    .main-title{
        font-size:55px;
    }

    .image-wrapper{
        margin-top:50px;
    }

    .food-image{
        width:260px;
        left:0;
        bottom:-40px;
    }
}

@media(max-width:576px){

    .main-title{
        font-size:42px;
    }

    .feature-title{
        font-size:34px;
    }

    .food-image{
        width:180px;
    }
}



.popular-dishes {
  background: #f3eadf;
  padding: 80px 50px;
}

.small-title {
  letter-spacing: 2px;
  font-size: 13px;
  color: #8b6f4e;
}

.main-title {
  font-size: 48px;
  font-family: 'Playfair Display', serif;
  color: #3d2b1f;
}

.desc {
  max-width: 600px;
  color: #6c5a4b;
}

/* CARD */
.dish-card {
  border: 1px solid #e5d8c7;
  border-radius: 22px;
  padding: 3px;
  transition: 0.4s ease;
}

/* INNER BOX */
.card-box {
  /* background: #fff;
  border-radius: 18px;
  overflow: hidden; */
}

/* IMAGE SAFE AREA */
.img-wrap {
  height: 350px;
  padding: 8px;
  border-radius: 16px;
  overflow: hidden;
}

/* 🔥 INNER CLIP (FIXES BORDER CUT) */
.img-inner {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

/* IMAGE */
.img-inner img {
  border-radius: 14px;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.6s ease-out;
  transform: translateY(-40px) scale(1);
}

/* 🔥 HOVER EFFECT */
.dish-card:hover .img-inner img {
transition: all 0.6s ease-out;
  transform: translateY(0) scale(1.05);
}

/* CONTENT */
.content {
  padding:20px 30px;
}

.content h5 {
    font-family: 'Cormorant Garamond',serif;
font-size: 35px;
  color: #3d2b1f;
  margin-bottom: 8px;
}

.content p {
  color: #6c5a4b;
}

/* CARD LIFT */
.dish-card:hover {
  background: #FFFFFFA3;
}

/* BUTTON */
.main-btn {
  display: inline-block;
  padding: 12px 30px;
  background: #3d2b1f;
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s;
}

.main-btn:hover {
  background: #a17c5b;
}

/* OWL NAV */
.owl-nav {
  position: absolute;
  top: -70px;
  right: 0;
}

.owl-nav button {
  font-size: 28px !important;
  background: none !important;
  margin: 0 5px;
  color: #3d2b1f !important;
}

.owl-nav button:hover {
  color: #a17c5b !important;
}



.owl-stage {
  display: flex;
  padding: 10px 0; /* vertical safe */
}

.owl-carousel .owl-stage-outer {
  /*padding: 0 10px;    🔥 THIS FIXES FIRST CARD CUT */
}

.owl-item {
  display: flex;
}

.dish-card {
  display: flex;
  width: 100%;
  height: 100%;
}
.card-box {
  display: flex;
  flex-direction: column;
  width: 100%;
}



/* HERO */
.hero-video {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* BACKGROUND */
.hero-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../images/samaanvii-food-services-banner.jpg") center/cover no-repeat;
}

/* 🔥 TOP SCROLL TEXT */
.scroll-text {
  position: absolute;
  top: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  z-index: 3;
  padding: 15px 0;
}

.scroll-track {
  display: inline-block;
  white-space: nowrap;
  font-size:200px;
  font-family: 'Cormorant Garamond',serif;
  color: rgba(255,255,255,0.25);
  animation: scrollText 50s linear infinite;
}

/* SCROLL ANIMATION */
@keyframes scrollText {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* CENTER */
.hero-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ROTATING TEXT */
.circle-text {
  width: 180px;
  height: 180px;
  animation: rotateText 10s linear infinite;
}

.circle-text svg {
  width: 100%;
  height: 100%;
}

.circle-text text {
  fill: #fff;
  font-size: 10px;
  letter-spacing: 3px;
}

/* ROTATION */
@keyframes rotateText {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* PLAY BUTTON */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 70px;
  height: 70px;
  background: #fff;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;
  cursor: pointer;
  transition: 0.3s;
}

.play-btn:hover {
  background: #a17c5b;
  color: #fff;
}

/* VIDEO MODAL */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);

  display: none;
  align-items: center;
  justify-content: center;
}

.video-box {
  width: 80%;
  max-width: 800px;
  position: relative;
}

.video-box iframe {
  width: 100%;
  height: 450px;
}

.close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}



/* SECTION */
.process-section {
  background: #efe6d8;
  padding: 120px 0;
}

/* TITLE */
.sub-title {
  font-size: 12px;
  letter-spacing: 3px;
  color: #8b6f4e;
}

.main-title {
  font-size: 60px;
  font-family: 'Playfair Display', serif;
  color: #3d2b1f;
}

/* GRID */
.process-grid {
  display: grid;
  grid-template-columns: 1fr 420px 1fr;
  gap: 60px;
  align-items: start;
}

/* LEFT & RIGHT */
.process-left,
.process-right {
  display: flex;
  flex-direction: column;
}

/* STEP CARD */
.step-card {
  margin-bottom: 120px;
}

.step-card img {
  width: 100%;
  border-radius: 18px;
  margin-bottom: 15px;
  display: block;
}

.step-card span {
  font-size: 50px;
  color: rgba(0,0,0,0.15);
}

.step-card h5 {
  margin-top: 10px;
  font-size: 22px;
}

.step-card p {
  color: #6c5a4b;
}

/* 🔥 CENTER FIX */
.process-center {
  position: relative;
  min-height: 1200px; /* IMPORTANT */
}

/* STICKY IMAGE */
.sticky-img {
  position: sticky;
  top: 120px;
}

.sticky-img img {
  width: 100%;
  border-radius: 25px;
  display: block;
}

/* Hide mobile version on desktop */
.process-mobile{
    display:none;
}


/* RESPONSIVE */
@media (max-width: 850px) {
  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-center {
    min-height: auto;
  }

  .sticky-img {
    position: relative;
    top: 0;
    margin-bottom: 40px;
  }

 
     /* Hide desktop layout */
    .process-grid{
        display:none;
    }

    /* Show mobile layout */
    .process-mobile{
        display:block;
    }

    .process-mobile .step-card{
        margin-bottom:40px;
         display:flex;
        flex-direction:column;
    }
    .process-mobile .step-card figure{
        order:2;
        margin-top:20px;
    }

    .process-mobile .step-card span,
    .process-mobile .step-card h5,
    .process-mobile .step-card p{
        order:1;
    }


    .process-mobile .step-card img{
        width:100%;
        border-radius:18px;
        display:block;
        margin-bottom:15px;
    }

    .process-mobile .step-card span{
        font-size:50px;
        color:rgba(0,0,0,.15);
    }

    .process-mobile .step-card h5{
        margin-top:10px;
        font-size:22px;
    }

    .process-mobile .step-card p{
        color:#6c5a4b;
    }

}



/* BACKGROUND */
.lux-cta {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../images/samaanvii-food-services-cta-banner.jpg') center/cover no-repeat;
    overflow: hidden;
    color:#fff;
}

/* DARK OVERLAY WITH SOFT GRADIENT */
.lux-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,152,0,0.1), transparent 45%),
                rgba(0,0,0,0.65);
}

/* FLOATING PARTICLES */
.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    animation: floatUp 8s linear infinite;
}

.p1 { left: 10%; bottom: 0; }
.p2 { left: 30%; bottom: 0; animation-delay: 2s; }
.p3 { left: 60%; bottom: 0; animation-delay: 4s; }
.p4 { left: 80%; bottom: 0; animation-delay: 1s; }

@keyframes floatUp {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-900px); opacity: 0; }
}

/* GLASS CARD WITH GLOW BORDER */
/* GLASS CARD WITH SMOOTH COLOR SHIFT */
.glass-card {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 92%;
    padding: 55px;
    border-radius: 22px;

    /* animated gradient background */
    background: linear-gradient(
        120deg,
        rgba(255, 152, 0, 0.12),
        rgba(0, 0, 0, 0.35),
        rgba(255, 204, 112, 0.12),
        rgba(0, 0, 0, 0.25)
    );
    background-size: 300% 300%;
    animation: glassShift 12s ease infinite;

    /* glass effect */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    text-align: center;
    overflow: hidden;

    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
}

/* smooth animation */
@keyframes glassShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/* TAGS */
.tag-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.tag {
    background: rgba(255,255,255,0.12);
    padding: 7px 14px;
    border-radius: 30px;
    font-size: 13px;
    transition: 0.3s;
}

.tag:hover {
    transform: scale(1.05);
    background: rgba(255,152,0,0.3);
}

/* TITLE */
.title {
    font-size: 44px;
    font-weight: 900;
    line-height: 1.2;
}

/* DESCRIPTION */
.desc-cta {
    margin-top: 15px;
    font-size: 16px;
    opacity: 0.85;
    line-height: 1.7;
}

/* BUTTONS */
/* .btn-custom {
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    transition: 0.3s;
} */

.btn-warning:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255,152,0,0.3);
}

.btn-outline-light:hover {
    transform: translateY(-3px);
}

/* HIGHLIGHT STRIP */
.highlight-strip {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.h-item {
    background: rgba(255,255,255,0.10);
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    transition: 0.3s;
}

.h-item:hover {
    background: rgba(255,152,0,0.25);
    transform: translateY(-3px);
}

/* RESPONSIVE */
@media(max-width:768px){
    .title { font-size: 28px; }
    .glass-card { padding: 30px; }
}



.footer {
    background: #0b0b0b;
    color: #fff;
    padding: 70px 0 25px;
}

/* LOGO */
.footer-logo {
    font-weight: 800;
    color: #ff9800;
    margin-bottom: 15px;
}

/* TEXT */
.footer-text {
    color: rgba(255,255,255,0.65);
    font-size: 16px;
    line-height: 1.7;
}

/* TITLES */
.footer-title {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 1.25rem;
}

/* LINKS */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    text-decoration: none;
    color: rgba(255,255,255,0.65);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.footer-links a i {
    font-size: 12px;
    color: #ff9800;
}

.footer-links a:hover {
    color: #fff;
    transform: translateX(4px);
}

/* CONTACT */
.footer-contact {
    color: rgba(255,255,255,0.65);
    font-size: 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-contact i {
    color: #ff9800;
    width: 18px;
}
.footer-contact a{color:#fff}
.footer-contact a:hover{color:var(--color1)}

/* SOCIAL ICONS */
.social-icons {
    margin-top: 15px;
    display: flex;
    gap: 12px;
}

.social-icons a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    transition: 0.3s;
}

.social-icons a:hover {
    background: #ff9800;
    color: #000;
    transform: translateY(-3px);
}

/* LINE */
.footer-line {
    border-color: rgba(255,255,255,0.08);
    margin: 30px 0 20px;
}

/* BOTTOM */
.footer-bottom {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
}

.footer-bottom a {
    color: #ff9800;
    text-decoration: none;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

@media(max-width:801px)
{
   .title-shape{display: none;}
}
@media(max-width:769px)
{
    .feature-icon{margin-left: auto; margin-right: auto;}
.footer-logo img{margin-left: auto; margin-right: auto;}
.footer-links{display: flex; justify-content: center; column-gap: 20px;}
.footer-contact{margin-left: auto; margin-right: auto; display: block;}
.social-icons{justify-content: center;}
.main-title {
  font-size: 40px;}
  .owl-nav{top:-50px}
  

.lux-cta{padding-top: 50px; padding-bottom: 50px;}
}



/*==========================
About Banner
==========================*/

.about-header{}
.about-header .desktop-logo img {
  max-width: 100px;
  display: block;
}
.about-banner{
    min-height:80vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    background: linear-gradient(135deg, #011d20 0%, #02363c 45%, #045862 100%);
    padding-top: 100px;
    padding-bottom: 100px;
    border-top: 1px solid #000;
}

/*==========================
Background Glow
==========================*/

.about-banner::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    background:rgba(214,174,99,.08);
    border-radius:50%;
    left:-220px;
    top:-220px;
    filter:blur(70px);
}

.about-banner::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(214,174,99,.05);
    border-radius:50%;
    right:-150px;
    bottom:-150px;
    filter:blur(60px);
}

/*==========================
Content
==========================*/

.about-content{
    max-width:650px;
    padding-left:70px;
    position:relative;
    z-index:2;
}

/* Decorative Line */

.about-content::before{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    width:5px;
    height:220px;
    border-radius:20px;
    background:linear-gradient(#d6ae63,#8b6527);
}

.about-subtitle{
    font-size:22px;
    color:#d6ae63;
    font-family:cursive;
    margin-bottom:10px;
}

.about-title{
    font-family:'Playfair Display',serif;
    font-size:68px;
    font-weight:700;
    line-height:1.05;
    color:#ffffff;
    margin-bottom:20px;
}

.about-title span{
    color:#d6ae63;
}

.about-divider{
    width:90px;
    height:3px;
    background:#d6ae63;
    margin:25px 0;
    border-radius:50px;
}

.about-text{
    font-size:18px;
    line-height:1.9;
    color:#d6d6d6;
}

/*==========================
Buttons
==========================*/

.about-btn{
    padding:16px 34px;
    border-radius:12px;
    font-weight:600;
    margin-right:15px;
    transition:.35s;
}

.about-btn-primary{
    background:#d6ae63;
    color:#081313;
    border:none;
}

.about-btn-primary:hover{
    background:#bf9444;
    color:#fff;
    transform:translateY(-5px);
}

.about-btn-outline{
    border:2px solid #d6ae63;
    color:#d6ae63;
    background:transparent;
}

.about-btn-outline:hover{
    background:#d6ae63;
    color:#081313;
    transform:translateY(-5px);
}

/*==========================
Image
==========================*/

.about-image{
   
    display:flex;
    align-items:center;
    justify-content:flex-end;
    position:relative;
}

.about-image img{
    width:100%;
    height:90vh;
    object-fit:cover;
    border-radius:45px 0 0 45px;
    box-shadow:0 35px 80px rgba(0,0,0,.45);
}

/* Dark Overlay */

.about-image::before{
    content:"";
    position:absolute;
    width:100%;
    height:90vh;
    border-radius:45px 0 0 45px;
    background:linear-gradient(to left,rgba(0,0,0,.05),rgba(0,0,0,.35));
    z-index:1;
}

/*==========================
Floating Circles
==========================*/

/* .about-image::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border:2px solid rgba(214,174,99,.25);
    border-radius:50%;
    top:60px;
    left:-60px;
} */

/*==========================
Hover
==========================*/

.about-image img{
    transition:.6s;
}

.about-image:hover img{
    transform:scale(1.03);
}

/*==========================
Responsive
==========================*/

@media(max-width:1200px){

.about-title{
    font-size:58px;
}

}

@media(max-width:991px){
.about-divider{margin-left: auto; margin-right: auto;}
.about-banner{
    min-height:auto;
    padding:180px 0;
}

.about-content{
    padding-left:25px;
    margin-bottom:50px;
}

.about-content::before{
    display:none;
}

.about-title{
    font-size:44px;
}

.about-image{
    height:auto;
}

.about-image img{

    height:420px;
    border-radius:25px;
}

.about-image::before{

    height:420px;
    border-radius:25px;
}

.about-image::after{
    display:none;
}

.about-btn{

    /* width:100%; */
    margin-bottom:15px;
    margin-right:0;
}

}

@media(max-width:576px){

.about-title{

    font-size:38px;
}

.about-text{

    font-size:16px;
}

.about-subtitle{

    font-size:18px;
}

.about-image img{

    height:320px;
}

.about-image::before{

    height:320px;
}

}


.about-section{padding:90px 0;background:#fffdf9}
.about-img{position:relative}.about-img img{width:100%;border-radius:22px;box-shadow:0 18px 40px rgba(0,0,0,.12)}
.dot-pattern{position:absolute;left:-25px;bottom:-25px;width:120px;height:120px;background-image:radial-gradient(#d49a32 2px,transparent 2px);background-size:12px 12px}
.subtitle{color:#c9962e;font-size:14px;font-weight:700;text-transform:uppercase}.subtitle:before{content:'';display:inline-block;width:45px;height:2px;background:#c9962e;margin-right:10px;vertical-align:middle}
.about-section h2{font:54px Georgia,serif;color:#17322f;line-height:1.15;margin:12px 0 22px}
.about-text1{color:#555;line-height:1.9}
.feature-card{border:1px solid #eadfce;border-radius:18px;padding:28px 20px;text-align:center;background:#fff;height:100%}
.feature-card:hover{transform:translateY(-5px);transition:.3s;box-shadow:0 15px 30px rgba(0,0,0,.08)}
.icon{font-size:42px;color:#cf9631;margin-bottom:15px}
@media(max-width:991px){h2{font-size:38px !important}.about-content{margin-top:40px}}


/*=====================================
Why Choose Us
======================================*/

.why-choose1{
    position:relative;
    padding:90px 0;
    background:#fcf8f3;
    overflow:hidden;
}

/* Background Decoration */

.why-choose1::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    left:-100px;
    top:40px;
    background:url("https://www.svgrepo.com/show/530664/branch.svg") no-repeat center;
    background-size:contain;
    opacity:.06;
}

.why-choose1::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    right:-60px;
    bottom:20px;
    background:url("https://www.svgrepo.com/show/530664/branch.svg") no-repeat center;
    background-size:contain;
    opacity:.06;
    transform:rotate(180deg);
}

/* Heading */

.why-subtitle{
    display:inline-block;
    color:#c88721;
    font-family:cursive;
    font-size:20px;
    margin-bottom:10px;
}

.why-title{
    font-family:'Playfair Display',serif;
    font-size:52px;
    font-weight:600;
    color:#163232;
}

.why-title span{
    color:#c88721;
}

.why-divider{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-top:18px;
}

.why-divider span{
    width:70px;
    height:2px;
    background:#d39a34;
}

.why-divider i{
    color:#d39a34;
    font-size:18px;
}

/* Cards */

.why-card{

    background:#fff;

    border:1px solid #efe4d8;

    border-radius:18px;

    padding:35px 20px;

    text-align:center;

    height:100%;

    transition:.4s;

    position:relative;

    overflow:hidden;

    box-shadow:0 5px 18px rgba(0,0,0,.05);

}

/* Gold Hover Border */

.why-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:#d39a34;

    transform:scaleX(0);

    transition:.4s;

}

.why-card:hover::before{

    transform:scaleX(1);

}

.why-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 35px rgba(0,0,0,.12);

}

/* Icon */

.why-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:22px;

    border-radius:50%;

    background:#fff8ef;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid #f0dfc8;

    transition:.4s;

}

.why-icon i{

    font-size:38px;

    color:#d39a34;

}

.why-card:hover .why-icon{

    background:#d39a34;

    transform:rotateY(180deg);

}

.why-card:hover .why-icon i{

    color:#fff;

    transform:rotateY(180deg);

}

/* Text */

.why-card h5{

    font-family:'Playfair Display',serif;

    color:#163232;

    font-size:22px;

    margin-bottom:12px;

}

.why-card p{

    font-size:15px;

    color:#666;

    line-height:1.7;

    margin:0;

}

/* Desktop */

@media(min-width:992px){

.why-choose1 .col-lg-2{

    flex:0 0 20%;

    max-width:20%;

}

}

/* Tablet */

@media(max-width:991px){

.why-title{

    font-size:40px;

}

}

/* Mobile */

@media(max-width:767px){

.why-choose{

    padding:70px 0;

}

.why-title{

    font-size:34px;

}

.why-card{

    padding:30px 20px;

}

.why-icon{

    width:70px;

    height:70px;

}

.why-icon i{

    font-size:30px;

}

}

/*======================================
Our Commitment
======================================*/

.commitment-section{
    position:relative;
    overflow:hidden;
    background:#f8f5ef;
}

/* Left Content */

.commitment-content{
    background: linear-gradient(135deg, #012d32, #045862);
    color:#fff;
    min-height:700px;
    padding:90px 80px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
}

/* Decorative Circle */

.commitment-content::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border:1px solid rgba(214,174,99,.18);
    border-radius:50%;
    top:-120px;
    left:-120px;
}

.commitment-content::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border:1px solid rgba(214,174,99,.12);
    border-radius:50%;
    right:-70px;
    bottom:-70px;
}

.commitment-subtitle{
    color:#d6ae63;
    font-size:20px;
    font-family:cursive;
}

.commitment-title{
    font-family:'Playfair Display',serif;
    font-size:58px;
    margin:10px 0;
    color:#fff;
}

.commitment-divider{
    width:90px;
    height:3px;
    background:#d6ae63;
    margin:25px 0;
}

.commitment-text{
    color:#d8d8d8;
    font-size:17px;
    line-height:1.9;
}

/* Feature */

.commitment-feature{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:500;
    color:#fff;
}

.commitment-feature i{
    color:#d6ae63;
    font-size:22px;
}

/* Button */

.commitment-btn{
    background:#d6ae63;
    color:#102222;
    padding:15px 35px;
    border-radius:10px;
    font-weight:600;
    width:max-content;
    transition:.35s;
}

.commitment-btn:hover{
    background:#be913f;
    color:#fff;
    transform:translateY(-5px);
}

/* Right Image */

.commitment-image{
    position:relative;
    /* height:700px; */
    overflow:hidden;
}

.commitment-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s;
}

.commitment-image:hover img{
    transform:scale(1.06);
}

/* Dark Overlay */

.commitment-image::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.35));
    z-index:1;
}

/* Floating Badge */

.image-badge{
    position:absolute;
    right:50px;
    bottom:50px;
    z-index:2;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    padding:25px 35px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
    text-align:center;
}

.image-badge h3{
    margin:0;
    font-size:42px;
    font-family:'Playfair Display',serif;
    color:#d6ae63;
}

.image-badge span{
    font-size:16px;
}

/* Responsive */

@media(max-width:991px){

.commitment-content{

    min-height:auto;

    padding:70px 35px;
}

.commitment-title{

    font-size:42px;
}

.commitment-image{

    /* height:450px; */
}
.commitment-btn{margin-left: auto; margin-right: auto;}

.image-badge{

    right:20px;
    bottom:20px;
    padding:18px 25px;
}

.image-badge h3{

    font-size:32px;
}

}

@media(max-width:576px){

.commitment-content{

    padding:60px 25px;
}

.commitment-title{

    font-size:34px;
}

.commitment-text{

    font-size:16px;
}

.commitment-image{

    height:320px;
}

.image-badge{

    padding:15px 20px;
}

.image-badge h3{

    font-size:26px;
}

}
/*==========================
COUNTER SECTION
===========================*/

.stats-section{
    padding:80px 0;
    background:#fff;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
}

.stat-box{
    padding:15px 20px;
    border-right:1px solid #e5e5e5;
    transition:.4s;
}

.stat-box:hover{
    transform:translateY(-8px);
}

.stat-icon{
    width:80px;
    height:80px;
    margin:auto;
    margin-bottom:20px;
    border-radius:50%;
    background:var(--color1);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:34px;
    color:#d8a33d;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.stat-box h2{
    font-size:58px;
    font-weight:700;
    color:var(--color1);
    margin-bottom:8px;
    line-height:1;
}

.stat-box p{
    margin:0;
    color:#666;
    font-size:17px;
    font-weight:500;
}

@media(max-width:991px){

.stat-box{
    border-right:none;
    border-bottom:1px solid #eee;
    padding:35px 15px;
}

}

@media(max-width:767px){

.stats-section{
    padding:60px 0;
}

.stat-box h2{
    font-size:42px;
}

.stat-icon{
    width:70px;
    height:70px;
    font-size:28px;
}

.stat-box p{
    font-size:15px;
}

}
/*==============================
CTA SECTION
==============================*/

.cta-section{

    position:relative;

    padding:90px 0;

    background: url('../images/samaanvii-food-services4.jpg') top center/cover;

    background-size:cover;

    overflow:hidden;
}

.cta-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(5,35,33,.95) 0%,
        rgba(5,35,33,.85) 45%,
        rgba(5,35,33,.55) 70%,
        rgba(5,35,33,.25) 100%
    );

}

.cta-section .container{

    z-index:2;
}

.cta-subtitle{

    display:inline-block;

    color:#d8a33d;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:15px;
}

.cta-title{

    color:#fff;

    font-size:54px;

    font-family:'Cormorant Garamond',serif;

    line-height:1.1;

    margin-bottom:18px;
}

.cta-text{

    color:rgba(255,255,255,.85);

    font-size:17px;

    line-height:1.9;

    max-width:700px;

    margin-bottom:0;
}

/*==============================
BUTTONS
==============================*/

.cta-buttons{

    display:flex;

    /* justify-content:flex-end; */

    gap:15px;

    flex-wrap:wrap;
    margin-top: 40px;
}

.btn-book{

    background:#d8a33d;

    color:#fff;

    border-radius:8px;

    padding:14px 32px;

    font-weight:600;

    transition:.4s;
}

.btn-book:hover{

    background:#fff;

    color:#082f2c;
}

.btn-call{

    border:2px solid rgba(255,255,255,.4);

    color:#fff;

    border-radius:8px;

    padding:14px 32px;

    font-weight:600;

    transition:.4s;
}

.btn-call:hover{

    background:#fff;

    color:#082f2c;
}

.btn i{

    margin-left:8px;
}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:991px){

.cta-section{

    text-align:center;

    padding:70px 0;
}

.cta-buttons{

    justify-content:center;

    margin-top:35px;
}

.cta-title{

    font-size:42px;
}

}

@media(max-width:767px){

.cta-title{

    font-size:34px;
}

.cta-text{

    font-size:15px;
}

.btn-book,
.btn-call{

    width:100%;
}

}


/*==========================
MENU DIV 1
==========================*/

.menu-div1{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:url("../images/samaanvii-food-services-nonveg-menu.jpg") center center/cover no-repeat;
    padding-top: 120px;
    padding-bottom: 120px;
    background-size: cover !important;
}

.menu-div1-overlay{
    position:absolute;
    top:0;
    left:0;
    width:58%;
    height:100%;
    background:linear-gradient(
        90deg,
        rgba(4,88,98,.96) 0%,
        rgba(4,88,98,.92) 45%,
        rgba(4,88,98,.75) 72%,
        rgba(4,88,98,0) 100%
    );
    z-index:1;
}

.menu-div1 .container{
    position:relative;
    z-index:2;
}

.menu-div1-subtitle{
    display:flex;
    align-items:center;
    gap:15px;
    color:#f1d086;
    font-size:15px;
    font-weight:500;
    letter-spacing:1px;
    margin-bottom:20px;
}

.menu-div1-subtitle::before{
    content:"";
    width:60px;
    height:2px;
    background:var(--color2);
}

.menu-div1-title{
    font-family:'Playfair Display',serif;
    font-size:5rem;
    font-weight:800;
    line-height:1.05;
    color:#fff;
    margin-bottom:25px;
}

.menu-div1-title span{
    color:var(--color2);
}

.menu-div1-text{
    color:#edf5f5;
    font-size:18px;
    line-height:1.9;
    max-width:600px;
}

.menu-div1-btn1{

    border:2px solid var(--color2);
    color:#fff;
    padding:15px 35px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:.4s;

}

.menu-div1-btn1:hover{

    background:#fff;
    color:var(--color1);

}

.menu-div1-btn2{

    background:var(--color2);
    color:#fff;
    padding:15px 35px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:.4s;

}

.menu-div1-btn2:hover{

    background:#bc7e2d;
    color:#fff;

}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:991px){

.menu-div1{

    text-align:center;
    min-height:auto;
    padding:160px 0;

}

.menu-div1-overlay{

    width:100%;
    background:linear-gradient(
        180deg,
        rgba(4,88,98,.7),
        rgba(4,88,98,.5)
    );

}

.menu-div1-subtitle{

    justify-content:center;

}

.menu-div1-subtitle::before{

    display:none;

}

.menu-div1-title{

    font-size:3rem;

}

.menu-div1-text{

    margin:auto;

}

.menu-div1-buttons{

    justify-content:center;

}

}

@media(max-width:576px){

.menu-div1-title{

    font-size:2.3rem;

}

.menu-div1-text{

    font-size:16px;

}

.menu-div1-btn1,
.menu-div1-btn2{
/* 
    width:100%; */

}

}


.menu-div2{

padding:80px 0;
background:#faf8f4;

}

.menu-div2-head{

text-align:center;
margin-bottom:60px;

}

.menu-div2-title{

font-family:'Playfair Display',serif;
font-size:52px;
color:#063f47;
font-weight:700;
margin-bottom:15px;

}

.menu-div2-text{

font-size:16px;
color:#777;

}

.menu-div2-row{

row-gap:28px;

}

.menu-div2-box{

background:#fff;
border-radius:18px;
box-shadow:0 8px 24px rgba(0,0,0,.08);
transition:.35s;
height:100%;
overflow:hidden;

}

.menu-div2-box:hover{

transform:translateY(-8px);

}

.menu-div2-boxbody{

padding:24px;

}

.menu-div2-top{

display:flex;
align-items:center;
margin-bottom:18px;

}

.menu-div2-icon{

width:50px;
height:50px;
border-radius:50%;
background:var(--color1);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:22px;
margin-right:14px;

}

.menu-div2-heading{

font-family:'Playfair Display',serif;
font-size:24px;
color:#063f47;
font-weight:700;
margin:0;

}

.menu-div2-image{

width:100%;
/* height:190px; */
object-fit:cover;
border-radius:12px;
margin:12px 0 18px;

}

.menu-div2-list{
    list-style:none;
    padding:0;
    margin:0;
}

.menu-div2-list li{
    display:flex;
    align-items:center;
    /* justify-content:space-between; */
    gap:15px;
    padding:12px 0;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.menu-div2-list li::before{
    content:"✦";
    color:var(--color2);
    margin-right:12px;
    font-size:16px;
}

/*====================================
TRADITIONAL SPECIALTIES EXTRA CSS
====================================*/

.menu-div2-desc{

    font-size:15px;
    line-height:1.8;
    color:#666;
    margin-bottom:20px;

}

.menu-div2-subtitle{

    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
    color:var(--color2);
    text-transform:uppercase;
    margin-bottom:12px;

}


@media(max-width:991px){

.menu-div2-title{

font-size:40px;

}

}

@media(max-width:576px){

.menu-div2{

padding:60px 0;

}

.menu-div2-title{

font-size:32px;

}

.menu-div2-heading{

font-size:20px;

}

}




/*=========================================
HOSTEL SERVICES
=========================================*/

.hostel-services{

    padding:100px 0;

    background:#ffffff;

}

.section-badge{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

    background:rgba(4,88,98,.08);

    color:var(--color1);

    font-weight:600;

}

.section-title{

    margin-top:20px;

    font-family:'Playfair Display',serif;

    font-size:52px;

    color:#18363b;

    font-weight:700;

}

.section-title span{

    color:var(--color2);

}

.section-text{

    max-width:780px;

    margin:20px auto 0;

    color:#666;

    line-height:1.9;

    font-size:17px;

}

.service-card{

    background:#fff;

    border-radius:22px;

    padding:35px 25px;

    text-align:center;

    height:100%;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.service-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:rgba(4,88,98,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--color2);

    font-size:34px;

}

.service-card h5{

    font-family:'Playfair Display',serif;

    color:var(--color1);

    margin-bottom:15px;

}

.service-card p{

    color:#666;

    line-height:1.8;

    margin:0;

}

@media(max-width:991px){

.section-title{

    font-size:40px;

}

}

@media(max-width:576px){

.hostel-services{

    padding:70px 0;

}

.section-title{

    font-size:32px;

}

}


.catering-hero{

    position:relative;
    overflow:hidden;

    min-height:100vh;

    display:flex;
    align-items:center;

    padding:180px 0;

    background:#031f24;

    background-image:
    radial-gradient(circle at top left, rgba(4,88,98,.45), transparent 45%),
    radial-gradient(circle at bottom right, rgba(125,158,87,.18), transparent 35%);

}

.catering-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("https://www.transparenttextures.com/patterns/dark-denim-3.png");

    opacity:.08;

    pointer-events:none;

}

.catering-hero .container{

    position:relative;

    z-index:2;

}

/*=========================================
SUBTITLE
=========================================*/

.hero-subtitle{

    display:flex;

    align-items:center;

    gap:15px;

    color:var(--color2);

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:20px;

}

.hero-subtitle span{

    width:60px;

    height:2px;

    background:var(--color2);

}

/*=========================================
TITLE
=========================================*/

.hero-title{

    font-family:'Playfair Display',serif;

    font-size:72px;

    line-height:1.08;

    font-weight:800;

    color:#ffffff;

    margin-bottom:25px;

}

.hero-title span{

    display:block;

    color:var(--color2);

}

/*=========================================
TEXT
=========================================*/

.hero-text{

    color:rgba(255,255,255,.85);

    font-size:18px;

    line-height:1.9;

    max-width:620px;

}

/*=========================================
BUTTON
=========================================*/

.hero-buttons{

    margin-top:40px;

}

.hero-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    background:var(--color3);

    color:#fff;

    padding:16px 34px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

    box-shadow:0 15px 35px rgba(125,158,87,.25);

}

.hero-btn:hover{

    background:var(--color2);

    color:#fff;

    transform:translateY(-4px);

}

/*=========================================
FEATURES
=========================================*/

.hero-features{

    margin-top:60px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.hero-feature{

    text-align:center;

}

.hero-feature i{

    font-size:38px;

    color:var(--color2);

    margin-bottom:15px;

    display:block;

}

.hero-feature h6{

    color:#fff;

    line-height:1.6;

    font-size:15px;

    font-weight:500;

    margin:0;

}

/*=========================================
IMAGE
=========================================*/

.hero-image{

    position:relative;

    padding-left:35px;

}

.hero-image img{

    width:100%;

    border-radius:320px 0 0 320px;

    border:7px solid var(--color2);

    box-shadow:0 35px 80px rgba(0,0,0,.40);

    animation:heroFloat 5s ease-in-out infinite;

}

/*=========================================
IMAGE GLOW
=========================================*/

.hero-image::before{

    content:"";

    position:absolute;

    left:40px;

    top:40px;

    right:0;

    bottom:40px;

    border-radius:320px 0 0 320px;

    background:rgba(4,88,98,.35);

    filter:blur(45px);

    z-index:-1;

}

/*=========================================
BOTTOM CURVE
=========================================*/

.hero-bottom-shape{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    line-height:0;

}

.hero-bottom-shape svg{

    width:100%;

    height:90px;

}

/*=========================================
ANIMATION
=========================================*/

@keyframes heroFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.hero-title{

    font-size:58px;

}

}

@media(max-width:991px){

.catering-hero{

    min-height:auto;

    padding:180px 0 80px;

}

.hero-content{

    text-align:center;

}

.hero-subtitle{

    justify-content:center;

}

.hero-title{

    font-size:46px;

}

.hero-text{

    margin:auto;

}

.hero-features{

    grid-template-columns:repeat(2,1fr);

    margin-top:50px;

}

.hero-image{

    margin-top:60px;

    padding-left:0;

}

.hero-image img{

    border-radius:35px;

}

.hero-image::before{

    display:none;

}

}

@media(max-width:576px){

.hero-title{

    font-size:36px;

}

.hero-text{

    font-size:16px;

}

.hero-btn{

    width:100%;

    justify-content:center;

}

.hero-features{

    grid-template-columns:1fr;

    gap:25px;

}

.hero-feature{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    padding:20px;

    border-radius:18px;

}

.hero-bottom-shape svg{

    height:50px;

}

}



/*=========================================
OUR SERVICES
=========================================*/

.services-section{

    padding:100px 0;

    /* background:#faf8f4; */

    position:relative;

}

.services-section-heading{

    margin-bottom:70px;

}

.services-section-subtitle{

    display:inline-flex;

    align-items:center;

    gap:15px;

    color:var(--color2);

    font-size:15px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.services-section-subtitle span{

    width:55px;

    height:2px;

    background:var(--color2);

}

.services-section-heading h2{

    font-family:'Playfair Display',serif;

    font-size:56px;

    color:var(--color1);

    font-weight:700;

    margin-bottom:18px;

}

.services-section-heading p{

    max-width:720px;

    margin:auto;

    color:#666;

    font-size:17px;

    line-height:1.9;

}


/*==============================
SERVICE CARD
==============================*/

.services-card{

    position:relative;

    background:#fff;

    border-radius:22px;

    padding:28px;

    box-shadow:0 12px 40px rgba(0,0,0,.08);

    transition:.35s;

    overflow:hidden;

    height:100%;

    border:1px solid rgba(0,0,0,.05);

}

.services-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.services-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--color1),
        var(--color2)
    );

}


/*==============================
ICON
==============================*/

.services-icon{

    width:75px;

    height:75px;

    border-radius:50%;

    background:var(--color1);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    color:var(--color2);

    font-size:34px;

    transition:.35s;

}

.services-card:hover .services-icon{

    background:var(--color2);

    color:#fff;

}


/*==============================
TITLE
==============================*/

.services-card h4{

    font-family:'Playfair Display',serif;

    font-size:28px;

    color:var(--color1);

    margin-bottom:20px;

    font-weight:700;

}


/*==============================
IMAGE
==============================*/

.services-card img{

    width:100%;

    /* height:190px; */

    object-fit:cover;

    border-radius:15px;

    margin-bottom:22px;

    transition:.5s;

}

.services-card:hover img{

    transform:scale(1.05);

}


/*==============================
LIST
==============================*/

.services-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.services-card ul li{

    position:relative;

    padding:11px 0 11px 28px;

    border-bottom:1px solid rgba(0,0,0,.06);

    color:#444;

    font-size:15px;

}

.services-card ul li:last-child{

    border-bottom:none;

}

.services-card ul li::before{

    content:"";

    position:absolute;

    left:0;

    top:18px;

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--color3);

    box-shadow:0 0 0 4px rgba(125,158,87,.15);

}


/*==============================
HOVER
==============================*/

.services-card:hover h4{

    color:var(--color2);

}

.services-card:hover ul li::before{

    background:var(--color2);

}


/*==============================
RESPONSIVE
==============================*/

@media(max-width:1200px){

.services-section-heading h2{

    font-size:48px;

}

}

@media(max-width:991px){

.services-section{

    padding:80px 0;

}

.services-section-heading{

    margin-bottom:50px;

}

.services-section-heading h2{

    font-size:40px;

}

.services-card{

    padding:24px;

}

.services-card h4{

    font-size:24px;

}

}

@media(max-width:767px){

.services-section-heading h2{

    font-size:34px;

}

.services-section-heading p{

    font-size:16px;

}

.service-card img{

    height:220px;

}

}

@media(max-width:576px){

.services-section{

    padding:60px 0;

}

.services-section-subtitle{

    font-size:13px;

}

.services-section-heading h2{

    font-size:30px;

}

.services-card{

    border-radius:18px;

    padding:22px;

}

.services-icon{

    width:65px;

    height:65px;

    font-size:28px;
    margin-left: auto;margin-right: auto;

}

.services-card h4{

    font-size:22px;

}

.services-card img{

    height:200px;

}

.services-card ul li{

    font-size:14px;

}

}

/*=========================================
INDUSTRIES WE SERVE
=========================================*/

.industries-section{

    padding:100px 0;

    background:#ffffff;

    position:relative;

}

.industries-section::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:180px;

    background:linear-gradient(
        180deg,
        rgba(4,88,98,.04),
        rgba(255,255,255,0)
    );

}

.industries-section .container{

    position:relative;
    z-index:2;

}


/*=============================
HEADING
=============================*/

.industries-heading{

    margin-bottom:65px;

}

.industries-subtitle{

    display:inline-flex;

    align-items:center;

    gap:15px;

    color:var(--color2);

    font-size:15px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:15px;

}

.industries-subtitle span{

    width:55px;
    height:2px;

    background:var(--color2);

}

.industries-heading h2{

    font-family:'Playfair Display',serif;

    font-size:54px;

    font-weight:700;

    color:var(--color1);

    margin-bottom:18px;

}

.industries-heading h2 span{

    color:var(--color2);

}

.industries-heading p{

    max-width:760px;

    margin:auto;

    color:#666;

    line-height:1.9;

    font-size:17px;

}


/*=============================
CARD
=============================*/

.industry-card{

    background:#fff;

    border-radius:20px;

    padding:35px 20px;

    text-align:center;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

    border:1px solid rgba(0,0,0,.05);

}

.industry-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.15);

}


/*=============================
ICON
=============================*/

.industry-card i{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto auto 20px;

    border-radius:50%;

    background:rgba(4,88,98,.08);

    color:var(--color2);

    font-size:36px;

    transition:.35s;

}

.industry-card:hover i{

    background:var(--color1);

    color:#fff;

    transform:rotateY(180deg);

}


/*=============================
TITLE
=============================*/

.industry-card h6{

    font-size:18px;

    color:var(--color1);

    font-weight:600;

    margin:0;

    line-height:1.5;

    transition:.35s;

}

.industry-card:hover h6{

    color:var(--color2);

}


/*=============================
RESPONSIVE
=============================*/

@media(max-width:1200px){

.industries-heading h2{

    font-size:46px;

}

}

@media(max-width:991px){

.industries-section{

    padding:80px 0;

}

.industries-heading{

    margin-bottom:50px;

}

.industries-heading h2{

    font-size:40px;

}

.industry-card{

    padding:30px 15px;

}

.industry-card i{

    width:70px;
    height:70px;

    font-size:30px;

}

}

@media(max-width:767px){

.industries-heading h2{

    font-size:34px;

}

.industries-heading p{

    font-size:16px;

}

.industry-card{

    padding:25px 15px;

}

.industry-card h6{

    font-size:16px;

}

}

@media(max-width:576px){

.industries-section{

    padding:60px 0;

}

.industries-subtitle{

    font-size:13px;

}

.industries-heading h2{

    font-size:30px;

}

.industry-card{

    border-radius:16px;

    padding:22px 12px;

}

.industry-card i{

    width:60px;
    height:60px;

    font-size:26px;

    margin-bottom:15px;

}

.industry-card h6{

    font-size:15px;

}

}


/*=========================================
ADDITIONAL SERVICES
=========================================*/

.additional-services{

    padding:100px 0;

    background:#faf8f4;

}

.additional-head{

    margin-bottom:70px;

}

.additional-subtitle{

    display:inline-flex;

    align-items:center;

    gap:15px;

    color:var(--color2);

    font-size:15px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.additional-subtitle::before,
.additional-subtitle::after{

    content:"";

    width:55px;

    height:2px;

    background:var(--color2);

}

.additional-title{

    font-family:'Playfair Display',serif;

    font-size:54px;

    font-weight:700;

    color:var(--color1);

    margin-bottom:20px;

}

.additional-title span{

    color:var(--color2);

}

.additional-text{

    max-width:760px;

    margin:auto;

    color:#666;

    font-size:17px;

    line-height:1.9;

}


/*=============================*/

.additional-card{

    background:#fff;

    border-radius:22px;

    padding:35px 28px;

    text-align:center;

    height:100%;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

    border:1px solid rgba(0,0,0,.05);

}

.additional-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.15);

}


/*=============================*/

.additional-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    margin:auto auto 22px;

    background:rgba(4,88,98,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:var(--color2);

    transition:.35s;

}

.additional-card:hover .additional-icon{

    background:var(--color1);

    color:#fff;

}


/*=============================*/

.additional-card h5{

    font-family:'Playfair Display',serif;

    color:var(--color1);

    font-size:24px;

    font-weight:700;

    margin-bottom:15px;

}

.additional-card p{

    color:#666;

    line-height:1.8;

    margin:0;

}

.additional-card:hover h5{

    color:var(--color2);

}


/*=============================*/

@media(max-width:991px){

.additional-services{

    padding:80px 0;

}

.additional-title{

    font-size:40px;

}

.additional-head{

    margin-bottom:50px;

}

}

@media(max-width:576px){

.additional-services{

    padding:60px 0;

}

.additional-subtitle{

    font-size:13px;

}

.additional-title{

    font-size:30px;

}

.additional-text{

    font-size:15px;

}

.additional-card{

    padding:25px;

}

.additional-icon{

    width:65px;

    height:65px;

    font-size:28px;

}

.additional-card h5{

    font-size:21px;

}

}




/*=========================================
CONTACT HERO
=========================================*/

.contact-div1{

    position:relative;

    overflow:hidden;

    background:linear-gradient(135deg,#023f46 0%,#045862 60%,#0b6b77 100%);

    padding:180px 0 180px;

}

/*==============================
DECORATION
==============================*/

.contact-div1::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    background:rgba(211,145,61,.08);

    top:-250px;

    right:-180px;

}

.contact-div1::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(255,255,255,.04);

    bottom:-180px;

    left:-120px;

}

.contact-div1-pattern{

    position:absolute;

    top:70px;

    left:70px;

    width:180px;

    height:180px;

    background-image:radial-gradient(rgba(211,145,61,.55) 1.8px, transparent 1.8px);

    background-size:16px 16px;

    opacity:.5;

}

/*==============================
CONTENT
==============================*/

.contact-div1-content{

    position:relative;

    z-index:2;

}

.contact-div1-subtitle{

    display:inline-block;

    padding:10px 26px;

    border-radius:50px;

    background:rgba(211,145,61,.15);

    color:var(--color2);

    border:1px solid rgba(211,145,61,.35);

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:28px;

}

.contact-div1-title{

    font-family:'Playfair Display',serif;

    font-size:68px;

    font-weight:800;

    color:#fff;

    line-height:1.1;

    margin-bottom:30px;

}

.contact-div1-title span{

    color:var(--color2);

}

.contact-div1-text{

    max-width:820px;

    margin:auto;

    color:rgba(255,255,255,.88);

    font-size:18px;

    line-height:1.9;

}

/*==============================
BUTTONS
==============================*/

.contact-div1-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.contact-div1-btn1{

    background:var(--color2);

    color:#fff;

    text-decoration:none;

    padding:16px 38px;

    border-radius:60px;

    font-weight:600;

    transition:.35s;

    box-shadow:0 15px 35px rgba(211,145,61,.25);

}

.contact-div1-btn1:hover{

    background:#bf812f;

    color:#fff;

    transform:translateY(-4px);

}

.contact-div1-btn2{

    border:2px solid rgba(255,255,255,.35);

    color:#fff;

    text-decoration:none;

    padding:16px 38px;

    border-radius:60px;

    font-weight:600;

    transition:.35s;

}

.contact-div1-btn2:hover{

    background:#fff;

    color:var(--color1);

}

/*==============================
FLOATING CONTACT CARDS
==============================*/

.contact-div1-info{

    position:relative;

    margin-top:-90px;
    padding-bottom: 100px;



    z-index:5;

}

.contact-info-card{

    background:#fff;

    border-radius:22px;

    padding:35px 28px;

    text-align:center;

    height:100%;

    transition:.35s;

    box-shadow:0 18px 45px rgba(0,0,0,.12);

    border-top:5px solid var(--color2);

}

.contact-info-card:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 55px rgba(0,0,0,.18);

}

.contact-info-icon{

    width:82px;

    height:82px;

    border-radius:50%;

    background:rgba(4,88,98,.08);

    color:var(--color2);

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto auto 25px;

    font-size:34px;

    transition:.35s;

}

.contact-info-card:hover .contact-info-icon{

    background:var(--color1);

    color:#fff;

}

.contact-info-card h5{

    font-family:'Playfair Display',serif;

    color:var(--color1);

    font-size:24px;

    margin-bottom:15px;

    font-weight:700;

}

.contact-info-card p, .contact-info-card p a{

    margin:0;

    color:#666;

    line-height:1.8;

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:1200px){

.contact-div1-title{

    font-size:58px;

}

}

@media(max-width:991px){

.contact-div1{

    /* padding:100px 0 150px; */

}

.contact-div1-title{

    font-size:48px;

}

.contact-div1-info{

    margin-top:70px;

    margin-bottom:-220px;

}

}

@media(max-width:767px){

.contact-div1{

    /* padding:80px 0 120px; */

}

.contact-div1-pattern{

    display:none;

}

.contact-div1-title{

    font-size:40px;

}

.contact-div1-text{

    font-size:16px;

}

.contact-div1-buttons{

    flex-direction:column;

}

.contact-div1-btn1,

.contact-div1-btn2{

    width:100%;

    text-align:center;

}

.contact-div1-info{

    margin-bottom:-180px;

}

}

@media(max-width:576px){

.contact-div1{

    /* padding:70px 0 100px; */

}

.contact-div1-title{

    font-size:34px;

}

.contact-div1-subtitle{

    font-size:13px;

}

.contact-info-card{

    padding:28px 22px;

}

.contact-info-icon{

    width:70px;

    height:70px;

    font-size:28px;

}

.contact-info-card h5{

    font-size:21px;

}

.contact-div1-info{

    margin-top:50px;

    margin-bottom:-160px;

}

}


/*=========================================
CONTACT FORM
=========================================*/

.contact-div2{

    padding:100px 0 100px;

    background:#f7f8fa;

    position:relative;

}

.contact-div2::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:180px;

    background:linear-gradient(
        180deg,
        rgba(4,88,98,.04),
        transparent
    );

}

/*=========================================
FORM BOX
=========================================*/

.contact-form-box{

    position:relative;

    background:#fff;

    border-radius:28px;

    padding:50px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    border:1px solid rgba(0,0,0,.05);

    overflow:hidden;

}

.contact-form-box::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        var(--color1),
        var(--color2),
        var(--color3)
    );

}

/*=========================================
LABEL
=========================================*/

.contact-form-box label{

    color:var(--color1);

    font-weight:600;

    margin-bottom:10px;

    display:block;
    text-align: left;

}

/*=========================================
INPUT
=========================================*/

.contact-form-box .form-control,

.contact-form-box .form-select{

    height:58px;

    border-radius:14px;

    border:1px solid #dcdcdc;

    padding:0 18px;

    font-size:15px;

    box-shadow:none;

    transition:.35s;

    background:#fff;

}

.contact-form-box textarea.form-control{

    height:auto;

    min-height:170px;

    padding:18px;

    resize:none;

}

.contact-form-box .form-control:focus,

.contact-form-box .form-select:focus{

    border-color:var(--color2);

    box-shadow:0 0 0 .2rem rgba(211,145,61,.15);

}

/*=========================================
PLACEHOLDER
=========================================*/

.contact-form-box input::placeholder,

.contact-form-box textarea::placeholder{

    color:#999;

}

/*=========================================
BUTTON
=========================================*/

.contact-submit{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:var(--color2);

    color:#fff;

    border:none;

    padding:17px 42px;

    border-radius:60px;

    font-size:16px;

    font-weight:600;

    transition:.35s;

    box-shadow:0 15px 35px rgba(211,145,61,.25);

}

.contact-submit:hover{

    background:var(--color1);

    color:#fff;

    transform:translateY(-4px);

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px){

.contact-div2{

    padding:220px 0 80px;

}

.contact-form-box{

    padding:40px;

}

}

@media(max-width:767px){

.contact-div2{

    padding:180px 0 70px;

}

.contact-form-box{

    padding:30px;

}

}

@media(max-width:576px){

.contact-div2{

    padding:160px 0 60px;

}

.contact-form-box{

    padding:22px;

    border-radius:20px;

}

.contact-submit{

    width:100%;

}

.contact-form-box .form-control,

.contact-form-box .form-select{

    height:54px;

}

}
/*=========================================
CONTACT FORM TITLE
=========================================*/

.contact-div2-title{

    font-family:'Playfair Display',serif;

    font-size:52px;

    font-weight:700;

    color:var(--color1);

    margin-bottom:20px;

}

.contact-div2-title span{

    color:var(--color2);

}

@media(max-width:991px){

.contact-div2-title{

    font-size:42px;

}

}

@media(max-width:576px){

.contact-div2-title{

    font-size:30px;

}

}


/*=========================================
GOOGLE MAP
=========================================*/

.contact-div3{

    padding:100px 0;

    background:#ffffff;

}

.contact-div3-head{

    margin-bottom:60px;

}

.contact-div3-subtitle{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

    background:rgba(4,88,98,.08);

    color:var(--color2);

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.contact-div3-title{

    font-family:'Playfair Display',serif;

    font-size:54px;

    font-weight:700;

    color:var(--color1);

    margin-bottom:20px;

}

.contact-div3-title span{

    color:var(--color2);

}

.contact-div3-text{

    max-width:700px;

    margin:auto;

    color:#666;

    line-height:1.9;

    font-size:17px;

}

.contact-div3-map{

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.10);

}

.contact-div3-map iframe{

    width:100%;

    height:520px;

    border:0;

}

@media(max-width:991px){

.contact-div3{

    padding:80px 0;

}

.contact-div3-title{

    font-size:42px;

}

}

@media(max-width:576px){

.contact-div3{

    padding:60px 0;

}

.contact-div3-title{

    font-size:30px;

}

.contact-div3-map iframe{

    height:350px;

}

}


/*=========================================
GALLERY HERO
=========================================*/

/*=========================================
GALLERY HERO
=========================================*/

.gallery-div1{

    position:relative;

    overflow:hidden;

    padding:180px 0 100px;

    background:linear-gradient(135deg,#023f46 0%,#045862 55%,#0b6b77 100%);

}

/*=========================================
BACKGROUND DECORATION
=========================================*/

.gallery-div1::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    background:rgba(211,145,61,.08);

    top:-250px;

    right:-180px;

}

.gallery-div1::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(255,255,255,.04);

    bottom:-180px;

    left:-120px;

}

/*=========================================
DOT PATTERN
=========================================*/

.gallery-div1-pattern{

    position:absolute;

    top:70px;

    left:70px;

    width:180px;

    height:180px;

    background-image:
    radial-gradient(
        rgba(211,145,61,.65) 2px,
        transparent 2px
    );

    background-size:16px 16px;

    opacity:.45;

}

/*=========================================
CONTENT
=========================================*/

.gallery-div1-content{

    position:relative;

    z-index:10;

}

.gallery-div1-subtitle{

    display:inline-block;

    padding:10px 28px;

    background:rgba(211,145,61,.12);

    border:1px solid rgba(211,145,61,.25);

    border-radius:50px;

    color:var(--color2);

    font-size:15px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:28px;

}

.gallery-div1-title{

    font-family:'Playfair Display',serif;

    font-size:72px;

    font-weight:700;

    line-height:1.15;

    color:#fff;

    margin-bottom:28px;

}

.gallery-div1-title span{

    color:var(--color2);

}

.gallery-div1-text{

    max-width:860px;

    margin:auto;

    color:rgba(255,255,255,.88);

    font-size:19px;

    line-height:1.9;

}

/*=========================================
BUTTONS
=========================================*/

.gallery-div1-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.gallery-div1-btn1{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    background:var(--color2);

    color:#fff;

    padding:16px 38px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

    box-shadow:0 15px 35px rgba(211,145,61,.25);

}

.gallery-div1-btn1:hover{

    background:#be812f;

    color:#fff;

    transform:translateY(-5px);

}

.gallery-div1-btn2{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    border:2px solid rgba(255,255,255,.30);

    color:#fff;

    padding:16px 38px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.gallery-div1-btn2:hover{

    background:#fff;

    color:var(--color1);

}

/*=========================================
ANIMATION
=========================================*/

.gallery-div1-content{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.gallery-div1-title{

    font-size:60px;

}

}

@media(max-width:991px){

.gallery-div1{

    /* padding:110px 0; */

}

.gallery-div1-title{

    font-size:50px;

}

.gallery-div1-text{

    font-size:17px;

}

}

@media(max-width:767px){

.gallery-div1{

    /* padding:90px 0; */

}

.gallery-div1-pattern{

    display:none;

}

.gallery-div1-title{

    font-size:40px;

}

.gallery-div1-text{

    font-size:16px;

}

.gallery-div1-buttons{

    flex-direction:column;

}

.gallery-div1-btn1,

.gallery-div1-btn2{

    width:100%;

}

}

@media(max-width:576px){

.gallery-div1{

    /* padding:80px 0; */

}

.gallery-div1-title{

    font-size:34px;

}

.gallery-div1-subtitle{

    font-size:13px;

}

.gallery-div1-text{

    font-size:15px;

}

}

/*=========================================
GALLERY FILTER
=========================================*/

.gallery-div2{

    padding:100px 0 50px;

    background:#fff;

}

.gallery-div2-head{

    margin-bottom:50px;

}

.gallery-div2-subtitle{

    display:inline-block;

    padding:10px 26px;

    background:rgba(4,88,98,.08);

    border-radius:50px;

    color:var(--color2);

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

.gallery-div2-title{

    font-family:'Playfair Display',serif;

    font-size:54px;

    color:var(--color1);

    margin:25px 0 18px;

    font-weight:700;

}

.gallery-div2-title span{

    color:var(--color2);

}

.gallery-div2-text{

    max-width:760px;

    margin:auto;

    color:#666;

    font-size:17px;

    line-height:1.9;

}

.gallery-filter{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}

.gallery-filter button{

    border:none;

    background:#f5f5f5;

    padding:14px 30px;

    border-radius:50px;

    color:var(--color1);

    font-weight:600;

    transition:.35s;

}

.gallery-filter button:hover,

.gallery-filter button.active{

    background:var(--color2);

    color:#fff;

    box-shadow:0 10px 25px rgba(211,145,61,.25);

}

@media(max-width:991px){

.gallery-div2-title{

    font-size:42px;

}

}

@media(max-width:576px){

.gallery-div2{

    padding:70px 0 30px;

}

.gallery-div2-title{

    font-size:30px;

}

.gallery-div2-text{

    font-size:15px;

}

.gallery-filter{

    gap:10px;

}

.gallery-filter button{

    padding:12px 20px;

    font-size:14px;

}

}


/*=========================================
GALLERY GRID
=========================================*/

.gallery-div3{

    padding:20px 0 100px;

    background:#fff;

}

.gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    cursor:pointer;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.4s;

}

.gallery-card:hover{

    transform:translateY(-10px);

}

.gallery-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.6s;

}

.gallery-card:hover img{

    transform:scale(1.08);

}

.gallery-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(4,88,98,.15),
        rgba(4,88,98,.92)
    );

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:.4s;

}

.gallery-card:hover .gallery-overlay{

    opacity:1;

}

.gallery-overlay-content{

    text-align:center;

}

.gallery-overlay-content i{

    width:75px;

    height:75px;

    background:#fff;

    border-radius:50%;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:var(--color2);

    margin-bottom:18px;

}

.gallery-overlay-content h5{

    color:#fff;

    font-family:'Playfair Display',serif;

    font-size:26px;

}

@media(max-width:991px){

.gallery-card img{

    height:260px;

}

}

@media(max-width:576px){

.gallery-div3{

    padding-bottom:70px;

}

.gallery-card img{

    height:230px;

}

}

@media(max-width:1450px)
{
    .desktop-menu ul{gap: 20px;}
     .right-menu{justify-content: start;}
}

@media(max-width:1250px)
{
    .desktop-menu a{font-size: 12px; gap: 5px;}
    .about-section h2 {
  font-size: 50px}
  .about-btn {
  padding: 16px 25px;}

   
}

@media(max-width:991.8px)
{
    .about-content{text-align: center; max-width: 100%; margin-left: 0; padding-left: 0;}
    .about-section{text-align: center;}
    .about-img{margin-top: 20px;}
    .why-card{margin-bottom: 30px; height: auto;}
     .commitment-content{text-align: center;}
     .commitment-divider{margin-left: auto; margin-right: auto;}
}
@media(max-width:769px)
{
.menu-div1{background-position:right !important ;}
}