/* Navigation bar */

/* Responsive Style */
@media (max-width: 880px) {

    .navbar {
        backdrop-filter: blur(10px);
        width: 100;
        background-color:  #111;
        margin-bottom: -20px;

    }

    .navbar-container .navbar-menu {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.7rem !important;
        position: absolute;
        height: 100vh;
        width: 250px;
        top:0;
        right: 0;
        padding: 5rem 1.5rem;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(10px);
        background-color: rgba(179, 170, 170, 0.674);
    }

    .navbar-container .navbar-menu.active{
        display: Flex;
       }

    .navbar-toggle {
        display: block;
        z-index: 999;
    }

    .navbar-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .navbar-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .navbar-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

@media (max-width:480px) {
    .navbar-container {
        padding: 0 1rem;
    }

    .navbar-logo {
        font-size: 1.7rem;
    }

    .logo-image {
            height: 150px;
    }

    .navbar-container .navbar-menu li a {
        font-size: 1.2rem;
        padding: 3px 15px;
    }
}
  
/*footer*/
@media (max-width: 700px) {
    .footerNav ul{
        flex-direction: column;
    }
    .footerNav ul li{
        width: 100%;
        text-align: center;
        margin: 10px;
    }
}

/* image slider */
@media screen and (max-width: 768px){
    .slider{
        height: 400px;
    }
    .slider .item img {
    object-fit: contain;
    }
}

@media (max-width: 768px) {
    .hero-cta-btn-btn1, .hero-cta-btn-btn2 {
        font-size: 1rem; /* Reduce font size */
        padding: 4px 1px; /* Reduce padding */
        width: auto /* Allow buttons to shrink naturally */
    }
    .hero-cta-btn-btn2{
        margin-left: 15px;
    }
}

/* For screens smaller than 480px (mobile) */
@media (max-width: 480px) {
    .hero-cta-btn-btn1, .hero-cta-btn-btn2 {
        font-size: 0.5rem; /* Further reduce font size */
        padding: 4px 1px; /* Further reduce padding */
    }
    .hero-cta-btn-btn2{
        margin-left: 25px;
    }

}

/* for linked cards */
/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    .container {
        margin-top: -220px;
        flex-direction: column; /* Stack the cards vertically */
        align-items: center; /* Center the cards horizontally */
        gap: 20px; /* Add space between the cards */
        height: auto; /* Adjust height dynamically */
        padding: 20px; /* Add padding for better spacing */
    }

    .card {
        position: relative; /* Position the .intro relative to the card */
        flex: 1 1 100%; /* Each card takes full width */
        max-width: 400px; /* Prevent cards from getting too large */
        margin: 10px 0; /* Add space between stacked cards */
        overflow: hidden; /* Prevent the .intro from spilling outside */
    }

    .card img {
        width: 100%; /* Ensure the image fits the card width */
        height: auto; /* Maintain aspect ratio */
        border-radius: 3px;
        transition: transform 0.5s ease-in-out; /* Smooth zoom effect */
    }

    .intro {
        position: absolute; /* Position intro inside the card */
        bottom: 0; /* Stick to the bottom by default */
        left: 0; /* Align to the left edge */
        width: 100%; /* Match the card's width */
        height: 60px; /* Default height of the intro box */
        background: rgba(0, 0, 0, 0.7); /* Semi-transparent dark background */
        color: white;
        text-align: center;
        display: flex; /* Center text inside the intro */
        align-items: center; /* Vertically center content */
        justify-content: center; /* Horizontally center content */
        transition: all 0.5s ease-in-out; /* Smooth transition */
    }

    .card:hover .intro {
        height: 100%; /* Expand the intro to cover the entire image */
        bottom: 0; /* Ensure it stays aligned with the card */
        background: rgba(0, 0, 0, 0.9); /* Darken the background slightly on hover */
    }

    .card:hover img {
        transform: scale(1.1); /* Zoom the image on hover */
    }

    /* Ensure the intro goes back to its position when hover ends */
    .card:not(:hover) .intro {
        height: 60px; /* Shrink back to the original size */
        background: rgba(0, 0, 0, 0.7); /* Keep the original background color */
    }
}

/* for partner with us section */
@media screen and (max-width: 768px){
    .partner_with_us{
        height: 150px;

    }
    .partner_with_us .item_partner img {
    object-fit: cover;
    }
}

@media (max-width: 768px) {
    .hero-cta-btn-btn01 {
        bottom: 20px;
        font-size: 0.5rem; /* Reduce font size */
        padding: 4px 1px; /* Reduce padding */
        width: auto /* Allow buttons to shrink naturally */
    }
    .hero-cta-btn-btn01{
        margin-left: 5px;
    }
}

/* for FAQs page */
@media (max-width:768px) {
    .faqs_box {
        width: 90%;
        margin: 100px auto;
        background:#fff;
        border-radius: 7px;
        box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
    }

    details summary{
        outline: none;
        font-size: 12px;
        padding: 8px;
        color: rgb(34, 33, 35);
        font-weight: 600;
    }
    
}