body{
    background-color: white;
    margin: 0;
    padding: 0;
}
.first{
    justify-content: center;
    text-align: center;
    font-family: sans-serif;

}
.first img{
    width: 100px;
    margin-top: 20px
}
.first h1{
    margin-top: 0px;
}
.al{
    font-family: sans-serif;
    font-size: 28px;
}
.first p{
    margin-top: -4px;
    font-size: 20px;
    color: black;
}
.ap{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
}
.b{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.b img{
    width: 250px;
    border-radius: 28px;
}
.b img:hover{
    transform: scale(1.080);
    transition: 0.6s ease-in-out;
}
.b div{
    display: grid;
}
.b p{
    font-family: sans-serif;
    font-size: 20px;
    margin-top: -10px;
    margin-left: 10PX;
}
.b h2{
    font-family: sans-serif;
    margin-left: 10PX;
}
.hr{
    padding: 4px;
    background-color: rgb(3, 231, 60);
    border: none;
}
.c{
    display: flex;
    justify-content: center;
    margin-top: -25px;
}
.back{
    display: grid;
    justify-content: center;
    align-items: center;
    width: 200%;
    background-image: url(Blurred\ offcie.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    margin: 0;
}
.text{
    margin: auto;
}
.text h1{
    font-size: 3.2rem;
    font-weight: bold;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	margin-top: -19px;
}
.text p{
    font-size: 22px;
    margin-top: -30px;
    font-family: sans-serif;
}
.btn{
    margin: auto -6px;
    margin-top: -120px;
}
.btn button{
    background-color: #1f6395;
    color: white;
    text-align: center;
    border: none;
    width: 160px;
    padding: 15px;
    margin: 10px;
    cursor: pointer;

}
.btn a{
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-family: sans-serif;
}

.samp{
	display: grid;
}
main#carousel {
	grid-row: 1 / 2;
	grid-column: 1 / 8;
	width: 50vw;
	height: 200px;
	/* display: flex; */
	/* align-items: center; */
	justify-content: center;
	overflow: hidden;
	transform-style: preserve-3d;
	perspective: 600px;
	--items: 5;
	--middle: 3;
	--position: 1;
	pointer-events: none;
  }
  
  div.item {
	position: absolute;
	width: 350px;
	height: 450px;
  border-radius: 10px;
	background-color: coral;
	--r: calc(var(--position) - var(--offset));
	--abs: max(calc(var(--r) * -1), var(--r));
	transition: all 0.25s linear;
	transform: rotateY(calc(-10deg * var(--r)))
	  translateX(calc(-300px * var(--r)));
	z-index: calc((var(--position) - var(--abs)));
  }
  
  div.item:nth-of-type(1) {
	--offset: 1;
	/*background-image: url(za.jpg);*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  }
  div.item:nth-of-type(2) {
	--offset: 2;
/*	background-image: url(zb.jpg);*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  }
  div.item:nth-of-type(3) {
	--offset: 3;
/*	background-image: url(zc.jpg);*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;  }
  div.item:nth-of-type(4) {
	--offset: 4;
/*	background-image: url(zd.jpg);*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;  }
  div.item:nth-of-type(5) {
	--offset: 5;
/*	background-image: url(zf.jpg);*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;  }
  
  div.item:nth-of-type(6) {
	--offset: 6;
/*	background-image: url(zf.jpg);*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;  }
  
  div.item:nth-of-type(7) {
	--offset: 7;
/*	background-image: url(zf.jpg);*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;  }
  
  div.item:nth-of-type(8) {
	--offset: 8;
/*	background-image: url(zf.jpg);*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;  }
  
  input:nth-of-type(1) {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
  }
  input:nth-of-type(1):checked ~ main#carousel {
	--position: 1;
  }
  
  input:nth-of-type(2) {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
  }
  input:nth-of-type(2):checked ~ main#carousel {
	--position: 2;
  }
  
  input:nth-of-type(3) {
	grid-column: 4 /5;
	grid-row: 2 / 3;
  }
  input:nth-of-type(3):checked ~ main#carousel {
	--position: 3;
  }
  
  input:nth-of-type(4) {
	grid-column: 5 / 6;
	grid-row: 2 / 3;
  }
  input:nth-of-type(4):checked ~ main#carousel {
	--position: 4;
  }
  
  input:nth-of-type(5) {
	grid-column: 6 / 7;
	grid-row: 2 / 3;
  }
  input:nth-of-type(5):checked ~ main#carousel {
	--position: 5;
  }
  

.d-btn a{
    color: #058dee;
    text-decoration: none;
    font-size: 20px;
    font-family: sans-serif;
}
.btn button:hover{
    background-color: rgba(13, 14, 12, 0.63);
    transition: 0.6s;
    transform: scale(1.1);
}
.d-btn button:hover{
    background-color: rgba(13, 14, 12, 0.63);
    transition: 0.6s;
    transform: scale(1.1);
}
.d-btn a:hover{
    color: white;
}
.d-btn button{
    background-color:white;
    color: #1f6395;
    text-align: center;
    border: none;
    width: 170px;
    padding: 15px;
    margin: 4.5px;
    cursor: pointer;
}
html img {
    width: 100%;
    cursor:pointer;
}
.card__side--back {
    background-color: var(--color-white);
    transform: rotateY(180deg);
}

.card:hover .card__side--back {
    transform: rotateY(0);
}

.card:hover .card__side--front {
    transform: rotateY(-180deg);
}

.card {
    flex: initial;
    position: relative;
    height: 42.5rem;
    width: 38rem;
    perspective: 200rem;
    margin: 0rem;
}

.card__side {
    height: 52rem;
    transition: all 0.8s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 2rem 6rem rgba(var(--color-black), 0.15);
}


@media only screen and (max-width: 37.5em), only screen and (hover: none) {
    
    .card {
        height: auto;
        border-radius: 3px;
        background-color: var(--color-white);
        box-shadow: 0 2rem 6rem rgba(var(--color-black), 0.15);
    }

    .card__side {
        height: auto;
        position: relative;
        box-shadow: none;
    }

    .card__side--front {
        clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
    }

    .card__side--back {
        transform: rotateY(0);
    }

    .card:hover .card__side--front {
        transform: rotateY(0);
    }

    .card__details {
        padding: 3rem 2rem;
    }

    .card__theme {
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0);
        width: 100%;
        padding: 5rem 4rem 1.5rem 4rem;
        text-align: right;
    }

    .card__theme-box {
        margin-bottom: 1.5rem;
    }

    .card__title {
        font-size: 4rem;
    }
}
:root {
    --marquee-width: 49vw;
    --marquee-height: 50vh;
    --marquee-elements-displayed: 3;
    --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
    --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
  }
  
  .marquee {
    width: var(--marquee-width);
    height: var(--marquee-height);
    overflow: hidden;
    position: relative;
    border-radius: 13px;
  }
  .marquee:before, .marquee:after {
    position: absolute;
    top: 0;
    width: 10rem;
    height: 150%;
    border-radius: 10px;
    content: "";
    z-index: 1;
  }
  .marquee:before {
    left: 0;
    /* background: linear-gradient(to right, #111 0%, transparent 100%); */
  }
  .marquee:after {
    right: 0;
    /* background: linear-gradient(to left, #111 0%, transparent 100%); */
  }
  .marquee-content {
    list-style: none;
    height: 100%;
    display: flex;
    animation: scrolling var(--marquee-animation-duration) linear infinite;
  }
  
  @keyframes scrolling {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
  }
  .marquee-content dt {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: var(--marquee-element-width);
    max-height: 200%;
    font-size: calc(var(--marquee-height)*3/4); 
    white-space: nowrap;
  }
  
  .marquee-content dt img {
    width: 200%;
    border: 2px solid #eee;
    border-radius: 10px;
  }
  
  @media (max-width: 700px) {
    html { font-size: 12px; }
    :root {
      --marquee-width: 150vw;
      --marquee-height: 56vh;
      --marquee-elements-displayed: 3;
    }
    .marquee:before, .marquee:after { width: 10rem; }
  }
  .d{
    background-color: #1f6395;
    width: 85%;
    padding: 45px;
    margin: auto;
    border-radius: 18px;
    display: flex;
    gap: 20px;
    margin-top: 50px;
}
.d .marquee{
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center
}
.link{
    display: grid;
    font-family: sans-serif;
    color: white;
    
}
.link h1{
    margin-top: 30px;
}
.link p{
    margin-top: -30px;
    font-size: 20px;
}
.ad{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3rem;
	text-align: center;
}

.card-cd {
  position: relative;
  width: 360px;
  height: 400px;
  background: #000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s;
}

.card-cd:hover {
  transform: scale(1.05);
}

.card-cd .image-an {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color:green;
}

.card-cd .image-an img {
  width: 100%;
  transition: 0.5s;
}

.card-cd:hover .image-an img {
  opacity: 0.5;
  transform: translateX(30%);
  
}

.card-cd .details {
  position: absolute;
  top: 20px;
  left: 0;
  width: 70%;
  height: 95%;
  background: #1f6395;
  transition: 0.5s;
  transform-origin: left;
  transform: perspective(2000px) rotateY(-90deg);
}

.card-cd:hover .details {
  transform: perspective(2000px) rotateY(0deg);
}

.card-cd .details .center {
  padding: 20px;
  text-align: center;
  background: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.card-cd .details .center {
  padding: 20px;
  text-align: center;
  background: #fff;
  height: 100%;  /* Ensure it takes full height of the coverer */
  overflow-y: auto; /* Enables vertical scrolling when content overflows */
}

.card-cd .details .center::-webkit-scrollbar {
  width: 8px; /* Set the width of the scrollbar */
}

.card-cd .details .center::-webkit-scrollbar-thumb {
  background: #1f6395; /* Set the color of the scrollbar thumb */
  border-radius: 4px; /* Round the edges of the scrollbar thumb */
}

.card-cd .details .center h1 {
  margin: 0;
  padding: 0;
  color: #1f6395;
  line-height: 20px;
  font-size: 15px;
  text-transform: uppercase;
  text-align: start;
}

.card-cd .details .center span {
  font-size: 14px;
  color: #1f6395;
  text-align: start;
}

.card-cd .details .center p {
  margin: 10px 0;
  padding: 0;
  color: #262626;
  text-align: start;
}

.card-cd .details .center ul {
  margin: 10px auto 0;
  padding: 0;
  display: table;
}

.card-cd .details .center ul li {
  list-style: none;
  margin: 0 5px;
  float: left;
}

.card-cd .details .center ul li a {
  display: block;
  background: #262626;
  color: #fff;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  transition: background 0.3s, transform 0.3s;
}

.card-cd .details .center ul li a:hover {
  background: #ff3636;
  transform: scale(1.1);
}
.change-img{
  display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            align-items: center;
            background: #f0f0f0;
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
}
.void-mob, .crop-mob{
    display:none;
}
.footer-mob{
    display:none;
}
@media (max-width: 768px) {
    .void-mob{
        display:block; position:relative; bottom:0; margin-top:50px;
    }
    .c{
        display:block;
        width:200px;
        height:350px;
        float:left;
        margin-top:100px;
        clear:both;
    }
    .text{
        height:350px;
        width:95%;
    }
    .artboard{
        display:none;
    }
    .samp{
        display:none;
    }
    .link{
        width:100%; float:left;
    }
    .void{
        display:none;
    }
    .void-mob, .crop-mob{
        display:block;
    }
    .crop-mob{
        height:350px; overflow:auto; margin-left:10%;
    }
  .card-cd {
      width: 100%;
      height: auto;
      position: relative;
      top: 0;
      left: 0;
      transform: none;
      margin-bottom: 20px;
  }

  .card-cd .details {
      width: 100%;
      transform-origin: center;
  }
}
/* partners logo with MoA */
:root {
	--rotate-speed: 40;
	--count: 8; 
	--easeInOutSine: cubic-bezier(0.37, 0, 0.63, 1);
	--easing: cubic-bezier(0.000, 0.37, 1.000, 0.63);
}

.void {
	width: 60%;
	max-width: 1024px;
	margin: auto;
	position: relative;
	aspect-ratio: 1 / 1;
}
ul:hover * {
	animation-play-state: paused;
}
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: relative;
	width: 90%;
	aspect-ratio: 1 / 1;
	z-index: 1;
}
li {
	position: absolute;
	top: 50%;
	transform: translateY(50%);
	width: 100%;
	animation: rotateCW calc(var(--rotate-speed) * 1s) var(--easing) infinite;
}
.card-partner {
	width: 10%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 10px 20px;
	gap: 10px;
	background: #e4e2e213;
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0px 16px 32px rgba(0, 0, 0, 0.1);
	border-radius: 20px;
	font-family: 'Inter', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 10px;
	color: #535062;
	animation: rotateCCW calc(var(--rotate-speed) * 1s) var(--easing) infinite;
}
a {
	text-decoration: none;
	color: unset;
}

svg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

li:nth-child(2), li:nth-child(2) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -1s);
}
li:nth-child(3), li:nth-child(3) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -2s);
}
li:nth-child(4), li:nth-child(4) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -3s);
}
li:nth-child(5), li:nth-child(5) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -4s);
}
li:nth-child(6), li:nth-child(6) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -5s);
}
li:nth-child(7), li:nth-child(7) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -6s);
}
li:nth-child(8), li:nth-child(8) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -7s);
}
li:nth-child(9), li:nth-child(9) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -8s);
}
li:nth-child(10), li:nth-child(10) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -9s);
}
li:nth-child(11), li:nth-child(11) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -10s);
}
li:nth-child(12), li:nth-child(12) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -11s);
}
li:nth-child(13), li:nth-child(13) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -12s);
}
li:nth-child(14), li:nth-child(14) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -13s);
}
li:nth-child(15), li:nth-child(15) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -14s);
}
li:nth-child(16), li:nth-child(16) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -15s);
}
li:nth-child(17), li:nth-child(17) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -16s);
}
li:nth-child(18), li:nth-child(18) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -17s);
}
li:nth-child(19), li:nth-child(19) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -18s);
}
li:nth-child(20), li:nth-child(20) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -19s);
}
li:nth-child(21), li:nth-child(21) .card-partner {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -20s);
} 
@keyframes rotateCW {
	from {
		transform: translate3d(0px, -50%, -1px) rotate(-45deg);
	}
	to {
		transform: translate3d(0px, -50%, 0px) rotate(-315deg);
	}
}
@keyframes rotateCCW {
	from {
		transform: rotate(45deg);
	}
	to {
		transform: rotate(315deg);
	}
}
@keyframes pulseGlow {
	from {
		background-size: 60%;
	}
	to {
		background-size: 100%;
	}
}

.center-circle {
	position: absolute;
	width: 150px;
	aspect-ratio: 1 / 1;
	left: 46%;
	top: 22%;
	transform: translate(-50%, -40%);
	background: #FFFFFF;
	box-shadow: 0px 18px 36px -18px rgba(12, 5, 46, 0.3), 0px 30px 60px -12px rgba(12, 5, 46, 0.25);
	border-radius: 50%;
}
.second-circle {
	position: absolute;
	width: 40%;
	aspect-ratio: 1 / 1;
	left: 0%;
	top: 0%;
	transform: translate(-50%, -50%);
	background: #F5F4FE;
	opacity: 0.5;
	box-shadow: 0px 18px 36px -18px rgba(12, 5, 46, 0.3), 0px 30px 60px -12px rgba(12, 5, 46, 0.25);
	border-radius: 50%;
}
.last-circle {
	position: absolute;
	width: 66%;
	aspect-ratio: 1 / 1;
	left: 0%;
	top: 0%;
	transform: translate(-50%, -50%);
	background: #F5F4FE;
	opacity: 0.25;
	box-shadow: 0px 18px 36px -18px rgba(12, 5, 46, 0.3), 0px 30px 60px -12px rgba(12, 5, 46, 0.25);
	border-radius: 50%;
}
.crop {
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1));
}
.mask {
	position: absolute;
	top: 0;
	left: 0;
	height: 50px;
	bottom: 0;
	width: 50%;
	animation: pulseGlow 5s linear infinite alternate;
	background-position: 100% 50%;
	background-repeat: no-repeat;
	/* background-image: radial-gradient(100% 50% at 100% 50%, rgba(60, 26, 229, 0.25) 0%, rgba(60, 26, 229, 0.247904) 11.79%, rgba(59, 26, 229, 0.241896) 21.38%, rgba(58, 26, 229, 0.2324) 29.12%, rgba(57, 26, 229, 0.219837) 35.34%, rgba(55, 26, 229, 0.20463) 40.37%, rgba(53, 26, 229, 0.1872) 44.56%, rgba(51, 26, 229, 0.16797) 48.24%, rgba(48, 26, 229, 0.147363) 51.76%, rgba(46, 26, 229, 0.1258) 55.44%, rgba(44, 26, 229, 0.103704) 59.63%, rgba(41, 26, 229, 0.0814963) 64.66%, rgba(39, 26, 229, 0.0596) 70.88%, rgba(36, 26, 229, 0.038437) 78.62%, rgba(34, 26, 229, 0.0184296) 88.21%, rgba(32, 26, 229, 0) 100%); */
}
.mask div{
	margin-right: 30%;
}
.mask h1{
	font-family:sans-serif;
	margin-top: 50%;
	font-size: 3rem;
	left: -10%;
  color: #1f6395;
	font-weight: bold;
}
.mask h3{
	font-family: sans-serif;
	font-size: 1.5rem;
	margin-top: -6%;
}
.mask p{
  font-family: sans-serif;
}
.mask label{
	font-family: sans-serif;
	font-size: 20px;
	margin-top: -28px;
}
.center-circle div{
	text-align: center;
	margin: auto;
	align-items: center;
	margin-top: 7%;
	padding:10px; line-height:20px;
}
.mask:after {
	content: "";
	position: absolute;
	width: 1px;
	height: 100%;
	right: 0;
	display: block;
	background-image: linear-gradient(180deg, rgba(60, 26, 229, 0) 0%, #3C1AE5 50%, rgba(60, 26, 229, 0) 100%);
}
.card-partner img{
	width: 80px; height:80px; border-radius:50%; z-index:-1; object-fit:cover;
}
.footer-a{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.footer-a h1{
    font-family: sans-serif;
    font-size: 2rem;
}
.footer-a p{
    font-family: sans-serif;
    font-size: 1.3rem;
}
.footer-b{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.footer-b img{
    width: 30px;
}