/* Reset some default styles */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: Arial, sans-serif;

}



body {

    line-height: 1.6;

    color: #333;

}



/* Container */

.container {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

}



/* Header */

header {

    background-color: #00695c;

    color: #fff;

    padding: 20px 0;

}



header .logo {

    display: inline-block;

    font-size: 28px;

    margin-left: 10px;

}



nav {

    float: right;

}



nav ul {

    list-style: none;

}



nav ul li {

    display: inline-block;

    margin-left: 20px;

}



nav ul li a {

    color: #fff;

    text-decoration: none;

    font-weight: bold;

}



nav ul li a:hover {

    text-decoration: underline;

}



/* Hero Section */

.hero {

    background: url('../images/bali-hero.jpg') no-repeat center center/cover;

    height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #fff;

}



.hero-text h2 {

    font-size: 48px;

    margin-bottom: 20px;

}



.hero-text p {

    font-size: 20px;

    margin-bottom: 20px;

}



.hero-text .btn {

    background-color: #ff9800;

    color: #fff;

    padding: 12px 25px;

    text-decoration: none;

    border-radius: 5px;

    font-weight: bold;

}



.hero-text .btn:hover {

    background-color: #e68900;

}



/* Features Section */

.features {

    display: flex;

    justify-content: space-between;

    margin: 50px 0;

    text-align: center;

}



.feature {

    width: 30%;

    margin-left: 5%;

}



.feature img {

    width: 100%;

    border-radius: 10px;

    margin-bottom: 15px;





}



/* Footer */

footer {

    background-color: #004d40;

    color: #fff;

    padding: 20px 0;

    text-align: center;

}



footer a {

    color: #ffcc80;

    text-decoration: none;

}



footer a:hover {

    text-decoration: underline;

}





/* Page Header */

.page-header {

    background-color: #e0f2f1;

    padding: 40px 0;

    text-align: center;

}



.page-header h2 {

    font-size: 36px;

    margin-bottom: 10px;

}



.page-header p {

    font-size: 18px;

    color: #555;

}



/* Attractions Section */

.attractions {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    margin: 50px 0;

}



.attraction {

    width: 48%;

    margin-bottom: 30px;

    text-align: center;



}



.attraction img {

    width: 100%;

    border-radius: 10px;

    margin-bottom: 15px;

    margin-left: 10%;

}



.attraction h3 {

    font-size: 24px;

    margin-bottom: 10px;

}



.attraction p {

    font-size: 16px;

    color: #555;

}





/* Culture & Cuisine Sections */

.culture,
.cuisine {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    margin: 50px 0;

}



.culture-item,
.cuisine-item {

    width: 40%;

    margin-bottom: 30px;

    text-align: center;

    margin-left: 10%;

}



.culture-item img,
.cuisine-item img {

    width: 100%;

    border-radius: 10px;

    margin-bottom: 15px;

}



.culture-item h3,
.cuisine-item h3 {

    font-size: 24px;

    margin-bottom: 10px;

}



.culture-item p,
.cuisine-item p {

    font-size: 16px;

    color: #555;

}



/* Travel Tips Section */

.travel-tips {

    display: flex;

    flex-direction: column;

    gap: 30px;

    margin: 50px 0;

}



.travel-tips .tip {

    background-color: #f0f4f3;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);

    margin-left: 10%;

}



.travel-tips .tip h3 {

    font-size: 22px;

    margin-bottom: 10px;

}



.travel-tips .tip p {

    font-size: 16px;

    color: #555;

}





/* Accommodation Section */

.accommodation {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    margin: 50px 0;

}



.accommodation-item {

    width: 40%;

    margin-bottom: 30px;

    text-align: center;

    background-color: #f0f4f3;

    padding: 15px;

    border-radius: 10px;

    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);

    margin-left: 10%;

}



.accommodation-item img {

    width: 100%;

    border-radius: 10px;

    margin-bottom: 15px;

}



.accommodation-item h3 {

    font-size: 24px;

    margin-bottom: 10px;

}



.accommodation-item p {

    font-size: 16px;

    color: #555;

}



.accommodation-item a {

    color: #ff9800;

    text-decoration: none;

    font-weight: bold;

}



.accommodation-item a:hover {

    text-decoration: underline;

}





/* Contact Form Section */

.contact {

    max-width: 700px;

    margin: 50px auto;

    background-color: #f0f4f3;

    padding: 30px;

    border-radius: 10px;

    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);

}



.contact .form-group {

    margin-bottom: 20px;

    display: flex;

    flex-direction: column;

}



.contact label {

    font-weight: bold;

    margin-bottom: 5px;

}



.contact label span {

    color: red;

}



.contact input,

.contact textarea {

    padding: 10px;

    border: 1px solid #ccc;

    border-radius: 5px;

    font-size: 16px;

}



.contact input:focus,

.contact textarea:focus {

    border-color: #ff9800;

    outline: none;

}



.btn-submit {

    background-color: #ff9800;

    color: #fff;

    padding: 12px 25px;

    border: none;

    border-radius: 5px;

    font-size: 16px;

    cursor: pointer;

    font-weight: bold;

}



.btn-submit:hover {

    background-color: #e68900;

}