@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
	margin:0px;
	padding:0px;
	font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
	}
	
#MainHeaderWrap {
	background-color:#3271b7;
	margin:0px;
	color:#FFF
	}	
	
	
	.container {
  display: flex;
  justify-content: space-between; /* Adjusts spacing between divs */
}

.container a {text-decoration:none; color:white}
.container2 {
  display: flex;
  justify-content: space-between; /* Adjusts spacing between divs */
}

.box {
  flex: 1; /* Makes each div take equal space */
  margin: 10px; /* Adds some space around each div */
  padding: 20px; /* Adds some padding inside each div */
  background-color:transparetn; /* Background color for visibility */
  text-align: center; /* Centers text inside each div */
}
	
#SocialMediaheader img {width:100%; height:auto; max-width:20px; margin-left:25px;}
#logoHeader {position: absolute; max-width:100px; height:auto; margin-left:3%; margin-top:-80px; z-index:100}	
#logoHeader img {max-width:200px; height:auto; z-index:100}


.phone {max-width:25px; margin-top:-1px; margin-left:-30px; position:absolute}
.mail {max-width:28px; margin-top:-1px; margin-left:-40px; position:absolute}

.phone-btm {max-width:25px; margin-top:-1px; margin-left:10px; position:absolute}
.mail-btm {max-width:28px; margin-top:-1px; margin-left:10px; position:absolute}


.spacer1 {height:30px; width:100%; clear:both}
.spacer2 {height:100px; width:100%; clear:both}
.spacerTextUno {height:70px; width:100%; clear:both}
.spacerTextDos {height:50px; width:100%; clear:both}
.spacerTextTres {height:25px; width:100%; clear:both}
.spacerTextDosFooter  {height:50px; width:100%; clear:both}

<!--menu-->
nav {
    background-color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    position: relative;
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.menu-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    right: 15px;
    z-index: 1001;
	margin-top:-40px
}

.hamburger {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 4px 0;
    transition: 0.3s;
}

#menuToggle {
    display: none;
}

#menuToggle:checked + .menu-icon .hamburger:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

#menuToggle:checked + .menu-icon .hamburger:nth-child(2) {
    opacity: 0;
}

#menuToggle:checked + .menu-icon .hamburger:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}

.responsiveSocialTop {display:none}

@media (max-width: 1238px) {
    .nav-links {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        background-color: #333;
        transform: translateY(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
    }

    #menuToggle:checked + .menu-icon + .nav-links {
        transform: translateY(0);
    }

    .nav-links li {
        margin: 20px 0;
    }

    .menu-icon {
        display: flex;
    }
	.responsiveSocialTop {display: inline-table }
	
	.container {display:none}
	
	#logoHeader {position: absolute; max-width:100px; height:auto; margin-left:-25px; margin-top:-55px}	
#logoHeader img {max-width:120px; height:auto}

}


.book-now {
    background-color:#2babe2;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.book-now:hover {
    background-color: #0072bc;
}

.blue-btn-text {margin-top:50px; margin-bottom:30px; margin-left:auto; margin-right:5%; width:130px}
.blue-btn-text2 {margin-top:50px; margin-bottom:30px; margin-left:5%; margin-right:auto; width:130px}
.blue-btn-plan {margin-top:50px; margin-bottom:30px; margin-left:5%; margin-right:auto; width:180px}
.blue-btn-plan2 {margin-top:50px; margin-bottom:30px; margin-left:auto; margin-right:5%; width:180px}

.book-now-text {
    background-color:#0072bc;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
	text-decoration:none;
	color:white;
	
}


.book-now-text:hover {
    background-color:#2babe2 ;
}


.outlined-button {
  position: relative; /* Position the button relative to the container */
    float: right; /* Float the button to the right */
    margin-right: 100px; /* 25px margin to the right of the div */
	margin-top:-100px;
    background-color:#3271b7; /* White background */
    color: white; /* Text color */
    border: none; /* No border */
    padding: 10px 20px; /* Padding inside the button */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    z-index: 1; /* Ensure the button is above the outline */
}

.outlined-button::before {
    content: ''; /* No content */
    position: absolute; /* Position relative to the button */
    top: -6px; /* Move outline 6px above the button */
    left: -6px; /* Move outline 6px to the left of the button */
    right: -6px; /* Move outline 6px to the right of the button */
    bottom: -6px; /* Move outline 6px below the button */
    border: 2px solid white; /* White outline */
    z-index: -1; /* Ensure the outline is below the button */
}

.outlined-button:hover::before {
    border-color: #f0f0f0; /* Slightly darker outline on hover */
}


.outlined-button2 {
    position: relative; /* Position the button relative to its parent */
    background-color: transparent; /* White background */
    color: white; /* Text color */
    border: none; /* No border */
    padding: 10px 20px; /* Padding inside the button */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    z-index: 1; /* Ensure the button is above the outline */
}

.outlined-button2::before {
    content: ''; /* No content */
    position: absolute; /* Position relative to the button */
    top: -6px; /* Move outline 6px above the button */
    left: -6px; /* Move outline 6px to the left of the button */
    right: -6px; /* Move outline 6px to the right of the button */
    bottom: -6px; /* Move outline 6px below the button */
    border: 2px solid white; /* White outline */
    z-index: -1; /* Ensure the outline is below the button */
}

.outlined-button2:hover::before {
    border-color: #f0f0f0; /* Slightly darker outline on hover */
}



.outlined-button3 {
  position: relative; /* Position the button relative to the container */
    float: right; /* Float the button to the right */
    
	
    background-color:#3271b7; /* White background */
    color: white; /* Text color */
    border: none; /* No border */
    padding: 20px 30px; /* Padding inside the button */
    font-size: 24px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    z-index: 1; /* Ensure the button is above the outline */
}

.outlined-button3::before {
    content: ''; /* No content */
    position: absolute; /* Position relative to the button */
    top: -8px; /* Move outline 6px above the button */
    left: -8px; /* Move outline 6px to the left of the button */
    right: -8px; /* Move outline 6px to the right of the button */
    bottom: -8px; /* Move outline 6px below the button */
    border: 2px solid white; /* White outline */
    z-index: -1; /* Ensure the outline is below the button */
}

.outlined-button3:hover::before {
    border-color: #f0f0f0; /* Slightly darker outline on hover */
}	
	
	
	
	#PicWrapper {
  
    width: 100%; /* Adjust this as needed */
	
}

#PicWrapperRetreat {

    width: 100%; /* Adjust this as needed */
	
}

.image-container {
    position: relative;
    width: 100%;
    height: auto; /* Let the height adjust automatically based on the image's aspect ratio */zindex:-1
}

.image-container img {
    display: block;
    width: 100%;
    height: auto; /* Ensure the image maintains its aspect ratio */
    margin: 0; /* Remove any default margin */
    padding: 0; /* Remove any default padding */
	
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* Change to a color that contrasts well with the image */
    font-size: 24px; /* Adjust text size as needed */
    text-align: center;
    
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Optional: Add a shadow for readability */
    pointer-events: none; /* Ensures text doesn't block interaction with the image */
    width: 100%; /* Ensure the text container spans the full width of the image */
	
}

.overlay-text h1{font-family: "Roboto", sans-serif;
  font-weight: 500 !important;
  font-style: normal;}

.BtnPic {
    text-align: center; /* Center the button below the image */
    margin-top: 10px; /* Adjust the spacing between the image and the button */
}

.BtnPic-bottom {
   position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index:1
}

.hcuatrohigher {margin-top:-15px; text-align:left}



.row {
  display: flex; /* Use flexbox for layout */
  flex-wrap: wrap; /* Allow wrapping */
}

.column {
  flex: 1; /* Each column takes up equal space */
  min-width: 50%; /* Set minimum width to maintain the layout */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.column img {
  width: 100%;
  height: auto;
  max-width: 500px;
  display: block;
  margin-left: auto;
  margin-right: auto; /* Center the image */
}

.column h4 {
  padding-right: 25%; 
}

.special-text {text-align:left}
.bluepara {max-width:250px; margin-left:20%; background-color:#a6c7e2; color:white; }
.bluepara h4{margin:40px; padding:0px; text-align:center; line-height: 30px}

.rowDos {
  display: flex; /* Use flexbox for layout */
  flex-wrap: wrap; /* Allow wrapping */
  text-align:right
}

.columnDos {
  float:left; /* Each column takes up equal space */
  /* Set minimum width to maintain the layout */
}

/* Clear floats after the columns */
.rowDos:after {
  content: "";
  display: table;
  clear: both;
}


.left {
  width: 30%;
}

.right {
  width: 70%;
}

.columnDos img{width:100%; height:auto;}
.columnDos h4 {
  padding-left: 15%; padding-right:5%; text-align:right
}
.columnDos h1 {
  padding-left: 10%; padding-right:5%
}


.rowTres {
  display: flex; /* Use flexbox for layout */
  flex-wrap: wrap; /* Allow wrapping */
  text-align:left
}

.columnTres {
  float:left; /* Each column takes up equal space */
  /* Set minimum width to maintain the layout */
}

/* Clear floats after the columns */
.rowTres:after {
  content: "";
  display: table;
  clear: both;
}


.leftTres {
  width: 70%;
}

.rightTres {
  width: 30%;
}

.columnTres img{width:100%; height:auto}
.columnTres h4 {
  padding-left: 5%; padding-right:15%;   text-align:left
}
.textPlan {text-align:center}
.columnTres h1 {
  text-align:left; padding-left: 5%;
}







.rowCuatro {
  display: flex; /* Use flexbox for layout */
  flex-wrap: wrap; /* Allow wrapping */
  text-align:right
}

.columnCuatro {
  float:left; /* Each column takes up equal space */
  /* Set minimum width to maintain the layout */
}

/* Clear floats after the columns */
.rowCuatro:after {
  content: "";
  display: table;
  clear: both;
}


.leftCuatro {
  width: 30%;
}

.rightCuatro {
  width: 70%;
}

.columnCuatro img{width:100%; height:auto}
.columnCuatro h4 {
  padding-left: 15%; padding-right:5%; text-align:right
}
.textPlan {text-align:center}
.columnCuatro h1 {
 text-align:right; padding-right:5%;
}

.pic-wrapper-book {position: relative; display: inline-block; width:100%}
.pic-wrapper-book h1{text-align:center; margin:30px;font-family: "Roboto", sans-serif;
  font-weight: 800 !important;
  font-style: normal;}
.pic-wrapper-book img {width:100%; height:auto}
.pic-wrapper-btn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}




.sunset-pic-wrapper {position: relative; display: inline-block; width:100%}
.sunset-pic-wrapper img {width:100%; height:auto}
.blue-bg-text{max-width:800px; background-color:#0072BC; opacity:0.8;  position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); color:white}
.text-front {z-index:-1; padding:40px}
.text-front h1, h4 {text-align:center; opacity:1;}
.sunset-wrapper-btn {position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%);}

.pic-apartments-wrapper {position: relative; display: inline-block; width:100%}
.pic-apartments-wrapper img {width:100%; height:auto}
.blue-bg-text-full {max-width:5000px; background-color:#0072BC; opacity:0.8;  position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); color:white; width:100%}
.text-front-apartment{z-index:-1; padding:60px}
.text-front-apartment h1, h2{text-align:center; opacity:1;}
.text-front-apartment h4 {text-align:center; opacity:1; background-color:#0072BC; max-width:600px; margin:auto}
.faq-section {max-width:640px; margin:auto;}
.faq-section h1{text-align:center} 
.faq-section h2{text-align:left !important} 
.faq-response-text {text-align:left; margin-left:20px; margin-top:15px;}
.line-spacer-black {width:100%; height:1px; background-color:#000}

.footer-pic-wrapper {position: relative; display: inline-block; width:100%; background-color:black}
.footer-pic-wrapper img {width:100%; height:auto}
.footer-text {width:100%; max-width:400px; background-image:url(../im463n35/bg-orange.jpg); height:300px; background-repeat:repeat;   position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color:white}
.footer-media {margin-left:45px; margin-top:25px}
.footer-media-two {margin-left:55px; margin-top:25px}




/* Responsive layout for smaller screens */
@media (max-width: 1023px) {
  .column, .columnDos {
    width: 100%; /* Make columns take full width */
    float: none; /* Remove float */text-align:center;
  }
  .columnTres, .columnTres {
    width: 100%; /* Make columns take full width */
    float: none; /* Remove float */text-align:center;
  }
  
  .columnCuatro, .columnCuatro {
    width: 100%; /* Make columns take full width */
    float: none; /* Remove float */text-align:center;
  }
  
  .row {
    flex-direction: column; margin:4% /* Stack columns vertically */
  }
  .rowDos {
    flex-direction: column; /* Stack columns vertically */
  }

  .row .column:last-child {
    order: -1; /* Move the last column to the top */
  }
   .rowTres .columnTres:last-child {
    order: -1; /* Move the last column to the top */
  }
  
  .column h4 {
  padding-right: 0px; margin:25px
}
.bluepara {max-width:250px; margin:auto; background-color:#a6c7e2; color:white; }

.columnDos h1 {
  padding-left: 0px; 
}

.BtnPic-bottom {
    text-align: center; /* Center the button below the image */
   display: block; margin-left:auto; margin-right:auto; width:300px; margin-top:-16%
}

.text-front {z-index:-1; padding:5px}
.blue-bg-text{max-width:800px; background-color:#0072BC; opacity:0.8;  position: absolute; top: 25%; width:90%;   color:white}
.sunset-wrapper-btn {position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%);}
.outlined-button2 {display:none}
.outlined-button {display:none}
.outlined-button3 {display:inline-block; }
.spacerTextUno {height:20px; width:100%; clear:both}
.spacerTextDos {height:10px; width:100%; clear:both}
.hcuatrohigher {margin-top:-15px !important; text-align:center}
.special-text {text-align:center}
.text-front-apartment{z-index:-1; padding:20px}

.spacer2 {height:15px; width:100%; clear:both}


}

@media (max-width: 640px) {
	.faq-section {max-width:640px; margin:auto 3%;}
	.footer-text {width:100%; max-width:350px; background-image:url(im463n35/bg-orange.jpg); height:150px; background-repeat:repeat;   position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color:white}
	.footer-media-two {margin-left:55px; margin-top:10px; margin-bottom:20px}
	.footer-media {margin-left:45px; margin-top:15px}
	.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* Change to a color that contrasts well with the image */
    font-size: 14px; /* Adjust text size as needed */
    text-align: center;
    
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Optional: Add a shadow for readability */
    pointer-events: none; /* Ensures text doesn't block interaction with the image */
    width: 100%; /* Ensure the text container spans the full width of the image */
	
}

.overlay-text h1{font-family: "Roboto", sans-serif;
  font-weight: 500 !important;
  font-style: normal; font-size:16px}
  
  .overlay-text h2{font-family: "Roboto", sans-serif;
  font-weight: 500 !important;
  font-style: normal; font-size:12px}
	
}



.TextRetreatTop {margin:10%; text-align:center; color:black}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 5px; /* Optional: add some space between the items */
    
}

.grid-item {
    background-color: white;
    color: white;
    text-align: center;
    
    border-radius: 5px;
}
.grid-container2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 35px; /* Optional: add some space between the items */
    
}

.grid-item2 {
    background-color: #FBF68E;
    color: white;
    text-align: center;
    margin-left:4%;
	margin-right:4%;
	margin-top:5px;
    border-radius: 0px;
	color:#000
}

.grid-item2 h5 {padding:25px; text-align:left}

.columnRetreat {
  float:left; /* Each column takes up equal space */
  /* Set minimum width to maintain the layout */
}

/* Clear floats after the columns */
.rowRetreat:after {
  content: "";
  display: table;
  clear: both;
}


.leftRetreat {
  width: 40%;
}

.rightRetreat {
  width: 60%;
}

.columnRetreat img{width:100%; height:auto;}
.columnRetreat h4, h3 {
  padding-right: 2%; padding-left:5%; text-align:left
}

.columnRetreat h1 {
  padding-right: 2%; padding-left:5%; text-align:left
}

.blue-btn-Retreat {margin-top:10px; margin-left:5%; margin-right:5%; width:130px}

.book-now-Retreat{
    background-color: #F7C06D;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
	text-decoration:none;
	color:white;
	
}


.book-now-Retreat:hover {
    background-color: #F7C06D;
}

.columnRetreatDos {
  float:left; /* Each column takes up equal space */
  /* Set minimum width to maintain the layout */
}

/* Clear floats after the columns */
.rowRetreatDos:after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 1023px) {
	  .rowRetreatDos .columnRetreatDos:last-child {
    order: -1 !important; /* Move the last column to the top */
  }
}
.leftRetreatDos {
  width: 45%;
}

.rightRetreatDos {
  width: 55%;
}

.columnRetreatDos img{width:100%; height:auto;}
.columnRetreatDos h4, h3 {
  padding-right: 2%; padding-left:5%; text-align:left
}

.columnRetreatDos h1 {
  padding-right: 2%; padding-left:5%; text-align:left
}

.blue-btn-RetreatDos {margin-top:10px; margin-left:5%; margin-right:5%; width:130px}

.book-now-RetreatDos{
    background-color:#0072bc;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
	text-decoration:none;
	color:white;
	
}


.book-now-RetreatDos:hover {
    background-color:#2babe2 ;
}



.rowTresRetreat {
  display: flex; /* Use flexbox for layout */
  flex-wrap: wrap; /* Allow wrapping */
  text-align:left
}

.columnTresRetreat {
  float:left; /* Each column takes up equal space */
  /* Set minimum width to maintain the layout */
}

/* Clear floats after the columns */
.rowTresRetreat:after {
  content: "";
  display: table;
  clear: both;
}


.leftTresRetreat {
  width: 55%;
}

.rightTresRetreat {
  width: 45%;
}

.columnTresRetreat img{width:100%; height:auto}
.columnTresRetreat h4 {
  padding-left: 5%; padding-right:15%;   text-align:left
}
.textPlan {text-align:center}
.columnTresRetreat h1, h3 {
  text-align:left; padding-left: 5%;
}

.columnTresRetreat h3 {
  text-align:left; padding-left: 5%;
}

.rowTresPack {
  display: flex; /* Use flexbox for layout */
  flex-wrap: wrap; /* Allow wrapping */
  text-align:left
}

.columnTresPack {
  float:left; /* Each column takes up equal space */
  /* Set minimum width to maintain the layout */
}

/* Clear floats after the columns */
.rowTresPack:after {
  content: "";
  display: table;
  clear: both;
}


.leftTresPack {
  width: 65%;
}

.rightTresPack {
  width: 35%;
}

.columnTresPack img{width:100%; height:auto}
.columnTresPack h4 {
  padding-left: 10%; padding-right:2%;   text-align:left
}
.textPlan {text-align:center}
.columnTresPack h1, h3 {
  text-align:left; padding-left: 10%;
}

.columnTresPack h3 {
  text-align:left; padding-left: 5%;
}



.textRetreatWrap {max-width:1200px; margin:auto; width:100%}
.textRetreatWrap h1{ color:black; text-align:center}
.textRetreatWrap h2{ color:black; text-align:center}
.textRetreatWrap h4{ color:black; text-align:center; margin:2%}

.grid-container3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); /* Responsive grid layout */
    gap: 10px; /* Space between boxes */
    padding: 10px; /* Space around the container */
	margin:auto
}

.box3 {
    padding: 20px;
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
    text-align:left;
}

.box3 h4{font-weight:bolder; text-align:left; margin-left:32px}


@media (max-width: 900px) {
    .grid-container, .grid-container2 {
        grid-template-columns: 1fr; /* Single column layout */
    }
	
	.grid-container3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid layout */
    gap: 10px; /* Space between boxes */
    padding: 10px; /* Space around the container */
	margin:auto
}

.box3 {
    padding: 20px;
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
    text-align:left; max-width:360px
}

}

@media (max-width: 1023px) {
  .columnRetreat, .columnRetreatDos, .columnTresRetreat, .columnTresPack {
    width: 100%; /* Make columns take full width */
    float: none; /* Remove float */text-align:center;
  }
  .rowRetreat, .columnRetreatDos, .rowTresPack {
    flex-direction: column; /* Stack columns vertically */
  }
  
  .blue-bg-Retreat, .blue-bg-RetreatDos{max-width:800px; background-color:#0072BC; opacity:0.8;  position: absolute; top: 25%; width:90%;   color:white}
  
  
  
 }
 
.packagesBB {max-width:1152px; width:100%; margin:auto;}
.packagesText {background-color:#A4BCE3; max-width:450px; position: relative; margin-top:-400px; opacity:0.7}
.packagesTextWrap {padding:30px}
.packagesText h2 {text-align:left}
.packagesText h4 {text-align:left;}
.packagesBB img {width:100%; margin:auto;}
.packWrap {margin:2%}
.photoPalms {width:100%}	
.photoPalms img {width:100%}
.packtext1 {color:black; margin:2%}	 
.packtext2 {color:black; margin:2%}	 
.packtextWrap{margin:auto; max-width:800px; width:100%} 
.packtext1 h1, .packtext2 h1{text-align:center}
.packtext1 h2, .packtext2 h2{text-align:left}
.packtext1 h3, .packtext2 h3{text-align:center; font-weight:bold}
.packtext1 h4{text-align:left}

.image-wrapper {
    display: flex;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
}

.image-box {
    flex: 1;
    margin: 10px;
    position: relative;
}

.image-box h1 { text-align:left; margin-left:15px}
.image-box h4 { text-align:left}
	
.image-box2 {
    flex: 1;
    margin: 10px;
    position: relative;
}

.img-container2 {
    position: relative;
    overflow: hidden;
}	

.img-container2 img {width:100%; max-width:600px; margin:auto}
.image-wrapper2 {
    display: flex;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
}

.image-box2 h1 { text-align:left; margin-left:15px}
.image-box2 h4 { text-align:left}

/* Media Query for screens 600px or smaller */
@media (max-width: 600px) {
    .image-wrapper2 {
        flex-direction: column; /* Stack items vertically */
		
    }

    .image-box2 {
        width: 100%; /* Each box takes full width */
        margin:0px; /* Space below each box */
    }
	.image-box2 h1 { text-align:left; margin-left:15px; margin-right:15px}
.image-box2 h4 { text-align:left; margin-left:15px; margin-right:15px}
}

.img-container {
    position: relative;
    overflow: hidden;
}

.img {
    display: block;
    width: 100%;
    height: auto;
}

.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.img-container:hover .img-overlay {
    opacity: 1;
}

.action-button {
    background-color: #007BFF;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}


@media (max-width: 1023px) {
	.packagesBB { width:100%;}
	.packagesText {background-color:#A4BCE3; max-width:1152px; margin-top:20px; text-align:left; width:100%;  margin:auto !important}
	.packagesBB img {display:none}
}

.naviHonda {max-width:1000px; margin:auto}
.naviHonda img {max-width:1000px; width:100%}


.toursBB {max-width:1152px; width:100%; margin:auto;}
.toursText {background-color:#3FBDE3; max-width:450px; position: relative; margin-top:-430px;}
.toursTextWrap {padding:30px}
.toursText h2 {text-align:left; color:white}
.toursText h4 {text-align:left; color:white}
.toursBB img {width:100%; margin:auto;}
.ready { font-size:24px; font-weight:300}
@media (max-width: 1023px) {
	.toursBB { width:100%;}
	.toursText {background-color:#3FBDE3; max-width:1152px; margin-top:20px; text-align:left; width:100%;  margin:auto !important}
	.toursBB img {display:none}
}

.moto{ font-weight:700}


.randomLinks a {color:#3271b7; text-decoration:none}
.randomLinks a:hover {color:#3271b7; text-decoration:none}
.randomLinks2 a {color:#3271b7; text-decoration:none}
.randomLinks2 a:hover {color:#3271b7; text-decoration:none	}
.randomLinks3 a {color:white; text-decoration:none; font-weight:800}
.randomLinks3 a:hover {color:white; text-decoration:none; font-weight:bolder	}