/* =====================================================
   KING'S TOUR & TRAVELS
   PREMIUM HEADER 2026
   ===================================================== */

:root{

    --ktt-dark:#050816;
    --ktt-dark-2:#0f172a;

    --ktt-blue:#2563eb;
    --ktt-cyan:#06b6d4;

    --ktt-purple:#7c3aed;
    --ktt-pink:#ec4899;

    --ktt-green:#22c55e;

    --ktt-white:#ffffff;

    --ktt-border:rgba(255,255,255,.08);

}

/* =====================================================
   RESET
   ===================================================== */

.ktt-header *,
.ktt-header *:before,
.ktt-header *:after{

    box-sizing:border-box;

}

.ktt-header{

    position:sticky;

    top:0;

    z-index:999999;

    width:100%;

    font-family:inherit;

}

.ktt-container{

    width:100%;

    max-width:1600px;

    margin:auto;

    padding-left:24px;
    padding-right:24px;

}

/* =====================================================
   TOPBAR
   ===================================================== */

.ktt-topbar{

    background:
    linear-gradient(
        -45deg,
        #2563eb,
        #06b6d4,
        #7c3aed,
        #ec4899
    );

    background-size:400% 400%;

    animation:kttGradient 10s ease infinite;

}

.ktt-topbar .ktt-container{

    height:42px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.ktt-topbar-left,
.ktt-topbar-right{

    display:flex;

    align-items:center;

    gap:15px;

}

.ktt-topbar span,
.ktt-topbar a{

    color:#fff;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

}

.ktt-separator{

    width:6px;
    height:6px;

    border-radius:50%;

    background:#fff;

}

/* =====================================================
   NAVBAR
   ===================================================== */

.ktt-navbar{

    background:
    linear-gradient(
        135deg,
        rgba(5,8,22,.96),
        rgba(15,23,42,.96)
    );

    backdrop-filter:blur(18px);

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

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

}

.ktt-navbar .ktt-container{

    min-height:88px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

}

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

.ktt-logo-area{

    flex-shrink:0;

}

.ktt-logo-link{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

}

.ktt-logo{

    width:72px;
    height:72px;

    object-fit:contain;

    display:block;

}

.ktt-brand-title{

    color:#fff;

    font-size:24px;

    font-weight:800;

    line-height:1.2;

}

.ktt-brand-subtitle{

    color:#94a3b8;

    font-size:13px;

    margin-top:4px;

}

/* =====================================================
   MENU
   ===================================================== */

.ktt-navigation{

    flex:1;

    display:flex;

    justify-content:center;

}

.ktt-menu{

    display:flex;

    align-items:center;

    gap:30px;

    margin:0;

    padding:0;

    list-style:none;

}

.ktt-menu li{

    margin:0;

}

.ktt-menu a{

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    position:relative;

    transition:.3s;

    white-space:nowrap;

}

.ktt-menu a:hover{

    color:#06b6d4;

}

.ktt-menu a:after{

    content:'';

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    border-radius:20px;

    background:
    linear-gradient(
        90deg,
        #06b6d4,
        #ec4899
    );

    transition:.3s;

}

.ktt-menu a:hover:after{

    width:100%;

}

/* =====================================================
   SEARCH
   ===================================================== */

.ktt-search-area{

    width:320px;

}

.ktt-search-area form{

    display:flex;

}

.ktt-search-area input{

    width:100%;

    height:48px;

    border:none;

    outline:none;

    color:#fff;

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

    padding:0 16px;

    border-radius:14px 0 0 14px;

}

.ktt-search-area input::placeholder{

    color:#cbd5e1;

}

.ktt-search-area button{

    border:none;

    cursor:pointer;

    color:#fff;

    font-weight:700;

    padding:0 18px;

    border-radius:0 14px 14px 0;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

}

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

.ktt-actions{

    display:flex;

    align-items:center;

    gap:10px;

}

.ktt-call-btn{

    color:#fff;

    text-decoration:none;

    font-weight:700;

    padding:13px 18px;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );

    transition:.3s;

}

.ktt-whatsapp-btn{

    color:#fff;

    text-decoration:none;

    font-weight:700;

    padding:13px 18px;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    transition:.3s;

}

.ktt-call-btn:hover,
.ktt-whatsapp-btn:hover{

    transform:translateY(-3px);

}

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

.ktt-mobile-actions{

    display:none;

    align-items:center;

    gap:10px;

}

.ktt-mobile-call,
.ktt-mobile-whatsapp{

    width:42px;
    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    border-radius:12px;

    color:#fff;

}

.ktt-mobile-call{

    background:#2563eb;

}

.ktt-mobile-whatsapp{

    background:#22c55e;

}

.ktt-mobile-toggle{

    width:46px;
    height:46px;

    border:none;

    cursor:pointer;

    border-radius:12px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

}

.ktt-mobile-toggle span{

    display:block;

    width:22px;
    height:2px;

    background:#fff;

    margin:5px auto;

}

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

.ktt-mobile-menu{

    display:none;

    background:#0f172a;

}

.ktt-mobile-menu.active{

    display:block;

}

.ktt-mobile-header{

    padding:25px;

    text-align:center;

}

.ktt-mobile-header img{

    width:80px;

}

.ktt-mobile-header h3{

    color:#fff;

    margin:12px 0 4px;

}

.ktt-mobile-header p{

    color:#94a3b8;

    margin:0;

}

.ktt-mobile-search{

    padding:0 20px 20px;

}

.ktt-mobile-search input{

    width:100%;

    height:50px;

    border:none;

    outline:none;

    border-radius:12px;

    padding:0 15px;

}

.ktt-mobile-nav{

    list-style:none;

    margin:0;

    padding:0 20px;

}

.ktt-mobile-nav li{

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

}

.ktt-mobile-nav a{

    display:block;

    color:#fff;

    text-decoration:none;

    padding:14px 0;

}

.ktt-mobile-buttons{

    padding:20px;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.ktt-mobile-book-call,
.ktt-mobile-book-whatsapp{

    text-decoration:none;

    color:#fff;

    text-align:center;

    padding:14px;

    border-radius:12px;

    font-weight:700;

}

.ktt-mobile-book-call{

    background:#2563eb;

}

.ktt-mobile-book-whatsapp{

    background:#22c55e;

}

.ktt-mobile-locations{

    padding:20px;

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.ktt-mobile-locations span{

    color:#fff;

    font-size:12px;

    padding:8px 12px;

    border-radius:999px;

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

}

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

@keyframes kttGradient{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}

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

@media(max-width:1200px){

    .ktt-search-area{

        width:240px;

    }

    .ktt-menu{

        gap:18px;

    }

}

@media(max-width:991px){

    .ktt-navigation,
    .ktt-search-area,
    .ktt-actions{

        display:none;

    }

    .ktt-mobile-actions{

        display:flex;

    }

}

@media(max-width:768px){

    .ktt-topbar{

        display:none;

    }

    .ktt-logo{

        width:56px;
        height:56px;

    }

    .ktt-brand-title{

        font-size:18px;

    }

    .ktt-brand-subtitle{

        font-size:11px;

    }

    .ktt-navbar .ktt-container{

        min-height:76px;

    }

}