@font-face {
    font-family: "aenoik-trial";
    src: url("/aeonik-trial/AeonikTRIAL-Bold.otf");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "aenoik-trial";
    src: url("/aeonik-trial/AeonikTRIAL-Regular.otf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "aenoik-trial";
    src: url("/aeonik-trial/AeonikTRIAL-Light.otf");
    font-weight: 300;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "aenoik-trial", sans-serif;
    /* overflow-x: hidden; */
}

a {
    text-decoration: none !important;
    color: inherit !important;
}

.wrapper {
    min-height: 100vh;
    background-color: red;
}

/* Navbar */
.nav-container {
    height: 5rem !important;
    min-height: 5rem;
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: #FFFFFF;
    /* border-bottom: 2px solid #0f0f0f18; */
}

.logo {
    width: 150px;
}

.list-container {
    height: 100%;
    list-style: none;
}

.list-link {
    font-size: 18px;
    padding: 0 20px;
    text-decoration: none;
    color: #0F0F0F !important;
    font-weight: 400;
}
.link-bold{
    font-weight: 700;
}

.btn-offer {
    width: 180px;
    height: 52px;
    font-size: 18px !important;
    border-radius: 12px !important;
    background-color: #0D0D0D !important;
    color: #F9F9F9 !important;
    font-weight: 500 !important;
    border: none !important;
}

/* Navbar ends */
/* Banner starts */
.banner-wrapper {
    min-height: calc(100vh - 5rem);
    background-image: url("./assets/banner.png");
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    scroll-margin-top: 5rem;
    border-radius: 12px
}

.banner-wrapper .banner-content-wrapper {
    width: 100%;
    padding-bottom: 100px;
}

.upper-banner .bold-heading {
    font-size: 65px;
    font-weight: 500;
    color: #F5F6F8;
    text-transform: capitalize;
}

.lower-banner {
    /* width: 50%; */
    padding-bottom: 10px;
}

.lower-banner .heading {
    font-size: 20px;
    color: #F5F6F8;
}

.btn-banner {
    width: 180px;
    height: 52px;
    font-size: 18px !important;
    border-radius: 12px !important;
    background-color: #2D57FF !important;
    color: #F9F9F9 !important;
    font-weight: 500 !important;
    border: none !important;
}

/* Banner Ends */
/* strive to innovate  */
.innovate-wrapper {
    width: 100%;
}

.innovate-wrapper .innovate-left {
    width: 25%;
}

.innovate-wrapper .innovate-right {
    width: 75%;
}

.innovate-left-text {
    font-size: 22px;
    font-weight: 500;
    color: #B7BBC4;
}

.innovate-right-text {
    font-size: 50px;
    color: #0D0D0D;
}

/* strive to innovate ends */
/* innovate image */
.innovate-img-wrapper {
    /* padding-left: 120px; */
    /* background-color: red; */
    overflow-x: hidden !important;
}

.innovate-img {
    width: 100%;
    height: 500px;
    /* background-color: aquamarine; */
    overflow-x: visible !important;
}

.innovate1 {
    width: 75%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.innovate2 {
    width: 30%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.innovate3 {
    width: 20%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px 0 0 20px;
}

/* innovate img ends */
/* numbers section */
.numbers-wrapper {
    width: 100%;
}

.numbers-wrapper .numbers-box {
    width: 32%;
    height: 100%;
}

.numbers-box .numbers-heading {
    font-size: 120px;
    color: #0D0D0D;
}

.numbers-box .numbers-text {
    font-size: 16px;
    color: #0D0D0D;
}

/* numbers section ends */
/* service section */
.service-wrapper {
    width: 100%;
    background-color: #F5F6F8;
    position: relative;
}

.service-wrapper .service-title {
    font-size: 22px;
    color: #B7BBC4;
}

.service-wrapper .service-box {
    border-bottom: 1px solid #E4E5E6;
}
.service-wrapper .service-box:last-child {
    border-bottom: none;
}

.service-box .service-heading {
    font-size: 85px;
    padding: 20px 0;
    color: #0D0D0D;
    font-weight: 400;
    transition: font-weight 0.5s ease-in-out, color 0.5s ease-in-out;
}
.service-box .heading1{
    padding: 0px 0 !important;
}
.service-box .service-heading:hover {
    font-weight: 700;
    /* color: #f00; */
}

.service-box .img1 {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 400px;
    /* display: none; */
    opacity: 0;
    /* transition: opacity 0.5s ease-in-out;  */
    transform: translateY(-20px);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    pointer-events: none;
}

.service-box:hover .img1 {
    opacity: 1;
    transform: translateY(0);
}

/* service section ends */
/* testimonials */
.testimonial-wrapper {
    width: 100%;
    background-color: #0D0D0D;
    color: #F9F9F9;
    padding: 80px 0;
}
.testimonial-about{
    width: 100%;
    background-color: #F5F6F8 ;
    color: #010101 ;
    padding: 80px 0;
}
 .testimonial-left {
    width: 37%;
}

 .testimonial-right {
    width: 60%;
}

.testimonial-left .quotes {
    width: 40px;
    margin-top: 10px;
}
.testimonial-left .left-heading {
    font-size: 22px;
    opacity: 50%;
    /* color: #B7BBC4; */
}

.testimonial-left .left-img {
    width: 50px;
}

.testimonial-left .left-text {
    /* color: #F5F6F8; */
}

.upper-right {
    border-bottom: 1px solid #707070;
}

.testimonial-right .right-heading {
    font-size: 45px;
    /* color: #F9F9F9; */
}

.testimonial-right .reviewer-img {
    width: 80px;
    /* background-color: red; */
}

.testimonial-right .reviewer-name {
    font-size: 20px;
    font-weight: 600;
    /* color: #FFFFFF; */
}

.testimonial-right .review-date {
    font-size: 16px;
    opacity: 50%;
    /* color: #FFFFFF; */
}

.arrow-box .arrow {
    width: 50px;
}

/* testimonials ends */
/* handle you project  */
.handle-wrapper {
    width: 100%;
    min-height: calc(100vh - 5rem);
    background-image: url("/assets/handle-project.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.handle-wrapper .handle-title {
    font-size: 60px;
    color: #010101;
}

.handle-wrapper .handle-btn {
    width: 150px !important;
    height: 48px !important;
    font-weight: 600;
    border: none;
    background-color: #2D57FF;
    color: #F9F9F9;
    border-radius: 10px;
}

/* handle you project ends */
/* meet  */
.meet-wrapper {
    width: 100%;
    height: calc(100vh - 5rem);
    background-image: url("/assets/meet-designer.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.meet-wrapper .meet-heading {
    font-size: 75px;
    color: #FFFFFF;
}

.meet-wrapper .meet-text {
    font-size: 20px;
    color: #FFFFFF;
}

/* meet ends */
/* footer */
footer {
    width: 100%;
    background-color: #010101;
    color: #F5F6F8;
}

.upper-footer {
    border-bottom: 1px solid #b7bbc45a;
}

.upper-footer .sub-title {
    font-size: 26px;
}

.upper-footer .title {
    font-size: 70px;
}

.upper-footer .btn-footer {
    width: 150px;
    height: 48px;
    font-weight: 600;
    border: none;
    background-color: #2D57FF;
    color: #F9F9F9;
    border-radius: 10px;
}

.middle-footer {
    flex-wrap: wrap;
}

.middle-footer .heading {
    font-size: 20px;
}

.middle-footer .text {
    font-size: 18px;
    color: #B7BBC4;
    opacity: 60%;
}

.bottom-footer {
    overflow-x: hidden;
}

.bottom-footer .image-footer {
    width: 100%;
}

/* footer ends */

/* responsive */
@media screen and (max-width:1600px) {
    .banner-wrapper .banner-content-wrapper {
        padding-bottom: 50px;
    }

    .upper-banner .bold-heading {
        font-size: 55px;
    }

    /* innovate */

    .innovate1 {
        width: 75%;
        height: 100%;
    }

    .innovate2 {
        width: 30%;
        height: 100%;
    }

    .innovate3 {
        width: 20%;
        height: 100%;
    }

    /* handle your project */
    .handle-wrapper .handle-title {
        font-size: 50px;
        color: #010101;
    }

    /* meet */
    .meet-wrapper .meet-heading {
        font-size: 55px;
        color: #FFFFFF;
    }
}

/* 1400px */
@media screen and (max-width:1400px) {

    /* Banner */
    .upper-banner .bold-heading {
        font-size: 50px;
    }

    .lower-banner .heading {
        font-size: 18px;
    }

    /* innovate */
    .innovate-right-text {
        font-size: 42px;
    }

    /* numbers */
    .numbers-box .numbers-heading {
        font-size: 100px;
    }

    /* service */
    .service-box .service-heading {
        font-size: 55px;
        padding: 10px 0;
        color: #0D0D0D;
    }

    .service-box .img1 {
        position: absolute;
        top: 10%;
        right: 30px;
        width: 400px;
    }

    /* footer */
    .upper-footer .sub-title {
        font-size: 22px;
    }

    .upper-footer .title {
        font-size: 48px;
    }
}

/* 1200 */
@media screen and (max-width:1200px) {

    /* Banner */
    .upper-banner .bold-heading {
        font-size: 48px;
    }

    .lower-banner .heading {
        font-size: 16px;
    }

    /* innovate */
    .innovate-right-text {
        font-size: 36px;
    }

    /* numbers */
    .numbers-box .numbers-text {
        font-size: 14px;
    }

    /* testimonial */

    .testimonial-right .right-heading {
        font-size: 28px;
    }

    /* handle */

    .handle-wrapper .handle-title {
        font-size: 40px;
    }

    /* meet  */

    .meet-wrapper .meet-heading {
        font-size: 55px;
    }

    .meet-wrapper .meet-text {
        font-size: 18px;
    }

}

/* 992 */
@media screen and (max-width:992px) {

    /* Banner */
    .banner-wrapper {
        min-height: calc(80vh - 5rem);
    }

    .upper-banner .bold-heading {
        font-size: 60px;
    }

    .lower-banner .heading {
        font-size: 18px;
    }

    /* innovate */
    .innovate-right-text {
        font-size: 32px;
    }

    .innovate-wrapper .innovate-left {
        width: 100%;
    }

    .innovate-wrapper .innovate-right {
        width: 100%;
    }

    .innovate-br {
        display: none;
    }

    /* numbers */
    .numbers-box .numbers-heading {
        font-size: 75px;
    }

    /* service */
    .service-box .service-heading {
        font-size: 40px;
        padding: 10px 0;
        color: #0D0D0D;
    }

    .service-box .img1 {
        position: absolute;
        top: 20%;
        right: 30px;
        width: 320px;
    }

    /* testimonial */

    .testimonial-right .right-heading {
        font-size: 22px;
    }

    .testimonial-left .left-heading {
        font-size: 18px;
    }

    .testimonial-left .quotes {
        width: 20px;
        margin-top: 5px;
    }

    /* hanlde */
    .handle-wrapper {
        background-image: url("/assets/handle-900.png");
    }

    .handle-wrapper .handle-title {
        font-size: 40px;
    }

    /* meet  */
    .meet-wrapper {
        background-image: url("/assets/meet-900.png");
    }

    /* footer */
    .upper-footer .sub-title {
        font-size: 16px;
    }

    .upper-footer .title {
        font-size: 32px;
    }

    .middle-footer .heading {
        font-size: 16px;
    }

    .middle-footer .text {
        font-size: 14px;
        color: #B7BBC4;
        opacity: 60%;
    }
}

/* 786 */
@media screen and (max-width:767px) {

    /* Banner */
    .banner-wrapper {
        min-height: calc(100vh - 5rem);
    }

    .upper-banner .bold-heading {
        font-size: 50px;
    }

    .lower-banner .heading {
        font-size: 18px;
    }

    .banner-br {
        display: block;
    }

    /* innovate */

    /* numbers */
    .numbers-box .numbers-heading {
        font-size: 60px;
        text-align: center;
    }

    .numbers-box .numbers-text {
        font-size: 14px;
        text-align: center;
    }

    .numbers-wrapper .numbers-box {
        width: 70%;
        height: 100%;
        border-bottom: 1px solid grey;
    }

    .numbers-wrapper .numbers-box:last-child {
        border-bottom: none;
    }

    /* service */
    .service-box .service-heading {
        font-size: 36px;
    }

    .service-box .img1 {
        display: none;
    }

    /* testimonials */
    .testimonial-wrapper {
        padding: 40px 0;
    }

     .testimonial-left {
        width: 100%;
    }

    .testimonial-right {
        width: 100%;
    }

    .testimonial-left .quotes {
        width: 20px;
        margin-top: 10px;
    }

    /* meet */
    .meet-wrapper {
        /* background-image: url("/assets/meet-300.png"); */
    }
    
    /* .meet-wrapper .meet-heading {
        font-size: 45px;
    }
    
    .meet-wrapper .meet-text {
        font-size: 16px;
    } */
    /* footer */
    .upper-footer .sub-title {
        font-size: 18px;
    }

    .upper-footer .title {
        font-size: 32px;
    }

    .middle-footer .heading {
        font-size: 16px;
    }

    .middle-footer .text {
        font-size: 14px;
        color: #B7BBC4;
        opacity: 60%;
    }

    .middle-footer section {
        width: 50%;
    }

    .middle-footer .section4 {
        /* width: 100%; */
    }
}

/* 540 */
@media screen and (max-width:576px) {
    .logo {
        width: 120px;
    }

    .btn-offer {
        width: 150px;
        height: 45px;
        font-size: 14px !important;
    }

    /* Banner */
    .upper-banner .bold-heading {
        font-size: 50px;
    }

    .lower-banner .heading {
        font-size: 16px;
    }

    .banner-br {
        display: none;
    }

    /* innovate */

    .innovate-right-text {
        font-size: 26px;
    }

    .innovate-left-text {
        font-size: 20px;
    }

    /* service */
    .service-box .service-heading {
        font-size: 26px;
    }

    /* handle */
    .handle-wrapper {
        background-image: url("/assets/handle-300.png");
    }

    .handle-wrapper .handle-title {
        font-size: 30px;
    }
    /* meet */
    .meet-wrapper {
        background-image: url("/assets/meet-300.png");
    }
    
    .meet-wrapper .meet-heading {
        font-size: 35px;
    }
    
    .meet-wrapper .meet-text {
        font-size: 14px;
        padding-inline: 30px;
    }
    /* testimonial */
    .testimonial-right .right-heading {
        font-size: 20px;
    }

    .testimonial-right .reviewer-img {
        width: 60px;
    }

    .testimonial-right .reviewer-name {
        font-size: 16px;
    }

    .testimonial-right .review-date {
        font-size: 14px;
    }

    .arrow-box .arrow {
        width: 40px;
    }
}