/* Mobile Navigation Styles */
/* Mobile Navigation Styles */
.mobile-nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 350px;
    height: 100vh;
    background: #001f3d; /* Dark Blue Background */
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: left 0.3s ease;
    overflow-y: auto;
}

.mobile-nav.active {
    left: 0;
}

.mobile-nav-header {
    padding: 15px;
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #eee;
}

.mobile-nav-close {
    font-size: 1.5rem;
    cursor: pointer;
    color: #fff; /* White color for visibility */
}

/* Navigation List */
.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-list li a {
    display: block;
    padding: 12px 20px;
    color: #fff; /* White text for readability */
    text-decoration: none;
    border-bottom: 1px solid #444; /* Darker border to contrast */
}

.mobile-nav-list li a i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

/* Accordion Styles */
.mobile-nav-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #444;
    cursor: pointer;
}

.mobile-nav-accordion-header a {
    color: #fff; /* White text */
    text-decoration: none;
    flex-grow: 1;
}

.mobile-nav-accordion-arrow {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
    color: #fff; /* White arrow */
}

.mobile-nav-accordion.active .mobile-nav-accordion-arrow {
    transform: rotate(180deg);
}

.mobile-nav-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #001f3d; /* Dark Blue Background for dropdown */
}

.mobile-nav-accordion.active .mobile-nav-accordion-content {
    max-height: 1000px;
}

.mobile-nav-submenu {
    padding: 10px 0;
}

.mobile-nav-submenu-header {
    padding: 8px 20px 8px 30px;
    font-weight: bold;
    color: #dcdcdc; /* Lighter color for submenu */
}

.mobile-nav-submenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-submenu ul li a {
    padding: 10px 20px 10px 40px;
    border-bottom: 1px solid #444;
    color: #fff; /* White text */
}

/* Mobile Auth Buttons */
.mobile-auth-buttons {
    display: flex;
    padding: 15px;
    gap: 10px;
}

.mobile-auth-btn {
    flex: 1;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-size: 13px;
    cursor: pointer;
}

/* Animated Orange Login Button */
.mobile-login-btn {
    color: black;
    background: orange;
    padding: 10px 0;
    box-shadow: 0 0 10px rgba(255,165,0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.mobile-login-btn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(270deg, #ff9900, #ff6600, #ffaa00, #ff9900);
    z-index: -1;
    background-size: 600% 600%;
    border-radius: 40px;
    animation: moveBorder 6s linear infinite;
}

.mobile-login-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 0 18px rgba(255,140,0, 0.6);
}

/* Register Button */
.mobile-register-btn {
    background: #0066cc;
    color: white;
    padding: 10px 0;
    border: 1px solid #0066cc;
    transition: background 0.3s ease;
}

.mobile-register-btn:hover {
    background: #005bb5;
}

/* Animated Border Keyframes */
@keyframes moveBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display: none;
}

.mobile-nav-overlay.active {
    display: block;
}
.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* Overlay for better visibility */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay for readability */
    z-index: 0;
}    /* General Styling */
                        body {
                            font-family: 'Arial', sans-serif;
                            margin: 0;
                            padding: 0;
                            background-color: #f9f9f9;
                        }
                
                        /* Cruise Features Section Styling */
                        .cruise-features {
                            background-color: #fff;
                            padding: 80px 20px;
                            text-align: center;
                        }
                
                        .cruise-features h2 {
                            font-size: 42px;
                            color: #1a3c72; /* Dark Blue */
                            margin-bottom: 50px;
                            text-transform: uppercase;
                            letter-spacing: 1.5px;
                        }
                
                        /* Feature Boxes Styling */
                        .feature-box {
                            display: flex;
                            justify-content: space-between;
                            flex-wrap: wrap; /* Allow wrapping for responsiveness */
                            gap: 20px; /* Reduced gap for smaller screens */
                        }
                
                        .feature {
                            flex: 1 1 30%; /* Allow flexibility with a base of 30% */
                            padding: 40px;
                            border-radius: 10px;
                            text-align: left;
                            box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
                            position: relative;
                            overflow: hidden;
                            color: white; /* Default text color */
                            transition: transform 0.3s ease, box-shadow 0.3s ease;
                            min-width: 250px; /* Minimum width for smaller devices */
                        }
                
                        /* Overlay for better text visibility */
                        .feature::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for contrast */
                            border-radius: 10px;
                            transition: background-color 0.3s ease;
                        }
                
                        /* Hover Effects */
                        .feature:hover {
                            transform: translateY(-10px);
                            box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.2);
                        }
                
                        .feature:hover::before {
                            background-color: rgba(0, 0, 0, 0.7); /* Darker overlay on hover */
                        }
                
                        .feature h3 {
                            font-size: 24px; /* Slightly smaller title */
                            margin-bottom: 15px;
                            text-transform: uppercase;
                            position: relative;
                            z-index: 2;
                        }
                
                        .feature p {
                            font-size: 16px; /* Smaller paragraph text */
                            line-height: 1.5;
                            position: relative;
                            z-index: 2;
                        }
                
                        /* Responsive Design */
                        @media (max-width: 1024px) {
                            .feature {
                                flex: 1 1 45%; /* Two columns for tablets */
                                padding: 30px;
                            }
                
                            .cruise-features h2 {
                                font-size: 36px; /* Smaller title for tablets */
                                margin-bottom: 40px; /* Adjusted margin */
                            }
                        }
                
                        @media (max-width: 768px) {
                            .feature {
                                flex: 1 1 100%; /* Full width on mobile */
                                margin-bottom: 20px; /* Space between cards */
                                padding: 20px; /* Reduced padding for smaller screens */
                            }
                
                            .cruise-features h2 {
                                font-size: 30px; /* Even smaller title on mobile */
                                margin-bottom: 30px; /* Adjusted margin */
                            }
                        }
                
                        /* Individual Backgrounds */
                        .feature-1 {
                            background-image: url('assets/images/new/1.jpg'); /* Replace with your image path */
                            background-size: cover;
                            background-position: center;
                        }
                
                        .feature-2 {
                            background-image: url('assets/images/new/2.jpg'); /* Replace with your image path */
                            background-size: cover;
                            background-position: center;
                        }
                
                        .feature-3 {
                            background-image: url('assets/images/new/3.jpg'); /* Replace with your image path */
                            background-size: cover;
                            background-position: center;
                        }
                
                        .feature-4 {
                            background-image: url('assets/itnerary/4.webp'); /* Replace with your image path */
                            background-size: cover;
                            background-position: center;
                        }
                
                        .feature-5 {
                            background-image: url('assets/itnerary/7.webp'); /* Replace with your image path */
                            background-size: cover;
                            background-position: center;
                        }
                
                        .feature-6 {
                            background-image: url('assets/itnerary/9.webp'); /* Replace with your image path */
                            background-size: cover;
                            background-position: center;
                        }
                           .feature-7 {
                            background-image: url('https://image.kkday.com/v2/image/get/w_1900%2Cc_fit%2Cq_55/s1.kkday.com/product_168521/20240424054549_FVEMx/jpg'); /* Replace with your image path */
                            background-size: cover;
                            background-position: center;
                        }
                
                        .feature-8 {
                            background-image: url('https://dynamic-media-cdn.tripadvisor.com/media/photo-o/2b/0e/7e/49/caption.jpg?w=500&h=400&s=1'); /* Replace with your image path */
                            background-size: cover;
                            background-position: center;
                        }
                
                        .feature-9 {
                            background-image: url('https://dynamic-media-cdn.tripadvisor.com/media/photo-o/0a/08/4f/e3/vibe-night-club.jpg?w=1200&h=-1&s=1'); /* Replace with your image path */
                            background-size: cover;
                            background-position: center;
                        }
                          .feature-10 {
                            background-image: url('https://cdn1.parksmedia.wdprapps.disney.com/resize/mwImage/1/1000/1000/75/vision-dam/digital/parks-platform/parks-global-assets/disney-cruise-line/ships/adventure/experience/Character-Meet-n-Greet-16x9.jpg?2024-10-01T16:49:05+00:00'); /* Replace with your image path */
                            background-size: cover;
                            background-position: center;
                        }
                
                        .feature-11 {
                            background-image: url('https://dynamic-media-cdn.tripadvisor.com/media/photo-o/2b/10/f1/4f/caption.jpg?w=500&h=400&s=1'); /* Replace with your image path */
                            background-size: cover;
                            background-position: center;
                        }
                
                        .feature-12 {
                            background-image: url('https://lifewellcruised.com/wp-content/uploads/2023/03/family-on-excursion.png'); /* Replace with your image path */
                            background-size: cover;
                            background-position: center;
                        } /* Mobile View Overrides (Reverts to vertical stack on small screens) */
        @media (max-width: 768px) {
            .slide-container {
                /* Removes desktop horizontal spacing */
                border-radius: 0 !important; 
                margin-left: 0 !important;
                margin-right: 0 !important;
                max-width: 100% !important;
            }
            .desktop-content-row {
                /* Forces stacking vertically */
                flex-direction: column !important;
                padding: 10px !important;
            }
            .desktop-content-row > div {
                /* Stacks text/image on top of each other */
                max-width: 100% !important; 
                text-align: center !important;
                padding: 10px !important;
            }
            .desktop-content-row > div:nth-child(2) {
                /* Reorders image to be below text on mobile for Card 1 (Weeklong Wonders) */
                order: 1; 
            }
             .desktop-content-row > div:nth-child(1) {
                /* Reorders text to be below image on mobile for Card 2 (Win the Weekend) */
                order: 2; 
            }
            .slide-container img {
                /* Resets ship rotation and size for mobile stacking */
                transform: rotate(0deg) !important; 
                max-width: 100% !important;
            }
        }
        
        /* CSS Class for Animation Trigger (Applied via JavaScript - essential for scroll effect) */
        .slide-in-active #ship-1 {
            transform: translateX(0) !important;
            opacity: 1 !important;
        }
        .slide-in-active #ship-2 {
            transform: translateX(0) !important;
            opacity: 1 !important;
        }.malik123-section {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    min-height: 100vh;
    color: white;
  }

  .malik123-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
      linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
      url(https://assets.dm.rccl.com/is/image/RoyalCaribbeanCruises/royal/resources/silo/star/star-of-the-seas-sunset-sailing.jpg?$1440x1440$);
    background-size: cover;
    z-index: -1;
    opacity: 1;
  }

  .malik123-left {
    flex: 0 0 25%;
    padding-right: 20px;
    margin-bottom: 30px;
  }

  .malik123-left h2 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 15px;
  }

  .malik123-left p {
    font-size: 16px;
    line-height: 1.6;
    color: #ccc;
  }

  .malik123-right {
    flex: 0 0 75%;
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  .malik123-carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }

  .malik123-card {
    min-width: 100%;
    height: 400px;
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    margin: 0 5px;
    flex-shrink: 0;
  }

  .malik123-card::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .malik123-card-content {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
  }

  .malik123-card-content h2 {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    color: white;
  }

  .malik123-card-content p {
    margin: 0;
    font-size: 14px;
    color: #ddd;
  }

  .malik123-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
  }

  .malik123-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
  }

  .malik123-arrow.left {
    left: 0;
  }

  .malik123-arrow.right {
    right: 0;
  }

  .malik123-arrow span {
    font-size: 20px;
    color: white;
    user-select: none;
  }

  /* Tablet view */
  @media (min-width: 768px) {
    .malik123-section {
      flex-direction: row;
      padding: 30px;
    }
    .malik123-left {
      padding-right: 30px;
      margin-bottom: 0;
    }
    .malik123-card {
      min-width: 50%;
      height: 450px;
    }
  }

  /* Desktop view */
  @media (min-width: 1024px) {
    .malik123-section {
      flex-direction: row;
      padding: 50px;
    }
    .malik123-left {
      padding-right: 40px;
    }
    .malik123-card {
      min-width: calc(100% / 3);
      height: 550px;
      margin: 0 10px;
    }
    .malik123-arrow {
      width: 30px;
    }
    .malik123-arrow span {
      font-size: 30px;
    }
  }

  /* Mobile full width */
  @media (max-width: 767px) {
    .malik123-left,
    .malik123-right {
      flex: 0 0 100%;
    }
  }/* General Styles */

    .cruise-section {
        background-image: url('assets/images/new/c1.jpg'); /* Add your image */
        background-size: cover;
        background-position: center;
        color: white;
        height: 420px;
        text-align: center;
        padding: 100px 0;
        position: relative;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    }

    /* Dark overlay for better text visibility */
    .cruise-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1;
    }

    .cruise-section h1 {
        font-size: 50px;
        margin-bottom: 20px;
        text-transform: uppercase;
        z-index: 2;
        position: relative;
    }

    .cruise-section p {
        font-size: 18px;
        max-width: 700px;
        margin: 0 auto;
        z-index: 2;
        position: relative;
    }

    .cruise-btn {
        background-color: #ffcc00;
        color: #333;
        padding: 15px 30px;
        font-size: 16px;
        text-decoration: none;
        text-transform: uppercase;
        border-radius: 5px;
        margin-top: 30px;
        display: inline-block;
        transition: background-color 0.3s ease, transform 0.2s ease;
        z-index: 2;
        position: relative;
    }

    .cruise-btn:hover {
        background-color: #ff9900;
        transform: translateY(-3px);
        color: white !important;

    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .cruise-section {
            padding: 70px 20px;
            height: auto;
        }

        .cruise-section h1 {
            font-size: 36px;
        }

        .cruise-section p {
            font-size: 16px;
        }

        .cruise-btn {
            padding: 12px 20px;
        }
    } @media (min-width: 992px) {
            /* Desktop View: Place content block on the left */
            .unbeatable-island-container {
                justify-content: flex-start !important; /* Align content to the left for desktop */
            }
            .unbeatable-island-container > div {
                 /* Adjust this to push the text block to the left, if needed */
            }
        }
        @media (max-width: 991px) {
            /* Tablet/Mobile View: Center content block and stack elements */
            .unbeatable-island-container > div {
                justify-content: center !important; /* Center content on smaller screens */
                align-items: center !important;
            }
            .unbeatable-island-container > div > div {
                margin-left: auto !important; /* Center the text block */
                margin-right: auto !important; /* Center the text block */
                text-align: center !important; /* Center text within the block */
                padding: 20px !important;
            }
            .unbeatable-island-container > div > div h2,
            .unbeatable-island-container > div > div p {
                text-align: center !important; /* Ensure text alignment for h2 and p */
            }
            .unbeatable-island-container > div > div div[style*="display: flex"] { /* For the buttons div */
                justify-content: center !important; /* Center buttons */
            }
        }.pharaohsocean {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px;
    margin-top: -90px;
}

/* Common card styling */
.pharaohsocean-card {
    flex: 1 1 30%;
    background-color: #f8f9fa;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    position: relative;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
}

.pharaohsocean-content {
    position: relative;
    z-index: 1;
    padding: 20px;
}

.pharaohsocean-content h3 {
    font-size: 20px;
    color: white;
    margin: 0;
}

/* ✅ Mobile (1 card per row, taller cards) */
@media screen and (max-width: 768px) {
    .pharaohsocean {
        flex-direction: column;
        gap: 15px;
    }

    .pharaohsocean-card {
        flex: 1 1 100%;
        height: 500px !important; /* taller for mobile */
    }

    .pharaohsocean-content h3 {
        font-size: 18px;
    }
}

/* Tablet */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .pharaohsocean-card {
        flex: 1 1 45%;
        height: 380px;
    }

    .pharaohsocean-content h3 {
        font-size: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1025px) {
    .pharaohsocean-card {
        flex: 1 1 30%;
        height: 400px;
    }

    .pharaohsocean-content h3 {
        font-size: 22px;
    }
} /* Ensures that section layout adjusts based on screen size */
    @media screen and (max-width: 768px) {
        .responsive-section {
            flex-direction: column !important;  /* Stack vertically on smaller screens */
            height: 400px !important;  /* Allow height to adjust based on content */
        }
        .card-container {
            margin-top: 20px;
            flex: 1 1 100%; /* Cards take full width on small screens */
        }
        .logo-container {
            margin-bottom: 20px;
            flex: 1 1 100%; /* Ensure logo or image also takes full width */
        }
    }.pharaohs-card {
        position: relative;
        padding: 20px;
        color: white;
        text-align: center;
        height: 250px; /* Adjust height as needed */
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Aligns content to the bottom */
        align-items: center;
    }

    .pharaohs-card .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Black opacity */
        z-index: 1;
    }

    .pharaohs-card a {
        position: relative;
        z-index: 2; /* Ensures text is above the overlay */
        margin-top : 170px;}   /* General Section Styles */
    .pharaohs-card-section {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 20px;
    }

    /* Card Styles */
    .pharaohs-card {
        flex: 1 1 22%;
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin: 10px; /* Adds gap between cards */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: white; /* Text color white to contrast the background */
        height: 250px; /* Ensures the cards have a consistent height */
    }

    /* Title Styles */
    .pharaohs-card-title {
        font-size: 20px;
        margin-bottom: 10px;
        z-index: 1; /* Ensures title is on top of the background */
    }

    /* Description Styles */
    .pharaohs-card-description {
        font-size: 14px;
        margin-bottom: 20px;
        z-index: 1; /* Ensures description is visible */
    }

    /* Link Styles */
    .pharaohs-card-link {
        font-size: 16px;
        color: orange;
        text-decoration: none;
        z-index: 1; /* Ensures the link is on top */
    }

    /* Responsive Styles */
    @media screen and (max-width: 1024px) {
        .pharaohs-card-section {
            justify-content: center;
        }

        .pharaohs-card {
            flex: 1 1 45%; /* Two cards per row on tablets */
            margin: 10px; /* Adds gap between cards */
        }
    }

    @media screen and (max-width: 768px) {
        .pharaohs-card-section {
            justify-content: center;
        }

        .pharaohs-card {
            flex: 1 1 90%; /* One card per row on mobile devices */
            margin: 10px; /* Adds gap between cards */
        }
    } .intro-section {
  margin-left: 30px;
  text-align: left;
  
  max-width: 700px;
}

@media (max-width: 768px) {
  .intro-section {
    margin-left: 20px;
  }
}    html, body {
  overflow-x: hidden;  /* Prevent page-wide horizontal scroll */
  margin: 0;
  padding: 0;
  width: 100vw; /* Exactly viewport width */
}


    /* Desktop grid container */
   .cards-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 260px;
    gap: 10px;
    width: 95%;
    margin: 0 auto;
  }

    /* Card base styles */
    .card-custom {
      position: relative;
      background-size: cover;
      background-position: center;
      border-radius: 0 !important;
      overflow: hidden;
      color: white;
      height: 260px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 10px;
      font-weight: 700;
      font-size: 1.125rem;
      text-transform: uppercase;
      z-index: 0;
    }
    .card-custom .overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.35);
      z-index: 1;
    }
    .card-custom h2 {
      position: relative;
      z-index: 2;
      margin: 0;
    }

    /* Specific grid-column spans for cards */
    .span-2 {
      grid-column: span 2;
    }
    

    /* Mobile styles: horizontal scroll */
    @media (max-width: 768px) {
      .cards-grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 10px !important;
        padding-bottom: 10px;
      }
      .card-custom {
        flex: 0 0 calc(60% - 10px) !important;
        min-width: calc(60% - 10px);
        height: 260px !important;
        scroll-snap-align: start !important;
      }
    }
    a {
  text-decoration: none;
  color: inherit; /* Optional: link ka color bhi normal text jaisa rahe */
}  @media (max-width: 768px) {
        .connect-vibes-section {
            flex-direction: column;
            text-align: center;
        }
        .connect-vibes-content {
            padding: 10px;
        }
        .connect-vibes-image {
            width: 100%;
            margin-top: 20px;
        }
        .connect-vibes-image img {
            right: 0;
            transform: rotate(0deg);
        }
        .connect-vibes-section h1 {
            font-size: 2em;
        }
        .connect-vibes-section p {
            font-size: 0.9em;
        }
        .connect-vibes-section button {
            padding: 8px 16px;
        }
    }