/* ==========================================
   CocktailHUBGH
   Premium Tropical Cocktail Theme
========================================== */

/* FONTS */

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

:root {


    --pink:#ff4fa3;

    --yellow:#ffd83d;

    --lime:#b7e532;

    --blue:#00bfff;


    --dark:#071018;

    --dark2:#101c26;


    --white:#ffffff;


    --glass:
    rgba(255,255,255,0.10);


    --border:
    rgba(255,255,255,.15);

}

/* RESET */

* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html {

    scroll-behavior:smooth;

}

body {


    background:


    radial-gradient(
        circle at top left,
        rgba(255,79,163,.25),
        transparent 35%
    ),


    radial-gradient(
        circle at top right,
        rgba(0,191,255,.25),
        transparent 35%
    ),


    var(--dark);


    color:white;

    font-family:'Poppins',sans-serif;


    overflow-x:hidden;


}

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

.header {

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:1000;

    padding:12px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:

    rgba(7,16,24,.65);

    backdrop-filter:blur(15px);

    border-bottom:

    1px solid rgba(255,255,255,.1);

}

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

.brand {

    display:flex;

    align-items:center;

    gap:10px;

}


.brand img {

    width:48px;

    height:48px;

    max-width:48px;

    max-height:48px;

    object-fit:contain;

    display:block;

    flex-shrink:0;

}


.logo {

    font-family:'Playfair Display',serif;

    font-size:28px;

    letter-spacing:2px;

    display:flex;

    align-items:center;

}


.logo span {

    color:white;

}


.logo strong {

    color:var(--pink);

}

nav a {


    color:white;


    text-decoration:none;


    margin-left:30px;


    font-size:15px;


    transition:.3s;


}


nav a:hover {


    color:var(--yellow);


}

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

.hero {


    height:100vh;


    min-height:700px;



    display:flex;


    align-items:center;


    justify-content:center;


    text-align:center;



    position:relative;



    background:


    linear-gradient(

        rgba(7,16,24,.6),

        rgba(7,16,24,.9)

    ),


    /*url("../assets/images/cocktailhublogo.jpg");



    background-size:cover;


    background-position:center;*/


}

.hero-content {


    max-width:850px;


    padding:20px;


    position:relative;


}


.tagline {


    color:var(--yellow);


    letter-spacing:5px;


    font-size:14px;


    font-weight:600;


}

.hero h1 {


    font-family:'Playfair Display',serif;


    font-size:65px;


    line-height:1.2;


    margin:25px 0;



    background:

    linear-gradient(

        90deg,

        var(--pink),

        var(--yellow),

        var(--lime)

    );

    -webkit-background-clip:text;

    color:transparent;

}

.hero-content p {

    font-size:18px;


    line-height:1.8;


    color:#ddd;


}

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

.btn {


    display:inline-block;


    padding:15px 35px;


    border-radius:50px;


    text-decoration:none;


    margin:10px;


    font-weight:600;


    transition:.35s;


}

.btn:hover {


    transform:translateY(-5px);


}

.btn.primary {


    background:

    linear-gradient(

        45deg,

        var(--pink),

        var(--yellow)

    );



    color:#111;



    box-shadow:

    0 10px 30px rgba(255,79,163,.4);


}

.btn.secondary {


    border:

    2px solid var(--blue);



    color:white;


}

/* ==========================
        SECTIONS
========================== */

.section {


    padding:110px 8%;


    text-align:center;


}

.section h2,
.about h2,
.cta h2 {


    font-family:'Playfair Display',serif;


    font-size:45px;


    margin-bottom:40px;


}

.section-text {


    color:#ddd;


    margin-bottom:50px;


}

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

.cards {


    display:grid;


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


    gap:25px;


}

.card {


    background:var(--glass);


    backdrop-filter:blur(15px);



    padding:35px 25px;



    border-radius:25px;



    border:

    1px solid var(--border);



    transition:.4s;


}

.card h3 {


    margin-bottom:15px;


}

.card p {


    color:#ddd;


    line-height:1.7;


}

.card:hover {


    transform:translateY(-12px);


}

.card.pink {

    border-top:5px solid var(--pink);

}

.card.yellow {

    border-top:5px solid var(--yellow);

}

.card.blue {

    border-top:5px solid var(--blue);

}


.card.lime {

    border-top:5px solid var(--lime);

}

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

.package-container {


    display:grid;


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


    gap:30px;


}

.package-card {


    position:relative;



    text-align:left;



    background:


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



    backdrop-filter:blur(20px);



    padding:40px 30px;



    border-radius:30px;



    border:

    1px solid var(--border);



    transition:.4s;


}

.package-card:hover {


    transform:translateY(-15px);


}

.package-card.featured {


    border:

    2px solid var(--pink);



    background:


    linear-gradient(

        145deg,

        rgba(255,79,163,.25),

        rgba(255,216,61,.15)

    );


}

.popular {


    position:absolute;


    top:-18px;


    right:25px;



    background:var(--pink);



    padding:8px 20px;


    border-radius:30px;


    font-size:13px;


}

.package-type {


    color:var(--lime);


    font-size:13px;


    letter-spacing:2px;


    text-transform:uppercase;


}

.package-card h3 {


    font-family:'Playfair Display',serif;


    font-size:32px;


    margin:15px 0;


}

.package-card p {


    color:#ddd;


}

.package-card h4 {


    margin:25px 0;


    color:var(--yellow);


    font-size:30px;


}

.package-card h4 small {


    font-size:14px;


    color:white;


}

.package-card ul {


    list-style:none;


    margin-bottom:30px;


}

.package-card li {


    margin:15px 0;


    color:#eee;


}

.package-card li::before {


    content:"✓";


    color:var(--lime);


    margin-right:10px;


}

/* ==========================
        GALLERY
========================== */

.gallery {


    display:grid;


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


    gap:30px;


}

.drink {


    overflow:hidden;


    border-radius:25px;


}

.drink img {


    width:100%;


    height:400px;


    object-fit:cover;


    transition:.5s;


}

.drink:hover img {

    transform:scale(1.08);

}

.drink h3 {

    padding:20px;

    color:var(--yellow);

}

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

.about {

    padding:120px 12%;

    text-align:center;

    background:

    linear-gradient(

        135deg,

        rgba(255,79,163,.2),

        rgba(0,191,255,.2)

    );
}

.about p {

    max-width:750px;

    margin:auto;

    color:#ddd;

    line-height:2;

}

/* ==========================
        TESTIMONIALS
========================== */

.testimonial {

    max-width:800px;

    margin:auto;

}

.testimonial p {

    background:var(--glass);

    padding:30px;

    border-radius:20px;

    margin:20px;

    font-style:italic;

}

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

.cta {

    padding:120px 10%;

    text-align:center;

    background:

    linear-gradient(

        135deg,

        var(--pink),

        var(--blue)

    );

}

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

footer {

    text-align:center;

    padding:50px;

    background:#050b10;

}

footer h3 {

    color:var(--yellow);

    margin-bottom:15px;

}

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

@media(max-width:1000px){

nav {

    display:none;

}

.hero h1 {

    font-size:42px;

}

.cards {

    grid-template-columns:1fr;

}

.package-container {

    grid-template-columns:1fr;

}

.gallery {

    grid-template-columns:1fr;

}

.section h2 {

    font-size:35px;

}

}

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

.social-icons {

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:30px;

}

.social-icons a {


    width:45px;

    height:45px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:

    rgba(255,255,255,.1);



    color:white;


    font-size:20px;


    transition:.4s;


}

.social-icons a:hover {


    transform:

    translateY(-8px)
    rotate(5deg);



    background:

    linear-gradient(

    45deg,

    var(--pink),

    var(--yellow)

    );


    color:#111;


}

footer .social-icons a:nth-child(1):hover {

    background:#E1306C;

    color:white;

}

footer .social-icons a:nth-child(2):hover {

    background:#1877F2;

    color:white;

}

footer .social-icons a:nth-child(3):hover {

    background:#000;

    color:white;

}

footer .social-icons a:nth-child(4):hover {

    background:#25D366;

    color:white;

}

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

.booking {

    background:

    linear-gradient(
    135deg,
    rgba(255,79,163,.12),
    rgba(0,191,255,.12)
    );

}

.booking-form {

    max-width:900px;

    margin:auto;

    background:

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


    backdrop-filter:blur(20px);


    padding:40px;


    border-radius:30px;


    border:

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


}

.form-row {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

}

.form-group {

    text-align:left;

    margin-bottom:25px;

}

.form-group label {

    display:block;

    margin-bottom:10px;

    color:var(--yellow);

}

.form-group input,
.form-group select,
.form-group textarea {


    width:100%;


    padding:15px;


    border-radius:15px;


    border:none;


    outline:none;


    background:

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


    color:white;


    font-family:inherit;


}

.form-group select option {

    color:black;

}

.form-group textarea {

    resize:none;

}



@media(max-width:900px){


.form-row {

    grid-template-columns:1fr;

}


}

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

.contact-section {

    padding:100px 8%;

    text-align:center;

    background:

    linear-gradient(
        135deg,
        rgba(255,216,61,.12),
        rgba(255,79,163,.15)
    );

}

.contact-section h2 {

    font-family:'Playfair Display',serif;

    font-size:45px;

    margin-bottom:20px;

}

.contact-section > p {

    max-width:650px;

    margin:0 auto 50px;

    color:#ddd;

    line-height:1.8;

}

.contact-container {

    display:grid;

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

    gap:25px;

    max-width:1200px;

    margin:auto;

}

.contact-card {

    background:

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

    backdrop-filter:blur(15px);

    border:

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

    border-radius:25px;

    padding:35px 20px;

    transition:.4s;

}

.contact-card:hover {

    transform:translateY(-10px);

}

.contact-card i {

    font-size:35px;

    color:var(--yellow);

    margin-bottom:20px;

}

.contact-card h3 {

    margin-bottom:15px;

}

.contact-card a,
.contact-card p {

    color:#ddd;

    text-decoration:none;

}

.contact-card a:hover {

    color:var(--pink);

}

@media(max-width:1000px){

.contact-container {

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

}


}

@media(max-width:600px){

.contact-container {

    grid-template-columns:1fr;

}

.contact-section h2 {

    font-size:35px;

}

}