* {
    overflow-x:hidden;
    font-family:'Roboto';
    padding:0;
    margin:0;
    scroll-behavior: smooth ;
    }
    
/* Desktop styles */

    
    .hero-section {
    width:100%;
    height:60vw;
    background-repeat:no-repeat;
    background-size:cover;
    display:flex;
    transition:background-image .5s linear .5s
    }

   

    .fade-in {
    opacity:1;
    transition:opacity .5s ease-in
    }
    
    .fade-out {
    opacity:0;
    transition:opacity .5s ease-out
    }
    
    .hero-text {
    display:flex;
    flex-direction:column;
    gap:20px;
    width:40%;
    position:relative;
    padding:10px 0;
    align-self:center;
    margin-left:60px
    }
    
    .hero-p1 {
    font-size:18px;
    line-height:2.2;
    color:#a5a4a4;
    width:65%
    }
    
    .hero-h1 {
    font-size:60px;
    font-weight:bolder;
    color:#0a0a23
    }
    
    .hero-button {
    background-color:#0a0a23;
    color:#fff;
    border:none;
    padding:10px;
    border-radius:8px;
    box-shadow:0 4px 4px 0 #000;
    width:250px;
    height:50px;
    font-size:16px
    }

    .hero-button:hover{
        cursor: pointer;
    }
    
    .section-2 {
    width:100%;
    height:300px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap
    }
    
    .section2-container {
    width:25%;
    height:100%;
    transition:1s ease;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    align-items:center;
    justify-content:center;
    gap:20px
    }
    
    .section2-container:hover {
    cursor:pointer;
    background-color:#0a0a2323
    }
    
    .section2-container1 {
    background-color:#f9f9f9
    }
    
    .section2-container2 {
    background-color:#F4F4F4
    }
    
    .section2-container3 {
    background-color:#EFEEEE
    }
    
    .section2-container4 {
    background-color:#DEDADA
    }
    
    .s2-img {
    height:90px;
    width:90px;
    background-size:contain;
    background-repeat:no-repeat
    }
    
    .s2-text {
    width:80%;
    text-align:center
    }
    
    .line-s2 {
    width:50px;
    height:2px;
    border-radius:100px;
    background-color:#0a0a23
    }
    
    .section-3 {
    height:700px;
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:80px
    }
    
    .section3-container1 {
    height:80%;
    width:40%;
    border-radius:8px;
    box-shadow:0 4px 4px 0 #0000003b;
    background-repeat:no-repeat;
    background-size:cover
    }
    
    .section3-container2 {
    width:45%;
    height:80%;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly
    }
    
    .section3-h1 {
    margin:0 auto;
    font-size:50px;
    letter-spacing:5px;
    font-weight:1;
    text-align:center
    }
    
    .section3-p1 {
    width:80%;
    text-align:center;
    margin:0 auto;
    font-size:18px;
    line-height:1.6;
    font-weight:400;
    color:#8d8d8dad
    }
    
    .line {
    width:100px;
    height:2px;
    background-color:#0a0a23;
    border-radius:100px;
    margin:0 auto
    }
    
    .s3-container2-blocks {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    padding:7px 0
    }
    
    .c2-block {
    height:150px;
    width:25%;
    background-color:white;
    border-radius: 5px;
    transition:1s ease;
    box-shadow:0 4px 4px 0 #0000003b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: space-evenly;
    border-bottom: 2px solid #0a0a23;
    }

    .c2-img{
        height: 60px;
        width: 60px;
    }
    .c2-text{
        font-size: 20px;
        font-weight: bold;
    }
    

    .c2-block:hover {
    cursor:pointer;
    }
    
    .cta-1 {
    width:100%;
    box-shadow:0 4px 4px 0 #0000003b;
    margin:auto;
    height:350px;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    align-items:center;
    position:relative;
    overflow:hidden
    }
    
    .cta-background {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transform:translateZ(0);
    will-change:transform;
    z-index:-1
    }
    
    .cta1-h1 {
    color:#fff;
    font-size:34px;
    width:70%;
    text-align:center;
    position:relative;
    line-height:1.5;
    letter-spacing:3px
    }
    
    .cta-button1 {
    border-radius:8px;
    background:#FFF;
    box-shadow:0 4px 4px 0 #00000040;
    font-size:16px;
    border:none;
    width:250px;
    height:50px;
    flex-shrink:0;
    flex-grow:0;
    font-weight:700;
    font-size:20px;
    color:#0a0a23;
    position:relative;
    transition:1s ease
    }
    
    .cta-button1:hover {
    width:280px;
    cursor:pointer;
    background-color:#0a0a23;
    color:#fff
    }
    
    .section-5 {
    height:fit-content;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    gap:40px;
    margin-top:80px
    }
    
    .section5-div1 {
    height:200px;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly
    }
    
    .section5-div1 > h1 {
    margin:0 auto;
    font-size:50px;
    letter-spacing:5px;
    font-weight:1
    }
    
    .section5-div1 > p {
    width:60%;
    margin:0 auto;
    line-height:1.4;
    text-align:center;
    font-size:18px;
    line-height:1.6;
    letter-spacing:1px;
    font-weight:400;
    color:#a5a5a5
    }
    
    .section5-div2 {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:30px;
    height:fit-content;
    padding:20px 0;
    width:1200px;
    margin:0 auto
    }
    
    .section5-div3 {
    width:60%;
    margin:0 auto
    }
    
    .section5-div3 > p {
    text-align:center;
    font-size:20px
    }
    
    .service-card {
    height:150px;
    width:380px;
    border-radius:8px;
    box-shadow:0 4px 4px 0 #00000040;
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-items: center;
    justify-content: center;
    }


    
    .service-card:hover {
    cursor:pointer
    }

    .service-content{
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .service-content > p {
        font-size: 16px;
        font-weight: bold;
    }

    .service-content > a{
        text-decoration: none;
        color: #0a0a23;
    }

    .service-content > a:hover{
        text-decoration: underline;
    }
    
    .service-image {
    height:80%;
    width:100px;
    position:relative;
    left:0;
    border-radius:8px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    }
    
    .section-6 {
    height:400px;
    width:100%;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    color:#0a0a23;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    align-items:center;
    background-color:#f1f1f1;
    padding:20px 0
    }
    
    .cta-stats {
    width:60%;
    height:200px;
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    align-items:center
    }
    
    .stat-item {
    height:150px;
    width:30%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:10px
    }
    
    .stat-title {
    font-size:80px
    }
    
    .stat-text {
    font-size:16px
    }
    
    .stat-button {
    height:50px;
    border:none;
    color:#fff;
    font-size:20px;
    width:200px;
    margin:0 auto;
    background-color:#0a0a23;
    border-radius:8px;
    box-shadow:0 4px 4px 0 #00000040;
    transition: 1s ease;
    }

    .stat-button:hover{
        cursor: pointer;
        width: 270px;
    }
    
    .test-title {
    font-size:40px;
    text-align:center;
    color:#0a0a23;
    letter-spacing:2px;
    margin:0 auto;
    font-size:50px;
    letter-spacing:5px;
    font-weight:1
    }
    
    .section-7 {
    width:100%;
    height:400px;
    overflow-x:auto!important;
    display:flex;
    flex-direction:row;
    justify-content:space-evenly
    }
    
    .test {
    height:350px;
    width:25%;
    background-color:#fff;
    box-shadow:0 4px 4px 0 #00000040;
    padding:20px;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    text-align:center;
    color:#0a0a23;
    transition:1s ease;
    align-items:center
    }
    
    .test:hover {
    background-color:#0a0a2309;
    cursor:pointer
    }
    
    .test-profile {
    height:80px;
    width:80px;
    border-radius:100px;
    background-color:#0a0a23
    }
    
    .test-name {
    font-size:24px;
    font-weight:900
    }
    
    .test-company {
    font-size:16px
    }
    
    .test-text {
    font-style:italic;
    width:80%;
    color:#a5a5a5;
    letter-spacing:1px;
    line-height:1.4;
    font-size:14px
    }
    
    .test-text-top {
    color:#a5a4a4;
    font-size:18px;
    letter-spacing:1.4px;
    margin:0 auto;
    text-align:center
    }
    
 
    
    @media only screen and (max-width: 900px) {

        .navbar {
            height: auto; /* Start with fixed height */
            justify-content: space-between; /* Space the logo and the hamburger menu */
            padding: 10px 20px;
            flex-direction: row;
            flex-wrap: wrap;
            transition: height 0.3s ease-in-out; /* Smooth height transition */
            overflow-y: hidden;
        }
    
        .navbar-logo {
            height: 50px;
            margin-left: 0;
        }
    
        .nav-items {
            display: none;
            flex-direction: column;
            width: 100%;
            background-color: white;
            top: 60px;
            left: 0;
            padding: 10px 0;
            text-align: center;
            z-index: 99;
        }
    
        .nav-items.active {
            display: flex;

        }
    
        .nav-link {
            font-size: 18px;
            color: #0a0a23;
            text-decoration: none;
            font-weight: bold;
            width: 100%;


        }
    
        .hamburger-menu {
            display: block;
            margin-right: 40;
        }

    .hero-section {
    height:60vh;
    width:100%;

    }
    
    .hero-text {
    width:80%;
    width:80%;
    align-items:center;
    margin:auto
    }
    
    .hero-h1 {
    font-size:24px;
    width:100%;
    line-height:1;
    text-align:center;
    overflow:hidden
    }
    
    .hero-p1 {
    font-size:16px;
    width:100%;
    text-align:center
    }
    
    .hero-button {
    width:50%;
    height:40px
    }
    
    .section-2 {
    height:fit-content
    }
    
    .section2-container {
    width:50%;
    height:280px;
    align-items:center;
    justify-content:center
    }
    
    .s2-heading {
    font-size:16px
    }
    
    .s2-text {
    font-size:12px
    }
    
    .section-3 {
    flex-direction:column;
    margin-top:30px;
    height:fit-content;
    gap:30px
    }
    
    .section3-container1 {
    width:80%;
    height:400px;
    background-position:right
    }
    
    .section3-container2 {
    width:80%;
    gap:20px;
    margin-top:0;
    height:fit-content
    }
    
    .section3-h1 {
    font-size:24px;
    height:fit-content
    }
    
    .s3-container2-blocks {
    width:100%;
    gap:20px
    }
    
    .c2-block {
    width:30%;
    height:100px
    }
    
    .cta1-h1 {
    width:70%;
    font-size:24px
    }
    
    .cta-button1 {
    width:60%
    }
    
    .section5-div1 {
    height:fit-content;
    gap:30px
    }
    
    .section5-div2 {
    flex-direction:column;
    align-items:center;
    width:100%
    }
    
    .section-6 {
    height:fit-content;
    flex-direction:column;
    gap:30px
    }
    
    .section6-h1 {
    width:60%;
    text-align:center
    }
    
    .cta-stats {
    flex-direction:column;
    height:fit-content;
    width:100%
    }
    
    .stat-item {
    width:100%;
    text-align:center;
    }
    
    .section-7 {
    flex-direction:column;
    height:fit-content;
    align-items:center;
    gap:30px
    }
    
    .test {
    width:80%
    }
    
   
}