@charset "UTF-8";
/* CSS Document */
* {margin:0px; padding:0px;}

html { background-color:#242526; }

html, body {
  overflow-x: hidden;
  overflow-y: visible; 
}


.header {
  position: relative;
  width: 100%;
}

/* Background image */
.header-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* Logo on top */
.logo-mpsc {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 30%;
  max-width: 350px;
  height: auto;
}
/*menu8*/

.site-header {
  height: 100px;
}

/* NAV BAR */
.main-nav {
  width: 100%;
  background: white;
  position: relative;
  z-index: 1000;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  font-family: "Kantumruy Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* STICKY STATE */
.main-nav.stuck {
  position: fixed;
  top: 0;
}

/* NAV LIST */
.main-nav ul {
  list-style: none;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  text-align:center;
  height:100%;
  padding-bottom:15px;
  
}

/* LINKS */
.main-nav a {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  color: black;
  font-weight: 500;
  transition: background-color 0.25s ease, color 0.25s ease;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:13px;
  padding-right:13px;
	font-size:14px
}

/* HOVER EFFECT */
.main-nav a:hover {
  background: black;
  color: white;
  
}

.main-nav-selected {
  background: black;
  color: #FFF !important;
  
}

/* BURGER BUTTON */

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
  
}


/* MOBILE MENU */

@media (max-width: 900px) {

  .nav-toggle {
    display: block;
  margin-left:90%;
  }

  .main-nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0;
  }

  .main-nav ul.active {
    display: flex;
  }

  .main-nav a {
    justify-content: center;
    padding: 5px;
  }

.main-nav ul {
    flex-direction: column;
    align-items: center;
    padding: 5px;
    gap: 20px;
  }

}



/*end menu*/

/*slide ads */

.slider{
  max-width:800px;
  margin:auto;
  position:relative;
  height:240px;
}

/* slides */
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  animation: slideshow 16s infinite;
  pointer-events: none;   /* 🔴 prevent all clicks by default */
  z-index: 0;
}

/* imagen */
.slide img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.slider:hover .slide{
  animation-play-state: paused;
}

/* delays */
.slide:nth-child(1){animation-delay:0s;}
.slide:nth-child(2){animation-delay:4s;}
.slide:nth-child(3){animation-delay:8s;}
.slide:nth-child(4){animation-delay:12s;}

@keyframes slideshow{

0%{
  opacity:0;
  z-index:0;
  pointer-events:none;
}

5%{
  opacity:1;
  z-index:1;
  pointer-events:auto; /* ✅ only visible slide clickable */
}

25%{
  opacity:1;
  z-index:1;
  pointer-events:auto;
}

30%{
  opacity:0;
  z-index:0;
  pointer-events:none;
}

100%{
  opacity:0;
  z-index:0;
  pointer-events:none;
}

}

@media (max-width: 568px) {
	.site-header {height:0px !important}
}


/*slide ads ends*/

.two-col-wrapper {
  max-width: 800px;
  margin: 0 auto; /* centers */
  display: flex;
  
}
.two-col-wrapper-transport {
  max-width: 800px;
  margin: 0 auto; /* centers */
  display: flex;
  gap:40px
}

/* widths */
.left-box {
  width: 75%;
}

.right-box {
  width: 25%;
}

.left-box-transport{
  width: 65%;
}

.right-box-transport {
  width: 35%;
}

/* optional styling */
.left-box,
.right-box {
  
}

/*  Responsive stack */
@media (max-width: 768px) {
  .two-col-wrapper {
    flex-direction: column;
  }
  
  .two-col-wrapper-transport {
    flex-direction: column;
  }

  .left-box,
  .right-box {
    width: 100%;
  }
  
  .left-box-transport,
  .right-box-transport {
    width: 100%;
  }
}

.two-col-wrapper-second {
  max-width: 800px;
  margin: 0 auto; /* centers */
  display: flex;
  
}

/* widths */
.left-box-second {
  width: 35%;
}

.right-box-second {
  width: 65%; text-align:center
}

.right-box-second h2 {font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal; color:#bcf706}
  
  .right-box-second h4 { font-family: "Kantumruy Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal; color:#FFF; margin:4%}

/* optional styling */
.left-box-second,
.right-box-second {
  
}

/*  Responsive stack */
@media (max-width: 768px) {
  .two-col-wrapper-second {
    flex-direction: column;
  }

  .left-box-second,
  .right-box-second {
    width: 100%;
  }
  
  .right-box-second { margin-top:-100px}
  .spacer6 {width:100%; height:30px}
}


/*video*/

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top:0px; height: 0; overflow: hidden;
}

.video-responsive {
    position: relative;
    width: 100%;
   
    overflow: hidden;
  }

  .video-responsive iframe {
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
@media (max-width: 528px) {  
  .video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 90%;
	margin:auto
}
}
  
/*video ends*/


.page-content {
  min-height: 200vh;
  background: #242526;
}

.main-header-text {color:#FFF; text-align:center; margin: 5% auto;font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal; }


.surf-widget {
  max-width:460px;
  background:linear-gradient(180deg,#0b1220,#121b2e);
  color:#e8ecf3;
  border-radius:18px;
  padding:28px;
  box-shadow:0 14px 32px rgba(0,0,0,.6);
  z-index:2;
  position: absolute;
  width:100%;
  height:400px;
  font-family: "Kantumruy Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

@media (max-width: 468px) {
	.surf-widget {
  max-width:334px;
  background:linear-gradient(180deg,#0b1220,#121b2e);
  color:#e8ecf3;
  border-radius:18px;
  padding:28px;
  box-shadow:0 14px 32px rgba(0,0,0,.6);
  z-index:2;
  position: absolute;
  width:100%;
  height:450px;
  font-family: "Kantumruy Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}
}

.surf-widget h2 {
  margin:0 0 10px;
  text-align:center;
  color:#fff;font-family: "Russo One", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.surf-rating {
  text-align:center;
  font-size:22px;
  font-weight:bold;
  margin:10px 0 14px;font-family: "Russo One", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.rating-good {color:#43e17f;}
.rating-fair {color:#ffd166;}
.rating-poor {color:#ff6b6b;}
.rating-epic {color:#6ea8ff;}

.conditions-row {
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:14px;
  font-family: "Kantumruy Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.conditions-row:last-child {
  border-bottom:none;
}

.refresh-note {
  text-align:center;
  font-size:11px;
  opacity:.6;
  margin-top:10px; font-family: "Kantumruy Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}


/*marquee*/

.v-marquee-container { 
  margin: auto;
  text-align: center;
  border-radius:20px
  
}

.resp-h-marquee {display:none}

@media (max-width: 768px) {
	.v-marquee-container {display:none !important}
	
	.resp-h-marquee {display:block}
}

.marquee-blue {background-color:#08f9f9; max-width: 300px; width:100%}
.marquee-green{background-color:#bcf706; max-width: 200px; width:100%}

.v-window {
  height:auto;
  overflow: hidden;
  position: relative;
}

.v-track {
  transform: translateY(-100px); /* start on first real slide */
  transition: transform 0.7s ease;

  display: flex;
  flex-direction: column;
  gap: 12px;  

}

.v-slide {
	width:150px;
	margin:auto;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
}

.v-slide-blue {
	width:250px;
	margin:auto;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
}

.v-slide img {
  width: 150px;
  height: 150px;
  object-fit: cover;
}

.v-slide-blue img {
  width: 250px;
  height: 250px;
  object-fit: cover;
}

.blue-slide {width:250px}

.arrow {
  
  color: #000;
  border: none;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 18px;
}

.arrow-blue {background:#08f9f9 ;}
.arrow-green {background:#bcf706 ;}

.v-window { height: 620px; }


/* arrows */

.arrow:hover {
  opacity: 0.8;
}


/*marquee ends*/


.h1text {text-align:center; color:#FFF }
.photo-container {
    position: relative;
    padding-bottom: 38.25%;
    padding-top: 1px; height: 0; overflow: hidden;
}

.photo-container iframe,
.photo-container object,
.photo-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.photoBg {
	margin:auto;
	max-width:800px;
	width:100%
}

.report-wrap {max-width:800px; width:100; margin:auto; padding:2%;}

#ComunidadWrapper {
max-width:980px !important; margin-left:auto; margin-right:auto; margin-top:3%; margin-bottom:3%;	
}

@media screen and (min-width: 200px) and (max-width: 970px) {
	#ComunidadWrapper {
max-width:300px !important; margin-left:auto; margin-right:auto; margin-top:3%; margin-bottom:3%;	
}

}

.ComunidadWrapperImgs {
display:inline-block; margin:auto; max-width:301px; width:100%; padding:10px
}


.parallax-wrap {
  position: relative;
  height: 80vh;
  overflow: hidden;
}

.parallax-img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 200%;      /* MORE height = more travel room */
  object-fit: cover;

  top: -40%;         /* center oversized image */

  transform: translateY(0);
  will-change: transform;
}

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


.surf-tide-card {
  max-width: 500px;
  margin:auto;
  background: linear-gradient(180deg,#0b1220,#020617);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.65);
  margin-top:0px;
  z-index:1;
  margin-left:10px
}

/* header bar */
.surf-tide-header {
  padding: 14px 18px;
  text-align: center;
  font-weight: 600;
  letter-spacing: .4px;
  color: #7dd3fc;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* iframe container */
.surf-tide-frame {
  width: 100%;
  height: 610px;
  background: #020617;
}




/* iframe itself */
.surf-tide-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* mobile */
@media (max-width:468px) {
  .surf-tide-card {
    max-width: 100%;
	margin-left:0px
  }

  .surf-tide-frame {
    height: 660px;
  }
}

.kantumruy-pro-light {
  font-family: "Kantumruy Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.kantumruy-pro-medium {
  font-family: "Kantumruy Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.russo-one-regular {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.container-ads h3 {color:black}
.container-ads h4 {color:#bcf706 !important; font-weight: 500;}
.container-ads span{color:#FF00FF !important}

.h1text {font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal;}
  
.h3report {font-family: "Kantumruy Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;}
  
  
  .container-ads {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
justify-content: center; 
  max-width: 1000px;   /* max width */
  margin: 0 auto;      /* center horizontally */
  padding: 0px;       /* optional side spacing */
}

.container-ads a {text-decoration:none}

.box-ads {
  flex: 1 1;      /* grow | shrink | base width */
  min-width: 150px;     /* prevents too small */
max-width:164px;
  padding:3px;
  text-align: center;
  box-sizing: border-box;
  margin:auto
}

.box-green {width:150px; height:164px; background-image:url(../1m4635/green-box.png); background-position: center; background-repeat:no-repeat; background-size: contain}

.box-pink {width:150px; height:164px; background-image:url(../1m4635/pink-box.png); background-position:center; background-repeat:no-repeat; background-size: contain}



 .container-sponsors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* centers every row */
  gap: 20px;

  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}

.box-sponsors {
  flex: 0 0 calc(25% - 30px);   /* 4 per row */
  max-width: 150px;
  text-align: center;
}

/* 3 per row */
@media (max-width: 1100px) {
  .box-sponsors {
    flex: 0 0 calc(33.33% - 30px);
  }
}

/* 2 per row */
@media (max-width: 700px) {
  .box-sponsors {
    flex: 0 0 calc(50% - 30px);
  }
}

/* 1 per row */
@media (max-width: 450px) {
  .box-sponsors {
    flex: 0 0 100%;
  }
}



.text-descriptions, h2, h3 {font-family: "Kantumruy Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal; color:#FFF; margin:4%; text-align:center;}
  

.text-descriptions-wrap { max-width:800px; margin:auto}
  
  .h-marquee-container {
  max-width: 800px;
  margin: 60px auto;
  position: relative;
  background-color:#e600fd;
  padding:30px;
  border-radius: 10px;
}

.h-window {
  overflow: hidden;
  background-color:#e600fd
}

.h-track {
  display: flex;
  gap: 30px;
  will-change: transform;
}

.h-slide {
  min-width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:#242527;
  white-space: nowrap;
}

/* SIDE ARROWS */
.h-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color:transparent;
  color: #000;
  border: none;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 5;
}

.h-arrow.left {
  left: 0px;  /* adjust if needed */
}

.h-arrow.right {
  right: 0px; /* adjust if needed */
}

.h-arrow:hover {
  opacity: 0.85;
}

 .re-btn a {text-align:center; color:black; background-color:#bcf706; padding:5px 10px; cursor: pointer; text-decoration:none; border-radius:10px; font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal; display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;}

.re-btn a:hover { transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);} 
  
  .surf-lessons-img {width:100%; max-width:500px; margin:auto; padding:2%}
  
  .surf-lessons-img img {width:100%; margin:1%}
  .sl-btn-wrapper {width:100px; margin:auto}
  .sl-btn a {text-align:center; color:black; background-color:#08f9f9 ; padding:5px 10px; cursor: pointer; text-decoration:none; border-radius:10px; font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal; display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease; width:100px; margin:auto}

.sl-btn a:hover { transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);} 
  
  .text-descriptions a{color: white; }
  .text-descriptions a:hover{color:#bcf706; }
  
  .container-trans {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 20px; /* space between divs */
  padding: 20px; color: #000; 
  height:100%
}

.box-trans {
   width: 150px;
  height: auto;
  background: #f2f2f2;
  border-radius: 15px;
  overflow: hidden; /* keeps image inside rounded corners */
  display: flex;
  flex-direction: column; color: #000; 
}

.box-trans:hover .box-trans-layout-top {
  background:#bcf706; color: #000; 
}

.box-trans:hover .box-trans-layout-bottom {
  background:#bcf706;
 color: #000; 
}

@media (max-width:650px){

  .container-trans{
    flex-wrap:wrap;
  }

  .box-trans{
    flex:1 1 calc(50% - 20px);
  }

  .surf-lessons-img img {
    width:100%;
    margin:1% auto;
    max-width:350px;
  }

}

.box-trans-layout-top  {flex: 2; padding:5%; margin-top:20px}

.box-trans-layout-bottom { flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  padding: 5px;
  text-align: center;
  color:#000;}

.box-trans img {  width: 100%;
  height: 100%;
  object-fit: cover;}

.box-trans a { color: #000 !important; text-decoration:none; font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal; }
  
  .box-trans a:hover {color:#000; text-decoration:none; background:#bcf706;  }
  
  .box-trans h3 {color:#000; font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal; }
  
  
 .span-car {margin-top:21px} 
 .space-car {margin-top:15px}
 .span-side {margin-top:2px} 
  .span-atv {margin-top:16px}
  
  
  .container-cards {
  max-width: 800px;
  margin: 40px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
justify-content: center;
}

.container-cards a{color:#FFF}
.container-cards a:hover{color: #096}

.card {
  background: #000;
  border: 2px solid #fff;
  width: calc(50% - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

.card-content {
  padding: 20px;
  text-align: center;
  color: #fff;
}

.card-content p {font-weight:400}

/* Rounded corners */
.card.left {
  border-bottom-left-radius: 25px;
}

.card.right {
  border-bottom-right-radius: 25px;
}

/* Responsive */
@media (max-width: 800px) {
  .card {
    width: 100%;
  }

  .card.left,
  .card.right {
    border-radius: 25px;
  }
  
  .card-content { width:100%; max-width:300px; margin:auto; padding-left:-10px}
  
}

.card.full-right {
  width: 100%;
  border-bottom-right-radius: 25px;
   margin:2px; max-width:740px
}

/* Horizontal layout inside full card */
.horizontal {
  display: flex;
  align-items: stretch;
}

.horizontal img {
  width: 50%;
  object-fit: cover;
}

.horizontal .card-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Responsive */
@media (max-width: 800px) {

  .horizontal {
    flex-direction: column;
  }

  .horizontal img,
  .horizontal .card-content {
    width: 100%;
  }

  .card.full-right {
    border-radius: 25px;
  }

}

.contact-form {
  max-width: 500px;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-form input,
.contact-form textarea,
.contact-form button {
  width: 100%;
  padding:15px;
  box-sizing: border-box; /* THIS FIXES THE GAP */
}

.contact-form button {
  padding: 15px;
  background: #25D366;
  color: white;
  border: none;
  font-size: 18px;
  cursor: pointer;
}