/* =====================================================
   SEQUENT TOURS & TRAVELS
   FILE        : home.css
   VERSION     : 3.0
   AUTHOR      : Sequent Travels
   DESCRIPTION : Home Page Hero, Featured Vehicles,
                 Why Choose Us and Reviews
===================================================== */


/* =====================================================
   01. HOME HERO
===================================================== */

.hero{
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#FAFAF8,#FFFFFF);
}

.hero::before{
    content:"";
    position:absolute;
    top:-250px;
    left:-250px;
    width:600px;
    height:600px;
    background:rgba(217,119,6,.08);
    border-radius:50%;
    pointer-events:none;
}

.hero::after{
    content:"";
    position:absolute;
    right:-300px;
    bottom:-300px;
    width:700px;
    height:700px;
    background:rgba(217,119,6,.06);
    border-radius:50%;
    pointer-events:none;
}


/* =====================================================
   01.1 HERO LAYOUT
===================================================== */

.hero-overlay{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:30px;
    padding:140px clamp(55px,6vw,150px) 80px;
    position:relative;
    z-index:2;
}

.hero-content{
    width:100%;
    max-width:620px;
    min-width:0;
    justify-self:center;
}

.hero h1{
    margin:0 0 24px;
    color:#222222;
    font-size:58px;
    font-weight:500;
    line-height:1.1;
}

.hero p{
    margin:0;
    color:#6B7280;
    font-size:17px;
    line-height:1.9;
}

.hero-explore{
    margin-top:34px;
    padding:16px 28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:#D97706;
    color:#FFFFFF;
    border-radius:16px;
    font-size:14px;
    font-weight:600;
    line-height:1.4;
    text-decoration:none;
    transition:background .3s ease,transform .3s ease;
}

.hero-explore:hover{
    background:#E38B2C;
    color:#FFFFFF;
    transform:translateY(-2px);
}

.hero-explore span{
    font-size:18px;
    line-height:1;
}

.hero-vehicle{
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-vehicle img{
    width:100%;
    max-width:720px;
    height:auto;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 28px 60px rgba(0,0,0,.12));
}


/* =====================================================
   01.2 HERO - TABLET
===================================================== */

@media (min-width:769px) and (max-width:1024px){

    .hero{
        min-height:auto;
        height:auto;
        align-items:flex-start;
    }

    .hero-overlay{
        min-height:680px;
        padding:150px 50px 80px;
        gap:40px;
    }

    .hero h1{
        font-size:40px;
    }

    .hero p{
        font-size:16px;
    }

    .hero-vehicle img{
        max-width:520px;
    }

}


/* =====================================================
   01.3 HERO - MOBILE
===================================================== */

@media (max-width:768px){

    .hero{
        min-height:auto;
        height:auto;
    }

    .hero-overlay{
        grid-template-columns:1fr;
        gap:42px;
        padding:110px 24px 55px;
        text-align:center;
    }

    .hero-content{
        max-width:620px;
        margin:0 auto;
    }

    .hero h1{
        font-size:40px;
    }

    .hero p{
        font-size:16px;
        line-height:1.8;
    }

    .hero-vehicle{
        justify-content:center;
    }

    .hero-vehicle img{
        max-width:380px;
    }

}

@media (max-width:430px){

    .hero-overlay{
        gap:28px;
        padding:100px 20px 45px;
    }

    .hero h1{
        font-size:30px;
        line-height:1.2;
    }

    .hero p{
        font-size:15px;
        line-height:1.75;
    }

    .hero-explore{
        margin-top:28px;
        padding:14px 24px;
        border-radius:14px;
    }

    .hero-vehicle img{
        max-width:330px;
    }

}


/* =====================================================
   01.4 HERO - ULTRA WIDE
===================================================== */

@media (min-width:1600px){

    .hero-overlay{
        gap:40px;
        padding:140px clamp(90px,5.5vw,180px) 80px;
    }

    .hero-content{
        max-width:760px;
    }

    .hero h1{
        font-size:clamp(58px,3.1vw,76px);
        line-height:1.08;
    }

    .hero p{
        max-width:680px;
        font-size:clamp(17px,.9vw,21px);
        line-height:1.8;
    }

    .hero-explore{
        margin-top:36px;
        padding:17px 30px;
        font-size:15px;
    }

    .hero-vehicle img{
        max-width:clamp(720px,42vw,980px);
    }

}


/* =====================================================
   02. FEATURED VEHICLES
===================================================== */

.vehicles-section{
    width:100%;
    padding:100px 80px;
    background:#F7F6F3;
    overflow:hidden;
}

.section-header{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:42px;
}

.section-header h2{
    margin:0;
    color:#222222;
    font-size:34px;
    font-weight:500;
    line-height:1.3;
}

.vehicle-controls{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.view-all{
    color:#D97706;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    transition:opacity .3s ease;
}

.view-all:hover{
    opacity:.75;
}


/* =====================================================
   02.1 VEHICLE HORIZONTAL SCROLL
===================================================== */

.horizontal-scroll{
    width:100%;
    display:flex;
    gap:28px;
    padding-bottom:8px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
}

.horizontal-scroll::-webkit-scrollbar{
    display:none;
}


/* =====================================================
   02.2 VEHICLE CARD
===================================================== */

.travel-card{
    position:relative;
    min-width:calc((100% - 56px) / 3);
    max-width:calc((100% - 56px) / 3);
    flex:0 0 calc((100% - 56px) / 3);
    background:
    radial-gradient(
        circle at top left,
        #BFC3C9 0%,
        #E1E3E6 30%,
        #FAFAFA 62%
    );
    border:1px solid rgba(0,0,0,.06);
    border-radius:22px;
    box-shadow:0 10px 24px rgba(0,0,0,.04);
    overflow:hidden;
    scroll-snap-align:start;
    transition:transform .3s ease;
}

.travel-card::before{
    content:none;
    display:none;
}

.travel-card:hover{
    transform:translateY(-4px);
}


/* =====================================================
   02.3 VEHICLE IMAGE
===================================================== */

.travel-card > img{
    width:100%;
    height:250px;

    display:block;

    object-fit:contain;
    object-position:center;

    margin:0;
    padding:20px;

    background:transparent;
}

/* =====================================================
   02.4 VEHICLE CARD BODY
===================================================== */

.travel-card-body{
    position:relative;

    padding:24px;

    text-align:left;

    background:#FFFFFF;

    z-index:1;
}

.vehicle-price{
    width:100%;
    display:flex;
    align-items:baseline;
    justify-content:flex-end;
    gap:8px;
    margin-bottom:22px;
}

.vehicle-price small{
    color:#9CA3AF;
    font-size:11px;
    font-weight:600;
    line-height:1;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.vehicle-price span{
    color:#D97706;
    font-size:20px;
    font-weight:600;
    line-height:1;
}

.travel-card h3{
    margin:0 0 10px;
    color:#222222;
    font-size:22px;
    font-weight:500;
    line-height:1.4;
}

.travel-card p{
    margin:0;
    color:#6B7280;
    font-size:15px;
    line-height:1.6;
}


/* =====================================================
   02.5 VEHICLE CARD ACTIONS
===================================================== */

.card-actions{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:12px;
    margin-top:22px;
}

.travel-card .card-actions a{
    width:100%;
    min-width:0;
    min-height:46px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    line-height:1.3;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    transition:opacity .3s ease,transform .3s ease;
}

.travel-card .card-actions a:first-child{
    color:#D97706;
    background:#FFFFFF;
    border:1px solid #D97706;
}

.travel-card .card-actions a:last-child{
    color:#FFFFFF;
    background:#D97706;
    border:1px solid #D97706;
}

.travel-card .card-actions a:hover{
    opacity:.9;
    transform:translateY(-1px);
}


/* =====================================================
   02.6 FEATURED VEHICLES - TABLET
===================================================== */

@media (min-width:768px) and (max-width:1024px){

    .vehicles-section{
        padding:80px 50px;
    }

    .travel-card{
        min-width:calc((100% - 24px) / 2);
        max-width:calc((100% - 24px) / 2);
        flex-basis:calc((100% - 24px) / 2);
    }

    .travel-card > img{
        height:230px;
        padding:20px;
    }

}


/* =====================================================
   02.7 FEATURED VEHICLES - PHONE
===================================================== */

@media (max-width:767px){

    .vehicles-section{
        padding:70px 24px;
    }

    .section-header{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .travel-card{
        min-width:100%;
        max-width:100%;
        flex-basis:100%;
    }

    .travel-card > img{
        height:230px;
        padding:18px;
    }

}

@media (max-width:430px){

    .vehicles-section{
        padding:60px 20px;
    }

    .section-header h2{
        font-size:28px;
    }

    .travel-card > img{
        height:210px;
        padding:16px;
    }

    .travel-card-body{
        padding:22px;
    }

    .vehicle-price span{
        font-size:25px;
    }

    .travel-card h3{
        font-size:20px;
    }

    .card-actions{
        gap:8px;
    }

    .travel-card .card-actions a{
        min-height:44px;
        padding:11px 8px;
        font-size:13px;
    }

}


/* =====================================================
   03. WHY CHOOSE US
===================================================== */

.why-choose-section{
    width:100%;
    padding:110px 80px;
    background:#FFFFFF;
    overflow:hidden;
}

.why-choose-heading{
    width:100%;
    margin:0 auto 56px;
    text-align:center;
}

.why-choose-heading h2{
    margin:0 0 14px;
    color:#222222;
    font-size:34px;
    font-weight:500;
    line-height:1.3;
}

.why-choose-heading p{
    max-width:650px;
    margin:0 auto;
    color:#6B7280;
    font-size:16px;
    line-height:1.8;
}

.why-choose-grid{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
}

.why-card{
    min-width:0;
    padding:34px 28px;
    background:#FAFAF8;
    border:1px solid #F2F2F2;
    border-radius:22px;
    text-align:center;
    transition:transform .3s ease,box-shadow .3s ease;
}

.why-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(0,0,0,.05);
}

.why-card > i{
    width:62px;
    height:62px;
    margin:0 auto 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#FFF7ED;
    border-radius:18px;
    color:#D97706;
    font-size:28px;
    line-height:1;
}

.why-card h3{
    margin:0 0 12px;
    color:#222222;
    font-size:22px;
    font-weight:500;
    line-height:1.4;
}

.why-card p{
    margin:0;
    color:#6B7280;
    font-size:15px;
    line-height:1.7;
}

@media (max-width:1024px){

    .why-choose-section{
        padding:80px 50px;
    }

    .why-choose-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media (max-width:768px){

    .why-choose-section{
        padding:70px 24px;
    }

    .why-choose-heading{
        margin-bottom:44px;
    }

    .why-choose-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

}

@media (max-width:430px){

    .why-choose-section{
        padding:60px 20px;
    }

    .why-choose-heading{
        margin-bottom:38px;
    }

    .why-choose-heading h2{
        font-size:28px;
    }

    .why-choose-heading p{
        font-size:15px;
    }

    .why-card{
        padding:28px 22px;
    }

    .why-card > i{
        width:56px;
        height:56px;
        margin-bottom:20px;
        font-size:25px;
    }

    .why-card h3{
        font-size:20px;
    }

}


/* =====================================================
   04. HOME REVIEWS
===================================================== */

.reviews-section{
    width:100%;
    padding:110px 80px;
    background:#F7F6F3;
    overflow:hidden;
}

.reviews-heading{
    width:100%;
    max-width:760px;
    margin:0 auto 54px;
    text-align:center;
}

.reviews-heading h2{
    margin:0 0 14px;
    color:#222222;
    font-size:34px;
    font-weight:500;
    line-height:1.3;
}

.reviews-heading > p{
    margin:0 0 28px;
    color:#6B7280;
    font-size:16px;
    line-height:1.8;
}

.rating-summary{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
}

.rating-number{
    flex-shrink:0;
    color:#D97706;
    font-size:48px;
    font-weight:600;
    line-height:1;
}

.rating-details{
    min-width:0;
    text-align:left;
}

.rating-stars{
    margin-bottom:6px;
    color:#F59E0B;
    font-size:22px;
    line-height:1;
    letter-spacing:2px;
}

.rating-details p{
    margin:0;
    color:#6B7280;
    font-size:14px;
    line-height:1.5;
}

.reviews-grid{
    width:100%;
    max-width:1280px;
    margin:50px auto 0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.review-card{
    min-width:0;
    min-height:280px;
    padding:34px;
    background:#FFFFFF;
    border:1px solid #ECECEC;
    border-radius:22px;
    transition:transform .3s ease,box-shadow .3s ease;
}

.review-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(0,0,0,.06);
}

.review-card .review-stars{
    margin-bottom:22px;
    padding:8px 14px;
    display:inline-flex;
    background:#FFF6E6;
    border-radius:999px;
    color:#F59E0B;
    font-size:16px;
    line-height:1;
    letter-spacing:2px;
}

.review-card p{
    margin:0 0 22px;
    color:#6B7280;
    font-size:15px;
    line-height:1.8;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.review-card h4{
    margin:0;
    color:#222222;
    font-size:18px;
    font-weight:500;
    line-height:1.4;
}

.reviews-view-all{
    width:100%;
    max-width:1280px;
    margin:30px auto 0;
    display:flex;
    justify-content:flex-end;
}

.reviews-view-all a{
    color:#111827;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    transition:color .3s ease;
}

.reviews-view-all a:hover{
    color:#D97706;
}

@media (max-width:1024px){

    .reviews-section{
        padding:80px 50px;
    }

    .reviews-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media (max-width:768px){

    .reviews-section{
        padding:70px 24px;
    }

    .reviews-heading{
        margin-bottom:44px;
    }

    .reviews-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .review-card{
        min-height:0;
    }

}

@media (max-width:430px){

    .reviews-section{
        padding:60px 20px;
    }

    .reviews-heading h2{
        font-size:28px;
    }

    .reviews-heading > p{
        font-size:15px;
    }

    .rating-summary{
        gap:14px;
    }

    .rating-number{
        font-size:40px;
    }

    .rating-stars{
        font-size:19px;
    }

    .rating-details p{
        font-size:13px;
    }

    .review-card{
        padding:26px;
    }

    .reviews-view-all{
        justify-content:center;
    }

}


/* =====================================================
   09. FEATURED VEHICLE BUTTONS
===================================================== */

.travel-buttons{
    width:100%;

    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:12px;

    margin-top:18px;
}

.travel-card .travel-buttons a{
    width:100%;
    min-width:0;
    min-height:48px;

    padding:13px 14px;

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

    border-radius:14px;

    font-size:14px;
    font-weight:600;
    line-height:1.3;

    text-align:center;
    text-decoration:none;
    white-space:nowrap;

    transition:
        opacity .3s ease,
        transform .3s ease;
}


/* =====================================================
   09.1 VIEW DETAILS BUTTON
===================================================== */

.travel-card .travel-buttons .vehicle-view{
    background:#FFFFFF;

    color:#D97706;

    border:1px solid #D97706;
}


/* =====================================================
   09.2 BOOK NOW BUTTON
===================================================== */

.travel-card .travel-buttons .vehicle-book{
    background:#D97706;

    color:#FFFFFF;

    border:1px solid #D97706;
}


/* =====================================================
   09.3 BUTTON HOVER
===================================================== */

.travel-card .travel-buttons a:hover{
    opacity:.9;

    transform:translateY(-1px);
}


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

@media (max-width:430px){

    .travel-buttons{
        gap:8px;
    }

    .travel-card .travel-buttons a{
        min-height:44px;

        padding:11px 8px;

        font-size:13px;
    }

}