/* --- Root Variables for Global Styles --- */
:root {
    /* Color Palette */
    --bg-dark: #0A0A0A; /* Very dark background, almost black */
    --bg-medium: #131313; /* Slightly lighter background for sections */
    --text-primary: #F0F0F0; /* Light text for readability on dark backgrounds */
    --text-secondary: #B0B0B0; /* Slightly muted text for less emphasis */
    --accent-blue: #00BFFF; /* Your current primary blue accent */
    --accent-purple: #8A2BE2; /* A complementary purple for gradients/highlights */
    --gradient-start: #00BFFF; /* Start of your main gradient */
    --gradient-end: #8A2BE2; /* End of your main gradient */
    --card-bg: rgba(255, 255, 255, 0.07); /* Background for cards/info boxes */
    --border-light: rgba(255, 255, 255, 0.1); /* Light border for subtle separation */

    /* Typography */
    --font-main: 'Poppins', sans-serif;
    --heading-font-weight: 600;
    --body-font-weight: 400;

    /* Spacing */
    --spacing-xs: 10px;
    --spacing-sm: 20px;
    --spacing-md: 40px;
    --spacing-lg: 80px;
    --spacing-xl: 120px;

    /* Border Radius */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 50px; /* For buttons/pills */

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;
}

/* Base body styles using variables */
body {
    font-family: var(--font-main);
    background-color: var(--bg-dark); /* Ensure it's very dark */
    color: var(--text-primary);
    scroll-behavior: smooth;
    margin: 0;
    cursor: default;
    width: 100%;
}

/* Global section padding (retained from your code) */
section {
    padding: clamp(4rem, 8vw, 6rem) clamp(1rem, 2vw, 2rem);
    min-height: 100vh;
}

/* HERO SECTION */
.hero {
    height: 100vh;
    background: var(--gradient);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(46, 88, 148, 0.6) 0%, transparent 70%);
    z-index: 0;
}

.hero-content {
    z-index: 1;
    max-width: clamp(300px, 70%, 700px);
    padding: clamp(1rem, 2vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--primary-blue);
    margin-bottom: clamp(0.3rem, 1vw, 0.5rem);
    letter-spacing: clamp(1px, 1vw, 2px);
    font-weight: 400;
}

.hero .highlight {
    color: var(--accent);
}

    .hero img {
        width: 60%;
        height: auto;
    }

    .hero h2 {
    font-size: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(0.5rem, 1vw, 1rem);
    font-weight: 400;
    color: var(--text-color);
    }

    .hero p {
        font-size: clamp(0.9rem, 1.5vw, 1.2rem);
        text-align: center;
        max-width: 90%;
        color: var(--text-color);
    }

    .hero .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4); /* Slightly lighter overlay for light mode compatibility */
        z-index: -1;
    }

    /* SECTION SPACING */
    section {
        /* Top/bottom and left/right padding both scale */
        padding: clamp(4rem, 8vw, 6rem) clamp(1rem, 2vw, 2rem);
        min-height: 100vh;
    }

    /* TEXT TYPOGRAPHY */
    .typed-text {
        color: var(--accent);
    }

    .cursor {
        display: inline-block;
        background-color: var(--accent);
        width: clamp(1px, 0.2vw, 2px);
        animation: blink 0.7s infinite;
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }
    }

    /* ----------- Specialty Section ----------- */
    #specialty {
        display: flex;
        flex-direction: column;
        text-align: center;
        color: white;
    }

    .specialty-intro {
        /* Responsive padding for the introduction area */
        padding: 0 clamp(15px, 3vw, 20px) clamp(30px, 5vw, 40px);
    }

    .specialty-intro h1 {
        /* Scaling h1 size from 1.8em up to 2.5em */
        font-size: clamp(1.3em, 5vw, 2.5em);
        font-weight: 400;
    }

    .specialty-intro span {
color: var(--accent-blue); /* Highlight with accent color */
    text-shadow: 0 0 5px rgba(0, 191, 255, 0.3); /* Subtle glow */
    }

    .specialty-content {
        display: flex;
        flex-direction: row;
        min-height: 80vh;
    }

    .specialty-left,
    .specialty-right {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-size: cover;
        background-position: center;
        border-radius: clamp(8px, 2vw, 10px);
        padding: clamp(15px, 3vw, 20px);
        color: white;
        overflow: hidden;
        transition: flex 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
    }

    .specialty-left::before,
    .specialty-right::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 0;
    }

    .specialty-left:hover,
    .specialty-right:hover {
        box-shadow: 0 0 clamp(20px, 2vw, 25px) rgba(255, 255, 255, 0.3);
        transform: scale(1.02);
        z-index: 2;
    }

    .specialty-left:hover::before,
    .specialty-right:hover::before {
        background-color: rgba(0, 0, 0, 0.6);
    }

    /* Ensure inner content appears above overlays */
    .specialty-left *,
    .specialty-right * {
        position: relative;
        z-index: 1;
    }
    

    .specialty-left h2,
    .specialty-right h2,
    .specialty-left p,
    .specialty-right p,
    .specialty-left a,
    .specialty-right a {
        transition: all 0.3s ease;
    }

    .specialty-left h2,
.specialty-right h2 {
    font-size: clamp(2rem, 3.5vw, 2.8rem); /* Slightly larger, more impactful */
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8); /* Stronger text shadow */
    color: var(--accent-blue); /* Highlight titles */
}

    .specialty-left {
        background-image: url('../images/wedding.webp');
    }

    .specialty-right {
        background-image: url('../images/business.webp');
    }

    .specialty-left p,
    .specialty-right p {
        position: relative;
        z-index: 1;
        text-align: left;
        max-width: clamp(300px, 50%, 600px);
        margin: clamp(8px, 2vw, 10px) 0;
        font-size: clamp(0.9rem, 1.2vw, 1.1rem);
        line-height: 1.6;
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    }

    .specialty-left .highlight,
    .specialty-right .highlight {
        font-size: clamp(1rem, 1.2vw, 1.2rem);
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
        font-weight: 600;
    }

    .specialty-left h2,
    .specialty-right h2 {
        position: relative;
        z-index: 1;
        font-size: clamp(1.8rem, 3vw, 2.2rem);
        margin-bottom: clamp(8px, 2vw, 10px);
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    }



    /* ------------- offer/performance ---------------- */
    #offer {
        background: radial-gradient(circle at top left, rgba(115, 194, 251, 0.05), rgba(0, 0, 0, 0.9));
    }

    .offer-container {
        display: flex;
        justify-content: space-between;
        padding: clamp(10px, 5vw, 50px);
        gap: clamp(50px, 10vw, 100px);
        width: 90vw;
        margin: 0 auto;
    }

    .left {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .left h3 {
        /* Font size between 1rem and 1.3rem */
        font-size: clamp(1rem, 2vw, 1.3rem);
        margin-bottom: clamp(0.5rem, 1vw, 0.6rem);
            color: var(--accent-blue); /* Highlight secondary heading */

    }

    .left h1 {
        /* Font size scales from 1.5rem up to 2rem */
    font-size: clamp(1.8rem, 3vw, 2.5rem); /* More prominent heading */
        margin-bottom: clamp(1rem, 2vw, 1.3rem);
    }

    .left p {
        font-size: clamp(1rem, 2vw, 1.1rem);
        margin-bottom: clamp(1.5rem, 2.5vw, 1.9rem);
    }

    .btn-group {
        display: flex;
        /* Gap scales between 10px and 15px */
        gap: clamp(10px, 2vw, 15px);
    }

    .btn-group button {
        /* Vertical padding between 8px and 10px, horizontal between 15px and 20px */
        padding: clamp(8px, 2vw, 10px) clamp(15px, 4vw, 20px);
        background: #fff;
        color: #000;
        border: none;
        cursor: pointer;
        font-weight: bold;
    }

    .right {
        flex: 1;
        padding: clamp(5px, 4vw, 40px);
        border-radius: clamp(8px, 2vw, 10px);
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--card-bg); /* Use new card background variable */
    border: 1px solid var(--border-light); /* Subtle border */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); /* Clearer shadow */
    }

    .right .container h2 {
        text-align: center;
        color: #fff;
        margin-bottom: clamp(15px, 2vw, 20px);    
        font-size: clamp(1.6rem, 2.5vw, 2.2rem); /* Larger and more prominent */
        color: var(--accent-blue); /* Highlight the "WE OFFER" title */
    }

    .right .container h3 {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
        font-weight: 400;
        margin-bottom: clamp(8px, 1.5vw, 10px);
    }

    .right .container {
        width: 100%;
    }

    .right .container i {
            font-size: clamp(1.8rem, 4vw, 2.4rem); /* Larger icons */
    color: var(--accent-blue);
        margin-bottom: clamp(8px, 1vw, 10px);
    }

    .right .container-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(10px, 2vw, 20px);
    }

    .info-container {
    background-color: rgba(255, 255, 255, 0.05); /* Slightly lighter card background */
        padding: clamp(15px, 2vw, 20px);
        border-radius: clamp(6px, 1.5vw, 8px);
            border: 1px solid rgba(255, 255, 255, 0.08); /* More subtle border */

        text-align: center;
        color: #fff;
        width: 100%;
        min-height: clamp(120px, 15vw, 150px);
        box-sizing: border-box;
        word-wrap: break-word;
        transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

    .info-container:hover {
        transform: scale(1.05);
        box-shadow: 0 0 20px var(--accent), 0 0 30px var(--accent-blue);
        background-color: #1a1a1a;
    }

    .info-container h2 {
        font-size: clamp(1rem, 2vw, 1.3rem);
        margin-bottom: clamp(8px, 1.5vw, 10px);
    }

    .info-container p {
        font-size: clamp(0.9rem, 1.8vw, 1rem);
        line-height: 1.5;
    }


    /* --- Hosting Overview Section --- */
.hosting-overview-section {
    background: linear-gradient(135deg, var(--bg-medium), var(--bg-dark)); /* Use a darker, more defined gradient */
    padding: var(--spacing-xl) clamp(20px, 5vw, 80px);
    text-align: center;
    color: var(--text-primary);
}

.hosting-overview-section h1 {
    font-size: clamp(2.2rem, 5vw, 3.5rem); /* Larger, more impactful heading */
    margin-bottom: var(--spacing-sm);
    color: var(--accent-blue); /* Highlight with accent color */
    font-weight: var(--heading-font-weight);
}

.hosting-overview-section .subtext {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    max-width: 800px;
    margin: 0 auto var(--spacing-lg); /* More space before grid */
    opacity: 0.8;
    line-height: 1.6;
}

.hosting-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Slightly larger min-width for items */
    gap: var(--spacing-md); /* Consistent gap */
    margin-bottom: var(--spacing-lg); /* More space before button */
}

.hosting-features-grid .feature-item { /* Specificity for this section's feature items */
    background: rgba(255, 255, 255, 0.08); /* Slightly more opaque background */
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-speed) var(--transition-timing);
    border: 1px solid rgba(255, 255, 255, 0.15); /* More visible border */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* Stronger shadow */
}

.hosting-features-grid .feature-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 191, 255, 0.4); /* Stronger accent glow on hover */
    background-color: rgba(255, 255, 255, 0.12); /* Brighter on hover */
}

.hosting-features-grid .feature-item i {
    font-size: clamp(3rem, 5vw, 4rem); /* Larger icons */
    color: var(--accent-blue);
    margin-bottom: var(--spacing-sm);
}

.hosting-features-grid .feature-item h3 {
    font-size: clamp(1.4rem, 2.8vw, 1.8rem); /* Larger headings */
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    font-weight: var(--heading-font-weight);
}

.hosting-features-grid .feature-item p {
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    line-height: 1.7;
    opacity: 0.75;
}

/* Ensure button styling matches global .btn */
.hosting-overview-section .btn {
    margin-top: 0; /* Remove extra top margin if global btn has it */
}

@media (max-width: 768px) {
    .hosting-features-grid {
        grid-template-columns: 1fr; /* Stack on smaller screens */
    }
}

    /* Bottom Section Overall Styles */
    .bottom-section {
        padding: 0;
        color: #fff;
        text-align: center;
        min-height: 70vh;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .bg {
        animation: slide 6s ease-in-out infinite alternate;
        background-image: linear-gradient(-60deg, #1a1a1a 50%, #0d0d0d 50%);
        bottom: 0;
        left: -50%;
        opacity: 0.5;
        top: 0;
        right: -50%;
        z-index: -11;
        position: absolute;
    }

    .bg2 {
        animation-direction: alternate-reverse;
        animation-duration: 8s;
    }

    .bg3 {
        animation-duration: 10s;
    }

    @keyframes slide {
        0% {
            transform: translateX(-25%);
        }

        100% {
            transform: translateX(25%);
        }
    }

    .computer-container {
    /* Removed width and margin that were specific to the image */
    display: flex; /* Keep flex for centering its child */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%; /* Allow it to take full width of parent padding */
    max-width: 800px; /* Max width for the content itself */
    margin: 0 auto; /* Center the container */
    z-index: 1; /* Ensure it's above the background animation */
}

.questions {
    padding: var(--spacing-md) var(--spacing-lg); /* Generous padding */
    background-color: var(--card-bg); /* Use existing card background variable */
    border-radius: var(--border-radius-md);
    margin-bottom: 0; /* Remove extra margin if not followed by an image */
    margin-top: 0;
    max-width: 600px; /* Constrain width of the box */
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border-light); /* Subtle border for definition */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Clearer shadow */
    position: relative; /* For potential pseudo-elements or specific positioning */
    z-index: 1; /* Ensure it layers correctly over background */
}

.questions h3 {
    font-size: clamp(1.8rem, 3vw, 2.5rem); /* Make main heading more prominent */
    margin-bottom: var(--spacing-sm);
    font-weight: var(--heading-font-weight);
    letter-spacing: 1px;
}

.questions p {
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.7;
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
}

.questions p a {
    color: var(--primary-blue); /* Style links to stand out */
    text-decoration: none;
    transition: color 0.3s ease;
}

.questions p a:hover {
    color: var(--accent-blue); /* Hover effect for links */
}

@media screen and (max-width: 768px) {
    .bottom-section {
        padding: var(--spacing-md) clamp(1rem, 2vw, 2rem);
        min-height: auto; /* Allow height to adjust naturally */
    }

    .questions {
        padding: var(--spacing-sm) var(--spacing-md);
        margin-top: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }

    .questions h3 {
        font-size: clamp(1.6rem, 4vw, 2rem);
    }

    .questions p {
        font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    }
}



    @media screen and (max-width: 768px) {

        .info-container {
            background-color: #131618;
        }

        .info-container:hover {
            box-shadow: none;
            background-color: transparent;
        }

        .specialty-content {
            flex-direction: column;
            height: auto;
            gap: 2rem;
            padding: 0 1rem;
            padding-bottom: 2rem;
        }

        .specialty-left,
        .specialty-right {
            width: 100%;
            padding: 20px 10px;
            text-align: center;
            transform: scale(1);
            box-shadow: none;
            transition: transform 0.5s ease, box-shadow 0.5s ease;
        }


        .specialty-left::before,
        .specialty-right::before {
            background-color: rgba(0, 0, 0, 0.8);
            transition: background-color 0.5s ease;
        }

        .specialty-left.animate,
        .specialty-right.animate {
            transform: scale(1.02);
            box-shadow: 0 0 25px rgba(255, 255, 255, 0.3);
            z-index: 2;
        }

        .specialty-left.animate::before,
        .specialty-right.animate::before {
            background-color: rgba(0, 0, 0, 0.6);
        }

        .specialty-left p,
        .specialty-right p {
            text-align: center;
        }

        .offer-container {
            flex-direction: column;
            gap: clamp(10px, 3vw, 20px);
            min-width: 100%;
        }

        .left,
        .right {
            min-width: 100%;
            align-items: center;
            text-align: center;
        }

        .right {
            margin-top: clamp(20px, 5vw, 40px);
        }

        .right .container-grid {
            display: inline-grid;
            grid-template-columns: repeat(1, 1fr);
            gap: clamp(10px, 2vw, 20px);
            margin: 0 auto;
            min-width: 100%;
        }
    }


    @media screen and (max-width: 370px) {
        .offer-container {
            padding: 10px;
            gap: 10px;
        }

        .right .container-grid {
            gap: 10px;
            grid-template-columns: 1fr;
        }

    }