/*common*/
.container {
    transition: transform 0.5s ease-in-out;
    transform-origin: center;
}

.Home {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.Home video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.opacity {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(43, 43, 43, 0.7);
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    color: white;
    text-align: center;
}

.opacity2 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: black;
}

.l-to-r {
    position: relative;
}

.l-to-r:after {
    position: absolute;
    content: "";
    width: 0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: black;
    z-index: -1;
    transition: width 0.5s;
}

.l-to-r:hover:after {
    width: 100%;

}

.t-to-b {
    position: relative;
}

.t-to-b:after {
    position: absolute;
    content: '';
    height: 0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: black;
    z-index: -1;
    transition: height 0.5s;
}

.t-to-b:hover:after {
    height: 100%;
}

.forBorder {
    width: 100%;
    height: 20px;
    padding-top: 20px;
    margin: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: montserrat, sans-serif;
}

button {
    font-family: inherit;
}

.btn-opasity {
    transition: opacity 0.5s;
}

.btn-opasity:hover {
    opacity: 0.8;
}

.h2 {
    text-align: center;
    text-transform: capitalize;
}

.dis-y {
    padding: 120px 0px;
}

.line:after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin: auto;
    margin-top: 10px;
    background-color: #6195ff;
}

.before_final .line{
    position: relative;
    right: 30px;
}

.whyUs .line{
    position: relative;
    left: 30px;
}

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

body {
    font-family: 'Varela Round', sans-serif;
}

.clar {
    clear: both;
}

.Header {
    position: fixed;
    /*position: absolute;*/
    width: 100%;
    z-index: 10;
    transition: background-color 0.5s;
}

.menu-toggle {
    display: none;
}

.Header .logo {

    width: 40%;
    float: left;
    font-size: 30px;
    /*font-weight: 100;*/
    color: white;
}

.Header .nav {

    width: 60%;
    float: left;
}

.nav>li {
    list-style: none;
    display: inline-block;

}

.nav>li>a {
    text-decoration: none;
    color: white;
    display: block;
    padding: 0px 10px;
    position: relative;
    right: 50px;
    top: 10px;
}

.Header .nav>li>a.active:after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #6195ff;
    transition: 0.5s;
}

.Header .nav>li>a:after {
    content: "";
    display: block;
    width: 0;
    height: 3px;
    background-color: #6195ff;
    transition: 0.5s;
}

.Header .nav>li>a:hover:after {
    width: 100%;
}

.price-btn {
    margin-top: 20px;
}

.price-button {
    border: 1px solid #6195ff;
    padding: 10px 20px;
    background: none;
    color: #6195ff;
    cursor: pointer;
}


/*Home section*/

.Home .box2 {
    position: absolute;
    width: 65%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.Home .word1 {
    color: white;
    font-size: 2rem;
    text-transform: uppercase;

}

.Home .word2 {
    color: white;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 20px 0px;
    line-height: 20px;
}

.Home .btn {
    min-width: 160px;
    padding: 10px 0px;
    border-radius: 5px;
    border: 0;
    cursor: pointer;
    font-size: 15px;
}

.Home .btn1 {
    width: 350px;
    height: 50px;
    margin-right: 10px;
    border-radius: 100px;
    background-color: #6195ff;
    color: white;

}






/* our tracks */
.before_final {
    position: relative;
    top: 130px;
}

.carousel-container {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 50px;
    transition: scroll-behavior 0.5s;
}

.carousel-container::-webkit-scrollbar {
    display: none;
}

.testimonial-card {
    min-width: 800px;
    height: 400px;
    flex-shrink: 0;
    margin-right: 20px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
}

.testimonial-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.testimonial-card:first-child {
    margin-left: 0;
}

.testimonial-card:last-child {
    margin-right: 0;
}








/* Portofolio Section */
.portifilio {
    margin-top: 20px;
}

.p-con {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* Distributes boxes evenly */
    gap: 20px;
    /* Adds spacing between boxes */
}

.p-con .p-box1 {
    width: calc(33.333% - 40px);
    /* Responsive width with space for margin */
    margin-bottom: 60px;
    position: relative;
    padding: 20px;
    background-color: #f8f9fa;
    /* Add a light background to the boxes */
}

.p-box1.mg {
    margin: 0;
}

.p-con video {
    width: 100%;
    /* Ensure the video takes up full width */
    height: auto;
}

.ll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s;
}

.p-box1:hover .ll {
    opacity: 1;
    visibility: visible;
}

.lll {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    line-height: 35px;
}

.p-box1 a {
    background-color: #2d6ceb;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    transition: transform 0.5s;
}

.p-box1:hover a {
    transform: translateY(-10px);
}

.p-box1 .cate {
    color: #4a82f2;
    font-size: 20px;
    transition: transform 0.5s;
}

.h3 {
    transition: transform 0.5s;
}

.p-box1:hover .cate,
.p-box1:hover .h3 {
    transform: translateY(-10px);
}



/*servers section*/
.c-con {
    overflow: hidden;
}

.slogan_logo {
    position: relative;
    top: 40px;
}

.c-con .s-box1 {
    width: 30%;
    float: left;
    text-align: center;
    padding: 50px 5px;

    margin: 0 10px;
}

.s-box1 .mg {
    margin: 0.3%;
    margin: auto;
}

.s-box1:hover .s-word1 {
    color: white;
}

.s-box1:hover .p2 {
    color: white;
}

.icon2 {
    color: #6195ff;
    margin-right: 200px;
    position: relative;
    top: 20px;
}

.s-word1 {
    text-transform: capitalize;
}

.p2 {
    line-height: 1.6;
    margin-bottom: 10px;
    transition: color 0.5s;
    font-size: 14px;
}

.Get_Your_app {

    height: 700px;
    width: 97.5vw;
    /* Full viewport width */
    margin: 0;
    /* Remove margin */
    padding: 0;
    /* Optional: Remove padding */
    text-align: center;
    /* Center the text */

    /* background-color: #ffffff; */
    /* Light grey to contrast with the white video */
    padding: 10px;
    border-radius: 10px;
}




/* servier section */
.server {
    position: relative;
    top: 90px;
    height: 705px;
    margin-bottom: 40px;
}

.h3AndP {
    width: 50%;
    float: left;
    text-align: left;
}

.about-3 {
    align-items: center;
}

.about-3 .h2 {
    text-align: center;
}

.about-3 .line3:after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin-top: 10px;
    position: relative;
    left: 110px;
    background-color: #6195ff;
}

.mcu {
    margin-top: 100px;
    color: #999;
    line-height: 1.5;
    font-size: 17px;
    margin-bottom: 20px;
}

.lp {
    list-style: none;
}

.p7 {
    margin-bottom: 25px;

}

.yes {
    color: #6195ff;
    border: 1px solid #999;
    border-radius: 50%;
    padding: 6px;

}

.img8 {
    width: 100%;
}

.pl {
    list-style: none;
    float: right;
    position: relative;
    right: 20%;
}

.k {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #d1cece;
    margin: 8px 7px;
    border-radius: 90%;
    cursor: pointer;
}

.pl .k:hover {
    background-color: #6195ff;
}




/*Developers Profiles*/
.team {
    margin-top: 300px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 300px;
}

.team2 {
    margin-top: 20px;
}


.team-item {
    width: 30%;
    float: left;
    text-align: center;
    margin: 20px 15px;
    line-height: 2;
    border: 1px solid #f9f9f9;
    padding: 20px 0;
    flex: 0 0 30%;
    margin: 20px 15px;
    /* Other properties remain the same */

}

.team-item:hover .jone-doe2 {
    color: white;
}

.team-item:hover .web-designer2 {
    color: #6195ff;
}

.team-img {
    padding: 20px 0;
    position: relative;
    transition: opacity 0.5s;
    margin: auto;
    text-align: center;
}

.developerPhoto {
    border-radius: 20px;
}

.team-item:hover .team-img {
    opacity: 0.5;
    visibility: visible;
}

.jone-doe2 {
    text-transform: capitalize;
    color: rgb(119, 118, 118)
}

.web-designer2 {
    text-transform: uppercase;
    font-size: 15px;
    color: #999
}

.team-icon {

    width: 20px;
    float: right;
    top: 0;
    position: relative;
    right: 64.5px;
    background-color: #6195ff;
    border: 1px solid #6195ff;
    color: white;
    width: 30px;
    transition: 0.5s;
    display: none;
    cursor: pointer;

}

.team-item:hover .team-icon {

    display: block;

}



/* Clanit's reviews */
.number2 {
    position: relative;
    margin-top: 40px;
}

.bg_rev {
    border: 20px;
}

.number2-item {
    width: 30%; /* Default width for desktop */
    float: left;
    margin: 20px 90px; /* Default margins for desktop */
    position: relative;
    bottom: 10px;
}



.img-h3-h4 .steve {
    float: left;
}

.jone-doe {
    position: relative;
    left: 15px;
    color: gray;
    text-transform: capitalize;
}

.web-designer {
    position: relative;
    left: 15px;
    color: #6195ff;
    text-transform: uppercase;
    font-size: 13px;
}

.steve {
    border-radius: 50%;
}

.mcu2 {
    margin-top: 50px;
}

.img-h3-h4 {
    margin-top: 10px;
    position: relative;
    top: 30px;
}

.p9 {
    font-size: 15px;
    color: gray;
    width: 150%;
    line-height: 1.6;
}

.review-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

.seeMoreReviews {
    font-size: 16px;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    color: gray;
    position: relative;
    bottom: 10px;
}

/*contact-section*/
.contact {
    margin-bottom: 700px;
}

.contact-item {
    width: 30%;
    float: left;
    text-align: center;
    margin: auto;
    margin-top: 40px;
    margin-left: 30px;
    line-height: 2;
}

.C-I {
    color: #6195ff;
}

.contact-p {
    color: #999;
}

.contact-inputs {
    margin-top: 20%;
    text-align: center;
}

.two-inputs {
    margin: 0 20px;
    padding: 10px 20px;
    margin: 10px 20px;
}

.text-box {
    width: 30%;
    height: 40px;
    margin: 0 5px;
    border: 1px solid #f9f9f9;
    background-color: #f9f9f9;
    font-family: 'Varela Round', sans-serif;
    padding: 10px 10px;
}

input::placeholder {
    padding-left: 5px;
}

.text-box2 {
    margin-bottom: 10px;
    width: 57%;
    height: 40px;
    position: relative;
    position: relative;
    left: 1px;
    border: 1px solid #f9f9f9;
    background-color: #f9f9f9;
    font-family: 'Varela Round', sans-serif;
    padding: 10px 10px;
}

.text-area {
    margin-bottom: 10px;
    margin-top: 10px;

}

.text-area2 {
    width: 57%;
    border: 1px solid #f9f9f9;
    background-color: #f9f9f9;
    font-family: 'Varela Round', sans-serif;
    padding: 10px 10px;
}

textarea::placeholder {
    padding-left: 5px;
    padding-top: 5px;
    font-family: 'Varela Round', sans-serif;


}

.send2 {
    background-color: #6195ff;
    border: 1px solid #6195ff;
    padding: 10px 50px;
    border-radius: 2%;
    color: white;
    cursor: pointer;
    transition: opacity 0.5s;
}

.send2:hover {
    opacity: 0.8;
}






/*last section*/
/* Footer Section */
.last-section {
    background-color: black;
    color: #fff;
    font-family: Arial, sans-serif;
    height: 20rem;
}

.forBorder {
    padding-top: 20px;
}

.last-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 50px;
}



.lasth3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #f2f2f2;
    
}

.final-h2{
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #f2f2f2;
}

.last-pragraph {
    font-size: 0.7rem;
    color: #aaa;
    margin-bottom: 5px;
}

.lastimg {
    width: 100px;
    margin-right: 10px;
}

.lastMOb {
    display: flex;
    flex-direction: column;
    gap: 5px;
    
}

.mob {
    font-size: 0.9rem;
    color: gray;
    text-decoration: none;
}

.mob:hover {
    color: #00aced;
}

.text2-box {
    width: 100%;
    padding: 8px;
    margin-top: 10px;
    border: none;
    border-radius: 4px;
}

.tele {
    position: absolute;
    right: 15px;
    margin-top: 14px;
    color: #00aced;
}

hr {
    margin: 20px 0;
    border-color: #555;
}

.social {
    font-size: 1.2rem;
    color: #ddd;
    margin-right: 15px;
    transition: color 0.3s ease;
}

.social:hover {
    color: #00aced;
}


/* Center logo and style menu */
@media (max-width: 990px) and (min-width: 500px) {
    nav {
        display: none;
        /* Hide the nav by default on small screens */
    }

    .menu-toggle {
        display: block;
        position: relative;
        width: 80px;
        height: 80px;
        bottom: 30px;
        left: 300px;

    }


    .Home {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    
    .Home video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .opacity {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(43, 43, 43, 0.7);
        display: flex;
        align-items: center; /* Center content vertically */
        justify-content: center; /* Center content horizontally */
        color: white;
        text-align: center;
    }

    /* ---------------------------------------------------------- */

    /* slide show */
    /* Makes the carousel scrollable horizontally */
    .carousel-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 10px;
    }

    /* Styling for individual cards */
    .testimonial-card {
        flex: 0 0 60%;
        /* Each card takes 60% of the screen width */
        max-width: 60%;
        /* Ensures that cards do not exceed this width */
        margin: 0 10px;
        /* Adds space between cards */
        scroll-snap-align: center;
    }

    /* Styling for images within the cards */
    .testimonial-card img {
        width: 100%;
        /* Ensures images fit within their card */
        height: auto;
        border-radius: 8px;
        /* Optional: round the corners */
    }

    /* -------------------------------------------------------------- */

    /* why us */
    .div_vod {
        width: 100%;
        /* Ensures the video container spans the full width of its parent */
        padding: 0 15px;
        /* Optional: Adds padding around the video for a better fit */
    }

    .Get_Your_app {
        width: 100%;
        /* Video takes up the full width of its container */
        height: auto;
        /* Maintains aspect ratio */
    }

    /* ------------------------------------------------------------- */

    /* Developer's profile */
    .team-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    /* .team-item {
        flex: 0 0 45%; 
    }*/

    /* Team image styling */
    .team-img img {
        width: 80%;
        /* Adjusted image size */
        height: auto;
        border-radius: 8px;
    }

    /* Text styling */
    .team-h3-span h3 {
        font-size: 0.9rem;
        margin-top: 10px;
    }

    .web-designer2 {
        font-size: 0.9rem;
        margin-top: 5px;
    }
    /* ------------------------------------------------------------------- */

    /* clints reviwes */
    .number2-item {
        width: calc(100% - 20px); /* Adjust item width for responsiveness */
        margin: 10px; /* Reduced margin for better spacing */
    }

    .number2-items {
        justify-content: space-around; /* Center the items */
        right: 0; /* Reset position */
    }

    .jone-doe,
    .web-designer {
        left: 3; /* Reset left position for text */
    }

    .mcu2 {
        margin-top: 30px; /* Adjust margin for smaller screens */
    }

    .p9 {
        font-size: 14px; /* Slightly smaller font size */
        width: 100%; /* Reset width */
        position: relative;
        left: 36px;
    }
    .mcu2{
        padding-left: 30px;
    }
    .seeMoreReviews{
        position: relative;
        bottom: 30px;
    }
    /* ----------------------------------------------------- */

    /* contact us */
     .contact-items {
        display: flex;              /* Use Flexbox */
        justify-content: space-between; /* Space items evenly */
        flex-wrap: wrap;           /* Allow items to wrap if needed */
    }

    .contact-item {
        flex: 1;                   /* Make each item flexible */
        margin: 10px;             /* Optional: Add spacing between items */
        text-align: center;        /* Center-align text in items */
    }

    .C-I {
        font-size: 1.5rem; /* Reduce icon size slightly */
    }

    .contact-inputs {
        transform: scale(0.95); /* Reduce the form section slightly */
        position: relative;
        bottom: 130px;
    }

    .text-box, .text-box2, .text-area2, .send2 {
        padding: 8px; /* Reduce padding for input fields */
        font-size: 0.9rem; /* Adjust font size within inputs */
        width: 100%;
    }

    .text-box{
        width: 95%; /* Slightly narrower inputs to match the scaled-down design */
    }

    .text-box2 {
        width: 85%; /* Slightly narrower inputs to match the scaled-down design */
    }

    .text-area2{
        width: 85%;
    }

    .send2{
        width: 85%;
    }

    .send2 {
        padding: 10px 20px; /* Adjust button padding */
    }
    /* ---------------------------------------------------------- */

    /* footer */
    .bg{
        background-color: black;
        height: 40rem;
    }
    .last-items {
        flex-direction: column;
        align-items: center;
    }
    .final-h2{
        font-size: 40px;
    }
    .last-logo, .last-logo2, .last-logo3, .last-logo4 {
        flex: 1 1 100%; /* Full width on smaller screens */
        text-align: center;
    }

    .lastimg {
        width: 80px;
    }
    
}


@media (max-width: 509px){

    nav {
        display: none;
        /* Hide the nav by default on small screens */
    }
    
    .Header .logo{
        position: relative;
        left: 10px;
    }

    .menu-toggle {
        display: block;
        position: relative;
        width: 80px;
        height: 80px;
        bottom: 30px;
        left: 150px;
    }

    .Home .word1{
        font-size: 20px;
    }

    .Home .word2{
        font-size: 10px;
        line-height: 15px;

    }

    .Home .btn1 {
        width: 175px;
        height: 50px;
        margin-right: 10px;
        border-radius: 100px;
        background-color: #6195ff;
        color: white;
    }

    
    .testimonial-card {
        min-width: 100%; /* Adjust card width for smaller screens */
        height: 100%; /* Adjust height as needed */
        margin-right: 10px; /* Adjust margin for spacing */
    }

    .testimonial-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .carousel-container {
        padding: 0 20px; /* Reduce padding for smaller screens */
    }

   
    /* Developer's profile */
    .team{
        position: relative;
        bottom: 400px;
    }
    .team-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .team-item {
        flex: 0 0 45%; 
    }

    /* Team image styling */
    .team-img img {
        width: 80%;
        /* Adjusted image size */
        height: auto;
        border-radius: 8px;
    }

    /* Text styling */
    .team-h3-span h3 {
        font-size: 0.9rem;
        margin-top: 10px;
    }

    .web-designer2 {
        font-size: 0.9rem;
        margin-top: 5px;
    }
    /* ------------------------------------------------------------------- */

    /* clints reviwes */
    .number2{
        position: relative;
        bottom: 500px;
    }
    .number2-item {
        width: calc(80% - 20px); /* Adjust item width for responsiveness */
        margin: 15px; /* Reduced margin for better spacing */
    }


    /* ------------------------------------------------------------- */

    .contact {
        position: relative;
        bottom: 600px; /* Adjust as necessary */
    }

    .contact-items {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items */
    }

    .contact-item {
        width: 100%; /* Full width for items */
    }

    .C-I {
        font-size: 1.2rem; /* Adjust icon size */
    }

    .contact-inputs {
        bottom: 100px; /* Adjust vertical position */
    }

    .text-box, .text-box2, .text-area2, .send2 {
        font-size: 0.8rem; /* Smaller font size */
    }

    .text-box{
        width: 90%; /* Adjust width for smaller screens */
    }

    .text-box2 , .text-area2, .send2{
        width: 75%;
    }
    /* ----------------------------------------------------- */

    /* footer */
    .bg{
        position: relative;
        bottom: 500px;
        background-color: black;
        height: 40rem;
    }
    .last-items {
        flex-direction: column;
        align-items: center;
    }
    .final-h2{
        font-size: 40px;
    }
    .last-logo, .last-logo2, .last-logo3, .last-logo4 {
        flex: 1 1 100%; /* Full width on smaller screens */
        text-align: center;
    }

    .lastimg {
        width: 80px;
    }
}


@media (max-width: 439px){

    .nav{
        display: none;
    }


    .Header .logo{
        font-size: 1.5rem;
        position: relative;
        left: 10px;
        top: 10px;
    }

    .menu-toggle {
        display: block;
        position: relative;
        width: 80px;
        height: 80px;
        bottom: 20px;
        left: 120px;
    }

    .before_final .h2{
        font-size:1.3rem;
        font-weight: bold;
    }

    .whyUs .h2{
        font-size: 1.3rem;
        font-weight: bold;
    }

    .whyUs .line{
        position: relative;
        left: 30px;
    }

    .team .h2{
        font-size: 1.3rem;
        font-weight: bold;
    }

    .clintsReviwes .h2{
        font-size: 1.3rem;
        font-weight: bold;
    }

    .contact .h2{
        font-size: 1.3rem;
        font-weight: bold;
    }

    .Home .word2{
        padding-left: 5px;
        line-height: 15px;

    }


    /* -------------------------------------- */

    .carousel-container {
        display: flex;
        overflow-x: auto; /* Enables horizontal scrolling */
        padding: 0 16px;
        gap: 10px;
        scroll-snap-type: x mandatory; /* Smooth snapping for cards */
    }

    .testimonial-card {
        flex: 0 0 100%; /* Adjusts each card to 80% of screen width */
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        scroll-snap-align: start; /* Card snaps to start when scrolled */
    }

    .testimonial-img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /*------------------------------------- */

    .div_vod {
        position: relative;
        bottom: 230px;
        z-index: -1;
    }

    /*------------------------------------- */


    /* clints reviwes */
    .number2{
        position: relative;
        bottom: 500px;
    }
    .number2-item {
        width: calc(50% - 20px); /* Adjust item width for responsiveness */
        margin: 15px; /* Reduced margin for better spacing */
        position: relative;
        left: 50px;
    }
    .mcu2 .p9{
        position: relative;
        left: 60px;
    }

    .contact-items {
        position: relative;
        right: 30px;
    }
}

@media (max-width: 419px){
    .Header .logo{
        font-size: 1.5rem;
        font-weight: bold;
        position: relative;
        top: 10px;
    }

    .menu-toggle {
        display: block;
        position: relative;
        width: 70px;
        height: 70px;
        top: -15px;
        left: 120px;
    }

    .before_final .h2{
        font-size:1.3rem;
        font-weight: bold;
    }

    .whyUs .h2{
        font-size: 1.3rem;
        font-weight: bold;
    }

    .whyUs .line{
        position: relative;
        left: 30px;
    }

    .team .h2{
        font-size: 1.3rem;
        font-weight: bold;
    }

    .clintsReviwes .h2{
        font-size: 1.3rem;
        font-weight: bold;
    }

    .contact .h2{
        font-size: 1.3rem;
        font-weight: bold;
    }

    .carousel-container {
        display: flex;
        overflow-x: auto; /* Enables horizontal scrolling */
        padding: 0 16px;
        gap: 10px;
        scroll-snap-type: x mandatory; /* Smooth snapping for cards */
    }

    .testimonial-card {
        flex: 0 0 100%; /* Adjusts each card to 80% of screen width */
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        scroll-snap-align: start; /* Card snaps to start when scrolled */
    }

    .testimonial-img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

}


@media (max-width: 399px){
    .Header .logo{
        font-size: 1.5rem;
        font-weight: bold;
        position: relative;
        top: 20px;
    }

    .menu-toggle {
        display: block;
        position: relative;
        width: 70px;
        height: 70px;
        top: -10px;
        left: 120px;
    }

    .before_final .h2{
        font-size:1.3rem;
        font-weight: bold;
    }

    .whyUs .h2{
        font-size: 1.3rem;
        font-weight: bold;
    }

    .whyUs .line{
        position: relative;
        left: 30px;
    }

    .carousel-container {
        display: flex;
        overflow-x: auto; /* Enables horizontal scrolling */
        padding: 0 16px;
        gap: 10px;
        scroll-snap-type: x mandatory; /* Smooth snapping for cards */
    }

    .testimonial-card {
        flex: 0 0 100%; /* Adjusts each card to 80% of screen width */
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        scroll-snap-align: start; /* Card snaps to start when scrolled */
    }

    .testimonial-img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .team .h2{
        font-size: 1.3rem;
        font-weight: bold;
    }

    .clintsReviwes .h2{
        font-size: 1.3rem;
        font-weight: bold;
    }

    .contact .h2{
        font-size: 1.3rem;
        font-weight: bold;
    }
}

@media (max-width: 376px){

    .Header .logo{
        font-size: 1.3rem;
        position: relative;
        top: 20px;
    }

    .menu-toggle {
        display: block;
        position: relative;
        width: 70px;
        height: 70px;
        top: -10px;
        left: 120px;
    }

    .before_final .h2{
        font-size:1.2rem;
        font-weight: bold;
    }

    .whyUs .h2{
        font-size: 1.2rem;
        font-weight: bold;
    }

    .whyUs .line{
        position: relative;
        left: 30px;
    }

    .team .h2{
        font-size: 1.2rem;
        font-weight: bold;
    }

    .clintsReviwes .h2{
        font-size: 1.2rem;
        font-weight: bold;
    }

    .contact .h2{
        font-size: 1.2rem;
        font-weight: bold;
    }

    .carousel-container {
        display: flex;
        overflow-x: auto; /* Enables horizontal scrolling */
        padding: 0 16px;
        gap: 10px;
        scroll-snap-type: x mandatory; /* Smooth snapping for cards */
    }

    .testimonial-card {
        flex: 0 0 100%; /* Adjusts each card to 80% of screen width */
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        scroll-snap-align: start; /* Card snaps to start when scrolled */
    }

    .testimonial-img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

@media (max-width: 369px){

    .Header .logo{
        font-size: 1.3rem;
        position: relative;
        top: 20px;
    }

    .menu-toggle {
        display: block;
        position: relative;
        width: 70px;
        height: 70px;
        top: -10px;
        left: 120px;
    }

    .before_final .h2{
        font-size:1.2rem;
        font-weight: bold;
    }

    .whyUs .h2{
        font-size: 1.2rem;
        font-weight: bold;
    }

    .whyUs .line{
        position: relative;
        left: 30px;
    }

    .team .h2{
        font-size: 1.2rem;
        font-weight: bold;
    }

    .clintsReviwes .h2{
        font-size: 1.2rem;
        font-weight: bold;
    }

    .contact .h2{
        font-size: 1.2rem;
        font-weight: bold;
    }

    .carousel-container {
        display: flex;
        overflow-x: auto; /* Enables horizontal scrolling */
        padding: 0 16px;
        gap: 10px;
        scroll-snap-type: x mandatory; /* Smooth snapping for cards */
    }

    .testimonial-card {
        flex: 0 0 100%; /* Adjusts each card to 80% of screen width */
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        scroll-snap-align: start; /* Card snaps to start when scrolled */
    }

    .testimonial-img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}