@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700&family=Open+Sans:wght@300;400;500;600;700;800&family=Roboto:wght@100;300;400;500;700&display=swap');

:root {
    --gradiant1: #ff5500;
    --gradiant2: #ff3300;
    --lightpurple: #ff5500;
    --mobilemenu1: #79297a;
    --mobilemenu2: #26579b;
    --warning: #e1dc00;
    --spotify: #1EC157;
    --youtube: #DD0808;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Noto Sans', 'Open Sans', 'Roboto', sans-serif;
}

.bg-dark {
    background-color: #000c !important;
    margin-top: 0px;
}

header {
    height: 60px;
    z-index: 1999;
    margin-top: 2rem;
    /* translate: ; */
    background-color: #b3b3b300;
    margin-bottom: 0px;
    position: absolute;
    width: 100%;
    background-color: #b3b3b300;
}

.col-10 ul {
    list-style: none;
    margin-top: 10px;
    /* padding-left: 10px; */
}

.col-10 ul li {
    display: inline-block;
}

.col-10 ul li a {
    display: inline-block;
    color: white;
    text-align: center;
    font-weight: 600;
    padding: 0px 20px;
    color: #fff;
    font-size: 17px;
    text-decoration: none !important;
}

.col-10 ul .dull:hover {
    background: var(--lightpurple);
    color: #fff;
    border-radius: 30px;
    display: inline-block;
    padding: 5px 0px;
}

.text-light p {
    font-size: 14px;
    color: white;
}

.col-10 ul .store .btn:hover {
    /* color: white; */
    color: var(--lightpurple);

}

.col-10 ul li.active {
    background: var(--lightpurple);
    color: #fff;
    border-radius: 30px;
    display: inline-block;
    padding: 5px 20px;
}

header .col-2 a {
    color: white;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
}

.hero {
    background: linear-gradient(30deg, var(--gradiant1), #ff33009e);
    height: 97vh;
}

.data {
    padding-top: 8rem;
}

.headphone img {
    width: 120%;
    height: auto;
}

.special-text {
    color: #000000;
    font-weight: 700;
}

.hero .ser_icon {
    line-height: 1.9rem;
    color: #fbe2ed;
    font-size: 16px !important;
}

.hero .ser_icon .fa-check-circle {
    color: white;
    font-size: 1.2rem;
    margin-right: 15px;
}

.navs {
    color: var(--lightpurple);
}

.nav-pills li {
    width: 17%;
    text-align: center;
    margin-left: 20px;
}

#cloud_active {
    background-color: var(--lightpurple);
    color: white;
}

#spotify_active {
    background-color: var(--spotify);
    color: white;
}

#youtube_active {
    background-color: #DD0808;
    color: white;
}

#instagram_active {
    background-color: #E63656;
    color: white;
}

#facebook_active {
    background-color: #2A58B3;
    color: white;
}

#other_active {
    background-color: #644883;
    color: white;
}

.card img {
    width: 100%;
    height: 150px !important;
    object-fit: cover;
    padding: 12px;
}

.service_btn {
    text-decoration: none !important;
}

.services_title {
    color: var(--lightpurple);
    padding-top: 12px;
    padding-bottom: 5px;
}

.services_title2 {
    color: var(--spotify);
    padding-top: 12px;
    padding-bottom: 5px;
}

.services_title3 {
    color: var(--youtube);
    padding-top: 12px;
    padding-bottom: 5px;
}

.services_title4 {
    color: #E63656;
    padding-top: 12px;
    padding-bottom: 5px;
}

.services_title5 {
    color: #2A58B3;
    padding-top: 12px;
    padding-bottom: 5px;
}

.services_title6 {
    color: #644883;
    padding-top: 12px;
    padding-bottom: 5px;
}

.card {
    box-shadow: 2px 0px 4px 1px #c1c1c19c;
}

.social-view {
    background: url(../img/woman-viewing-social-media-app-mobile-phone-by-pool_746318-6040\ \(1\).avif);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    height: 300px;
    margin-top: 70px;
    margin-bottom: 20px;
}

.social-view-bck-color {
    background: linear-gradient(45deg, var(--gradiant1), #ff3300b5);
    height: 300px;
}

.social-icon {
    color: white;
    font-size: 80px;
    padding: 5.5rem 0px;
    text-align: center;
}

.btn2 {
    background-color: var(--gradiant1);
    color: white;
}

.align-self-center h1 {
    color: var(--lightpurple);
}

.align-self-center p {
    padding-top: 10px;
}

.sub_card1 {
    background-image: url(../img/pbm3a38j7zr6r6f4.png), linear-gradient(30deg, var(--gradiant1), #ff33009e);
    background-repeat: no-repeat;
    background-size: cover;
}

.we-do-box {
    background: linear-gradient(30deg, var(--gradiant1), #ff33009e);
    padding: 1.2rem;
    color: white;
    border-radius: 10px;
    -webkit-transition: .14s ease;
    transition: .14s ease;
    transition: 500ms all;
}

.we-do-box:hover {
    margin-top: -20px;
    margin-bottom: -1px;
}

.color-plus-img {
    background-image: url(../img/baner2.avif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 300px;
    /* margin-bottom: 20px; */
}

.color-plus-img-bckcolor {
    background: linear-gradient(45deg, var(--gradiant1), #ff3300b5);
    height: 300px;
}

.slider .carousel-cell .card-text {
    padding: 131px 0px 0px 73px;
    line-height: 46px;
    color: var(--lightpurple) !important;
    /* font-size: 1.5rem; */
}

.slider .carousel-cell {
    background: rgba(238, 221, 34, 0);
}

.slider .carousel-cell {
    width: 100%;
    height: 400px;
    margin-right: 10px;
}

.sub-card1 h4 {
    font-size: 24px;
}

.hp-bf-text {
    font-size: 16px;
    color: white;
}

footer {
    background: linear-gradient(30deg, var(--gradiant1), #ff33009e);
    height: 240px;
}

.input {
    background-color: #ed4606b3;
    background-clip: padding-box;
    border: 1px solid #ed4606b3;
    color: white;
    outline: none;
    border: none;
}

.input:focus {
    outline: none;
    border: none;
    background-color: #ed4606b3;
    background-clip: padding-box;
    border-color: 1px solid #ed4606b3;
    color: white;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgb(197 180 180 / 48%);
}

.iframe {
    margin-top: 90px;
}

.main-carousel {
    height: 400px;
    margin-top: 8rem;
}

.carousel-cell {
    background-color: #000c;
    height: 450px;
    width: 100%;
}

.grey {
    background-color: #eeeeee;
    height: 450px;
}

.card-text {
    padding: 130px 0px 0px 73px;
    line-height: 46px;
    color: var(--lightpurple);
    font-size: 30px;
}

.flickity-img {
    height: 450px;
    /* width: 900px; */
}

.flickity-img img {
    width: 100%;
    margin-left: -15px;
    height: 450px;
    object-fit: cover;
}

.typewrite>.wrap {
    border-right: 0.08em solid #fff;
    overflow: hidden;
    white-space: nowrap;
    animation: typing 2s, cursor.4s step-end infinite alternate;
}

@keyframes typing {
    from {
        width: 0;
    }
}


.flickity-prev-next-button {
    width: 100px;
    height: 100px;
    background-color: var(--lightpurple) !important;
}

.flickity-prev-next-button .arrow {
    fill: white;
}

.price_card {
    display: none;
    box-shadow: none !important;
}