/* font setting */
body {
    padding-top: 77px;
    font-size: 16px;
    color: var(--purple-five);
    line-height: 1.5;
    font-weight: normal;
    overflow-x: hidden !important; 
    font-family: "Quicksand", sans-serif; 
    background-color: var(--purple-one); 
}

.generic-header h1{color: var(--purple-two) !important; margin-bottom: 0 !important;}
.generic-header{
    background: rgb(108,64,139);
    border-bottom: 1px solid var(--purple-border);
    background: radial-gradient(circle, rgba(108,64,139,1) 0%, rgba(37,16,53,1) 100%);
}
.generic-header .generic-header-info p{
   margin-bottom: 0;
   text-align: center !important;
}

.generic-header .generic-header-info{
    width: 60%; 
    margin: auto;
    color: var(--purple-five);
 }

 .navbar-dark .navbar-toggler{
    height: 40px;
    align-items: center;
    color: var(--purple-two);
    border: 1px solid var(--purple-border)
 }
 .navbar-dark .navbar-toggler:focus, 
 .navbar-dark .navbar-toggler:active
 { 
    border: 1px solid var(--purple-two);
    background-color: var(--purple-two);
    outline: 0;
    box-shadow: none;
    color: var(--purple-one);
 }

h1, h2{ font-weight: 700 }
h3, h4, h5, b, strong{font-weight: 600 }

.table{width: 100% !important}
h1, h2, h3, h4, h5 strong, b, table th, table td{color: #fff}
table th, table td, .text-muted{color: #fff !important}
.datepicker table tr td, .datepicker table tr th {
    color: #000 !important;
}
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
    color: #b3b3b3 !important;
}
.datepicker table tr td.day:hover, .datepicker table tr td.focused,
.datepicker table tr td span.focused, .datepicker table tr td span:hover, 
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover,
.datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active:active {
    background: #F6CCFF !important;
    color: #fff !important;
}
.form-group textarea.form-control{border-radius: 20px !important}
.btn span{ font-weight: 700;}
a{color: var(--link); font-weight: 700;}
.purple-light{background-color: var(--purple-light) !important;}
.purple-light.card span.badge{ 
    font-weight: 600;
    background-color: var(--purple-two);}
.modal{color: #333}
.pointer{cursor: pointer;}
.letter-space-2{letter-spacing: 2px;}
.btn-light{background-color: var(--bs-blue-three); border-color: var(--bs-blue-three); color: var(--purple-five);}
.text-pink{color: var(--purple-two) !important}
.text-yellow{color: var(--purple-three) !important} 
.bg-pink{background-color: var(--purple-two);}
.bg-yellow{background-color: var(--purple-three);}
.card{background-color: var(--purple-light); border-color: var(--purple-border)}
.card-header, .card-footer{border-color: var(--purple-border)}
ol li::marker {
    color: var(--purple-two) !important; 
}

ol{padding-left: 1rem; margin-bottom: 0;}
ol li{margin-bottom: 10px;}
ol li:last-child{margin-bottom: 0} 

/* header css */
.main-header {background-color: var(--purple-light); border-bottom: 1px solid var(--purple-border); height: 77px;}
.main-header .navbar-brand img{width: 60px}
.main-header .nav-link, .category-header .nav-link{
    color: var(--purple-five) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.065rem;
}
.main-header .nav-link:hover, .category-header .nav-link:hover{ color: var(--purple-two) !important}
.main-header .nav-link.active, .category-header .nav-link.active{color: var(--purple-two) !important}
.challenges-dropdown{margin-left: 30px;}
.challenges-dropdown .btn{border: 1px solid var(--purple-two); background-color: var(--purple-two); color: var(--purple-light) !important; border-radius: 20px;} 
.challenges-dropdown .btn:hover, .challenges-dropdown .btn:focus{border: 1px solid var(--purple-two) !important; background-color: var(--purple-one) !important; color: var(--purple-two) !important; box-shadow: none} 
/* end header css */


/* category header css */
.challenges-dropdown .dropdown-menu{border: 1px solid #d79fff; font-size: 15px; top: 40px; border-radius: 8px; color: var(--purple-five) !important; padding: 0 !important; box-shadow: 0 0 14px 0px #5d3778;}
.challenges-dropdown .dropdown-menu li a{ color: var(--purple-light); border-bottom: 1px solid #d79fff }
.challenges-dropdown .dropdown-menu li:last-child a{ border-bottom: 0 }
.challenges-dropdown .dropdown-menu li a:hover{ background-color: var(--purple-one); color: var(--purple-five); }
.challenges-dropdown .dropdown-menu .dropdown-item{ padding: 0.5rem 1rem }
.challenges-dropdown .dropdown-menu li:first-child a{
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.challenges-dropdown .dropdown-menu li:last-child a{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
/* .challenges-dropdown:hover .dropdown-menu{
    display: block;
    right: 0;
    left: auto;
} */
.dropdown-toggle::after{margin-left: 7px;}
.category-header .has-dropdown{position: relative;}
.category-header .has-dropdown ul{list-style: none; display: none; position: absolute; left: 15px; z-index: 99; padding: 15px; background-color: var(--purple-five); width: 180px; border-radius: 8px;}
.category-header .has-dropdown ul a{
    font-weight: 700;
    color: #737373;
    text-decoration: none;
    margin-bottom: 5px;
    display: block;
}
.category-header .has-dropdown ul a:hover{ color: var(--bs-blue-one)}
.category-header .has-dropdown:hover > a + ul{display: block; animation: mymove 0.5s}
@keyframes mymove { 
    0%   {top: 60px; opacity: 0;}
    50%  {top: 40px; opacity: 0.5;}
    100% {top: 35px; opacity: 1;}
}
/* end category  header css */
 

/* footer css */
footer{
    background-color: var(--purple-light);
}
.company-logo img{ width: 70px}
.main-footer{
     padding: 50px 0;
     color: var(--purple-one);  
     border-top: 1px solid var(--purple-one); 
     background-color: var(--purple-two);
}
 
.bottom-footer{
   padding: 15px 0; 
   color: var(--purple-two);
}
.footer-links a{
    display: block;
    margin: 4px 0; 
    font-weight: 600;
    text-decoration: none; 
}
.bottom-footer a, 
.footer-links a{color: var(--link2);} 
.footer-links a:hover, .bottom-footer a:hover{ 
    color: var(--purple-one);
}
.bottom-footer a{font-weight: 600;}
.footer-links h4{
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 700;
    color: var(--purple-one);
}
.footer-social-links a {
    display: inline-flex;
    border-radius: 20px;
    margin-right: 5px;
    width: 35px;
    height: 35px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--purple-two);
    background-color: var(--purple-one);
    border: 0;
}
.footer-social-links a:hover{background-color: var(--purple-light) !important; border: 0 !important}
.footer-social-links a:hover svg path{fill: var(--purple-five)}
.footer-newsletter .btn{border: 1px solid var(--purple-one); background-color: transparent; color: var(--purple-one); margin-bottom: 10px; font-size: 13px; font-weight: 700; border-radius: 20px;}
.footer-newsletter .btn:hover{border: 1px solid var(--purple-one); background-color: var(--purple-one); color: var(--purple-five)}
/* end footer css */



/* default css  */
.main{min-height: calc(100vh - 76px);}
.scroll-top {
    width: 44px;
    height: 44px;
    line-height: 40px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    font-size: 25px;
    color: var(--purple-one);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: none;
    background: var(--purple-three); 
    border-radius: 50%;
    border: 1px solid var(--purple-three);
    box-shadow: 0 1px 36px rgb(31 7 48);
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out; 
}
.scroll-top svg{width: 22px; height: 22px}
.section-padding{
    padding: 70px 0
}

.bg-light-blue{
    /* background-color: #060e7c; */
    background-color: var(--purple-light);
}
.text-yellow{color: var(--purple-three)}
.light-yellow-path{fill: var(--purple-three)}
.dark-blue-path path{fill: var(--purple-one)}



/* active challenges */
.s-title {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}

.s-title div{
    color: #a8b3ff;
}

.text-danger{ color: #ff6977;}
.form-check-input{
    background-color: #868dff94;
    border-color: #868dff94;
}
.form-check-input:checked {
    background-color: var(--purple-three);
    border-color: var(--purple-three);
}

.s-title-2{
    margin-bottom: 50px;
}

.s-title h2, .s-title-2 h2{
    font-size: 30px;
    font-weight: 700; 
    margin-bottom: 10px;
    color: var(--purple-two);
}
.s-title p {
    margin-bottom: 0;
    color: var(--purple-three);
}
.s-title::after {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 2px;
    bottom: -20px;
    left: 50%; 
    background: var(--purple-two);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.shadow-lg {
    box-shadow: 0 1rem 3rem rgb(9 14 49) !important;
}
.purple-theme-offset{background-color: var(--purple-two);}
.card-img, .card-img-top {
    border-top-left-radius: 9px !important;
    border-top-right-radius: 9px !important;
}
.text-pink{color: #1fbff0} 
.text-purple{color: var(--purple-one)} 
.text-truncate-2{
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-white{color: var(--purple-five);}
.challenge-grid{ position: relative }
.card-holder{width: 100%; height: auto;}
.challenge-card{padding: 30px 40px 78px 52px;position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column;}
.single-challenge.position-relative .badge{left: 37px !important; top: 20px !important;}
.modal-content{border-radius: 12px; background-color: transparent;}
.modal-header{background-color: var(--purple-two-3); border-top-right-radius: 10px; border-top-left-radius: 10px; border-color: var(--modal-border);}
.modal-footer{background-color: var(--purple-two-3); border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-color: var(--modal-border);}
/* .modal-title{color: var(--purple-one) !important} */
.modal-title{color: #000 !important}
.modal-body{background-color: var(--purple-two);}
.modal p, 
.modal label:not(.error), 
.modal span, 
.modal li, 
.modal h4, 
.modal h5, 
.modal h3{
    color: var(--purple-one); 
} 

#client_signup_form .select2-container,
#creator_signup_form .select2-container{width: 100% !important}

 .grecaptcha-badge{opacity: 0;}

#client_signup_form .btn,
#creator_signup_form .btn{width: 150px !important; margin: 5px; font-weight: 300;}

#client_signup_form .select2-search__field,
#creator_signup_form .select2-search__field{color: var(--purple-one)!important}

#client_signup_form .select2-container .select2-selection, 
#creator_signup_form .select2-container .select2-selection{
    color: var(--purple-one) !important;
    background-color: var(--input-bg) !important; 
    border: 1px solid #bc7be9 !important;
    font-size: 15px;
    height: 40px;
    border-radius: 50rem !important;
}

#client_signup_form .select2-container .select2-dropdown, 
#creator_signup_form .select2-container .select2-dropdown{
    background-color: #d8a5e3;
    border: 1px solid #bc7be9;
}

#client_signup_form .select2-container.select2-container--focus .select2-selection, 
#creator_signup_form .select2-container.select2-container--focus .select2-selection{
    background-color: #d8a5e3 !important;
    border: 1px solid #bc7be9;
}
#client_signup_form .select2-container .select2-results__options li, 
#creator_signup_form .select2-container .select2-results__options li{
    color: #fff !important;
}

#client-signup-form .form-control, #creator_signup_form .form-control
{
    color: var(--purple-one);
    background-color: var(--input-bg);
    border: 1px solid #bc7be9;
    font-size: 15px;
    min-height: 40px;
}

#client_signup_form .select2-container--default .select2-selection--multiple .select2-selection__choice,
#creator_signup_form .select2-container--default .select2-selection--multiple .select2-selection__choice {margin-top: 8px !important; font-size: 14px !important; font-weight: 300; background-color: var(--purple-one) !important; border-radius: 10px !important; border: 0 !important}

#client_signup_form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
#creator_signup_form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { border-right: 1px solid #885789 !important; }

#client_signup_form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove span,
#creator_signup_form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove span{color: var(--purple-two) !important; }

#client_signup_form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover span,
#creator_signup_form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover span{color: var(--purple-one) !important; }

#client_signup_form .select2-results__options, 
#creator_signup_form .select2-results__options{background-color: var(--purple-two);}

#client_signup_form .select2-results__options .select2-results__option--heighlighted,
#creator_signup_form .select2-results__options .select2-results__option--heighlighted
{background-color: #060d81;}

#client_signup_form .select2-container--default .select2-selection--multiple .select2-selection__choice__display,
#creator_signup_form .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding: 2px 9px 2px 2px !important;
    color: var(--purple-two) !important;
}


#client_signup_form .select2-container .select2-search--inline .select2-search__field,
#creator_signup_form .select2-container .select2-search--inline .select2-search__field {
    font-size: 15px;
    margin-top: 9px;
    margin-left: 0.75rem !important; 
}
.input-group-text{
    color: var(--purple-one) !important;
    background-color: #d8a5e3;
    border-color: #bc7be9;
}

#client-signup-form .form-control:focus, #creator_signup_form .form-control:focus
{
    background-color: #d8a5e3;
    border: 1px solid #bc7be9;
    box-shadow: none;
}

#client-signup-form form label.error, #creator_signup_form .form-control label.error{
    color: #ff6977;
    margin-bottom: 5px;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 300;
    width: 100%;
} 
.scroll-top{display: none;}
.challenge-card-body img{width: 28px; margin-right: 6px}
.single-challenge .card-title{font-size: 18px; padding: 0 20px; height: 48px; margin-bottom: 15px; line-height: 1.3; text-transform: uppercase;}
.single-challenge .card-title a{color: var(--purple-one) !important; text-decoration: none;}
.challenge-grid{
    font-weight: 600;
}
.challenge-info p, 
.challenge-info span{font-size: 17px;}
.challenge-info p{color: #000 !important}
.challenge-info p{margin-bottom: 3px; padding-right: 80px; position: relative;} 
.challenge-info p > span{position: absolute; right: 0; top: 0;}
.challenge-info p.time-left {display: flex;padding-right: 0;}
.challenge-info p.time-left > span:nth-child(1) {position: relative;}
.challenge-info p.time-left > span:nth-child(2) {position: relative; display: flex; text-align: center;margin-left: auto;}
.challenge-info p.time-left > span > span {margin-left: 5px;}
.single-challenge .challenge-img{height: 180px; width: 117px; margin: 6px auto 20px auto; border-radius: 25px; object-fit: cover; object-position: top center;}
.challenge-grid:hover .btn{background-color: var(--purple-one); color: #fff; border-color: var(--purple-one);}
.challenge-grid .btn{border-radius: 30px; padding: 10px 35px; width: auto; font-weight: 700; display: inline-block; font-size: 15px; text-transform: uppercase; border: 2px solid var(--purple-one); color: var(--purple-one) }
.single-challenge .btn:hover{color: var(--purple-five); border: 2px solid var(--purple-one); background-color: var(--purple-one);}
.circle-btn .btn{
	margin-right: 18px;
	margin-bottom: 15px;
	padding: 10px 25px; 
	transition: 0.5s;
	border-radius: 22px;
	font-size: 15px;
	font-weight: 700; 
}
#client_signup_form .modal-body, #creator_signup_form .modal-body{border-radius: 10px;}
.modal-footer .btn{
     font-weight: 600;
     color: #fcb2fd;}
.btn{
     font-weight: 600;
}
.modal-footer, .modal-header, .modal-body{padding-left: 20px; padding-right: 20px;}
.form-check-group {margin-bottom: 15px;} 

  
.circle-btn .btn:hover{  
	background-color: var(--bs-blue-three);
	color: var(--purple-five);
}
.filter-challenge input, 
.filter-challenge .form-control, 
.filter-challenge .form-select{
    background-color: var(--purple-two);
    border-radius: 20px;
    min-height: 40px; 
    border: 0;
    width: 220px;
    display: inline-block;
    font-size: 14px; 
    color: var(--purple-one);
}

.filter-challenge input:focus, 
.filter-challenge .form-control:focus, 
.filter-challenge .form-select:focus{
    background-color: var(--purple-two); 
    box-shadow: none;
    outline: 0;
    color: var(--purple-one)
}
.filter-challenge input::placeholder, 
.filter-challenge .form-control::placeholder, 
.filter-challenge .form-select::placeholder,
.filter-challenge input::-ms-input-placeholder, 
.filter-challenge .form-control::-ms-input-placeholder, 
.filter-challenge .form-select::-ms-input-placeholder,
.filter-challenge input::-webkit-input-placeholder, 
.filter-challenge .form-control::-webkit-input-placeholder, 
.filter-challenge .form-select::-webkit-input-placeholder
{
    color: var(--purple-five) !important;
    opacity: 1;
}

.tooltip-inner {
    max-width: 460px;
}
.tooltip-inner ol li{text-align: left;}
.tooltip-inner ol li{list-style: disc; margin-bottom: 0;}

.filter-challenge input{
    padding-left: 40px;
}

.filter-challenge svg path{fill: var(--purple-one)}
.filter-challenge input:focus, .filter-challenge select:focus{
    background-color: #eee;
}

.filter-challenge input{
    width: 200px;
}
.form-check-input:focus { 
    outline: 0;
    box-shadow: 0 0 0 0.25rem #a17a59;
}
.form-check-input:checked[type=radio] { 
    background-color: var(--purple-three) !important;
    background-blend-mode: unset;
}

.pabs {position: absolute}
.left-10{left: 15px} 
.top-center{top: calc(50% - 8px)}
.challenge-info p svg{position: absolute;left: 0; top: 0}
.challenge-info p svg{position: absolute;left: 0; top: 3px} 
.bootbox .modal-title{color: var(--bs-blue-three)}
.bootbox .modal-body{color: #000;}
.bootbox .modal-footer .btn{background-color: var(--purple-one); border-color: var(--purple-one); color: var(--purple-two);}
.btn-outline-primary-light{
	margin-right: 18px;
	margin-bottom: 15px;
	border: 1px solid var(--bs-blue-three);
	padding: 10px 25px;
	color: var(--bs-blue-three);
	transition: 0.5s;
}
.btn-outline-primary-light:hover{  
	background-color: var(--bs-blue-three);
	color: var(--purple-five);
}
label.error{font-size: 13px; color: #dc3545; font-weight: 700;}

.btn-blue-light{background-color: var(--purple-one); border: 1px solid var(--purple-one); color: var(--purple-five)}
.btn-blue-light:hover{background-color: var(--bs-blue-three); border: 1px solid var(--bs-blue-three); color: var(--purple-five)}
.f-15{font-size: 15px;}
.fw-500{font-weight: 500;}
.fw-400{font-weight: 400;}
.fw-600{font-weight: 600;}
.mw-150{min-width: 150px}
.f-16{font-size: 16px;}
.f-18{font-size: 18px;}
.f-20{font-size: 20px;}
.f-22{font-size: 22px;}
.f-25{font-size: 25px}
.f-30{font-size: 30px}
.f-35{font-size: 30px}
.mb-30{margin-bottom: 30px;}
.mb-50{margin-bottom: 50px;}
.fw-semibold{font-weight: 600;}
.py-12{padding-top: 10px; padding-bottom: 10px;}
.btn-round{border-radius: 25px;}
.btn{font-weight: 600;}



/* process  */
.img-center img {
    margin-left: auto;
    margin-right: auto;
}
.img-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
}
.icon-box.awf-item {
    margin-bottom: 20px;
}


.how-to-enter .steps-inner .col-lg-6:nth-child(3) .icon-box.awf-item,
.how-to-enter .steps-inner .col-lg-6:nth-child(4) .icon-box.awf-item{
    margin-bottom: 0;
}
.icon-box {
    margin-bottom: 30px;
    position: relative;
    -webkit-transition: .25s cubic-bezier(0.43, 0.49, 0.51, 0.68);
    transition: .25s cubic-bezier(0.43, 0.49, 0.51, 0.68);
}
.icon-box-details{ transition: 0.5s; display: flex; flex-direction: row; position: relative; padding-left: 70px; background: var(--purple-two); border-radius: 10px;} 
.steps-paragraph{color: #333}
.icon-box-icon{
    position: absolute;
    left: -25px;
    top: calc(50% - 33px);
    font-size: 20px;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--purple-one);
    background-color: var(--purple-two);
    border: 10px solid var(--purple-one);
}

.icon-box-details .icon-box-title{color: var(--purple-one);}
.steps-paragraph{padding-right: 15px}
.icon-box:hover .icon-box-details{transform: translateX(20px);}
.icon-box:hover .icon-box-details .steps-paragraph{color: #565656} 
.icon-box:hover .icon-box-details .icon-box-icon, 
.icon-box:hover .icon-box-details{background-color: #fff}


/* Brand Carouse  */
 
.slick-carousel, .slick-carousel-revers{
    -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0%) 0%, rgb(0 0 0) 12.5%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
}
.slick-carousel img, .slick-carousel-revers img{
    max-width: 120px;
    max-height: 50px;
    margin: auto;
}

.mb-70{margin-bottom: 70px}
 

.slick-carousel .slick-track,
.slick-carousel-revers .slick-track
{ 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px; 
    flex-direction: row;
    will-change: transfor
} 



/* category page  */
#category-name{ 
     font-weight: 700; 
     text-transform: uppercase; 
     font-size: 16px; 
     padding-left: 15px;
}


.joker-card {
    position: absolute;
    height: 125px;
    width: 125px;
    background: url(../images/joker.png) no-repeat center;
    background-size: contain;
    right: -20px;
    top: -20px;
    cursor: pointer;
}
#leaderboard_table_length {
    padding-left: 15px;
    padding-top: 8px;
}
#leaderboard_table_paginate {
    padding-right: 15px;
    padding-top: 5px;
}
#leaderboard_table_info {
    padding-left: 15px;
    text-align: center;
}
#winners_table_length {
    padding-left: 15px;
    padding-top: 8px;
}
#winners_table_paginate {
    padding-right: 15px;
    padding-top: 5px;
}
#winners_table_info {
    padding-left: 15px;
    text-align: center;
}
.table tbody td .btn{white-space: nowrap;}
.image-cont {
    border-radius: 10px;
    margin-top: 15px;
    position: relative;
}
.image-cont img {
    border-radius: 10px;
}
.image-cont.loading {
    width: 250px;
    height: 250px;
}
.image-cont.loading::after {
    content: '';
    background: url(../images/loader.gif) no-repeat center;
    background-size: 60px;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgb(255 255 255 / 30%);
    border-radius: 10px;
}

@media (min-width: 1281px) and (max-width: 1399px){
    .container{max-width: 1140px;}
    .navbar-custom .challenges-dropdown{display: none} 
    .challenge-grid{max-width: 100%; box-sizing: border-box; margin: auto auto 30px auto}
    .single-challenge .challenge-img{width: 85px; height: 131px; margin-top: 0; border-radius: 10px; margin-bottom: 10px;}
}
@media (min-width: 992px) and (max-width: 1280px){
    .container{max-width: 960px;}
    .navbar-custom .challenges-dropdown{display: none} 
    .single-challenge .card-title{height: 40px}
    .challenge-grid{max-width: 296px; box-sizing: border-box; margin: auto auto 30px auto}
    .single-challenge .challenge-img{width: 60px; height: 92px; border-radius: 10px; margin-bottom: 10px;}
    .single-challenge .card-title, .challenge-info p, .challenge-info span{font-size: 16px;}
    .single-challenge .card-title{margin-bottom: 10px;} 
    .challenge-info p{padding-right: 50px;}
    .challenge-card{padding: 10px 20px 58px 32px}
    .challenge-grid .btn{padding: 7px 25px}
    .how-to-enter .image-one{width: calc(100% - 150px); margin: auto}
    .section-padding{padding: 40px 0}
    .icon-box-icon{left: -10px}
    .joker-card{width: 100px; height: 100px}
}

@media (min-width: 992px){
    .navbar-custom .challenges-dropdown{
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 991px){
    .challenge-section .s-title-2 .col-md-5,
    .challenge-section .s-title-2 .col-md-7{
        flex: 0 0 auto;
        width: 100%;
    }

    .challenge-section .narrow-section .row .col-md-4 {
        flex: 0 0 auto;
        width: 50%;
    } 
}

@media (max-width: 991px){
    .main-header .navbar-collapse{
        position: fixed;
        left: 0;
        right: 0;
        background-color: var(--purple-one);
        padding: 40px;
        top: 77px;
        width: 100%
    }
    .navbar-collapse .challenges-dropdown{display: none;}
    .navbar-custom{display: inline-flex;}
    .navbar-custom .challenges-dropdown{margin-right: 20px;}

    /* slider css  */
    .swiper-slide .col-md-7,
    .swiper-slide .col-md-5{
        width: 100%
    }
    .main-banner .banner-content .title{font-size: 28px !important; margin-bottom: 15px !important;}
    .title span:nth-child(1){font-size: 35px !important;}
    .main-banner .banner-content .sub-title{font-size: 16px !important;}
    .main-banner .btn-wrapper{margin-top: 30px !important;}
    .h6-slider-img-1 img { top: 25px !important }
    .h6-slider-img img { width: 140px !important }
    .banner-content{text-align: center;}
    .h6-slider-img-1, .h6-slider-img-2{height: auto !important;}
    .h6-slider-img-1 .image-one, .h6-slider-img-2 .image-one{left: calc(50% - 150px) !important}
    .h6-slider-img-1 .image-two, .h6-slider-img-2 .image-two{right: calc(50% - 150px) !important}
    .banner-content .btn-wrapper .btn{font-size: 13px !important; padding: 6px 12px !important; margin-left: 0; margin-right: 0;}
    .main-banner .banner-content .sub-title{padding-right: 0 !important;}
    /* slider css  */


     /* home page  */
     .s-title-2, .filter-challenge, .challenge-section .col-md-7, .past-challenge-section .col-md-7{text-align: center !important;} 
     .s-title h2, .s-title-2 h2 {font-size: 25px}
     .text-end{text-align: left !important;}
     .filter-challenge{margin-top: 25px}
     .challenge-grid{max-width: 296px; box-sizing: border-box; margin: auto auto 30px auto}
     
     .single-challenge .challenge-img{width: 60px; height: 92px; border-radius: 10px; margin-bottom: 10px;}
     .single-challenge .card-title, .challenge-info p, .challenge-info span{font-size: 16px;}
     .single-challenge .card-title{margin-bottom: 10px;} 
     .challenge-info p{padding-right: 50px;}
     .challenge-card{padding: 10px 20px 58px 32px}
     .challenge-grid .btn{padding: 7px 25px}
     .how-to-enter .image-one{width: calc(100% - 150px); margin: auto}
     .section-padding{padding: 40px 0}
     .icon-box-icon{left: -10px}
     
     /* home page  */


     /* footer css  */
     .main-footer .col{
        flex: 1 0 100%;
     }
     .main-footer .col h4{margin-top: 20px;
     }
     .main-footer{padding: 40px 0}
     /* footer css  */
}

@media (max-width: 649px){
    .challenge-section .container .narrow-section .row .col-md-4{
        flex: 0 0 auto;
        width: 100% !important;
    }
    .single-challenge .card-title{height: 40px;}
    .joker-card{width: 100px; height: 100px}
}

@media (max-width: 1300px){
    .f-30, .f-35{font-size: 26px;}  
}
 
@media (max-width: 991px){
    .f-30, .f-35{font-size: 25px;}  
}


@media (min-width: 650px) and (max-width: 991px){
    .single-challenge .card-title{height: 40px;}
    .container{max-width: 650px; padding-left: 20px; padding-right: 20px; box-sizing: border-box;}  
    .challenge-section .container .narrow-section .row .col-md-4:nth-child(even) .challenge-grid{float: left;}
    .challenge-section .container .narrow-section .row .col-md-4:nth-child(odd) .challenge-grid{float: right}
    .joker-card{width: 90px; height: 90px}
}

@media (max-width: 480px){
    .main-banner .banner-content .title{font-size: 20px !important; margin-bottom: 10px !important;}
    .title span:nth-child(1){font-size: 25px !important;}
    .main-banner .banner-content .sub-title{font-size: 15px !important;}
    .sub-title p{margin-bottom: 0 !important;}
    .filter-challenge > div{margin-bottom: 5px; width: 100%; margin-right: 0 !important;}
    .filter-challenge input, .filter-challenge .form-control, .filter-challenge .form-select{width: 100%}
    #category-name { display: none; }
}


.dropdown-filter {
    min-width: 300px; 
    right: 0 !important;
    left: auto !important;
    min-height: 200px;
    padding: 15px;
    background-color: var(--purple-two);
    display: none;
    position: relative;
}
@media (min-width: 400px){
    .dropdown-filter { 
        min-width: 350px; 
        padding: 20px; 
    }
}
.dropdown-filter.show {
    display: block;
    position: absolute;
    z-index: 1;
    border: 1px solid #d79fff;
    top: 45px;
    border-radius: 20px;
    box-shadow: 0 0 14px 0px #5d3778;
}
.dropdown-filter .select2-container {
    width: 100% !important;
    min-height: 40px;
}
.dropdown-filter .select2-selection {
    min-height: 40px;
}
.select2-results__options {
    background-color: var(--purple-two);
}

/* width */
::-webkit-scrollbar {width: 7px; border: 1px solid var(--purple-border);}
::-webkit-scrollbar-track {outline: 1px solid var(--input-bg) !important; background: var(--input-bg); border-radius: 5px;}
::-webkit-scrollbar-thumb { background: var(--purple-one);border-radius: 5px}
::-webkit-scrollbar-thumb:hover {background: var(--purple-light)}

.dropdown-filter-cont{position: relative;}
.dropdown-filter-cont .select2-container .select2-search--inline .select2-search__field{margin-top: 10px;}
.dropdown-filter-cont .form-control,
.dropdown-filter-cont .select2-container--default .select2-selection--multiple
 {    
    color: var(--purple-one);
    background-color: var(--input-bg);
    border: 1px solid #ba6bbb;
    font-size: 14px;
    min-height: 40px;
    border-radius: 20px;
}

.dropdown-filter-cont .select2-container--default .select2-selection--multiple{padding-left: 8px; padding-right: 8px;}
.select2-results__options{background-color: var(--modal-border) !important}
.dropdown-filter-cont .select2-container--default .select2-selection--multiple .select2-selection__choice:first-child{margin-left: 0}
.dropdown-filter-cont .select2-container--default .select2-selection--multiple .select2-selection__choice{margin-top: 7px;background-color: var(--purple-one);color: var(--purple-one);border-radius: 14px; border: 1px solid #8961a5}
.dropdown-filter-cont .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{border-right: 1px solid #885689;}
.dropdown-filter-cont .select2-container--default .select2-selection--multiple .select2-selection__choice span{color: var(--purple-two)}
.select2-container--default .select2-dropdown{border: 1px solid var(--purple-border)}

.dropdown-filter-cont .form-check-input {background-color: transparent;border-color: var(--purple-one)} 
.dropdown-filter-cont .form-check-input:checked {background-color: var(--purple-one);border-color: var(--purple-one)} 
.dropdown-filter-cont .dropdown-filter label{color: var(--purple-one); font-weight: 500; font-size: 15px;}
.dropdown-filter-cont .dropdown-filter .form-group label{margin-bottom: 2px}
.dropdown-filter-cont .dropdown-filter-btn:hover{cursor: pointer;}
.dropdown-filter-cont .dropdown-filter-btn svg{height: 40px !important}
.dropdown-filter-cont .dropdown-filter-btn svg path{fill: var(--purple-two) !important;}
.dropdown-filter-cont .dropdown-filter-btn:hover svg path{fill: var(--purple-three) !important;}
.dropdown-filter-cont .btn{border: 2px solid var(--purple-one); min-height: 40px; background-color: var(--purple-one); color: var(--purple-five) !important; border-radius: 20px;} 
.dropdown-filter-cont .btn:hover, .dropdown-filter-cont .btn:focus{border: 2px solid var(--purple-light) !important; background-color: var(--purple-light) !important; color: var(--purple-two) !important; box-shadow: none} 
.dropdown-filter.show + .dropdown-filter-btn svg path {fill: var(--purple-three)}

.right-image-container .image-container{width: 460px}
.right-image-container .info-container{width: calc(100% - 460px )}
.right-image-container .image-container .image-box{width: 400px; height: 400px; overflow: hidden;} 
.right-image-container .image-container img{width: 100%; height: 100%; object-fit: cover; object-position: center; margin-bottom: 30px}
.right-image-container .info-container h3{font-size: 25px; margin-top: 0; margin-bottom: 30px}
.right-image-container .info-container p{line-height: 1.8;}
.no-results-found{
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background-color: var(--purple-one);
    border-radius: 10px;
}
.info-box a, .purple-one-link-area a, .generic-page a {
    color: #fe91ff !important;
}

.right-image-container .info-container .info-box {
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.right-image-container{  }

.right-image-container .info-container{ order: 1; padding-right: 40px; padding-left: 20px; }
.right-image-container .image-container{ order: 2; padding-left: 40px; padding-right: 20px; }

@media(max-width: 991px){
    .right-image-container .image-container {
        width: 100%;
    }
    .right-image-container .image-container .image-box {
        width: 250px;
        height: 250px;
        margin: auto auto 25px auto;
        overflow: hidden;
    }
    .right-image-container .image-container,
    .right-image-container .info-container{
        padding-left: 20px !important; padding-right: 20px !important; 
        flex: 0 0 auto;
        width: 100%;
    }

    .right-image-container{text-align: center;}
    .right-image-container .image-container{order: unset;}
    #client-newsletter {
        margin-top: 0 !important;
    }
}
.inside_div_inline div{
    display: none;
}
.form-control.error {
    /*border: 2px solid #ff6977 !important;*/
}
#upcomimg_challenges .challenge-grid {
    padding: 0 15px;
    color: var(--purple-two);
    font-size: 20px;
    font-weight: 400;
    text-align: center;
}
#upcomimg_challenges .challenge-image {
    height: 460px;
    width: 300px;
    margin: 6px auto 15px auto;
    border-radius: 20px;
    object-fit: cover;
    object-position: top center;
}

    
@media(max-width: 1280px){
    #upcomimg_challenges .challenge-image {
        height: 400px;
        width: 261px;
    }
}

.ziczac-grid .image-container{width: 460px}
.ziczac-grid .info-container{width: calc(100% - 460px )}
.ziczac-grid .image-container .image-box{width: 400px; height: 400px; overflow: hidden;} 
.ziczac-grid .image-container img{width: 100%; height: 100%; object-fit: cover; border-radius: 30px; object-position: center; margin-bottom: 30px}
.ziczac-grid .info-container h3{font-size: 25px; margin-top: 0; margin-bottom: 30px}
.ziczac-grid .info-container p{line-height: 1.8;}
 
.ziczac-grid .info-container .info-box {
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ziczac-grid h3{color: var(--purple-two) !important;}
.ziczac-grid { margin-bottom: 60px }
.ziczac-grid:last-child{ margin-bottom: 0; }

.ziczac-grid:nth-child(odd) .row .image-container { order: 1;  padding-left: 20px; padding-right: 40px }
.ziczac-grid:nth-child(odd) .row .info-container { order: 2;  padding-left: 40px; padding-right: 20px }

.ziczac-grid:nth-child(even) .row .info-container{ order: 1; padding-right: 40px; padding-left: 20px; }
.ziczac-grid:nth-child(even) .row .image-container{ order: 2; padding-left: 40px; padding-right: 20px; }

@media(max-width: 991px){
    .ziczac-grid .image-container {
        width: 100%;
    }
    .ziczac-grid .image-container .image-box {
        width: 250px;
        height: 250px;
        margin: auto auto 25px auto;
        overflow: hidden;
    }
    .ziczac-grid .image-container,
    .ziczac-grid .info-container{
        padding-left: 20px !important; padding-right: 20px !important; 
        flex: 0 0 auto;
        width: 100%;
    }

    .ziczac-grid {text-align: center;}
    .ziczac-grid .info-container h3{margin-bottom: 10px; font-size: 20px;}
    .ziczac-grid :nth-child(even) .row .image-container,
    .ziczac-grid :nth-child(odd) .row .image-container
     {order: unset;}
}

.studios-instagram-video {
    background: url('../images/video-bg.png') no-repeat center;
    padding: 35px 24px;
    width: 380px;
    height: 614px;
    margin: 0px auto;
}
.studios-instagram-video iframe {
    border-radius: 32px;
}
.studios-instagram-video-container {
    padding: 20px;
    max-width: 100%;
    width: 322px;
    margin-top: 0px;
}
.studios-instagram-video-container > .plyr--video {
    border-radius: 30px;
    margin-left: 8px;
    margin-top: 7px;
}

@media (max-width: 480px){
    .studios-instagram-video {
        padding: 35px 21px;
        width: 340px;
        height: 542px;
        margin: 0px auto;
        background-size: contain;
    }

    .studios-instagram-video-container {
        padding: 32px;
        max-width: 100%;
        width: 336px;
        margin-top: -13px;
    }
    .studios-instagram-video-container > .plyr--video {
        border-radius: 23px;
        margin-left: 0px;
        margin-top: 7px;
    }
}