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

/*========================================================== Discount Promo Start =========================================================*/
#fl-1 {
    background-color: #C2EBFF;
    text-align: center;
    padding: 5px 10px;
}

.markup {
    color: orangered;
}

.disc {
    display: inline;
    font-weight: 500;
    font-size: 1rem;
}

/* ===============================================================Navbar Start ========================================================*/

/* Align the list items to the left in offcanvas */

.offcanvas-body .navbar-nav {
    align-items: flex-start;
}

.navbar {
    background-color: #fff;
    height: auto;
    padding: 10px 30px;
    margin-top: 3%;
}

.navbar-brand img {
    max-width: 200px;
    height: auto;
    margin-top: 2%;
    margin-bottom: 2%;
}

.navbar-collapse {
    flex-grow: 0;
    justify-content: center;
}

.navbar-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.nav-item {
    margin: 0 10px;
    position: relative;
}

.nav-link {
    transition: color 0.3s ease, border-bottom 0.3s ease;
    position: relative;
    padding-bottom: 5px;
}

.nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: orangered;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.nav-link:hover::after {
    transform: scaleX(1);
}

.navbar-toggler {
    border: none;
}

#btn-1 {
    background-color: #00224F;
    color: #fff;
    border-radius: 25px;
    padding: 10px 20px;
    border: none;
}

.dropdown-toggle::after {
    display: none !important;
    /* Ensure the dropdown arrow is hidden */
}

/* Align the dropdown menu to the right */
.dropdown-menu-end {
    right: 0;
    left: auto;
}



.offcanvas-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e5e5e5;
}

.offcanvas-body ul li a {
    font-size: 16px;
}

.offcanvas-body {
    padding: 1rem 2rem;
}

.text-center p {
    font-size: 14px;
    color: #777777;
}


/* =============================================================== Auto Text Start ======================================================== */
.banner {

    margin-left: 1%;
    margin-top: 20%;
}

.waheed1 {
    color: #012350;
    font-size: 24px;
    font-family: 'Rubik', sans-serif;
    font-weight: bold;

}

.waheed2 {
    font-size: 22px;
    color: #0780FF;
    font-family: 'Rubik', sans-serif;
    font-weight: bold;
}

.auto-type {
    color: orangered;
    font-family: 'Rubik', sans-serif;
    font-weight: bold;
}

@media screen and (max-width: 576px) {
    .waheed1 {
        margin-top: 50%;
    }
}

/*======================================================== Searchbar Start ========================================================*/
.search-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

.search-bar .form-select,
.search-bar .btn {
    height: 70px;
    border-radius: 50px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0 15px;
}

.search-bar .form-select {
    flex: 1;
    border: none;
}

.search-bar .btn {
    width: 120px;
    border: none;
    background-color: #0780FF;
    color: white;
    font-weight: bold;
}

/* Ensure buttons align correctly in smaller screens */
@media (max-width: 576px) {
    .search-bar {
        flex-direction: column;
        align-items: stretch;
        height: 160px;
    }

    .search-bar .form-select,
    .search-bar .btn {

        border-radius: 50px;
        margin: 5px 0;
    }

    .search-bar .form-select {
        width: 100%;
    }

    .search-bar .btn {
        width: 100%;
        padding: 12px 0;
        font-size: 16px;
    }

    .banner {
        margin-top: 50%;
    }
}

#ali {
    border-radius: 60px;
    background-color: #EDF6FF;
    height: auto;
    width: 100%;
    padding: 32px;
}

/*======================================================== counter section start ========================================================*/
.counter {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 50px;
    margin-left: 20%;
    margin-right: 20%;
}

.counter div {
    text-align: center;
    flex: 1 1 45%;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.cols {
    color: #0780FF;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
}

/* Media query for screens larger than 1024px */
@media (min-width: 1025px) {
    .counter div {
        flex: 1 1 22%;
        margin-bottom: 0;
    }
}

/* video-with start */
.video-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px;
    border-radius: 10px;
}

#backgroundVideo {
    width: 100%;
    position: relative;
    z-index: 0;
    display: block;
    object-fit: cover;
}

.btn-2 {
    width: 120px;
    position: absolute;
    top: 60%;
    left: 200px;
    transform: translateY(-50%);
    z-index: 2;
    padding: 8px 16px;
    font-size: 14px;
    background-color: #0780FF;
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.btn-2:hover {
    background-color: #0568d1;
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .btn-2 {
        width: 130px;
        font-size: 12px;
        padding: 6px 12px;
        left: auto;
    }
}

@media (max-width: 576px) {
    .btn-2 {
        width: 80px;
        font-size: 10px;
        padding: 4px 8px;
    }
}

@media (max-width: 375px) {
    .btn-2 {
        width: 40px;
        font-size: 6px;
        padding: 3px 6px;
        left: 48px;
    }

    #backgroundVideo {
        width: 100%;
        position: relative;
        z-index: 0;
        display: block;
        object-fit: cover;
    }
}

/* Responsive Adjustments */

/* For screens less than 576px */
@media (max-width: 576px) {
    .navbar {
        height: auto;
        padding: 0 15px;
    }

    .navbar-brand img {
        width: 100px;
    }

    .navbar-nav {
        flex-direction: column;
        align-items: center;
    }

    .navbar-nav .nav-item {
        margin: 10px 0;
    }

    .banner {
        margin-top: 10%;
        text-align: center;
    }

    .waheed1 {
        font-size: 14px;
    }

    .waheed2 {
        font-size: 14px;
    }

    .disc {
        font-size: 14px;
    }

    .markup {
        font-size: 14px;
    }

    #ali {
        border-radius: 30px;
        background-color: #EDF6FF;
        height: auto;
    }
}
@media (min-width: 300px) and (max-width: 360px) {
    .waheed1 {
        font-size: 12px;
    }
}

/* For screens between 576px and 1200px */
@media (min-width: 576px) and (max-width: 1200px) {
    .navbar {
        height: 80px;
        padding: 0 20px;
    }

    .navbar-brand img {
        width: 100px;
    }

    .navbar-nav {
        gap: 10px;
    }

    .search-bar {
        flex-direction: row;
        justify-content: center;
    }

    .search-bar .form-select {
        width: 70%;
    }

    .search-bar .btn {
        width: 30%;
    }
}


/*======================================================== trending visa start======================================================== */
.trending-visas {
    padding: 20px 0;
}

.visa-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.visa-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    border-bottom: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 5px;
    background-color: #fff;
    flex: 1 0 45%;
    /* Adjusted to take up about half of the row */
    cursor: pointer;
}

.visa-country {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.country-info {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.country-info img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.visa-price {
    color: #007bff;
    font-size: 14px;
    margin-top: 2px;
    margin-left: 6%;
}
@media (max-width: 767px) {
    .visa-price {
        margin-left: 12%;
    }
}

.arrow-icon {
    font-size: 14px;
    color: #333;
}

/* Medium screens */
@media (min-width: 768px) and (max-width: 991px) {
    .visa-list li {
        flex: 1 0 45%;
        /* Take about half the row */
    }
}

/* Large screens */
@media (min-width: 992px) {
    .container.trending-visas {
        max-width: 80%;
    }

    .visa-list li {
        flex: 1 0 45%;
        /* Adjusted to take up about half of the row */
    }
}

/* Small screens */
@media (max-width: 767px) {
    .visa-list li {
        flex: 1 0 100%;
        /* Full width on small screens */
        margin-bottom: 10px;
    }
}


/* styling for buttons */

/* Filter Buttons Container */
.visa-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Center the buttons horizontally */
    gap: 10px;
    /* Space between buttons */
    margin-bottom: 20px;
    /* Space below the buttons */
}

/* Filter Button Styling */
.filter-btn {
    position: relative;
    /* To position the tick icon */
    flex: 1 1 48%;
    /* Take up roughly half of the container width */
    padding: 10px 15px;
    /* Padding inside the button */
    font-size: 16px;
    /* Font size for the text */
    border: 1px solid #007bff;
    /* Border color */
    border-radius: 6px;
    /* Rounded corners */
    background-color: #fff;
    /* Background color */
    color: #007bff;
    /* Text color */
    cursor: pointer;
    /* Pointer cursor on hover */
    text-align: center;
    /* Center align the text */
    transition: background-color 0.3s, color 0.3s;
    /* Smooth transition for hover effects */
}

/* Tick Icon Styling */
.tick-icon {
    position: absolute;
    top: 10px;
    /* Adjust as needed */
    right: 10px;
    /* Adjust as needed */
    font-size: 22px;
    /* Increased size of the tick icon */
    color: #007bff;
    /* Color of the tick icon */
    display: none;
    /* Hide by default */
}

/* Hover Effect */
.filter-btn:hover {
    background-color: #007bff;
    /* Change background color on hover */
    color: #fff;
    /* Change text color on hover */
}

/* Display Tick Icon When Button is Active */
.filter-btn.active .tick-icon {
    display: block;
    /* Show tick icon */
}

/* Responsive Styling for Filter Buttons */
@media (max-width: 767px) {
    .filter-btn {
        flex: 1 1 48%;
        /* Two buttons per line on small screens */
        margin-bottom: 10px;
        /* Space below each button */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .filter-btn {
        flex: 1 1 48%;
        /* Two buttons per line on medium screens */
    }
}

@media (min-width: 992px) {
    .filter-btn {
        flex: 1 1 22%;
        /* Adjust size to fit buttons on larger screens */
    }
}


/* trending visa end */



/* bootstapp cards styling starts */



/* Specific Styles */
#covid-2 {
    margin-top: 2%;
    margin-bottom: 3%;
}

#fl-10 {
    margin-top: 5%;
    background-color: black;
    padding-top: 8%;
    padding-bottom: 8%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main {
    width: 100%;
    max-width: 550px;
    height: 200px;
    /* Adjusted height for larger screens */
    background-color: white;
    display: flex;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    align-items: center;
    position: relative;
    margin-bottom: 5%;
}

.photo-p {
    width: 200px;
    height: 100%;
    object-fit: cover;
}

.covid {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h5 {
    margin-bottom: 10px;
    font-size: 24px;
}

h6 {
    margin-bottom: 5px;
    font-size: 18px;
    color: #777;
}

hr {
    border: 1px solid blue;
    margin: 10px 0;
    width: 60%;
}

p {
    font-size: 16px;
    margin-bottom: 20px;
}

.custom-card-button {
    background-color: #ff6600;
    color: #fff;
    border-radius: 20px;
    padding: 8px 20px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    position: absolute;
    bottom: 20px;
    right: 20px;
}

/* Responsive Adjustments */
@media (max-width: 991px) and (min-width: 768px) {
    .main {
        height: 180px;
        /* Slightly smaller height */
    }

    .photo-p {
        width: 140px;
        /* Adjust image width */
    }

    .covid {
        padding: 15px;
    }

    h5 {
        font-size: 18px;
        /* Adjust heading size */
    }

    h6 {
        font-size: 14px;
        /* Adjust subheading size */
    }

    p {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .custom-card-button {
        font-size: 13px;
        padding: 6px 18px;
        bottom: 15px;
        right: 15px;
    }

    hr {
        width: 55%;
        margin: 7px 0;
    }
}

@media (max-width: 576px) {
    .main {
        height: 160px;
        /* Slightly smaller height */
    }

    .photo-p {
        width: 120px;
        /* Adjust image width */
    }

    .covid {
        padding: 10px;
    }
    #covid-2 {
        margin-top: 30%;
        margin-bottom: 3%;
    }

    h5 {
        font-size: 16px;
        /* Adjust heading size */
    }

    h6 {
        font-size: 12px;
        /* Adjust subheading size */
    }

    p {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .custom-card-button {
        font-size: 12px;
        padding: 6px 15px;
        bottom: 10px;
        right: 10px;
    }

    hr {
        width: 50%;
        margin: 5px 0;
    }
}

@media (max-width: 320px) {
    .main {
        height: 140px;
        /* Even smaller height for very small screens */
    }

    .photo-p {
        width: 100px;
        /* Adjust image width */
    }

    .covid {
        padding: 8px;
    }
    #covid-2 {
        margin-top: 30%;
        margin-bottom: 3%;
    }

    h5 {
        font-size: 14px;
        /* Adjust heading size */
    }

    h6 {
        font-size: 10px;
        /* Adjust subheading size */
    }

    p {
        font-size: 10px;
        margin-bottom: 8px;
    }

    .custom-card-button {
        font-size: 8px;
        padding: 4px 10px;
        bottom: 8px;
        right: 6px;
    }

    hr {
        width: 50%;
        margin: 5px 0;
    }
}

.visa-list .col-md-6 {
    display: block;
    /* Hide all items initially */
}


/* bootstapp cards styling ends */


/* fl-5 section styles */
#fl-5 {
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    /* Center content horizontally */
    align-items: center;
    /* Center content vertically */
    margin-top: 3%;
}

/* Full-width GIF with aspect ratio maintained */
.responsive-gif {
    margin-top: 2%;
    display: block;
    /* Remove extra space below image */
    height: auto;
    /* Maintain aspect ratio */
    width: 80%;
    /* Full width of container */
}

/* For large screens (1025px and up) */
@media (min-width: 1025px) {
    .responsive-gif {
        width: 100%;
        /* Restore full width for large screens */
        height: auto;
        /* Maintain aspect ratio */
    }
}

/* For medium screens (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .responsive-gif {
        width: 80%;
        /* Restore full width for medium screens */
        height: auto;
        /* Maintain aspect ratio */
        margin-top: 0;
    }
}

/* For small screens (up to 767px) */
@media (max-width: 767px) {
    #fl-5 {
        position: relative;
        width: 100vw;
        /* Full viewport width */
        height: 25vh auto;
        /* 50% of viewport height */
        overflow: hidden;
        /* Hide overflow content */
        display: flex;
        justify-content: center;
        /* Center GIF horizontally */
        align-items: center;
        /* Center GIF vertically */
    }

    .responsive-gif {
        margin-top: 0;
        position: relative;
        width: 215%;
        /* Increase width to show 45% of GIF */
        height: auto;
        /* Maintain aspect ratio */
        transform: translateX(-52%);
        /* Shift left to show 45% of GIF */
        object-fit: cover;
        /* Ensure GIF covers the container without distortion */
    }

    .pic-p {
        width: 100%;
        height: auto;
    }
}


/* testimonials start*/
#fl-2 {
    margin-top: 4%;
    margin-bottom: 2%;
}

.owl-carousel .item {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.content {
    width: 320px;
    height: 250px;
    padding: 20px;
    background-color: #e7e5e5;
    border-radius: 20px;
    border: 2px solid black;
    margin-left: auto;
    margin-right: auto;
}

.star-icon {
    font-size: 24px;
    margin-bottom: 10px;
}

.text {
    font-size: 16px;
    margin-bottom: 10px;
}

.title {
    font-size: 20px;
}

@media (max-width: 800px) {
    .content {
        width: 270px;
        height: 240px;
    }
}

@media (max-width: 768px) {
    .owl-carousel .item {
        flex: 1 0 100%;
    }
}

.owl-carousel .item a {
    display: block;
    margin-top: 10px;
    color: #0568d1;
    font-size: 20px;
}

/* testimonials ends */


/* feature section start */
#fl-6 {
    margin-top: 4%;
}

#sec-heading {
    text-align: center;
    color: #00224F;
    font-weight: bold;
    margin-bottom: 5%;

}

.pic-p {
    width: 80%;
    height: auto;
}

#gr-1 {
    margin-left: 12%;
    margin-right: 12%;
}

/* Styles for viewports between 600px and 900px wide */
@media screen and (min-width: 300px) and (max-width: 546px) {
    #gr-1 {
        margin-left: 0px;
        margin-right: 0px;
    }
}

/* feature section end */

/* offices start */

#fl-7 {
    margin-top: 2%;
    margin-bottom: 2%;
}

/* Keyframes for the scroll animation */
@keyframes scrollInFromBottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

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

/* Apply animation to the carousel when the .animate class is added */
.owl-carousel.animate {
    animation: scrollInFromBottom 1s ease-out;
}

.owl-carousel .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.owl-carousel.animate .owl-item.active .item {
    opacity: 1;
    transform: scale(1);
}

.owl-carousel .item img {
    width: 50%;
    max-width: 60%;
    height: auto;
}

@media (min-width: 768px) {
    .owl-carousel .item img {
        width: 50%;
    }
}


/* offices end */

/* why choose us section start */

#why-choose-us .owl-carousel .item img {
    width: 20% !important;
    max-width: 20% !important;
    height: auto;
}

@media (min-width: 768px) {
    #why-choose-us .owl-carousel .item img {
        width: 20% !important;
        max-width: 20% !important;
    }
}

.why-heading {
    margin-top: 2%;
    margin-bottom: 2%;
    color: #00224F;
    font-size: 22px;
    font-weight: bold;
}

/* why choose us section end */

/* Newsletter Section Start */

/* Newsletter Section Container */
.newsletter-section {
    background-color: #003366;
    /* Dark blue background */
    padding: 30px;
    border-radius: 30px;
    /* Rounded corners */
    max-width: 1200px;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center elements horizontally */
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
}

/* Subscription Text Styling */
.newsletter-text {
    color: white;
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 15px 0;
    flex: 1 1 100%;
    /* Full width on small screens */
    text-align: center;
    /* Center text on all screen sizes */
}

/* Input and Button Wrapper */
.hafiz {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Full width on small screens */
    max-width: 800px;
    /* Limit maximum width */
    margin: 0 auto;
    /* Center align */
}

/* Email Input Field Styling */
#news-inp[type="email"] {
    border: none;
    width: calc(100% - 20px);
    /* Adjust width to allow button overlap */
    height: 50px;
    padding: 0 20px;
    border-radius: 25px;
    font-size: 16px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    /* Slight shadow for better visibility */
    outline: none;
}

/* Subscribe Button Styling */
#btn-8 {
    position: absolute;
    right: 0;
    /* Position to the right */
    background-color: #ff6600;
    /* Orange color */
    color: white;
    padding: 0 30px;
    height: 52px;
    letter-spacing: 1px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    z-index: 1;
}

/* Button Hover Effect */
#btn-8:hover {
    color: #e65c00;
    background-color: #fff;
    border: 2px solid #e65c00;
}

/* Responsive Adjustments for Small Screens */
@media (max-width: 768px) {
    .newsletter-text {
        font-size: 20px;
        /* Adjust font size on smaller screens */
    }

    #news-inp[type="email"] {
        height: 40px;
        /* Adjust height on smaller screens */
        font-size: 14px;
        /* Smaller font size on small screens */
        padding-right: 100px;
        /* Adjust the padding to account for the button overlap */
    }

    #btn-8 {
        padding: 0 20px;
        height: 40px;
        /* Adjust height on smaller screens */
        font-size: 14px;
        /* Smaller font size on small screens */
        right: 10px;
        /* Adjust the position on smaller screens */
    }
}

#fl-news {
    background-color: #fff;
    padding-top: 1%;
    padding-bottom: 1%;
}

/* Newsletter Section End */

/* footer css */
#fl-footer {
    background-color: #fff;
}

.footer {
    background-color: #fff;
    padding: 40px 0;
    font-size: 14px;
    color: #495057;
    margin-left: 8%;
    font-weight: bold;
    margin-bottom: 0;
}

.footer a {
    color: #495057;
    text-decoration: none;
}

.footer a:hover {
    color: #f25c27;
}

.footer .social-icons a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    transition: all 0.3s ease;
}

.footer .social-icons a:hover {
    border-color: #f25c27;
    color: #f25c27;
}

.footer .social-icons i {
    font-size: 20px;
}

.footer h5 {
    font-size: 16px;
    color: #f25c27;
    margin-bottom: 20px;
    font-weight: bold;
}

.footer .small-screen-footer {
    display: none;
    text-align: center;
}

@media (max-width: 991.98px) {
    .footer .full-footer {
        display: none;
    }

    .footer .small-screen-footer {
        display: block;
    }

    .footer .social-icons {
        justify-content: center;
    }
}

@media (max-width: 525px) {
    .footer .full-footer {
        display: none;
    }

    .footer .small-screen-footer {
        display: block;
    }

    .footer .social-icons {
        justify-content: center;
    }
}

/* ================================================== footer sction end ================================================================*/


/* mobile carousel start */

/* Video background */
.video-container2 {
    position: relative;
    height: 100vh;
    overflow: hidden;
    padding-top: 2%;
}

/* Default for small and medium screens */
.video-container2 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 95%;
    object-fit: cover;
    z-index: -2;
    padding-top: 5%;
}

/* Adjust video position on large screens */
@media (min-width: 1200px) {
    .video-container2 video {
        left: 18%;
        transform: translateX(-2%);
    }
}

/* Content over video */
.content2 {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    height: 100%;
}

.content2 .container2 {
    max-width: 800px;
    padding: 20px;
}

#remote {
    color: #00224F;
    margin-left: 10%;
    font-size: 40px;
    padding-top: 4%;
    margin-bottom: -12%;
}

#remote-span {
    color: orangered;
    font-weight: bold;
    font-size: 52px;
}
.c-images{
    margin-top: 18%;
    margin-left: 20%;
}
/* Carousel */
.pen-carousel .owl-carousel {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 18%;
    gap: 0; /* Remove gap between items */
    padding: 0; /* Remove any padding */
}

/* OWL Carousel Fix - specific to pen-carousel */
.pen-carousel .owl-stage {
    display: flex;
    gap: 25px; /* Ensure no space between items */
}

.pen-carousel .owl-item {
    width: auto !important; /* Ensure items take only the necessary width */
}

.pen-carousel a {
    display: inline-block;
    padding: 0; /* Ensure no padding around the images */
}

.pen-carousel .glass-carousel {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;

    border-radius: 15px; /* Apply rounded corners to match the style */
}
.glass-carousel{
    margin-top: 50%;
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
    .pen-carousel .glass-carousel {
        width: 150%;
        max-width: 50%;
        height: auto;
        margin-top: 70%;
        text-align: center;
        margin-left: 27%;
    }

    .pen-carousel .owl-carousel {
        margin-top: 40%;
        justify-content: center;
        align-items: center;
    }

    #remote {
        text-align: center;
        margin-left: auto;
    }

    #remote {
        color: #00224F;
        font-size: 30px;
        padding-top: 4%;
        margin-bottom: -3%;
    }

    #remote-span {
        font-size: 32px;
    }
    .c-images{
        margin-top: 25px;
        margin-left: 0;
    }
}

@media (max-width: 376px) {
    .pen-carousel .glass-carousel {
        width: 120%;
        max-width: 50%;
        height: auto;
        margin-top: 78%;
    }

    .pen-carousel .owl-carousel {
        justify-content: center;
        align-items: center;
        margin-top: 20%;
    }
    .c-images{
        margin-top: 25px;
        margin-left: 0;
    }
}

/* Large screen adjustment - remove margin and ensure static look */
@media (min-width: 1200px) {
    .pen-carousel .glass-carousel {
        max-width: 200px; /* Restrict image width for large screens */
        margin: 0 auto; /* Center images */
    }

    .pen-carousel .owl-carousel {
        justify-content: center;
        align-items: center;
        margin-top: 18%;
    }

    .pen-carousel .owl-stage-outer {
        overflow: hidden !important; /* Disable scrolling */
    }
}




/* mobile carousel ends */

/* assistance section start */

.help {
    position: fixed !important;
    width: 13% !important;
    height: 463px !important;
    bottom: -238px !important;
    right: -24px !important;
    text-align: right !important;
    cursor: pointer !important;
    z-index: 100 !important;
    right: -10.8% !important;
}
@media (min-width: 769px) and (max-width: 1024px) {
    .help {

        right: -9% !important;
    }
}
@media (max-width: 768px) {

    /* Small screens */
    .help {
        position: fixed !important;
        width: 13% !important;
        height: 350px !important;
        bottom: 0px !important;
        right: -24px !important;
        text-align: right !important;
        cursor: pointer !important;
        z-index: 100 !important;
        right: -3% !important;
    }
}

.modal-content {
    border-radius: 10px;
    padding: 20px;
}

.modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

.modal-title {
    font-size: 24px;
    font-weight: 600;
}

.btn-close {
    font-size: 1.5rem;
}

.modal-body {
    padding-top: 0;
}

.form-label {
    font-weight: 500;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    font-size: 18px;
    padding: 10px 0;
    border-radius: 5px;
}

.modal-footer {
    border-top: none;
    padding-top: 0;
}

.modal-footer p {
    margin-bottom: 5px;
    font-size: 18px;
}

.modal-footer a {
    font-size: 20px;
    color: #007bff;
    font-weight: 500;
}

.modal-footer a:hover {
    text-decoration: underline;
}

/* assistance ends */

/* fake banner start */

#fake-banner-row {
    text-align: center;
    margin-top: 4%;
    margin-left: 2%;
    margin-right: 2%;
}

#fake-counter-head {
    color: #007bff;
    font-size: 22px;
    font-weight: bold;
}

@media screen and (max-width: 767px) {
    #fake-banner-row {
        text-align: center;
        margin-top: 6%;
        margin-left: 2%;
        margin-right: 2%;
    }
}

/* fake banner ends */

/* request-form starts  */
#request-fl {
    width: 88%;
    margin-top: 4%;
    padding: 0 5%;
}

#request {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: nowrap;
    /* Ensure no wrapping for large screens */
}

#request-pic {
    width: 100px;
    max-width: 150px;
    margin-right: 15px;
}

#text-container {
    display: flex;
    flex-direction: column;
    /* Stack headings vertically */
    margin-right: 15px;
    /* Space between text and image */
}

#request-now,
#request-now-l {
    margin: 0;
    white-space: nowrap;
    transition: transform 0.3s ease-in-out;
    /* Animation for headings */
}

#request-now {
    font-size: 1.1em;
    margin-left: 10px;

}

#request-now-l {
    font-size: 1.5em;
    margin-left: 10px;
}

#fake-counter-head {
    color: #007bff;
    /* Assuming this is the color of the link text */
}

#request-button {
    padding: 10px 20px;
    border: 1px solid orange;
    background-color: white;
    color: orange;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    margin-left: auto;
}

/* Responsive adjustments for small screens */
@media screen and (max-width: 767px) {
    #request {
        flex-wrap: wrap;
        /* Allow wrapping on small screens */
        align-items: flex-start;
        /* Align items to the start on small screens */
        justify-content: center;
        /* Center-align content */
        text-align: center;
        /* Center-align text */
    }

    #request-pic {
        margin-bottom: 15px;
        /* Add margin below image */
    }

    #text-container {
        flex: 1;
        /* Allow text container to take full width */
        margin-bottom: 15px;
        /* Margin below text container */
    }

    #request-button {
        flex-basis: 100%;
        /* Button takes full width */
        margin-top: 2%;
        /* Margin above the button */
        margin-left: 0;
        /* Remove left margin */
        white-space: nowrap;
        /* Prevent text from wrapping */
        margin-bottom: 5%;
    }

    #request-now,
    #request-now-l {
        transform: translateY(-10px);
        /* Subtle lift effect */
    }

    #request-now {
        font-size: 1em;
        /* Adjust font size for small screens */
    }

    #request-now-l {
        font-size: 1.2em;
        /* Adjust font size for small screens */
    }
}

/* Ensures responsiveness for very small screens like 320px */
@media screen and (max-width: 320px) {
    #request {
        padding: 0 10px;
        /* Add padding to prevent elements from touching the edges */
    }

    #request-pic {
        width: 80px;
        /* Reduce size of image for small screens */
        max-width: 100px;
    }

    #request-now {
        font-size: 0.9em;
        /* Adjust font size for very small screens */
    }

    #request-now-l {
        font-size: 1em;
        /* Adjust font size for very small screens */
    }

    #request-button {
        font-size: 14px;
        /* Adjust button font size */
        padding: 8px 16px;
        /* Adjust button padding */
    }
}

/* Animation for headings */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#request-now,
#request-now-l {
    animation: fadeIn 1s ease-in-out;
}

/* request-form ends  */

.bnr-cls {
    display: block;
    width: 100%;
    height: 282px;
    margin: 12% 0px 0px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
}

@media (min-width: 320px) and (max-width: 525px) {
    .bnr-cls {
        transform: translateX(5%);
        background-size: cover;
        width: 95%;
        display: flex;
        height: auto;
    }
}

/* slider */


/* whatsapp icon */


img.svg-chat-need {
    display: block !important;
}

.whts-chat-icon {
    position: fixed !important;
    width: 14% !important;
    height: 76px !important;
    bottom: 68px !important;
    /* right: 0 !important; */
    text-align: right !important;
    cursor: pointer !important;
    z-index: 100 !important;
    left: -109px !important;
}

.need-responsive-box {
    display: none;
}
img.svg-chat-new {
    width: 29%;
}

img.svg-chat-need {
    width: 16% !important;
    display: block;
}