/*==================================================
    SLIDER
==================================================*/

.rt-hero-slider{
    position:relative;
}

/*==================================================
    SLIDES
==================================================*/

.rt-hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .5s ease;
}

.rt-hero-slide.active{
    position:relative;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    z-index:5;
}
/*==================================================
    HERO
==================================================*/

.rt-hero{
    position:relative;
    width:100%;
    min-height:620px;
    overflow: hidden;
}

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

.rt-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.58) 0%,
        rgba(0,0,0,.35) 45%,
        rgba(0,0,0,.08) 75%,
        rgba(0,0,0,0) 100%
    );

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

}

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

.rt-hero-bg{

    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    z-index:1;

}

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

.rt-hero .rt-container{

    position:relative;

    z-index:5;

    max-width:1320px;

    margin:auto;

    padding:0 25px;

}

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

.rt-hero-grid{

   display:grid;

    grid-template-columns:minmax(0,1.2fr) minmax(0,0.9fr);

    align-items:center;

    gap:40px;

    min-height:620px;

    padding:60px 0 35px;

}
/*==================================================
    LEFT CONTENT
==================================================*/

.rt-left{

display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    max-width:570px;

    min-width:0;


}

.rt-category{

    display:inline-flex;

    align-items:center;

    gap:10px;
    
     margin-top:15px;

    padding:10px 22px;

    border-radius:50px;

    background:#E30613;

    color:#fff;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:18px;

}

.rt-category i{

    color:#fff;

}

.rt-title{

     max-width:520px;

    margin:0 0 18px;

    color:#fff;

    font-size:42px;

    font-weight:800;

    line-height:1.18;


}

.rt-description{

 max-width:500px;

    margin-bottom:28px;

    color:#ffffff !important;

    font-size:18px;

    line-height:1.7;

    text-shadow:0 2px 8px rgba(0,0,0,.45);
}

.rt-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:220px;

    height:56px;

    border-radius:12px;

    background:#E30613;

    color:#fff;

    font-size:17px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.rt-button:hover{

    background:#c40512;

}

.rt-button::after{

    content:"→";

    margin-left:10px;

}
/*==================================================
    RIGHT CONTENT
==================================================*/

.rt-right{

     display:flex;

    justify-content:flex-end;

    align-items:center;

    min-width:0;

}

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

.rt-booking-card{

    width:100%;

    max-width:460px;

    background:#ffffff;

    border-radius:22px;

    padding:24px;

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

}

.rt-booking-card h2{

    display:flex;

    align-items:center;

    gap:12px;

    margin:0 0 12px;

    font-size:32px;

    font-weight:800;

    color:#111;

}

.rt-booking-card h2 i{

    color:#E30613;

}

.rt-booking-card p{

    margin:0 0 25px;

    color:#666;

    font-size:16px;

    line-height:1.6;

}

.rt-booking-body{

    width:100%;

}
/*==================================================
    HERO NAVIGATION
==================================================*/

.rt-hero-navigation{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:45px;

    padding-left:5px;

}

.rt-hero-prev,
.rt-hero-next{

     width:52px;

    height:52px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

.rt-hero-prev:hover,
.rt-hero-next:hover{

    background:#E30613;


}

.rt-hero-dots{

    display:flex;

    align-items:center;

    gap:12px;

}

.rt-hero-dots span{

    width:12px;

    height:12px;

    border-radius:50%;

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

    cursor:pointer;

    transition:.3s;

}

.rt-hero-dots span.active{

    width:40px;

    border-radius:30px;

    background:#E30613;

}
/*==================================================
    FLOATING CATEGORY SECTION
==================================================*/

.rt-category-section{

  position:relative;

    margin-top:-40px;

    z-index:20;

    padding-bottom:20px;

}

.rt-category-section .rt-container{

    max-width:1320px;

    margin:0 auto;

    padding:0 25px;

}

.rt-category-wrapper{

   display:grid;

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

    gap:18px;

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

    padding:24px;

    border-radius:24px;

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

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

    backdrop-filter:blur(18px);

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

}
/*==================================================
    CATEGORY CARD
==================================================*/

.rt-category-card{

  display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    min-height:170px;

    padding:20px 16px;

    border-radius:18px;

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

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

    box-shadow:0 8px 24px rgba(0,0,0,.04);

    text-decoration:none;

    transition:all .35s ease;

    backdrop-filter:blur(12px);

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

.rt-category-card:hover{

    background:#E30613;

    transform:translateY(-6px);

}
/*==================================================
    CATEGORY ICON
==================================================*/

.rt-category-icon{

    width:64px;
    height:64px;

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

    margin-bottom:16px;

    border-radius:50%;

    background:rgba(255,245,245,.82);

    color:#E30613;

    font-size:26px;

    transition:all .35s ease;
}
/*==================================================
    CATEGORY TITLE
==================================================*/

.rt-category-content h4{

    margin:0;

    color:#111;

    font-size:17px;

    font-weight:700;

    line-height:1.5;

    transition:.35s;

}

.rt-category-card:hover .rt-category-content h4{

    color:#fff;

}

.rt-category-card:hover .rt-category-icon{

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

    color:#fff;

}
/*==================================================
    TABLET RESPONSIVE
==================================================*/

@media (max-width:1024px){

    html,
    body{
        overflow-x:hidden;
    }

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

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

    .rt-hero .rt-container{
        padding:0 20px;
    }

    .rt-hero-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:40px;

        min-height:auto;

        padding:80px 0 60px;

    }

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

    .rt-left{

        width:100%;

        max-width:700px;

        margin:0 auto;

        align-items:center;

        text-align:center;

    }

    .rt-category{

        margin:0 auto 20px;

    }

    .rt-title{

        font-size:40px;

        line-height:1.2;

        max-width:100%;

    }

    .rt-description{

        max-width:100%;

        margin:0 auto 30px;

        font-size:18px;

        line-height:1.7;

    }

    .rt-button{

        margin:0 auto;

    }

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

    .rt-right{

        width:100%;

        justify-content:center;

    }

    .rt-booking-card{

        width:100%;

        max-width:650px;

        margin:0 auto;

    }

    /*==============================================
        FLOATING CATEGORIES
    ==============================================*/

    .rt-category-section{

        margin-top:0;

        padding:40px 0 60px;

    }

    .rt-category-section .rt-container{

        padding:0 20px;

    }

    .rt-category-wrapper{

        display:grid;

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

        gap:16px;

        padding:20px;

    }

    .rt-category-card{

        min-height:155px;

        padding:18px 14px;

    }

    .rt-category-icon{

        width:58px;

        height:58px;

        font-size:22px;

        margin-bottom:14px;

    }

    .rt-category-content h4{

        font-size:15px;

        line-height:1.4;

        text-align:center;

        margin:0;

    }

}

/*==================================================
    MOBILE RESPONSIVE (768px)
==================================================*/

@media (max-width:768px){

    html,
    body{
        overflow-x:hidden;
    }

    *{
        box-sizing:border-box;
    }

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

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

    .rt-hero .rt-container{
        padding:0 15px;
    }

    .rt-hero-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:30px;

        min-height:auto;

      padding:90px 0 40px;

    }

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

    .rt-left{

        width:100%;

        max-width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    .rt-category{

        margin:0 auto 16px;

        font-size:12px;

    }

    .rt-title{

        font-size:30px;

        line-height:1.2;

        max-width:100%;

    }

    .rt-description{

        font-size:16px;

        line-height:1.7;

        max-width:100%;

        margin:0 auto 22px;

    }

    .rt-button{

        width:200px;

        height:52px;

        margin:0 auto;

    }

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

    .rt-right{

        width:100%;

        display:flex;

        justify-content:center;

    }

    .rt-booking-card{

        width:100%;

        max-width:100%;

        padding:20px;

    }

    .rt-booking-card h2{

        font-size:30px;

    }

    /*==============================================
        FLOATING CATEGORIES
    ==============================================*/

    .rt-category-section{

        margin-top:0;

        padding:35px 0 45px;

    }

    .rt-category-section .rt-container{

        padding:0 15px;

    }

    .rt-category-wrapper{

        display:grid;

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

        gap:12px;

        padding:14px;

    }

    .rt-category-card{

        min-height:140px;

        padding:16px 12px;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        text-align:center;

    }

    .rt-category-icon{

        width:48px;

        height:48px;

        font-size:20px;

        margin-bottom:12px;

    }

    .rt-category-content{

        width:100%;

    }

    .rt-category-content h4{

        margin:0;

        font-size:14px;

        line-height:1.35;

        font-weight:700;

        text-align:center;

    }

}
/*==================================================
    SMALL MOBILE (480px)
==================================================*/

@media (max-width:480px){

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

    .rt-title{
        font-size:26px;
        line-height:1.2;
    }

    .rt-description{
        font-size:15px;
        line-height:1.6;
    }

    .rt-booking-card{
        padding:18px;
    }

    .rt-booking-card h2{
        font-size:28px;
    }

    /*==============================================
        FLOATING CATEGORIES
    ==============================================*/

    .rt-category-section{

        padding:30px 0 40px;

    }

    .rt-category-section .rt-container{

        padding:0 12px;

    }

    .rt-category-wrapper{

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

        gap:10px;

        padding:12px;

    }

    .rt-category-card{

        min-height:120px;

        padding:14px 10px;

    }

    .rt-category-icon{

        width:44px;

        height:44px;

        font-size:18px;

        margin-bottom:10px;

    }

    .rt-category-content h4{

       font-size:12px;

    line-height:1.35;

    margin:0;

    font-weight:700;

    }

}