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

body {
    background-color: #FFFFFF;
}

.navbar-container {
    width: 100%;
    background-color: #050503;
    display: block;
    position: fixed;
    top: -100px;
    transition: top 0.5s ease-in-out;
    z-index: 999;
}

.navbar-visible {
    top: 0; 
}

.menu-div {
    display: flex;
    justify-content: center;
}

.navbar {
    padding: 25px 0px;
    display: flex;
    justify-content: space-between;
}

.navbar-collapse {
    justify-content: center;
}

.navbar-brand img {
    width: 300px;
}

.navbar-nav .nav-link {
    margin-right: 1rem;
    font-family: Inter;
    font-size: 20px;
    font-weight: 400;
    line-height: 24.2px;
    color: #FFFFFF !important;
    cursor: pointer;
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


    .navbar-nav .nav-link:hover {
        color: #FFDD0C !important;
    }

.navbar a.nav-link.active {
    color: #FFDD0C !important;
}

.btn-yellow {
    background-color: #000000;
    color: #FFDD0C;
    border-radius: 35px;
    text-decoration: none;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    width: fit-content;
    border: 1px solid #FFDD0C;
}

    .btn-yellow i {
        color: #FFFFFF;
    }

    .btn-yellow:hover {
        background-color: #FFDD0C;
        color: #000000;
    }
.btn-black-yellow {
    background-color: #FFDD0C;
    color: black;
    border-radius: 35px;
    text-decoration: none;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    width: fit-content;
    border: 1px solid #FFDD0C;
}

    .btn-black-yellow i {
        color: #FFFFFF;
    }

    .btn-black-yellow:hover {
        background-color: black;
        color: #FFDD0C;
    }

.btn-nav {
    font-family: Inter;
    font-size: 20px;
    font-weight: 600;
    line-height: 24.2px;
    color: #FFFFFF!important;
}

.navbar-collapse {
    justify-content: end;
}


.navbar-toggler {
    border: none;
    background: transparent;
    position: relative;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    padding: 0px;
}

    .navbar-toggler .bar {
        width: 100%;
        height: 3px;
        background-color: #FFFFFF;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .navbar-toggler.collapsed .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .navbar-toggler.collapsed .bar:nth-child(2) {
        opacity: 0;
    }

    .navbar-toggler.collapsed .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }


@media (max-width: 992px) {
    /*.navbar-container {
        position: static;
    }*/

    .navbar {
        padding: 15px 0px;
    }

   /* .nav-link {
        display: contents;
    }
*/
    .menu-div {
        width: 100% !important;
        margin-top: 25px;
        justify-content: start;
    }

    .navbar-nav .nav-item {
        text-align: start;
        margin-bottom: 15px;
    }

    .button-div{
        display: flex;
        width: 100%;
    }
        .navbar-nav .nav-item .nav-link {
            padding: 9px;
            margin: 0;
            border-radius: 22px;
        }

            .navbar-nav .nav-item .nav-link:hover {
                color: #FFFFFF !important;
                background-color: #FFDD0C;
                transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
            }

    .nav-link.active {
        color: #FFFFFF !important;
        background-color: #FFDD0C !important;
        transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    }

    .navbar-collapse {
        position: fixed;
        top: 0px;
        left: 0;
        width: 70%;
        height: 100%;
        background-color: #050503;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 1050;
        transform: translateX(-100%); /* Hidden by default */
        transition: transform 0.3s ease-in-out;
        visibility: hidden;
        opacity: 0;
        padding: 1rem;
        display: flex;
        flex-direction: column;
    }

        .navbar-collapse.open {
            transform: translateX(0); /* Slide in */
            visibility: visible;
            opacity: 1;
            display: flex;
            padding: 1rem 2rem;
        }

    .no-scroll {
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        visibility: hidden;
    }


    .navbar-collapse.open + .overlay {
        visibility: visible;
        opacity: 1;
    }

    .navbar-collapse {
        justify-content: start;
    }
}

.search-dropdown{
    position: relative;
}

/* Dropdown hidden by default */
.search-dropdown-menu {
    display: none;
    position: absolute !important;
    background: white;
    padding: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    top: 40px;
    right:0;
    width: 300px;
    border-radius: 30px;
}

/* Show dropdown on hover */
.search-dropdown:hover .search-dropdown-menu {
    display: block;
}

/* Styling for input box */
.search-input {
    width: 100%;
    padding: 5px;
    border: none;
    box-shadow: none;
    outline: none;
}

    .search-icon{
        color: #FFFFFF !important;
    }

    .search-input.active,
    .search-input:hover {
        border: none;
        box-shadow: none;
        outline: none;
    }

/* Ensure dropdown stays open when clicking */
.search-dropdown.active .search-dropdown-menu {
    display: block;
}


/* hero section */

.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

    .hero video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }

.hero-content {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(100px);
    animation: fadeIndown 1.5s ease-out forwards;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hero-content p {
    font-family: Inter;
    font-size: 28px;
    font-weight: 400;
    line-height: 45px;
    margin-bottom: 1.5rem;
    color: #FFFFFF;
}

    .hero-content .btn {
        font-family: Inter;
        font-size: 27.38px;
        font-weight: 600;
        line-height: 33.14px;
    }

@keyframes fadeIndown {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Why Choose Us Section */

.why-umbrella-section {
    padding: 50px 0;
    background: url('../images/why-choose-us-bg.webp') no-repeat center center;
    background-size: cover;
    position: relative;
    border-top-right-radius: 189px;
}

    .why-umbrella-section h2 {
        font-family: Inter;
        font-size: 39.4px;
        font-weight: 400;
        line-height: 54.72px;
        color: #FFFFFF;
    }

    .why-umbrella-section h3 {
        font-family: Poppins;
        font-size: 39.4px;
        font-weight: 700;
        line-height: 54.72px;
        color: #FFFFFF;
    }

    .why-umbrella-section p {
        font-family: Inter;
        font-size: 21.89px;
        font-weight: 400;
        line-height: 32.83px;
        color: #FFFFFF;
    }

    .why-umbrella-section .bold-text {
        font-family: Inter;
        font-size: 21.89px;
        font-weight: 600;
        line-height: 32.83px;
    }

    .why-umbrella-section .btn {
        font-family: Inter;
        font-size: 21.89px;
        font-weight: 600;
        line-height: 26.49px;
        padding: 10px 20px;
    }


.right-side-img {
    max-width: 100%;
    height: auto;
}


/* product-solutions-section */

.product-solutions-section {
    /*background: url('../images/blend-line.webp') no-repeat center;
    background-size: cover;*/
    padding: 50px 0px;
    margin: 50px auto;
    position: relative;
}

.product-item {
    background: url('../images/blend-line.webp') no-repeat center;
    background-size: contain;
    padding: 50px 30px;
}

.product-solution-card {
    display: flex;
    box-shadow: 3.9px 5.85px 23.39px 0px #6D8DAD40;
    border: 0.97px solid #FFFFFF;
    background: linear-gradient(101.24deg, rgba(255, 255, 255, 0.3) 14.79%, #FFFFFF 73.01%, rgba(255, 255, 255, 0) 108.82%);
    border-radius: 33px;
    padding: 20px;
    min-height: 450px;
    align-items: center;
}


.solutions-title {
    font-family: Poppins;
    font-size: 55.1px;
    font-weight: 700;
    color: #000000;
}

.solutions-description {
    font-family: Inter;
    font-size: 28.16px;
    font-weight: 400;
    line-height: 39.12px;
    color: #000000;
    margin-top: 15px;
}



/* innovative-section */

.innovative-section {
    padding: 50px 0;
   /* background: url('../images/innovation-line.webp') no-repeat center;
    background-size: cover;*/
    position: relative;
}

    .innovative-section h2 {
        font-family: Inter;
        font-size: 39.4px;
        font-weight: 400;
        line-height: 54.72px;
        color: #000000;
    }

        .innovative-section h2 span {
            font-family: Poppins;
            font-size: 39.4px;
            font-weight: 700;
            line-height: 54.72px;
        }

    .innovative-section p {
        font-family: Inter;
        font-size: 21.89px;
        font-weight: 400;
        line-height: 32.83px;
        color: #16252C;
    }

    .innovative-section .bold-text {
        font-family: Inter;
        font-size: 21.89px;
        font-weight: 600;
        line-height: 32.83px;
        color: #000000;
    }

    .innovative-section .btn {
        font-family: Inter;
        font-size: 21.89px;
        font-weight: 600;
        line-height: 26.49px;
    }


/* products-section */


.products-section {
    padding: 50px 0;
    background: url('../images/productd-sectiong-bg.webp') no-repeat center center;
    background-size: cover;
    position: relative;
    border-top-left-radius: 189px;
}

    .products-section h2 {
        font-family: Inter;
        font-size: 48px;
        font-weight: 400;
        line-height: 54.72px;
        color: #FFFFFF;
        margin-bottom: 20px;
        width: 50%;
    }

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.product-card {
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(197, 194, 194, 0.2) 0%, rgba(44, 42, 42, 0.2) 46%, rgba(0, 0, 0, 0) 100%);
    text-align: center;
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .product-card img {
        max-width: 100%;
        height: 200px;
    }

    .product-card .tag {
        box-shadow: 6.52px 6.52px 0px 0px #000000;
        background-color: #FFDD0C;
        color: #000000;
        font-family: Inter;
        font-size: 18.64px;
        font-weight: 600;
        line-height: 20.99px;
        padding: 7px 10px;
        border-radius: 12px;
        display: inline-block;
        margin: 10px 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    .product-card p {
        font-family: Inter;
        font-size: 20.36px;
        font-weight: 400;
        color: #FFFFFF;
        margin :10px 0 0;
    }

.pagination-controls .btn {
    padding: 8px 20px;
    margin: 0 10px;
    background: linear-gradient(180deg, rgba(197, 194, 194, 0.2) 0%, rgba(44, 42, 42, 0.2) 46%, rgba(0, 0, 0, 0) 100%);
}

#next-btn {
    padding: 8px 30px;
}

/* micro-vertical-section  */
.micro-vertical-section {
    background: url('../images/microarient-bg-img.webp') no-repeat center;
    background-size: cover;
    position: relative;
}

    .micro-vertical-section h4 {
        font-family: Inter;
        font-size: 39.4px;
        font-weight: 400;
        line-height: 54.72px;
        color: #FFFFFF;
    }

    .micro-vertical-section h2 {
        font-family: Inter;
        font-size: 39.4px;
        font-weight: 400;
        line-height: 54.72px;
        color: #FFFFFF;
    }

.micro-vertical-slider .micro-vertical-card {
    text-align: center;
    padding: 20px;
    background-color: transparent;
}

    .micro-vertical-slider .micro-vertical-card .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
        margin-bottom: 10px;
    }

        .micro-vertical-slider .micro-vertical-card .icon img {
            width: 70px;
            height: auto;
        }

    .micro-vertical-slider .micro-vertical-card p {
        font-family: Inter;
        font-size: 19.47px;
        font-weight: 400;
        color: #FFFFFF;
        margin: 0;
    }

.micro-vertical-section .btn {
    font-family: Inter;
    font-size: 21.89px;
    font-weight: 600;
    line-height: 26.49px;
}


/* blog section */
.blog-section h3 {
    font-family: Inter;
    font-size: 39.4px;
    font-weight: 400;
    line-height: 54.72px;
    color: #000000;
}

.blog-section h2 {
    font-family: Poppins;
    font-size: 39.4px;
    font-weight: 700;
    line-height: 54.72px;
    color: #000000;
}

.blog-section p {
    font-family: Inter;
    font-size: 24px;
    font-weight: 400;
    line-height: 54.72px;
    color: #000000;
}

.highlights-slider .card {
    border: 1px solid #DDDDDD;
    background-color: #FFFFFF;
    border-radius: 2px;
}

    .highlights-slider .card img {
        width: 100%;
        border-radius: 5px 5px 0 0;
    }

.blog-card .card-body a {
    color: #000000;
    font-family: Poppins;
    font-size: 21px;
    font-weight: 500;
    line-height: 36px;
    text-decoration: none;
}

.blog-card .card-body a:hover {
    color: #000000;
}

.blog-card .card-body {
    padding: 10px;
}

.btn-center{
    display: flex;
    justify-content: center;
    align-items: center;
}

.blog-section .btn {
    font-family: Inter;
    font-size: 21.89px;
    font-weight: 600;
    line-height: 26.49px;
}


/* contact us section */


.contact-section {
    background: url('../images/back-line.png');
    background-size: auto;
    background-repeat: no-repeat;
    background-position: bottom;
    padding: 50px 0px 60px;
}

.contact-us-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-info {
    border-right: 2px solid #FFDD0C;
    width: 48% !important
}


    .contact-info h2 {
        font-family: Inter;
        font-size: 36.9px;
        font-weight: 500;
        line-height: 79.07px;
        letter-spacing: -2.0159504413604736px;
        color: #000000;
    }

    .contact-info h3 {
        font-family: Poppins;
        font-size: 56px;
        font-weight: 700;
        line-height: 79.07px;
        letter-spacing: -2.0159504413604736px;
        color: #000000;
        margin-bottom: 10px;
    }

    .contact-info p {
        font-family: Poppins;
        font-size: 20px;
        font-weight: 400;
        line-height: 35px;
        color: #000000;
        margin-bottom: 20px;
        width: 80%;
    }

.contact-details {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

.detail-box {
    display: flex;
    align-items: start;
    gap: 10px;
}

    .detail-box img{
        width: 115px;
        height: 95px;
    }

    .detail-text {
        font-family: Inter;
        font-size: 23.75px;
        font-weight: 400;
        line-height: 47.5px;
        color: #000000;
    }

    .detail-text span {
        font-family: Poppins;
        font-size: 32px;
        font-weight: 500;
        line-height: 47.5px;
    }

.yellow-line {
    background-color: #FFDD0C;
    height: 60%;
    width: 3px;
}

.contact-form h2 {
    font-family: Poppins;
    font-size: 39.4px;
    font-weight: 700;
    line-height: 67.36px;
    margin-bottom: 15px;
    color: #000000;
}

.contact-form .form-label {
    font-family: Inter;
    font-size: 20px;
    font-weight: 400;
    line-height: 40.69px;
    letter-spacing: -0.3224559724330902px;
    color: #000000;
    margin:12px 0px;
}

.contact-form .form-control {
    border: 1.14px solid #0000002E;
    background-color: #FEFDFD;
    border-radius: 8px;
    height: 50px;
}

.contact-form textarea {
    height: auto !important;
}

.contact-form .btn {
    font-family: Segoe UI;
    font-size: 23.75px;
    font-weight: 600;
    line-height: 31.59px;
    padding: 8px 50px;
}




/* footer section */

.footer-section {
    background-color: #ffffff;
    padding: 0;
    color: #161616;
    position: relative;
    padding: 50px 0px 0px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 20px;
}

    .footer-logo img {
        width: auto;
        height: 77px;
    }

.footer h2 {
    font-family: Futura ND;
    font-size: 51.6px;
    font-weight: 400;
    line-height: 67.34px;
    color: #000000;
}

.footer-desc {
    font-family: Poppins;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 40px;
    color: #16252C;
}

.footer-section address {
    font-family: Poppins;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: #16252C;
    margin: 0px;
}

    .footer-section address strong {
        font-family: Poppins;
        font-size: 23.8px;
        font-weight: 500;
        line-height: 35.7px;
        color: #000000;
    }

.footer-section .emails{
    margin-bottom: 30px;
}

.footer-section .emails strong {
    font-family: Poppins;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    color: #000000;
}

.footer-section .emails a {
    text-decoration: none;
    font-family: Poppins;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: #16252C;
}

.footer-title {
    font-family: Poppins;
    font-size: 23.8px;
    font-weight: 700;
    line-height: 35.7px;
    color: #000000;
    margin-bottom: 15px;
}

.footer-links {
    list-style: none;
    padding: 0;
}

    .footer-links li {
        margin-bottom: 30px;
    }

        .footer-links li a {
            text-decoration: none;
            color: #16252C;
            font-family: Inter;
            font-size: 19.04px;
            font-weight: 400;
        }

            .footer-links li a:hover {
                color: #f9b700;
            }

.social-icons {
    position: fixed;
    padding-inline-start: 0px;
    list-style: none;
    top: 50%;
    right: 0;
    margin-bottom: 0px;
    z-index: 1;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 40px;
    color: #16252C;
    text-decoration: none;
}

.social-icon i{
    font-size: 25px;
}

    .social-icon:hover {
        border: 1.19px solid #FFDD0C;
        border-top-left-radius:34px;
        border-bottom-left-radius: 34px;
        color: #FFDD0C;
    }

.footer-bottom {
    background-color: #FFDD0C;
    text-align: center;
    padding: 5px;
}

    .footer-bottom p {
        color: #000000;
        font-family: Segoe UI;
        font-size: 18.32px;
        font-weight: 600;
        line-height: 45.81px;
        margin: 0;
    }

.copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #161616;*/
    background: url('../images/contact-us-page-hero-img.webp') no-repeat center center/cover;
    text-align: center;
    padding: 30px;
}

    .copyright p {
        font-family: Inter;
        font-size: 19.04px;
        font-weight: 400;
        line-height: 52.36px;
        color: #FFFFFF;
        margin: 0;
    }


/* contact us page */

.contact-hero-section {
    background: url('../images/contact-us-page-hero-img.webp') no-repeat center center/cover;
    color: #fff;
    padding: 40px 20px;
    text-align: left;
    min-height: 300px;
    display: flex;
    align-items: end;
}

    .contact-hero-section h2 {
        color: #FFDD0C;
        font-family: Inter;
        font-size: 39.4px;
        font-weight: 400;
        line-height: 54.72px;
        margin-bottom: 10px;
    }

    .contact-hero-section p {
        font-family: Poppins;
        font-size: 39.4px;
        font-weight: 700;
        line-height: 54.72px;
        color: #FFFFFF;
        margin: 0;
    }


.contact-card {
    background: url('../images/Rectangle 37.svg') no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 33px;
    /*border: 2px solid #FFFFFF;*/
    box-shadow: 4px 6px 24px 0px #6D8DAD26;
    padding: 30px;
    position: relative;
}

.contact-information {
    max-width: 600px;
}

    .contact-information h6 {
        font-family: Inter;
        font-size: 22.3px;
        font-weight: 700;
        line-height: 26.99px;
        color: #FFDD0C;
    }
    .contact-information h2 {
        font-family: Poppins;
        font-size: 36.48px;
        font-weight: 700;
        line-height: 54.72px;
        color: #000000;
    }
    .contact-information a,
    .contact-information p {
        margin: 5px 0;
        font-family: Segoe UI;
        font-size: 19.16px;
        font-weight: 400;
        line-height: 25.49px;
        color: #16252C;
    }

.contact-icon img {
    width: 64px;
    height:42px;
    margin-right: 10px;
}

.contact-card-details {
    display: flex;
    align-items: start;
    margin-bottom: 10px;
}

.contact-logo {
    position: absolute;
    top: 0;
    right: 30px;
    max-width: 400px;
    z-index: -1;
    pointer-events: none;
    transition: transform 6.5s ease-in-out, max-width 6s ease-in-out, top 5s ease-in-out, right 5s ease-in-out; 
}

    /* Enlarges, Rotates, and Moves When Active */
    .contact-logo .animatecontactlogo {
        transform: scale(1.5) rotate(40deg); /* Grows & Rotates */
        max-width: 550px; /* Increases Size */
        top: -80px;
        right: 100px;
    }


/* About Us Page */

.bottom-border {
    border-bottom: 1px solid #DADADA;
}

.breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    align-items: center;
    margin-bottom: 20px;
}

    .breadcrumb a {
        font-family: Inter;
        font-size: 20px;
        font-weight: 400;
        color: #1E1C1C;
    }

.breadcrumb-item.active {
    color: #000000;
    font-family: Inter;
    font-size: 20px;
    font-weight: 500;
}

.left-padding{
    padding-left: 15px;
}


.left-right-content h3 {
    font-family: Inter;
    font-size: 39.4px;
    font-weight: 400;
    line-height: 54.72px;
    color: #FFDD0C;
}

.left-right-content h4 {
    font-family: Poppins;
    font-size: 39.4px;
    font-weight: 700;
    line-height: 54.72px;
    color: #000000;
}

.left-right-content p {
    font-family: Inter;
    font-size: 21.89px;
    font-weight: 400;
    line-height: 32.8px;
    color: #1E1C1C;
}

.left-img {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

.right-img {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.mission-section {
    background: url('../images/mission-card-bg.webp') no-repeat center center/cover;
    padding: 60px;
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: center;
    border-radius: 60px;
    overflow: hidden;
}

.mission-card-content {
    position: absolute;
    opacity: 0;
    transition: opacity 3s ease-in-out;
    max-width: 700px;
    z-index: 1;
}

    .mission-card-content.active {
        opacity: 1;
    }

.mission-card-content h5 {
    font-family: Inter;
    font-size: 39.4px;
    font-weight: 400;
    line-height: 54.72px;
    color: #FFDD0C;
}

.mission-card-content h4 {
    font-family: Poppins;
    font-size: 39.4px;
    font-weight: 700;
    line-height: 54.72px;
    color: #FFFFFF;
}

.mission-card-content p {
    font-family: Inter;
    font-size: 21.89px;
    font-weight: 400;
    line-height: 32.8px;
    color: #FFFFFF;
}

.design-element {
    position: absolute;
    top: -40px;
    right: -120px;
    transition: all 2s ease-in-out;
    pointer-events: none;
}


    .design-element.animate {
        top: -50px;
        right: -180px;
        transform: rotate(50deg);
    }

.inspiration-section {
    padding: 50px 20px;
    background-color: #fff;
}

    .inspiration-section h6 {
        font-family: Inter;
        font-size: 39.4px;
        font-weight: 400;
        line-height: 54.72px;
        color: #000000;
    }
    .inspiration-section h2 {
        font-family: Poppins;
        font-size: 39.4px;
        font-weight: 700;
        line-height: 54.72px;
        margin-bottom: 40px;
        color: #000000;
    }

.inspiration-card {
    background: url('../images/inspire-card-bg.webp') no-repeat center center/cover;
    border-radius: 33px;
    padding: 20px;
    box-shadow: 4px 6px 24px 0px #6D8DAD26;
    transition: transform 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    height: 100%;
}

    .inspiration-card:hover {
        transform: translateY(-5px);
    }

    .inspiration-card span {
        font-family: Inter;
        font-size: 32px;
        font-weight: 400;
        line-height: 45px;
        color: #FFDD0C;
        display: block;
        margin-top: 20px;
    }

    .inspiration-card h5 {
        font-family: Poppins;
        font-size: 32.4px;
        font-weight: 700;
        line-height: 45px;
        color: #000000;
    }

    .inspiration-card p {
        font-family: Inter;
        font-size: 21.89px;
        font-weight: 400;
        line-height: 32.83px;
        color: #16252C;
    }


.our-story-section {
    /*background: url('../images/Vector 19.webp') no-repeat;
    background-size: contain;*/
    padding: 3rem 0;
}

.our-story-content h3 {
    font-family: Inter;
    font-size: 39.4px;
    font-weight: 400;
    line-height: 54.72px;
    color: #000000;
}

.our-story-content h4 {
    font-family: Poppins;
    font-size: 39.4px;
    font-weight: 700;
    line-height: 54.72px;
    color: #000000;
}

.our-story-content p {
    font-family: Inter;
    font-size: 21.89px;
    font-weight: 400;
    line-height: 32.83px;
    color: #16252C;
}

.about-us-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url('../images/contact-us-page-hero-img.webp') no-repeat center center/cover;
    padding: 60px 20px;
}

    .about-us-bottom p {
        font-family: Inter;
        font-size: 19.04px;
        font-weight: 400;
        line-height: 40px;
        color: #FFFFFF;
    }

    .about-us-bottom span {
        color: #FFDD0C;
    }

/* Solution Page */

.solution-first-section h2 {
    font-family: Inter;
    font-size: 39.4px;
    font-weight: 400;
    line-height: 54.72px;
    color: #FFDD0C;
}

.solution-first-section h3 {
    font-family: Poppins;
    font-size: 34.4px;
    font-weight: 700;
    line-height: 54.72px;
    color: #000000;
}

.solution-first-section p {
    font-family: Inter;
    font-size: 18.89px;
    font-weight: 400;
    line-height: 32.8px;
    color: #1E1C1C;
}


.solutions-why-choose {
    padding: 60px 15px;
    text-align: center;
}

    .solutions-why-choose h2 {
        font-family: Poppins;
        font-size: 39.4px;
        font-weight: 700;
        line-height: 54.72px;
        color: #000000;
    }

    .solutions-why-choose .solutions-subtitle {
        font-family: Inter;
        font-size: 20px;
        font-weight: 400;
        line-height: 35px;
        color: #000000;
        margin-bottom: 40px;
        width: 80%;
    }

.solutions-card {
    background-color: #fff;
    border: 1.84px solid #FFFFFF;
    border-radius: 30px;
    box-shadow: 3.67px 5.51px 22.05px 0px #6D8DAD26;
    padding: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    text-align: left;
}

    .solutions-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    }

    .solutions-card h4 {
        font-family: Poppins;
        font-size: 29.4px;
        font-weight: 500;
        line-height: 32.76px;
        color: #FFDD0C;
        margin-top: 20px;
    }

    .solutions-card p {
        font-family: Inter;
        font-size: 20.11px;
        font-weight: 400;
        line-height: 30.16px;
        color: #16252C;
        margin-top: 10px;
    }


.features-section {
    padding: 60px 15px;
    background-color: #ffffff;
}

    .features-section h2 {
        font-family: Poppins;
        font-size: 39.4px;
        font-weight: 700;
        line-height: 54.72px;
        text-align: center;
        color: #000000;
    }

    .features-section p.subtitle {
        font-family: Inter;
        font-size: 20px;
        font-weight: 400;
        line-height: 35px;
        text-align: center;
        color: #000000;
        width: 65%;
        margin-bottom: 40px;
    }

.features-card {
    background-color: #FFFFFF;
    border: 1.84px solid #FFFFFF;
    border-radius: 30px;
    box-shadow: 3.67px 5.51px 22.05px 0px #6D8DAD26;
    padding: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: start;
}

    .features-card a {
        font-family: Poppins;
        font-size: 29.4px;
        font-weight: 500;
        line-height: 32.76px;
        color: #FFDD0C;
        text-decoration: none;
        margin-bottom: 10px;
    }

    .features-card a:hover {
        color: #FFDD0C;
    }

    .features-card p {
        font-family: Inter;
        font-size: 20.11px;
        font-weight: 400;
        line-height: 30.16px;
        color: #16252C;
        margin-top: 10px;
        width: 90%;
    }

.features-image {
    background-color: #e5e5e5;
    height: 600px;
    border-radius: 10px;
}

.engagement-section {
    padding: 50px 15px;
    /*background: url('../images/Vector 19.webp') no-repeat;*/
    background-size: auto;
    background-position: bottom;
    margin-bottom: 20px;
}

    .engagement-section .engagement-heading {
        font-family: Inter;
        font-size: 36.4px;
        font-weight: 400;
        line-height: 54.72px;
        color: #000000;
    }

    .engagement-section .engagement-subtitle {
        font-family: Poppins;
        font-size: 36.4px;
        font-weight: 700;
        line-height: 54.72px;
        display: block;
    }

    .engagement-section p {
        font-family: Inter;
        font-size: 21.89px;
        font-weight: 400;
        line-height: 32.83px;
        color: #16252C;
        margin-bottom: 20px;
    }

    .engagement-section .engagement-text {
        font-family: Inter;
        font-size: 21.89px;
        font-weight: 600;
        line-height: 32.83px;
        color: #000000;
        margin-bottom: 20px;
    }

    .engagement-section .btn {
        font-family: Inter;
        font-size: 21.89px;
        font-weight: 600;
        line-height: 26.49px;
        padding: 12px 20px;
    }

    .engagement-section .engagement-image {
        border-top-left-radius: 120px;
        border-bottom-left-radius: 120px;
        height: 450px;
    }


    #gear-icon, #clock-icon {
        animation: float 2s infinite ease-in-out;
    }

@keyframes float {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(2px, -2px);
    }

    50% {
        transform: translate(0, -4px);
    }

    75% {
        transform: translate(-2px, -2px);
    }

    100% {
        transform: translate(0, 0);
    }
}

#mic-icon {
    position: fixed;
    bottom: 0px;
    cursor: pointer;
    z-index: 1000;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #mic-icon img{
        width: 87px;
    }
#scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 10px;
    display: none;
    z-index: 1000;
    font-size: 20px;
    align-items: center;
    justify-content: center;
}

.scroll-arrow {
    background-color: #000000;
    color: #FFDD0C;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
}

/* Circle Progress */
.progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

    .progress-circle circle {
        stroke-dasharray: 126;
        stroke-dashoffset: 126; 
        stroke-linecap: round;
        transition: stroke-dashoffset 0.2s linear;
    }

    .progress-circle circle {
        stroke: #FFDD0C;
    }

.product-solution-card h2 {
    font-family: Poppins;
    font-size: 36px;
    font-weight: 700;
    line-height: 45.89px;
    color: #161616;
    margin-bottom: 20px;
}

.product-solution-card .product-description {
    font-family: Inter;
    font-size: 24px;
    font-weight: 400;
    line-height: 43.16px;
    color: #16252C;
}

/*.solution-hero {
    background: url('../images/ai-solution.webp') no-repeat center center/cover;
}*/

.solution-hero-bg {
    background: url('../images/first-sollution.webp') no-repeat center center/cover;
}

.solutions-key-feature h2 {
    font-family: Inter;
    font-size: 39.4px;
    font-weight: 400;
    line-height: 54.72px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000000;
}

    .solutions-key-feature h2 span {
        font-family: Poppins;
        font-size: 39.4px;
        font-weight: 700;
        line-height: 54.72px;
        display: block;
    }

.hero-services-section {
    position: relative;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/3rd-section-bg-big.webp') no-repeat center;
    background-size: contain;
    z-index: -1; /* Place behind content */
    transform: translateY(-300px) scale(0.5);
    opacity: 0;
    transition: transform 2s ease, opacity 2s ease;
}

    .background-image.animate {
        transform: translateY(0) scale(1);
        opacity: 1;
    }


.hero-services-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(358.21deg, rgba(255, 255, 255, 0) -15.77%, rgba(255, 255, 255, 0) 6.52%, #FFFFFF 95.68%);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.hero-services-content h2 {
    font-family: Poppins;
    font-size: 49.05px;
    font-weight: 600;
    line-height: 73.58px;
    margin-bottom: 16px;
    color: #000000;
}

    .hero-services-content p {
        font-family: Inter;
        font-size: 20px;
        font-weight: 400;
        line-height: 35px;
        color: #16252C;
        margin-bottom: 24px;
        width: 90%;
    }

    .hero-services-content .text-highlight {
        font-family: Poppins;
        font-size: 24px;
        font-weight: 500;
        line-height: 35px;
        color: #000000;
    }

    .hero-services-content .btn {
        background-color: #000000;
        font-family: Inter;
        font-size: 24.78px;
        font-weight: 600;
        line-height: 29.99px;
        color: #FFDD0C;
        padding: 15px 30px;
    }


/* Sliding Solutions Menu */
.solutions-menu {
    position: fixed;
    top: 110px;
    left: -100%;
    width: 100%;
    background-color: #111;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    transition: left 0.4s ease;
    z-index: 1050;
    padding-bottom: 30px;
}

    .solutions-menu .solutions-header {
        background-color: #1a1a1a;
        padding: 1rem;
        border-bottom: 1px solid #333;
    }

    .solutions-menu .list-group-item {
        background-color: transparent;
        color: #fff;
        border: none;
        transition: background-color 0.3s ease;
    }

        .solutions-menu .list-group-item:hover {
            background-color: #6f42c1;
            color: #fff;
        }
/* Show the menu */
.solutions-menu.active {
    left: 0; /* Slides into view */
}


.solutions-line{
    height: 100%;
    width: 1px;
    background: #FFFFFF;
}

.solution-main-heading-2 {
    font-family: Inter;
    font-size: 40px;
    font-weight: 400;
    line-height: 35px;
    color: #FFFFFF;
}

.solution-subheading a {
    font-family: Inter;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    color: #FFDD0C;
    display: block;
    text-decoration: none;
    margin-bottom: 7px;
}

.solution-subheading img{
    width: 40px;
}

.solution-subheading p {
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    color: #FFFFFF;
    text-decoration: none;
}

.blog-heading {
    font-family: Poppins;
    font-size: 60px;
    font-weight: 500;
    line-height: 75px;
    color: #000000;
}

.features2 .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    box-shadow:0px 0px 27px 4px #6d8dad2e;
    border: 1px solid transparent;
    border-image-slice: 1;
    border-radius: 40px;
}

.card-gradient-1 {
    background: linear-gradient(180deg, rgb(255 255 255 / 50%) 0%, rgb(255 221 15 / 24%) 47.5%, rgb(220 169 16 / 75%) 100%);
}
/* Yellow Gradient */
.card-gradient-2 {
    /*background: linear-gradient(180deg, rgb(255 255 255 / 50%) 0%, rgb(255 221 15 / 24%) 47.5%, rgb(220 169 16 / 75%) 100%);*/
    background: black;
}


.f-16{
    font-size: 16px;
}
.f-20 {
    font-size: 20px;
}

.f-24 {
    font-size: 24px;
}

.f-25 {
    font-size: 25px;
}

.f-26 {
    font-size: 26px;
}

.f-28 {
    font-size: 28px;
}

.f-30{
    font-size: 30px;
}

.f-34 {
    font-size: 34px;
}

.f-60 {
    font-size: 60px;
}

.f-45{
    font-size: 45px;
}

.f-40 {
    font-size: 40px;
}



.lh-36{
    line-height: 36px;
}
.head {
    color: black;
}

.radius10{
    border-radius: 10px;
}

.head:hover {
    color: black;
}

.text-custom {
    color: #FFDD0C !important;
}

.width-cats {
    overflow-x: scroll;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none;
}

    .width-cats::-webkit-scrollbar {
        display: none; /* For Chrome, Safari, and newer Edge */
    }

.categories {
    padding-inline-start: 0px;
    list-style: none;
    display: inline-block;
}

    .categories li {
        display: inline-block;
    }

        .categories li a {
            display: inline-block;
            font-size: 19px;
            margin: 10px;
            color: #000;
            text-decoration: none;
            padding: 3px 20px;
            border-radius: 18px;
            font-family: var(--semibold) !important;
            background: #FFDD0C;

            /*background-image: linear-gradient(179deg, rgb(151 71 255 / 24%) 15%, rgb(224 30 90 / 18%) 80%);*/
        }

            .categories li a:hover {
                background: linear-gradient(0deg, #FFDD0C -10.28%, #000 33.14%);
                color: #fff;
            }

.blog_featured_img img {
    max-height: 450px;
    width: 100%;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

.more-blog{
    display: block;
    text-decoration: none;
    color: black;
    margin-bottom: 20px;
}

.more-blog p:last-child{
    font-size: 20px;
}


/* contact us new section */

.bg-singapore {
    background-image: url(../assets/images/contact-bg-singapore.webp);
}

.ccard {
    border: 1px solid;
    /* border-image-source: linear-gradient(180deg, #E01E5A -37.13%, #9747FF 62.87%); */
    background: transparent;
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border: 0;
}

.ccard .card-body{
    padding: 1rem 0px;
}


    .ccard .loc-title {
        font-size: 21.59px;
        font-weight: 700;
        line-height: 28.72px;
        text-align: center;
        color: rgb(22, 37, 44);
        margin-bottom: 18px;
        text-transform: uppercase;
        border-bottom: 1px solid black  ;
        padding-bottom: 15px;
    }

    .ccard .loc-text {
        font-size: 12px;
        font-weight: 400;
        line-height: 25.85px;
        text-align: left;
        color: rgb(22, 37, 44);
        font-family: var(--regular);
        margin: 0px;
    }

    .ccard a {
        font-size: 12px;
        font-weight: 400;
        line-height: 25.85px;
        text-align: left;
        color: rgb(22, 37, 44);
        font-family: var(--regular);
        margin: 0px;
    }

    .ccard .card-body {
        /*background: radial-gradient(144.98% 66.67% at 50% 50.25%, rgba(23, 11, 40, 0.7) 0%, rgba(23, 11, 40, 0.7) 24.1%);*/
        background: url('../images/Frame 43.svg') no-repeat center center/cover;
        border-radius: 33px;
        border: 2px solid #FFF;
        box-shadow: 4px 6px 24px 0px rgba(109, 141, 173, 0.15);
    }

/*.bg-hongkong {
    background-image: url(../images/hongkong.jpg);
}

.bg-srilanka {
    background-image: url(../images/srilanka.jpg);
}

.bg-india {
    background-image: url(../images/india.jpg);
}

.bg-philippines {
    background-image: url(../images/philipines.jpg);
}

.bg-singapore {
    background-image: url(../images/contact-bg-singapore.webp);
}

.bg-pakistan {
    background-image: url(../images/Daftarkhwan_Alpha.webp);
}*/

.solution-navs .nav-pills{
    display: flex;
    flex-direction: column;
}

.solution-navs .nav-pills .nav-item{
    display: contents;

}


    .solution-navs .nav-pills .nav-link {
        color: #FFFFFF;
        font-family: Inter;
        font-size: 24px;
        font-weight: 400;
        line-height: 35px;
        text-align: start;
        margin-bottom: 15px;
        border-bottom: 4px solid #111;
    }

        .solution-navs .nav-pills .nav-link.active,
        .solution-navs .nav-pills .nav-link:hover {
            background-color: #FFDD0C !important;
            border-radius: 4px;
            color: #000000 !important;
            border-bottom: 4px solid white !important;
        }

.text-grey {
    color: #16252C !important;
}

.termofserice-section p {
    font-family: Inter;
}

.termofserice-section h1,
.termofserice-section h2 {
    font-family: Poppins;
    color: #000000;
}

.solution-body {
    height: 500px;
    overflow: auto;
    padding-top: 30px;
    padding-bottom: 70px;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

    .solution-body::-webkit-scrollbar {
        display: none; /* For Chrome, Safari, and Opera */
    }

.row-gap {
    row-gap: 30px;
}

.product-item .img-fluid{
    max-width: 80%;
}

.product-item .col-md-4 {
    display: flex;
    justify-content: center;
}

/*.map-icon{
    width: 23px !important;
}*/

.text-yellow {
    color: #FFDD0C !important;
}

.contact-locations {
    background: url('../images/line.webp') no-repeat;
    background-size: contain;
    background-position: bottom;
    padding: 50px 0px 60px;
    font-family: Poppins !important;
}

.solution-hero {
    height: 560px;
    overflow: hidden;
    border-top-left-radius: 120px;
    border-bottom-left-radius: 120px;
}

.custom-img-fluid {
    height: 100%;
    max-width: 100%;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.solution-first-section{
    align-items: center;
}
.menu-title {
    font-family: Poppins;
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color:white;
    margin:0px;
}

.inter {
    font-family: Inter !important;
}

.poppins {
    font-family: Poppins !important;
}

.h-300{
    height: 300px !important;
}

.lh-70{
    line-height: 70px;
}

.fw-700{
    font-weight: 700 !important;
}

.card-gradient-2 .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}