:root {
    --background-footer: rgb(7, 0, 38);
    --lime: rgb(0, 255, 0);
    --section-one: rgb(242, 242, 242);
    --dark-green: rgb(0, 89, 9);
    --gray-box: rgb(224, 224, 226);
    --dark-purple: rgb(76, 6, 99);
    --section3: rgb(15, 141, 88);
    --section5: rgb(32, 20, 141);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

body {
    position: relative;
}

.overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(0,0,0,0.7);
    opacity: 0;
    visibility: hidden;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* GLOBAL SECTION */
.section-header p,
.section-header h4 {
    margin: 0;
}

.section-header h4{
    font-size: 3.8rem;
}

.section-header i {
    font-size: 2rem;
}

.section-header p{
    font-size: 0.8rem;
}

.section-description {
    font-size: 1.2rem;
    max-width: 375px;
}

.g-btn {
    width: 17rem;
}

.box {
    background-color: var(--section-one);
    margin-top: -58px;
}

#section6,
.container-fluid {
    margin: 75px 0 75px 0;
}

.input-active {
    background-color: #fff !important;
    color: #000 !important;
    border-color: var(--lime) !important;
}

/* HEADER */
header {
    background: var(--background-footer);
}

header .nav-link:hover {
    color: var(--lime);
}

.wrapper {
    position: relative;
    z-index: 1000;
    background-color: var(--background-footer);
}

.nav a {
    font-size: 1.5rem;
    color: #fff;
    padding: 0;
}

.menu2 {
    margin-top: -30px;
    border-radius: 0 0 35px 35px;
}

.menu2 a {
    color: #000;
    text-decoration: none;
}

.menu2 a:hover {
    color: var(--lime);
}

.icons i,
.icons img {
    font-size: 2.2rem;
    cursor: pointer;
}

.input-outline i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.swiper-slide {
    position: relative;
    height: 525px;
    border-radius: 25px;
    display: flex;
    align-items: flex-start;
    background-color: var(--background-footer);
}

.swiper-slide img {
    height: 450px;
    object-fit: cover;
    object-position: top;
    border-radius: 25px;
}

.swiper-slide-transform {
    position: absolute;
    bottom: 0;
    width: 75%;
    height: 150px;
    background-color: var(--background-footer);
    border: 1px solid #fff;
    border-radius: 60px;
    padding-left: 35px;
}

.swiper-slide-transform h1 {
    font-weight: 800;
    color: var(--lime);
}

.swiper-slide img:hover {
    border: 3px solid var(--lime);
}


/* SECTION1 */
#section1 {
    background-color: var(--section-one);
}

#section1 a {
    text-decoration: none;
    color: #000;
    opacity: 0.7;
}

#section1 .live-box {
    width: 250px;
    height: 175px;
    border: 1px solid #000;
    border-radius: 25px;
    overflow: hidden;
}

.live-box img {
    object-fit: cover;
    filter: brightness(75%);
}

#section1 .live-box-desc {
    height: 100%;
    padding: 5px 16px;
    background-color: var(--background-footer);
}



/* SECTION2 */
#section2 a {
    text-decoration: none;
    color: #000;
    opacity: 0.7;
}

#section2 img {
    border-radius: 25px;
    overflow: hidden;
}

#section2 .box {
    border-radius: 40px;
    padding: 20px 18px;
}

.play-box {
    width: 45px;
    height: 45px;
    background-color: var(--background-footer);
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    bottom: -22.5px;
}

.play-box > i:hover {
    color: var(--lime) !important;
    transition: 1s;
}

.view-more {
    background-color: var(--lime) !important;
}

/* SECTION3 */
#section3 {
    background-color: var(--section3);
}

#section3 .view-all {
    color: #fff;
    background-color: var(--dark-green);
}

#section3 .new-acc {
    border: 1px solid;
}

#section3 .box {
    background-color: var(--dark-green);
}

#section3 img {
    border-radius: 25px;
}

#section3 a {
    color: #fff;
}

/* SECTION4 */
#section4 .view-all {
    color: #fff;
    background-color: var(--background-footer);
}

#section4 .new-acc {
    border: 1px solid;
}

#section5 .box {
    background-color: var(--dark-purple);
}


#section4 img {
    border-radius: 25px;
}

#section4 a {
    color: #000;
}

/* SECTION5 */
#section5 {
    background-color: var(--section5);
}

#section5 .view-all {
    color: #fff;
    background-color: var(--dark-purple);
}

#section5 .new-acc {
    border: 1px solid;
    color: #fff;
}

#section5 img {
    border-radius: 25px;
}

#section5 a {
    color: #fff;
}

/* SECTION6 */
#section6 .section-wrapper img {
    object-fit: cover;
    object-position: center;
}

#section6 .hot-box {
    border-radius: 25px;
    overflow: hidden;
}

#section6 .section-wrapper-left img {
    height: 60px;
    object-fit: cover;
}

#section6 .hot-box-desc {
    padding: 5px 16px;
    background-color: var(--section5);
}

#section6 .footer span {
    color: var(--lime);
}

/* SECTION7 */
#section7-main {
    background-color: var(--background-footer);
}

.canal {
    width: 300px;
    height: 350px;
    border-radius: 25px;
}

.canal img {
    object-fit: cover;
    object-position: top;
    border-radius: 25px;
}

.canal-title {
    background-color: var(--lime);
    width: 100%;
    bottom: 100px;
    color: #000;
    text-align: center;
}

.recommended-main {
    margin-bottom: -67.5px;
}

.recommended {
    border-radius: 15px 15px 0 0;
    background-color: var(--gray-box);
}

.section7-box-description {
    width: 95%;
    background-color: var(--dark-green);
    margin-top: -25px;
}

.cards:nth-child(2) .section7-box-description {
    color: #000;
    background-color: var(--section-one);
}

.cards:nth-child(3) .section7-box-description {
    background-color: var(--dark-purple);
}

.recommended img {
    height: 115px;
    border-radius: 10px;
    object-fit: cover;
}

.section7-box-description > p {
    font-size: 0.8rem;
    font-weight: 700;
}

.section7-box-description .row {
    font-size: 1rem;
}

.section7-box-description .footer {
    font-size: 1rem;
}

.section7-box-description .footer a {
    color: #fff;
}

.section7-box-description p {
    margin: 0;
}

#section7 .sign-in {
    background-color: var(--lime);
}

#section7 .new-acc {
    background-color: var(--background-footer);
    color: #fff;
}

.section7-footer {
    margin-top: 67.5px;
}

/* FOOTER */
footer {
    padding: 100px 0 50px 0;
    background-color: var(--background-footer);
}

footer .logo {
    margin-top: -50px;
}

.logo-terms-copyright a,
.logo-terms-copyright p{
    font-size: 1.4rem;
}

footer .home > p,
footer .home > h5 {
    margin: 0;
}

footer .home > p {
    font-size: 1.2rem;
}

footer .home > h5 {
    font-size: 1.4rem;
}

footer .icon {
    color: #fff;
    font-size: 1.8rem;
}

footer h2 {
    display: inline-block;
    font-size: 1.6rem;
    color: #fff;
    word-wrap: break-word;
    font-weight: 700;
}

footer p {
    color: #fff;
    opacity: 0.8;
    font-size: 1.1rem;
}

footer a {
    color: #fff;
    text-decoration: none;
}

footer button {
    background-color: var(--lime) !important;
}

   .swal2-title{
		margin-bottom:20px;
		line-height:30px;
	   }
	   
	   .swal2-timer-progress-bar{
			height:7px;
			border-radius:3px;
			background: rgb(67,182,73);
            background: linear-gradient(90deg, rgba(67,182,73,1) 0%, rgba(0,99,33,1) 100%);
	   }
	   
	   .swal2-timer-progress-bar-container{
		background-color:#d6d6d6;
	   }
	   
	   .swal2-title{
		color:#333;
	   }

/*SUPAGE NEWS*/
#news .container {
    padding-top: 75px;
    padding-bottom: 75px;
}


@media screen and (max-width: 576px) {
    #news > .container {
        padding: 15px;
    }
}

@media screen and (max-width: 768px) {
    .mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--background-footer);
        z-index: 1000;
        margin: 0 auto;
        transition: .3s ease;
    }
}