.banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    width: 100%;
    height: 100vh;

  
    background-image: url('https://viajeindochina.com/uploads/Nhu%20Y/hoian-boats-edited.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: white; /* Text color */
    font-family: 'Arial', sans-serif;
 
}
  
  .polarize{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0);
  }
  
  h1{
    font-size: 2em;
    font-family: 'Muli', sans-serif;
    color: #ffffff;
    text-shadow: 0px 1px 2px black;
    text-align: center;
  }
  
  h2{
    text-align: center;
    color: #ffffff;
    font-weight: normal;
  }
  
  h3{
    text-align: center;
    margin-bottom: 3em;
    font-size: 1.2em;
  }
  
 
 
  @media (max-width: 900px){
  
  
  
    .whatWrap{
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      height: 50em;/*eliminar*/
      flex-wrap: nowrap;/*eliminar*/
      }
  
      /* .whatTitle{
        width: 100%;
        height: 500px;
      } */
  
      .whatContent{
        width: 100%;
        height: auto;
      }
  
      .whyContent{
        width: 100%;
        height: auto;
      }
  
  
      .howContent{
        width: 100%;
        height: auto;
      }
  
      .whatContent h1, .whyContent h1, .howContent h1{
        margin-top: 1em;
        margin-bottom: 1em;
        color: #0a0a0a;
        text-shadow: none;
        text-align: center;
      }
  
      .plans{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
  
      .price{
        margin-bottom: 1em;
        margin-right: 0em;
      }
    }
  
  
  
 





/* General styles */
body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
}

/* Hero section */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 2rem;
}

/* Hero image */
.hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Hero text */
.hero-text {
  max-width: 500px;
  text-align: left;
}

.hero-text h1 {
  font-size: 2.5rem;
  color: #0a223d;
  margin-bottom: 1rem;
}

.hero-text p {
  font-size: 1rem;
  color: #555;
  line-height: 1.8;
}



.site-footer
{
  background-color:#2a2b26;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  padding-left:0;
  list-style:none
}
.footer-links li
{
  display:block
}
.footer-links a
{
  color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.social-icons a.dribbble:hover
{
  background-color:#ea4c89
}
@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}


















/*

All grid code is placed in a 'supports' rule (feature query) at the bottom of the CSS (Line 77). 
        
The 'supports' rule will only run if your browser supports CSS grid.

Flexbox is used as a fallback so that browsers which don't support grid will still recieve an identical layout.

*/

@import url(https://fonts.googleapis.com/css?family=Montserrat:500);


*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	background-color: #fafafa;
}

.conta {
	max-width: 100rem;
	margin: 0 auto;
	padding: 0 2rem 2rem;
}

.heading {
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	padding: 3.5rem 0;
	color: #1a1a1a;
}

.heading span {
	display: block;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	/* Compensate for excess margin on outer gallery flex items */
	margin: -1rem -1rem;
}

.gallery-item {
	/* Minimum width of 24rem and grow to fit available space */
	flex: 1 0 24rem;
	/* Margin value should be half of grid-gap value as margins on flex items don't collapse */
	margin: 1rem;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}

.gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease-out;
}

.gallery-image:hover {
	transform: scale(1.15);
}

/*

The following rule will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling. 

*/

@supports (display: grid) {
	.gallery {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
		grid-gap: 2rem;
	}

	.gallery,
	.gallery-item {
		margin: 0;
	}
}









.conta {
  text-align: center;
  padding: 20px;
}

.heading {
  font-size: 2rem;
  margin-bottom: 20px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Ajusta dinámicamente */
  gap: 10px;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: auto;
}

.gallery-item {
  width: 100%;
  aspect-ratio: 1 / 1; /* Hace que todas las imágenes sean cuadradas automáticamente */
  overflow: hidden;
  border-radius: 10px;
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Evita distorsión manteniendo el recorte */
  border-radius: 10px;
}

/* 📱 Diseño Responsivo */
@media (max-width: 768px) {
  .gallery {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)