/* VARIABLES */
:root {
    --main-bg-color: #0e1520;
    --main-nav-bg: #000000;
    --heading-color: #ffffff;
    --main-text-color: #f6f6f6;
    --section-dk-bk-color: #1a1e2a;
    --gradient-01: linear-gradient(90deg,rgba(54, 169, 237, 1) 0%, rgba(213, 54, 149, 1) 100%);

}
h1 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--heading-color);
}
.subtitle {
    font-size: 1.6rem;
}
.fluid-image {
    width: 100%;
    height: auto;
}
body {
    margin: 0px;
    padding: 0px 12px;
    background-color: var(--main-bg-color);
    font-family: "Inter", sans-serif;
    color: var(--main-text-color);
}
nav {
    background-color: var(--main-nav-bg);
}
#main-nav-desktop {
    display: flex;
    justify-content: center;
    padding: 8px 0px;
}
.main-nav-left{
    width: 300px;
}
.main-nav-left{
    width: 400px;
}
section {
    box-sizing: border-box;
    padding: 68px 0px;
    display: flex;
    justify-content: center;
}
#header {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    padding: 140px 0px;
}
.content-container-space-between {
    display: flex;
    justify-content: space-between;
    width: 1240px;
}
.centered-content {
    width: 1240px;
    display: flex;
    flex-wrap: wrap;
}
.homepage-title {
    padding: 80px 0px;
    width: 55%;
}
.homepage-hero-container {
    /* width: 40%;
    box-sizing: border-box; */
    flex: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px; /* Adjust padding if needed to give space for shadow/glow */
    position: relative;
}
.gradient-border-wrapper {
    /* This will be slightly larger than the image to create the border */
    position: relative;
    display: inline-block;
    max-width: 100%; /* Ensure it fits its parent */
    height: auto; /* Allow height to adjust */
    padding: 3px;
    box-sizing: border-box;
    
    /* Define the rounded corners for the entire border effect */
    border-radius: 20px; /* Adjust this value to control border corner roundness */
    
    /* The gradient background for the border */
    background: linear-gradient(to right, #00b0ff, #ff0080); /* Blue to pink gradient */
    
    /* Add the subtle shadow/glow directly to the wrapper */
    box-shadow: 
        0 0 60px rgba(0, 176, 255, 0.4), /* Blue glow */
        0 0 60px rgba(255, 0, 128, 0.4), /* Pink glow */
        0 10px 40px rgba(0, 0, 0, 0.6); /* General dark shadow */

    /* Ensure image fits within and hides overflow if its radius is different */
    overflow: hidden; 
}
#homepage-hero-img {
    margin: 0px 4px 0px 0px;
    max-width: 100%;
    height: auto;
    display: block;
    
    /* ----- ADD/MODIFY THESE LINES ----- */
    border-radius: 16px; /* Adjust this value for desired roundness */
    overflow: hidden; /* Crucial if the image itself isn't perfectly clipped by border-radius */
    /* ---------------------------------- */
}
#features {
    background-color: var(--section-dk-bk-color);
}
button {
    border: none;
}
button:hover {
    cursor: pointer;
}
.cta-01 {
    margin-top: 4rem;
    padding: 20px;
    border-radius: 26px;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--heading-color);
    background: var(--gradient-01);
}