:root {
    /* Primary Colors (Brand Identity) */
    --IndiNova-Blue: #1E88E5;
    --Nova-Purple: #6A1B9A;
    /* Secondary Colors (Accents & Highlights) */
    --Tech-White: #F5F5F5;
    --Deep-Charcoal: #212121;
    --Highlight-Yellow: #FFC107;
    /* Gradient Options */
    --Blue-Purple-Gradient: linear-gradient(135deg, #1E88E5, #6A1B9A);
    --Dark-Theme-Gradient: linear-gradient(135deg, #212121, #1E88E5);
}

/* ======= Responsive CSS ======= */

/* For Tablets (768px and below) */
@media screen and (max-width: 768px) {
    .herosection {
        flex-direction: column;
    }

    .herosection img {
        display: none !important;
    }

    .herosection .logo {
        height: 20vh !important;
        font-size: 40px !important;
        width: 100%;
        flex-basis: 50%;
        line-height: 40px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .slogan {
        font-size: 15px !important;
    }

    .herobtn {
        width: 100%;
        padding: 1rem;
    }

    .hero-cta-btns {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .herosection .infosectionContainer {
        justify-content: top !important;
    }

    .heroService {
        font-size: 30px !important;
    }
}


@media (max-width: 1024px) {
    .ourServiceSection {
        display: block;
        height: auto;
        padding: 40px 20px;
    }

    .ourServiceSection .left {
        position: relative;
        height: auto;
        text-align: center;
        padding: 20px;
    }

    .ourServiceSection .left-title {
        font-size: 36px !important;
        line-height: 44px;
        width: 100%;
    }

    .ourServiceSection .left-caption {
        font-size: 14px;
        width: 100% !important;
        margin-top: 20px;
    }

    .ourServiceSection .right {
        position: relative;
        top: auto;
        height: auto;
        padding: 20px 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        justify-content: center;
    }

    .ourServiceSection .right .serviceCard {
        position: static !important;
        transform: none !important;
        width: 90%;
        max-width: 350px;
        margin: 0 auto;
        height: auto;
        min-height: 260px;
    }

    .ourServiceSection .right .serviceCard h1 {
        font-size: 20px;
    }

    .ourServiceSection .right .serviceCard p {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .ourServiceSection .right {
        grid-template-columns: 1fr; /* 1 column on small phones */
    }
}




/* portfolio section: */
@media (max-width: 1024px) {
    .portfolio-container {
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        height: auto;
        padding: 30px 20px;
    }

    .portfolio-left {
        position: relative;
        height: auto;
        padding: 20px 10px;
        text-align: center;
    }

    .left-title {
        width: 100%;
        font-size: 36px;
        line-height: 44px;
    }

    .portfolio-container .portfolio-right {
        position: relative;
        top: unset;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        justify-items: center;
        margin-top: 40px;
    }

    /* For tablets, show 2 columns */
    @media (min-width: 640px) {
        .portfolio-container .portfolio-right {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .project-card {
        position: relative;
        top: unset;
        left: unset;
        margin: 0;
        width: 100%;
        max-width: 350px;
        height: 50vh;
        padding: 20px, 90px !important;
        display: grid;
        justify-content: center;
        align-items: center !important;
        grid-template-rows: 1fr 0.3fr 0.3fr 1fr;
    }

    .project-card h1 {
        font-size: larger;
    }
    .project-card h6 {
        font-size: medium;
    }
    .project-card img {
        width: 100%;
        height: 100px;
        object-fit: contain;
        margin-bottom: 15px;
    }
}



/* contact section */
@media (max-width: 1024px) {
    .contact-container {
        flex-direction: column;
        height: auto;
        padding: 30px 20px;
    }

    .contact-left,
    .contact-container .contact-right {
        position: relative;
        height: auto;
        flex-basis: 100%;
        width: 100%;
        top: unset;
    }

    .contact-left {
        margin-bottom: 40px;
        padding: 20px;
        text-align: center;
    }

    .left-title {
        font-size: 36px;
        line-height: 44px;
        margin-bottom: 20px;
    }

    .project-type-container {
        padding: 0;
    }

    .project-type {
        margin-bottom: 15px;
    }

    .project-type-item {
        font-size: 16px;
    }

    .contact-card {
        position: relative;
        top: unset;
        left: unset;
        width: 100%;
        /* max-width: 500px; */
        /* height: auto; */
        margin: 0 auto 40px auto;
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        border-radius: 30px;
    }

    .contact-card input,
    .contact-card textarea {
        width: 100%;
    }

    .fieldset {
        width: 100%;
        box-sizing: border-box;
    }

    .fieldset-legend {
        text-align: center;
        font-size: 24px;
        margin-bottom: 10px;
    }

    .label {
        font-size: 16px;
    }

    .btn {
        width: 100%;
        font-size: 1rem;
        padding: 12px 10px;
    }
}