/*textcolor=#ceb78a*/
/*primarycolor=#ceb78a*/
/*secondarycolor=#2f9a28*/


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
}

/* Glass Card for Slide */
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    padding: 30px 40px;
    color: #fff;
    width: 350px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.registration-slide h2 {
    text-align: center;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px #fff;
    background : #fff;
    opacity : 0.5;
}

/* Glass Inputs */
.glass-input {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 15px;
    color: #fff;
    width: 100%;
    margin-bottom: 20px;
    outline: none;
}

.glass-input:focus {
    border: 1px solid #00ffcc;
}

/* Glass Buttons - Visible and Elegant */
.glass-btn {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 25px;
    color: #2f9a28; /* Keep white for elegance */
    font-weight: 600;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* subtle shadow for contrast */
    text-shadow: 0 1px 2px rgba(0,0,0,0.4); /* make text pop */
    margin: 5px 0;
}

.glass-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* Accordion container */
.accordion {
  width: 100%;
  margin-top: 10px;
}

/* Accordion button */
.accordion-btn {
  background: rgba(206, 183, 138, 0.15);
  color: #ceb78a;
  font-weight: 600;
  border: none;
  padding: 12px 16px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.3s, transform 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-btn:hover {
  background: rgba(206, 183, 138, 0.35);
  transform: scale(1.01);
}

/* Optional: “+ / –” icon rotation */
.accordion-btn::after {
  content: "+";
  font-weight: bold;
  transition: transform 0.3s ease;
}

.accordion-btn.active::after {
  content: "–";
  transform: rotate(180deg);
}

/* Accordion content area */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid #ceb78a;
  margin-top: 4px;
  border-radius: 6px;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 16px;
}

.accordion-content.open {
  max-height: 500px; /* adjust as needed */
  padding: 10px 16px;
}

/////////////////////

/* Registration Navigation Container */
.registration-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    width: 100%;
}

html {
  scroll-behavior: smooth;
}
body {
    overflow-y: scroll; /* prevents Chrome layout shift when flashes appear */
}

 /* Flash messages CSS */
        #flash-container {
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            width: auto;
            max-width: 90%;
        }
        .flash-wrapper {
            margin-bottom: 10px;
        }
        .flash {
            padding: 12px 20px;
            border-radius: 5px;
            color: #fff;
            font-weight: bold;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            opacity: 0;
            transform: translateY(-20px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        .flash-success { background-color: #28a745; }
        .flash-error { background-color: #dc3545; }

.header#registration {
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: center;     /* vertical centering */
    min-height: 100vh;
    padding: 0; /* remove padding that offsets centering */
}

/* Slider */
.registration-slider {
    margin: 0 auto; /* center horizontally */
    padding-top: 0; /* removed old padding */
    position: relative;
    border-radius: 12px;
    box-shadow : 0 .5rem .5rem #244c21;
    overflow: hidden;
    border: 1px solid #ceb78a;
    justify-content: center;
    max-width: 500px; /* responsive max width */
    padding: 0 20px; 
}

/* Slides */
.registration-slider .registration-slide {
    width: 100%;
    display: none;
    padding: 10px;
    min-width: 400px;
}

.registration-slider .registration-slide.active {
    display: block;
}

/* Headings */
.registration-slider h2 {
    color: #2f9a28;
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Input boxes */
.registration-slider .inputBox {
    position: relative;
    margin: 20px 0;
}

.registration-slider .inputBox input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    color: #121212;
    border: none;
    border-bottom: 2px solid #ceb78a;
    outline: none;
    background: #2f9a284a;
    transition: 0.3s;
}

.registration-slider .inputBox label {
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 16px;
    color: #ceb78a;
    pointer-events: none;
    transition: 0.3s;
}

.registration-slider .inputBox input:focus ~ label,
.registration-slider .inputBox input:valid ~ label {
    top: -20px;
    color: #ceb78a;
    font-size: 12px;
}

.registration-slider .inputBox input:focus {
    border-bottom: 2px solid #2f9a28;
}

/* Buttons */
.registration-slider .btn-container {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.registration-slider .nav-btn {
    padding: 10px 25px;
    background: #2f9a28;
    color: #ceb78a;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.registration-slider .nav-btn:hover {
    background: #ceb78a;
    color: #2f9a28;
    transform: translateY(-3px);
}

.registration-slider .nav-btn.prev {
    background: transparent;
    border: 2px solid #ceb78a;
    color: #ceb78a;
}

/* Navigation links */
.registration-slider .registration-navigation {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding : 10px 0;
}

.registration-slider .registration-navigation .btn {
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    cursor: pointer;
    color: #fff;
    transition: 0.3s;
    border : solid 2px #ceb78a;
}

.registration-slider .registration-navigation .btn.active {
    background: #2f9a28;
    color: #fff;
}

/* Error messages */
.registration-slider .error-message {
    color: #ff6b6b;
    font-size: 12px;
    margin-top: 5px;
    display: none;
}

.registration-slider input.invalid {
    border-color: #ff6b6b !important;
}

.header{
    min-height: 100vh;
    width: 100%;
    background-position: center;
    background-size: cover;
    position: relative;
}
.header2{
    min-height: 100vh;
    width: 100%;
    position: relative;
    margin : 0;
}

a{
  text-decoration : none;
  color: #ceb78a;
}
.header .img-slider{
    position : relative;
    background : #1D212B;
    min-height: 100vh;
    width : 100%;
}

.header .img-slider .slide{
    z-index : 1;
    position : absolute;
    width : 100%;
    clip-path: circle(0% at 0 50%);
}

.header .img-slider .slide.active{
    clip-path: circle(150% at 0 50%);
    transition: 1s;
    transition-property: clip-path;
}

.gradient{
    z-index : 3;
    max-height: 100vh;
    width: 100%;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.431), rgba(0,255, 183, 0.427));
    position: absolute;
    top: 0;
    left: 0;
}

.slide {
    position: relative; /* ensure overlay is positioned correctly */
}

.slide .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1D212B; /* your filter color #113825*/
    opacity: 0.5; /* adjust darkness (0 = transparent, 1 = solid) */
    pointer-events: none; /* allows clicking through to text if needed */
    z-index: 2;
}

.slide .info {
    position: relative; /* make sure text stays above overlay */
    z-index: 2;
}

.header .img-slider .slide img{
    z-index : 1;
    width : 100%;
    max-height: 100vh;
    object-fit: cover;
    border-radius : 5px; 
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7));
    
}
.carousel img,
.carousel video {
    border-radius: 10px;
}
.header .img-slider .slide .info{
    position : absolute;
    top : 0;
    padding : 77px 30px;
   /* margin-top : 70px;*/
}

.header .img-slider .slide .info h2{
    color : #fff;
    font-size : 45px;
    text-transform : uppercase;
    font-weight : 800;
    letter-spacing : 2px;
}

.header .img-slider .slide .info p{
    color : #fff;
    background: #2f9a28;
    box-shadow: 0 .5rem .5rem #244c21;
    opacity: 0.9;
    font-size : 22px;
    width : 60%;
    padding : 10px;
    border-radius : 4px;
}

.header .img-slider .slide p img{
     width: 50%;
     height : 50%;
}

.header .img-slider .navigation{
    z-index : 2;
    position : absolute;
    display : flex;
    bottom : 30px;
    left : 50%;
    transform : translateX(-50%);
}
.header .img-slider .navigation .btn{
    background : rgba(255, 255, 255, 0.5);
    margin : 10px;
    cursor : pointer;
    color : #1D212B;
}

.header .img-slider .navigation .btn.active{
    background : #2f9a28;
    box-shadow : 0 0 2px rgba(0, 0, 0, 0.5);
    color: #fff;
}
.float{
	position:fixed;
	width:50px;
	height:50px;
	bottom:100px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
    font-size:20px;
	box-shadow: 2px 2px 3px #999;
    z-index:100;
}

.my-float{
	margin-top:16px;
}



.active a{
  background : #ceb78a;
  color:#fff;
  border: 1px solid #fff;
  padding : 0 4px;
}

.logo {
  display : absolute;
  color : white;
  background : #ceb78a;
}
.logo img {
  border-top: #ceb78a 2px solid;
  border-bottom: #ceb78a 2px solid;
}

/*Navigator*/
.gototopbtn{
  position : fixed;
  width : 50px;
  height : 50px;
  background : #2f9a28;
  bottom : 40px;
  right : 40px;
  opacity : 0.5;
  text-align : center;
  line-height : 50px;
  color : white;
  font-size : 14px;
}

.gototopbtn:hover{

  opacity : 1;
}

.navbar{
  position : fixed;
  top : 0;
  left : 0;
  display : flex;
  width : 100%;
  justify-content: space-between;
  padding: 20px;
  color : #ceb78a;
	box-shadow : 0 .5rem .5rem #244c21;
  z-index : 1000;
  background : #2f9a28;
  opacity: 0.9;
}
.color{
  color : #2f9a28;
}
/*.navbar{
  position : absolute;
  top : 0;
  left : 0;
  display : flex;
  width : 100%;
  justify-content: space-between;
  padding: 20px;
  color : #ceb78a;
}*/

.nav-links {
  display : flex;
  align-items : center;
}

.nav-links li{
  margin : 0 30px;
}

ul {
  list-style : none;
}



body, html {
  overflow-x : hidden;
}

header{
  width : 100vw;
  height : 100vh;
  background : #ceb78a;
  /*background-image : url('../media/assets/images/cover.webp');*/
  background-position : bottom;
  background-size : cover;
  display : flex;
  align-items: flex-end;
  justify-content: center;
	
}

.header-content {
  margin-bottom : 150px;
  color : #ceb78a;
  text-align: center;
}

.header-content h2{
  /*font-size : 4vmin;*/
}

.line{
  width : 150px;
  height : 4px;
  background : #ceb78a;
  margin : 10px auto;
  border-radius : 5px;
}

.header-content h1{
  font-size : 7vmin;
  margin-top : 50px;
  margin-bottom : 30px;
  color: #ceb78a;
  background : #ceb78a;
}

.formBox .box h1{
  margin-bottom : 30px;
  color: #fff;
  background : #ceb78a;
   box-shadow : 0 .5rem .5rem #244c21;
}.formBox .box b{
    display : inline-block;
   position: relative;
   width : 90%;
  z-index : 3;
}

.ctn{
  display : inline-block;
  padding : 8px 15px;
  background : #2f9a28;
  border-radius : 30px;
  color : #ceb78a;
  margin-top :10px;
  cursor : pointer;
  font-weight: bold;
}
.ctn:hover{
  background : #ceb78a;
  color : #2f9a28;
}

.ctn2{
  display : inline-block;
  padding : 8px 15px;
  background : #ceb78a;
  border-radius : 30px;
  color : #fff;
  margin-top :10px;
  cursor : pointer;
  font-weight: bold;
}

.menu-btn {
  position: absolute;
  top : 0px;
  right : 0px;
  /*width : 40px;*/
  cursor : pointer;
  display : none;
  font-size : 12px;
}

section {
  width : 100%;
  /*margin : 40px auto;*/
}

/*.row {
  display : flex;
  align-items : center;
  width : 100%;
  justify-content : space-between;
}

.row .col {
  display : flex;
  flex-direction : column;
  align-items : center;
}*/



.events img{
  height : 30rem;
  object-fit : fill;
  transition : all 0.5s ease;

  /*max-width: 100%;*/
  max-height: 100%;
  display: block;
}

.formBox:nth-child(even){
  /*background:#eee;*/
}

.formBox {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr));
    justify-content: center; /* centers the grid items horizontally */
    gap: 2.5rem;
    margin: 10px auto;       /* centers the entire formBox itself */
    width: 100%;
    max-width: 1200px;       /* optional: prevent it from stretching too wide */
}

.box.inBox.glass-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* keeps alignment consistent */
  padding: 1rem;
}

.formBox .box h4{
    
    background : #fff;
  /*display: block;
  padding: .5rem 0;
  font-size : 1.5rem;
  color : #ceb78a;*/
}

.formBox .box:hover{
  opacity: 1;
}

.events h2{
    color : #fff;
    font-size : 25px;
    text-transform : uppercase;
    font-weight : 800;
    letter-spacing : 2px;
}
.events p{
    text-align : left;
    color : #fff;
    background: #2f9a28;
    box-shadow: 0 .5rem .5rem #244c21;
    opacity: 0.9;
    font-size : 18px;
    /*width : 60%;*/
    padding : 6px;
    margin-bottom : 10px;
    border-radius : 4px;
}
.input-box span{
  color : #ceb78a;
}


#display-lessons{
  opacity: 0.3;
}

.formBox .box{
  padding : 2rem;
  /*background : #fff;*/
  border-radius : .5rem;
  box-shadow : 0 .5rem .5rem #244c21;
  position : relative;
  text-align : center;
  padding:10px 0;
}
.formBox .box licc{
    background-color : transparent;
    backdrop-filter : blur(40px);
    padding : 5px;
}


.events .row{
  margin-top : 50px;
}

body>section:nth-child(odd){
  /*background-color : #ceb78a;*/
  padding : 20px;
  border-top : #ceb78a 2px solid;
}

.events .row {
  margin-top : 50px;
}

h4 {
  display : block;
  color : #ceb78a;
  margin : 20px auto;
}

p {
  color : #7c7c7c;
  padding : 0px 40px;
  display : inline-block;
  padding : 10px;
  
}

.title {
  text-align : center;
  font-size : 4vmin;
  color : #4949te;
}


.img {
  height : 130px;
  width : 130px;
  margin-bottom : 14px;
  background : #ceb78a;
  padding : 3px;
  border-radius : 50%;
  align-content : center;
  margin : 0 auto;
}

.img img{
  height : 100%;
  width : 100%;
  object-fit : cover;
  background : #fff;
  border-radius : 50%;
  border : 3px solid #fff%;
}

.wrapper {
    
  display: flex;
  max-width: 650px;
  width: 100%;
  /*height: 400px;*/
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}


/////////////////////////
/* Carousel container */
.image-container {
  position: relative;
  width: 100%;
  height: 220px; /* adjust this value as desired */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.05);
  border-radius: 12px;
  margin-bottom: 10px;
}
/* Make sure images fit properly */
.image-container img,
.image-container video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}

.image-container .button {
  position: absolute;
  top: 0;              /* align to top of container */
  height: 100%;        /* full height of image */
  width: 40px;         /* button width */
  display: flex;       /* use flexbox */
  align-items: center; /* vertical centering */
  justify-content: center; /* horizontal centering */
  background: rgba(206, 183, 138, 0.25); /* soft gold tint */
  color: #ceb78a;
  font-weight: bold;
  border: none;
  border-radius: 0;    /* optional: remove circle radius if full height */
  font-size: 24px;     /* adjust as needed */
  cursor: pointer;
  transition: all 0.1s ease; /* faster transition */
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* Left button */
.image-container .button#prev {
  left: 0px;
}

/* Right button */
.image-container .button#next {
  right: 0px;
}

/* Hover effect */


/* Make sure carousel images don’t overlap buttons */
.carousel {
  position: relative;
}
//////////////////////////

.image-container .carousel {
  text-align: center;
  height: 100%;
  width: 100%;
  /*transition: all 0.4s ease;*/
}


#overlay {
  overflow : scroll;
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

#text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  
}


/*primarycolor=#ceb78a*/
/*secondarycolor=#2f9a28*/
  section .container .contactForm {
      position : relative;
      background : #fff;
      margin-left : 150px;
      padding-left : 250px;
      width : calc(100% -100px);
      height : 100%;
      box-shadow : 0 50px 50px rgba(0, 0, 0, 0.5);

      text-align : center;
    }
    section .container .contactForm h2{
      color : #0f3959;
      fornt-weight : 500;
    }


    section .container .contactForm .formBox .inputBox{
      position : relative;
      margin : 0 0 35px 0;
      padding : 0 20px;
    }

    section .container .contactForm .formBox .inputBox.w50{
      width : 47%;
    }

    section .container .contactForm .formBox .inputBox.w100{
     width : 100%;
    }

    section .container .contactForm .formBox .inputBox input,
    section .container .contactForm .formBox .inputBox textarea{
      width : 100% !important;
      padding : 5px 20px;
      resize : none;
      font-size : 18px;
      font-weight : 300;
      color : #333;
      border : none;
      border-bottom: 1px solid #ceb78a;
      color : #2f9a28;
      outline : none;
    }

    section .container .contactForm .formBox .inputBox textarea{
      min-height : 120px;
    }

    section .container .contactForm .formBox .inputBox span{
      position : absolute;
      left : 0;
      padding : 5px 20px;
      resize : none;
      font-size : 18px;
      font-weight : 300;
      color : #333;
      transition : 0.3s;
      pointer-events : none;
      color : #2f9a28;
    }

    section .container .contactForm .formBox .inputBox input:focus ~ span,
    section .container .contactForm .formBox .inputBox textarea:focus ~ span,
    section .container .contactForm .formBox .inputBox input:valid ~ span,
    section .container .contactForm .formBox .inputBox textarea:valid ~ span{
      transform : translateY(-20px);
      font-size : 12px;
      font-weight : 400;
      letter-spacing : 1px;
      color : #2f9a28;
    }

    section .container .contactForm .formBox .inputBox input[type="submit"]{
      position : relative;
      cursor : pointer;
      background : #ceb78a;
      color : #fff;
      border : none;
      max-width : 150px;
      padding : 12px;
    }
    section .container .contactForm .formBox .inputBox input[type="submit"]:hover{
      background : #ceb78a;
    }
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  background-size : cover;
  justify-content: center;
}

  .rating {
    display: inline-block;
    font-size: 0;
    position: relative;
    text-transform: capitalize;
    padding: 0 50px 8%;
    color: gray;
  }
    
  .rating label {
    float: right;
    padding: 0;
    font-size: 50px;
    cursor: pointer;
  }   
  .rating label::before {
    content: "\2606";
    padding-bottom: 8px;
    display: inline-block;
    transition: 0.2s;
  } 
  .rating span {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    height: 20px;
    font-size: 1rem;
    white-space: nowrap;
    transition: 0.15s ease-out;
    pointer-events: none;
    letter-spacing: -2px;
    transform: translateY(-50%);
  } 
  .rating label:hover span {
    opacity: 1;
    transform: none;
    letter-spacing: 0;
  }
  .rating input:checked ~ label::before {
    content: "\2605";
    color: orange;
    filter: drop-shadow(0 0 4px);
    transform: rotate(.2turn);
    transition-delay: calc(0.1 * attr(data-idx integer));
  }
  
/*Mobile device*/
@media screen and (max-width:820px){=
   

    .header .img-slider{
        /*height : 375px;*/
    }
    
    .header .img-slider .slide .info{
        padding : 10px 25px;
    }
    
    .header .img-slider .slide .info h2{
        font-size : 35px;
    }
    .header .img-slider .slide .info p{
        font-size : 16px;
        width : 70%;
    }
    .header .img-slider .navigation{
        bottom : 25px;
    }
    .header .img-slider .navigation .btn{
        
        margin : 8px;
    }

  section {
    width : 100%;
    margin : 0 auto;
  }
  .gototopbtn{
		background : #2f9a28;
    bottom : 0;
    right : 0;
    opacity : 0.8;
  }
    .float{
        width:50px;
    	height:50px;
    	bottom:60px;
    	right:0px;
    }
  .navbar{
    opacity : 1;
    z-index : 1000;
  }
  .events img{
    height : 15rem;
    width : 100%;
    object-fit : fill;
  }
  .formBox .box{
    opacity: 1;
    margin:0;
    padding:0;
    width : 100%;
  }

  .menu-btn {
    display : block;
  }


    .formBox{
        display : grid;
        grid-template-columns : repeat(auto-fit, minmax(15rem, 1fr));
        gap: 0.9rem;
        margin : 0 auto;
        width: 100%;
    }
  .navbar{
    padding:0;
  }
  
  .wrapper {
    display: flex;
    max-width: 650px;
    width: 100%;
    height: 200px;
    clear : both;
  }

  .logo{
    position: absolute;
    top : 0;
    left : 0;
  }

  .nav-links {
    flex-direction : column;
    width : 100%;
   /*height : 100vh;*/
    justify-content: center;
    background: #ceb78a;
    margin-top : -900px;
    transition : all 0.5s ease;
    opacity : 1;
  }

  .mobile-menu {
    margin-top : 0px;
    border-bottom-right-radius : 50%;
    width : 100%;
  }
  .nav-links li{
    margin:10px auto;

  }
	
  .nav-links li a{
    color : #2f9a28;

  }
  .box h1{
    width : 100%;
  }

      section .container .contactForm .formBox .inputBox{
      padding : 0 ;
    }
    section .container .contactForm .formBox .inputBox input,
    section .container .contactForm .formBox .inputBox textarea{
      padding : 5px 0;
    }


    section .container .contactForm .formBox .inputBox span{
      padding : 5px 0;
    }
    .registration-slider {
        margin : 0;
   }
   
   .registration-slider .registration-slide {
        width: 100%;
   }
}

@media screen and (max-width:820px){
    .container {
        padding : 50px 0;
    }
    .header .img-slider .slide img{
        /*display : none;*/
        min-height: 100vh;
    }
    .header .img-slider{
        /*height : 375px;*/
    }
    
    .header .img-slider .slide .info{
        padding : 10px 25px;
    }
    
    .header .img-slider .slide .info h2{
        font-size : 35px;
    }
    .header .img-slider .slide .info p{
        font-size : 16px;
        width : 70%;
        height : 20%;
    }
    
    
    .header .img-slider .navigation{
        bottom : 25px;
    }
    .header .img-slider .navigation .btn{
        
        margin : 8px;
    }
}
@media screen and (max-width:620px){
    
    .header .img-slider{
        /*height : 100vh;*/
    }
    .header .img-slider .slide .info img{
        width: 100%;
        min-height: 40vh;
        object-fit: fill;
    }
    .header .img-slider .slide .info{
        padding : 10px 25px;
    }
    
    .header .img-slider .slide .info h2{
        font-size : 30px;
    }
    .header .img-slider .slide .info p{
        font-size : 13px;
        width : 80%;
    }
    .header .img-slider .navigation{
        bottom : 15px;
    }
    .header .img-slider .navigation .btn{
        
        margin : 6px;
    }
}

@media screen and (max-width:420px){
    
    .header .img-slider{
        /*height : 200px;*/
    }
    
    .header .img-slider .slide .info{
        padding : 5px 10px;
    }
    
    .header .img-slider .slide .info h2{
        font-size : 25px;
    }
    .header .img-slider .slide .info p{
        font-size : 11px;
        width : 90%;
    }
    .header .img-slider .navigation{
        bottom : 10px;
    }
}