html {
    scroll-behavior: smooth;
}

.mazzard-regular {
    font-family: "Mazzard-Regular", sans-serif;
    font-weight: 400;
    font-style: normal;
}
body {
    overflow-x: hidden;
    font-family: "Mazzard-Regular", sans-serif;
    font-weight: 400;
    font-style: normal;
    position: relative;
    min-height: 100vh; /* Ensure body fills the viewport height */
    margin: 0;
    padding: 0;
    background: #0f0f0f;
}
.overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@font-face {
    font-family: "Mazzard-bold";
    src: url("../fonts/MazzardH-Bold.otf") format("otf");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Mazzard-Regular";
    src: url("../fonts/MazzardH-Regular.otf") format("otf");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Mazzard-semibold";
    src: url("../fonts/MazzardH-SemiBold.otf") format("otf");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Mazzard-light";
    src: url("../fonts/MazzardH-Light.otf") format("otf");
    font-weight: normal;
    font-style: normal;
}
.mazzard-semibold {
    font-family: "Mazzard-semibold", sans-serif;
    font-weight: 600;
    font-style: normal;
}
.mazzard-bold {
    font-family: "Mazzard-bold", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.poppins-light {
    font-family: "Mazzard-light", sans-serif;
    font-weight: 300;
    font-style: normal;
}
.lato-regular {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
}
.space-mono-regular {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: normal;
}

.space-mono-regular-italic {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: italic;
}

.space-mono-bold {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-style: normal;
}

.space-mono-bold-italic {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-style: italic;
}
.titillium-web-extralight {
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.titillium-web-light {
    font-family: "Titillium Web", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.titillium-web-regular {
    font-family: "Titillium Web", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.titillium-web-semibold {
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.titillium-web-bold {
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.titillium-web-black {
    font-family: "Titillium Web", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.titillium-web-extralight-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.titillium-web-light-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.titillium-web-regular-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.titillium-web-semibold-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.titillium-web-bold-italic {
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    font-style: italic;
}
.montserrat-regular > {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}
.montserrat-bold > {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
.home-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url("../images/Grainy Gradient.png");
    background-size: cover;
    background-position: center;
}

.home {
    width: 100%;
    height: 100%; /* Adjust height as needed */
    background-image: url("../images/home.png"); /* Set multiple background images */
    background-size: cover;
    background-position: center;
}
.menu {
    z-index: 9999;
}
/* Style for the overlay image */
.overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* z-index: 9999; */
    background-image: url("../images/Vector.png"); /* Specify the overlay image */
    opacity: 1; /* Adjust opacity as needed */
}

/* You can adjust other styles as needed */
/* Style for the top right overlay image */
.top-right-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%; /* Adjust width as needed */
    height: 100%; /* Adjust height as needed */
    background-image: url("../images/topRight.png"); /* Specify the top right overlay image */
    background-size: center;
    background-repeat: no-repeat;
    opacity: 1; /* Adjust opacity as needed */
}
.nav-bg {
    background-color: rgba(18, 23, 33, 0.5); /* 50% opacity */
}
.nav-fs li a {
    font-size: 20px;
}

.br-color {
    border-color: #8c7d8c;
}

.main-heding-span {
    background: -webkit-linear-gradient(90deg, #00a3b8 1.97%, #0f68db 99.8%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* color: linear-gradient(90deg, #00A3B8 1.97%, #0F68DB 99.8%); */
}
.main-font-size {
    font-size: 92px !important;
}
.side-image {
    top: -180px;
    left: 90px;
}
.border-color {
    border-color: #1066dc;
}
.top-img {
    left: 27%;
    top: 40%;
}

.about {
    width: 100%;
    height: 1075px; /* Adjust height as needed */
    background-image: url("../images/about.png"); /* Set multiple background images */
    background-size: cover;
    background-position: center;
}
.overlapping-div {
    position: absolute;
    bottom: -500px;
    left: 0;
    width: 100%;
    height: 50%; /* Adjust the height as needed */
    z-index: 1; /* Ensure it's above other content */
}
.about-font {
    font-size: 67px;
    line-height: 1.1em;
}
/* Media query for big screens */
.service-p-width {
    width: 60%;
}
/* tx */

/* Auto layout */
/* display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 64px 56px 32px;
gap: 8px;

position: absolute;
width: 382px;
height: 245px;
left: 141px;
top: 434px; */
/* Define the initial background */
.services-box-color {
    background: linear-gradient(
        96.79deg,
        rgba(25, 212, 239, 0.45) -62.92%,
        rgba(90, 90, 90, 0) 66.32%
    );
    transition: background 0.7s ease-in-out;
}

/* Define the hover background */
.services-box-color:hover {
    background: linear-gradient(
        135deg,
        rgba(25, 212, 239, 0.45) 0%,
        rgba(90, 90, 90, 0) 50%
    );
}

/* .services-border-color{
    border-image: linear-gradient(#19D4EF ,#0E6BD9) 30;
    border-radius: 16px;

} */
.border-gradient {
    border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to bottom, #19d4ef, #0e6bd9);
    border-image-slice: 1;
}
.border-gradient-button {
    position: relative;
    display: inline-block;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to right, #19d4ef, #0e6bd9);
    border-image-slice: 1;
    overflow: hidden;
    background-color: transparent;
    z-index: 1;
    transition: color 0.4s ease-out;
}

.border-gradient-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, #00a3b8 1.97%, #0f68db 99.8%);
    z-index: -1;
    transition: transform 0.4s ease-out;
    transform: scaleX(0);
    transform-origin: left;
}

.border-gradient-button:hover::before {
    transform: scaleX(1);
}
@keyframes carouselAnim {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(calc(-100% + (6 * 300px)));
    }
}

@media only screen and (max-width: 768px) {
    .carousel-items {
        animation: carouselAnim 60s infinite alternate linear;
    }

    .carousel-items:hover .carousel-focus {
        animation-play-state: paused;
    }

    @keyframes carouselAnim {
        from {
            transform: translate(0, 0);
        }
        to {
            transform: translate(calc(-100% + (5 * 300px)));
        }
    }
}
.button-bg {
    background-image: linear-gradient(90deg, #00a3b8 1.97%, #0f68db 99.8%);
}
.carousel-focus:hover {
    transition: all 0.8s;
    transform: scale(1.1);
}

.numbers {
    background: linear-gradient(
        to right,
        #0f68db 0%,
        #00a3b8 37%,
        #00a3b8 75%,
        #0f68db 100%
    );
}
.choose {
    background: linear-gradient(
        to bottom right,
        #186eb4 16%,
        #2fa2d0 57%,
        #55f4fc 100%
    );
}
.custom-line {
    line-height: 1.3em !important;
}
.extra-small-font {
    font-size: 9px;
}
/* .background-image {
    background-image: url('../images/all.png');
    background-repeat: repeat-y;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
} */
.background-image {
    background-color: #000000;
}
/* .overlay-trans {
    background: linear-gradient(
        to right,
        #001a72 100%,
        #0123ff 27%,
        #0f0f0f 100%,
        #29587a 14%,
        #f400f9 26%,
        #ffffff 1%
    );
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 100%;
} */
.service-icon {
    background: #0f0f0f;
}
.overlay-trans {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    right: 0px;
    bottom: 0;
    /* bottom: 682px; */
    background: #0f0f0f;
    overflow: hidden;
    opacity: 0.99;
}
.top-svg {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    z-index: 100;
    background-image: url("../images/top-svg.svg");
    background-repeat: no-repeat;
}
.right-svg {
    position: absolute;
    height: 100%;
    width: 100%;
    /* left: 460px; */
    top: 0px;
    z-index: 10;
    background-image: url("../images/right-svg.svg");
    background-repeat: no-repeat;
}
.left-svg {
    position: absolute;
    height: 100%;
    width: 100%;
    left: -50px;
    top: 600px;
    /* z-index: 10; */
    background-image: url("../images/left-svg.svg");
    background-repeat: no-repeat;
}
.overlay-trans-about {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    right: 0px;
    top: 185px;
    /* bottom: 682px; */
    background: #0f0f0f;
    overflow: hidden;
    opacity: 0.99;
}
.custom-height{
    height: 230%;
}
.overlay-trans-services {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    right: 0px;
    top: 185px;
    /* bottom: 682px; */
    background: #0f0f0f;
    overflow: hidden;
    opacity: 0.99;
}
.overlay-trans-contact {
    position: absolute;
    height: 100vh;
    width: 100%;
    left: 0px;
    right: 0px;
    bottom: 0;
    /* bottom: 682px; */
    background: #0f0f0f;
    overflow: hidden;
    opacity: 0.99;
}
/* red */
.red {
    position: absolute;
    width: 787.36px;
    height: 479.19px;
    left: -100.03px;
    top: 425px;
    background: #001a72;
    opacity: 0.1;
}

/* orange */
.orange {
    position: absolute;
    width: 15%;
    height: 100%;
    right: 0;
    top: 0;
    background: rgba(41, 88, 122, 0.1);
    transform: rotate(-23.69deg);
}

/* blue */
.blue {
    position: absolute;
    width: 10%;
    height: 100%;
    right: 0;
    top: 0;
    background: rgba(1, 35, 255, 0.2);
    /* opacity: 0.8; */
    transform: rotate(23.69deg);
}

/* pink */
.pink {
    position: absolute;
    width: 5%;
    height: 100%;
    right: 0;
    top: 0;
    background: rgba(244, 0, 249, 0.2);
    /* opacity: 0.7; */
    transform: rotate(-23.69deg);
}

/* blur */
.blur {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(271.059px);
}

/* Texture */
.texture {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: url("../images/Texture.svg"); /* Replace 'yourtexture.png' with your texture image */
    mix-blend-mode: overlay;
}
/* @keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.mobile-menu {
    animation: slideDown 2s ease-out forwards;
} */
@media screen and (max-width: 1280px) {
    .main-font-size {
        font-size: 72px !important;
    }
    .side-image {
        bottom: 180px;
        left: 44px;
    }
    .overlay-trans-about {
        top: 0;
    }
    .custom-height{
        height:280%
    }
}
@media screen and (max-width: 1400px) {
    .main-font-size {
        font-size: 72px !important;
    }
    .side-image {
        bottom: 180px;
        left: 44px;
    }
    .overlay-trans-about {
        top: 0;
    }
    .custom-height{
        height:300%
    }
}
@media screen and (max-width: 1080px) {
    .main-font-size {
        font-size: 68px !important;
    }
    .side-image {
        bottom: 300px;
        left: 84px;
    }
    .overlay-trans-about {
        top: 0;
    }
    .custom-height{
        height:280%
    }
}
@media only screen and (max-width: 580px) {
    body {
        height: auto !important;
        overflow-x: hidden;
    }
    .main-font-size {
        font-size: 36px !important;
    }
    .top-img {
        left: 25% !important;
        top: 25% !important;
    }
    /* .background-image {
        height: 680vh;
    } */
    .about-font {
        font-size: 32px;
        line-height: 1.1em;
    }
    .top-svg {
        left: 0;
        /* top: -20% */
        background-size: 100%;
    }
    .right-svg {
        background-image: url("../images/Vector(1).svg");
        background-size: 30%;
        left: 300px;
    }
    .left-svg {
        background-size: 50%;
    }
    .custom-height{
        height:320%
    }
}
@media screen and (min-width: 1441px) {
    /* body{
        width: 1440px;
        margin: auto;
        background-color: #000;
    } */
    /* .background-image {
        height: 480vh;
    } */
    .right-svg {
        left: 460px;
    }
    .custom-height{
        height:370%
    }
}