@charset "UTF-8";

@font-face {
  font-family: 'MyCustomFont-1';
  src: url('/fonts/AgenorNeue-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'MyCustomFont-2';
  src: url('/fonts/calibri-regular.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

.text-surflessons {max-width:700px; margin:auto !important; width:100%}

 .container-1 {
    display: flex;
    flex-wrap: wrap; /* allows stacking on small screens */
    width: 100%;
  }

.left-1 {
    background-color: transparent;
    width: 62%;
    padding: 20px;
  }

  .right-1 {
    background-color: transparent;
    width: 38%;
    padding: 20px;
  }

.outer {
  display: flex;
  justify-content: center;   /* centers horizontally */
  align-items: center;       /* centers vertically */
  background: transparent;
  height:65vh;
}

.container-2 {
  display: flex;          /* aligns divs side by side */
}

.box {
  flex: 1;                /* make them equal width */
  padding: 20px;
  border: 1px solid #ccc;
}

.left { width: 60%; }
.right { width: 40%; }

.container-2 p {margin-top:15px}
@media (max-width: 1024px) {
	.container-2 {margin-top:-15px !important}
}
.stack {
  display: flex;
  flex-direction: column;    /* stack vertically */
  align-items: center;       /* optional: center them horizontally */
  gap: 20px;                 /* space between boxes */
  margin-top: -160px;
}

.item {
  width: 65%;
  height: 60px;                       /* fixed height for visibility */
  background-size: cover;              /* make image cover the box */
  background-position: center;         /* center the image */
  background-repeat: no-repeat;        /* prevent tiling */
  display: flex;                       /* to center text */
  justify-content: center;
  align-items: center;
  color: #f38a46;

  /* Animation setup */
  opacity: 0;
  transform: translateX(-100px);
  transition: all 1.5s ease-out;
}

.item.show {
  opacity: 1;
  transform: translateX(0);
}


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

table {margin:auto}

.quote-bg {
	background-size: contain;              /* make image cover the box */
  background-position: center;         /* center the image */
  background-repeat: no-repeat;        /* prevent tiling */
  display: flex;                       /* to center text */
  justify-content: ;
  align-items: center;
  max-width:40%; margin:auto; height:230px; color:#1d67b8
	}
	
@media (max-width: 640px) {
	.quote-bg {
	background-size: contain;              /* make image cover the box */
  background-position: center;         /* center the image */
  background-repeat: no-repeat;        /* prevent tiling */
  display: flex;                       /* to center text */
  justify-content: ;
  align-items: center;
  max-width:95%; margin:auto; height:230px; color:#1d67b8
	}
}
	 .container-4 {
    display: flex;
	flex-wrap:wrap;
    justify-content: center;
    align-items: center;
	max-width:820px;
	margin:auto
  }
  
  
a {
	font-family: 'MyCustomFont-1', sans-serif;
    text-decoration: none;
    color: inherit;
  }

  .box-4 {
    position: relative;
    width:  185px;
    height: 270px;
    background-color: #2ecc71;
    color: black;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
	margin:10px !important;
  }

  .box-4-1 .box-4-2 .box-4-3 .box-4-4 {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    transition: opacity 0.4s ease;
  }
  
 /* stack vertically at 1024px and below */
@media (max-width: 1024px) {
  .container-4 { flex-direction: column; } /* forces vertical order */
  .box-4 { flex: 1 1 100%; height: auto; padding: 28px 20px; min-height: 220px; }
  .box-4 .content { gap: 8px; }
}
  /* Overlay layer */
  .box-4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.4s ease;
    z-index: 1;
  }

  /* BOOK NOW text centered */
  .box-4::after {
    content: "BOOK NOW";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: white;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
  }
  
  

  /* Hover effect */
  .box-4:hover::before {
    background: rgba(0, 0, 0, 0.8);
  }

  .box-4:hover::after {
    opacity: 1;
  }
  
  
  
  .private-lesson { 
  position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    transition: opacity 0.4s ease; margin:auto
   }
	
	.private-lesson::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 58%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.4s ease;
    z-index: 1; margin-left:21%
  }
  
  .private-lesson::after {
	  font-family: 'MyCustomFont-1', sans-serif;
    content: "BOOK NOW";
	max-width:800px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: white;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;  margin:auto
  }
  
   .private-lesson:hover::before {
    background: rgba(0, 0, 0, 0.8); 
  }

  .private-lesson:hover::after {
    opacity: 1; 
  }

  .box-4:hover .box-4-1 {
    opacity: 0;
  }

  .box-4-1 { background-color: #d2e3f1; }
  .box-4-2 { background-color: #a5c6e3; }
  .box-4-3 { background-color: #83b1d8; }
  .box-4-4 { background-color: #619ccd; }
  
  
  .wrap-surf-stay {background-color:#fcdfcd}
  
  .container-surf-stay {
  display: flex;   
  max-width:800px;
  margin:auto       /* aligns divs side by side */
}

.box-surf-stay {
  flex: 1;                /* make them equal width */
  padding: 20px;
}


.left-surf-stay { width: 60%; }
.right-surf-stay { width: 40%; }

@media (max-width: 600px) {
	 .container-surf-stay {
 flex-direction: column;   
  max-width:600px;
  width:100%;
  margin:auto    ;
  text-align:center   /* aligns divs side by side */
}

.box-surf-stay {
  flex:0;                /* make them equal width */
  padding: 1px;
   max-width:600px;
  width:100%;
  margin:auto    ;
  text-align:center 
}


.left-surf-stay { width: 100%; }
.right-surf-stay { width: 100%; }

}

  .whatsapp-float {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1000;
    }

    .whatsapp-float img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease;
    }

    .whatsapp-float img:hover {
      transform: scale(1.1);
    }

    @media (max-width: 768px) {
      .whatsapp-float img {
        width: 50px;
        height: 50px;
      }
    }