html {
  font-size: -moz-calc(4px + 0.45vw);
  font-size: -webkit-calc(4px + 0.45vw);
	font-size: calc(4px + 0.45vw);
}
body{
  background-color: #000;
}
a {
	text-decoration: none;
	color: #000;
}
*:focus {
  outline: 0;
  box-sizing: border-box;
}

.cd-slider {
	position: relative;
  background-color: #000;
	width: 100%;
	height: 50rem;
	overflow: hidden;
	margin-bottom: 8rem;
}
.cd-slider li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	transition: visibility 0s 1s;
  will-change: visibility;
}
.image {
	position: absolute;
	top: 0;
	left: 0;
	width: 70%;
 
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	clip: rect(0, 80rem, 50rem, 80rem);
	transition: clip .5s cubic-bezier(0.99, 0.01, 0.45, 0.9) .5s;
  will-change: clip;
}
.content {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	padding: 2rem 0 0 2rem;
	font-size: 9rem;
	text-align: right;
}
.content p {
	text-overflow: ellipsis;
	overflow: hidden;
  white-space: nowrap;

  background: -webkit-linear-gradient(#ffc800, #014e43);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	transform: translateY(-30%);
	opacity: 0;
 margin-top: 90px;
	transition: transform .5s, opacity .5s;
  will-change: transform, opacity;
}

li.current {
	visibility: visible;
	transition-delay: 0s;
}
li.current .image {
	clip: rect(0, 80rem, 50rem, 0);
}
li.current .content p {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 1s;
}

li.prev_slide .image {
	clip: rect(0, 0, 50rem, 0);
}
.navss {
	position: absolute;
	bottom: 0;
	right: 0;
	background: #fff;
	z-index: 2;
}
.prev, .next, .counter {
	vertical-align: middle;
}
.prev, .next {
	position: relative;
	display: inline-block;
	height: 5rem;
	width: 5rem;
  border: 0;
  cursor: pointer;
  background: transparent;
}

.counter {
	display: inline-block;
	font-size: 4rem;
	font-family: serif;
	font-style: italic;
}
.counter span:last-child::before {
	content: '/';
	margin: 0 1rem;
}
.prev:hover::after, .next:hover::after {
	width: 3.5rem;
}
@media screen and ( max-width: 550px ) {
	.image { width: 100%; }
	.content { padding-right: 2rem; }
	navss { left: 0; right: auto; }
}




.navbar{
    backdrop-filter: blur(10px);
    position: fixed;
  
    width: 100%;
    top: 0;
    z-index: 1000;
    
}

.navbar-toggler{
    color: #ffffff94;
    box-shadow: 1px 2px 8px rgb(20, 147, 0);
    /* border: 1px solid white; */
    border: none;
}

.navbar-toggler-icon{
    filter: invert(1);
    font-size: 20px;
}

.navbar-brand{
   color: #ffffff;
   font-size: 1.7rem; 
}


.nav-item span{
      background: -webkit-linear-gradient(#097203, #04b401);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.navbar-nav .nav-link {
  font-size: 1.7rem; 
  /* padding: 10px 18px;  */
  font-weight: 500;
}

.navbar {
  padding: 10px 30px; 
}

@media screen and (min-width:768px){
    .position-md-fixed{
        position: fixed;
       
    }
}

@media (max-width: 768px) {
  .navbar {
    padding: 10px 15px;
  }
}



.bts{
  border: none;
  background: transparent;
  color: #ffffff;
  box-shadow: inset 1px 2px 10px rgb(255, 255, 7);
}

.bto{
  border: none;
  background: transparent;
  color: #ffffff;
  box-shadow: inset 1px 2px 10px rgb(76, 100, 53);
}


.tablists {
  color: #007814;
}

.tablists:hover{
  color: #22b11f;
}






.style{
  border: none;
  box-shadow: 1px 2px 10px rgb(8, 85, 0);
   color: #f5f5f5;
   background: transparent;
   padding: 10px 18px;
   border-radius: 10px;
}



.ico .bi{
      background: -webkit-linear-gradient(#ffc800, #014e43);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



.login{
  background-color: #067b0077;
  color: #ffffff;
  box-shadow: inset 1px 2px 10px rgb(30, 255, 0);
}




.login-container {
  width: 300px;
  padding: 30px;
  
  text-align: center;
  background: linear-gradient(rgb(0, 77, 0) , black, black);
  color: aliceblue;
  border-radius: 20px;
  box-shadow: 2px 1px 10px rgb(9, 134, 22);
  
}

h2 {
  margin-bottom: 20px;
}




.input-box {
  margin: 10px 0;
  display: flex;
  border-bottom: 2px solid rgb(0, 106, 9);
}
.input-box i{
    margin-top: 10px;
}
input {
    background: transparent;
  width: 100%;
  padding: 10px;
  border: none;
  outline: none;
}

.forgot {
  text-align: right;
  font-size: 12px;
  color: gray;
  margin-bottom: 20px;
  cursor: pointer;
}

.login-btn {
  width: 100%;
  padding: 10px;
  border: none;
  color: white;
  background: transparent;
  border: 1px solid green;
  border-radius: 25px;
  margin-bottom: 20px;
  cursor: pointer;
}

.or {
  font-size: 14px;
  color: gray;
}

.social-icons i {
font-size: 20px;
padding: 10px;
 
  margin: 10px;
  border-radius: 50%;
 
  box-shadow: 1px 2px 10px rgb(16, 141, 0);
}

::placeholder{
  color: aliceblue;
}


.signup-link {
    margin-top:90px;
  font-size: 12px;
  color: gray;
}


    :root {
      --face-width: 300px;
      --face-height: 180px;
      --z-distance: 430px;
      --font-size: 1.5rem;
    }

    .carousel-container {
      perspective: 1000px;
      margin-top: 50px;
    }

    .carousel {
      position: relative;
      width: var(--face-width);
      height: var(--face-height);
      margin: 0 auto;
      transform-style: preserve-3d;
      animation: rotate360 60s infinite linear;
    }

    .carousel__face {
      position: absolute;
      width: var(--face-width);
      height: var(--face-height);
      top: 0;
      left: 0;
      background-size: cover;
      background-position: center;
      box-shadow: inset 0 0 0 2000px rgba(0,0,0,0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      color: white;
      font-size: var(--font-size);
    }

    .carousel__face:nth-child(1)  { background-image: url("image/m1.jpg"); transform: rotateY(0deg)   translateZ(var(--z-distance)); }
    .carousel__face:nth-child(2)  { background-image: url("image/m2.jpg"); transform: rotateY(40deg)  translateZ(var(--z-distance)); }
    .carousel__face:nth-child(3)  { background-image: url("image/m3.jpg"); transform: rotateY(80deg)  translateZ(var(--z-distance)); }
    .carousel__face:nth-child(4)  { background-image: url("image/m4.webp"); transform: rotateY(120deg) translateZ(var(--z-distance)); }
    .carousel__face:nth-child(5)  { background-image: url("image/m5.jpg"); transform: rotateY(160deg) translateZ(var(--z-distance)); }
    .carousel__face:nth-child(6)  { background-image: url("image/m6.jpg"); transform: rotateY(200deg) translateZ(var(--z-distance)); }
    .carousel__face:nth-child(7)  { background-image: url("image/m7.jpg"); transform: rotateY(240deg) translateZ(var(--z-distance)); }
    .carousel__face:nth-child(8)  { background-image: url("image/m8.jpg"); transform: rotateY(280deg) translateZ(var(--z-distance)); }
    .carousel__face:nth-child(9)  { background-image: url("image/m9.jpg"); transform: rotateY(320deg) translateZ(var(--z-distance)); }

    @keyframes rotate360 {
      from { transform: rotateY(0deg); }
      to   { transform: rotateY(-360deg); }
    }

    /* Responsive adjustments using Bootstrap breakpoints */
    @media (max-width: 576px) {
      :root {
        --face-width: 200px;
        --face-height: 120px;
        --z-distance: 260px;
        --font-size: 1rem;
      }
    }

    @media (min-width: 577px) and (max-width: 768px) {
      :root {
        --face-width: 250px;
        --face-height: 160px;
        --z-distance: 350px;
        --font-size: 1.2rem;
      }
    }

    @media (min-width: 769px) {
      :root {
        --face-width: 300px;
        --face-height: 180px;
        --z-distance: 430px;
        --font-size: 1.5rem;
      }
    }
  



    .intro{
        background: url(image/ma5.jpg);
        margin-top: 200px;
        background-repeat: no-repeat;
        background-size: cover;
        box-shadow: 1px 2px 10px rgb(6, 97, 26);
    }


.child{
    background: rgba(1, 83, 0, 0.273);
   
}

.child button{
    box-shadow: inset 1px 2px 20px #20c40ab8;
    border: none;
    background: transparent;
    color: #f5f5f5;
    padding: 10px 18px;
    border-radius: 6px;
}

       #content-box {
      padding: 50px;
      color: white;
      transition: background 0.5s;
      border-radius: 10px;
      min-height: 200px;
    }







    .card {
  overflow: hidden;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.card-img-top {
  height: 180px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover .card-img-top {
  transform: scale(1.1);
}

.btn-custom {
  background-color: #699a00;
  color: white;
  transition: background-color 0.3s ease;
  border: none;
}

.card:hover .btn-custom {
  background-color: #325601; 
}



.slider {
  position: relative;
  width: 100%;
  /* max-width: 1200px; */
  margin:70px auto;
  height: 87vh;
  padding: 50px 0px;
  background: #f5f5f5;
  box-shadow: 0 30px 50px #031f00;
  border-radius: 20px;
  overflow: hidden;
}


@media (max-width: 992px) {
  .slider {
    width: 100%;
    height: 50vh;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0;
  }

  .slide .item {
    width: 100%;
    height: 300px;
    left: 0 !important;
    transform: translate(0, 0) !important;
    top: auto;
    bottom: 0;
  }

  .slide .item:nth-child(n + 3) {
    display: none;
  }

  .item .contents {
    width: 90%;
    left: 5%;
  }

  .button {
    justify-content: center;
    left: 0;
    right: 0;
  }
}

.slider .slide .item {
  width: 200px;
  height: 250px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  border-radius: 20px;
  box-shadow: 10px 3px 30px #cbc0ff6d;
  background-position: 50% 50%;
  background-size: cover;
  display: inline-block;
  transition: all 0.5s;
}

.slide .item:nth-child(1),
.slide .item:nth-child(2) {
  top: 0;
  left: 0;
  transform: translate(0, 0);
  border-radius: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  transition: all .5s;
}

.slide .item:nth-child(3) {
  left: 50%;
}
.slide .item:nth-child(4) {
  left: calc(50% + 220px);
}
.slide .item:nth-child(5) {
  left: calc(50% + 440px);
}

.slide .item:nth-child(n + 6) {
  left: calc(50% + 660px);
  opacity: 0;
}
.item .contents {
  position: absolute;
  top: 50%;
  left: 100px;
  width: 300px;
  text-align: left;
  color: #ffffff;
  transform: translate(0, -50%);
  font-family: system-ui;
  display: none;
}

.slide .item:nth-child(2) .contents {
  display: block;
}

.contents .name {
  font-size: 40px;
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0;
  animation: animate 1s ease-in-out 1 forwards;
}

.contents .des {
  margin-top: 10px;
  margin-bottom: 20px;
  opacity: 0;
  animation: animate 1s ease-in-out 0.3s 1 forwards;
}

.contents button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  opacity: 0;
color: #ffffff;
  border-radius: 10px;
  background: transparent;
  box-shadow: 1px 2px 10px rgb(39, 121, 9);
  transition: all 0.5s;
  animation: animate 1s ease-in-out 0.6s 1 forwards;
}

.contents button:hover {
 background: transparent;
  color: #e3fbe2;
  box-shadow:inset 1px 2px 10px rgb(38, 134, 0);
}

@keyframes animate {
  from {
    opacity: 0;
    transform: translate(0, 100px);
    filter: blur(33px);
  }

  to {
    opacity: 1;
    transform: translate(0);
    filter: blur(0);
  }
}

.button {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  width: 100%;
  align-items: center;
  text-align: center;
  position: absolute;
  bottom: 20px;
}

.button button {
  width: 40px;
  height: 35px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  margin: 0 5px;
  box-shadow: 1px 2px 10px rgb(163, 255, 116);
  color: #1aff00;
  transition: 0.3s;
 
}

.button button:hover {
  color: #ddff87;
 box-shadow: 1px 2px 10px rgb(205, 255, 176);
  transform: scale(1.1);
}
.button button:focus {
  transform: scale(1.1);
  background: #00ac0073;
  border: 2px solid #22ff00;
}
.button button:active {
  transform: scale(1.02);
}
.next {
  padding: 0 0 0 3px;
}
.prev {
  padding: 0 3px 0 0;
}





.icon-1{
  color: #77c600;
}


   *,::before,::after{
  margin: 0;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
/* general styling */
html {
	color-scheme: dark light;
}
img{
  max-width: 100%;
}
/* Hide radio buttons */
input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.cards{
  --img-w: 200px;
  --duration: 300ms;
  --img-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  width: min(100% - 4rem, 800px);
  margin-inline: auto;
  display: grid;
  
  counter-reset: my-counter;
}

.cardo{
  --cards-grid-cols: auto;
  --cards-grid-rows: var(--img-w) auto;
  --cards-grid-gap: 2rem;
  --cards-footer-justify: center;
  
  grid-area: 1/1;
  display: grid;
 place-items: center; 
  grid-template-columns: var(--cards-grid-cols);
  grid-template-rows: var(--cards-grid-rows);
  gap: var(--cards-grid-gap);
  
}

@media (600px < width){
  .cardo{
      --cards-grid-cols: var(--img-w) auto;
      --cards-grid-rows: auto;
      --cards-grid-gap: 4rem;
      --cards-footer-justify: start;
  }
}


.card-img{
  width: 200px;
  height: 200px;
  aspect-ratio: 1 / 1 ;
  rotate: var(--angle, 0deg);
  border-radius: 10px;
  border: 3px solid #FFF;
  overflow: hidden;
  transform-origin: center;
  object-fit: cover;
  box-shadow: 0 0 5px 3px rgba(0 0 0 / .05);
}



input:nth-of-type(1):checked + .cardo ~ .cardo > .card-img{
  animation: straighten-img-1 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
.cardo:has(~input:nth-of-type(2):checked) > .card-img,
input:nth-of-type(2):checked + .cardo ~ .cardo > .card-img{
  animation: straighten-img-2 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
.cardo:has(~input:nth-of-type(3):checked) > .cardo-img,
input:nth-of-type(3):checked + .cardo ~ .cardo > .card-img{
  animation: straighten-img-3 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
.cardo:has(~input:nth-of-type(4):checked) > .card-img,
input:nth-of-type(4):checked + .cardo ~ .cardo > .card-img{
  animation: straighten-img-4 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
.cardo:has(~input:nth-of-type(5):checked) > .card-img,
input:nth-of-type(5):checked + .cardo ~ .cardo > .card-img{
  animation: straighten-img-5 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
.cardo:has(~input:nth-of-type(6):checked) > .card-img,
input:nth-of-type(6):checked + .cardo ~ .cardo > .card-img{
  animation: straighten-img-6 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
.cardo:has(~input:nth-of-type(7):checked) > .card-img,
input:nth-of-type(7):checked + .cardo ~ .cardo > .card-img{
  animation: straighten-img-7 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
/* as CSS can't remove animations, we change the animation according to which checkbox is checked  - all animations are the same (would be simpler with SCSS) */
@keyframes straighten-img-1 { 50%{ --angle: 0deg;} }
@keyframes straighten-img-2 { 50%{ --angle: 0deg;} }
@keyframes straighten-img-3 { 50%{ --angle: 0deg;} }
@keyframes straighten-img-4 { 50%{ --angle: 0deg;} }
@keyframes straighten-img-5 { 50%{ --angle: 0deg;} }
@keyframes straighten-img-6 { 50%{ --angle: 0deg;} }
@keyframes straighten-img-7 { 50%{ --angle: 0deg;} }


/* stacking order - these are updated according to which card is selected */
.cardo{
  z-index: -1;
}
input:checked + .cardo{
  z-index:10 !important;
}
/* next card checked - place behind */
.cardo:has(+input:checked){
  z-index:9;
}
/* next card +1 checked - place behind */
.cardo:has(+input + .cardo + input:checked){
  z-index:8;
}
/* next card +2 checked - place behind */
.cardo:has(+input + .cardo +input + .cardo + input:checked){
  z-index:7;
}
/* next card +3 checked - place behind */
.cardo:has(+input + .cardo +input + .cardo +input + .cardo + input:checked){
  z-index:6;
}
/* next card +4 checked - place behind */
.cardo:has(+input + .cardo +input + .cardo +input + .cardo +input + .cardo + input:checked){
  z-index:5;
}
/* next card +5 checked - place behind */
.cardo:has(+input + .cardo +input + .cardo +input +input + .cardo +input + .cardo +input + .cardo + input:checked){
  z-index:4;
}
/* next card +6 checked - place behind */
.cardo:has(+input + .cardo +input + .cardo +input  + .cardo +input +input + .cardo +input + .cardo +input + .cardo + input:checked){
  z-index:3;
}

.card-data{
  display: grid;
  gap: 1rem;
}
.card-data > .card-num{
  opacity: var(--data-opacity, 0);
  font-size: .8rem;
  color: #666;
}
.card-data > p{
  font-size: 0.9rem;

}
.card-data > h2,
.card-data > p{
  transition: var(--duration) ease-in-out;
  transition-delay: var(--data-delay,0ms);
  opacity: var(--data-opacity, 0);
  translate: 0 var(--data-y, 20px);
}
.card-data > footer{
  display: flex;
  justify-content: var(--cards-footer-justify);
  gap: 2rem;
}
.card-data > footer label{
  margin-block-start: auto;
  cursor: pointer;
  pointer-events: var(--card-events, none);
  opacity: var(--data-opacity, 0);
  transition: color var(--duration) ease-in-out;
  color: var(--label-clr-txt,#000);
  background-color:var(--label-clr-bg,#EEE);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  aspect-ratio: 1/1;
  display: grid;
  place-content: center;
  transition: background-color 300ms ease-in-out,color  300ms ease-in-out;
}


input:checked:focus-visible + .cardo > .card-data > footer label,
.card-data > footer label:hover{
  --label-clr-txt: #FFF;
  --label-clr-bg: steelblue;
}

input:checked + .cardo{
  --data-opacity: 1;
  --data-y: 0;
  --data-delay: var(--duration);
  --card-events: auto;
  transition: z-index;
  transition-delay: 300ms;
  /*z-index: 1;*/
}

input:checked +.cardo > .card-img{
  animation: reveal-img calc(var(--duration) * 2) forwards;
}

@keyframes reveal-img{
  50%{
    translate: -150% 0;
    --angle: 0deg;
  }
}

.footers{
  
  box-shadow: inset 1px 2px 30px rgb(30, 112, 0);
  color: #e2ffde;
  font-size: 30px;
}

.btbs{
  border: none;
  background: transparent;
  color:  #41ef01;
  border-bottom-right-radius: 30px;
  box-shadow: inset 1px 2px 10px rgb(76, 100, 53);
}

.btbs:hover{
  color:#5b8600 ;
}

.email{
  border-top-left-radius: 20px;
  background: transparent;
  box-shadow:inset 1px 2px 10px rgb(76, 100, 53);
  border: none;
}

::placeholder{
  color: #ffffff;

}