/* CARD 3D */
/* Media Query untuk skrin 1020px ke bawah */

@media (max-width: 1020px) {
    .wrapper-3d {
        display: none; /* Sembunyikan elemen */
    }
}

@media only screen and (max-width: 576px) {
    .card_3d {
        transform: scale(0.5);
    }
    .card__circle{
        display: none;
    }
    .card__smallCircle {
        transform: scale(0.5);
    }
    .card__orangeShine {
        transform: scale(0.5);
    }
    .card__greenShine{
        transform: scale(0.5);
    }
}
@media (max-width: 768px) {
    @keyframes moveLeftRight {
        0% {
            left: 0;
        }
        100% {
            left: 50px; /* Pergerakan lebih kecil untuk skrin kecil */
        }
    }
}

 

.card_3d {
    background-image: url(../Images/3d-banner/bg_upsi.png);
    background-size: cover;
    width: 100%;
    height: 300px;
    border-radius: 50px;
    /* position: absolute; */
    box-shadow: -20px 30px 116px 0 rgba(92, 15, 15, 0.54);
    /* overflow: auto; */
    z-index: 4;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

.card__orangeShine,
.card__greenShine {
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}

.card__orangeShine {
    /* background-image: url(../Images/3d-banner/orange_shine.png); */
    background-size: contain; /* Make the background image fit within the element */
    background-position: center; /* Center the image within the element */
    background-repeat: no-repeat; /* Do not repeat the image */
    right: -15%;
    top: -70%;
    /* bottom: 50px; */
    z-index: 4;
    width: 100%;
    height: 200%;
     
    /* height: 500px; */
    img{
        width: 30%;
        position: relative;
        top: 60%;
        right: -45%;
        opacity: 0.9;
    }
}

.card__greenShine {
    background-image: url(../Images/3d-banner/green_shine.png);
    left: 0%;
    top: -30%;
    bottom: 0;
    z-index: 1;
    width: 80%; 
 

}

.card__year {
    font-family: 'Oswald', sans-serif;
    /* text-align: center; */
    /* color: #fff; */
    font-size: 110px;
    line-height: 110px;
    /* padding: 55px 0; */
    font-weight: 100;
    position: absolute;
    left: -10%;
    z-index: 3;
    img{
        height: 100%;
        overflow: hidden;
        left :-3%; 
        position: relative;
        top: -30px;
    }
}

.card__thankyou {
    font-family: 'Oswald', sans-serif;
    position: absolute;
    text-transform: uppercase;
    font-weight: 100;
    /* left: -10%; */
    bottom: 65%;
    z-index: 1;
    color: #fff;
    letter-spacing: 5px;
    line-height: 17px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
   
   
}

.card__thankyou img {
    width: 100%;
    position: relative; /* Wajib untuk animasi pergerakan */
    animation: moveLeftRight 10s infinite alternate; /* Animasi tanpa henti */
    -webkit-filter: drop-shadow(--30px 30px 75px  #b34a00);
    filter: drop-shadow(-30px 30px 75px  #b34a00);
    opacity: 0.85;
}

@keyframes moveLeftRight {
    0% {
        left: 0; /* Bermula dari kedudukan asal */
    }
    100% {
        left: 200px; /* Bergerak 100px ke kanan */
    }
}

.card__circle,
.card__smallCircle {
    position: absolute;
    border-radius: 100%;
    background-image: linear-gradient(-239deg, #ffb86b 0%, #ff9800 59%);
    box-shadow: -10px -15px 90px 0 rgba(179,74,0,0.45);
    
}

.card__circle {
    right: 68px;
    bottom: 34px;
    width: 230px;
    height: 230px;
    z-index: 2;
    /* box-shadow: inset -6px 7px 6px -5px #ffffff73, 0px 1px 5px 0px #886ab554, -5px 14px 14px 0px rgb(113 93 118 / 32%); */

}

.card__smallCircle {
    
    right: 40%;
    top: -7%;
    width: 50px;
    height: 50px;
    z-index: 2;
    
}

.moon{
    box-shadow: inset -5px 7px 7px -5px #ffffff, -14px 8px 40px 11px rgb(0 0 0 / 49%), 2px -3px 14px rgba(255, 255, 255, 0.3215686275);
}
.moon_big{
    box-shadow: inset -6px 7px 6px -5px #e3e3e373, 0px 1px 5px 0px #5f397c54, -5px 5px 20px 0px rgb(0 0 0 / 32%);
}

.card__outer-year {
    font-family: 'Orbitron'; 
    z-index: 2;
    position: absolute;
}


.card__outer-year img {
    position: relative;
    z-index: 2;
    width: 20%;
    top: -50px;
    left: -10%;
    -webkit-filter: drop-shadow(-10px 30px 25px #b34a00);
    filter : drop-shadow(-10px 30px 25px #b34a00);
}

.card__outer-year span {
    position: absolute;
    color: #fff;
    font-size: 16px;
    z-index: 4;
}

.card__outer-year span:nth-child(1),
.card__outer-year span:nth-child(4) {
    position: absolute;
    color: #fff;
    font-size: 16px;
    z-index: 4;
}

.card__outer-year span:nth-child(1):after,
.card__outer-year span:nth-child(4):after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    border-bottom: 2px solid #fff;
}

.card__outer-year span:nth-child(1) {
    top: 35px;
    left: 35px;
}

.card__outer-year span:nth-child(2) {
    left: none;
    top: 35px;
    right: 35px;
}

.card__outer-year span:nth-child(3) {
    top: none;
    bottom: 35px;
    left: 35px;
}

.card__outer-year span:nth-child(4) {
    top: none;
    left: none;
    right: 35px;
    bottom: 35px;
}

.card__comet {
    position: relative;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 100%;
}

/* Theme overrides to ensure Bootstrap components follow the orange palette without editing vendor files */
:root {
    --bs-blue: #ff9800;
    --bs-primary: #ff9800;
}

/* Force primary buttons, outlines, form controls and checkboxes to orange */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}
.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.form-range::-webkit-slider-thumb { background-color: var(--bs-primary) !important; }
.form-range::-moz-range-thumb { background-color: var(--bs-primary) !important; }
.form-check-input:checked { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }

/* Ensure links follow accent color */
a { color: var(--accent-color) !important; }
a:hover { color: color-mix(in srgb, var(--accent-color), transparent 25%) !important; }


.card__cometOuter {
    position: absolute;
    /* top: 10%; */
    left: 5%; 
    z-index: 4;
}

.card__comet--second {
    right: -30px;
    top: -15px;
    transform: scale(0.6);
  
}

.card__comet:before,
.card__comet:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 27%, rgba(255, 255, 255, 0) 100%);
    border-radius: 20px;
    transform: rotate(-45deg);
}

.card__comet:before {
    width: 18px;
    height: 70px;
    transform-origin: -2px 13px;
}

.card__comet:after {
    width: 12px;
    height: 80px;
    transform-origin: 0px 8px;
}


/* 3d banner END */

/* NEWS */

/* ------------------------------- */

/* Swiper Styles */

  
  /* --------------------------------------------------------------------------- */

/* Variables */
 
:root {
  --g-font-family: "Roboto Condensed", sans-serif;
  --g-line-height: 3 ;
  --g-spacing: calc(var(--g-line-height) * 1em);
  --black: #000;
  --white: #fff;
  --g-background-color-dark: #18181b;
}

.wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align:center;
    color: var(--white);
    padding: var(--g-spacing);
}

.swiper-news {
  padding: var(--g-spacing);
  .content-wrapper {
		position: relative;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-template-areas: ".";
		width: 100%;
        height: 100%;
		justify-items: center;
		align-items: center;
        border-radius: 20px;
        background: -moz-linear-gradient(90deg, #f22bff94 0%, #27fffd94 100%, #ff2759 100%);
        background: -webkit-linear-gradient(90deg, #f22bff94 0%, #27fffd94 100%, #ff2759 100%);
        background: linear-gradient(90deg, #f22bff94 0%, #27fffd94 100%, #ff2759 100%);
        .image-bg-news {
            position: absolute;
            /* top: 0;
            left: 0; */
            width: 100%;
            height: 100%;
            z-index: -1;
            border-radius: 20px;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 20px;
                filter: blur(20px);
                -webkit-filter: blur(20px);
                -moz-filter: blur(20px);
                padding: var(--g-spacing) * 2 var(--g-spacing);
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
		.content {
			padding: var(--g-spacing) * 2 var(--g-spacing);
				text-align: center;
				display: grid;
				justify-items: center;
				align-items: center;
				margin:0 auto;
                border-radius: 20px;
			color:var(--black);
            width: 100%;
          
			:first-child {
				margin: 0;
			}
            h5{
                  font-weight: 600;
                color: white;
            }
            
			.swiper-avatar {
				width:100%;
				
				height:auto;
				img {
					border-radius: 500px;
                    max-width:50px;
				}
			}
			.cite {
				font-size:12px;
				font-weight: 600;
			}
		}
	}
	.swiper-slide {
		margin: 0;
		height: auto;
		width: 100%;
		padding:0;
		opacity:.2;
		background:rgba(255,255,255,.3);
		border-radius:6px;
		transition: all .5s ease-in-out;
		&.swiper-slide-active {
			background:rgba(255,255,255,1);
			opacity:1;
			transform: scale(1.1);
		}
	}
	.swiper-nav-wrapper {
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		width: auto;
		padding-top:var(--g-spacing) * 2;
        position: relative;
        top: 30px;
		.swiper-button-next,
		.swiper-button-prev {
			top: 0;
			top: auto;
			left: auto;
			right: auto;
			position: relative !important;
			&:after {
				display: none;
			}
		}
		.swiper-button-next,
		.swiper-container-rtl .swiper-button-prev {
			/* background-image: url("data:image/svg+xml,%0A%3Csvg width='9px' height='16px' viewBox='0 0 9 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='chevron-right' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M8.674805,7.066406 L1.924805,0.316406 C1.696288,0.105468 1.432619,0 1.133789,0 C0.834959,0 0.57129,0.105468 0.342773,0.316406 C0.114257,0.544923 0,0.808592 0,1.107422 C0,1.406251 0.114257,1.669921 0.342773,1.898438 L6.301758,7.857422 L0.342773,13.816406 C0.114257,14.044923 0,14.308592 0,14.607422 C0,14.906251 0.114257,15.169921 0.342773,15.398438 C0.465821,15.521485 0.584472,15.609375 0.69873,15.662109 C0.812989,15.714844 0.958007,15.741211 1.133789,15.741211 C1.309571,15.741211 1.454589,15.714844 1.568848,15.662109 C1.683106,15.609375 1.801757,15.521485 1.924805,15.398438 L8.674805,8.648438 C8.903321,8.419921 9.017578,8.156251 9.017578,7.857422 C9.017578,7.558592 8.903321,7.294923 8.674805,7.066406 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important; */
			width: 20px;
			height: 20px;
			background-size: 20px 20px;
			background-repeat: no-repeat;
			margin: 0;
			padding: 0;
		}

		.swiper-button-prev,
		.swiper-container-rtl .swiper-button-next {
			/* background-image: url("data:image/svg+xml,%0A%3Csvg width='9px' height='16px' viewBox='0 0 9 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='chevron-right' transform='translate(4.508789, 7.870605) rotate(-180.000000) translate(-4.508789, -7.870605) translate(-0.000000, -0.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M8.674805,7.066406 L1.924805,0.316406 C1.696288,0.105468 1.432619,0 1.133789,0 C0.834959,0 0.57129,0.105468 0.342773,0.316406 C0.114257,0.544923 0,0.808592 0,1.107422 C0,1.406251 0.114257,1.669921 0.342773,1.898438 L6.301758,7.857422 L0.342773,13.816406 C0.114257,14.044923 0,14.308592 0,14.607422 C0,14.906251 0.114257,15.169921 0.342773,15.398438 C0.465821,15.521485 0.584472,15.609375 0.69873,15.662109 C0.812989,15.714844 0.958007,15.741211 1.133789,15.741211 C1.309571,15.741211 1.454589,15.714844 1.568848,15.662109 C1.683106,15.609375 1.801757,15.521485 1.924805,15.398438 L8.674805,8.648438 C8.903321,8.419921 9.017578,8.156251 9.017578,7.857422 C9.017578,7.558592 8.903321,7.294923 8.674805,7.066406 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important; */
			width: 20px;
			height: 20px;
			background-size: 20px 20px;
			background-repeat: no-repeat;
			margin: 0;
			padding: 0;
		}
	}
}



.swiper-news figcaption {
    padding: 25px 20px 25px;
   
    bottom: 0;
    z-index: 1;
    border-radius: 30px;
   
  }
  /*  
  .swiper-news figcaption:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    background: -moz-linear-gradient(90deg, #700877 0%, #ff2759 100%, #ff2759 100%);
    background: -webkit-linear-gradient(90deg, #700877 0%, #ff2759 100%, #ff2759 100%);
    background: linear-gradient(90deg, #700877 0%, #ff2759 100%, #ff2759 100%);
    opacity: 0.8;
    z-index: -1;
    border-radius: 30px;
   
  } */
  
  .swiper-news figcaption .date {
    background-color: #fff;
    border-radius: 50%;
    color: #700877;
    font-size: 18px;
    font-weight: 700;
    min-height: 55px;
    min-width: 55px;
    padding: 10px 0;
    position: absolute;
    right: 15px;
    text-align: center;
    text-transform: uppercase;
    top: -25px;
    
  }
  
  .swiper-news figcaption .date span {
    display: block;
    line-height: 14px;
  }
  
  .swiper-news figcaption .date .month {
    font-size: 11px;
  }

/* pagination swiper news */
.swiper-pagination {
	margin: 0;
	padding: 0;
	width: auto;
	position: relative !important;
	display: block;
	width: auto;
	.swiper-pagination-bullets {
		margin: 0;

		.swiper-pagination-bullet {
			margin: 0;
			background: #2a2a2a !important;
		}
	}
}
.swiper-pagination-bullet {
	background: #8652ff !important;
			transition: all .2s ease-in-out;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	bottom: 0;
	top: 0;
	bottom: 0;
	width: auto;
	padding: 0 var(--g-spacing);
}
.swiper-pagination-bullet-active {
				transform: scale(1.5);
}