*{
     margin: 0;
     padding: 0;
     font-family: 'Poppins', sans-serif;
     box-sizing: border-box;
}
 .header{
     min-height: 58vh;
     width: 100%;
     background-image:url(altheaderimage.png);
     background-position: center;
     background-size: cover;
     position: relative;
}
 nav{
     display: flex;
     padding: 2% 6%;
     justify-content: space-between;
     align-items: center;
}
 nav img{
     width: 180px;
}
 .navigation{
     flex: 1;
     text-align: right;
}
 .navigation ul {
     background-color: rgba(255, 255, 255, 0.75);
    /* Adjust the color and opacity as needed */
     display: inline-block;
    /* Make the ul inline-block so it only takes up as much width as needed */
     padding: 8px 20px;
    /* Add some padding around the items */
}
 .navigation ul li {
     list-style: none;
     display: inline-block;
     padding: 8px 20px;
     position: relative;
     background-color: transparent;
}
 .navigation ul li a{
     color: #006666;
     text-decoration: none;
     font-size: 18px;
     font-weight: bold;
}
 .navigation ul li::after{
     content: '';
     width: 0%;
     height: 2px;
     background: #006666;
     display: block;
     margin: auto;
     transition: 0.5s;
}
 .navigation ul li:hover::after{
     width: 100%;
}
 .navigation ul li:hover {
     background-color: transparent;
    /* Keep it transparent or set a different color for hover */
}
 body {
     background-image: linear-gradient(to bottom, #ffffff, #006666);
}
 .text-box{
     width: 90%;
     color: #fff;
     position: absolute;
     top: 60%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     background-color: rgba(0, 0, 0, 0.6);
     align-items: center;
    /* Vertical centering */
     justify-content: center;
    /* Horizontal centering */
}
 .text-box h1{
     font-size: 48px;
}
 .text-box p{
     margin: 10px 0 40px;
     font-size: 14px;
     color: #fff;
}
 .button1{
     display: inline-block;
     text-decoration: none;
     color: #fff;
     border: 1px solid #fff;
     padding: 12px 34px;
     font-size: 13px;
     background: transparent;
     position: relative;
     cursor: pointer;
}
 .button1:hover{
     border: 1px solid #f6ba15;
     background: #f6ba15;
     transition: 1s;
}
 nav .fa{
     display: none;
}
 @media(max-width: 700px){
     .text-box h1{
         font-size: 20px;
    }
     .navigation ul li{
         display: block;
    }
     .navigation{
         position: absolute;
         background: #f6ba15;
         height: 100vh;
         width: 200px;
         top: 0;
         right: -200px;
         text-align: left;
         z-index: 2;
         transition: 1s;
    }
     nav .fa{
         display: block;
         color: #000;
         margin: 10px;
         font-size: 22px;
         cursor: pointer;
    }
     .navigation ul{
         padding: 30px;
    }
}
/*---------boat races-------*/
 .races{
     width: 80%;
     margin: auto;
     text-align: center;
     padding-top: 25px;
}
 .races table {
     margin: 0 auto;
}
 h1{
     font-size: 40px;
     font-weight: 600;
}
 p{
     color: #000;
     font-size: 18px;
     font-weight: 300;
     line-height: 22px;
     padding: 10px;
}
 .title-box {
     background: #fff;
    /* White background */
     border-radius: 10px;
     padding: 20px;
     box-sizing: border-box;
     margin-bottom: 5%;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    /* Add a subtle box shadow */
}
 .title-box h1 {
     font-family: 'Roboto', sans-serif;
    /* Use Roboto font */
     font-size: 36px;
     font-weight: 600;
     margin-bottom: 20px;
     color: #333;
}
 .title-box p {
     font-family: 'Roboto', sans-serif;
    /* Use Roboto font */
     font-size: 16px;
     color: #555;
     line-height: 1.5;
}
 .row{
     margin-top: 5%;
     display: flex;
     justify-content: space-between;
}
 .boat-info{
     flex: 1;
     background: #FCECB0;
     border-radius: 10px;
     margin-bottom: 5%;
     padding: 20px 20px 20px 20px;
     box-sizing: border-box;
}
 .boat-info p {
     font-family: 'Roboto', sans-serif;
     font-size: 16px;
     color: #333;
     margin: 10px 0;
}
 .boat-info p b {
     font-family: 'Roboto', sans-serif;
     font-weight: bold;
}
 .boat-info:first-child {
     flex-basis: 50%;
     margin-right: 20px;
}
 .boat-info:last-child {
     flex-basis: 45%;
}
 .boat-info ul {
     list-style-type: none;
}
 .boat-info img {
     max-width: 100%;
    /* Image won't exceed the width of the container */
     height: auto;
    /* Maintain aspect ratio */
    /* Optional: max-height: 100%;
     If you also want to restrict height */
}
 h3{
     text-align: center;
     font-weight: 600;
     margin: 10px 0;
     font-size: 24px;
}
 .boat-info:hover{
     box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
}
 @media(max-width: 700px){
     .row{
         flex-direction: column;
    }
}
/*---------photo slideshow---------------------*/
 .container{
     max-width: 1200px;
     width: 95%;
     margin: auto;
}
 .slider.wrapper{
     position: relative;
     margin: 0 auto;
}
 .slider-wrapper .slide-button{
     position: absolute;
     top: 50%;
     height: 50px;
     width: 50px;
     color: #fff;
     border: none;
     outline: none;
     background: #000;
     font-size: 2.2rem;
     cursor: pointer;
     border-radius: 50%;
     transform: translateY(2650%);
     display: block;
}
 .slider-wrapper .slide-button:hover{
     background: #444;
}
 .slider-wrapper .image-list{
     display: grid;
     gap: 18px;
     font-size: 0;
     margin-bottom: 30px;
     overflow-x: auto;
     scrollbar-width: none;
     grid-template-columns: repeat(26, 1fr);
}
 .slider-wrapper .image-list::-webkit-scrollbar {
     display: none;
}
 .slider-wrapper .image-list .image-item{
     width: 325px;
     height: 400px;
     object-fit: cover;
}
 .container .slider-scrollbar{
     height: 24px;
     width: 100%;
     display: flex;
     align-items: center;
}
 .slider-scrollbar .scrollbar-track{
     height: 2px;
     width: 100%;
     background: #ccc;
     position: relative;
     border-radius: 4px;
}
 .slider-scrollbar:hover .scrollbar-track{
     height: 4px;
}
 .slider-scrollbar .scrollbar-thumb{
     position: absolute;
     height: 100%;
     width: 50%;
     background: #000;
     border-radius: inherit;
     cursor: grab;
}
 .slider-scrollbar:hover .scrollbar-thumb:active{
     cursor: grabbing;
     height: 8px;
     top: -2px;
}
 .slider-scrollbar .scrollbar-thumb::after{
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: -10px;
     bottom: -10px;
}
 @media(max-width: 767px){
     .slider-wrapper .slide-button{
         display: none!important;
    }
     .slider-wrapper .image-list{
         gap: 10px;
         margin-bottom: 15px;
    }
     .slider-wrapper .image-list .image-item{
         width: 280px;
         height: 380px;
    }
     .slider-scrollbar .scrollbar-thumb {
         width: 20%;
    }
}
/*--------------------STYLE FOR THE PAYMENT PROCESSING--------------------*/
/* Styles for date input and user type select */
 input[type="date"], select {
     padding: 10px;
     border-radius: 5px;
     border: 1px solid #ccc;
     margin-bottom: 15px;
     width: 100%;
     box-sizing: border-box;
}
 .payment-options {
     display: flex;
     justify-content: center;
    /* Horizontally center the content */
     align-items: center;
    /* Vertically center the content */
     gap: 20px;
    /* Add space between the boxes */
}
 .box {
     flex: 1;
     background-color: #fff;
     border-radius: 8px;
     padding: 15px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
     max-width: 250px;
     filter: grayscale(100%);
     cursor: not-allowed;
}
 .box:hover {
     transform: translateY(-5px);
     filter: grayscale(100%);
}
 .box h2 {
     margin-top: 0;
     font-size: 18px;
}
 .box .price {
     margin: 0;
     font-size: 14px;
     color: #555;
}
 .select-option {
     padding: 8px 16px;
     font-size: 14px;
     background-color: #4CAF50;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     display: block;
     margin-top: 12px;
     width: 100%;
}
 .select-option:disabled {
     background-color: #aaa;
     cursor: not-allowed;
}
/* Styles for checkout section */
 .checkout {
     margin-top: 15px;
     text-align: center;
}
 .total-price-box {
     background-color: #fff;
     border-radius: 8px;
     padding: 15px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
     width: 100%;
     max-width: 250px;
    /* Adjust the max-width as needed */
     margin: 0 auto;
    /* Center the box */
}
 .total-price-box p {
     font-weight: bold;
     margin: 0;
     font-size: 16px;
     color: #555;
}
 .total-price-box span {
     font-weight: bold;
     color: #000000;
     font-size: 18px;
}
/* Form Row Styling */
 #contactForm {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
    /* Two columns layout */
     gap: 20px;
    /* Space between grid items */
     max-width: 800px;
    /* Adjust as needed */
     margin: auto;
    /* Center the form */
}
/* Style for individual form rows */
 .form-row {
     display: flex;
     flex-direction: column;
    /* Stack label and input vertically */
     gap: 5px;
    /* Space between label and input */
}
/* Highlight invalid input */
 .invalid-input {
     border: 2px solid red;
}
 .form-row {
     margin-bottom: 10px;
}
/* Input and select styling */
 input[type="text"], input[type="email"], select, textarea {
     padding: 10px;
     border-radius: 5px;
     border: 1px solid #ccc;
     width: 100%;
    /* Full width of the column */
}
/* Label styling */
 label {
     font-weight: bold;
     color: #333;
}
/* Style for the submit button */
 input[type="submit"] {
     grid-column: span 2;
    /* Span the button across both columns */
     padding: 10px 0;
     font-size: 16px;
}
 input[type='submit']:hover {
     background-color: #75c7c7;
    /* Darker shade for hover */
}
/* Responsive adjustments */
 @media (max-width: 600px) {
     #assignment3Form {
         grid-template-columns: 1fr;
        /* Single column on smaller screens */
    }
     input[type="submit"] {
         grid-column: span 1;
        /* Adjust button to single column */
    }
}
/*--------------------footer(contactform)--------------------*/
 * {
     padding: 0px;
     margin: 0px;
     box-sizing: border-box;
}
 .footer {
     width: 100%;
     height: auto;
     padding: 40px 0;
}
 .footer-inner {
     width: 100%;
     height: auto;
     background: #fff;
     padding: 24px;
}
 .footer-inner img{
     width: 100%;
     height:auto;
     padding: 0px 0px 0px 0px 
}
 .map iframe {
     width: 100%;
     height: 340px;
     border: none;
}
 .contact-text {
     width: 100%;
     height: auto;
}
 .contact-text h1 {
     font-family: 'Roboto', sans-serif;
     font-size: 36px;
     font-weight: 600;
     color: #006666;
     margin: 0px;
     padding-bottom: 20px;
}
 .contact-text h2 {
     font-family: 'Roboto', sans-serif;
     font-size: 20px;
     font-weight: 500;
     color: #444;
     margin: 0px;
     padding-top: 25px;
}
 .contact-text h2 i {
     color: #FCECB0;
}
 .contact-text p {
     font-family: 'Roboto', sans-serif;
     font-size: 14px;
     color: #000;
     margin: 0px;
     padding-top: 5px;
     padding-left: 24px;
     font-weight: 100;
}
 .contact-text a {
     text-decoration: none;
     color: inherit;
}
 .footer-main {
     width: 100%;
     height: auto;
     background: #FFE16B;
     padding: 30px 0;
}
 .footer-soical {
     width: 100%;
     height: auto;
}
 .footer-social h3 {
     font-family: 'Roboto', sans-serif;
     font-size: 36px;
     font-weight: 500;
     color: #000;
     margin: 0px;
     text-align: left;
}
 .footer-social h3.small-text {
     font-family: 'Roboto', sans-serif;
     font-size: 14px;
     font-weight: 300;
     color: #000;
}
 .social-inner {
     width: 100%;
     height: auto;
     margin: auto;
     margin-top: 20px;
}
 .social-inner ul {
     margin: 0px;
     padding: 0px;
}
 .social-inner ul li {
     float: left;
     margin: auto;
     list-style: none;
}
 .social-inner ul li a {
     display: inline-block;
     vertical-align: middle;
     margin-top: 0;
     width: 51px;
     height: 43px;
     font-size: 14px;
     color: #fff;
     padding: 10px 20px;
     background: #000;
     text-decoration: none;
}
 .form {
     width: 100%;
     height: auto;
     margin: auto;
}
 .form-style1 {
     width: 300px;
     height: 44px;
     padding-left: 10px;
     border: 1px solid #99999;
}
 .form-submit1 {
     width: 51px;
     height: 43px;
     background: url(submit.jpg);
     border: none;
}
 .footer-bottom {
     width: 100%;
     height: auto;
     margin: auto;
     background: #272727;
}
 .footer-bottom p {
     font-family: 'Roboto', sans-serif;
     font-size: 14px;
     color: #fff;
     font-weight: 100;
     margin: 0px;
     padding: 8.5px 0;
     text-decoration: none;
}
 .footer-bottom p span {
     font-size: 14px;
}
 .footer-bottom p a {
     color: #fff;
     text-decoration: none;
}
 .phone, .phone::after {
     color: black;
    /* Sets the text color to black */
     font-weight: bold;
    /* Makes the text bold */
     content: '7434';
}
 .hidden {
     display: none;
}
 @media only screen and (min-width:360px) and (max-width:479px) {
     .map iframe {
         height: 150px;
    }
     .contact-text {
         padding: 15px;
    }
     .contact-text h1 {
         font-size: 24px;
         padding-bottom: 10px;
    }
     .contact-text h2 {
         font-size: 18px;
         padding-top: 10px;
    }
     .contact-text p {
         font-family: 'Roboto', sans-serif;
         font-size: 12px;
    }
     .footer-social h3 {
         font-size: 18px;
    }
     .footer-soical h3 span {
         font-size: 12px;
    }
     .social-inner {
         text-align: center;
    }
     .social-inner ul li {
         float: none;
         display: inline-block;
    }
     .social-inner ul li a {
         font-size: 10px;
         padding: 5px 10px;
    }
     .form-style1 {
         width: 260px;
         padding-left: 10px;
         margin-top: 0px;
         font-size: 12px;
    }
     .footer-bottom {
         height: 60px;
    }
     .footer-bottom p {
         font-size: 12px;
         text-align: center;
    }
     .pull-right {
         float: none;
    }
}