*{
    box-sizing:border-box
}
*,:after,:before,ul.c-list li:before{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.iti__country-list,body,html,select{
    scrollbar-color:rgba(var(--clr-2),1) transparent;
    scroll-behavior:smooth;
    scrollbar-width:8px;
    scrollbar-width:thin
}
::-webkit-scrollbar{
    width:8px
}
::-webkit-scrollbar-thumb{
    border-radius:10px;
    background-image:linear-gradient(rgba(var(--clr-2),1),rgba(var(--clr-2),1))
}
::selection{
    color:rgba(var(--clr-1),1);
    background:rgba(var(--clr-4),1)
}
::-moz-selection{
    color:rgba(var(--clr-1),1);
    background:rgba(var(--clr-4),1)
}
html{
    scroll-snap-type:y mandatory
}
body{
    margin:0;
    right:0;
    -webkit-transition:margin-left .3s ease-in-out;
    transition:margin-left .3s ease-in-out;
    -webkit-overflow-scrolling:touch;
    font-family:Lato,serif!important;
    line-height:1.5;
    color:rgba(var(--dark-color),1);
    background:rgba(var(--light-color),1);
    overflow-x:hidden;
    font-size:15px
}
.icon,a{
    transition:.8s
}
.fw-700,b,strong{
    font-weight:700
}
a{
    text-decoration:none;
    cursor:pointer;
    outline:0!important;
    color:inherit
}
a.active,a:active,a:focus,a:hover{
    color:rgba(var(--clr-2),1)!important;
    outline:0!important
}
.bg-2 a.active,.bg-2 a:active,.bg-2 a:focus,.bg-2 a:hover{
    color: rgba(var(--clr-3),1)!important;
    outline:0!important
}
footer,section{
    overflow-x:hidden;
    overflow-y:clip
}
:after,:before{
    -webkit-box-sizing:inherit;
    box-sizing:inherit
}
.overlay{
    background: linear-gradient(#00000099, #6b0a1dcc);
    z-index:2
}
/*4th july banner start*/
/*.overlay {*/
/*    background-image: url(../img/publishingvalley-1920x880-4july.webp);*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*    background-position: bottom;*/
/*}*/

/*4th july banner end*/
.sub-services ul.nav {
    gap: 0.5rem;
}
.sub-services li.nav-item {
    max-width: 200px;
     width: 100%;
}
.sub-services .nav-link {
    width: 100%;
}
footer .overlay{
    background:linear-gradient(rgba(var(--clr-3),1),rgba(var(--clr-4),.5))
}
audio,img,video{
    max-width:100%;
    height:auto
}
.heading,h1,h2,h3,h4,h5,h6{
    font-style:normal;
    font-family:Merriweather,serif;
    line-height:1.5;
    transition:.8s
}
.f-60{
    font-size:60px
}
.f-55{
    font-size:55px
}
.f-45{
    font-size:45px
}
.f-40{
    font-size:40px
}
.f-30{
    font-size:30px
}
.f-24{
    font-size:24px
}
.f-18{
    font-size:18px
}
.clr-1{
    color:rgba(var(--clr-1),1)
}
.clr-2{
    color:rgba(var(--clr-2),1)
}
.clr-3{
    color:rgba(var(--clr-3),1)
}
.box:hover .clr-2,.clr-l,.form-control:focus,.iti input:focus .iti__selected-dial-code,input:focus{
    color:rgba(var(--light-color),1)!important
}
.bg-1,.iti__country,.number,span.line{
    background:rgba(var(--clr-2),1);
    color:rgba(var(--light-color),1)
}
.bg-1 .btn,.bg-1 button,.bg-2,.btn-2,.clr-l .btn,.cta .overlay .icon,.cta .overlay button{
    background:rgba(var(--clr-2),1)!important
}
.bg-g-2{
    background:linear-gradient(86deg,rgba(var(--clr-2),1),rgba(var(--clr-3),1))!important
}
.bg-3{
    background:rgba(var(--clr-3),1)
}
.bg-l{
    background:rgba(var(--light-color),1)
}
.bg-d,.bg-d select option,.btn-3,.iti__country.iti__highlight{
    background:rgba(var(--dark-color),1)
}
.bg-1-l{
    background:rgba(var(--clr-1),.12)
}
.bg-2 button,.btn,button{
    background:linear-gradient(45deg,rgba(var(--clr-1),1),rgba(var(--clr-3),1))
}
.btn,button{
    border:none!important;
    text-transform:uppercase;
    padding:10px 20px!important;
    border-radius:50px!important;
    transition-duration:.8s;
    font-size:inherit;
    color: rgb(255 255 255) !important;
}
.icona:hover .icon,.nav-link{
    background:rgba(var(--clr-2),1)
}
.nav-link{
    padding:10px!important;
    font-size:11px;
    color:rgba(var(--light-color),1)!important
}
.accordion-button,.nav-link.active,.nav-link:focus,.nav-link:hover{
    color:rgba(var(--dark-color),1)!important
}
.accordion-button{
    background:rgba(var(--light-color),1)!important
}
.accordion-item{
    border-radius:25px!important
}
.bg-2 button:hover,.btn.active,.btn:hover,button.active,button:hover{
    background:linear-gradient(225deg,rgba(var(--clr-1),1),rgba(var(--clr-3),1))
}
.form-control,input,select,select input{
    background:rgba(var(--dark-color),.25);
    color:inherit!important;
    border:1px solid rgba(var(--clr-2),1);
    box-shadow:unset!important;
    transition-duration:.8s;
    height:auto!important;
    border-radius:25px!important;
    overflow:hidden
}
.c-list li:before,.clr-l .form-control,.clr-l input,.clr-l select,.clr-l select input,.icon,select option{
    color:rgba(var(--light-color),1)
}
.form-control:focus,input:focus{
    outline:0;
    background:rgba(var(--light-color),1);
    border:1px solid rgba(var(--clr-1),1);
    box-shadow:none;
    color:rgba(var(--dark-color),1)!important
}
select option{
    background:rgba(var(--clr-1),1)
}
.form-control::placeholder,input::placeholder{
    color:rgba(var(--dark-color),1);
    opacity:1
}
.clr-l .form-control::placeholder,.clr-l input::placeholder{
    color:rgba(var(--light-color),1);
    opacity:1
}
input.phone,input[name=phone]{
    padding-left:75px!important
}
.iti__country-list{
    font-size:12px
}
.iti{
    display:block!important;
    width:100%!important
}
.c-list li:before,.icon,.loop-holder{
    display:flex
}
.bg-2 .icona:hover .icon,.bg-2 .iti__country-list{
    background:rgba(var(--clr-3),1)
}
.iti--separate-dial-code .iti__selected-flag{
    background-color:rgba(var(--clr-2),.8);
    color:rgba(var(--light-color),1);
    border-radius:25px 0 0 25px
}
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{
    background-color:rgba(var(--dark-color),.8)
}
.text-white .form-control:focus,.text-white input:focus{
    background:rgba(var(--clr-3),1);
    border:1px solid rgba(var(--clr-2),1)
}
.text-white .form-control::placeholder,.text-white input::placeholder{
    color:rgba(var(--light-color),1);
    opacity:1
}
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0
}
input[type=number]{
    --moz-appearance:textfield
}
label.h{
    z-index:-999999999
}
input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{
    font-size:16px
}
.slick-next:before,.slick-prev:before{
    color:rgba(var(--clr-2),1) !important;
}
.slick-dots li button,.slick-next,.slick-next:focus,.slick-next:hover,.slick-prev,.slick-prev:focus,.slick-prev:hover{
    background:0 0 !important;
}
.bg-2,.bg-2 .icon,.c-list li:before,.icon{
    background:linear-gradient(rgba(var(--clr-1),1),rgba(var(--clr-3),1))
}
.slick-next{
    right:2px
}
.slick-prev{
    left:-20px;
    z-index:9999
}
.banner,.cta-left,.sub-service .banner .overlay{
    z-index:2
}
@supports (-moz-appearance:none){
    SELECT{
        --moz-appearance:none !important;
        background:url(data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==) right center no-repeat !important;
        background-position:calc(100% - 5px) center !important;
    }
}
header{
    position:absolute;
    top:0;
    right:0;
    left:0;
    z-index:99
}
.banner,.bg-box,.c-list li,.cta{
    position:relative
}
.drop-down-cont,.loop-holder{
    position:absolute;
    overflow:hidden;
    left:0;
    right:0
}
.banner video{
    position:absolute !important;
    top:0;
    right:0;
    left:0;
    z-index:-1;
    height:100%;
    width:100vw;
    object-fit:cover
}
.banner-side img,.platform img,.platforms a img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center
}
.banner-side{
    width:100%;
    height:500px
}
.marquee{
    width:2000%
}
.loop-holder{
    white-space:nowrap;
    top:0
}
.loop-1{
    transform:rotate(3deg);
    background:linear-gradient(45deg,rgba(var(--clr-1),1),rgba(var(--clr-3),1)) !important;
    color:rgba(var(--light-color),1)
}
.loop-holder.loop-2{
    background:rgba(var(--light-color),1);
    transform:rotate(-3deg);
    border-top:2px solid;
    border-bottom:2px solid
}
.loop-holder__text{
    animation:30s linear infinite textLoop;
    font-size:24px;
    padding-right:.35em
}
@keyframes textLoop{
    0%{
        -webkit-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0)
    }
    100%{
        -webkit-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0)
    }
}
.loop-holder__text-2{
    animation:30s linear infinite textLoop-2;
    font-size:24px;
    padding-right:.35em
}
@keyframes textLoop-2{
    0%{
        -webkit-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0)
    }
    100%{
        -webkit-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0)
    }
}
.marketing-side,.nav-icon,img.logo{
    object-position:left;
    object-fit:contain
}
.icon{
    width:40px;
    height:40px;
    justify-content:center;
    align-items:center;
    border-radius:50px
}
img.logo{
    width:100%;
    height:100px;
    object-position:center
}
footer img.logo{
    height:150px
}
.bg{
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed
}
.drop-down-cont{
    width:100%;
    max-height:0;
    transition:max-height .8s ease-in;
    top:65%;
    box-shadow:0 13px 36px rgba(var(--dark-color),.5)!important;
    background-size:120px!important;
    background-repeat:no-repeat!important;
    background-position:RIGHT BOTTOM;
    z-index:9999999999;
    border-radius:25px
}
.drop-down-cont.active,.drop-down:hover .drop-down-cont{
    transition:max-height .8s ease-out;
    max-height:140vh
}
.c-list li:before{
    content:"\e903";
    font-family:icomoon;
    left:5px;
    border-radius:100%;
    width:20px;
    height:20px;
    padding:2px;
    position:absolute;
    font-size:8px;
    justify-content:center;
    align-items:center
}
img.lozad.cup,img.lozad.pot{
    position:absolute;
    height:100px
}
.drop-down-cont ul li{
    margin-right:0;
    display:block
}
.drop-down-cont ul li a{
    font-size:14px!important
}
.nav-icon{
    width:30px;
    height:30px;
    margin-right:3px
}
.drop-down-cont ul li a:hover .nav-icon{
    filter:invert(49%) sepia(59%) saturate(643%) hue-rotate(331deg) brightness(94%) contrast(83%)
}
.modal{
    z-index:99999999999999999999999999999999999
}
button.btn-close{
    padding:10px!important;
    top:-5px;
    opacity:1;
    background:red;
    z-index:99999999999;
    position:absolute;
    right:0
}
.c-list li{
    padding:5px 0 5px 35px
}
.box{
    border-radius:25px;
    border:2px solid rgba(var(--clr-2),1);
    height:100%;
    transition:.8s
}
.box:hover{
    background:rgba(var(--clr-1),1)!important;
    color:rgba(var(--light-color),1)!important;
    border:2px solid rgba(var(--light-color),1)
}
.genre .box:hover img{
    filter:brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(283deg) brightness(106%) contrast(101%)
}
.genere-icon{
    height:40px;
    width:40px;
    margin:0 auto 5px
}
.genre{
    margin-bottom:-100px
}
.pt-100{
    padding-top:100px
}
.genre .box{
    height:200px
}
img.lozad.cup{
    top:50px;
    right:0
}
img.lozad.pot{
    bottom:-30px
}
.platforms a{
    height:60px;
    width:80%;
    margin:0 auto;
    display:block
}
.marketing-side{
    height:450px;
    width:100%
}
.publishing-side{
    width:100%;
    height:500px;
    object-fit:contain;
    object-position:center bottom;
    margin-top:-100px
}
.bg-box{
    border-radius:50px;
    height:300px;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    overflow:hidden
}
.bg-box .overlay{
    height:100%;
    width:100%;
    background:linear-gradient(rgba(var(--clr-3),.8),rgba(var(--clr-2),.8));
    padding:20px;
    transform:translateY(70%);
    transition-duration:.8s
}
.bg-box:hover .overlay{
    transform:translateY(0)
}
.bg-box p{
    opacity:0
}
.bg-box:hover p{
    opacity:1
}
.gallery{
    width:100%;
    height:200px
}
.gallery img{
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 4px 10px rgba(var(--dark-color), .5))
}
.portfolio-slider{
    margin-bottom:-120px
}
li.nav-item{
    padding:0 2px 2px 0
}
.service-image{
    width:100%;
    height:400px;
    overflow:hidden;
    border-radius:25px
}
.service-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: right;
}
.sub-ban-left,.sub-ban-right{
    position:absolute;
    bottom:10%;
    width:200px;
    height:200px;
    object-fit:contain;
    z-index:-1
}
.sub-ban-left{
    left:0;
    bottom:20%;
    object-position:center left
}
.sub-ban-right{
    top:10%;
    object-position:center right;
    right:0
}
.reviews-silder img {
    width: 150px;
    height: 180px;
    object-fit: contain;
}
@media screen and (max-width:1367px){
    .publishing-side{
        height:550px;
        object-position:center bottom
    }
    .banner-side{
        width:100%;
        height:400px
    }
    .f-55{
        font-size:50px
    }
    body{
        font-size:14px
    }
    .f-24,.loop-holder__text{
        font-size:22px
    }
    .f-45{
        font-size:43px
    }
    .f-40{
        font-size:35px
    }
    .f-30{
        font-size:28px
    }
}
@media screen and (max-width:1181px){
    .sub-ban-left,.sub-ban-right{
        width:100px
    }
    .sub-ban-left{
        bottom:30%
    }
    .f-55{
        font-size:45px
    }
    .f-45{
        font-size:40px
    }
    .f-40{
        font-size:35px
    }
    .f-30{
        font-size:25px
    }
    .f-24,.loop-holder__text{
        font-size:20px
    }
    .f-18{
        font-size:17px
    }
    .genre{
        margin-bottom:-135px
    }
}
@media screen and (max-width:992px){
    .sub-ban-left,.sub-ban-right{
        width:80px
    }
    .sub-ban-left{
        bottom:10%
    }
    .sub-ban-right{
        top:5%
    }
    .nav-bar.active,.slideright{
        transform:translateX(0)
    }
    .f-60{
        font-size:50px
    }
    img.logo{
        object-position:center
    }
    .box{
        min-height:100px;
        margin-bottom:30px
    }
    .drop-down-cont{
        position:relative;
        color:rgba(var(--light-color),1)!important;
        box-shadow:unset;
        background-image:NONE!important
    }
    .drop-down-cont,.nav-bar{
        background:rgba(var(--dark-color),1)
    }
    .nav-bar{
        position:fixed;
        top:0;
        right:0;
        left:0;
        width:100vw;
        height:100vh;
        transform:translateX(200%);
        z-index:99999999;
        transition:.8s;
        padding-left:20px;
        padding-right:20px;
        color:rgba(var(--light-color),1);
        overflow-y:scroll
    }
    .nav-bar li{
        margin:10px auto
    }
    .drop-down-cont li{
        margin:5px 0!important
    }
}
@media screen and (max-width:767px){
    .c-list li:before {
    display: none;
    }
}
@media screen and (max-width:576px){
    .sub-ban-left,.sub-ban-right{
        width:50px
    }
    .sub-ban-left{
        bottom:8%
    }
    .service-image{
        height:300px;
        margin-top:50px
    }
    .marketing-side{
        height:200px;
        margin-bottom:20px;
        object-position:center
    }
    .publishing-side{
        height:400px
    }
    .f-55,.f-60{
        font-size:40px
    }
    .cta{
        border-radius:100px
    }
    .f-45{
        font-size:35px
    }
    .f-40{
        font-size:30px
    }
    .f-30{
        font-size:20px
    }
    .f-18{
        font-size:16px
    }
}
@media screen and (max-width:431px){
    body{
        font-size:12px
    }
    .btn,button{
        padding:10px!important
    }
}
.banner-side img{
    object-position:right
}