/* **********SITE COLOURS *****************
#ffa7e4; - pink
#fcc152 - orange
##47b3a4 - #47b3a4 - green
#65c8e6 - blue
#65c8e6 - bright pink

#de23f2 - purple pink
*/


.inter-<uniquifier> {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.staatliches-regular {
  font-family: "Staatliches", sans-serif;
  font-weight: 400;
  font-style: normal;
}


html, body {
  overflow-x: hidden;
  scroll-behavior: smooth;
}



body{font-family: 'Inter', Sans-serif;    font-weight: 400;    font-style: normal; margin: 0; padding: 0; height: 100%;   }

h1 {margin-top: 10px;      font-family: "Oswald", sans-serif; font-weight: 600; font-size: 30px; line-height: 30px; text-align: center; }

h2 {font-size: 2.2em;  font-family: "Staatliches", sans-serif;  font-weight: 100;  line-height: 40px; }

h3 {font-size: 1.5em; font-family: "Staatliches", sans-serif;     font-weight: 200;  }

h4 {font-size: 1.2em; font-family: "Staatliches", sans-serif;     font-weight: 100; }

h5 {font-size: 1.2em; font-family: "Staatliches", sans-serif;   }

h6 {font-size: 1.2em;  font-family: "Staatliches", sans-serif;    }

p {font-family: 'Inter', Sans-serif;    font-weight: 400;   font-size: 1.2em;   font-style: normal;   ; }

img {max-width: 100%;  }  /*-Seems required to get images to fit into album boxes*/

/* **********LINKS *******************/
a:link {
  color:  inherit;
   text-decoration: none;
}

/* visited link */
a:visited {
  color:  inherit;
   text-decoration: none;
}

/* mouse over link */
a:hover {
  color:  #ffa7e4;
   text-decoration: none;
}

/* selected link */
a:active {
  color:  inherit;
}
 

/* **********  Settings for Horizontal and vertical  Lines   *******************/
 
 hr {width: 50%;						
    height:1px;
	background-color:#FFF;
	}
	
/* horizontal line which would use class long*/   
hr.long {width: 75%;
        height:2px;
		background-color:#772023;
	}
	
/* vertical line which runs alongside text*/  
.va {
  border-left: 6px solid lightgrey;
  height: 150px;
	}




/* ===================================================================
  For the dropdowns
   =================================================================== */


  .select-large {
    font-size: 1.25rem;         /* larger font */
    text-align: center;         /* center number text */
    padding: 0.6rem;            /* extra spacing inside */
    border-radius: 0.5rem;      /* nice rounded corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* soft shadow */
  }

  /* Center option text in some browsers (fallback) */
  select.select-large option {
    text-align: center;
  }


/* ===================================================================
  Background colour and font
   =================================================================== */
	

.colorbg1 {						/*use to change the background*/
background-color:#fff;
color:#000;
}

.colorbg2 {						/*use to change the background*/
background-color:#000;
color:#fff;
}

.colorbg3 {						/*use to change the background*/
background-color:#ffa7e4;
color:#000;
}

.colorbg4 {						/*use to change the background*/
background-color:#47b3a4;
color:#000;
}

.colorbg5 {						/*use to change the background*/
background-color:#65c8e6;
color:#000;
}



.standard{       
padding-top: 2rem;
padding-bottom: 2rem;
padding-left: 2rem;
padding-right:2rem;
text-align: center;
}


.standard1{       
padding-top: 4rem;
padding-bottom: 2rem;
padding-left: 0rem;
padding-right: 0rem;
text-align: left;
}

.standard2{       
padding-top: 8rem;
padding-bottom: 2rem;
padding-left: 0rem;
padding-right: 0rem;

}

.standard3{       
padding-top: 4rem;
padding-bottom: 2rem;
padding-left: 0rem;
padding-right: 0rem;

}



/* **********BUTTONS*************************************************************************************************************************************************/	
	
.discover-button {
    display: inline-block;
    font-family: 'Arial', sans-serif; /* Or any clean sans-serif font */
    font-weight: bold;
    text-transform: uppercase; /* Make text all caps */
    text-align: center;
    padding: 15px 40px; /* Adjust padding for size */
    font-size: 16px; /* Adjust font size */
    color: #000; /* Initial text color */
    text-decoration: none; /* Remove underline */
    background: #e58de0; /* Solid initial background */
    border: 1px solid #fff; 
    position: relative; /* Makes this element a stacking context */
    overflow: hidden; /* Ensures hover effect stays within bounds */
    transition: color 0.3s ease; /* Smooth transition for text color */
    z-index: 0; /* Ensure proper stacking */
}

.discover-button::before {
    content: '';
    position: absolute;
    top: 100%; /* Start below the button */
    left: 0;
    width: 100%;
    height: 100%;
    background: #42e5d0; /* Hover background color */
    z-index: -1; /* Push the hover effect behind the button content */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
}

.discover-button:hover::before {
    transform: translateY(-100%); /* Move the hover background into view */
}

.discover-button:hover {
    color: #000; /* Change text color on hover */
}

/* **********BUTTONS************************/	

.discover-button-small {
    display: inline-block;
    font-family: 'Arial', sans-serif; /* Or any clean sans-serif font */
 
    text-transform: uppercase; /* Make text all caps */
    text-align: center;
    padding: 15px 30px; /* Adjust padding for size */
    font-size: 12px; /* Adjust font size */
    color: #000; /* Initial text color */
    text-decoration: none; /* Remove underline */
    background: #356a2c; /* Solid initial background */
    border: 1px solid #fff; 
    position: relative; /* Makes this element a stacking context */
    overflow: hidden; /* Ensures hover effect stays within bounds */
    transition: color 0.3s ease; /* Smooth transition for text color */
    z-index: 0; /* Ensure proper stacking */
}

.discover-button-small::before {
    content: '';
    position: absolute;
    top: 100%; /* Start below the button */
    left: 0;
    width: 100%;
    height: 100%;
    background: #cbbba0; /* Hover background color */
    z-index: -1; /* Push the hover effect behind the button content */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
}

.discover-button-small:hover::before {
    transform: translateY(-100%); /* Move the hover background into view */
}

.discover-button-small:hover {
    color: #000; /* Change text color on hover */
}



/* ===================================================================
   1) Make sure the Swiper container and wrapper never clip an enlarged slide
   =================================================================== */
.multiSwiper,
.multiSwiper .swiper-wrapper {
  overflow: visible !important;
}

/* ===================================================================
   2) Center each slide’s <img> so scaling happens from the middle
   =================================================================== */
.multiSwiper .swiper-slide {
  display: flex;
  flex-direction: column;  /* stack children top → bottom */
  align-items: center;     /* center horizontally */
  overflow: visible;       /* don’t clip when we scale */
  transition: transform 0.3s ease;
  position: relative;      /* so z-index on .swiper-slide-active works */
}






/* ===================================================================
   3) Have every slide’s <img> fill its own slide box by default
      (we let transform:scale handle the “pop” later)
   =================================================================== */
.multiSwiper .swiper-slide img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ===================================================================
   4) When a slide becomes active, force it to scale from its exact center
      and raise its z-index so it sits on top of its neighbors
   =================================================================== */
.multiSwiper .swiper-slide-active {
  transform: scale(1.2) !important;           /* adjust 1.1 → 1.2 (etc.) as you like */
  transform-origin: center center !important; /* ensures equal growth on all sides */
  z-index: 10;                                /* must be higher than neighbors */
}

/* ===================================================================
   5) (Optional) White arrows/dots if you still want that styling
   =================================================================== */
.swiper-button-next,
.swiper-button-prev {
  color: #fff !important;
  fill: #fff !important;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  filter: brightness(0) invert(1);
  font-size: 32px !important;
}
.swiper-pagination-bullet {
  background: #fff !important;
  opacity: 0.5 !important;
}
.swiper-pagination-bullet-active {
  background: #fff !important;
  opacity: 1 !important;
}



.slide-caption {
  margin-top: 0.5rem;     /* adjust to taste */
  font-size: 0.9rem;        
  color: #FFF;            /* or whatever text color you prefer */
  text-align: center;     
}



/* more specific selector + !important to beat the generic one 

.fade-in.center .multiSwiper {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}
*/


.slider-clipper {
  position: relative;
  /* top inset: –20% → extend clip region 20% *above* the box
     right inset:   0   → no extension past right edge
     bottom inset: –20% → extend 20% *below*
     left inset:    0   → no extension past left edge */
  clip-path: inset(-20% 0 0% 0);
}


/* hover effects if yu want to use:*/
/*
.swiper-slide img {transition: transform 0.9s ease;}
.swiper-slide:hover img {transform: scale(1.3);}

*/



/* **********Accordion*************************************************************************************************************************************************/

/* ===================================================================
   Accordian used in FAQ Styling
   =================================================================== */


/* Accordion container (optional, adds overall structure) */
.accordion {
  background-color: #65c9e6
}

/* Accordion item with soft shadow */
.accordion-item {
  background-color: #65c9e6; /* Slightly lighter for contrast */
  border: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Soft shadow */
  margin-bottom: 0.75rem;
  border-radius: 0.35rem;
  overflow: hidden;
}


.accordion-button {
  font-size: 1rem;
  font-style: normal;
  border: none;
  box-shadow: none;
  color: #000 !important;
  background-color: #65c9e6; /* Match item bg */
  transition: all 0.2s ease;
  white-space: normal; /* Allows text wrapping */
  align-items: center; /* Fixes vertical spacing */
  line-height: 1.4; /* Adjust line height */
  padding-top: 0.75rem;  /* Reduce top padding slightly */
  padding-bottom: 0.75rem; /* Reduce bottom padding slightly */
}


/* Remove focus ring */
.accordion-button:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Expanded state */
.accordion-button:not(.collapsed) {
  background-color: #e8e6d5; /* Slightly darker for contrast */
}

/* Hover effect */
.accordion-button:hover {
  color: #65c9e6;
  background-color: #65c9e6; /* A gentle hover background */
}

/* Accordion body */

.accordion-body {
  text-align: left; /* Make sure the text is aligned to the left */
  padding: 1rem 1.25rem;
  background-color: #65c9e6;
  color: #000;
}


.accordion-button,
.accordion-body {
  font-family: 'Segoe UI', sans-serif; /* Replace with your preferred font */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}



.accordion-header {
  margin: 0 !important;
}



.transparent-background {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.3);
    padding: 25px;
    border-radius: 5px;
    border: 1px solid #e600ff; 
    box-shadow: 0 0 2px #e600ff, 0 0 3px #e600ff, 0 0 3px #e600ff;
    animation: pulse-neon 1s infinite alternate;
}


@keyframes pulse-neon {
    0% {
        box-shadow: 0 0 5px #e600ff, 0 0 5px #e600ff, 0 0 5px #e600ff;
    }
    100% {
        box-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff;
    }
}






/* Button Glow */
.btn-primary:hover {
    box-shadow: 0 0 10px #e4c841, 0 0 20px #e4c841, 0 0 30px #e4c841;
    transition: box-shadow 0.3s;
}


/* Base Neon Style for Dropdowns */


select.form-select {
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid #00eaff;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 5px #00eaff, 0 0 10px #00eaff;
    transition: all 0.3s ease;
}

select.form-select:focus,
select.form-select:hover {
    background-color: rgba(20, 0, 30, 0.85);
    box-shadow: 0 0 15px #ff00ff, 0 0 25px #ff00ff;
    border-color: #ff00ff;
    transform: scale(1.03);
}






/* **********NAVBAR*********************************************************************************************************************************************************/


@media (max-width: 575.98px) {
  .select-xs-fixed {
    width: 10ch;
  }
}

/* **********NAVBAR*********************************************************************************************************************************************************/

.navbar{ 
font-family: "Staatliches", sans-serif; 
font-size: 1.5em;
padding-bottom: 1px;
padding-top: 1px;
padding-left: 20px;
padding-right: 20px;
}


.navbar-custom {								/* Modify the background color of the navbar */
background-color:rgba(0, 0, 0, 0.3);
}


.navbar .navbar-nav .nav-item .nav-link { /*specifies the colour of nav-link which is contained in nav-item, nav and navbar*/
color:#fff;
}


.navbar .navbar-nav .nav-item .nav-link:hover { 
color:#ffa7e4;
}

.navbar-toggler {
color:#47b3a4;
color: #47b3a4 !important;	
border: 1px; /* Removes any default border */
    outline: none; /* Removes the focus outline */
 }
 
 .navbar-toggler-icon {
    background-image: 
        linear-gradient(#47b3a4), 
        linear-gradient(#ff00ff), 
       linear-gradient(#47b3a4); 
    background-size: 20px 2px; /* Width and height of each line */
    background-position: center, center, center;
    background-repeat: no-repeat;
    background-position: 50% 20%, 50% 50%, 50% 80%; /* Positioning of each line */
}
 
.navbar-toggler:focus {
    box-shadow: none; /* Optional: Removes the shadow that appears on focus */
}

 .navbar-custom:hover {
  background-color: rgba(0, 0, 0, 0.8); /* still semi-transparent, but easier to read */
}

.navbar-collapse.show {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.navbar-collapse {
  transition: padding 0.3s ease;
}


.card-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card-text {
  font-size: 0.95rem;
}



.price-highlight {
  color: #d63384; /* A bold pink highlight – Bootstrap's pink. Use your own if desired */
  font-weight: 600;
}


.price-tag {
  font-size: 1.5rem;
  color: #e68de0; /* Bootstrap pink – change to match your brand */
  font-weight: 600;
}
/* **********border***********************************************************************************************************************************************/


/* **********COVER_SCALE***********************************************************************************************************************************************/


 
span.blockspam {display: none;}

.fullscreen{min-height : 100vh;}
  
.image {
 display: block;
 width: 100%;
 height: auto;
}


.hero-image {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    z-index: 1; /* still behind the form */
    opacity: 0.5;
    pointer-events: none;
}




#cover-video {
  position: absolute; /* not fixed */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* ensures it stays behind content */
  color: #FFF;
}


/* Your Cover Section Styling */


#cover {
  padding-top:2rem;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  z-index: 0; /* safe lower layer */
  color: #FFF;
}

#cover h1,
#cover h2 {
  position: relative;   /* create a stacking context */
  z-index: 5;           /* anything >1 will float above the baby */
  color: #fff;          /* ensure fully opaque white text */
}


#filler{
background-color:#fff ;
color:#000;
position: relative;
text-align:center;
z-index: 4; /* this ensures it's above the -1 video layer */
}

#bar{
padding: 2px;
background-color:#00eaff;
background-size:cover;
align-items: center;
text-align: center;
position: relative;
z-index: 4; /* this ensures it's above the -1 video layer */
 }

/* Ensuring Form and Text are Above Video */
.container {
    position: relative;
    z-index: 2; /* Make sure the form and text appear above the video */
}


#footer{
padding-top: 4rem;
padding-bottom: 1rem;
padding-left: 1rem;
padding-right: 1rem;
background-color:#fff ;
color:#000;
position: relative;
text-align:center;
z-index: 4; /* this ensures it's above the -1 video layer */


}

#footerbottom{
padding:1rem 0;
background-color:#ffa7e4;
color:#000;
text-align:center;

}

#footerbottom {
  position: relative;
  z-index: 3; /* this ensures it's above the -1 video layer */
}


/* medium and up screens 992 and above */
@media (min-width: 992px) {

body{  text-align: center; font-weight: 400; height: 100%; }

h1 { margin-top: 10px; padding-top: 30px;  font-weight: 300; font-size: 60px;  line-height: 60px;  }
	
h2 { font-size: 2.0em;  font-weight: 200;  line-height: 40px; }

h3 { font-size: 1.5em;  font-weight: 500;  }

h4 { font-size: 1.4em; font-weight: 400;  }

h5 {font-size: 1.2em; }


 h6 {font-size: 1.2em;  font-family: "Staatliches", sans-serif;    }
   .standard{       
padding-top: 6rem;
padding-bottom: 6rem;
padding-left: 4rem;
padding-right:4rem;
text-align: center;
}

.standard2{       
padding-top: 4rem;
padding-bottom: 2rem;
padding-left: 0rem;
padding-right: 0rem;

}


.standard3{       
padding-top: 8rem;
padding-bottom: 8rem;
padding-left: 0rem;
padding-right: 0rem;

}


 
 #cover {
  padding-top: 4rem;

}

 
 
 }



/* large and up screens  1200 and above*/
@media (min-width: 1200px) {

body{ text-align: center; font-weight: 400; height: 100%; }

h1 { margin-top: 10px;  font-weight: 800; font-size: 90px;  line-height: 80px;  }
	
h2 { font-size: 2.0em;  font-weight: 200;  line-height: 50px; }

h3 { font-size: 2em; font-weight: 500;   }

h4 { font-size: 1.6em;   font-weight: 500;  }

h5 {font-size: 1.2em; }



h6 {font-size: 1.5em;  font-family: "Staatliches", sans-serif;    }


p {font-family: 'Inter', Sans-serif;    font-weight: 400;   font-size: 1.4em;   font-style: normal;   ; }

}


#cover {
  padding-top: 2rem;

}


/* large and up screens 1400 and above */
@media (min-width: 1400px) {
	
	
	
body{  text-align: center; font-weight: 400; height: 100%; }

h1 { margin-top: 10px;  font-weight: 800; font-size: 90px; line-height: 80px;  }
	
h2 { font-size: 60px;  font-weight: 600;   line-height: 100px; }

h3 { font-size: 2.0em;  font-weight: 400;   }

h4 { font-size: 1.8em;   font-weight: 600;  }

h5 {font-size: 1.6em;  font-weight: 500;  }

h6 {font-size: 1.2em;  font-weight: 500; }

img { max-width: 100%;  }  /*-Seems required to get images to fit into album boxes*/
	

#cover {
  padding-top: 12rem;

}
  

  .standard{       
padding-top: 8rem;
padding-bottom: 8rem;
padding-left: 6rem;
padding-right:6rem;
text-align: center;
}


.standard1{       
padding-top: 4rem;
padding-bottom: 2rem;
padding-left: 0rem;
padding-right: 0rem;
text-align: left;
}

.standard2{       
padding-top: 4rem;
padding-bottom: 2rem;
padding-left: 0rem;
padding-right: 0rem;

}
  
			
		
		
}