:root {
    --bg-color: black;
    --second-bg-color: #101010;
    --text-color:white;
    --border-color: rgba(26, 33, 53, 1);
    
    --text-color: #475467;
    --white-color: #ffffff;

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

    --primary-color1: #00a359;;

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

    --sec-font-family: "Funnel Display", serif;
    --sec-font-family2: "Atkinson Hyperlegible Next", serif;

    --total-skills: 11;
    --logo-width: 30px;
    --total-logo-width: calc(var(--total-skills) * var(var(--logo-width)));
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


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 */
.head-section {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 500px; /* Adjust section height */
    padding: 0;
    margin: 0;
    margin-top: 4rem;
    z-index: 1;
    overflow: hidden; /* Prevent any overflow outside the section */
}


/* 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;
}


.section-title {
    color: var(--white-color);
    font-family: var(--font-hankenGrotesk);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0;
    margin-top: 2rem;
}

.section-description {
    font-size: 1.2rem;
    align-items: center;
    color: rgb(129, 129, 151);
    font-weight: 500;
    max-width: 950px;
    margin: 0 auto;
    margin-top: 1rem;

    line-height: 1.6;
} 

.section-description span {
    color: white;
    font-family: var(--sec-font-family2);
}


/* Slider Container */
.slider {
    position: relative;
    width: 60vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border-top: 1px solid rgba(102, 202, 255, 0.2);
    border-bottom: 1px solid rgba(102, 202, 255, 0.2);
    border-left: 0px;
    border-right: 0px;
    
    background: linear-gradient(to right, 
    rgba(26, 33, 53, 0) 0%, 
    rgba(26, 33, 53, 0.4) 18%, 
    rgba(26, 33, 53, 1) 42%, 
    rgba(26, 33, 53, 1) 50%, 
    rgba(26, 33, 53, 0.4) 63%, 
    rgba(26, 33, 53, 0) 100%);
    
    padding: 1rem;
    margin-left: 22%;
    margin-top: 5.5rem;
}


/* Skills List */
.skills {
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    white-space: nowrap;
}

/* SVG Styling */
.skills li {
    display: flex;
    align-items: center;
    justify-content: center;
}

.skills svg {
    width: var(--logo-width);
    height: auto;
    opacity: 0.1;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Hover effect */
.skills svg:hover {
    transform: scale(1.15);
    opacity: 1; /* Full visibility on hover */
    cursor: pointer;
}



/* ai Content section */
.ai-unlock-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 2rem;
}

.ai-container {
    max-width: 1200px;
    width: 100%;

    margin-bottom: 3rem;
}

/* Title section styling */
.ai-titles {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align content to the start (left) */
    text-align: left; /* Ensure text is left-aligned */
    gap: 10px;
    margin-bottom: 1.5rem;
}

.ai-titles h2 {
    text-wrap: wrap;
    max-width: 100%; 
    margin-top: 2rem;
}

.ai-titles div {
    display: flex;
    gap: 15px;
    justify-content: flex-start; /* Align paragraphs to the start */
    flex-wrap: wrap; /* Allows wrapping when needed */
    width: 100%;
}

/* Responsive: Stack paragraphs in separate rows for small screens */
@media (max-width: 450px) {
    .ai-titles div {
        flex-direction: column;
        align-items: flex-start;
    }
}



/* AI Title styling - Ensures it stays in one row */
.ai-section-title {
    color: var(--white-color);
    font-family: var(--font-hankenGrotesk);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap; /* Prevents title from wrapping */
}

/* Vertical blue line before the paragraph */
.ai-unlock-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 2rem;
}

.ai-container {
    max-width: 1200px;
    width: 100%;
    margin-bottom: 3rem;
}


.ai-titles p {
    border-left: 1px solid #007BFF;
    padding-left: 15px;
    font-size: 1rem;
    color: #B1B9D2;
    line-height: 1.6;
    max-width: 400px;

    margin-top: 2rem;
    margin-bottom: 2.3rem;
    margin-right: 1rem;
}

/* Responsive Grid Layout */
.row1, .row2, .row3 {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Allows items to wrap */
}

.box {
    flex: 1;
    background: rgba(3, 4, 7, 0.8);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid rgba(80, 99, 128, 0.3);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: start;
    min-height: 325px;
}

/* Headings inside boxes */
.box h3 {
    font-size: 1.2rem;
    font-weight: 500;
    color: #cdd0d9;
    margin-bottom: 5px;
    white-space: nowrap;
}

/* Paragraph inside boxes */
.box p {
    color: #B1B9D2;
    font-weight: 450;
    font-size: 0.88rem;
    letter-spacing: 0.1px;
    line-height: 1.6;
}


/* Common Styles for All Boxes */
.box {
    position: relative;
    overflow: hidden; 
    cursor: pointer;

    transition: background-size 0.5s ease-in-out; /* Smooth zoom effect */
}

/* Pseudo-element for Image Opacity Effect */
.box::before {
    content: ""; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5; /* Default lower opacity */
    background-size: 100% 60%;
    background-position: top center;
    background-repeat: no-repeat;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Added transform for zoom effect */
    z-index: 0; /* Keeps background behind text */
}

/* Hover Effect */
.box:hover::before {
    opacity: 1; /* Full opacity on hover */
    transform: scale(1.1); /* Zoom effect */
}

/* Ensuring text stays above the background */
.box * {
    position: relative;
    z-index: 1;
}

/* Background Images for Specific Boxes */
#row1_box1::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 70%, black 100%), url('images/rag.webp'); 
}

#row1_box2::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 70%, black 100%), url('images/doc_process.webp'); 
}

#row1_box3::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 70%, black 100%), url('images/analytics_bg.webp'); 
}

/* Row 2 */
#row2_box1::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 70%, black 100%), url('images/gen_ai_bg.webp'); 
}

#row2_box2::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 70%, black 100%), url('images/dashboard_bg.webp'); 
}

/* Row 3 */
#row3_box1::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 70%, black 100%), url('images/code.webp'); 
}

#row3_box2::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 70%, black 100%), url('images/vir_bg.webp'); 
}


/* row1 first container */
.row1 .box:first-child {
    flex: 1.5;
}

.row3 .box:nth-child(2) {
    flex: 1.5;
}

/* ********************************************** */
/* career shaper */
#career-section {
    margin-top: 4rem !important;
}

.banner-sub-heading {
    margin-top: 0rem !important;
    font-size: 1.1rem !important;
}


.overview-section {
    display: flex;
    gap: 20px;
}

.overview-content {
    flex: 1;
    text-align: left !important; 
    margin-left: 0rem !important;
}

.overview-image {
    flex: 1;
    display: flex;
    justify-content: center;

    margin-bottom: 2rem;
}

.overview-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;

}

.overview-content h3 {
    color: white;
    font-size: 1.4rem;
}
.overview-content p {
    font-size: 1rem;
    color: #B1B9D2;
    line-height: 1.6;
    max-width: 600px;

    margin-top: 1.2rem;
    margin-right: 1rem;
}
.overview-content span {
    display: block;
    margin-top: 1rem;
}

/*  */
.what-we-do {
    text-align: start;
    margin-bottom: 4rem;
}

.what-we-do h3 {
    font-size: 1.4rem;
    font-weight: 400 !important;
    color: white;
    margin: 2rem 0 !important;
    margin-top: 2rem !important;
}

.what-we-do-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    border-top: 0.5px solid rgba(128, 128, 128, 0.5);
    border-bottom: 0.5px solid rgba(128, 128, 128, 0.5);
    border-radius: 10px;
    align-items: center !important;
    justify-content: center !important;
    
}


.section-title {
    flex: 1;
    min-width: 150px;
    padding: 10px;
    position: relative;
    height: 50px;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    cursor: pointer;
    display: flex;
    align-items: center; /* Center text vertically */
    justify-content: center;
    text-align: center;
    margin: 1rem !important;
    transition: all 0.6s ease-in-out;
}

/* Creating a pseudo-element for the border */
.section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 6px; /* Border thickness */
    background: linear-gradient(to right, rgba(14, 30, 255, 0.5), rgba(0, 0, 0, 1)); 
}


/* Active section title */
.section-title:hover {
    background: linear-gradient(to right, rgba(14, 30, 255, 0.3), rgba(0, 0, 0, 1));     border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.section-title.active-title {
    background: linear-gradient(to right, rgba(14, 30, 255, 0.3), rgba(0, 0, 0, 1)); 
    border: 1px solid rgba(110, 110, 110, 0.3);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: none;
    color: white;
    font-weight: bold;
}


.section-content {
    margin-top: 20px;
    padding: 15px;
    background: transparent;
    
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
}

#career-section-title {
    margin-bottom: 0rem !important;
}

/* career-section2 */
#career-section-p2 {
    margin-top: 1rem !important;
    max-width: 1000px !important;
}

.content {
    display: none; /* Completely remove hidden sections from layout */
    opacity: 0;
    transform: translateY(-20px); /* Start from above */
    width: 90%;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;

    align-items: center;
}

.content.active {
    display: block; /* Ensure only the active section is visible */
    opacity: 1;
    transform: translateY(0); /* Move to normal position */
}

/* Ensure paragraph takes full width */
.content p {
    font-size: 1.3rem;
    color: #B1B9D2;
    line-height: 1.8;
    text-align: center;

    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 2s ease-out, transform 0.5s ease-out;
    width: 100%;
}

.content.active p {
    opacity: 1;
    transform: translateY(0);
}

/* section 3 */
.card-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 10px;
    width: 100%;
    padding: 25px;
    padding-bottom: 2rem;
    justify-content: center;
}

.card {
    background: linear-gradient(to right, rgba(14, 30, 255, 0.2), rgba(0, 0, 0, 1)); 
    border: 1px solid rgba(102, 202, 255, 0.10);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease, opacity 0.5s ease-in-out, box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    min-height: 180px;
    cursor: pointer;
}

/* Hover effect */
.card:hover {
    transform: translateY(-5px) scale(1.05); /* Slight lift effect */
    /* box-shadow: 0px 10px 20px rgba(77, 122, 238, 0.3); Soft glowing effect */
    background: linear-gradient(to right, rgba(14, 30, 255, 0.3), rgba(0, 0, 0, 1)); 
}

/* Animation when appearing */
.card.show {
    opacity: 1;
    transform: translateY(0);
}


.card h3 {
    font-size: 1.4rem;
    color: white;
    margin-bottom: 10px;
}

.card p {
    font-size: 1.1rem;
    color: #B1B9D2;
    line-height: 1.6;
}


/* Responsive RWD */
@media (max-width: 900px) {
    .card-section {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}


@media (max-width: 900px) {
    .overview-section {
        flex-direction: column;
        text-align: center;
    }

    .overview-content {
        text-align: left; /* Ensures text remains left-aligned on all screen sizes */
    }

    .overview-image {
        order: 2; /* Moves image below text */
        justify-content: flex-start;
    }

    .ai-section-title {
        margin-top: 2.5rem;
        font-size: 2rem;
        font-weight: 600;
        line-height: 1;
        white-space: wrap !important; 
    }
    .section-description {
        font-size: 1rem;
    } 
    .ai-titles p {
        font-size: 0.9rem;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }
    .banner-sub-heading {
        margin-top: 1rem !important;
        font-size: 1rem !important;
    }
    
    .box h3 {
        font-size: 1rem;
    }
    
    /* Paragraph inside boxes */
    .box p {
        font-size: 0.9rem;
    }
    
}




/* Responsive Behavior */
@media (max-width: 1024px) {
    /* First row adjustments */
    .row1 {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    /* First box stays in the first row */
    .row1 .box:first-child {
        flex: 1 1 100%; /* Full width */
    }

    /* Second and third boxes move down together in the same row */
    .row1 .box:nth-child(2),
    .row1 .box:nth-child(3) {
        flex: 1 1 calc(50% - 10px); /* Two equal columns */
    }

    /* Second and third rows become a single-column layout (one box per row) */
    .row2, .row3 {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .row2 .box,
    .row3 .box {
        width: 100%; /* Each box takes full width */
    }

    .head-section {
        margin-top: 5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    header {
        height: 1.5rem;
    }
    
}

@media (max-width: 768px) {
    /* On small screens, every row is a single-column layout */
    .row1, .row2, .row3 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .box {
        width: 100%; /* Each box takes full width */
    }
    
}

/* rwd */
@media (max-width: 600px) {
    .ai-section-title {
        margin-top: 2.5rem;
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 1;
        white-space: wrap !important; 
    }
    .section-description {
        font-size: 0.9rem;
    } 

    .card-section {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    }

    .home-demo .home-button {
        font-size: 13px;
        padding: 0.4rem 1.3rem;
    }
    .demos-text {
        font-size: 0.7rem;
    }
    .slider {
        width: 80vw;
        margin-left: 2rem !important;
    }  

    .overview-content p {
        font-size: 0.9rem;
    }

    .what-we-do h3 {
        font-size: 1.2rem;
    } 
    .section-title {
        font-size: 0.9rem !important;
    }
    .content p {
        font-size: 0.9rem;
        line-height: 1.4;
    } 

    .ai-section-title {
        font-size: 1.3rem;
        line-height: 1.2;
    }
    
    .ai-titles p {
        font-size: 0.85rem;
        line-height: 1.5;
    } 
    #career-section-p2 {
        margin-top: 0.8rem !important;
        max-width: 1000px !important;
        font-size: 0.9rem !important;
    }

    .card h3 {
        font-size: 0.95rem !important;
    } 
    .card p {
        font-size: 0.8rem;
    } 


    .overview-image {
        margin-top: 1rem;
    }

    .card-section {
        padding-bottom: 0rem;
    }
}


/* Auto Scroll Button */
#go-to-top-button {
    position: fixed;
    bottom: 20px;
    right: 120px;
    background: rgba(63, 228, 69, 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;
        margin-top: 6rem;
    }
}

@media (min-width: 1300px) {
    .head-section {
        height: 600px;
        margin-top: 6rem;
    }
}