@import url('https://fonts.googleapis.com/css?family=Open+Sans');

:not(.fa):not(.fi) {
font-family: 'Open Sans' !important;
}

@media (min-width: 768px) {
  #header > div > div > div.col-xs-8.col-md-3 > div > div {
    /* Scale up the layout container on desktop */
    width: 140% !important; 
    max-width: 280px !important; /* Increases the theme's maximum size restriction */
    
    display: flex !important;
    align-items: center;
  }

  /* Force the image inside to stretch beautifully to the new size */
  #header > div > div > div.col-xs-8.col-md-3 > div > div img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important; /* Clears any theme height limits */
  }
}



@media (max-width: 767px) {
  /* 1. Expand container height and align perfectly to swallow the black strip */
  #main-buttons > div > div > div > div.bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important; /* Vertically centers the buttons inside the new height */
    
    width: 100% !important;
    max-width: 100% !important;
    height: 54px !important; /* Forced height to completely mask the strip behind it */
    padding: 0 16px !important; 
    box-sizing: border-box !important;
    gap: 12px !important;       

    position: relative !important;
    transform: translateY(64px) !important; /* Move this up/down slightly if needed to center over the strip */
    
    z-index: 5 !important; 
    background: transparent !important;
  }

  /* 2. SECONDARY BUTTON WRAPPER: "Show on map" smaller (32%) */
  #main-buttons > div > div > div > div.bar > div.btn.map.btn-with-image.custom {
    display: block !important;
    flex: 0 0 32% !important; 
    width: 32% !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: none !important; 
    border: none !important;     
    box-shadow: none !important;  
  }

  /* 3. HERO BUTTON WRAPPER: "Book Now" wide (68%) */
  #main-buttons > div > div > div > div.bar > div.btn.book.btn-with-icon.custom {
    display: block !important;
    flex: 1 1 68% !important; 
    width: 68% !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: none !important; 
    border: none !important;     
    box-shadow: none !important;  
  }

  /* 4. Shared capsule styles - Increased height to 48px to cover the space */
  #main-buttons > div > div > div > div.bar > div.btn.book.btn-with-icon.custom > a,
  #main-buttons > div > div > div > div.bar > div.btn.map.btn-with-image.custom > a {
    display: flex !important;
    width: 100% !important;
    height: 48px !important; /* Taller button to maximize coverage */
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 50px !important; 
    
    text-decoration: none !important; 
    text-decoration-line: none !important;
    outline: none !important;
    border: none !important;

    background-image: none !important;
    background-color: #009ee2 !important; 
    color: #FFFFFF !important;            
    
    font-weight: 700 !important;
    text-transform: uppercase !important;  
    letter-spacing: 0.5px !important;
    text-shadow: none !important;
    box-shadow: 0 6px 15px rgba(0, 158, 226, 0.4) !important; 
  }

  /* 5. Fine-tune Typography sizes */
  #main-buttons > div > div > div > div.bar > div.btn.map.btn-with-image.custom > a {
    font-size: 11px !important; 
  }

  #main-buttons > div > div > div > div.bar > div.btn.book.btn-with-icon.custom > a {
    font-size: 14px !important; 
  }
}

@media (max-width: 767px) {
  #about-us > div > div.txt > div {
    margin-top: -120px !important; /* Adjust the -20px to change how far up it moves */
  }
}






/* Start */

/* Video wrapper styles */
.swsc-wrapper > div:first-child {
  position: absolute !important;
  width: 100%;
  height: 700px;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 10;
  border-radius: 0 !important;
  background-image: url(/v2/themes/assets/img/categories/sport/classic/bg.jpg);
  background-size: cover;
  background-position: center;
  z-index: -1;
}

/* Video styles */
#about-us .swsc-wrapper > div:first-child iframe {
  position: absolute;
  top: -65px !important;
  left: 0;
  width: 100% !important;
  height: calc(56.25vw + 120px) !important;
  opacity: 0;
  animation: showVideo 0.6s ease forwards;
  animation-delay: 2s;
}

/* Remove background from cover section for index page */
#sb_main.page--index #main #main-buttons {
    position: relative;
    z-index: 0;
    background: transparent !important;
}

/* Adjust wrappers to avoid relative position */
#descr-firm [class^="col-"], #main #main-content {
    position: static;
}


@media (max-width: 1440px) {
  .swsc-wrapper > div:first-child { height: 500px; }
}

/* tablet */
@media (max-width: 768px) {
  .swsc-wrapper > div:first-child { height: 600px; }
}

/* phone */
@media (max-width: 480px) {
  .swsc-wrapper > div:first-child { height: 260px; }
}

@keyframes showVideo {
  0%, 80% { opacity: 0; }
  100%    { opacity: 1; }
}

/* End */

#about-us > div > div.title-main {
display: none !important;
}


/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}