:root {
    --bb-50: #f2f9fd;
    --bb-100: #e4f1fa;
    --bb-200: #c2e4f5;
    --bb-300: #8ccfed;
    --bb-400: #4fb5e1;
    --bb-500: #289ed1;
    --bb-600: #197eb0;
    --bb-700: #16658e;
    --bb-800: #165676;
    --bb-900: #174863;
    --bb-950: #102d41;

    --gg-50: #f1f9ec;
    --gg-100: #e0f1d6;
    --gg-200: #c4e4b2;
    --gg-300: #9dd284;
    --gg-400: #7bbe5d;
    --gg-500: #5ca33f;
    --gg-600: #478330;
    --gg-700: #386328;
    --gg-800: #2f5024;
    --gg-900: #2a4522;
    --gg-950: #13250e;

}

h1, h2, h3, h4, h5, h6 { font-family: "Playfair Display", serif;}
body { font-family: "DM Sans", sans-serif;     letter-spacing: -0.025em; line-height: 1.5; font-size: .875rem; font-weight: 500; color: var(--bb-950);}


.container { max-width: 1080px;} 


header { background: var(--bb-500);}
nav ul li a { color: #fff!important; padding: 10px 20px!important;}

.menu-call {display: flex; align-items: center; gap:10px;background: #fff;padding:5px 15px 5px 5px; border-radius: 100px; color: var(--bb-950) ; text-decoration: none; transition: all ease-out .2s;}
.menu-call:hover { background: var(--bb-100); transition: all ease-in .2s;}
.menu-call small { display: block; line-height: 1.4;}
.menu-call span {display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;}
.hero-section {
     background: url(../images/home-hero.webp) no-repeat center bottom;
     padding-top: 150px;
     padding-bottom: 150px;
     text-align: center;
     background-size: cover;
}
.hero-title { max-width: 600px; display: block;place-self: center;}
.hero-section p { color: #fff; font-size: 1.3rem; background: #0000005e; backdrop-filter: blur(12px); display: inline-block; padding:0px 10px; border-radius: 100px;}
.hero-btn { padding:10px 30px; display: inline-block; background: var(--gg-500); border-radius: 100px; color:#fff; text-decoration: none;}
.feature { text-align: center; max-width: 300px; margin: 0px auto;}
.feature h5 { margin:10px 0px;}


.dest-box {     border-radius: 16px;
    border: 1px solid #e0e0e0;
    overflow: hidden; background: #fff;}
.dest-inner { padding:10px 15px;}
.dest-inner span { font-size: 1rem; font-weight: 700; color: var(--gg-600);}

.offer-box { padding:10px; border:1px solid #e0e0e0; border-radius: 8px; display: flex; gap:15px;    justify-content: space-between;}
.offer-img {}
.offer-img img {}
.offer-dest { }
.dest-names {display: flex; gap:15px;}
.lr-icon {border:1px solid #e0e0e0; width: 24px; height:24px; display: flex; border-radius: 100px; align-items: center; justify-content: center;}
.offer-price {}
.price { color: var(--bb-600); font-weight: 700;}

.offer-box span {font-size: 1rem; font-weight: 700;}
.offer-dts { display: flex; gap:15px;}

.testimonials-bg { background: var(--gg-700);}

.hero-section h1 { color: #fff; }








.review-box { background: #fff; padding:10px; border-radius: 4px; width: 100%; min-height: 190px; } 
.rating-starts { max-width: 110px; margin-bottom: 10px; }

.review-box small { display: flex; align-items: center; gap:5px; opacity: .6;}



footer { background: var(--bb-950); color: #fff;}
footer h5 { font-size: 1.1rem; margin-bottom: 15px;}
footer ul {padding:0px;}
footer ul li {list-style: none; padding:1px 0px;}
footer ul li a { color: #ffffffcc; display: block; padding:5px 0px; text-decoration: none; display: flex; gap:10px;}
footer ul li a span { background: #ffffff21; padding:10px; display: flex; align-items: center; justify-content: center; border-radius: 100px;}
footer ul li a small { color: var(--bb-400);}

.copy-top { border-top:1px solid #ffffff3d;}

.title { font-size: 1.2rem; font-family: 'DM sans', san-serif; font-weight: 700;}


.contact-box { border:1px solid #00000028; padding:30px; border-radius: 16px; min-height: 210px; text-align: center;}
.contact-box div { background: #17486333; width:50px; height:50px; margin:0px auto; display: flex; align-items: center; justify-content: center; border-radius: 100px;;}
.contact-box small {background: var(--bb-200); padding:0px 5px; display: inline-block; margin:10px 0px; border-radius: 100px;}
.contact-box p {}




@media screen and (max-width:997px) {

    .menu-call { background: var(--bb-700); color: #fff;}
   
    .menu-trig {background: var(--bb-600); border:1px solid var(--bb-600); color: #fff; border-radius: 4px; padding: 10px;}
     .menu-list {padding:0px;}
      .menu-list li {list-style: none; padding:1px;}
       .menu-list li a{ padding:10px 0px;display: block; text-decoration: none; color: var(--bb-700); border-bottom: 1px solid var(--bb-500);}

       .hero-section { padding-top: 100px; padding-bottom: 100px; }
}