*{
    padding:0;
    margin:0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

.container1, .class-list {
    width: 100%;
    overflow: hidden;
}

.navbar {
    min-height: 50px;
    background-image: linear-gradient(55deg, #b60808, #5B0404);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    border-bottom: #ffad06;
    border-style: solid;
    border-bottom-width: 5px;
    position:fixed;
}
a{
    text-decoration: none;
    color: #fff;
    align-items: center;
}
.nav-csu{
    margin-left:10px;
    font-size: 1.8rem;
    text-decoration: none;
    color:#fff;
}


.nav-links {
    list-style: none;
    display: flex;
    gap: 70px;
    margin-right:25px;
    align-items: center;
    padding-top: 10px;
}

.nav-links li a {
    text-decoration: none;
    color: #fff;
    font-size: 1.5rem;
    align-items: center;
}

.menu-icon {
    display: none; /* Initially hide the menu icon on larger screens */
    flex-direction: column;
    cursor: pointer;
}

.bar{
    display: block;
    width:25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #fff;
}

.background1{
    padding-top: 10px;
    opacity: 80%;
    background-size: cover;
    max-height: 100%;
    max-width: 100%;
}

.smaller-image {
    max-width: 90%; /* Adjust the percentage as needed to make it smaller */
    display: block;
    margin: 0 auto; /* Center the image horizontally */
}

.row h1{
    padding-top: 20px;
    padding-left: 20px;
}

main {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    background-color: #FAFAFF; /* Background color */
}

.card {
    text-align: justify;
    background-color: #f0f0fc; /* Background color */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    max-width: 30%;
    transition: transform 0.2s ease; /* Add a smooth transition effect */
}

.card:hover {
    transform: scale(1.02); /* Add a subtle hover effect */
}

.card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.price {
    font-weight: bold;
    color: #e74c3c; /* Accent color 1 (Red) */
    margin-top: 10px;
}

/* "Add to Cart" button styles */
.button1 {
    background-color: #119822; /* Accent color 2 (Green) */
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}



/* Styles for a new button, "Buy Now" */

.background{
    height: 100%;
    width: 100%;
   background-color:#f0f0fc;
    position: absolute;
    
   
    
}

.form-box{
    width: 430px;
    height: 500px;
    position: relative;
    margin: 6% auto;
    background:#fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;

}
.log_img{
    width:90px;
}

.button-box{
    width:230px;
    margin: 10px auto;
    position: relative;
   
    border-radius: 30px;
}

.toggle-btn{
    padding: 10px 30px;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
}

#btn{
    top:0;
    left: 0;
    position: absolute;
    width: 230px;
    height: 100%;
    transition: .5s;
    
}
.submit-btn{
    width: 85%;
    padding: 10px 30px;
    cursor:pointer;
    display:block;
    margin:auto!important;
    margin-top: 50px;
    justify-content: center;
    background: linear-gradient(to right, #ff105f, #ffad06);
    border-radius: 30px!important;
   text-align: center;
}

.input-group{
    top: 200px;
    position: absolute!important;
    width: 310px!important;
    transition: .5s;

}

.input-field{
    width: 100%;
    padding: 10px 0;
    margin: 5px 0;
    border-left:0;
    border-right:0;
    border-top:0;
    border-bottom: 1px solid#999;
    outline:none;
    background: transparent;
    
}

#remember_me{
    margin-top: 10px;
    margin-right:5px;
    margin-bottom: 10px;
}

Span{
    color:#777;
    font-size:15px;
    bottom:50px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.forgot{
    text-align: center!important;
    /* Set font color */
    color: #333;
    /* Set padding */
    margin: 20px 10px;
}

#login{
    left:50px;
}

#register{
    left:450px;
}


/* Media query for responsive design */
@media screen and (max-width: 1068px) {
    .nav-links {
        opacity: 0; /* Initially invisible */
        max-height: 0; /* Collapsed state */
        overflow: hidden; /* Ensures content doesn't spill out */
        flex-direction: column;
        background-color: #940505;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        text-align: center;
        gap: 0;
        z-index: 100;
        transition: max-height 0.5s ease, opacity 0.5s ease;
    }

    .nav-links.nav-active {
        opacity: 1; /* Fully visible */
        max-height: 300px; /* Expand the height */
    }
    

    li{
        margin: 0;
        align-items: center;
    }


    .menu-icon {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 25px;
        padding-right: 10px;
    }

    .menu-icon .bar {
        background-color: white;
        height: 4px;
        width: 100%;
        margin: 2px 0;
        
    }

    .nav-active {
        display: flex; /* Show the navigation links when menu is active */
    }

    main {
        display: block;
        padding: 20px;
        justify-content: space-between;
        background-color: #FAFAFF; /* Background color */
    }
   
    .card{
            max-width: 100%;
            margin: 20px;
        }
    
        .nav-links li:hover{
            background-color:#c04747ee;
            opacity: 50%;
            color: #940505;
            width: 100%;
            margin:0;
            padding:0;
            
        }
    .nav-links li a{
            text-decoration: none;
            color: #fff;
            font-size: 1.2rem;
            align-items: center;  
            margin:0;
            padding:0;  
        }
    
        .nav-links {
            
            margin:0;
            padding:0;
            
        }
   
    .card img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
    }
    
    
}

footer {
    background-image: linear-gradient(55deg, #b60808, #5B0404);
    padding-top: 30px;
   
}

.container1 {
    width: 100%;
    max-width: 1140px;
    margin: auto;
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    justify-content: space-between; /* Ensures even spacing between items */
    color: white;
}

.footer-content {
    flex: 1 1 300px; /* Flex-grow: take up available space, Flex-shrink: shrink when needed, Flex-basis: default to 300px */
    margin: 15px; /* Add margin to separate columns */
    min-width: 250px; /* Prevent items from getting too narrow */
    box-sizing: border-box; /* Include padding and border in element's width and height */
    color: white;
}

.footer-content h3 {
    font-size: 28px;
    margin-bottom: 15px;
    text-align: center;
    color: white;
}

.footer-content p {
    width: 100%;
    margin: auto;
    padding: 7px;
    color: white;
    font-size: 18px;
    text-align: center; /* Center the paragraph content */
}

.footer-content ul {
    text-align: center;
    padding: 0;
}

.class-list {
    padding: 0;
    list-style-type: none;
}

.class-list li {
    text-align: center;
    padding: 7px;
    position: relative;
    color: white;
}

.class-list li::before {
    content: '';
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 100%;
    width: 0;
    height: 2px;
}

.class-list li:hover:before {
    width: 70px;
}

a {
    text-decoration: none;
    color: white;
}

.bottom-bar {
    background-color: #ffbb00;
    text-align: center;
    padding: 5px 0;
    margin-top: 50px;
}

.bottom-bar p {
    color: rgb(0, 0, 0);
    margin: 0;
    font-size: 20px;
    padding: 3px;
}

.footer-content img {
    max-width: 100%; 
    height: auto; 
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.Visit-Section{
    display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30px;
        background-color: #fff;
}

.visit-content{
    width: 40%; /* Adjust the width as needed */
        padding: 20px;
        margin: 5%;
}

.visit-content h1{
   
        font-size: 40px;
        margin-bottom: 10px;
        color: #2374ab;
    
}

.visit-img{
    width: 60%;
}

.visit-img img{
    width: 85%;
    /* box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    border-radius: 24px; */
}

.visit-content .button {
    background-color: #2374ab;
    color: #fff;
    border: none;
    padding: 10px 30px;
    font-size: 17px;
    cursor: pointer;
    border-radius: 10px;
}

.button:hover {
    background-color: #231651;
}



@media screen and (max-width: 800px) {
    .card {
        max-width: 45%;
    }
}

@media screen and (max-width: 500px) {
    .card {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .container1 {
        flex-direction: column; /* Stack footer items vertically */
        align-items: center;
    }
    
    .footer-content {
        flex: 1 1 100%; /* Make each footer content block take up full width on smaller screens */
        margin: 10px 0; /* Add some spacing between the stacked items */
        text-align: center; /* Center-align text for better readability on smaller screens */
    }
    
    .footer-content h3 {
        font-size: 24px; /* Adjust font size for smaller screens */
    }
    
    .footer-content p {
        font-size: 16px; /* Slightly reduce paragraph font size */
    }
    
    .bottom-bar p {
        font-size: 18px; /* Adjust font size in the bottom bar */
    }

    .Visit-Section{
        display: flex;
        flex-direction: column;
    }

    .visit-content{
        width: 90%; /* Adjust the width as needed */
            padding: 5px;
            margin: 0;
    }
    
    .visit-content h1{
       
            font-size: 28px;
            margin-bottom: 10px;
            color: #2374ab;
        
    }

    .visit-img{
        width: 100%;
    }
}

@media (max-width: 480px) {
    .container1 {
        display: grid; /* Switch to a grid layout for the whole footer content */
        grid-template-columns: 1fr 1fr; /* Two equal columns */
        grid-gap: 10px; /* Add some spacing between columns */
    }

    .footer-content {
        flex: none; /* Disable flex behavior in the grid */
        text-align: center; /* Keep the text centered */
        margin: 10px 0;
    }

    /* Ensure the image is responsive and stays in its column */
    .footer-content img {
        grid-column: span 2; /* Make sure the image spans two columns */
        max-width: 100%; /* Make image responsive */
        height: auto; /* Maintain aspect ratio */
    }

    .class-list {
        display: flex;
        flex-direction: column; /* Stack the class-list items vertically */
        align-items: center;
        padding: 0;
    }

    .class-list li {
        width: 100%; /* Ensure list items take up full width */
        margin: 5px 0;
    }

    .footer-content h3 {
        font-size: 20px; /* Reduce heading font size */
    }

    .footer-content p {
        font-size: 14px; /* Reduce paragraph font size */
    }

    .bottom-bar p {
        font-size: 16px; /* Reduce font size in the bottom bar */
    }

    .Visit-Section{
        display: flex;
        flex-direction: column;
    }


}
@media (max-width: 420px) {
    .container1 {
        display: grid;
        grid-template-columns: 1fr; /* Change to a single column layout */
        grid-gap: 8px; /* Slightly reduce gap between items */
    }

    .footer-content {
        text-align: center;
        margin: 8px 0; /* Adjust margins for smaller screens */
    }

    .footer-content img {
        grid-column: span 1; /* Image spans one column */
        max-width: 100%;
        height: auto;
    }

    .class-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
    }

    .class-list li {
        width: 100%;
        margin: 4px 0; /* Adjust spacing between list items */
    }

    .footer-content h3 {
        font-size: 18px; /* Slightly smaller font for headings */
    }

    .footer-content p {
        font-size: 12px; /* Smaller font size for paragraphs */
    }

    .bottom-bar p {
        font-size: 14px; /* Smaller font size in the bottom bar */
    }

    .Visit-Section {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 356px) {
    .container1 {
        display: grid;
        grid-template-columns: 1fr; /* Change to a single column layout */
        grid-gap: 8px; /* Slightly reduce gap between items */
    }

    .footer-content {
        text-align: center;
        margin: 8px 0; /* Adjust margins for smaller screens */
    }

    .footer-content img {
        grid-column: span 1; /* Image spans one column */
        max-width: 100%;
        height: auto;
    }

    .class-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
    }

    .class-list li {
        width: 100%;
        margin: 4px 0; /* Adjust spacing between list items */
    }

    .footer-content h3 {
        font-size: 18px; /* Slightly smaller font for headings */
    }

    .footer-content p {
        font-size: 12px; /* Smaller font size for paragraphs */
    }

    .bottom-bar p {
        font-size: 14px; /* Smaller font size in the bottom bar */
    }

    .Visit-Section {
        display: flex;
        flex-direction: column;
    }
}