.iconTop {
    display: none;
    color: var(--color-main);
}

.spinner {
    width: 80px;
    height: 80px;
    background-color: var(--color-main);
    margin: 100px auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }

    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }

    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }

    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }

    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

.loding {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999999;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sliderbar {
    width: 25%;
    height: 250px;
    background-color: transparent;
    position: fixed;
    left: 0;
    top: 50%;
    z-index: 121215;
    align-items: flex-start;
}

.nav_tittle {
    color: var(--color-main);
}

.bgbox {
    width: 60px;
    height: 60px;

}

.bgbox img {
    width: 100%;
}
.home{
    margin-top: 165px ;
}
.LogoCompant {
    width: 45%;
}

.innerBox {
    width: 80%;
    height: 100%;
    background-color: #1c1c1c;
}

.seting {
    width: 20%;
    height: auto;
    background-color: #1c1c1c;
}

.box {
    width: 60px;
    height: 60px;
}

html {
    scroll-padding-top: 70px;
}

:root {
    /* MainColor */
    --color-main: #ffc627;
    /*pragraph*/
    --color-main2: #666;
    /* scondColor */
    --color-main3: #152b46;
    /* scondColor */
    scroll-behavior: auto;
}


.titleStart {
    color: var(--color-main2);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Montserrat", sans-serif;

}

a:hover {
    text-decoration: none;
    outline: none;
    box-shadow: none;
}

ul {
    list-style-type: none;
}

::selection {

    background: rgba(0, 98, 255, 0.3);




}

.img-background {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.carousel-inner {
    height: 100%;
}
#home{
    padding: 0 !important ; margin: 0 !important; 
}
.carousel-item .carousel-bg {
    height:80%;
    background-size: cover;
    background-position:  center center;
    background-repeat: no-repeat;
}

.container.animate-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}



header .button-down {
    border: solid 1px white;
    color: white;
    transition: all, 0.9s;
}

header .button-down:hover {
    background-color: aliceblue;
    color: black;
}

header h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 50px;

}

header h1 {
    font-size: 56px;
    position: relative;
    font-weight: 500;
}

header h1::after {
    content: "";
    animation-name: header-animation;
    animation-duration: 10s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}




@media screen and (max-width:500px) {
    header h1 {
        font-size: 30px;
    }

    header h2 {
        font-size: 30px;
    }
}

header p {
    max-width: 500px;
}

.navbar {
    transition: background-color 3s;
}

.nav-link {
    color: #000000;

}

.nav-link {
    position: relative;
}


.nav-link::after {
    content: "";
    width: 0%;
    height: 2px;
    background-color: var(--color-main2);
    position: absolute;
    bottom: 2%;
    left: 5px;
    background-color: var(--color-main2);
    transition: width 1s;
}

.nav-link:hover:after {
    width: 80%;
}


.navbar {
    transition: background-color 3s;
}



/* Show dropdown on hover */
.navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    padding-right: 25px;
    background-color: var(--color-main);
    /* Use your main color */
}

/* Add space and a line between items */
.navbar .dropdown-menu .dropdown-item {
    margin: 5px 0;
    /* Space between items */
    padding: 10px 40px 0 40px;
    /* Padding for better appearance */
    color: rgb(255, 255, 255);
    /* Text color */
    text-align: left;
    /* Align text to the left */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Smooth hover effect */
}

/* Remove the last border */
.navbar .dropdown-menu .dropdown-item:last-child {
    border-bottom: none;
}

/* Hover effect for dropdown items */
.navbar .dropdown-menu .dropdown-item:hover {
    padding-right: 25px;
    background-color: #f1f1f1;
    /* Light gray hover background */
    color: var(--color-main);
    /* Text color on hover */
}


.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    width: 0;
    border-top: 0;
    border-right: 0 solid transparent;
    border-bottom: 0;
    border-left: 0 solid transparent;
}

.nav-link.nav-link.active:after {
    width: 80%;

}

.nav-link.nav-link.active {
    color: var(--color-main2)
}

header .icons ul li {

    background-color: var(--color-main);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

header h1 span {
    font-weight: 200;
    color: #ffffff;
}


/* ///////////////Our Product//////////////// */
.rectangle-border {
    width: 50%;
    height: 100px;
    border: 5px dotted white;
    border-radius: 15px;
    /* Rounded edges */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    position: relative;
    margin: auto;
}

.rectangle-border:hover {
    border: 5px solid white;
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.1);
}

.single-block-desc h2 {
    margin: 0;
    font-size: 18px;
    color: white;
    text-align: center;
}

.single-block-desc a {
    text-decoration: none;
    color: white;
}

.single-block-desc a:hover {
    color: var(--color-main);
    /* Adjust this variable or set your desired hover color */
}

.fa-solid {
    margin-bottom: 5px;
    font-size: 24px;
    /* Adjust icon size */
}

.hvr-grow-rotate {
    transition: all 0.3s ease-in-out;
}

.hvr-grow-rotate:hover {
    transform: scale(1.1) rotate(5deg);
}





/*  */


/*  */

.carousel-indicators {
    display: none;
}


/* Portfolio */
.nav-tabs .nav-item.show .nav-link {
    border: none;
}

.nav-tabs .nav-item.show .nav-link:hover {
    display: block;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border: none;
}

.nav {

    list-style: none;
    --bs-nav-link-hover-color: var(--color-main)
}

.nav-tabs {
    max-width: 500px;
    margin: auto;
    border-bottom: var(--bs-nav-tabs-border-width) none var(--bs-nav-tabs-border-color);
    --bs-nav-tabs-border-width: none;
}

.Portfolio .item-por .overlry {
    background-color: var(--color-main);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0.23;
    left: 0;
    transition: all .5s;
    ;
}

.aab img {
    height: 300px;
    width: 450px;
}

.Portfolio .item-por:hover .overlry {
    opacity: 0;
    top: 0.5;

}

.Portfolio .item-por .alot {
    transform: translateY(30px);
    transition: all 0.9s;
}

.Portfolio .item-por:hover .alot {
    transform: translateY(-10px);
}

.Portfolio .item-por .motion {
    transform: translateY(-25px);
    transition: all 0.9s;
}

.Portfolio .item-por:hover .motion {
    transform: translateY(-5px);
    transition: all 0.9s;
}




/* work */

/* client */
.all-iteams-client img {
    width: 10%;
}

@media screen and (max-width:766px) {
    .all-iteams-client img {
        width: 20%;
    }
}

.pragraph-client {
    max-width: 900px;
    margin: auto;
}

.carousel-indicators [data-bs-target] {
    background-color: #333;
    border-radius: 50%;
    width: 10px;
    height: 10px;

}

/* client */


/* icons */

.all-of-icon i {
    color: var(--color-main);
}

.all-of-icon h3 {
    color: var(--color-main);
}

.all-of-icon p {
    color: var(--color-main);
}

/* icons */
.our-client .Social-icon {
    background-color: #ffffffca;
    width: 95%;
    height: 95%;
    top: 10px;
    right: 10px;
    position: absolute;
    transition: 0.5s all;
    opacity: 0;
    transform: rotateY(180deg) scale(0.5, 0.5);
}

.cardssss:hover .Social-icon {
    opacity: 1;
    transform: rotateY(0deg) scale(1, 1);
}

.caaaard img {
    transition: all 0.5s;
}

.caaaard:hover img {
    transform: scale(1.2, 1.2);
}

.our-client .Social-icon .circle-icoo {
    width: 40px;
    height: 40px;
    background-color: #000000;
    color: #f4f4f4;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .5s;
}
.our-client .Social-icon .circle-icoo:hover {
    background-color: #f9f6f6;
    color: #000000;
    border: #000000 1px solid;
}
.back-our {
    background-color: #5a5a5a;
}
/* contact */
.circle-ico-conatct {
    width: 60px;
    height: 60px;
    background-color: #f4f4f4;
    margin: auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-contact .circle-ico-conatct {
    transition: all .3s;
}

.item-contact:hover .circle-ico-conatct {
    background-color: #000000;
    color: #f4f4f4;
}

.form-control-1 {
    width: 45%;
}

:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

.form-contro3 {
    width: 50%;
}

.form-btn {
    background-color: var(--color-main);
    color: #f9f6f6;
}

.boot .btn:hover {
    border: solid black 2px;
    color: #000000;


}

.form-control:focus {

    box-shadow: 0 0 0 0rem rgba(13, 109, 253, 0)
}

/* end */
.bg-footer {
    background-color: var(--color-main);
    color: #b1b1b1;
}

/* Full-height home container */
.home {
    position: relative;
    width: 100%;
    height: 100vh;
    /* Full height of the viewport */
    overflow: hidden;
    /* Prevent content overflow during animation */
}


.AboutColor {
    color: white;
    transition: all 0.8s;
}

.AboutColor:hover {
    color: var(--color-main);
}




/* footer */
/* Footer Background and Color */
.ts-footer {
    position: relative;
    background: url('../images/b2.jpg') no-repeat center center;
    background-size: cover;
    color: white;
    padding: 40px 0;
    /* Padding for top and bottom */
}

.ts-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    /* Color with transparency */
    z-index: 1;
    /* Ensures the overlay is above the image */
}

.ts-footer .container {
    position: relative;
    z-index: 2;
    /* Ensures content is above the overlay */
}


/* Adjusting the footer logo size */
.footer-logo-img {
    max-width: 250px;
    /* Adjust size of the logo */
    height: auto;
    /* Maintain aspect ratio */
}

/* Links Styling */
.ts-footer .link {
    color: white;
    text-decoration: none;
}

.ts-footer .link:hover {
    color: #f8d600;
    /* Hover color */
}

/* Footer Widget Titles */
.widget-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Footer Widget Details */
.widget-details {
    font-size: 1rem;
    line-height: 1.5;
}

/* Footer Address and Contact Info */
.footer-left-widget ul {
    list-style-type: none;
    padding-left: 0;
}

.footer-left-widget ul li {
    margin-bottom: 10px;
}

/* Hover effect for footer logo */
.hvr-bob:hover {
    animation: hvr-bob 0.6s ease-in-out infinite;
}

@keyframes hvr-bob {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

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

/* Responsive Design */
@media (max-width: 768px) {
    .ts-footer .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.ts-footer3 {
    margin-top: 300px;
}


/* Media query in home */


.moving-car,
.behind-car {
    position: absolute;
    top: auto;
    /* Reset top position */
    /* Default size */
    max-width: 570px;
    /* Limit the width of the car image */
}

.behind-car {
    z-index: 5;
    /* Ensure it's behind the car image */
}

.moving-car {
    z-index: 10;
    /* Ensure the car image stays on top of other elements */
}

/* Media Queries for different screen sizes */
@media (max-width: 1200px) {
    .moving-car {
        width: 100%;
        /* Reduce width for medium screens */
    }
}

@media (max-width: 981px) {
    .moving-car {
        width: 50%;
        /* Further reduce width for smaller screens */
    }
}

@media (max-width: 768px) {
    .moving-car {
        width: 60%;
        /* Adjust for tablets and smaller screens */
    }
}

@media (max-width: 576px) {

    /* For mobile screens */
    .moving-car {
        width: 80%;
        /* Adjust car size for very small screens */
    }

    /* Default Slider Bar Styles */
    .sliderbar {
        width: 25%;
        height: 250px;
        background-color: transparent;
        position: fixed;
        left: 0;
        top: 50%;
        z-index: 121215;
        align-items: flex-start;
        transition: all 0.3s ease;
        /* Optional: Add smooth transition for resizing */
    }

    /* Media Query for smaller devices */
    @media (max-width: 1200px) {
        .sliderbar {
            width: 20%;
            /* Adjust width for medium screens */
            height: 200px;
            /* Adjust height */
        }
    }

    @media (max-width: 992px) {
        .sliderbar {
            width: 15%;
            /* Further reduce width for smaller screens */
            height: 180px;
            /* Adjust height further */
        }
    }

    @media (max-width: 768px) {
        .sliderbar {
            width: 35%;
            /* Adjust width for tablet-sized screens */
            height: 220px;
            /* Adjust height for a better view */
        }
    }

    @media (max-width: 576px) {
        .sliderbar {
            width: 50%;
            /* Increase width for small mobile screens */
            height: 200px;
            /* Adjust height for small screens */
        }
    }
    
    


    .behind-car {
        position: absolute;
        /* Keep behind the car */
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        z-index: 1;
        /* Background image */
    }

    .moving-car {
        position: absolute;
        /* Vertically center the car */
        /* Center the car image */
        max-width: 800px;
        /* Limit the maximum size of the car */
        z-index: 10;
    }

}

/* Default Styles for Large Screens */
.feature-block-intro h2 {
    font-size: 2.5rem;
    /* Larger text on bigger screens */
}

.feature-block-intro p {
    font-size: 1.125rem;
    /* Default paragraph size */
}

/* For Medium Screens (Tablets) */
@media (max-width: 992px) {
    .feature-block-intro h2 {
        font-size: 2rem;
        /* Slightly smaller for tablets */
    }

    .feature-block-intro p {
        font-size: 1rem;
        /* Adjust paragraph text for medium screens */
    }
}

/* For Small Screens (Mobile Phones) */
@media (max-width: 576px) {
    .feature-block-intro h2 {
        font-size: 1.5rem;
        /* Reduce size of heading for small screens */
    }

    .feature-block-intro p {
        font-size: 0.875rem;
        /* Smaller paragraph text for mobile */
    }

    .feature-block-intro {
        width: 90%;
        /* Ensure the content doesn't get too cramped */
        padding: 2rem;
        /* Adjust padding to prevent overflow */
    }

    .botton2 {
        padding-top: 15px;
    }

    .smallbot {
        padding: 4.5;
    }
}





/* Basic styles for the icon box */
.ico13 {
    transition: all 0.3s ease;
    /* Smooth transition for growth and border color change */
    border: 2px solid transparent;
    /* Initially transparent border */
    padding: 15px;
    border-radius: 8px;
    /* Optional: gives rounded corners */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* When hovering over the container */
.ico13:hover {
    border-color: var(--color-main);
    /* Change the border to your main color */
    transform: scale(1.05);
    /* Slightly grow the box */
}

/* Active state (clicked) */
.ico13.active {
    border-color: var(--color-main);
    /* Keep border on the active item */
    transform: scale(1.05);
    /* Keep the growth effect */
}

/* Optional: When the link inside is hovered */
.ico13 a:hover {
    color: var(--color-main);
    /* Change link color to main color on hover */
}


/* Video */
/* Initial style for the video element */
.custom-video {
    border: none;
    /* Removes any border */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth hover effect */
}

/* Hover effect */
.custom-video:hover {
    transform: scale(1.05);
    /* Slightly increase the size */
    box-shadow: 0 0 15px rgba(0, 0, 255, 0.7);
    /* Blue glow */
}

/* Initial style for the video element */
.custom-video {
    border: 5px solid rgba(0, 0, 0, 0.2);
    /* Light border around the video */
    border-radius: 8px;
    /* Optional: rounded corners */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    /* Smooth effects */
}

/* Hover effect */
.custom-video:hover {
    transform: scale(1.05);
    /* Slightly increase the size */
    box-shadow: 0 0 15px rgba(0, 0, 255, 0.7);
    /* Blue glow */
    border-color: rgba(0, 0, 255, 0.7);
    /* Change border color to blue */
}


.line-under {
    position: relative;
    display: inline-block;
}
.line-under2 {
    position: relative;
    display: inline-block;
}
.line-under::after {
    content: "";
    display: block;
    width: 10%;
    height: 6px;
    background-color: var(--color-main); /* اللون الأساسي */
    margin: 9px auto 0;
    border-radius: 2px; /* حواف ناعمة */
}
.line-under2::after {
    content: "";
    display: block;
    width: 80%;
    height: 6px;
    background-color: var(--color-main); /* اللون الأساسي */
    margin: 9px auto 0;
    border-radius: 2px; /* حواف ناعمة */
}


/* Video */

/* TEAM */


.contant_img {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.contant_img h3,
h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;

}

.contant_img h6 {
    color: #ffc627;
    word-spacing: 20px;

}

.section2 {
    padding-top: 90px;
    padding-bottom: 40px;

}

.contant_img_text {
    border-left: var(--color-main) solid 3px;
}

.cr {
    width: 120px;
    height: 120px;
    background-color: var(--color-main);
    margin: auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all, 209ms;
}

.cr i {
    font-size: 40px;
    color: #f4f4f4;
    display: flex;
    text-align: center;
    justify-content: center;
}

.item-cr h3 {
    color: #000000;
    font-size: 16;
    transition: all, 209ms;
}


.item-cr:hover .cr {

    color: #ffc627;
    box-shadow: 0 4px 10px rgba(8, 8, 8, 0.36);
    ;
    text-align: center;
    justify-content: center;
}

.item-cr:hover h3 {

    color: var(--color-main)
}



/* Footer */
.social-icon {
    font-size: 24px;
    color: #fff; /* اللون الأساسي للأيقونات */
    margin-right: 10px;
    transition: color 0.3s ease, transform 0.3s ease; /* حركة سلسة لتغير اللون وحجم الأيقونة */
}

.social-icon:hover {
    color: var(--color-main); /* اللون الأساسي عند التمرير */
    transform: scale(1.2); /* تكبير الأيقونة بشكل بسيط */
}


@media (max-width: 768px) {
    #ts-footer .footer-logo-img {
        max-width: 150px; /* Reduces the image size for smaller screens */
        margin: 0 auto; /* Centers the logo */
    }
    #ts-footer .widget-details {
        text-align: center; /* Centers text for smaller screens */
    }
    #ts-footer .widget-details ul {
        padding: 0; /* Removes extra padding */
    }
    #ts-footer .widget-details ul li {
        font-size: 14px; /* Adjusts text size for readability */
        line-height: 1.6; /* Adds space between lines */
    }
}




/* Conact US */
    .circle-ico-conatct {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 192, 203, 0.2);
        border-radius: 50%;
        margin: 0 auto;
    }

    .item-contact h5 {
        font-size: 16px;
        margin-top: 10px;
    }

    .item-contact p {
        font-size: 14px;
        line-height: 1.5;
    }

    .form-control {
        border-radius: 8px;
    }

    .btn-primary {
        background-color: var(--color-main);
        border: none;
        border-radius: 8px;
    }

    .btn-primary:hover {
        background-color: #d70057; /* Adjust hover color */
    }

    @media (max-width: 768px) {
        .ps-5,
        .pe-5 {
            padding-left: 15px !important;
            padding-right: 15px !important;
        }
    }
    .social-media-icons {
        margin-top: 15px;
        display: flex;
        justify-content: start;
        gap: 15px; /* المسافة بين الأيقونات */
    }
    
    .social-icon {
        font-size: 28px; /* حجم الأيقونة */
        color: #555; /* اللون الافتراضي */
        transition: all 0.3s ease; /* تأثير سلس للتغير */
    }
    
    .social-icon:hover {
        color: var(--color-main); /* تغيير اللون إلى اللون الأساسي */
        transform: scale(1.2); /* تكبير الأيقونة قليلاً */
    }
    

    .wrapper
    {
        max-width: 1200px;
        position: relative;
    }


   .wrapper .carousel1
   {
    white-space: nowrap;
    cursor: pointer;
    font-size: 0px;
    overflow:hidden ;

   }
.carousel1 img
{
    object-fit: cover;
    width: calc(100% / 5);
    margin-left: 14px;


}
.carousel1 img:first-child
{
    margin-left: 0px;

}

.bodyrabber
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 0 35px;
     
}
.wrapper i 
{
    top: 50%;
    background-color: #fff;
    height: 45px ;
    width: 45px; 
    text-align: center;
    line-height: 46px ;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    font-size: 1.2rem;
    transform: translateY(-50%);

}
.wrapper i:first-child
{
    left: -23px;
}
.wrapper i:last-child
{
    right: -23px;
}
@media screen and (max-width : 900px) 
{

.carousel1 img
{
    width: calc(100% / 2);

}
}
@media screen and (max-width : 550px) 
{

.carousel1 img
{
    width: calc(100% / 2);


}
.carousel1
{
    cursor: grab;
    overflow-x: scroll; /* Enable horizontal scrolling */
    scroll-behavior: smooth; /* Smooth scrolling for manual scrolls */
    display: flex; /* Align items horizontally */ 
}
.carousel1:active {
    cursor: grabbing;
}
}


/* NEW */


   .wrapper2
    {
        max-width: 1200px;
        position: relative;
    }


   .wrapper2 .carousel2
   {
    white-space: nowrap;
    cursor: pointer;
    font-size: 0px;
    overflow:hidden ;

   }
.carousel2 img
{
    object-fit: cover;
    width: calc(100% / 5);
    margin-left: 14px;


}
.carousel2 img:first-child
{
    margin-left: 0px;

}

.bodyrabber
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 0 35px;
     
}
.wrapper2 i 
{
    top: 50%;
    background-color: #fff;
    height: 45px ;
    width: 45px; 
    text-align: center;
    line-height: 46px ;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    font-size: 1.2rem;
    transform: translateY(-50%);

}
.wrapper2 i:first-child
{
    left: -23px;
}
.wrapper2 i:last-child
{
    right: -23px;
}
@media screen and (max-width : 900px) 
{

.carousel2 img
{
    width: calc(100% / 2);

}
 .carousel-item .carousel-bg 
    {
        height: 100%;
    }
    .carousel-inner
    {
        width: 100%;
        height:400px;
            }
            .home{height: 45% ;}
            #About
            {
                margin-top: 50px;
            }
}
@media screen and (max-width : 550px) 
{

.carousel2 img
{
    width: calc(100% / 2);

}
    .carousel-item .carousel-bg 
    {
        height: 100%;
   
    }
    .carousel-inner
    {
        width: 100%;
        height: 100%;
            }
            .home{height: 30% ;}
            #About
            {
                margin-top: 50px;
            }
.carousel2
{
    cursor: grab;
    overflow-x: scroll; /* Enable horizontal scrolling */
    scroll-behavior: smooth; /* Smooth scrolling for manual scrolls */
    display: flex; /* Align items horizontally */ 
}
.carousel2:active {
    cursor: grabbing;
}
}