:root {
    --font-inter: "Inter", sans-serif;
    --font-hankenGrotesk: "Hanken Grotesk", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);

    --primary: #04aa5c;
    --primary-hover: #00cc70;
    --secondary: #06ce71;
    --secondary-hover: #04aa5c;
    --primary-color2: #00a359;

    --primary-color1: #00a359;
    --text-color: white;
    --text-color-sec: rgb(231, 231, 231);
    --background-color-sec: rgba(38, 37, 37, 0.9);
}

html, body {
    background: black;
}

/* Hover effect */
.nav_links .link:hover {
    color: var(--primary-hover) !important; /* Change text color on hover */
}

.nav_links .link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0; /* Position the underline at the bottom */
    width: 0; /* Initially set width to 0 */
    height: 1px; /* Thickness of the underline */
    background-color: var(--primary-color2) !important; /* Underline color */
    transition: width 0.4s ease; /* Smooth expand effect */
}

.nav_links .link:hover::after {
    width: 100%; /* Expand underline to full width on hover */
}

.dropdown-menu li a:hover {
    color: var(--primary-hover);
}

.head-section {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 500px; /* Adjust section height */
    padding: 0;
    margin: 0;
    z-index: 1;
    overflow: hidden; /* Prevent any overflow outside the section */
}

.svg-container {
    position: absolute;
    right: 0;
    height: 100%;
    width: 70%;  /* Width of the SVG container */
    z-index: 1; /* Ensure SVG stays behind the title */
    transition: transform 0.5s ease; /* Smooth transition for movement */
}

.head-section svg {
    width: 120%; /* Increase the size of the SVG */
    height: 120%;
    object-fit: cover; /* Ensure the SVG maintains its aspect ratio */
}

/* Hover effect for moving the SVG */
.head-section:hover .svg-container {
    transform: translateX(10%); /* Move the SVG slightly to the right on hover */
}

/* Optional: Adding a gradient overlay effect on hover */
.head-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background: linear-gradient(to right, black 70%, rgba(0, 0, 0, 0) 100%);
    z-index: -1;
}

/* Main title */
.title-sec {
    font-size: 1rem;
    color: white;
    text-align: center;
    margin: 0;
    margin-bottom: 5rem;
    
    z-index: 2; /* Ensure title stays on top */
    width: 100%;
}


/* subtitle */
.home-demo .home-button {
    display: inline-flex; /* Ensure the text stays in one line */
    align-items: center;
    font-size: 16px;
    padding: 0.4rem 1.3rem;
    margin-top: 2rem;
    border-radius: 5rem;
    text-decoration: none; /* Remove underline for link */

    cursor: default;
}

.home-button {
    position: relative;
    color: white; /* Text color */
    font-weight: bold;
    cursor: pointer;
    border: 0.5px solid transparent; /* Set initial border as transparent */
    background-clip: padding-box; /* Ensures the background does not overlap the border */
    
    box-sizing: border-box;
}

/* Keyframes for rotating gradient border */
@keyframes rotateBorder {
    0% {
        border-color: #757373;
    }
    25% {
        border-color: #5d5d5c;
    }
    50% {
        border-color: #a2a250;
    }
    75% {
        border-color: var(--secondary-hover);
    }
    100% {
        border-color: var(--primary-color1);
    }
}

/* Applying rotating gradient to border */
.home-button {
    animation: rotateBorder 2s linear infinite;
}


.home-text {
    color: var(--primary-color1);
    font-family: var(--font-inter);
    font-size: 0.8rem;
    font-weight: 500;

    text-transform: uppercase;
    letter-spacing: 0.39px;

    cursor: pointer;
}

.demos-text {
    color: var(--white-color);
    font-family: var(--font-inter);
    font-size: 0.8rem;

    text-transform: uppercase;
    letter-spacing: 0.39px;
}

.custom-hyphen {
    color: #ffffff; /* Custom color for hyphen (e.g., orange) */
    transform: scaleX(1.8) scaleY(0.2); 
    margin: 0 5px; 
    margin-right: 0.4rem;
}


/* Privacy Policy Section */
.privacy-policy-sec {
    padding: 20px;
    background-color: transparent;
}

/* Center the main container and make it responsive */
.privacy-container {
    max-width: 800px;  
    margin: 2rem auto;    
    padding: 20px;
    background-color: var(--background-color-sec); /* White background */
    box-shadow: inset 0 0 .5px .8px #ffffff1a, 0 0 0 .8px #14151a13, 0 .3px .4px #14151a05, 0 .9px 1.5px #14151a0b, 0 3.5px 6px #14151a17 !important;
    border-radius: 16px;
}

/* Center the h2 header */
.privacy-container h2 {
    text-align: center;
    font-size: 2rem;
    color: var(--text-color);
    margin-bottom: 20px;
}

/* Style for h3 headers */
.privacy-container h3 {
    font-size: 1.5rem;
    color: var(--text-color-sec);
    margin-top: 20px;
}

/* Style for paragraphs */
.privacy-container p {
    font-size: 1rem;
    color: #818181;
    line-height: 1.6;
    margin: 10px 0;
}

/* Style for unordered list (bullet points) */
.privacy-container ul {
    list-style-type: disc;
    padding-left: 20px;
    color: #818181;
    font-size: 1rem;
    margin: 10px 0;
}

.privacy-container ul li {
    margin-bottom: 10px;
    color: #aeaeae;
}

.privacy-container ul span {
    font-weight: 500;
    color: #d4d4d4;
}

/* autoShow animation */
.autoShow {
    animation: autoShowAnimation both;
    animation-timeline: view(60% 10%);
}

@keyframes autoShowAnimation {
    from {
        opacity: 0;
        transform: translateY(200px) scale(0.3);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1100px) {
    #bg_3d {
        width: 600px;
        height: 500px;
    }
}

@media (max-width: 968px) {
    #bg_3d {
        width: 500px;
        height: 450px;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .privacy-container {
        max-width: 100%;
        padding: 15px;
    }

    .privacy-container h2 {
        font-size: 1.8rem;
    }

    .privacy-container h3 {
        font-size: 1.3rem;
    }

    .privacy-container p {
        font-size: 0.95rem;
    }

    .privacy-container ul {
        padding-left: 15px;
    }

    .svg-container {
        position: absolute;
        right: 0;
        height: 0%;
        width: 0%;  
        z-index: 0; 
    }

    #bg_3d {
        display: none;
    }
    
    .head-section svg {
        width: 0%; /* Increase the size of the SVG */
        height: 0%;
    }
    
}

@media (max-width: 500px) {
    .title-sec {
        font-size: 1rem;
        width: 90%;
    }

    .privacy-container h2 {
        text-align: center;
        font-size: 1.5rem;
    }
    
    /* Style for h3 headers */
    .privacy-container h3 {
        font-size: 1rem;
    }
    
    /* Style for paragraphs */
    .privacy-container p {
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
}

/* Auto Scroll Button */
#go-to-top-button {
    position: fixed;
    bottom: 20px;
    right: 120px;
    background: rgba(63, 203, 228, 0.5);
    opacity: 0.5;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10000; 
    transition: all 0.3s linear;
}



@media (min-height: 800px) {
    .head-section {
        height: 600px; /* Adjust section height */
    }
}