*,
 *::before,
 *::after {
     box-sizing: border-box;
}
/* 2. Remove default margin */
* {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 3. Smooth Scroll */
  html, body {
  scroll-behaviour: smooth;
  overflow-x : clip;
  
}
/* Typographic tweaks! 4. Add accessible line-height 5. Improve text rendering */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* 6. Improve media defaults */
  img,svg,video,picture {
  max-width: 100%;
  height: auto;
}
/* 7. Remove built-in form typography styles */
input, button, textarea, select {
  font: inherit;
}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* todo header */
.header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
    background-color: #F7CA4D;
    padding-bottom: 1rem;
}
/*todo navigation */
.navigation {
    /* display: grid; */
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    background-color: #222222;
}
.nav-wrapper {

    /* background-color: #222222; */
    max-width: 700px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;

}

/* BG Cover */
.bgcover {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: center;
    align-content: center;
    text-align: center;
    margin-bottom: 1rem;
}


/* todo  fifty fifty */
.fifty {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    align-items: center;
    align-content: center; 
    margin-bottom: 1rem;
    gap: 1rem;
    margin-top: 1rem;
    background-color: #f8f8fa;
}
.left {
    padding: 1rem;
    
}
.right {
    padding: 1rem;
    
}

/* todo full width */
.full {
    display: grid;
    padding: 1rem;
    background-color: white;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/* todo four boxes */
.four {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    background-color: white;
    gap: 1rem;
}
.bx1 {
    padding: 1rem;
    background-color: white;
    text-align: center;
    
}
.bx2 {
    padding: 1rem;
    text-align: center;
    background-color: white;
}
.bx3 {
    padding: 1rem;
    text-align: center;
    background-color: white;
}
.bx4 {
    padding: 1rem;
    text-align: center;
    background-color: white;
}

.footer {
    display: grid;
    grid-template-columns: 1fr;
    padding: 1rem;
    text-align: center;
    background-color: #222222;
    color: white;
}

/* todo Bg Backgrounds */

.overlay {
    border-image: linear-gradient(hsla(66, 78%, 70%, 0.356), hsla(61, 28%, 54%, 0.363))
    fill 1;
}
.hero {
     background-image: url(../images/head_new1.webp);
     background-size: cover;
     background-repeat: no-repeat;
     min-block-size: 80vh;
     place-content: center;
     text-align: center;
}


/*font UI */
h1 {font-size: clamp(1.5625rem, 1.2887rem + 1.369vw, 3rem);
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}
	
	
	/*H2
	Min      Std      Max
	20px              38px*/
	h2 {font-size: clamp(1.25rem, 1.0357rem + 1.0714vw, 2.375rem);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-bottom: 15px;}
	
	
	/*H3
	Min      Std      Max
	18px              30px */
	h3 {font-size: clamp(1.125rem, 0.9821rem + 0.7143vw, 1.875rem);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        margin-bottom: 15px;
    
    }
	
	
	/*H4
	Min      Std      Max
	18px              26px*/
	h4 {font-size: clamp(1.125rem, 1.0298rem + 0.4762vw, 1.625rem);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
	
	
	/*P 
	Min      Std      Max 
	16px              20px*/
	p {font-size: clamp(1rem, 0.9524rem + 0.2381vw, 1.25rem);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-bottom: 10px;}


/* table booking */
/*todo table styles */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    border: none;
    text-align: left;
    padding: 8px;
    /* font-size: 10px; */
}
tr:nth-child(even){
    background-color: #f2f2f2;
}

/*todo accordian */
 /*todo accordian*/
 button.accordion {
    background-color: #c4c1c1;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ccc; 
}

div.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

/*todo back to top */
.cd-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 40px;
    right: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    /* image replacement properties */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: #222222 url("../images/cd-top-arrow.svg") no-repeat center 50%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
  }
  .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s;
  }
  .cd-top.cd-is-visible {
    /* the button becomes visible */
    visibility: visible;
    opacity: 1;
  }
  .cd-top.cd-fade-out {
    /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
    opacity: .5;
  }
  .no-touch .cd-top:hover {
    background-color: #F29E92;
    opacity: 1;
  }
  @media only screen and (min-width: 768px) {
    .cd-top {
      right: 20px;
      bottom: 20px;
    }
  }
  @media only screen and (min-width: 1024px) {
    .cd-top {
      height: 60px;
      width: 60px;
      right: 30px;
      bottom: 30px;
    }
  }
  
  /*todo fade in 2025 code */
  @keyframes appear {
    from {
    opacity: 0;
    scale: 0.5;
    /*transform:translateX(-100px);*/
    /*clip-path: inset(100% 100% 0 0); */
    }
    to {
    opacity: 1;
    scale: 1;
    /*transform:translateX(0px); */
    /*clip-path: inset(0 0 0 0); */
    }
    }
    
    
    /* the class given to each element */
    
    .element {
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
    }

    button {
        padding: 0.6rem;
        background-color: #F7CA4D;
        font-size: 15px;
    }
    button:hover {
        background-color: black;
        color: white;
        transition-duration: 0.4s;

    }
/*todo MEDIA */

/* MOBILE MEDIA QUERIES Nexus 7 Android landscape */

@media screen and (max-width: 966px) {

/* todo  fifty fifty */
.fifty {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: center;
    align-content: center; 
    margin-bottom: 1rem;
    gap: 1rem;
}

/* todo four boxes */
.four {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    background-color: white;
    gap: 1rem;
}

}



@media screen and (max-width: 605px) {

.hero {
    background-image: url(../images/head_new1.webp);
    background-size: cover;
    background-repeat: no-repeat;
    min-block-size: 50vh;
    place-content: center;
    text-align: center;
}
.four {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    background-color: white;
    gap: 1rem;
}
th, td {
    border: none;
    text-align: left;
    padding: 8px;
    font-size: 10px;
}


}