:root {
    --blue: #28B6BE;
    --blueDark: #3B2E8B;
    --white: #fff;
    --black: #000;
    --pink: #CB2787;
}

body {
    font-family: "Montserrat", serif;
    color: var(--white);
}

img {
    max-width: 100%;
}

body {
    background-color: var(--black);
}

ul,
ul li {
    margin: 0;
    padding: 0;
}

ul li {
    list-style-type: none;
}

a {
    color: var(--white);
    text-decoration: none;
    transition: all 0.3s;
}

a:hover {
    color: var(--pink);
}

.pink-text {
    color: var(--pink);
}

.blue-text {
    color: var(--blue);
}

#mainNav {
    transition: all 0.7s linear;
    position: absolute;
    top: 0;
    inset-inline: 0;
    z-index: 99;
}

#mainNav.fixed {
    background-color: #000;
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 999;
    box-shadow: 0px 2px 28px #b727874a;
}

/* #mainNav.fixed+.banner {
    margin-top: 76px;
} */

.navbar-brand img {
    height: 50px;
    margin-inline: auto;
}

.nav-item .nav-link {
    display: flex;
    color: var(--white);
    border-radius: 500px;
    padding-inline: 20px !IMPORTANT;
}

.nav-item .nav-link:hover,
.nav-item .nav-link.active:hover,
.nav-item .nav-link.active {
    color: var(--pink);
}

.nav-item .nav-link.style1 {
    background: var(--blue);
    color: var(--white);
    font-size: 90%;
}

.nav-item .nav-link.style1:hover {
    background: var(--pink);
}

.banner {
    height: 100vh;
}

.banner-content {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

header.subpage .banner-content {
    display: flex;
    align-items: center;
    height: calc(100vh - 80px) !important;
}

.banner-content img {
    height: 65vh;
}

.banner-content:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto;
    width: 90vh;
    height: 90vh;
    background: radial-gradient(circle, rgb(59 46 139 / 88%) 0%, rgb(11 7 35 / 12%) 72%, rgb(0 0 0 / 0%) 95%);
    border-radius: 500px;
}

.banner-text {
    position: absolute;
    inset: auto;
}

.banner-text {
    position: absolute;
    inset: auto;
    text-align: center;
    color: var(--white);
}

.banner-text>*:nth-child(2) {
    font-size: calc(50vw / 7);
    font-weight: 800;
    font-family: var(--bs-font-sans-serif);
    text-shadow: 0 0 10px #0000006e;
}

.banner-text>*:last-child {
    font-size: 118%;
}


/*swiper-slide */
.ticker-container {
    overflow: hidden;
    width: calc(100vw - 100px);
    margin-inline: auto;
}

.swiper-slide {
    opacity: 0 !important;
}

.swiper-slide-active {
    opacity: 1 !important;
}

.ticker .swiper-slide span {
    display: inline-flex;
    background-color: #18104cd6;
    padding: 5px 20px;
    border-radius: 200px;
    font-size: 120%;
    color: var(--pink);
    transition: color 0.5s;
    transition-delay: 0.25s;
}

.ticker .swiper-slide-active span {
    color: var(--white);
}


/*circular */

.circular {
    position: absolute;
    inset-block-end: 6vh;
    inset-inline: auto 5vh;
}

.circular .circle {
    width: 120px;
    height: 120px;
    background-color: var(--pink);
    border-radius: 500px;
}

.circular .circle img {
    width: 100%;
    height: 100%;
    position: absolute;
}

.circular .circle img:last-child {
    animation-name: rotate;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

.main-part-1 {
    font-size: 130%;
    text-transform: uppercase;
    font-weight: 300;
}

.mp2-1 {
    border-radius: 12px;
    border: 1px solid #636363;
    padding: 20px;
}

.num,
.numdesc {
    text-align: center;
}

.num {
    font-weight: 600;
    font-size: 145%;
    color: var(--blue);
    margin-bottom: 10px
}

.mp2-2 {
    margin-top: 15px
}

/* footer */

.footer-col {
    display: flex;
}

.footer-col .title {
    text-transform: uppercase;
    padding-inline-end: 15px
}

footer {
    font-size: 80%;
    padding-block: 50px 30px;
    background: linear-gradient(var(--black) 0%, #3b2e8b87 100%);
}

.btn {
    border-radius: 500px;
    border: 0;
    text-transform: uppercase;
    font-size: 90%;
    font-weight: 700
}

.btn-primary {
    background: var(--blue);
    padding-block: 8px;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background: var(--pink);
}

@media only screen and (min-width: 767px) {
    .navbar-brand {
        margin-inline: 0 !important;
    }

    .navbar-nav>* {
        align-items: center;
        display: flex;
    }

    .offcanvas-body>* {
        width: calc(100% / 3);
    }
}

.section-title {
    text-transform: uppercase;
    font-size: 140%;
    font-weight: 700;
    letter-spacing: 2px;
}

.influncer {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    padding: 42px 24px 22px;
    background: linear-gradient(0deg, #0E0B20, #2F091F);
    border-radius: 12px;
}

.influncer .name {
    text-align: center;
    display: block;
    width: 100%;
    font-weight: 600;
    margin-block: 17px;
}

.influncer img {
    border-radius: 500px;
    width: 70%;
    display: flex;
    margin-inline: auto;
}

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

.voting a {
    width: 36px;
}

.voting a img {
    width: 100%;
}

.voting form {
    width: calc(100% - 55px);
}

.voting form button {
    width: 100%;
}

/*readmore*/

.readmore-container {
    display: flex;
    justify-content: end;
    margin-top: 25px;
    padding-inline-end: 22px;
}

.readmore {
    font-weight: 600;
}

.readmore svg {
    width: 18px;
}

.readmore svg path {
    transition: all 0.5s;
}

.readmore:hover svg path {
    fill: var(--blue);
}

.mp3 {
    margin-top: 100px
}

/*.mp3:nth-child(even) .section-title {*/
/*    color: var(--pink)*/
/*}*/

/*.mp3:nth-child(odd) .section-title {*/
/*    color: var(--blue)*/
/*}*/
.pink {
    color: var(--pink);
}

.blue {
    color: var(--blue);
}
.newsletters {
    background: linear-gradient(0deg, #0E0B20, #2F091F);
    padding: 60px;
    border-radius: 14px;
}

.newsletters img {
    width: 36px;
    margin-inline-end: 8px;
}

.newsletters p {
    font-size: 200%;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 30px;
}

.w-100 {
    width: 100%
}

.form-control {
    border-radius: 100px;

}

.form-control,
.btn {
    min-height: 44px;
}

.newsletters-section {
    margin-block: 90px 60px;
}

/**************************/

main.subpage {
    margin-top: 120px
}

.subpage .influncer {
    margin-bottom: 24px;
}

.banner.thanks .banner-text>*:first-child {
    font-size: 260%;
    letter-spacing: 3px;
}

.banner.thanks .banner-text>*:last-child {
    font-size: 140%;
    font-weight: 400
}

.banner.thanks .banner-content:before {
    opacity: 0.7
}

.modal-header {
    border: 0;
    background: none;
}

.modal-content {
    background: linear-gradient(0deg, #0E0B20, #2F091F);
}

.modal-content .modal-body {
    padding: 20px 40px 30px;
}

.modal-content .modal-body.thanks {
    font-size: 140%;
}

.modal-content .modal-body.thanks .pink-text {
    font-size: 180%;
}

.oops {
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.oops>*:nth-child(1) {
    font-size: 210%;
    margin-bottom: 15px
}

.oops>*:nth-child(2) {
    font-size: 140%;
    margin-bottom: 25px;
}

.oops .style1 {
    padding: 10px 30px !important;
    display: flex;
    align-items: center;
    font-size: 103% !Important;
}

.oops .style1 svg {
    margin-inline-start: 10px
}

.subpage .banner {
    padding-top: 80px;
}

.modal-body.login-register {
    padding-top: 6px;
}

.rl-title {
    font-weight: 600;
    margin-bottom: 30px;
    font-size: 120%;
}

.google,
.facebook {
    background: #1877F2;
    color: #fff;
    padding: 10px 20px;
    border-radius: 500px;
    font-size: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.google svg,
.facebook svg {
    margin-inline-end: 10px
}

.google {
    background: #ffffff1f
}

.facebook:hover {
    color: #fff;
    background: #1367d3
}

.google:hover {
    background: #ffffff0f
}

.form-floating {
    font-size: 80%;
}

.form-floating input {
    padding-inline: 22px !IMPORTANT;
}

.form-floating label {
    color: #333;
    font-size: 70%;
    padding-inline-start: 24px;
}

.modal-body .form-check-label {
    font-size: 60%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-inline-start: 10px;
    padding-top: 6px;
    font-weight: 300;
}

.modal-body .form-check-input {
    background-color: var(--blue);
    border-color: var(--blue);
    border-radius: 2px;
    box-shadow: none;
}

.form-check-input:checked[type=checkbox] {
    background-color: var(--pink);
    border-color: var(--pink);
    box-shadow: none;
}

.modal-body .form-check {
    display: flex;
    align-items: center;
    margin-inline-start: 5px;
}

.modal-body .btn {
    font-size: 65%
}

.modal-body .forget {
    font-size: 65% !important;
}

.modal-body .forget:hover {
    color: var(--blue)
}

.modal-body .no-account {
    font-size: 75%;
    font-weight: 300;
}

.modal-backdrop.show {
    opacity: 0.85;
}

.select-container {
    height: 100%;
}

.select-container>* {
    height: 100%;
    border-radius: 500px
}

.sign-up-container {
    margin-top: 15px
}

.sign-up-container button {
    padding-block: 12px
}

.form-control {
    background: transparent;
    color: #e3e3e3
}

.form-control::placeholder {
    color: #e3e3e3 !important
}

.form-control:focus,
.form-control:hover {
    background: transparent;
    color: #e3e3e3 !important;
    box-shadow: none;
}

.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    color: var(--pink) !important
}

.form-floating>.form-control-plaintext~label::after,
.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after {
    background: transparent !important;
}

.form-control:focus {
    border-color: var(--pink)
}

.form-select {
    background-color: transparent;
    color: #fff;
}

.form-select:hover,
.form-select:focus {
    box-shadow: none
}

.form-select:focus {
    border-color: var(--pink)
}

.form-select option {
    color: #000;
}
.navbar-toggler {
    border: 0;
}
.navbar-toggler:focus {
    box-shadow: none;
}
@media only screen and (max-width: 991px) {
    header {
        overflow-x: hidden;
    }

    .banner-content img {
        height: unset;
    }
    .subpage .banner-content img {
        height: 46vh;
        margin-top: 15px;
    }
    .ticker-container {
        width: calc(100vw - 20px);
    }

    .offcanvas {
        background-color: var(--black);
    }
	.main-part-3 .influncer {
		margin-bottom: 24px
	}
	.readmore-container {
		margin-top: 10px;
	}
	.footer-col {
		margin-bottom: 24px
	}
	footer .container .row {
		flex-direction: column-reverse
	}
	footer .container .row >*:last-child {
		margin-bottom: 24px;
	}
	
	.offcanvas-title img {
		width: 170px;
	}
	header.subpage .banner-content {
	    height: unset !IMPORTANT;
	}
	header.subpage .banner-content .banner-text {
	    position: relative;
	    margin-top: 17vh;
	}

}

@media only screen and (min-width: 768px) {
    .navbar-brand {
        margin-inline: 0 !important;
    }

    .navbar-nav>* {
        align-items: center;
        display: flex;
    }

    .offcanvas-body>* {
        width: calc(100% / 3);
    }
}
@media only screen and (max-width: 767px) {
	.modal-content .modal-body {
	    padding: 20px 20px 30px;
	}
	.modal-content .modal-body.thanks {
	    font-size: 110%;
	}
	.modal-content .modal-body.thanks .pink-text {
	    font-size: 140%;
	}
    .banner-text>*:nth-child(2) {
        font-size: calc(50vw / 5.5);
    }
    .navbar-brand {
        transform: translate(0px, -4px)
    }
	.oops {
	    align-items: center;
	    margin-top: 10px;
	}
	.oops>*:nth-child(2) {
	    font-size: 120%;
	    margin-bottom: 25px;
	}
	.banner.thanks .banner-text>*:first-child {
	    font-size: 160%;
	}
	.banner.thanks .banner-text>*:last-child {
	    font-size: 110%;
	}
	.offcanvas-body {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		padding-top: 6vh;
	}
	.offcanvas-body  > *{
		width: 100% !important;!i;!;
		justify-content: unset !important;
		flex-grow: unset !important;!i;!;
	}
	.offcanvas-body  > *:last-child{
		order: -1;
		margin-bottom: 20px
	}
	.offcanvas-body  > *:last-child a{
		justify-content: center
	}
}

@media only screen and (max-width: 575px) {
	.navbar-brand img {
        width: 180px;
		height: auto;
    }
	.influncer {
		padding: 36px 12px 22px;
	}
	.newsletters {
	    padding: 30px;
	}
	.newsletters button {
		margin-top: 20px
	}
	.newsletters p {
	    font-size: 140%;
	}
	.newsletters img {
	    width: 28px;
	    margin-inline-end: 4px;
	}
	footer .container .row >*:last-child a img {
		width: 160px
	}
	.thanks-text {
		height: 80vh;
	}
	footer {
	    padding-block: 40px 15px;
	}
}