@charset "UTF-8";

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #000;
    color: #fff;
}

/* Apply Montserrat to h1 */
h1 {
    font-family: 'Montserrat', sans-serif;
    
    color:white;/* Adjust as needed */
}

/* Apply Oswald to h2, h3, and navigation */
h2, h3, nav a {
    font-family: 'Oswald', sans-serif;
	font-size: 35px;
}

header {
    display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
	z-index: 1000;
    padding: 20px;	
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 60px;
    height: auto;
}

.logo h1 {
    margin-left: 10px;
    font-size: 24px;
}

nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 25px;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.3s;
}

nav ul li a:hover {
    border-bottom: 2px solid rgba(255,0,4,1.00);
}

.hero img {
    width: 100%;
    height: auto;
}

.hero-text {
    position:relative;
    bottom: 250px;
    left: 55%;
    transform: translateX(-50%);
	
}

.hero-text h2 {
    font-size: 36px;
	
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 10px;
    background-color: #ff0000;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    border-radius: 5px;
	
}

.videos {
    display: flex;
    padding: 35px;
	background-color: black;
}

.video-thumbnail {
    position: relative;
    width: 50%;
}


.video-description {
    width: 50%;
    padding: 20px;
	text-align:justify;
}

.video-description h3 {
    font-size: 24px;
}

.video-description p {
    font-size: 15px;
    color: #ddd;
}

/*history*/

.history {
    text-align: center;
    margin-bottom: 20px;
	margin-top: 50px;
}

.history h1 {
     font-size: 50px;
     font-weight: bold;
	
}

.history .underline {
            width: 130px;
            height: 4px;
            background-color: #e74c3c;
            margin: 10px auto;
}


.milestones {
	background-color: #CE1104;
    padding: 20px;
    margin: 10px 0;
}

.milestones p {
     font-size: 15px;
	
}

.timeline {
        text-align: center; /* Center-aligns the image within the div */
    }

    .timeline img {
        max-width: 80%; /* Adjust the max-width to make the image smaller */
        height: auto; /* Maintains the aspect ratio of the image */
    }


.imgmilestones {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 100px;
	margin-top: 100px;
}

.imgmilestones {
    text-align: center;
}

.imgmilestones img {
    width: 397px;
    height: 285px;
    object-fit: cover;
}

.imgmilestones p {
    margin-top: 10px;
}

/*team&drivers */

.teamanddrivers h2 {
     font-size: 36px;
     font-weight: bold;
}

.team--drivers {
    text-align: justify; /* Justify text alignment */
    line-height: 1.6;    /* Adjust line spacing */
    margin-bottom: 20px; /* Add spacing below the paragraph */
}

.teamanddrivers .underline {
	width: 210px;
	height: 4px;
	background-color: #e74c3c;
    margin: 10px auto;
	margin-bottom: 100px;
	
}

.team-drivers {
    padding: 10px;
    background-color:black;
    text-align: center;
	margin-bottom: 150px;

}

.team-drivers h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.drivers {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}

.driver {
    text-align:inherit;
    margin: 20px;
	
}

.driver img {
    width: 400px;
    height: auto;
}

.stats {
    background-color: #CE1104;
    padding: 80px;
    margin-top: 0px;
	

}

.stats h3 {
    margin: 0;
    font-size: 1.5rem;
}

.stats p {
    margin: 10px 0 0 0;
}

/*races */



.header h2 {
     font-size: 36px;
     font-weight: bold;
}

.header .underline {
	width: 110px;
	height: 4px;
	background-color: #e74c3c;
    margin: 10px auto;
}

.races {
    padding: 10px;
    background-color: black;
    text-align: center;
	font-size: 50px;
	
}

.races h2 {
    font-size: 2rem;
    margin-bottom: 10px;

}

.races h3 {
    font-size: 1.5rem;
    margin-bottom: 0px;
}


/*calender */
 * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
	 
        }

        .header {
            text-align: center;
            margin-bottom: 20px;
        }

        .header h1 {
            font-size: 36px;
            font-weight: bold;
        }

        .header p {
            font-size: 18px;
            color: #E1E1E1;
        }

        .calendar-container {
            display: grid;
            grid-template-columns: repeat(3, 350px); /* Fixed width for each column */
            gap: 20px;
            justify-content: center;
            align-items: start;
			grid-template-rows: repeat(4, auto);
        }

        .calendar {
            background-color: #D1D1D1;
            padding: 20px;
            width: 100%; /* Fit to column width */
            height: auto; /* Adjust height to fit content */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
        }

        .calendar h2 {
            font-size: 20px;
            margin-bottom: 10px;
            text-align: center;
			color: black;
        }

        .calendar .days {
            display: grid;
            grid-template-columns: repeat(7, 40px);
            text-align: center;
            gap: 5px;
			color: black;
        }

        .days div {
            font-size: 15px;
            padding: 11px;
            transition: background-color 0.3s ease;
        }

        .days div:hover {
            background-color: #E53A1E;
            color: #fff;
            border-radius: 4px;
        }

        /* Responsive Design */
       @media (max-width: 600px) {
    .days {
        grid-template-columns: repeat(7, 30px); /* Adjust width for smaller screens */
    }
}

/* For screens smaller than 900px */
@media (max-width: 900px) {
    .calendar-container {
        grid-template-columns: repeat(3, 250px); /* 3 columns with 250px width */
    }
}

/* For screens smaller than 600px */
@media (max-width: 600px) {
    .calendar-container {
        grid-template-columns: repeat(2, 200px); /* 2 columns with 200px width */
    }
}

/* For screens smaller than 400px */
@media (max-width: 400px) {
    .calendar-container {
        grid-template-columns: 40px; /* Single column layout */
    }
 /* Responsive styles */
        @media (max-width: 1200px) {
            .calendar-container {
                grid-template-columns: repeat(2, 400px); /* 2 calendars per row */
            }
        }

        @media (max-width: 800px) {
.calendar-container {
		grid-template-columns: 400px; /* Single column layout */
            }
        }
    .calendar {
        width: 100%; /* Make calendar width 100% of the column width */
    }

    .calendar {
        width: 100%; /* Make calendar width 100% of the column width */
    }
}
.circuits {
    background-color: #000;
    padding: 50px 20px;
    text-align: center;
}

.circuit-gallery {
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
	display: grid;
    grid-template-columns: repeat(3, 400px); /* Fixed width for each column */
    align-items: start;
	
}

.circuit {
    text-align: center;
	margin-bottom: 50px;
}

.circuit img {
    width: 300px;
    height: auto;
	margin-top:50px;
}

.circuit p {
    margin-top: 10px;
    font-size: 16px;
}

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #000;
            color: #fff;
            padding: 20px;
        }

.gallery {
            text-align: center;
            margin-bottom: 30px;
}

.gallery h1 {
            font-size: 36px;
            font-weight: bold;
            margin-bottom: 20px;
}
.gallery-container1234, .gallery-container567 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Spacing between items */
}

.gallery-item {
    flex: 1 1 23%; /* Four items per row */
    box-sizing: border-box;
    max-width: 23%;
    height: 200px; /* Fixed height */
    overflow: hidden; /* Hide overflow */
    margin: 5px; /* Optional: add margin for additional spacing */
}

.gallery-item img {
    width: 100%;
    height: 100%; /* Stretch image to fill container height */
    object-fit: cover; /* Maintain aspect ratio */
    display: block;
}

.gallery-container567 .gallery-item {
    flex: 1 1 31%; /* Three items per row */
    max-width: 31%;
}

        /* Responsive Design */
        @media (max-width: 1200px) {
            .gallery-container img {
                width: calc(50% - 10px);
            }
        }

        @media (max-width: 768px) {
            .gallery-container img {
                width: calc(100% - 10px);
            }
        }

        /*fan zone */
.fan-zone {
    position: relative;
    text-align: center;
}

.image-container {
    position: relative;
    display: inline-block;
	margin-top: 100px;
}

.image-container img {
    width: 100%;
    height: auto;
}

.image-container h2 {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2em;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
	
}

.image-container h2::after {
    content: "";
    display: block;
    margin: 5px auto 0;
    width: 100%; /* Matches the width of the h2 */
    height: 4px;
    background-color:#e74c3c; /* Adjust color as needed */
    border-radius: 2px; /* Optional: rounded corners */
}
 .merchandise-section { 
	 padding: 100px; 
	 background-color: #000; 
	 text-align: center;
}

 .merchandise-section h2 { 
	 font-size: 2em; 
	 margin-bottom: 50px; 
} 

 .merchandise-items { 
	 display: flex; 
	 justify-content: center; 
	 gap: 100px; 
}

 .item { 
	 text-align: center;
} 

 .item img { 
	 width: 300px; 
	 height: auto; 
}

.item p { 
	 margin: 10px 0;
}

.price { 
	 font-size: 1.2em; 
	 font-weight: bold; 
}

.fan-stories-section {
 	text-align: center; 
	padding: 20px; 
	background-color: black;	
} 

.fan-stories-section h2 { 
 	font-size: 2em;
 	margin-bottom: 50px;
	
 }

 .fan-stories { 
	 display: flex; 
	 justify-content: center; 
	 gap: 20px; 
} 

 .fan-stories img {
	 width: 289px; 
	 height: 500px; 
	 object-fit: cover; 
	 margin-bottom: 100px;
	 margin-left: 20px;
	 margin-right: 20px;
} 

 footer { 
	 background-color: #c00; 
	 color: #fff; 
	 text-align: center; 
	 padding: 20px 0; 
	 box-sizing: border-box;
     position: relative; /* Ensure it contains the absolute positioning */
	 
}

 .footer-content h2 { 
	 font-size: 1.5em; 
	 margin-bottom: 10px; 
	 text-align:left;
	 margin-left: 60px;
} 

 .social-media { 
	 margin: 10px 0;
	 
} 

 .social-media a { 
	 margin: 0 10px; 
}

 .social-media img { 
	 width: 30px; 
	 height: 30px; 	 
	
}

.icons {
    display: flex; /* Ensure the icons are displayed in a row */
    justify-content: flex-start; /* Align items to the start (left) */
    gap: 5px; /* Optional: Add space between icons */
	margin-left: 60px;
}

.icons img {
    width: 30px; /* Adjust size as needed */
    height: auto; /* Maintain aspect ratio */
}

 .newsletter { 
	 margin: 30px 0;
} 

 .newsletter p { 
	 font-size: 1em; 
	 margin: 20px;
}

 .newsletter input { 
	 padding: 10px; 
	 border: none; 
	 border-radius: 5px;
	 margin-right: 10px; 
} 

 .newsletter button { 
	 padding: 10px 20px; 
	 border: none; 
	 background-color: #000; 
	 color: #fff; 
	 border-radius: 5px;
	 cursor: pointer; 
}

 .newsletter button:hover { 
	 background-color: #333; 
}

/* Copyright section */

.footer-content .copyright {
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-align: right;
}

.footer-content .copyright p {
    font-size: 0.8em; /* Adjust font size */
    margin: 0;
}


/* This is @media query. We use this selector type to create a responsive website*/

@media (max-width:992px)/* The max-width is to set the breakpoint for smaller devices */ {
	.main {
		display: block; /* in normal view, the display of .main is flex. In smaller devices, we overide the display to become block*/
	}
	.row {
		display: block; /* in normal view, the display of .row is flex. In smaller devices, we overide the display to become block*/
	}
	.navi {
		display: block; /* in normal view, the display of .row is flex. In smaller devices, we overide the display to become block*/
		padding: 0; /* padding is set to 0 because to remove the space on the right*/
		text-align: center;
	}
	
	.aside-left {
		width: 100%; /* in normal view, the width of .aside-left is set to 60%. In smaller devices, we change the widht to 100%*/
		padding: 1%;
		margin: 10px auto;
	}
	
	.aside-right {
		width: 100%; /* in normal view, the width of .aside-right is set to 60%. In smaller devices, we change the widht to 100%*/
		padding: 1%;
		margin: 10px auto;
		text-align: center;
	}

}
/* Responsive Design */
@media (max-width: 1200px) {
    .calendar-container {
        grid-template-columns: repeat(2, 400px); /* 2 calendars per row */
    }
}

@media (max-width: 992px) {
    .main {
        display: block; /* Overrides flex display to block for smaller screens */
    }
    .row, .navi {
        display:table-row; /* Overrides flex display to block for smaller screens */
    }
    .aside-left, .aside-right {
        width: 100%; /* Sets width to 100% for smaller screens */
        padding: 1%;
        margin: 10px auto;
        text-align: center;
    }
}

@media (max-width: 900px) {
    .calendar-container {
        grid-template-columns: repeat(2, 250px); /* 2 columns with 250px width */
    }
}

@media (max-width: 800px) {
    .calendar-container {
        grid-template-columns: 400px; /* Single column layout */
    }
    .gallery-item {
        flex: 1 1 48%; /* Adjusts gallery item width */
        max-width: 48%;
    }
}

@media (max-width: 600px) {
    .calendar-container {
        grid-template-columns: repeat(2, 200px); /* 2 columns with 200px width */
    }
    .days {
        grid-template-columns: repeat(7, 30px); /* Adjust width for smaller screens */
    }
    .gallery-item {
        flex: 1 1 98%; /* Adjusts gallery item width */
        max-width: 98%;
    }
}

@media (max-width: 400px) {
    .calendar-container {
       grid-template-columns: 400px; /* Single column layout */
    }
}
 /* Media queries for responsive header */

/* For screens smaller than 992px */
@media (max-width: 992px) {
    header {
        flex-direction: column;
        padding: 10px;
    }
    
    .logo {
        justify-content: center;
    }

    nav ul {
		display: flex;
        flex-direction:row;
        align-items: center;
        padding-top: 10px;
		margin: 0;
    }

    nav ul li {
        margin: 0 10px;
    }

    nav ul li a {
        font-size: 20px;
		padding: 10px 15px;
    }
}

/* For screens smaller than 768px */
@media (max-width: 768px) {
    .logo img {
        width: 50px;
    }

    .logo h1 {
        font-size: 20px;
    }

    nav ul li a {
        font-size: 18px;
    }
}

/* For screens smaller than 480px */
@media (max-width: 480px) {
    header {
        padding: 5px;
    }
    
    .logo img {
        width: 40px;
    }

    .logo h1 {
        font-size: 18px;
    }

    nav ul {
        padding-top: 5px;
    }

    nav ul li a {
        font-size: 16px;
    }
}
/* Media queries for responsive sections */

/* For screens smaller than 992px */
@media (max-width: 992px) {
    /* Videos section */
    .videos {
        flex-direction: column;
        padding: 20px;
    }

    .video-thumbnail, .video-description {
        width: 100%;
    }

    .video-description {
        padding: 10px;
    }

    /* Team and Drivers section */
    .team-drivers {
        padding: 10px;
    }

    .drivers {
        flex-direction: column;
    }

    .driver {
        margin: 10px;
    }

    /* Merchandise section */
    .merchandise-items {
        flex-direction: column;
        gap: 20px;
    }

    .item {
        width: 100%;
    }

    .item img {
        width: 80%;
    }

    /* Fan Stories section */
    .fan-stories {
        flex-direction: column;
        gap: 20px;
    }

    .fan-stories img {
        width: 100%;
        height: auto;
    }
}

/* For screens smaller than 768px */
@media (max-width: 768px) {
    /* Videos section */
    .videos {
        padding: 15px;
    }

    .video-thumbnail, .video-description {
        width: 100%;
    }

    .video-description h3 {
        font-size: 20px;
    }

    .video-description p {
        font-size: 14px;
    }

    /* Team and Drivers section */
    .teamanddrivers h2 {
        font-size: 28px;
    }

    .driver img {
        width: 250px;
    }

    /* Merchandise section */
    .merchandise-section h2 {
        font-size: 1.5em;
    }

    .item img {
        width: 80%;
    }

    /* Fan Stories section */
    .fan-stories img {
        width: 100%;
        height: auto;
    }
}

/* For screens smaller than 480px */
@media (max-width: 480px) {
    /* Videos section */
    .videos {
        padding: 10px;
    }

    .video-description h3 {
        font-size: 18px;
    }

    .video-description p {
        font-size: 12px;
    }

    /* Team and Drivers section */
    .teamanddrivers h2 {
        font-size: 24px;
    }

    .driver img {
        width: 200px;
    }

    /* Merchandise section */
    .merchandise-section {
        padding: 50px 10px;
    }

    .merchandise-section h2 {
        font-size: 1.2em;
    }

    .item img {
        width: 100%;
    }

    /* Fan Stories section */
    .fan-stories {
        padding: 20px;
    }

    .fan-stories img {
        width: 100%;
        height: auto;
    }
}
@media (max-width: 992px) {
    /* Circuits section */
    .circuit-gallery {
        grid-template-columns: repeat(2, 400px); /* 2 columns */
    }

    .circuit img {
        width: 100%;
    }

    /* Milestones section */
    .milestones {
        padding: 10px;
    }

    .milestones p {
        font-size: 14px;
    }
}

/* For screens smaller than 768px */
@media (max-width: 768px) {
    /* Circuits section */
    .circuit-gallery {
        grid-template-columns: 400px; /* 1 column */
    }

    .circuit img {
        width: 100%;
    }

    /* Milestones section */
    .milestones {
        padding: 15px;
    }

    .milestones p {
        font-size: 13px;
    }
}

/* For screens smaller than 480px */
@media (max-width: 480px) {
    /* Circuits section */
    .circuit-gallery {
        grid-template-columns: 400px; /* 1 column */
    }

    .circuit img {
        width: 100%;
        height: auto;
    }

    /* Milestones section */
    .milestones {
        padding: 20px;
    }

    .milestones p {
        font-size: 12px;
    }
}

@media (max-width: 992px) {
    .videos {
        flex-direction: column; /* Stack video thumbnail and description vertically */
    }

    .video-thumbnail,
    .video-description {
        width: 100%; /* Full width for each section */
    }

    .video-description {
        padding: 15px; /* Adjust padding */
    }

    .video-description h3 {
        font-size: 20px; /* Adjust font size */
    }

    .video-description p {
        font-size: 14px; /* Adjust font size */
    }
}

/* For screens smaller than 768px */
@media (max-width: 768px) {
    .videos {
        flex-direction: column; /* Stack video thumbnail and description vertically */
        padding: 20px; /* Adjust padding */
    }

    .video-thumbnail img {
        width: 100%; /* Full width for video thumbnail */
    }

    .video-description {
        padding: 10px; /* Adjust padding */
    }

    .video-description h3 {
        font-size: 18px; /* Adjust font size */
    }

    .video-description p {
        font-size: 13px; /* Adjust font size */
    }
}

/* For screens smaller than 480px */
@media (max-width: 480px) {
    .videos {
        padding: 10px; /* Adjust padding */
    }

    .video-thumbnail img {
        width: 100%; /* Full width for video thumbnail */
    }

    .video-description {
        padding: 10px; /* Adjust padding */
    }

    .video-description h3 {
        font-size: 16px; /* Adjust font size */
    }

    .video-description p {
        font-size: 12px; /* Adjust font size */
    }
}

@media (max-width: 992px) {
    .videos {
        flex-direction: column; /* Stack video thumbnail and description vertically */
        align-items: center; /* Center align items */
    }

    .video-thumbnail iframe {
        width: 100%; /* Full width for video */
        height: auto; /* Maintain aspect ratio */
    }

    .video-description {
        width: 100%; /* Full width for description */
        padding: 15px; /* Adjust padding */
    }
}


/* For screens smaller than 480px */
@media (max-width: 480px) {
    .videos {
        padding: 10px; /* Adjust padding */
    }

    .video-thumbnail iframe {
        width: 100%; /* Full width for video */
        height: auto; /* Maintain aspect ratio */
    }

    .video-description {
        padding: 10px; /* Adjust padding */
    }

    .video-description h3 {
        font-size: 16px; /* Adjust font size */
    }

    .video-description p {
        font-size: 12px; /* Adjust font size */
    }
}

@media (max-width: 992px) {
    .imgmilestones {
        flex-direction: column; /* Stack images vertically */
        align-items: center; /* Center align images */
    }

    .imgmilestones img {
        width: 100%; /* Full width for images */
        height: auto; /* Maintain aspect ratio */
    }
}

/* For screens smaller than 768px */
@media (max-width: 768px) {
    .imgmilestones img {
        width: 100%; /* Full width for images */
        height: auto; /* Maintain aspect ratio */
    }
}

/* For screens smaller than 480px */
@media (max-width: 480px) {
    .imgmilestones img {
        width: 100%; /* Full width for images */
        height: auto; /* Maintain aspect ratio */
    }
}

@media (max-width: 992px) {
    .milestones {
        padding: 20px; /* Adjust padding */
    }

    .milestones p {
        font-size: 14px; /* Adjust font size */
    }
}

/* For screens smaller than 768px */
@media (max-width: 768px) {
    .milestones {
        padding: 15px; /* Adjust padding */
    }

    .milestones p {
        font-size: 13px; /* Adjust font size */
    }
}

/* For screens smaller than 480px */
@media (max-width: 480px) {
    .milestones {
        padding: 10px; /* Adjust padding */
    }

    .milestones p {
        font-size: 12px; /* Adjust font size */
    }
}

@media (max-width: 992px) {
    header {
        flex-direction: column; /* Stack logo and heading vertically */
        align-items: center; /* Center align items */
        padding: 15px; /* Adjust padding */
    }

    .logo {
        margin-bottom: 15px; /* Space between logo and heading */
    }

    .logo img {
        width: 50px; /* Adjust logo size */
        height: auto; /* Maintain aspect ratio */
    }

    .logo h1 {
        font-size: 20px; /* Adjust heading size */
        margin-left: 0; /* Remove margin for smaller screens */
    }

    nav ul {
        margin-top: 15px; /* Space between heading and navigation */
    }

    nav ul li a {
        font-size: 20px; /* Adjust font size for navigation links */
    }
}

/* For screens smaller than 768px */
@media (max-width: 768px) {
    .logo img {
        width: 40px; /* Adjust logo size */
    }

    .logo h1 {
        font-size: 18px; /* Adjust heading size */
    }

    nav ul li a {
        font-size: 18px; /* Adjust font size for navigation links */
    }
}

/* For screens smaller than 480px */
@media (max-width: 480px) {
    .logo img {
        width: 30px; /* Adjust logo size */
    }

    .logo h1 {
        font-size: 16px; /* Adjust heading size */
    }

    nav ul {
        flex-direction:row; /* Stack navigation links vertically */
        align-items: center; /* Center align navigation links */
        margin-top: 15px; /* Space above navigation links */
    }

    nav ul li {
        margin-left: 0; /* Remove margin for smaller screens */
        margin-bottom: 10px; /* Space between navigation links */
    }

    nav ul li a {
        font-size: 16px; /* Adjust font size for navigation links */
    }
}

@media (max-width: 1200px) {
    .hero-text h2 {
        font-size: 30px;
    }

    .logo img {
        width: 50px;
    }

    .logo h1 {
        font-size: 20px;
    }
}


@media (max-width: 1200px) {
    .hero img {
        /* Ensure the image scales well on larger tablets and smaller desktops */
        height: auto;
    }

    .hero-text h2 {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .hero img {
        /* Ensure the image scales well on tablets */
        height: auto;
    }

    .hero-text {
        
        padding: 5px;
    }

    .hero-text h2 {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .hero img {
        /* Ensure the image scales well on mobile screens */
        height: auto;
    }

    .hero-text {
        margin-top: 30px;
        padding: 5px;
    }

    .hero-text h2 {
        font-size: 18px;
    }
}

 html, body { 
Overflow-x : clip;
Max-width: 100%;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 150px;
}