/* General */

body {
    color: #fff;
    /* background-image: url(../img/Top-bg.png); */
    background-image: url(../img/bbblurry.svg);
    background-position: right top;
    background-color: #231F20 !important;
    background-repeat: no-repeat;
    background-size: contain;
    max-height: 1370px;
}

@media (min-width: 1200px) {
    .container {
        width: 1000px;
    }
}
.navbar-brand {
    /* cursor: none; */
    pointer-events: none;
}
.navbar>.container {
    width: 75%;
    max-width: 75% !important;
}
.navbar-brand img {
    min-width: 1vw;
    /* min-height: 40px; */
}
.navbar-nav .nav-link {
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    cursor: pointer;
    line-height: 24px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #FFFFFF !important;
    padding-right: 1rem;
    padding-left: 1rem;
}

.navbar-nav .nav-link:hover {

    color: rgba(183, 41, 168, 1) !important;
}

.form-control {
    background: rgba(84, 76, 79, 0.2);
    border: none;
    border-bottom: 1px solid #FFFFFF;
    border-radius: 10px;
    height: 70px;
    padding-left: 22px;
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 25px;
    color: #FFFFFF;
}

.contact .btn {
    color: #FFFFFF;
}

.contact button {
    background: linear-gradient(91.29deg, #B729A8 -5.38%, #9B30B5 99.65%);
    border-radius: 10px;
    color: #FFFFFF;
    font-family: 'Play', sans-serif;
    display: flex;
    padding: 15px 30px;
    gap: 10px;
    text-align: center;
}

.contact button:hover {
    /* background: linear-gradient(91.29deg, #9B30B5 -5.38%, #B729A8 99.65%); */
    background: rgba(183, 41, 168, 0.5);
    border: 1px solid #9B30B5;
    transition: all 0.4s ease-in-out;
    color: #FFFFFF;
    box-shadow: 0 0px 30px rgba(183, 41, 168, 0.8);

}

.btn-dropdown {
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 20px;
    gap: 10px;
    background: rgba(183, 41, 168, 0.47);
    border: 1px solid #B729A8;
    border-radius: 10px;
    font-family: 'Play';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 105%;
    width: 100%;
    margin: 20px 0px;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #B729A8;
    }

/* Type */

h1 {
    font-size: 72px;
    font-family: 'Play', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
}

h2 {
    font-family: 'Play', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 43px;
    line-height: 105%;
    text-transform: uppercase;
}

h3 {
    font-family: 'Play', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 33px;
    line-height: 105%;
    text-transform: uppercase;
}

h4 {
    font-family: 'Play', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.65em;
    text-transform: uppercase;
    color: #B729A8;
}

p {
    font-size: 23px;
    line-height: 27px;
    font-family: 'Play', sans-serif;
    font-weight: 400;
}

a {
    color: #FFFFFF;
    text-decoration: none;
}

/* Type Ends */

.bg-dark {
    background-color: transparent !important;
}

.wwe {
   
    background-repeat: no-repeat;
    background-position: right;
    background-position: calc(85% - 10px) 80%;
    min-height: 744px;
    background-size: contain;
}

.wwe h1 {
    margin-bottom: 22px;


}

.wwe button {
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    padding: 15px 15px;
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 23px;
    color: #FFFFFF;
    background: none;
}

.wwe button:hover {
    background: rgba(183, 41, 168, 0.47);
    border: 1px solid #B729A8;
}

.wwe a:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.wwd {
    background-image: url(../img/wwd-large.png);
    background-repeat: no-repeat;
    background-position: left;
    min-height: 608px;
    background-size: contain;
}

/* Services */

.services {
    background-image: url(../img/bbblurry-services.svg);
    background-position-x: left;
    background-position-y: middle;
    background-repeat: no-repeat;
    background-size: 100vw;
    /* max-height: 1370px; */

}

.service-detail {
    background-image: url(../img/Services-bg.png);
    background-position-x: right;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-size: 35vw;
    min-height: 660px;
}

.services h2 {
    margin-bottom: 20px;
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    font-size: 43px;
}

.services p {
    font-size: 15px;
    font-family: 'Play', sans-serif;
    font-weight: 400;
}

.service-detail button {
    background: #231F20;
    border: 1px solid #B729A8;
    border-radius: 10px;
    align-items: center;
    padding: 12px 1rem;
    gap: 10px;
    color: #FFFFFF;
    margin-right: 17px;
    margin-bottom: 10px;
    font-size: 18px;
    font-family: 'Play', sans-serif;
    font-weight: 400;
}
.dropdown-menu {
    background: #231F20;
    border: 1px solid #B729A8;
    width: 100%;
    border-radius: 10px;
    align-items: center;
    padding: 12px 1rem;
    gap: 10px;
    color: #FFFFFF;
    margin-right: 17px;
    margin-bottom: 10px;
    font-size: 18px;
    font-family: 'Play', sans-serif;
    font-weight: 400;
}
.dropdown-item{
    color: #fff;
}

.service-detail button:hover {
    color: #F36CE5!important;
}

.service-detail button .dropdown-toggle {
    padding: 12px 12px!important;
}

.carousel .carousel-indicators button {
    all: unset;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.4);
    width: 15px;
    height: 15px;
    border-radius: 15px;
    margin: 15px 10px;
}

.carousel .carousel-indicators button.active,
.carousel .carousel-indicators button:hover {
    background: #F36CE5;
}


.services .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background: rgba(183, 41, 168, 0.47);
    border: 1px solid #B729A8;
    border-radius: 10px;
}

.services .nav-link.active:hover,
.services .nav-link:hover {
    background: rgba(183, 41, 168, 0.47);
    border: 1px solid #B729A8;
    border-radius: 10px;
}

.services .nav-pills .nav-link {
    border-radius: 10px;
}

/* Teams Section */

.teams {
    border-radius: 20px;
}

.teams .slide {
    background-image: url(../img/values-scalable.svg);
    background-size: contain;
    background-position: bottom left;
    background-repeat: no-repeat;
    border-radius: 20px;
}

.tabs {
    z-index: 2;
    position: absolute;
    right: 0;
    top: 30px;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;

}

.tabs .nav-link {
    background: rgba(183, 41, 168, 0.47);
    border: 1px solid #B729A8;
    border-radius: 10px;
    color: #FFFFFF;
    margin-left: 10px;
    margin-right: 10px;

}

.tabs .nav-link.active {
    background: rgba(183, 41, 168, 0.8);
    border: 1px solid #B729A8;
    border-radius: 10px;
    outline: none;
    transition: outline 0.3s ease-out;
}
.tabs .nav-link:not(.active) {
    outline: none;
    transition: outline 0.3s ease-out;
  }
.team-slide-1 {
    background-image: url(../img/Scalable-bg-xl.png);
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
    backdrop-filter: blur(42px);
    border-radius: 20px;
    padding: 10vw 5vw;
    height: 558px;
}

.team-slide-2 {
    background-image: url(../img/Adaptable-bg-xl.png);
    background-size: cover;
    background-position: bottom right;
    background-repeat: no-repeat;
    backdrop-filter: blur(42px);
    border-radius: 20px;
    padding: 10vw 5vw;
    height: 558px;

}
.hold-it{
    display: none;
}
.team-slide-3 {
    background-image: url(../img/communication-bg-xl.png);
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
    backdrop-filter: blur(42px);
    border-radius: 20px;
    padding: 10vw 5vw;
    height: 558px;
}

.team-slide-4 {
    background-image: url(../img/Guaranteed-bg-xl.png);
    background-size: cover;
    background-position: bottom right;
    background-repeat: no-repeat;
    backdrop-filter: blur(42px);
    border-radius: 20px;
    padding: 10vw 5vw;
    height: 558px;
}

.social {
    margin-top: 57px;
    align-items: center;
    margin-bottom: 100px;
}

.social img {
    align-items: center;
    margin-left: 5px;
    pointer-events: inherit;
}
body {
    overflow-x: hidden;
}

/* Mobile */
.navbar-toggler {
    padding: .25rem .5rem;
    font-size: 1.8rem;
}

.navbar-dark .navbar-toggler {
    color: rgba(255, 255, 255, 1) !important;
    border: none;
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler-icon {
    width: 1.8em;
}
#videowrapping.landscape-mobile {
    top: 42vw !important;
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .video-wrap {
        translate: 30%;
        top: 25%;
        pointer-events: none;
    }
    video,#gif-v,#gif-version {
        width: 59vw !important;
    }
    p {
        font-size: 17px;
        line-height: 20px;
    }

    .wwd {
        background-image: none !important;
        min-height: 478px;
    }

    
    .wwe {
        position: relative;
        overflow-x: hidden;
        background-repeat: no-repeat;
        background-position: 195px;
        min-height: 326px;
        background-size: 416px;
    }
    .wwd {
        background: none !important;
    }

    h1 {
        font-size: 38px;
        font-family: 'Play', sans-serif;
        text-transform: uppercase;
        font-weight: 700;
    }
    .service-detail {
        min-height: 610px;
    }
}

/* Small devices (portrait phones, less than 768px) */
@media (max-width: 768px) {
    @media (min-width: 575.98px){
        
        video,#gif-v,#gif-version {
            width: 50vw !important;
        }
    }    
    p {
        font-size: 17px;
        line-height: 20px;
    }

    .wwe {
        background-size: 80%;
        background-position: calc(50% - -220px) 50%;
    }

    .wwd {
        background-image: none !important;
    }

    .team-slide-1 {
        background-image: url(../img/Scalable-bg.png);
        height: 501px;
    }

    .team-slide-2 {
        background-image: url(../img/Adaptable.png);
        height: 501px;
    }

    .team-slide-3 {
        background-image: url(../img/communication-bg.png);
        height: 501px;
    }

    .team-slide-4 {
        background-image: url(../img/Guaranteed-bg.png);
        background-position: right bottom;
        height: 501px;
        padding: 10vw 5vw;
    }
    .services {
        background-size: 210vw;
    
    }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    p {
        font-size: 17px;
        line-height: 20px;
    }

    .wwe {
        background-size: 80%;
        background-position: calc(50% - -370px) 50%;
    }
}


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .wwe {

        background-position: calc(50% - -410px) 50%;
    }

    .wwd {

        background-size: contain;
        background-position: calc(50% - 570px) 50%;
    }

    .service-detail {
        background-size: 35vw;
        min-height: 600px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .service-detail {
        background-size: 20vw;
        min-height: 600px;
    }

    .wwe {
        background-size: contain;
        background-position: calc(50% - -500px) 50%
    }

    .wwd {
        background-size: contain;
        background-position: calc(50% - 510px) 50%;
    }
}
.tab-pane:not(.show.active){
    display: none;
}
.video-wrap{
    position: absolute;
    right: 0px;
    top: 25%;
    pointer-events: none;
 }
@media (max-width: 1650px) {
 video,#gif-v,#gif-version{
    width: 40vw;
 }

}