.custom-navbar {
    background: transparent;

    img {
        display: block;
        content: url(../image/logo.svg) !important;
        width: 160px;
    }

    .menu-icon {
        color: white !important;
    }
}

.custom-navbar.white {
    transition: .2s ease-in-out !important;
    background: white;

    .menu-icon {
        color: black !important;
    }

    img {
        display: block;
        content: url(../image/logo-dark.svg) !important;
        width: 160px;
    }
}


.hr-silver {
    width: 100%;
    border-top: 1px solid silver;
    height: 1px;
}

@property --round {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin {
    0% {
        --round: 0deg;
    }

    100% {
        --round: 360deg;
    }
}

.portfolio-inner-hero {
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: end;
    padding-bottom: 10% !important;

    @media(max-width:992px) {
        .t-header-white {
            font-size: 22px;
            text-align: center;
        }
    }

    @media(max-width:576px) {
        .t-header-white {
            font-size: 18px;
        }
    }
}

@media(max-width:992px) {
    .portfolio-inner-hero {
        /* align-items: center; */
        justify-content: center;
        padding: 0;
        padding-bottom: 30% !important;
    }
}

.portfolio-spec {
    background: white;
}

.portfolio-inner-card {
    width: 100%;
    height: 100%;

    .t-header {
        margin-bottom: 16px !important;
    }

    @media(max-width:992px) {
        .t-header {
            font-size: 30px;
        }
    }

    @media(max-width:576px) {
        .t-header {
            font-size: 22px;
        }
    }
}

.badge-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;

    .portfolio-inner-badges {
        display: flex;
        width: max-content;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 10px 20px;
        border-radius: 24px;
        font-size: 16px;
        border: 1px solid var(--color-1);
        transition: .15s ease-in-out;

        &:hover {
            background: var(--color-1);
            color: white;
        }
    }
}

@media(max-width:576px) {
    .badge-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 6px;
    }
}

/* video section  */

.video-section {
    background: white;
}

.main-video {
    display: block;
    width: 80%;
    aspect-ratio: 16 / 9;
    background: lightgray;
}

@media (max-width:768px) {
    .main-video {
        width: 100%;
    }
}

/* video section end */

/* objectives */

.objectives {
    background: white;
}

.objectives .custom-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}

.objectives .custom-card .sub-header {
    font-size: 22px;
}

.objectives .custom-card .bi {
    font-size: 40px;
}

.objectives .variable-width {
    width: 80%;
}

@media (max-width:800px) {
    .objectives .variable-width {
        width: 100%;
    }
}

/* objectives end*/

/* key features */

@property --round {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin {
    0% {
        --round: 0deg;
    }

    100% {
        --round: 360deg;
    }
}

.key-features {
    background: white;
}

.key-features-border {
    width: 100%;
    height: 100%;
    background: conic-gradient(from var(--round), white, var(--color-1));
    animation: spin 2s linear infinite;
    position: relative;
    border-radius: 6px;
}

.key-features-card {
    width: 100%;
    height: 100%;
    background: white;
    padding: 30px 15px;
    transition: .15s ease-in-out;
}

.key-features .t-header {
    padding-left: 20px !important;
}

.key-features-card .sub-header {
    font-size: 22px;
    margin-bottom: 10px !important;
}

.key-features-card:hover {
    scale: .99;
    border-radius: 4px;
}


/* key features end */

/* portfolio inner pages end*/


@media all and (max-width:992px) {
    .banner {
        height: 30dvh;
    }
}

@media all and (max-width:768px) {
    .collage-container {
        columns: 2;
    }
}

@media all and (max-width:576px) {
    .collage-container {
        columns: 1;
    }
}

svg {
    width: 46px !important;
    height: 46px !important;
}