@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700;800&display=swap');

/* =========================================================
   VALPARAI TOURIST
   PREMIUM LIGHT NATURE THEME
========================================================= */

:root{
    --vt-green:#173d2d;
    --vt-green-2:#285640;
    --vt-dark:#10291f;
    --vt-deep:#18382b;

    --vt-gold:#b8944f;
    --vt-gold-light:#d8bd78;

    --vt-cream:#f5f2e9;
    --vt-cream-2:#eeeadf;

    --vt-sage:#edf3ee;
    --vt-sage-dark:#dce9df;

    --vt-text:#26372f;
    --vt-muted:#6c7771;

    --vt-border:#e5e1d6;
    --vt-white:#ffffff;
}


/* =========================================================
   BASIC
========================================================= */

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:"DM Sans",Arial,sans-serif;
    color:var(--vt-text);
    background:#fff;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none !important;
}

.vt-page{
    overflow:hidden;
}

.vt-container{
    width:min(1180px,calc(100% - 36px));
    margin:auto;
}


/* =========================================================
   HEADER
========================================================= */

.vt-header{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:50;

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

    border-bottom:1px solid rgba(20,55,40,.08);

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

    backdrop-filter:blur(12px);
}

.vt-nav{
    height:88px;

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

    gap:25px;
}

.vt-brand img{
    height:54px;
    width:auto;
}

.vt-menu{
    display:flex;
    align-items:center;

    gap:25px;

    margin:0;
    padding:0;

    list-style:none;
}

.vt-menu>li{
    position:relative;
}

.vt-menu a{
    color:#59615c;

    font-size:13px;
    font-weight:700;

    letter-spacing:1.8px;

    transition:.25s ease;
}

.vt-menu>li>a{
    display:block;
    padding:34px 0;
}

.vt-menu>li>a:hover{
    color:var(--vt-green);
}


/* Dropdown */

.vt-dropdown{
    position:absolute;

    top:72px;
    left:0;

    min-width:220px;

    padding:10px;

    background:#fff;

    border-radius:14px;

    border:1px solid var(--vt-border);

    box-shadow:
        0 20px 50px rgba(24,55,42,.12);

    opacity:0;
    visibility:hidden;

    transform:translateY(8px);

    transition:.25s ease;
}

.vt-dropdown a{
    display:block;

    color:#34453c;

    padding:11px 13px;

    border-radius:8px;

    letter-spacing:.5px;
}

.vt-dropdown a:hover{
    background:#f3f0e7;

    color:var(--vt-green);
}

.vt-menu li:hover .vt-dropdown{
    opacity:1;
    visibility:visible;
    transform:none;
}

.vt-mobile{
    display:none;

    color:var(--vt-green);

    font-size:27px;

    cursor:pointer;
}


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

.vt-hero{
    position:relative;

    min-height:760px;

    color:#fff;

    background:#10291f;
}

.vt-slide{
    position:absolute;

    inset:0;

    opacity:0;

    animation:vtFade 24s infinite;

    background-size:cover;

    background-position:center;
}

.vt-slide:nth-child(1){
    background-image:
        linear-gradient(
            90deg,
            rgba(5,27,18,.78),
            rgba(5,27,18,.25)
        ),
        url("images/valparai/koozhangal-river.jpg");

    animation-delay:0s;
}

.vt-slide:nth-child(2){
    background-image:
        linear-gradient(
            90deg,
            rgba(5,27,18,.72),
            rgba(5,27,18,.20)
        ),
        url("images/valparai/hairpin-bends.jpg");

    animation-delay:6s;
}

.vt-slide:nth-child(3){
    background-image:
        linear-gradient(
            90deg,
            rgba(5,27,18,.75),
            rgba(5,27,18,.22)
        ),
        url("images/valparai/kavars-mist.jpg");

    animation-delay:12s;
}

.vt-slide:nth-child(4){
    background-image:
        linear-gradient(
            90deg,
            rgba(5,27,18,.72),
            rgba(5,27,18,.20)
        ),
        url("images/valparai/sholayar-dam.jpg");

    animation-delay:18s;
}

@keyframes vtFade{

    0%,21%{
        opacity:1;
    }

    25%,96%{
        opacity:0;
    }

    100%{
        opacity:1;
    }
}

.vt-hero:after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:180px;

    background:
        linear-gradient(
            transparent,
            rgba(8,29,20,.75)
        );
}

.vt-hero-inner{
    position:relative;

    z-index:5;

    min-height:760px;

    display:flex;

    align-items:center;
}

.vt-hero-content{
    max-width:780px;

    padding-top:70px;
}

.vt-kicker{
    display:flex;

    align-items:center;

    gap:12px;

    color:#e4c97d;

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:12px;

    font-weight:700;
}

.vt-kicker:before{
    content:"";

    width:42px;

    height:1px;

    background:var(--vt-gold-light);
}

.vt-hero h1{
    font-family:"Playfair Display",serif;

    font-size:clamp(55px,8vw,96px);

    line-height:.93;

    margin:20px 0;

    color:#fff;

    font-weight:700;
}

.vt-hero h1 span{
    color:#dfc477;
}

.vt-hero p{
    font-size:18px;

    line-height:1.8;

    max-width:650px;

    color:#edf2ee;

    margin:0 0 30px;
}

.vt-buttons{
    display:flex;

    flex-wrap:wrap;

    gap:12px;
}

.vt-btn{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:50px;

    padding:0 25px;

    border-radius:50px;

    font-weight:700;

    font-size:13px;

    transition:.3s ease;
}

.vt-btn-gold{
    background:#d7bb75;

    color:#14291f !important;
}

.vt-btn-gold:hover{
    background:#fff;

    transform:translateY(-3px);
}

.vt-btn-outline{
    border:1px solid rgba(255,255,255,.65);

    color:#fff !important;
}

.vt-btn-outline:hover{
    background:#fff;

    color:#173d2d !important;
}

.vt-scroll{
    position:absolute;

    z-index:6;

    bottom:38px;

    right:0;

    color:#e1e5e2;

    font-size:10px;

    letter-spacing:3px;

    text-transform:uppercase;

    writing-mode:vertical-rl;
}


/* =========================================================
   FACTS
========================================================= */

.vt-facts{
    position:relative;

    z-index:10;

    margin-top:-65px;
}

.vt-facts-grid{
    display:grid;

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

    background:#fff;

    border-radius:20px;

    box-shadow:
        0 18px 55px rgba(25,55,42,.12);

    overflow:hidden;

    border:1px solid #eeeae0;
}

.vt-fact{
    text-align:center;

    padding:28px 15px;

    border-right:1px solid #ebe8df;
}

.vt-fact:last-child{
    border-right:0;
}

.vt-fact strong{
    display:block;

    font-family:"Playfair Display",serif;

    color:var(--vt-green);

    font-size:31px;
}

.vt-fact span{
    font-size:11px;

    text-transform:uppercase;

    letter-spacing:1.5px;

    color:#77827c;
}


/* =========================================================
   COMMON SECTIONS
========================================================= */

.vt-section{
    padding:100px 0;

    background:#fff;
}

.vt-dark{
    background:#f6f4ed !important;

    color:var(--vt-text) !important;
}

.vt-cream{
    background:#f1eee5 !important;
}

.vt-eyebrow{
    text-transform:uppercase;

    letter-spacing:3px;

    color:#a27c3b;

    font-size:11px;

    font-weight:700;

    margin-bottom:12px;
}

.vt-heading{
    max-width:780px;

    margin-bottom:48px;
}

.vt-heading h2{
    font-family:"Playfair Display",serif;

    font-size:clamp(38px,5vw,60px);

    line-height:1.05;

    margin:0 0 16px;

    color:var(--vt-green);
}

.vt-heading p{
    font-size:16px;

    line-height:1.8;

    color:var(--vt-muted);

    margin:0;
}


/* =========================================================
   WELCOME
========================================================= */

.vt-welcome{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:65px;

    align-items:center;
}

.vt-photo-large{
    min-height:500px;

    border-radius:25px;

    background-size:cover;

    background-position:center;

    position:relative;

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

    overflow:hidden;
}

.vt-photo-large:before{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 65%,
            rgba(0,0,0,.25)
        );
}

.vt-photo-large:after{
    content:"VALPARAI • 7TH HEAVEN";

    position:absolute;

    bottom:22px;

    left:22px;

    padding:9px 14px;

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

    border-radius:30px;

    color:#fff;

    font-size:10px;

    letter-spacing:2px;

    background:rgba(0,0,0,.22);

    backdrop-filter:blur(6px);
}

.vt-welcome h2{
    font-family:"Playfair Display",serif;

    font-size:48px;

    line-height:1.08;

    color:var(--vt-green);

    margin:0 0 20px;
}

.vt-welcome p{
    color:#65726b;

    font-size:16px;

    line-height:1.85;
}

.vt-note{
    border-left:4px solid var(--vt-gold);

    background:#f3f0e6;

    padding:18px 20px;

    margin-top:25px;

    font-weight:600;

    color:#34453c;

    border-radius:0 10px 10px 0;
}


/* =========================================================
   DISTANCE
========================================================= */

.vt-distance{
    display:grid;

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

    gap:14px;
}

.vt-distance-card{
    background:#fff;

    border:1px solid #e4e0d5;

    border-radius:15px;

    padding:21px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    transition:.3s ease;
}

.vt-distance-card:hover{
    transform:translateY(-5px);

    border-color:#c8a45d;

    box-shadow:
        0 14px 30px rgba(25,55,42,.08);
}

.vt-distance-card b{
    color:#26362f;
}

.vt-distance-card span{
    color:#9a7839;

    font-weight:800;
}


/* =========================================================
   JOURNEY
========================================================= */

.vt-journey{
    position:relative;
}

.vt-journey:before{
    content:"";

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:1px;

    background:#d5c49a;
}

.vt-stop{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:65px;

    align-items:center;

    margin-bottom:70px;

    position:relative;

    background:#fff;

    padding:22px;

    border-radius:24px;

    border:1px solid #e6e2d8;

    box-shadow:
        0 10px 35px rgba(25,55,42,.06);

    transition:.35s ease;
}

.vt-stop:hover{
    transform:translateY(-5px);

    box-shadow:
        0 20px 45px rgba(25,55,42,.10);

    border-color:#d8c79d;
}

.vt-stop:nth-child(even) .vt-stop-img{
    order:2;
}

.vt-stop:nth-child(even) .vt-stop-copy{
    order:1;
}

.vt-stop-img{
    height:350px;

    border-radius:19px;

    background-size:cover;

    background-position:center;

    box-shadow:none;

    overflow:hidden;
}

.vt-stop-copy{
    padding:15px 20px;
}

.vt-stop-copy h3{
    font-family:"Playfair Display",serif;

    font-size:35px;

    margin:7px 0 13px;

    color:var(--vt-green) !important;

    line-height:1.15;
}

.vt-stop-copy p{
    color:#69766f !important;

    margin:0;

    font-size:15px;

    line-height:1.85;
}

.vt-stop-num{
    font-size:11px;

    color:#a17d3d !important;

    text-transform:uppercase;

    letter-spacing:3px;

    font-weight:700;
}

.vt-dot{
    position:absolute;

    left:calc(50% - 7px);

    top:50%;

    width:14px;

    height:14px;

    background:#c9a45d;

    border:4px solid #f6f4ed;

    border-radius:50%;
}


/* =========================================================
   TOURIST PLACES
========================================================= */

.vt-places{
    display:grid;

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

    gap:20px;
}

.vt-place{
    height:340px;

    border-radius:20px;

    overflow:hidden;

    position:relative;

    background-size:cover;

    background-position:center;

    border:4px solid #fff;

    box-shadow:
        0 10px 30px rgba(25,55,42,.08);

    transition:.35s ease;
}

.vt-place:hover{
    transform:translateY(-7px);

    box-shadow:
        0 20px 45px rgba(25,55,42,.14);
}

.vt-place:after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            transparent 25%,
            rgba(0,0,0,.80)
        );
}

.vt-place-copy{
    position:absolute;

    z-index:2;

    left:22px;

    right:22px;

    bottom:20px;
}

.vt-place-copy small{
    color:#e2c675;

    font-weight:800;

    letter-spacing:2px;
}

.vt-place-copy h3{
    font-family:"Playfair Display",serif;

    color:#fff;

    font-size:26px;

    margin:4px 0;
}

.vt-place-copy p{
    font-size:12px;

    line-height:1.6;

    color:#e0e6e2;

    margin:0;
}


/* =========================================================
   WILDLIFE
   KEEP THIS SECTION DARK FOR CONTRAST
========================================================= */

.vt-wildlife{
    background:
        linear-gradient(
            90deg,
            rgba(6,31,21,.92),
            rgba(6,31,21,.55)
        ),
        url("images/valparai/valparai-view.jpg") center/cover;

    color:#fff;
}

.vt-wildlife h2{
    font-family:"Playfair Display",serif;

    font-size:55px;

    line-height:1;

    color:#fff;

    max-width:650px;

    margin:0 0 20px;
}

.vt-wildlife p{
    max-width:760px;

    color:#d0d8d3;

    font-size:16px;

    line-height:1.8;
}

.vt-tags{
    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin-top:25px;
}

.vt-tag{
    border:1px solid rgba(255,255,255,.25);

    border-radius:30px;

    padding:9px 14px;

    color:#fff;

    font-size:12px;

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

    backdrop-filter:blur(5px);
}


/* =========================================================
   ATHIRAPPILLY
========================================================= */

.vt-adventure{
    background:#eaf1eb !important;

    color:var(--vt-text) !important;
}

.vt-adventure-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;
}

.vt-adventure-image{
    height:480px;

    border-radius:24px;

    background:
        url("images/valparai/sholayar-dam.jpg")
        center/cover;

    box-shadow:
        0 20px 45px rgba(25,55,42,.12);
}

.vt-adventure h2{
    font-family:"Playfair Display",serif;

    font-size:52px;

    color:var(--vt-green) !important;

    line-height:1.02;

    margin:0 0 18px;
}

.vt-adventure p{
    color:#66736b !important;

    line-height:1.85;
}

.vt-route{
    display:grid;

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

    gap:10px;

    align-items:center;
}

.vt-route-item{
    padding:18px 12px;

    text-align:center;

    border:1px solid #d9d8cd;

    border-radius:13px;

    color:var(--vt-green) !important;

    background:#fff;

    box-shadow:
        0 8px 20px rgba(25,55,42,.05);
}

.vt-route-arrow{
    text-align:center;

    color:#b28a45;

    font-size:24px;
}


/* =========================================================
   FOUR DAY PLAN
========================================================= */

.vt-days{
    display:grid;

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

    gap:15px;
}

.vt-day{
    background:#fff !important;

    border-radius:18px;

    padding:28px;

    min-height:220px;

    color:var(--vt-text) !important;

    border:1px solid #e2ded3;

    box-shadow:
        0 10px 30px rgba(25,55,42,.06);

    transition:.3s ease;
}

.vt-day:hover{
    transform:translateY(-6px);

    border-color:#d2b975;

    box-shadow:
        0 18px 40px rgba(25,55,42,.10);
}

.vt-day small{
    color:#a17c3b !important;

    text-transform:uppercase;

    letter-spacing:2px;
}

.vt-day h3{
    font-family:"Playfair Display",serif;

    font-size:27px;

    margin:9px 0;

    color:var(--vt-green) !important;
}

.vt-day p{
    font-size:13px;

    line-height:1.7;

    color:#6c7771 !important;
}


/* =========================================================
   CTA
========================================================= */

.vt-cta{
    padding:100px 0;

    background:
        linear-gradient(
            135deg,
            #d6c084,
            #c5a85e
        );

    text-align:center;
}

.vt-cta h2{
    font-family:"Playfair Display",serif;

    font-size:clamp(40px,6vw,68px);

    line-height:1;

    color:#173225;

    margin:0 0 15px;
}

.vt-cta p{
    max-width:700px;

    margin:0 auto 28px;

    color:#3e4c44;

    line-height:1.8;
}


/* =========================================================
   FOOTER
========================================================= */

.vt-footer{
    background:#10291f;

    color:#adb9b2;

    padding:70px 0 20px;
}

.vt-footer-grid{
    display:grid;

    grid-template-columns:1.2fr 1fr 1fr;

    gap:45px;
}

.vt-footer img{
    height:54px;

    margin-bottom:20px;
}

.vt-footer h4{
    font-family:"Playfair Display",serif;

    color:#fff;

    font-size:22px;

    margin:0 0 16px;
}

.vt-footer p{
    font-size:13px;

    line-height:1.8;
}

.vt-footer a{
    color:#d5bb79;
}

.vt-footer a:hover{
    color:#fff;
}

.vt-copy{
    border-top:1px solid rgba(255,255,255,.12);

    margin-top:45px;

    padding-top:18px;

    text-align:center;

    font-size:12px;
}


/* =========================================================
   SCROLL TO TOP
========================================================= */

.vt-page .scroll-to-top,
.vt-page .toTop{
    background:#d5aa48 !important;

    color:#fff !important;

    border-radius:50% !important;
}


/* =========================================================
   SELECTION
========================================================= */

::selection{
    background:#c9a45d;

    color:#fff;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media(max-width:1100px){

    .vt-menu{
        gap:17px;
    }

    .vt-menu a{
        font-size:11px;

        letter-spacing:1.2px;
    }

    .vt-welcome{
        gap:40px;
    }

    .vt-stop{
        gap:35px;
    }
}


/* =========================================================
   RESPONSIVE - 991px
========================================================= */

@media(max-width:991px){

    .vt-menu{
        gap:13px;
    }

    .vt-menu>li>a{
        font-size:10px;
    }

    .vt-facts-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .vt-distance,
    .vt-places,
    .vt-days{
        grid-template-columns:repeat(2,1fr);
    }

    .vt-welcome,
    .vt-adventure-grid{
        grid-template-columns:1fr;

        gap:35px;
    }

    .vt-route{
        grid-template-columns:1fr;
    }

    .vt-route-arrow{
        display:none;
    }

    .vt-adventure-image{
        height:400px;
    }

    .vt-journey:before{
        display:none;
    }

    .vt-dot{
        display:none;
    }

    .vt-stop{
        grid-template-columns:1fr;

        gap:25px;

        padding:18px;
    }

    .vt-stop:nth-child(even) .vt-stop-img,
    .vt-stop:nth-child(even) .vt-stop-copy{
        order:initial;
    }

    .vt-stop-copy{
        padding:10px;
    }
}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media(max-width:767px){

    .vt-header{
        position:absolute;

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

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

    .vt-nav{
        height:72px;
    }

    .vt-brand img{
        height:44px;
    }

    .vt-menu{
        display:none;
    }

    .vt-mobile{
        display:block;
    }

    .vt-hero,
    .vt-hero-inner{
        min-height:650px;
    }

    .vt-hero-content{
        padding-top:50px;
    }

    .vt-hero h1{
        font-size:54px;
    }

    .vt-hero p{
        font-size:15px;

        line-height:1.7;
    }

    .vt-scroll{
        display:none;
    }

    .vt-facts{
        margin-top:-40px;
    }

    .vt-facts-grid{
        grid-template-columns:repeat(2,1fr);

        border-radius:15px;
    }

    .vt-fact{
        padding:20px 8px;
    }

    .vt-fact strong{
        font-size:24px;
    }

    .vt-fact span{
        font-size:9px;
    }

    .vt-section{
        padding:70px 0;
    }

    .vt-distance,
    .vt-places,
    .vt-days,
    .vt-footer-grid{
        grid-template-columns:1fr;
    }

    .vt-welcome h2,
    .vt-adventure h2{
        font-size:39px;
    }

    .vt-photo-large{
        min-height:360px;
    }

    .vt-stop{
        margin-bottom:35px;

        border-radius:18px;
    }

    .vt-stop-img{
        height:275px;

        border-radius:15px;
    }

    .vt-stop-copy h3{
        font-size:28px;
    }

    .vt-stop-copy p{
        font-size:14px;

        line-height:1.75;
    }

    .vt-wildlife h2{
        font-size:43px;
    }

    .vt-place{
        height:300px;
    }

    .vt-adventure-image{
        height:320px;
    }

    .vt-cta{
        padding:75px 0;
    }

    .vt-cta h2{
        font-size:43px;
    }

    .vt-footer{
        padding-top:55px;
    }

}


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

@media(max-width:480px){

    .vt-container{
        width:calc(100% - 28px);
    }

    .vt-hero h1{
        font-size:46px;
    }

    .vt-hero p{
        font-size:14px;
    }

    .vt-btn{
        width:100%;

        padding:0 18px;
    }

    .vt-fact strong{
        font-size:21px;
    }

    .vt-heading h2{
        font-size:38px;
    }

    .vt-welcome h2{
        font-size:36px;
    }

    .vt-photo-large{
        min-height:300px;
    }

    .vt-stop{
        padding:12px;
    }

    .vt-stop-img{
        height:235px;
    }

    .vt-stop-copy h3{
        font-size:25px;
    }

    .vt-wildlife h2{
        font-size:38px;
    }

    .vt-place{
        height:280px;
    }

    .vt-adventure-image{
        height:270px;
    }

    .vt-day{
        min-height:auto;
    }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    .vt-slide{
        animation:none;
        opacity:1;
    }

    .vt-slide:not(:first-child){
        display:none;
    }

    .vt-stop,
    .vt-place,
    .vt-day,
    .vt-distance-card{
        transition:none;
    }
}