/* Responsive margin adjustments */
.style1 {
    margin-top: 100px; /* Increased to account for fixed navbar */
    padding-bottom: 80px; /* Add padding to prevent footer overlap */
}

.style2 {
    margin-top: 100px; /* Increased to account for fixed navbar */
    padding-bottom: 80px; /* Add padding to prevent footer overlap */
}

.style3 {
    margin-top: 100px; /* Increased to account for fixed navbar */
    padding-bottom: 80px; /* Add padding to prevent footer overlap */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .style1, .style2, .style3 {
        margin-top: 80px; /* Adjusted for mobile navbar height */
        padding-bottom: 100px; /* Increase bottom padding on mobile */
    }
    
    .wappler-type-picture {
        max-width: 200px !important;
        height: auto !important;
    }
    
    .wappler-type-user {
        max-width: 150px !important;
        height: auto !important;
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    .navbar-nav {
        text-align: center;
        background-color: #343a40 !important; /* Dark background for mobile menu */
        padding: 1rem;
        border-radius: 0.375rem;
        margin-top: 0.5rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
        color: #ffffff !important;
    }
    
    .navbar-nav .nav-link:hover {
        color: #f8f9fa !important;
    }
    
    .navbar-nav .dropdown-menu {
        background-color: #495057;
        border: none;
    }
    
    .navbar-nav .dropdown-item {
        color: #ffffff;
    }
    
    .navbar-nav .dropdown-item:hover {
        background-color: #6c757d;
        color: #ffffff;
    }
}

@media (max-width: 576px) {
    .style1, .style2, .style3 {
        margin-top: 70px; /* Adjusted for smaller mobile screens */
        padding-bottom: 120px;
    }
    
    .wappler-type-picture {
        max-width: 150px !important;
    }
    
    .wappler-type-user {
        max-width: 120px !important;
    }
    
    h1, h2 {
        font-size: 1.5rem;
    }
    
    .card-body {
        padding: 1rem;
    }
}

/* Footer responsive adjustments */
@media (max-width: 768px) {
    .navbar-text {
        font-size: 0.75rem;
        padding: 0.25rem !important;
    }
    
    .navbar-text.d-none.d-lg-block {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .navbar-text {
        font-size: 0.7rem;
        padding: 0.2rem !important;
    }
    
    .navbar-text.d-none.d-md-block {
        display: none !important;
    }
}

/* Container responsive improvements */
.container {
    padding-left: 15px;
    padding-right: 15px;
}

@media (max-width: 768px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Card responsive improvements */
.card {
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-img-top {
    object-fit: cover;
}

/* Button responsive improvements */
.btn {
    white-space: nowrap;
    min-width: 120px;
}

@media (max-width: 576px) {
    .btn {
        min-width: 100px;
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
}

/* Image responsive improvements */
.wappler-type-picture {
    width: 100%;
    max-width: 250px;
    height: auto;
    object-fit: cover;
}

.wappler-type-user {
    width: 100%;
    max-width: 200px;
    height: auto;
    object-fit: cover;
}

/* Legacy styles */
.style4 {
    background-image: -webkit-gradient(linear, left bottom, left top, from(black), to(white));
    background-image: linear-gradient(0deg, black 0%, white 100%);
}

.style5 {
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.style6 {
    border-width: 0px;
}

.style7 {
    font-size: 39px;
}

.style8 {}

.style9 {
    margin-bottom: 20px;
}

.style10 {
    margin-top: 12px;
}

.style11 {
    margin-top: 12px;
}

.style12 {
    background-image: url("../assets/images/iStock-1221255943.jpg");
    background-size: cover;
}

.style13 {
    margin-top: 20vh;
}

.style14 {}

/* Connect page specific styles */
.contact-info {
    font-size: 1rem;
}

.contact-info i {
    color: #007bff;
    width: 20px;
}

@media (max-width: 768px) {
    .contact-info {
        font-size: 0.9rem;
    }
    
    .contact-info i {
        width: 18px;
    }
}

@media (max-width: 576px) {
    .contact-info {
        font-size: 0.85rem;
    }
    
    .contact-info i {
        width: 16px;
    }
}