*{
    margin: 0;
    padding: 0;
    font-family: "Exo 2", sans-serif;
    color: rgb(52, 22, 22)
}

.header{
    font-size: larger;
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.481),rgba(255, 255, 255, 0.481)), url(images/banner.JPG);
    background-position: center;
    background-size: cover;
    position: relative;
    
}


/*BUTTONS ON TOP OF HOME PAGE*/
nav{
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
    padding-top: 7px;
}

/*LOGO IMAGE*/
nav img{
    width: 150px;
}

.nav-links{
    flex: 1;
    text-align: right;

}

.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-links ul li a{
    color: rgb(52, 22, 22);
    text-decoration: none;
    font-size: 20px; 
    font-weight: bold;
}

/*LINE UNDER BUTTIONS ON TOP OF HOME PAGE*/
.nav-links ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    background: rgb(52, 22, 22);
    display: block;
    margin: auto;
    transition: 0.5s;
}

.nav-links ul li:hover::after{
    content: '';
    width: 100%;
}

.text-info h1{
    font-size: 20px;
    padding-bottom: 20px;
}

/*TEXT BOXES HOME PAGE*/
.text-box{
    width: 90%;
    color: rgb(52, 22, 22);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    padding-bottom: 1px;
}

.text-box h1{
    font-size: 100px;
    padding-top: 70px;
    padding-bottom: 1px;
}

.text-box p{
    margin: 10px 0 40px;
    font-size: 30px;
    /*CHANGE COLOR IF NECESSARY*/
    color: rgb(52, 22, 22);

}


.hero-btn{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}

.hero-btn:hover{
    border: 1px solid rgba(5, 5, 1, 0.618);
    background: rgba(230, 105, 105, 0.618);
    transition: 1s;
}


/*bigger screen do not display icons*/
nav .fa{
    display: none;
}

/*icons for phones - NAVIGATION BAR*/
@media(max-width:700px){
    .text-box h1{
        font-size: 20px;
    }
    .nav-links ul li{
        display: block;
    }
    .nav-links{
        position: absolute;
        background: #fff;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
    }
    nav .fa{
        display: block;
        color: #0c0101;
        margin: 10px;
        cursor: pointer;
    }
    .nav-links ul{
        padding: 30px;
    }
}














/*ABOUT*/

.loc{
    width: 88%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}

h1{
    font-size: 18px;
    font-weight: 600;
}

p{
    color: rgb(88, 36, 36);
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
}

/*ROW OF BUTTONS*/

/*EACH BUTTON DEFINITIONS*/
.course-col{
    flex-basis: 31%;
    background: rgba(237, 195, 142, 0.7);
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
    text-align: center;
}

h3{
    text-align: center;
    font-weight: 800;
    margin: 10px 0px;
    text-align: center;
}

/*EFFECT OF CLICKING IN THE BOX - SHADOW*/
.course-col:hover{
    box-shadow: 0 0 20px 0px rgba(9, 5, 5, 0.618);
    
}

/*PUT COLUMNS IN THE PHONE*/
@media(max-width: 700px){
    .row{
        flex-direction: column;
    }
}
















/* General overview section styling */
.overview {
    width: 80%;
    margin: auto;
    margin-top: 10px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 0 px; /* SECTION PADDING!!!!!!! */
    font-size: 18px;
}

h2 {
    margin-bottom: 5px;
    padding-top: 40px;
    text-align: center;
    font-size: 30px;
}

h4{
    margin-bottom: 5px;
    padding-top: 0px;
    margin-top: 40px;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    text-justify: auto ;
}

h5{
    margin-bottom: 0px;
    padding-top: 5px;
    margin-top: 5px;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    text-justify: auto ;
}

h6{
    margin-bottom: 10px;
    padding-top: 5px;
    margin-top: 5px;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    text-justify: auto ;
}

p{
    font-size: 18px;
}

.coisas {
    flex-direction: column;
    flex-basis: 43%;
    border-radius: 10px;
    margin-bottom: 1px;
    text-align: center;
    background: #fff;
    padding: 10px;
    padding-top: 50px;
    display: flex;
    justify-content: center;
}

.row_pequeno {
    margin-top: 50px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;  /* Allows wrapping of columns to new rows */
    justify-content: flex-end;  /* Evenly space out the columns */
    gap: 2px; /* Space rows */
}

.botao {
    border: 1px solid rgb(52, 22, 22);
    background: transparent;
    color: rgb(52, 22, 22);
    display: flex;               /* Use flexbox to center content */
    align-items: center;         /* Center content vertically */
    justify-content: center;     /* Center content horizontally */
    padding: 10px 20px;          /* Adjust padding as needed */
    text-align: center;          /* Center text */
    box-sizing: border-box;      /* Ensure padding doesn't affect button size */
    height: auto;                /* Adjust height to be automatic */
    line-height: normal;         /* Make sure text line height is normal */
    border-radius: 10px;

}


.rest_cat_pequeno {
    display: flex;
    align-items: center;         /* Center icon and text vertically */
    justify-content: center;     /* Center icon and text horizontally */
    gap: 8px;                    /* Add space between the icon and the text */
    height: 100%;                /* Ensure it takes up the full height of the button */
}

.rest_cat_pequeno h3 {
    font-size: 20px;             /* Adjust heading size */
    font-weight: 600;
    margin: 0;                   /* Remove default margin */
    text-align: center;          /* Ensure text is centered */
    line-height: 1.2;            /* Set a normal line height */
}









/*DESCRIPTION WITH BUTTON DETAILS*/
.description {
    margin-top: 80px;
    margin-bottom: 0.5px;
    display: flex;
    justify-content: space-between;
    text-align: center;
}

/*EACH BUTTON DEFINITIONS*/
/* Each button definitions */
.detail {
    flex-basis: 32%;
    background: rgba(237, 195, 142, 0.7);
    border-radius: 10px;
    margin-bottom: 1px; /* Space between rows of buttons */
    padding: 10px 20px;
    box-sizing: border-box;
    transition: 0.5s;
    border: 2px solid black;

}

h3{
    text-align: center;
    font-weight: 600;

}

/*PUT COLUMNS IN THE PHONE*/
@media(max-width: 700px){
    .description{
        flex-direction: column;
    }
}




/* Styling for rows of images */
.row {
    margin-top: 50px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;  /* Allows wrapping of columns to new rows */
    justify-content: space-between;  /* Evenly space out the columns */
    gap: 10px; /* Space between columns */
}

/* Container for hidden images initially hidden */
.hidden-images {
    display: none; /* Hidden by default */
    flex-wrap: wrap;
    gap: 10px; /* Space between images */
    margin-top: 10px; /* Space above hidden images */
}

/* Show hidden images when 'show' class is added */
.hidden-images.show {
    display: flex;
    flex-wrap: wrap;  /* Allows wrapping of columns to new rows */
    justify-content: center;  /* Evenly space out the columns */
    gap: 10px; /* Space between columns */
}

/* Basic styling for images */
img {
    width: 100%; /* Adjust as needed */
    height: auto;
    cursor: pointer;
}

/* Modal container */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal content (the image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%; /* Adjust as needed for larger view */
    max-width: 90%; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
    max-height: 90vh; /* Ensure the image doesn't exceed viewport height */
    object-fit: contain; /* Ensures the image fits within its container */
}

/* Caption of the image */
#caption {
    margin: auto;
    display: block;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: auto; /* Adjust height as needed */
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Each image column styling */
.overview-col {
    width: 100%;
    flex-basis: 32%;  /* Ensures three columns per row */
    border-radius: 10px;
    margin-bottom: 30px;  /* Space between rows */
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
}

/* Image styling within each column */
.overview-col img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 700px) {
    .overview-col {
        flex-basis: 100%;  /* Stacks columns on smaller screens */
    }
}

/* Container for both plus and minus icons */
.plus-minus-container {
    text-align: center; /* Center icons horizontally */
    margin-top: 10px; /* Space above the icons */
}

/* Style for the buttons */
.plus-minus-container i {
    font-size: 48px; /* Adjust icon size as needed */
    cursor: pointer; /* Makes the icon look clickable */
    display: inline-block; /* Ensure icons are displayed inline */
    margin: 10px; /* Space around icons */
}






.location{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;

}

.location-col{
    flex-basis: 31%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: center;
}

.location-col img{
    width: 100%;
    border-radius: 10px;
    text-align: center;
}

.location-col p{
    padding: 0;
    text-align: center;
}

.location-col h3{
    margin-top: 16px;
    margin-bottom: 15px;
    text-align: center;
}




.reviews{
    width: 80%;
    margin: auto;
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: center;
    
}

.col-reviews{
    flex-direction: column;
    flex-basis: 43%;
    border-radius: 10px;
    margin-bottom: 1px;
    text-align: left;
    background: rgba(237, 195, 142, 0.7);
    padding: 10px;
    display: flex;
    text-align: left;
    justify-content: center; 
}

p{
    padding-bottom: 0;
    padding-left: 10px;
    margin-bottom: 0;
}

h3 {
    text-align: left;
    border-radius: 10px;
    padding-left: 10px;
    padding-top: 0;
    margin-top: 2;
    margin-bottom: 0;

}

.star {
    flex-direction: row;
    text-align: left;
    border-radius: 10px;
    padding-left: 10px;
    padding-bottom: 15px;
}






/*------------- SUB HEADER --------------*/

.subheader_loc {
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.481)), url(images/feira.png);
    background-size: cover; /* or contain, depending on how you want to scale it */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    width: 100%; /* Adjust according to your needs */
    height: 450px; /* Adjust according to your needs */
}

.subheader_info {
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(images/tile.jpg); /* Apply a semi-transparent overlay */
    background-size: cover; /* or contain, depending on how you want to scale it */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    width: 100%; /* Adjust according to your needs */
    height: 450px; /* Adjust according to your needs */
}

.subheader_cont {
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(images/fogaceiras.jpg);
    background-size: cover; /* or contain, depending on how you want to scale it */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    width: 100%; /* Adjust according to your needs */
    height: 450px; /* Adjust according to your needs */
}


h1 {
    padding-top: 150px;
    font-size: 80px;
    font-weight: bold;
    text-align: center;
}

.loc_sec {
    width: 80%;
    margin: auto;
    padding-top: 60px;
    padding-bottom: 50px;
}

.loc_sec_col {
    flex-basis: 48%;
    padding: 30px 2px;
    padding: 15px 0;
}

.loc_sec_col img {
    width: 100%;
}

.loc_sec_col h1 {
    padding-top: 15px;
    padding-bottom: 0px;
    font-size: 35px;
}

.last_par {
    padding-bottom: 10px;
}



.loc-btn {
    border: 1px solid rgb(52, 22, 22);
    background: transparent;
    color: rgb(52, 22, 22);
}

.loc-btn:hover {
    color: rgb(52, 22, 22);
}




/* General section styling */
.reviews {
    width: 80%;
    margin: auto;
    padding-top: 100px;
    padding-bottom: 100px;
}

/* Row to hold the columns */
.row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allows wrapping if necessary */
    gap: 10px; /* Space between columns */
}

/* Styling for each column */
.course-col {
    flex-basis: 45%; /* Adjust this value to control width */
    background: rgba(237, 195, 142, 0.7);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text */
    padding-top: 10px;
}

/* Course column styling without hover effect */
.reviews .course-col {
    background: rgba(237, 195, 142, 0.7);
    border-radius: 10px;
    padding: 20px;
    transition: none; /* Remove transition */
    box-shadow: none; /* Remove box shadow */
}

/* Disable hover effect */
.reviews .course-col:hover {
    box-shadow: none; /* Ensure no shadow on hover */
    background: rgba(237, 195, 142, 0.7); /* Ensure background doesn't change */
    transition: none; /* Disable any transition effect */
}

/* Styling for category title and icon */
.rest_cat {
    display: flex;
    align-items: center; /* Center icon and text vertically */
    margin-bottom: 15px;
    padding-top: 10px;
}

.rest_cat i {
    font-size: 24px; /* Adjust icon size */
    margin-right: 10px; /* Space between icon and text */
}

.rest_cat h3 {
    font-size: 24px; /* Adjust heading size */
    font-weight: bold;
    margin: 0; /* Remove default margin */
}

/* List styling */
ul {
    list-style-type: none; /* Remove default bullets */
    padding-left: 0; /* Remove default padding */
    margin: 0; /* Remove margin */
}

ul li {
    margin-bottom: 10px; /* Space between list items */
    display: block; /* Makes each item adjust to its content */
    position: relative; /* Allows positioning of the line under the text */
}

ul li::after {
    content: '';
    width: 0%;
    height: 2px;
    background: rgb(52, 22, 22);
    display: block;
    margin: auto;
    transition: 0.5s;
}

ul li:hover::after {
    content: '';
    width: 100%; /* Line expands to cover the full width of the text */
}

/* Keep the rest of your current styling intact */
.reviews .course-col {
    background: rgba(237, 195, 142, 0.7);
    border-radius: 10px;
    padding: 20px;
    transition: none; /* Remove transition */
    box-shadow: none; /* Remove box shadow */
}

.reviews .course-col:hover {
    box-shadow: none;
    background: rgba(237, 195, 142, 0.7);
    transition: none;
}

.rest_cat {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-top: 10px;
}

.rest_cat i {
    font-size: 24px;
    margin-right: 10px;
}

.rest_cat h3 {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    position: relative;
}

.contact-us {
    width: 100%;
    display: flex;
    justify-content: center; /* Center the content horizontally */
    text-align: center; /* Center the text */
}

.contact-col {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the content vertically in the column */
    margin-left: 0; /* Remove the left margin to center the column fully */
}

.contact-item {
    display: flex;
    align-items: center; /* Vertically center the icon and text */
    justify-content: center; /* Center everything horizontally */
    margin-bottom: 10px; /* Space between items */
    margin-top: 30px; /* Add space above each contact item */
}

.contact-item i {
    font-size: 32px; /* Increase the icon size */
    margin-right: 15px; /* Space between icon and text */
}

.contact-item h5 {
    margin: 0;
    font-size: 24px; /* Increase the text size */
    line-height: 0.8; /* Reduce the space between text lines */
}

.contact-item img {
    width: 50px; /* Adjust image width */
    height: 50px; /* Adjust image height */
    border-radius: 50%; /* Make the image round */
    margin-right: 15px; /* Space between image and text */
}