@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: "Urbanist", sans-serif;
    transition: all 0.4s ease-in-out;
}

/* NAIGATION-----------------START------------------HERE------------------------ */

nav{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    transition: all 0.5s ease-in-out;
}

nav .nav-bar{
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
}

nav .nav-active-item{
    margin: 0 5px;
    padding: 4px 20px;
    position: relative;
    border-radius: 100px;
    overflow: hidden;
}

nav .nav-active-item::before{
    content:"";
    background: linear-gradient(90deg, #e91e63, #673ab7);
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    transition: 0.4s ease-in-out;
}

nav .nav-active-item:hover::before{
    width: 100%;
    right: auto;
    left: 0; 
}
nav .nav-active-link{
    color:#FFF;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

nav .nav-active-item.active::before{
    content:"";
    background: linear-gradient(90deg, #e91e63, #673ab7);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

nav .nav-show-btn,.nav-hide-btn{
    display: none;
}

.bttn{
    width: 150px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;
    color: #242424;
    font-weight: 700;
    border-radius: 100px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.bttn::before{
    content:"";
    background: linear-gradient(90deg, #e91e63, #673ab7);
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    transition: 0.4s ease-in-out;
}

.bttn:hover::before{
    width: 100%;
    right: auto;
    left: 0;
}

.bttn span{
    position: relative;
    z-index: 1;
}

.bttn:hover span{
    color: #FFF;
}

@media only screen and (max-width: 992px){
    nav .nav-bar{
        display: block;
        width: 300px;
        height: 100vh;
        position: fixed;
        top: 0;
        left: -100%;
        background: #000;
        transition: all 0.5s ease-in-out;
        z-index: 3;
    }
    nav .nav-active-item{
        width: max-content;
        margin: 25px 20px;
    }
    nav .nav-hide{
        width: 50px;
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(90deg, #e91e63, #673ab7);
        color: #FFF;
        border-radius: 100px;
        font-size: 20px;
        text-decoration: none;
        margin: 15px 15px 40px auto;
    }
    nav .nav-show-btn,.nav-hide-btn{
        display: block;
    }   
    .container-fluid{
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}
@media only screen and (max-width: 767px){
    nav .bttn{
        display: none;
    }
}

/* NAIGATION-----------------EDNS------------------HERE------------------------ */

/* BANNER-----------------START------------------HERE------------------------ */

.banner{
    background-image: url(../images/banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    min-height: 110vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.banner::before{
    content: "";
    background: #00000070;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.sub{
    border: 1px solid #FFF;
    border-radius: 100px;
    width: 170px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    font-weight: 700;
}

.banner h1{
    font-size: 65px;
    letter-spacing: 1px;
}

.banner h1 span{
    -webkit-text-stroke: 1px #FFF;
    color: transparent;
}

.banner .img-1{
    width: 80%;
    margin: 0 0 0 auto;
    display: block;
    position: relative;
    bottom: -50px;
    animation: move 4s infinite linear;
    z-index: 1;
}
@keyframes move {
    0%,100%{
        transform: scale(1.1);
    }50%{
        transform: scale(1);
    }
}

.banner .img-2{
    position: absolute;
    top: -60px;
    left: 0;
    width: 200px;
    animation: move 4s infinite linear;
    z-index: 1;
}

.banner .bar{
    background: linear-gradient(90deg, #e91e63, #673ab7);
    width: 250px;
    height: 750px;
    border-radius: 200px;
    position: absolute;
    bottom: -300px;
    left: 50px;
    transform: rotate(30deg);
    z-index: 0;
}

@media only screen and (max-width: 1200px){
    .banner h1{
        font-size: 55px;
    }
    .banner .bar {
        height: 650px;  
        width: 200px;   
    }
}
@media only screen and (max-width: 992px){
    .banner p{
        font-size: 16px !important;
    }
    .banner .img-1 {
        width: 100%;
    }
    .banner h1{
        font-size: 40px;
    }
    .banner .bar {
        left: -50px;
        height: 600px;
    }
    .banner .img-2 {
        width: 150px;
    }
    .banner .banner-content {
        padding: 0 !important;
    }
}
@media only screen and (max-width: 767px){
    .banner h1{
        font-size: 30px;
    }
    .banner .sub,.banner .bttn{
        margin: 0 auto !important;
    }
    .banner #banner-content-1{
        margin: 100px 0 50px 0 !important;
        text-align: center;
    }
}

/* BANNER-----------------EDNS------------------HERE------------------------ */

/* ABOUT-----------------START------------------HERE------------------------ */

.about{
    background: #242424;
    padding: 100px 0;
}

.about h1{
    font-size: 50px;
}

.about h1 span{
    -webkit-text-stroke: 1px #FFF;
    color: transparent;
}

.about .img-1,.about .img-2{
    border: 4px solid #FFF;
    border-radius: 200px;
    position: relative;
}

.about .img-3{
    position: absolute;
    right: 0;
    bottom: -150px;
    width: 300px;
}

.about .img-1{
    animation: up 4s infinite linear;
}
@keyframes up {
    0%,100%{
        transform: translateY(-15px);
    }50%{
        transform: translateY(15px);
    }
}

.about .img-2{
    animation: down 4s infinite linear;
}
@keyframes down {
    0%,100%{
        transform: translateY(15px);
    }50%{
        transform: translateY(-15px);
    }
}

@media only  screen and (max-width: 1200px){
    .about li{
        font-size: 14px;
    }
    .about h1 {
        font-size: 40px;
    }
}
@media only  screen and (max-width: 992px){
    .about .img-3 {
        position: absolute;
        right: 0;
        bottom: -100px;
        width: 200px;
    }
    .about h1 {
        font-size: 30px;
    }
    .about p{
        font-size: 14px;
    }
}
@media only  screen and (max-width: 767px){
    .about .abt-content{
        margin: 40px 0;
        text-align: center;
    }
    .about .sub,.about .bttn{
        margin: 0 auto;
    }

}


/* ABOUT-----------------EDNS------------------HERE------------------------ */

/* OUR-----------------START------------------HERE------------------------ */

.our h1{
    font-size: 45px;
}

.g-h{
    background: linear-gradient(90deg, #e91e63, #673ab7);
    background-clip: text;
    color: transparent;
}

.our .our-content{
    border: 15px solid #242424;
    border-radius: 20px;
    padding: 20px 10px;
    height: 330px;
    overflow: hidden;
}

.our .swiper-slide-active .our-content{
    height: auto;
}

.our img{
    height: 200px !important;
}

.our .bttn{
    background: #242424;
    color: #FFF;
}

@media only screen and (max-width: 767px){
    .our h1{
        font-size: 30px;
    }
}

/* OUR-----------------EDNS------------------HERE------------------------ */

/* TEXT-----------------START------------------HERE------------------------ */

.text{
    background: linear-gradient(90deg, #e91e63, #673ab7);
    padding: 15px 0;
}

.text  h3{
    font-size: 27px;
}

.text .swiper-wrapper{
    transition-timing-function: linear !important;
}

@media only screen and (max-width: 1200px){   
    .text  h3{
        font-size: 19px;
    }   
}
@media only screen and (max-width: 992px){   
    .text  h3{
        font-size: 23px;
    }   
}
@media only screen and (max-width: 767px){   
    .text  h3{
        font-size: 20px;
    }   
}

/* TEXT-----------------EDNS------------------HERE------------------------ */

/* WE-----------------START------------------HERE------------------------ */

.we h1{
    font-size: 60px;
    word-spacing: 5px;
}

.we .we-content{
    border-right: 1px solid #242424;
    padding: 30px 10px;
}

.we .bttn{
    background: #242424;
    color: #FFF;
}

@media only screen and (max-width: 1200px){
    .we h1 {
        font-size: 50px;
    }
}
@media only screen and (max-width: 992px){
    .we h1 {
        font-size: 40px;
    }
    .we span {
        font-size: 14px;
    }
}
@media only screen and (max-width: 767px){
    .we h1 {
        font-size: 30px;
        width: 100% !important;
    }   
    .we .we-content{
        border-right: 1px solid #242424 !important;
    }
    .we span {
        font-size: 15px;
    }
}

/* WE-----------------EDNS------------------HERE------------------------ */

/* PORTFOLIO-----------------START------------------HERE------------------------ */

.portfolio h1{
    font-size: 45px;
}

.portfolio{
    background: #242424;
    padding: 100px 0;
}

.portfolio .button{
    text-decoration: none;
    color: #FFF;
    padding: 5px 30px;
    border-radius: 100px;
    margin: 5px 10px;
    cursor: pointer;
    font-size: 18px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #e91e63, #673ab7);
}

.portfolio .button:hover{
    background: linear-gradient(-90deg, #e91e63, #673ab7);
}

.portfolio .button.active{
    background: #673ab7;
}

.portfolio .overflow-hidden{
    height: 350px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(128, 128, 128, 0.185);
}

.portfolio .img-1{
    transition: all 2s ease-in-out;
}

.portfolio .port-content:hover .img-1{
    transform: translateY(-65%);
}

.portfolio .img-2{
    height: 350px;
}

@media only screen and (max-width: 992px){
    .portfolio .port-title{
        width: 100% !important;
    }
}
@media only screen and (max-width: 767px){
    .portfolio h1{
        font-size: 30px;
    }
    .portfolio p{
        font-size: 14px;
    }
    .portfolio .overflow-hidden{
        height: 300px;
    }
    .portfolio .overflow-hidden .img-2{
        height: 300px;
    }
}

/* PORTFOLIO-----------------EDNS------------------HERE------------------------ */

/* STORY-----------------START------------------HERE------------------------ */

.story{
    background: #242424;
    padding: 25px 0 100px 0;
    overflow: hidden;
}

.story h1{
    font-size: 50px;
}

.story h1 span{
    -webkit-text-stroke: 1px #FFF;
    color: transparent;
}

.story .img-1,.story .img-2{
    border: 4px solid #FFF;
    border-radius: 200px;
    position: relative;
}

.story .img-1{
    animation: up 4s infinite linear;
}
@keyframes up {
    0%,100%{
        transform: translateY(-15px);
    }50%{
        transform: translateY(15px);
    }
}

.story .img-2{
    animation: down 4s infinite linear;
}
@keyframes down {
    0%,100%{
        transform: translateY(15px);
    }50%{
        transform: translateY(-15px);
    }
}

@media only screen and (max-width: 992px){
    .story h1 {
        font-size: 35px;
    }
    .story p{
        font-size: 14px;
    }
    .story h2{
        font-size: 25px;
    }
}
@media only screen and (max-width: 767px){
    .story .story-content{
        text-align: center;
    }
    .story .sub,.story .bttn{
        margin: 0 auto;
    }
    .story h1 {
        font-size: 30px;
    }
    .story .story-content{
        margin: 20px 0;
    }
}

/* STORY-----------------EDNS------------------HERE------------------------ */

/* SERVICES-----------------START------------------HERE------------------------ */

.service .serv-content{
    border-bottom: 3px solid #000;
    transition: all 0.5s ease-in-out;
}

.service .serv-content:hover{
    background: linear-gradient(90deg, #e91e63, #673ab7);
}

.service .serv-content:hover p , .serv-content:hover .serv-info h2{
    color: #FFF !important;
}

.service .serv-content:hover .sub{
    color: #FFF !important;
    border-color: #FFF !important;
}

.service .serv-content:hover .img{
    transform: rotate(-12deg);
}

.service .serv-content.active .img{
    transform: rotate(-12deg);
}

.service .serv-content.active{
    background: linear-gradient(90deg, #e91e63, #673ab7);
}

.service .serv-content.active p , .serv-content.active .serv-info h2{
    color: #FFF !important;
}

.service .serv-content.active .sub{
    color: #FFF !important;
    border-color: #FFF !important;
}

.service .img{
    border: 5px solid #000;
    transform: rotate(-5deg);
    width: 250px;
    margin: 0 auto;
    display: block;
}

.service .s-btn{
    width: 60px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    background: #000;
    border-radius: 100px;
    text-decoration: none;
    font-size: 25px;
    transform: rotate(-40deg);
    border: 1px solid #000;
}

.service .s-btn:hover{
    background: transparent;
    color: #000;
}

@media only screen and (max-width: 1200px){
    .service .img {
        width: 100%;
    }
    .service p{
        font-size: 16px !important;
    }
    .service h2{
        font-size: 25px;
    }
}
@media only screen and (max-width: 992px){
    .service p{
        font-size: 14px !important;
    }
    .service h2{
        font-size: 19px;
    }
}
@media only screen and (max-width: 767px){
    .service .img{
        width: 200px;
    }
    .service .serv-info{
        text-align: center;
        padding: 20px 0 !important;
    }
    .service .sub,.service .s-btn{
        margin: 0 auto;
    }
    .service h2{
        font-size: 23px;
    }
    .service h1{
        font-size: 30px;
    }
}

/* SERVICES-----------------EDNS------------------HERE------------------------ */

/* FOOTER-----------------START------------------HERE------------------------ */

.footer{
    background: #242424;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    padding: 80px 0;
}

.footer form{
    border: 1px solid #FFF;
    border-radius: 10px;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

.footer #email{
    width: 90%;
    height: 45px;
    padding: 0 10px;
    background: transparent;
    border: none;
    color: #FFF;
}

.footer #email::placeholder{
    color: #FFFF;
}

.footer #email:focus{
    outline: none;
}

.footer .f-btn{
    width: 52px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 20px;
}

.footer li a:hover{
    color: #7a7a7a !important;
}

.footer .icn{
    width: 40px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;
    border-radius: 100px;
    color: #e91e63;
    text-decoration: none;
    margin-right: 10px;
}

@media only screen and (max-width: 992px){
    .footer img{
        width: 170px !important;
    }
}
@media only screen and (max-width: 767px){
    .footer .footer-content{
        margin: 20px 0;
    }
}

/* FOOTER-----------------EDNS------------------HERE------------------------ */

/* ABOUT-----------------PAGE-----------------START------------------HERE------------------------ */

/* BANNER_2-----------------START------------------HERE------------------------ */

.banner-2{
    background-image: url(../images/banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 350px;
    display: flex;
    align-items: center;
}

.banner-2 h1{
    font-size: 55px;
}

/* BANNER_2-----------------EDNS------------------HERE------------------------ */

/* SUCCESS-----------------START------------------HERE------------------------ */

.success{
    background: #F6F6F6;
    padding: 100px 0;
}

.success .success-content{
    box-shadow: 0 0 10px gray;
    border-radius: 20px;
    padding: 40px 20px;
}

/* SUCCESS-----------------EDNS------------------HERE------------------------ */

/* DIGITAL-----------------START------------------HERE------------------------ */

.digital{
    background: #242424;
    padding: 100px 0;
}

.digital .container-fluid{
    background: #FFF;
    border-radius: 30px;
    width: 95%;
    padding: 40px;
}

.digital .bttn{
    background: #242424;
    color: #FFF;
}

@media only screen and (max-width: 1200px){
    .digital .digital-content{
        margin: 0 !important;
    }
}
@media only screen and (max-width: 992px){
    .digital .digital-content{
        padding: 0 !important;
    }
    .digital p{
        width: 100% !important;
    }
}
@media only screen and (max-width: 767px){
    .digital img{
        height: 250px !important;
    }
    .digital .digital-content{
        text-align: center;
        margin: 20px 0 !important;
    }
    .digital .sub,.digital .bttn{
        margin: 0 auto;
    }
    .digital p{
        font-size: 14px;
    }
    .digital h1{
        font-size: 30px;
    }
    .digital .container-fluid{
        padding: 15px 12px;
    }
    .success p{
        font-size: 14px !important;
    }
    .success .success-content{
        padding: 40px 12px;
    }
    .success h1{
        font-size: 30px;
    }
}

/* DIGITAL-----------------EDNS------------------HERE------------------------ */

/* CONTACT-----------------START------------------HERE------------------------ */

.get{
    background: #F6F6F6;
    padding: 100px 0;
}

.get small{
    width: 70px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    text-decoration:none;
    color: #FFF;
    background: linear-gradient(90deg, #e91e63, #673ab7);
    font-size: 28px;
}

.contact{
    background: #F6F6F6;
    padding-bottom: 100px;
}

.contact .contact-content{
    background: #F1F1F1;
    width: 80%;
    margin: 0 auto;
    border-radius: 20px;
    padding: 40px;
}

.contact #name{
    width: 100%;
    height: 45px;
    padding: 0 10px;
    margin-bottom: 20px;
    border: none;
    border-radius: 5px;
}

.contact #name:focus{
    outline-color: #673ab7;
}

.contact .bttn{
    background: #242424;
    color: #FFF;
}

@media only screen and (max-width: 1200px){
    .get .get-content{
        margin: 0 !important;
    }
}
@media only screen and (max-width: 992px){
    .get .get-content{
        padding: 0  !important;
    }
    .contact .contact-content{
        width: 100%;
    }
}
@media only screen and (max-width: 767px){
    .get .get-content{
        margin: 20px 0  !important;
        text-align: center;
    }
    .get .sub{
        margin: 0 auto;
    }
    .get .get-info{
        justify-content: center;
    }
    .get .get-info .d-block{
        text-align: left;
    }
    .contact .contact-content{
        padding: 30px 12px;
    }
}

/* CONTACT-----------------EDNS------------------HERE------------------------ */

/* ABOUT-----------------PAGE-----------------EDNS------------------HERE------------------------ */