/* ==========================================
   PACKAGES HERO SECTION
========================================== */

.packages-hero-section{

    position:relative;
    width:100%;
    overflow:hidden;

    padding:120px 0 80px;

    background:
        linear-gradient(
            135deg,
            #0f172a 0%,
            #1e3a8a 45%,
            #2563eb 100%
        );

}

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

.packages-hero-section::before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    top:-220px;
    left:-180px;

    border-radius:50%;

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

    filter:blur(80px);

}

.packages-hero-section::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-150px;
    bottom:-180px;

    border-radius:50%;

    background:rgba(56,189,248,.18);

    filter:blur(80px);

}

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

.packages-hero-overlay{

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(255,255,255,.10),
            transparent 45%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(255,255,255,.06),
            transparent 40%
        );

}

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

.packages-hero-container{

    position:relative;

    z-index:2;

    width:90%;
    max-width:1320px;

    margin:auto;

}

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

.packages-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

/* ==========================================
   SUBTITLE
========================================== */

.packages-subtitle{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:999px;

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

    backdrop-filter:blur(18px);

    color:#ffffff;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:22px;

}

/* ==========================================
   TITLE
========================================== */

.packages-title{

    font-size:54px;

    font-weight:700;

    color:#ffffff;

    line-height:1.15;

    margin-bottom:22px;

}

/* ==========================================
   DESCRIPTION
========================================== */

.packages-description{

    color:rgba(255,255,255,.82);

    font-size:17px;

    line-height:1.9;

}

/* ==========================================
   TOOLBAR
========================================== */

.packages-toolbar{

    display:flex;

    align-items:center;

    gap:20px;

    padding:20px;

    border-radius:24px;

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

    backdrop-filter:blur(25px);

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

    box-shadow:

        0 20px 45px rgba(0,0,0,.18);

}

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

.packages-search{

    flex:1;

}

.packages-search input{

    width:100%;

    height:58px;

    border:none;

    outline:none;

    border-radius:16px;

    padding:0 22px;

    font-size:15px;

    color:#111;

    background:#ffffff;

    transition:.35s;

}

.packages-search input:focus{

    box-shadow:

        0 0 0 4px rgba(43,108,255,.20);

}

/* ==========================================
   SORT
========================================== */

.packages-sort{

    width:220px;

}

.packages-sort select{

    width:100%;

    height:58px;

    border:none;

    outline:none;

    border-radius:16px;

    background:#ffffff;

    padding:0 18px;

    cursor:pointer;

    font-size:15px;

}

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

@media(max-width:992px){

    .packages-hero-section{

        padding:100px 0 70px;

    }

    .packages-title{

        font-size:42px;

    }

}

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

@media(max-width:768px){

    .packages-hero-section{

        padding:80px 0 60px;

    }

    .packages-header{

        margin-bottom:40px;

    }

    .packages-title{

        font-size:32px;

    }

    .packages-description{

        font-size:15px;

    }

    .packages-toolbar{

        flex-direction:column;

        padding:18px;

    }

    .packages-search{

        width:100%;

    }

    .packages-sort{

        width:100%;

    }

}

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

@media(max-width:480px){

    .packages-title{

        font-size:28px;

    }

    .packages-subtitle{

        font-size:11px;

        letter-spacing:1.5px;

    }

    .packages-toolbar{

        padding:15px;

        border-radius:18px;

    }

}