@import './css/css/root.css';

 /* Navbar Custom Styling */
 .navbar {
    background-color: var(--primary);
    font-family: 'Open Sans', sans-serif;
}

ul li a .dropdown-item{
    font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;
  
}
#sec-1be7 {
    background-color:  var(--primary);
}
.u-btn-1{
    background-color:  var(--primary);
}
.dropdown-menu{
    font-family: 'Open Sans', sans-serif;
}

.navbar-nav{
    font-family: 'Open Sans', sans-serif;
}
.navbar-nav .nav-link {
    color: var(--on-primary);
}

.navbar-nav .nav-link:hover {
    color: var(--secondary);
}

.navbar-toggler-icon {
    background-color: var(--on-primary);
}

/* General Footer Styles */
footer {
    background-color: var(--on-primary-container);
    color: var(--on-primary);
    padding: 20px 0;
    font-family: 'Open Sans', sans-serif;
}

footer h5 {
    font-size: 1rem;
    margin-bottom: 15px;
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer h5 .arrow {
    font-size: 1rem;
    transition: transform 0.3s;
    display: none; /* Default: hidden */
}

footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

footer li {
    margin-bottom: 10px;
    font-size: 0.875rem;
}

footer a {
    color: var(--on-primary);
    text-decoration: none;
    transition: color 0.3s;
}

footer a:hover {
    color: var(--primary);
    text-decoration: underline;
}

footer p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--on-primary);
}

/* Desktop View: No Collapsible Behavior */
@media screen and (min-width: 1025px) {
    footer h5 {
        cursor: default; /* Disable pointer on headlines */
    }

    footer h5 .arrow {
        display: none; /* Arrows hidden */
    }

    .collapse {
        display: block !important; /* Ensure all sections are always visible */
    }
}

/* Tablet View: Collapsible Behavior Enabled */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    footer h5 .arrow {
        display: inline; /* Show arrows */
    }

    footer h5[aria-expanded="true"] .arrow {
        transform: rotate(180deg); /* Rotate arrow when expanded */
    }
}

/* Mobile View: Collapsible Behavior Enabled */
@media screen and (max-width: 767px) {
    footer h5 .arrow {
        display: inline; /* Show arrows */
    }

    footer h5[aria-expanded="true"] .arrow {
        transform: rotate(180deg); /* Rotate arrow when expanded */
    }
}

a{
    font-size: 0.875rem;
}
/* Welcome Section Styles 
.welcome-section 
    padding: 50px 0; /* Space around the section 
    background-color: var(--primary-container); /* Matches primary container color *
    color: var(--on-primary-container);
}

.welcome-section .welcome-heading {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--primary); /* Primary color for the heading *
}

/*.welcome-section .welcome-description {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--on-primary-container); /* Text color for readability */
/*}

.welcome-section .btn {
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: var(--primary);
    color: var(--on-primary);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.welcome-section .btn:hover {
    background-color: var(--primary-fixed); /* Slightly darker shade for hover effect 
}

/* Image Styles 
.welcome-section img {
    width: 100%; /* Ensures the image scales properly 
    border-radius: 10px; /* Rounded corners for a modern look 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth 
}*/

/* Responsive Styles 
@media (max-width: 768px) {
    .welcome-section {
        text-align: center; /* Center text on smaller screens 
    }

    .welcome-section .row {
        flex-direction: column; /* Stack image and text vertically *
    }

    .welcome-section .btn {
        display: inline-block;
        margin: 0 auto;
    }
}

/* Welcome Section Styles 
.welcome-section {
    position: relative;
    width: 100%;
    height: 100vh; /* Full screen height 
    background: url('/image/idk-building.jpg') no-repeat center center/cover; /* Full-size background image 
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-primary-container);
    text-align: center;
} */

/* Overlay to add contrast for text *
.welcome-section .overlay {
    background-color: rgba(0, 0, 0, 0.0); /* Semi-transparent black overlay *
    
    padding: 15px;
    border-radius: 10px;
    color: var(--on-primary); /* Ensure text contrast *
}

/* Heading Style *
.welcome-section .welcome-heading {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--primary); /* Use primary color *
}

/* Description Style *
.welcome-section .welcome-description {
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: 10px;
}

/* Button Style *
.welcome-section .btn {
    font-size: 1rem;
    padding: 12px 24px;
    border-radius: 5px;
    background-color: var(--primary);
    color: var(--on-primary);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.welcome-section .btn:hover {
    background-color: var(--inverse-primary); /* Slightly darker shade for hover effect *
color: var(--inverse-surface);}

/* Responsive Styles *
@media (max-width: 768px) {
    .welcome-section {
        height: 70vh; /* Adjust height for smaller screens *
    }

    .welcome-section .welcome-heading {
        font-size: 0.9rem; /* Smaller heading *
    }

    .welcome-section .welcome-description {
        font-size: 1rem; /* Adjust text size *
    }

    .welcome-section .btn {
       
        padding: 10px 20px;
    }
}

/* Highlight the text white */
/* Highlight the text with a white background */
/* Highlight the text directly *
.welcome-description {
    color: white; /* Set the text color to white *
    text-shadow: 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 6px #ffffff; / Glowing effect *
    font-weight: bold; /* Make the text stand out more *
    font-family: Georgia, 'Times New Roman', Times, serif;
}


/* Card Section Wrapper *
.card-section {
    position: absolute;
    bottom: -50%; /* Position halfway down the welcome section *
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 90%;
    max-width: 1200px;
    justify-content: center;
    z-index: 10; /* Ensure it appears above the welcome section *
}

/* Individual Card *


.card:hover {
    transform: translateY(-10px); /* Slight lift effect on hover *
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Card Image *
.card-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    overflow: hidden;
}

/* Card Content *
.card-content {
    padding: 15px;
}

.card-content h3 {
    font-size: 1.2rem;
    color: var(--on-primary-container);
    margin-bottom: 10px;
}

/* Hidden Hover Text *
.card-content .hover-text {
    display: none;
    font-size: 0.9rem;
    color: var(--secondary-fixed);
    line-height: 1.5;
}

/* Show Hover Text on Hover *
.card:hover .hover-text {
    display: block;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .card-section {
        flex-direction: column;
        align-items: center;
        bottom: -30%; /* Adjust for smaller screens */
    }

    .card {
        width: 80%; /* Adjust card size */
        margin-bottom: 20px;
    }
}

.navbar{
       overflow:visible;
    position: -webkit-sticky;
    position: sticky;
    top: 0; 
       z-index: 1000; 
       box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}