@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root{

    --primary-color:#65509f;
    --secondary-color:#e5e6e9;

    --dark:#0f172a;
    --dark-light:#1e293b;

    --light:#ffffff;
    --gray:#64748b;
    --border:#e2e8f0;

    --bg:#f4f7fb;
    --card:#ffffff;

    --primary-rgb:101,80,159;
    --secondary-rgb:229,230,233;

    --shadow-sm:0 2px 10px rgba(15,23,42,0.04);
    --shadow-md:0 12px 35px rgba(15,23,42,0.08);
    --shadow-lg:0 20px 45px rgba(15,23,42,0.12);

    --radius:28px;
}

/* =====================================================
   GLOBAL
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--dark);
    font-family:'Manrope',sans-serif;
    overflow-x:hidden;
    line-height:1.7;
    padding-top:100px;
}

a{
    text-decoration:none;
    color:inherit;
    transition:0.3s ease;
}

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

section{
    position:relative;
    margin:0;
}

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

header{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    background:rgba(255,255,255,0.88);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(226,232,240,0.7);
}

.header-inner{
    width:100%;
    max-width:1450px;
    margin:auto;
    padding:18px 5%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

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

.logomain{
    height:65px;
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.logomain img{
    width:150px;
    object-fit:contain;
    transition:0.3s ease;
}

.logomain img:hover{
    transform:scale(1.03);
}

/* =====================================================
   NAVIGATION
===================================================== */

nav{
    flex:1;
    display:flex;
    justify-content:center;
}

nav ul{
    display:flex;
    align-items:center;
    gap:10px;
    list-style:none;
}

nav ul li a{
    padding:12px 18px;
    border-radius:16px;
    font-size:15px;
    font-weight:700;
    color:var(--dark-light);
}

nav ul li a:hover{
    background:rgba(var(--primary-rgb),0.08);
    color:var(--primary-color);
}

/* =====================================================
   CHAT BUTTON
===================================================== */

.chatbutton{
    background: var(--primary-color);
    color:#fff !important;
    border-radius:16px;
    padding:13px 22px !important;
    box-shadow:0 10px 25px rgba(var(--primary-rgb),0.22);
}

.chatbutton:hover{
    transform:translateY(-2px);
    color:var(--primary-color) !important;
    border:1px solid var(--primary-color);
    background:#fff;
}

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

.header-right{
    display:flex;
    align-items:center;
    gap:15px;
}

/* =====================================================
   PHONE BUTTON
===================================================== */

.phone-btn{
    width:54px;
    height:54px;
    border-radius:18px;
    background:var(--primary-color);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 25px rgba(var(--primary-rgb),0.22);
    transition:0.3s ease;
}

.phone-btn:hover{
    transform:translateY(-3px) scale(1.04);
}

.phone-btn img{
    width:22px;
    height:22px;
    object-fit:contain;
    filter:brightness(0) invert(1);
}

/* =====================================================
   HAMBURGER
===================================================== */

#hamburger-icon{
    display:none;
    width:54px;
    height:54px;
    border-radius:18px;
    background:#fff;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    cursor:pointer;
    box-shadow:var(--shadow-md);
}

#hamburger-icon div{
    width:24px;
    height:2px;
    background:var(--dark);
    margin:3px 0;
    border-radius:20px;
    transition:0.3s ease;
}

.open .bar1{
    transform:rotate(-45deg) translate(-5px,5px);
}

.open .bar2{
    opacity:0;
}

.open .bar3{
    transform:rotate(45deg) translate(-5px,-5px);
}

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

.mobile-menu{
    position:fixed;
    top:92px;
    right:-100%;
    width:320px;
    height:calc(100vh - 92px);
    background:#ffffff;
    padding:30px;
    transition:0.35s ease;
    box-shadow:-10px 0 40px rgba(0,0,0,0.08);
    z-index:999;
    overflow-y:auto;
}

.mobile-menu.active{
    right:0;
}

.mobile-menu ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.mobile-menu ul li a{
    display:block;
    padding:16px 18px;
    border-radius:16px;
    background:#f8fafc;
    font-weight:700;
    color:var(--dark);
}

.mobile-menu ul li a:hover{
    background:rgba(var(--primary-rgb),0.08);
    color:var(--primary-color);
}

.mobile-chat-btn{
    background:var(--primary-color);
    color:#fff !important;
    text-align:center;
}

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

#bannermainhome{
    width:100%;
    padding:0;
    margin:0;
    overflow:hidden;
}

.bannerhome,
.home-slider{
    width:100%;
    height:520px;
    position:relative;
    overflow:hidden;
    border-radius:0;
    box-shadow:none;
}

.bannerhome img,
.home-slider img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.home-slider .slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 1s ease;
}

.home-slider .slide.active{
    opacity:1;
    z-index:2;
}

.bannerhome::after,
.home-slider .slide::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(15,23,42,0.55),
        rgba(15,23,42,0.15)
    );
}

/* =====================================================
   ABOUT SECTION
===================================================== */

#about-us{
    padding:80px 5%;
    background:#fff;
}

.about-content{
    text-align:center;
    margin-bottom:50px;
}

.about-title{
    font-size:42px;
    font-weight:800;
    text-align:center;
    margin:0 auto;
    line-height:1.2;
    letter-spacing:-0.5px;
    background:var(--primary-color);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    position:relative;
    display:inline-block;
}

.about-title::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:-12px;
    transform:translateX(-50%);
    width:60%;
    height:4px;
    border-radius:20px;
    background:var(--primary-color);
    box-shadow:0 8px 20px rgba(var(--primary-rgb),0.25);
}

.about-main{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    max-width:1200px;
    margin:0 auto;
}

.about-text p{
    font-size:17px;
    line-height:1.8;
    color:var(--gray);
    margin-bottom:25px;
}

.about-image-wrap img{
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:24px;
    float:right;
}

/* =====================================================
   SECTION TITLES
===================================================== */

.head,
.subcribehead{
    text-align:center;
    margin:40px 0;
}

.head h2,
.subcribehead h2{
    font-size:42px;
    font-weight:800;
    color:var(--dark);
    display:inline-block;
    position:relative;
}

.head h2::after,
.subcribehead h2::after{
    content:'';
    width:70%;
    height:5px;
    border-radius:30px;
    background:var(--primary-color);
    position:absolute;
    left:15%;
    bottom:-12px;
}

/* =====================================================
   RIDE PACKAGES
===================================================== */

.subcribe{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
    padding:20px 5% 90px;
    text-align:center;
}

.subcribecol1,
.subcribecol2{
    background:#fff;
    border-radius:30px;
    padding:40px 30px;
    box-shadow:var(--shadow-md);
    border:1px solid #eef2f7;
    transition:0.3s ease;
}

.subcribecol1:hover{
    transform:translateY(-8px);
}

.subcribe h2{
    margin-bottom:20px;
    font-size:28px;
}

.subcribe ul{
    list-style:none;
}

.subcribe ul li{
    padding:14px 0;
    border-bottom:1px solid var(--border);
    color:var(--gray);
}

.subcribeprice{
    margin:25px 0;
    font-size:34px;
    font-weight:800;
    color:var(--primary-color);
    text-align:center;
}
/* ================= MOST POPULAR PLAN ================= */

.subcribecol1{
    position: relative;
    transform: scale(1.05);
    border: 2px solid var(--primary-color);
    box-shadow: 0 15px 40px color-mix(in srgb, var(--primary-color) 25%, transparent);
    background: linear-gradient(180deg,#ffffff 0%, color-mix(in srgb, var(--primary-color) 6%, #f7f3ff) 100%);
    z-index: 2;
}

.subcribecol1::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 15%, transparent);
}

/* MOST POPULAR BADGE */

.textpop{
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: #fff;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary-color) 35%, transparent);
    text-transform: uppercase;
}

/* PRICE */

.subcribecol1 .subcribeprice{
    color: var(--primary-color);
    font-size: 42px;
    font-weight: 800;
}

/* BUTTON */

.subcribecol1 .btn{
    background: var(--primary-color);
    border: none;
    transition: 0.3s ease;
}

.subcribecol1 .btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

/* FEATURES */

.subcribecol1 .bottom-bar{
    font-weight: 600;
}

/* ================= DISCOUNT SECTION ================= */

.discount-section{
    margin-top: 70px;
    padding: 35px;
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        var(--primary-color) 0%,
        color-mix(in srgb, var(--primary-color) 70%, #8c73d6) 100%
    );
    color: #fff;
    text-align: center;
    box-shadow: 0 20px 40px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.discount-section h2{
    font-size: 38px;
    margin-bottom: 10px;
    font-weight: 800;
}

.discount-section p{
    font-size: 17px;
    opacity: .95;
    margin-bottom: 25px;
}

.discount-code{
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: rgba(255,255,255,0.15);
    border: 2px dashed color-mix(in srgb, var(--primary-color) 50%, #ffffff);
    padding: 18px 30px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.discount-code strong{
    font-size: 32px;
    letter-spacing: 2px;
    color: #fff;
}

.discount-save{
    display: block;
    margin-top: 10px;
    font-size: 15px;
    opacity: .9;
}

/* MOBILE */

@media(max-width:768px){

    .subcribecol1{
        transform: scale(1);
    }

    .discount-section{
        padding: 25px 20px;
    }

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

    .discount-code{
        flex-direction: column;
    }

}
/* =====================================================
   BUTTONS
===================================================== */

.subscribe,
.btn,
.servicebutton,
.hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 28px;
    border-radius:16px;
    border:none;
    background:var(--primary-color);
    color:#ffffff !important;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    transition:0.3s ease;
    box-shadow:0 10px 25px rgba(var(--primary-rgb),0.20);
}

.subscribe:hover,
.btn:hover,
.servicebutton:hover,
.hero-btn:hover{
    transform:translateY(-3px);
    filter:brightness(1.05);
}

.hero-btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 28px;
    border-radius:16px;
    border:2px solid #ffffff;
    background:transparent;
    color:#ffffff !important;
    font-weight:700;
    font-size:15px;
}

.hero-btn-outline:hover{
    background:#ffffff;
    color:var(--primary-color) !important;
}

button{
    background:var(--primary-color);
    color:#ffffff;
}

/* =====================================================
   FOCUS SECTION
===================================================== */

#focus-main{
    padding:40px 5% 70px;
}

.focus{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.focus-main1{
    background:#fff;
    padding:45px 30px;
    border-radius:32px;
    text-align:center;
    box-shadow:var(--shadow-md);
    transition:0.3s ease;
}

.focus-main1:hover{
    transform:translateY(-8px);
}

.focus-icon{
    width:115px;
    height:115px;
    margin:0 auto 28px;
    background:var(--primary-color);
    border-radius:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    box-shadow:0 5px 10px rgba(var(--primary-rgb),0.22);
}

.focus-icon img{
    width:90%;
    height:90%;
    object-fit:contain;
    filter:brightness(0) invert(1);
}

.focus-main1 h2{
    margin-bottom:10px;
    font-size:24px;
}

.focus-main1 p{
    color:var(--gray);
}

/* =====================================================
   SERVICES
===================================================== */

#servicehome{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
    padding:80px 5%;
}

.colservice1{
    background:#fff;
    border-radius:32px;
    overflow:hidden;
    box-shadow:var(--shadow-md);
    transition:0.3s ease;
}

.colservice1:hover{
    transform:translateY(-10px);
}

.colservice1 img{
    width:100%;
    height:260px;
    object-fit:cover;
}

.colservice1 h1{
    padding:28px 28px 10px;
    font-size:28px;
}

.colservice1 p{
    padding:0 28px 28px;
    color:var(--gray);
}

/* =====================================================
   FORMS
===================================================== */

.modern-input-group input:focus,
.modern-input-group select:focus,
.modern-input-group textarea:focus,
.jobsmain input:focus,
.jobsmain select:focus,
.jobsmain textarea:focus,
.form-group input:focus,
.form-group select:focus{
    outline:none;
    border-color:var(--primary-color);
    box-shadow:0 0 0 4px rgba(var(--primary-rgb),0.12);
}

/* =====================================================
   RATE PAGE
===================================================== */

.main-rate-body{
    padding:40px 20px;
    display:flex;
    justify-content:center;
    background:var(--bg);
}

.rate-card{
    width:100%;
    max-width:1100px;
    background:var(--card);
    border-radius:20px;
    padding:30px;
    box-shadow:var(--shadow-md);
    border:1px solid var(--border);
}

.rate-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
    flex-wrap:wrap;
    gap:15px;
}

.rate-title{
    margin:0;
    font-size:32px;
    font-weight:700;
    color:var(--primary-color);
}

.rate-subtitle{
    color:var(--gray);
    font-size:14px;
    margin-top:5px;
}

.rate-badge{
    background:color-mix(in srgb, var(--primary-color) 10%, #fff);
    color:var(--primary-color);
    padding:10px 16px;
    border-radius:12px;
    font-size:14px;
    font-weight:600;
    border:1px solid color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.table-wrapper{
    overflow-x:auto;
}

.rate-table{
    width:100%;
    border-collapse:collapse;
    min-width:700px;
}

.rate-table thead tr{
    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
}

.rate-table th{
    color:#fff;
    padding:16px;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
    border:none;
}

.rate-table td{
    padding:18px 16px;
    border-bottom:1px solid var(--border);
    font-size:15px;
    text-align:center;
    color:var(--dark-light);
}

.rate-table tbody tr{
    transition:0.2s ease;
}

.rate-table tbody tr:hover{
    background:color-mix(in srgb, var(--primary-color) 5%, #fff);
}

.lb-box{
    background:color-mix(in srgb, var(--primary-color) 10%, #fff);
    color:var(--primary-color);
    padding:8px 12px;
    border-radius:10px;
    font-weight:600;
    display:inline-block;
    min-width:70px;
    border:1px solid color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.price{
    font-weight:700;
    font-size:16px;
}

.base-rate{
    color:var(--dark-light);
}

.discount-rate{
    color:#28a745 !important;
}

.rate-info-box{
    background:#f7f5ff;
    padding:15px 18px;
    border-radius:12px;
    margin-bottom:20px;
    color:#444;
    font-size:14px;
    line-height:1.6;
}

.rate-info-box strong{
    color:inherit;
}

.rate-info-box .highlight{
    color:#28a745;
    font-weight:600;
}
@media(max-width:768px){

    .rate-card{
        padding:20px;
    }

    .rate-title{
        font-size:24px;
    }

    .rate-table th,
    .rate-table td{
        padding:14px 10px;
        font-size:13px;
    }

    .lb-box{
        min-width:auto;
    }
}

/* =====================================================
  BOOKING SUCCESS PAGE
===================================================== */
.success-wrap{
    max-width:950px;
    margin:40px auto;
    background:#fff;
    border-radius:28px;
    padding:40px;
    box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.success-top{
    text-align:center;
}

.success-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    background:#22c55e;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    font-size:42px;
    font-weight:bold;
}

.success-title{
    font-size:34px;
    margin-top:25px;
    color:#111;
    font-weight:800;
}

.success-sub{
    color:#666;
    margin-top:12px;
    font-size:15px;
    line-height:1.7;
}

.booking-id{
    margin-top:25px;
    display:inline-block;
    padding:12px 20px;
    border-radius:999px;
    background:color-mix(in srgb, var(--primary-color) 10%, #f4f0ff);
    color:var(--primary-color);
    font-weight:700;
    font-size:14px;
}

.info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:35px;
}

.info-card{
    background:#fafafa;
    border:1px solid #eee;
    border-radius:18px;
    padding:18px;
}

.info-card small{
    display:block;
    color:#777;
    margin-bottom:8px;
    font-size:12px;
}

.info-card strong{
    color:#111;
    font-size:15px;
}

.total-box{
    margin-top:25px;
    padding:24px;
    border-radius:22px;
    background:color-mix(in srgb, var(--primary-color) 10%, #f4f0ff);
    border:1px solid color-mix(in srgb, var(--primary-color) 18%, #e2d9ff);
    text-align:center;
}

.total-box small{
    display:block;
    color:#777;
    margin-bottom:10px;
}

.total-box h2{
    margin:0;
    color:var(--primary-color);
    font-size:38px;
}

.success-actions{
    margin-top:35px;
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
}

.success-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 26px;
    border-radius:16px;
    background:var(--primary-color);
    color:#fff;
    text-decoration:none;
    font-weight:700;
    min-width:180px;
}

.success-btn.secondary{
    background:#111;
}

.invoice-preview{
    margin-top:40px;
    border:1px solid #eee;
    border-radius:24px;
    overflow:hidden;
    background:#fff;
}

.invoice-preview iframe{
    width:100%;
    height:850px;
    border:none;
}

@media(max-width:768px){

    .success-wrap{
        padding:25px;
    }

    .info-grid{
        grid-template-columns:1fr;
    }
}
/* =====================================================
   JOBS PAGE
===================================================== */

.careerbanner{
    border-bottom:1px solid color-mix(in srgb, var(--primary-color) 15%, #b4b4b4);
    box-shadow:0 1px 5px rgba(0,0,0,0.08);
}

.jobslist{
    background:#fff;
    margin:30px;
    padding:30px;
    border-radius:10px;
    border-bottom:1px solid color-mix(in srgb, var(--primary-color) 12%, #e5e7eb);
    box-shadow:0 1px 3px rgba(0,0,0,0.06);
}

.jobslist h2{
    font-size:30px;
    color:var(--primary-color);
}

.jobslist button{
    padding:10px;
    margin:10px;
    border:none;
    border-radius:5px;
    background:var(--primary-color);
    color:#fff;
    transition:0.3s ease;
}

.jobslist button:hover{
    filter:brightness(1.05);
    transform:translateY(-2px);
}

.jobart{
    margin:30px !important;
}

.titlejob{
    background:#fff;
    margin:20px;
    padding:20px;
    border-radius:5px;
    text-align:center;
    border:1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    box-shadow:0 5px 20px color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.titlejob h1,
.titlejob h2{
    color:var(--primary-color);
}

.jobsmain{
    padding:90px 5%;
}

.jobs-upload{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}

.jobsmain form,
.jobinfo{
    background:#fff;
    border-radius:32px;
    padding:40px;
    box-shadow:0 12px 35px color-mix(in srgb, var(--primary-color) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.jobsmain input,
.jobsmain select,
.jobsmain textarea{
    width:100%;
    padding:16px;
    margin:12px 0;
    border-radius:16px;
    border:1px solid var(--border);
    background:#f8fafc;
    font-family:'Manrope',sans-serif;
    font-size:15px;
    transition:0.3s ease;
}

.jobsmain input:focus,
.jobsmain select:focus,
.jobsmain textarea:focus{
    outline:none;
    border-color:var(--primary-color);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.jobsmain button{
    border:none;
    background:var(--primary-color);
    color:#fff;
    padding:16px 28px;
    border-radius:16px;
    font-weight:700;
    cursor:pointer;
    transition:0.3s ease;
    box-shadow:0 10px 25px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.jobsmain button:hover{
    transform:translateY(-3px);
    filter:brightness(1.05);
}

/* =====================================================
   APPLY JOB PAGE
===================================================== */

.career-page{
    padding:80px 5%;
    background:color-mix(in srgb, var(--primary-color) 2%, #f8fafc);
}

.career-container{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:50px;
    align-items:start;
}

.career-info{
    position:sticky;
    top:120px;
}

.career-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:color-mix(in srgb, var(--primary-color) 10%, transparent);
    color:var(--primary-color);
    font-weight:700;
    margin-bottom:20px;
}

.career-info h1{
    font-size:44px;
    line-height:1.1;
    margin-bottom:25px;
    color:var(--primary-color);
}

.career-info p{
    color:var(--gray);
    font-size:17px;
    margin-bottom:35px;
}

.career-card{
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 20px 45px color-mix(in srgb, var(--primary-color) 12%, transparent);
    margin-bottom:30px;
}

.career-card img{
    width:100%;
    height:320px;
    object-fit:cover;
}

.career-list{
    background:#fff;
    border-radius:28px;
    padding:35px;
    box-shadow:0 12px 35px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.career-list h3{
    margin-bottom:20px;
    color:var(--primary-color);
}

.career-list ul{
    list-style:none;
}

.career-list ul li{
    padding:12px 0;
    border-bottom:1px solid color-mix(in srgb, var(--primary-color) 8%, #eef2f7);
    color:var(--gray);
}

.career-form-wrap{
    background:#fff;
    border-radius:32px;
    padding:45px;
    box-shadow:0 20px 45px color-mix(in srgb, var(--primary-color) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.career-form-header{
    margin-bottom:35px;
}

.career-form-header h2{
    font-size:38px;
    margin-bottom:10px;
    color:var(--primary-color);
}

.career-form-header p{
    color:var(--gray);
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.full-width{
    grid-column:1 / -1;
}

.form-group label{
    font-weight:700;
    margin-bottom:10px;
    font-size:14px;
    color:var(--primary-color);
}

.form-group input,
.form-group select{
    width:100%;
    padding:16px 18px;
    border-radius:16px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
    font-size:15px;
    font-family:'Manrope',sans-serif;
    transition:0.3s ease;
}

.form-group input:focus,
.form-group select:focus{
    outline:none;
    border-color:var(--primary-color);
    background:#fff;
    box-shadow:0 0 0 4px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.upload-box{
    border:2px dashed color-mix(in srgb, var(--primary-color) 20%, #dbe4f0);
    border-radius:22px;
    padding:30px;
    background:color-mix(in srgb, var(--primary-color) 2%, #f8fafc);
    text-align:center;
}

.upload-box input{
    background:none;
    border:none;
    padding:0;
}

.upload-box span{
    display:block;
    margin-top:12px;
    color:var(--gray);
    font-size:14px;
}

.career-buttons{
    display:flex;
    gap:15px;
    margin-top:35px;
}

.career-buttons input,
.career-buttons button{
    border:none;
    padding:16px 30px;
    border-radius:16px;
    font-weight:700;
    cursor:pointer;
    transition:0.3s ease;
}

.career-buttons input{
    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color:#fff;
    flex:1;
    box-shadow:0 10px 25px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.career-buttons input:hover{
    filter:brightness(1.05);
    transform:translateY(-2px);
}

.career-buttons button{
    background:color-mix(in srgb, var(--primary-color) 8%, #eef2f7);
    color:var(--primary-color);
}

.career-buttons button:hover{
    background:color-mix(in srgb, var(--primary-color) 15%, #dbe4f0);
}

#msg{
    margin-top:20px;
    color:var(--primary-color);
}

/* =====================================================
   LIVE CHAT PAGE
===================================================== */

.livechat-hero{
    position:relative;
    width:100%;
    min-height:250px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--dark) 92%, transparent),
            color-mix(in srgb, var(--primary-color) 82%, transparent)
        ),
        url('../img/chat.live.png');
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.livechat-hero-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at top right,
            color-mix(in srgb, var(--primary-color) 15%, transparent),
            transparent 40%
        );
    pointer-events:none;
}

.livechat-hero-content{
    position:relative;
    z-index:5;
    max-width:660px;
    padding:110px 5%;
    color:#fff;
}

.livechat-badge{
    display:inline-flex;
    align-items:center;
    padding:12px 20px;
    border-radius:50px;
    background:color-mix(in srgb, var(--primary-color) 18%, transparent);
    border:1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    backdrop-filter:blur(12px);
    font-size:14px;
    font-weight:700;
    margin-bottom:28px;
    color:#fff;
}

.livechat-hero-content h1{
    font-size:72px;
    line-height:1.05;
    margin-bottom:25px;
    font-weight:800;
}

.livechat-hero-content p{
    font-size:18px;
    line-height:1.8;
    max-width:650px;
    opacity:0.92;
}

.livechat-hero-buttons{
    display:flex;
    gap:18px;
    margin-top:40px;
    flex-wrap:wrap;
}

.livechat-btn,
.livechat-btn-outline{
    padding:16px 32px;
    border-radius:18px;
    font-weight:700;
    transition:0.3s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.livechat-btn{
    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color:#fff;
    box-shadow:0 15px 40px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.livechat-btn:hover{
    transform:translateY(-4px);
    filter:brightness(1.05);
}

.livechat-btn-outline{
    border:2px solid color-mix(in srgb, var(--primary-color) 45%, #fff);
    color:#fff;
}

.livechat-btn-outline:hover{
    background:#fff;
    color:var(--primary-color);
}

.modern-input-group select,
.modern-input-group textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid #e2e8f0;
    border-radius:10px;
    font-size:14px;
    outline:none;
    background:#fff;
    transition:0.2s ease;
}

.modern-input-group select:focus,
.modern-input-group textarea:focus{
    border-color:var(--primary-color);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent);
}

/* =====================================================
   FLOATING CHAT
===================================================== */

.floating-chat{
    position:fixed;
    right:0;
    bottom:0;
    width:450px;
    height:780px;
    background:#fff;
    border-radius:28px;
    box-shadow:0 20px 60px color-mix(in srgb, var(--primary-color) 18%, rgba(15,23,42,0.2));
    z-index:99999;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.chat-header,
.floating-chat-top{
    padding:18px 20px;
    background:var(--primary-color);
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#fff;
    font-weight:700;
    flex-shrink:0;
}

.chat-area{
    flex:1;
    overflow-y:auto;
}

.chat-header-modern{
    padding:14px;
    border-bottom:1px solid #e2e8f0;
    background:#fff;
    font-family:inherit;
}

.chat-title-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.chat-title{
    font-size:16px;
    font-weight:700;
    color:var(--primary-color);
}

.chat-status{
    font-size:12px;
    color:#22c55e;
    font-weight:600;
}

.chat-info-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
    margin-top:10px;
    font-size:12px;
}

.chat-info-item span{
    display:block;
    color:#94a3b8;
    font-size:11px;
}

.chat-info-item b{
    color:#111;
    font-size:12px;
}

.chat-user-row{
    display:flex;
    justify-content:space-between;
    margin-top:10px;
    font-size:12px;
}

.chat-user{
    padding:5px 8px;
    border-radius:8px;
    background:#f1f5f9;
}

.chat-user.customer{
    border-left:3px solid var(--primary-color);
}

.chat-name{
    font-size:11px;
    font-weight:600;
    margin-bottom:2px;
    line-height:1.1;
    opacity:0.8;
}

.chat-name.staff{
    color:#22c55e;
}

.chat-name.customer{
    color:#ffffff !important;
}

.chat-text{
    display:block;
    line-height:1.35;
    margin:0;
    padding:0;
}

.floating-chat.minimized{
    height:78px !important;
}

.floating-chat.minimized .chat-body{
    display:none !important;
}

.floating-agent{
    display:flex;
    align-items:center;
    gap:12px;
}

.floating-avatar{
    width:52px;
    height:52px;
    border-radius:16px;
    background:color-mix(in srgb, var(--primary-color) 22%, rgba(255,255,255,0.18));
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:800;
    color:#fff;
}

.floating-actions button{
    width:40px;
    height:40px;
    border:none;
    border-radius:12px;
    background:color-mix(in srgb, var(--primary-color) 18%, rgba(255,255,255,0.18));
    color:#fff;
    cursor:pointer;
    font-size:20px;
}

.chat-register{
    padding:22px;
    overflow-y:auto;
    flex:1;
    min-height:0;
}

.chat-register h3{
    margin-bottom:10px;
    color:var(--primary-color);
}

.chat-register p{
    color:#64748b;
    margin-bottom:18px;
}

.chat-register input{
    width:100%;
    margin-bottom:14px;
    padding:15px;
    border-radius:16px;
    border:1px solid #dbe3ee;
    background:#f8fafc;
}

.chat-register button{
    width:100%;
    border:none;
    padding:16px;
    border-radius:16px;
    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color:#fff;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 10px 25px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.chat-body{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
}

.chat-messages{
    flex:1;
    overflow-y:auto;
    padding:20px;
    background:color-mix(in srgb, var(--primary-color) 2%, #f8fafc);
    max-width:100%;
    display:flex;
    flex-direction:column;
    scroll-behavior:smooth;
    min-height:0;
    margin-bottom:12px;
}

.chat-message{
    display:flex;
    flex-direction:column;
    width:100%;
    margin-bottom:12px;
}

.chat-message.customer{
    align-items:flex-end;
}

.chat-message.staff{
    align-items:flex-start;
}

.chat-bubble{
    display:inline-block;
    width:fit-content;
    max-width:68%;
    padding:10px 14px;
    border-radius:14px;
    word-wrap:break-word;
    overflow-wrap:break-word;
    box-sizing:border-box;
    line-height:1.4;
}

.chat-message.customer .chat-bubble{
    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color:#fff;
    margin-left:auto;
    border-bottom-right-radius:6px;
}

.chat-message.staff .chat-bubble{
    background:#ffffff;
    color:#111827;
    margin-right:auto;
    border-bottom-left-radius:6px;
    box-shadow:0 5px 20px color-mix(in srgb, var(--primary-color) 8%, rgba(15,23,42,0.06));
    border:1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.chat-time{
    font-size:12px;
    margin-top:5px;
    color:#94a3b8;
}

.chat-input-row{
    border-top:1px solid color-mix(in srgb, var(--primary-color) 8%, #eef2f7);
    padding:14px 15px;
    display:flex;
    gap:12px;
    align-items:center;
    background:#fff;
    flex-shrink:0;
}

.chat-input-row textarea{
    flex:1;
    min-height:52px;
    max-height:110px;
    height:52px;
    border:none;
    background:#f8fafc;
    border-radius:18px;
    padding:14px 16px;
    resize:none;
    outline:none;
    font-size:14px;
    line-height:1.4;
    overflow-y:auto;
    box-sizing:border-box;
}

.chat-input-row textarea:focus{
    box-shadow:0 0 0 4px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.chat-upload{
    width:52px;
    height:52px;
    min-width:52px;
    border-radius:16px;
    background:color-mix(in srgb, var(--primary-color) 10%, #eef2ff);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    color:var(--primary-color);
}

.chat-send-btn{
    width:52px;
    height:52px;
    min-width:52px;
    border:none;
    border-radius:16px;
    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color:#fff;
    font-size:20px;
    cursor:pointer;
    flex-shrink:0;
    box-shadow:0 10px 25px color-mix(in srgb, var(--primary-color) 18%, transparent);
}
.chat-header,
.floating-chat-top,
.chat-register button,
.chat-send-btn,
.chat-message.customer .chat-bubble{
    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
}

.chat-user.customer{
    border-left:3px solid var(--primary-color);
}

.send-btn{
    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color:#fff;
    box-shadow:0 15px 30px rgba(var(--primary-rgb),0.18);
}

.contact-icon{
    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
}

/* =====================================================
   CONTACT SECTION
===================================================== */

.contact-modern-section{
    padding:100px 5%;
    background:color-mix(in srgb, var(--primary-color) 2%, #f8fafc);
}

.contact-modern-wrap{
    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    gap:40px;
    align-items:start;
}

/* =====================================================
   LEFT CARD
===================================================== */

.contact-left-card{
    background:linear-gradient(
        135deg,
        color-mix(in srgb, var(--dark) 96%, transparent),
        color-mix(in srgb, var(--primary-color) 78%, transparent)
    );
    color:#fff;
    border-radius:36px;
    padding:45px;
    position:relative;
    overflow:hidden;
    box-shadow:0 20px 50px color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.contact-left-card::before{
    content:'';
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:color-mix(in srgb, var(--primary-color) 12%, rgba(255,255,255,0.04));
    top:-140px;
    right:-140px;
}

.contact-card-top{
    position:relative;
    z-index:2;
}

.contact-mini{
    display:inline-flex;
    padding:10px 18px;
    border-radius:50px;
    background:color-mix(in srgb, var(--primary-color) 15%, rgba(255,255,255,0.1));
    font-size:13px;
    font-weight:700;
    margin-bottom:22px;
    color:#fff;
}

.form-mini{
    background:color-mix(in srgb, var(--primary-color) 10%, transparent);
    color:var(--primary-color);
}

.contact-left-card h2{
    font-size:46px;
    line-height:1.1;
    margin-bottom:18px;
}

.contact-left-card p{
    color:rgba(255,255,255,0.78);
    line-height:1.8;
}

/* =====================================================
   CONTACT INFO
===================================================== */

.contact-info-list{
    margin-top:45px;
    display:grid;
    gap:22px;
}

.contact-info-box{
    display:flex;
    align-items:center;
    gap:18px;
    padding:20px;
    border-radius:24px;
    background:color-mix(in srgb, var(--primary-color) 8%, rgba(255,255,255,0.05));
    border:1px solid color-mix(in srgb, var(--primary-color) 10%, rgba(255,255,255,0.05));
    backdrop-filter:blur(10px);
}

.contact-icon{
    width:64px;
    height:64px;
    border-radius:20px;
    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    box-shadow:0 10px 25px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.contact-icon img{
    width:28px;
    height:28px;
    object-fit:contain;
    filter:brightness(0) invert(1);
}

.contact-info-box h4{
    font-size:17px;
    margin-bottom:5px;
    color:#fff;
}

.contact-info-box span{
    color:rgba(255,255,255,0.75);
    font-size:15px;
}

/* =====================================================
   SOCIAL
===================================================== */

.social-modern{
    margin-top:45px;
}

.social-modern h4{
    margin-bottom:20px;
    font-size:20px;
    color:#fff;
}

.social-modern-icons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.social-modern-icons a{
    width:58px;
    height:58px;
    border-radius:18px;
    background:color-mix(in srgb, var(--primary-color) 10%, rgba(255,255,255,0.08));
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.3s ease;
}

.social-modern-icons a:hover{
    transform:translateY(-5px);
    background:var(--primary-color);
    box-shadow:0 12px 30px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.social-modern-icons img{
    width:24px;
    height:24px;
    object-fit:contain;
    filter:brightness(0) invert(1);
}

/* =====================================================
   SUPPORT HOURS
===================================================== */

.support-hours{
    margin-top:45px;
    padding:25px;
    border-radius:24px;
    background:color-mix(in srgb, var(--primary-color) 8%, rgba(255,255,255,0.05));
    border:1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.support-hours h4{
    margin-bottom:15px;
    color:#fff;
}

.support-hours p{
    margin-bottom:10px;
    color:rgba(255,255,255,0.78);
}

/* =====================================================
   FORM CARD
===================================================== */

.contact-form-card{
    background:#fff;
    border-radius:36px;
    padding:50px;
    box-shadow:0 20px 50px color-mix(in srgb, var(--primary-color) 12%, rgba(15,23,42,0.06));
    border:1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.contact-form-head{
    margin-bottom:35px;
}

.contact-form-head h2{
    font-size:46px;
    color:var(--primary-color);
}

/* =====================================================
   FORM
===================================================== */

.modern-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.modern-input-group{
    margin-bottom:22px;
}

.modern-input-group label{
    display:block;
    margin-bottom:10px;
    font-weight:700;
    color:var(--primary-color);
    font-size:14px;
}

.modern-input-group input,
.modern-input-group select,
.modern-input-group textarea{
    width:100%;
    border:none;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:18px 20px;
    font-size:15px;
    font-family:'Manrope',sans-serif;
    transition:0.3s ease;
}

.modern-input-group input:focus,
.modern-input-group select:focus,
.modern-input-group textarea:focus{
    outline:none;
    border-color:var(--primary-color);
    background:#fff;
    box-shadow:0 0 0 4px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.contact-btn-row{
    display:flex;
    gap:15px;
    margin-top:15px;
    flex-wrap:wrap;
}

.send-btn,
.clear-btn{
    border:none;
    padding:16px 30px;
    border-radius:18px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:0.3s ease;
}

.send-btn{
    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color:#fff;
    box-shadow:0 15px 30px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.send-btn:hover{
    transform:translateY(-4px);
    filter:brightness(1.05);
}

.clear-btn{
    background:color-mix(in srgb, var(--primary-color) 8%, #eef2f7);
    color:var(--primary-color);
}

.clear-btn:hover{
    background:color-mix(in srgb, var(--primary-color) 15%, #dbe3ee);
}

#msg{
    margin-top:18px;
    color:var(--primary-color);
}

/* =====================================================
   SOCIAL ICONS ORIGINAL STYLE
===================================================== */

.social-modern-icons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.social-modern-icons a{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    overflow:visible;
    position:relative;
    color:#fff !important;
    font-family:Arial,sans-serif;
    font-weight:bold;
    transition:0.3s ease;
}

.social-modern-icons a:hover{
    transform:translateY(-3px);
}

/* tooltip popup */
.social-modern-icons a::after{
    content:attr(data-name);
    position:absolute;
    bottom:-38px;
    left:50%;
    transform:translateX(-50%);
    background:#fff;
    color:#444;
    padding:6px 10px;
    border-radius:6px;
    font-size:12px;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:0.25s ease;
    pointer-events:none;
    z-index:999;
}

/* tooltip arrow */
.social-modern-icons a::before{
    content:"";
    position:absolute;
    bottom:-10px;
    left:50%;
    transform:translateX(-50%);
    border-width:6px;
    border-style:solid;
    border-color:#fff transparent transparent transparent;
    opacity:0;
    visibility:hidden;
    transition:0.25s ease;
}

/* show tooltip on hover */
.social-modern-icons a:hover::after,
.social-modern-icons a:hover::before{
    opacity:1;
    visibility:visible;
}

/* image icon */
.social-modern-icons img{
    width:22px;
    height:22px;
    object-fit:contain;
}

/* fallback text icon */
.social-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    color:#fff !important;
    font-size:14px;
    font-weight:700;
    font-family:Arial,sans-serif;
    text-transform:uppercase;
}

/* platform colors */
.facebook-bg{
    background:#1877f2 !important;
}

.instagram-bg{
    background:linear-gradient(
        45deg,
        #f09433,
        #e6683c,
        #dc2743,
        #cc2366,
        #bc1888
    ) !important;
}

.twitter-bg{
    background:#1DA1F2 !important;
}

.youtube-bg{
    background:#ff0000 !important;
}

.tiktok-bg{
    background:#000 !important;
    border:1px solid #fff;
}

.pinterest-bg{
    background:#e60023 !important;
}

.linkedin-bg{
    background:#0a66c2 !important;
}
.chatpic img{
    width:170px;
    margin-top:15px;
    border-radius:20px;
    border:1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
    box-shadow:0 20px 50px color-mix(in srgb, var(--primary-color) 15%, transparent);
    background:linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary-color) 8%, #fff),
        color-mix(in srgb, var(--secondary-color) 8%, #fff)
    );
    padding:8px;
}
/* =====================================================
   TERMS
===================================================== */

#termsmain{
    background:#fff;
    border-top:1px solid var(--border);
    margin:20px;
    padding:20px;
    border-radius:10px;
    box-shadow:0 5px 20px rgba(15,23,42,0.06);
}

#termsmain h1{
    font-size:34px;
}

#termsmain h1::after{
    bottom:-12px;
    transform:translateX(-50%);
    width:30%;
    height:4px;
    border-radius:20px;
    background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));
    box-shadow:0 8px 20px rgba(var(--primary-rgb),0.25);
}

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

.secondfooter{
    background:#fff;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:40px;
    padding:80px 5%;
    border-top:1px solid var(--border);
}

.secondfooter h3{
    margin-bottom:22px;
    font-size:22px;
    color:var(--dark);
}

.secondfooter ul{
    list-style:none;
}

.secondfooter ul li{
    margin:14px 0;
}

.secondfooter ul li a{
    color:var(--gray);
    font-weight:600;
}

.secondfooter ul li a:hover{
    color:var(--primary-color);
}

.payment img{
    width:320px;
    margin:10px 0;
    padding:10px;
    border-radius:18px;
    border:1px solid color-mix(in srgb, var(--primary-color) 12%, transparent);
    box-shadow:0 10px 25px color-mix(in srgb, var(--primary-color) 12%, transparent);
    transition:0.3s ease;
}

.payment img:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

footer{
    background:#fff;
    border-top:1px solid var(--border);
    padding:25px 5%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

footer .copyrights{
    color:var(--gray);
    font-weight:600;
}

footer .terms a{
    color:var(--gray);
    font-weight:700;
}

footer .terms a:hover{
    color:var(--primary-color);
}


/* =====================================================
   TOP BUTTON
===================================================== */

#myBtn{
    display:none;
    position:fixed;
    right:25px;
    bottom:45px;
    z-index:999;
    width:60px;
    height:60px;
    border:none;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    box-shadow:var(--shadow-lg);
}

#myBtn:hover{
    transform:translateY(-3px);
}

/* =====================================================
   TABLET
===================================================== */

@media(max-width:1100px){

    nav{
        display:none;
    }

    #hamburger-icon{
        display:flex;
    }
}

@media(max-width:991px){

    .about-main{
        grid-template-columns:1fr;
        padding:70px 20px;
        text-align:center;
    }

    .about-main img,
    .about-image-wrap img{
        height:320px;
    }

    .bannerhome,
    .home-slider{
        height:500px;
    }
}

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

@media(max-width:768px){

    body{
        padding-top:82px;
    }

    .header-inner{
        padding:14px 18px;
    }

    .logomain img{
        width:145px;
    }

    .phone-btn{
        width:48px;
        height:48px;
        border-radius:16px;
    }

    #hamburger-icon{
        width:48px;
        height:48px;
        border-radius:16px;
    }

    .mobile-menu{
        width:100%;
        top:82px;
        height:calc(100vh - 82px);
    }

    #bannermainhome{
        padding:14px;
    }

    .bannerhome,
    .home-slider{
        height:320px;
        border-radius:24px;
    }

    .about-main{
        padding:32px;
        gap:30px;
    }

    .about-main h1{
        font-size:34px;
    }

    .about-main img{
        height:280px;
    }

    .head h2,
    .subcribehead h2{
        font-size:30px;
    }

    footer{
        text-align:center;
        justify-content:center;
    }

    .secondfooter{
        text-align:center;
    }

    .floating-chat{
        width:calc(100% - 20px);
        right:10px;
        left:10px;
        bottom:10px;
    }
}