/* Responsive Styles */
@media screen and (max-width: 1024px) {
    header {
        padding: 0 30px;
    }
}

@media screen and (max-width: 768px) {
    header {
        justify-content: space-between;
        padding: 20px;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 30px;
    }

    .bar {
        background-color: var(--almond);
        height: 3px;
        width: 25px;
        margin: 4px 0;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -250px;
        height: 100%;
        width: 250px;
        background: #0D1321;
        padding: 20px;
        text-align: left;
        transition: 0.3s;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        margin: 15px 0;
    }
    .cta-button {
        width: auto;
        height: auto;
        margin: 0 50px;
    }
    
}


@media screen and (max-width: 480px) {
    header {
        padding: 10px;
    }

    nav ul {
        font-size: 16px;
        gap: 5px;
    }

    .cta-button {
        font-size: 12px;
    }


}

/*------------hero Section----*/

@media (max-width: 768px) { /* Mobile */
    .hero {
        height: auto; 
        padding: 50px 20px;
    }

    .video-bg {
        height: 300px; /* Adjust for smaller screens */
    }

    .hero-content {
        width: 100%;
        padding: 0 15px;
    }

    .button-row {
        margin-top: 10px;
    }
    
}


/* For smaller screens, adjust card styles */
@media (max-width: 1024px) { 

    .startup {
        padding: 60px 0; /* Adjust padding for better spacing */
    }


    .card {
        width: 90%; /* Adjust card width */
        margin: 20px auto; /* Added margin for spacing */
    }
}

/* For mobile screens */
@media (max-width: 768px) {
  
    .card {
        width: 100%; /* Full width for mobile */
        margin: 15px 0; /* Spacing between cards */
    }

    .container .logo img {
        width: 180px; /* Adjusted logo size */
        height: auto;
    }
}

/* For small mobile screens */
@media (max-width: 480px) { 
    

    .card {
        width: 100%;
        margin: 5px 0; /* Reduced margin for tight spaces */
    }

    .startup {
        padding: 50px 0; /* Reduced padding */
    }


}

/*------------- Responsive Design -------------*/

/* Tablet View */
@media (max-width: 1024px) {

    .container {
        flex-direction: column; /* Stack sections */
        align-items: center;
        gap: 40px;
        padding: 20px; /* Add padding for spacing */
    }

    .logo img {
        width: 90px; /* Adjusted logo size for tablet */
    }

    .card {
        width: 80%; /* Adjust card width for tablet screens */
        margin: 0 auto; /* Center the cards */
    }
}

/* Mobile View */
@media (max-width: 768px) {


    .startup {
        height: auto; /* Allow content to define height */
        padding: 40px 15px; /* Adjust padding for smaller screens */
    }

    .container {
        flex-direction: column;
        gap: 30px;
        padding: 10px; /* Ensure proper spacing */
    }

    .section {
        width: 100%;
    }

    .card {
        width: 95%; /* Full width for cards on mobile */
        margin: 10px 0; /* Add margin between cards */
    }

    .logo img {
        width: 80px; /* Smaller logo for mobile */
    }
}

/* Small Mobile View */
@media (max-width: 480px) {
    
    .card {
        width: 100%; /* Full width cards for small screens */
        margin: 5px 0; /* Tighten margin for small screens */
    }

    .logo img {
        width: 70px; /* Smallest logo size */
    }

    .section-title {
        font-size: 28px; /* Reduce font size for small screens */
    }

    .section-title img {
        width: 30px; /* Adjust flag sizes */
        height: 30px;
    }
}

@media (max-width: 768px) {
    .global-video {
        height: auto; /* Adjust height for mobile */
    }
}

@media (max-width: 480px) {
    .global-video {
        height: 200px; /* Adjust height further for small screens */
    }
}

/* ----- Footer - Responsive ----- */
@media (max-width: 1024px) {
    .footer-container {
        flex-direction: column; /* Stack the footer content */
        align-items: center;
        gap: 20px; /* Adjust gap for tablets */
    }
}

/* Mobile and Small Screen Adjustments */
@media (max-width: 768px) {
    .footer-container {
        gap: 25px; /* Reduce space between footer items */
    }

    .footer-column {
        width: 100%; /* Make footer columns full width */
        text-align: center;
    }

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

    .footer-column.back-to-top-column {
        justify-content: center;
    }

    .footer-divider {
        width: 80%; /* Adjust width for better visual balance */
    }
}

/* Small Mobile View Adjustments */
@media (max-width: 480px) {

    .footer-container {
        gap: 15px; /* More compact space between footer items */
    }

    .footer-divider {
        width: 70%; /* Slightly narrower on very small screens */
    }

    .footer-column {
        text-align: center;
        padding: 0 10px; /* Add padding to prevent text from touching edges */
    }
}


/* --------- Responsive Design for Podcast Section --------- */
/* Responsive Design */
@media (max-width: 1024px) {
    .yt-link{
        font-size: 20px;
        gap: 10px;
        justify-content: left;
    }
    .yt-link img{
        width: 25px;
        height: 25px;
    }

    .podcast-hero {
        height: 500px; /* Adjust height for tablets */
    }
}

@media (max-width: 768px) {
    .yt-link{
        font-size: 20px;
        gap: 10px;
        justify-content: left;
    }
    .yt-link img{
        width: 25px;
        height: 25px;
    }

    .podcast-hero {
        height: 400px; /* Adjust height for smaller screens */
        padding: 20px; /* Add some padding */
    }

    .podcast-hero img {
        max-width: 80%; /* Adjust image size */
    }
}

@media (max-width: 480px) {
    .yt-link{
        font-size: 20px;
        gap: 10px;
        justify-content: left;
    }
    .yt-link img{
        width: 25px;
        height: 25px;
    }

    .podcast-hero {
        height: 350px; /* Further reduce height for mobile */
        padding: 10px;
    }

    .podcast-hero img {
        max-width: 75%;
    }
}
/* ----- Tablet View ----- */
@media (max-width: 1024px) {
    .about-hero, .podcast {
        padding: 40px 10%; /* Add padding for breathing space */
    }

}


/* --------- Responsive Design for Form Section --------- */

/* ----- Small Screen (Mobile) Adjustments ----- */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column; /* Stack form fields vertically */
        width: 100%; /* Ensure form fields take full width */
    }

    .button-row {
        flex-direction: column;
        gap: 10px;
    }

    .form input, .form textarea {
        width: 100%; /* Full-width form fields */
        padding: 12px;
        font-size: 16px;
    }

    .form button {
        width: 100%; /* Full-width button */
        padding: 15px;
        font-size: 18px;
    }
}

/* --------- Responsive Design for Form Section --------- */

/* ----- Medium Screens (Tablets) ----- */
@media (max-width: 1024px) {
    .about-hero, .form {
        padding: 40px 10%; /* Adjust padding for tablets */
    }

    .form input, .form textarea {
        width: 100%; /* Ensure input and textarea are full width */
        padding: 10px;
    }

    .form button {
        width: 100%; /* Button takes full width */
        padding: 12px;
    }
}

/* ----- Small Screens (Phones) ----- */
@media (max-width: 768px) {
    .about-hero, .form {
        padding: 40px 5%; /* Adjust padding for smaller screens */
    }

    .form input, .form textarea {
        width: 100%; /* Form fields should be full width */
        padding: 12px;
        font-size: 16px;
    }

    .form button {
        width: 100%; /* Full-width button for mobile */
        padding: 15px;
        font-size: 18px;
    }
}

/* ----- Extra Small Screens (Mobile) ----- */
@media (max-width: 480px) {
    .form p {
        font-size: 14px; /* Adjust text size for small screens */
    }

    .form input, .form textarea {
        padding: 10px;
        font-size: 14px; /* Adjust font size for small screens */
    }

    .form button {
        padding: 12px;
        font-size: 16px; /* Adjust button font size for small screens */
    }
}


/* --------- Responsive Contact Hero Section --------- */

/* Tablet View */
@media (max-width: 1024px) {
    .contact-hero {
        padding: 0 40px; /* Adjust padding */
        height: 400px; /* Reduce height for tablets */
    }

    .contact-hero h1 {
        font-size: 32px; /* Adjust heading size */
        margin-bottom: 40px;
        margin-top: 40px;
    }

    .contact-hero p {
        font-size: 18px; /* Adjust paragraph font size */
        margin-bottom: 40px;
        line-height: 1.6;
    }
}

/* Mobile View */
@media (max-width: 768px) {
    .contact-hero {
        padding:  40px 5%;
    }

    .contact-hero h1 {
        font-size: 28px; /* Adjust heading size */
    }

    .contact-hero p {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* Small Mobile View */
@media (max-width: 480px) {

    .contact-hero h1 {
        font-size: 24px; /* Smaller heading for small mobile screens */
    }

    .contact-hero p {
        font-size: 14px; /* Smaller paragraph font size */
        line-height: 1.6;
    }
}