/******************************************************GENERAL*************************************/
* {
    margin: 0;
    padding: 0;
    line-height: 100%;
    font-size: 100%;
    outline: none;
    /* color: #523D5C; */
    color: #666;
    list-style: none;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    text-decoration: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

html{
    overflow-x: hidden;
}

body{
    background: #f9fafb;
    background-image: url(../images/Aurora.svg);
    background-size:100vh;
    background-position-x: right;
    background-position-y:top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1{
    font-size: 64px;
    line-height: 70px;
    font-weight:normal;
    color: #A95ECF;
    font-family: Roboto Condensed;
    font-weight: bold;
    letter-spacing: -2px;
    text-transform: uppercase;
}

h2{
    color: #A95ECF;
    opacity: .08;
    font-size: 160px;
    font-family: Roboto Condensed;
    font-weight: bolder;
    letter-spacing: -6px;
    text-transform: uppercase;
    text-align: center;
    line-height: 80px;
    padding-top: 80px;
}

h3{
    /* font-size: 24px; */
    font-size: 40px;
    padding-top: 40px;
    font-weight: 400;
    color: #888;
    text-transform: capitalize;
}

h4{
    font-size: 48px;
    font-weight: 300;
    color:#0B77B0;
    text-transform: capitalize;
    margin-bottom: 40px;
}

p b, li b{
    font-size: 20px;
}

.wrapper{
    width: 100%;
    margin: 0 auto;
}

.content-container{
    max-width: 80%;
    padding: 0 32px;
}

.btn-primary{
    background-color: #A95ECF;
    text-transform: capitalize;
    border-radius: 4px;
    padding: 16px 32px;
    border: none;
    transition: all 0.4s;
    box-shadow: 0 4px 16px rgb(90 33 119 / .16);
}

.btn-primary:hover,.btn-primary:focus{
    background-color: #c173e9;
}

.btn-secondary{
    background-color: #0B77B0;
    text-transform: capitalize;
    border-radius: 4px;
    padding: 8px 16px;
    border: none;
    transition: all 0.4s;
    box-shadow: 0 4px 16px rgb(10 75 108 / .16);
}

.btn-secondary:hover,.btn-secondary:focus{
    background-color: #1D98D9;
}

.home-welcome{
    position: relative;
    z-index: 2;
}

.home-welcome *{
    margin: 0;
    text-align: center;
}

p.welcome-text{
    font-size: 32px;
    line-height: 52px;
    font-weight:normal;
}

/* .home-page*/ p{ 
    font-size: 20px;
    text-align: center;
    line-height: 32px;
    font-weight:normal;
}

.home-logos{
    background-color: #fff;
    padding:64px 32px;
    /* margin:64px 0 180px 0; */
    margin:64px 0 40px 0;
}

.home-logos *{
    opacity: .9;
}

.home-page .services{
    /* margin-bottom: 80px; */
}

.home-page .services ul{
    padding: 0;
}

.services li{
    font-size: 16px;
    text-transform: capitalize;
    padding: 12px 22px;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 200px;
    /* box-shadow: 0 4px 16px rgb(11 119 176 / .04); */
}

.services li:nth-child(1){
    background-color: #EDF7FD;
    border-color:#CFECFC;
    box-shadow: 0 4px 16px rgb(11 119 176 / .04);
}

.services li:nth-child(2){
    background-color: #EDEDFD;
    border-color:#D0CFFC;
    box-shadow:0 4px 16px rgb(0 0 106 / 4%);
}

.services li:nth-child(3){
    background-color: #FDEDFC;
    border-color:#FCCFFB;
    box-shadow:0 4px 16px rgb(106 0 100 / 4%);
}

.services li:nth-child(4){
    background-color: #FDEDED;
    border-color:#FCCFCF;
    box-shadow:0 4px 16px rgb(100 3 3 / 4%);
}

.services li:nth-child(5){
    background-color: #FDF7ED;
    border-color:#FCEDCF;
    box-shadow:0 4px 16px rgb(124 78 0 / 4%);
}

.services li:nth-child(6){
    background-color: #F7FDED;
    border-color:#E5F7BF;
    box-shadow:0 4px 16px rgb(65 104 0 / 4%);
}

.services li:nth-child(7){
    background-color: #EDFDED;
    border-color:#CFFCCF;
    box-shadow:0 4px 16px rgb(0 135 0 / 4%);
}

.services li:nth-child(8){
    background-color: #EDFDF7;
    border-color:#CFFCED;
    box-shadow:0 4px 16px rgb(0 92 58 / 4%);
}

.services li:nth-child(9){
    background-color: #EDF2FD;
    border-color:#D4E1FC;
    box-shadow:0 4px 16px rgb(0 28 88 / 4%);
}

.home-projects{
    gap:140px
}

.home-block{
    width: calc(90% - 32px);
    background-color: #fff;
    /* box-shadow: 40px 0 32px rgb(60 23 79 / .08); */
    padding-left: 10%;
}

.home-block *{
    margin: 0;
    text-align: left;
}

.home-block.home-reverse{
    /* box-shadow: -40px 0 32px rgb(60 23 79 / .08); */
    padding-left: 0;
    padding-right: 10%;
}

.home-block>div{
    padding: 0 32px;
    max-height: 400px;
}

.home-block>div div:first-child{
    position: relative;
    z-index: 2;
}

.home-block img{
    width: 120%;
    transform: translate(0px,50px);
}

.home-block.home-reverse img{
    transform: translate(-100px,0px);
}

.home-block p{
    font-size: 18px;
    text-align: left;
    line-height:initial;
}

.home-block p:first-child{
    text-transform: capitalize;
    font-size: 16px;
    opacity: .6;
}

.coming-soon{
    height: calc(100vh - 60px);
}

.coming-soon img{
    max-width: 100%;
}



/**********************NAVBAR*************/



.navbar{
    background: rgb(255 255 255 / .85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 0;
}

.navbar .content-container{
    border-bottom: 1px solid #eee;
}

.navbar-light .navbar-toggler {
    color: transparent;
    border: none;
    align-self: center;
    padding: 8px 12px;
    transition: all 0.4s;
}

.navbar-light .navbar-toggler:hover,.navbar-light .navbar-toggler:focus{
    background-color: #A95ECF;
}

/* .hsd-logo{
    background-color: #fff;
    border-radius: 50%;
    width: 40px;
    aspect-ratio: 1;
    text-align: center;
    box-shadow: 0 4px 8px rgb(0 0 0 / .16);
} */

.hsd-logo img{
    width: 28px;
}

.navbar-brand{
    padding: 16px 0;
}

.navbar-brand p{
    margin: 0;
    text-align: left;
    line-height: 20px;
    font-family: 'Roboto Condensed', sans-serif;;
    transition: all 0.4s;
}

.navbar-brand p:first-child{
    text-transform: uppercase;
    font-size: 20px;
}

.navbar-brand p:last-child{
    font-weight: 300;
    text-transform: capitalize;
    font-size: 16px;
}

.navbar-brand:hover p,.navbar-brand:focus p{
    color: #A95ECF;
}

.navbar-nav{
    height: 100%;
}

.navbar-light .navbar-nav .nav-link{
    color: #523D5C;
    height: 100%;
    font-weight: 500;
    text-transform: capitalize;
    border-bottom: 3px solid transparent;
    transition: all 0.4s;
}

.navbar-light .navbar-nav .nav-link:hover,.navbar-light .navbar-nav .nav-link:focus{
    color: #A95ECF;
    border-color: rgb(169 94 207 / .6);
}

.navbar-light .navbar-nav .nav-link.active{
    color: #A95ECF;
    border-color:#A95ECF;
}



/*****************testimonials****************/



.carousel{
    max-width: 75%;
    overflow: hidden;
    padding: 0 64px;
}

.carousel-inner{
    padding: 0 64px;
}

.carousel-item p{
    margin: 0;
    font-size: 20px;
}

.carousel-item p:first-child{
    color: #888;
    margin-bottom: 8px;
    line-height: 32px;
}

.carousel-item p:nth-child(2){
    color: #0B77B0;
}

.carousel-item p:last-child{
    color: #A95ECF;
    font-size: 16px;
}

.carousel-control-prev,.carousel-control-next{
    width: auto;
    opacity: 1;
    padding: 8px;
}

.carousel .fas{
    font-size: 40px;
    color: #0B77B0;
    transition: all 0.4s;
}

.carousel .fas:hover,.carousel .fas:focus{
    color: #A95ECF;
}

/* .testimonials>div{
    background-color: #fff;
    padding: 16px;
    border-radius: 16px;
} */

.testimonials-block{
    margin-top: 80px;
}

.testimonials-block>div:first-child{
    margin-bottom: 60px;
}

.testimonials p{
    margin: 0;
    font-size: 16px;
    position: relative;
    text-align: left;
    line-height: 100%;
}

.testimonials p:first-child{
    color: #888;
    margin-bottom: 8px;
    line-height: 24px;
}

.testimonials p:first-child::before{
    content: "\201c";
    position: absolute;
    top: 40px;
    left: -30px;
    color: rgb(11 119 176 / 10%);
    font-size: 200px;
    z-index: -50;
}

.testimonials p:nth-child(2){
    color: #0B77B0;
}

.testimonials p:last-child{
    color: #A95ECF;
    font-size: 16px;
}

.home-cta{
    background-color: #fff;
    padding:64px 32px;
    margin:64px 0 0 0;
}

.home-cta > div > p:first-child{
    margin: 0;
}

.home-cta .btn-primary{
    font-size: 20px;
}



/*****************FOOTER****************/



.main-content{
    padding-top: 140px;
    padding-bottom: 40px;
    width: 100%;
}

.main-content img{
    height: 100%;
    max-width: 100%;
}

footer .content-container{
    border-top: 1px solid #eee;
    padding: 4px 32px 4px 16px;

}

.mobile-link{
    text-decoration: none;
    padding: 8px 16px;
    border-radius:8px;
    transition: all 0.4s;
}

.mobile-link *{
    transition: all 0.4s;
}



.mobile-link .fa-mobile-alt{
    color:#0B77B0;
    font-size: 28px;
}

.mobile-link:hover,.mobile-link:focus{
    background-color: #A95ECF;
}

.mobile-link p{
    margin: 0;
    line-height: initial;
    text-align: left;
}

.mobile-link p:first-child{
    font-size: 12px;
}

.mobile-link p:last-child{
    color: #A95ECF;
    font-size: 14px;
}

.mobile-link:hover *,.mobile-link:focus *{
    color: #fff !important;
}

.social-links a{
    text-decoration: none;
    color: #523D5C;
    border-radius: 50%;
    border: 2px solid #523D5C;
    width: 30px;
    aspect-ratio: 1;
    text-align: center;
    line-height: 25px;
    align-items: center;
    transition: all 0.4s;
}

.social-links a:hover,.social-links a:focus{
    color: #fff;
    background: #A95ECF;
    border-color: #A95ECF;
}



/**********************inner-page*************/



.inner-page h2,.inner-page p{
    text-align: left;
}

.inner-page h2{
    font-size: 80px;
    opacity: .2;
    letter-spacing: -4px;
    line-height: 50px;
}



/**********************Projects*************/



.project-heading h1{
    margin: 0;
    font-size: 80px;
}

.project-heading .welcome-text{
    line-height: 36px;
}

.project-heading img{
    max-width: 40%;
}

.project-heading.website-heading img{
    transform: translateX(12vw) translateY(100px);
    max-width: initial;
}

.light-bg{
    padding:32px;
    border-radius: 8px;
    background-color: rgb(255 255 255 / .6);
    box-shadow: 0 18px 20px rgb(60 23 79 / .04);
}

.light-bg h2{
    font-size: 60px;
    opacity: .2;
    letter-spacing: -4px;
    padding: 0;
    line-height: 40px;
}

.light-bg .h-red{
    color: #D31212;
}

.light-bg .h-green{
    color: #2ED312;
}

.light-bg .h-blue{
    color: #128AD3;
}

.light-bg p{
    margin: 0;
}

.light-bg h4{
    margin-bottom:16px;
}

.light-bg.persona-img{
    max-width: 215px;
    padding-bottom: 20px;
}

.light-bg.persona-img img{
    margin-bottom: 8px;
}

.light-bg.persona-img p{
    line-height: 28px;
}

.light-bg.persona-img span p:nth-child(2){
    font-size: 16px;
}

.light-bg.persona-img div>p:last-child{
    font-size: 12px;
}

.light-bg ul{
    margin: 0;
}

.light-bg ul li{
    list-style: initial;
    line-height: 28px;
    font-size: 20px;
    margin-bottom: 10px;
}

blockquote{
    margin: 0;
    font-size: 20px;
    opacity: .8;
    font-style: italic;
    line-height: 32px;
}

.light-bg img{
    max-width: 100%;
    height: auto;
}

.light-bg .btn-primary{
    margin-top: 16px;
}

.light-bg .social-links{
    margin-top: 16px;
}

.light-bg .social-links a {
    border: 2px solid #523D5C;
    width: 40px;
    line-height: 35px;
    font-size: 20px;
}

.light-bg .social-links a:hover{
    border-color: #A95ECF;
}

.competitore-table{
    width: 100%;
}

.competitore-table th,.competitore-table td{
    padding: 16px;
    text-align: center;
}

.competitore-table .fas{
    font-size: 32px;
}

.competitore-table .fa-check{
    color: #89CF5E;
}

.competitore-table .fa-times{
    color: #CF5E5E;
}

.competitore-table tbody tr:nth-child(odd){
    background-color: #F8FAFB;
}



/************************MEDIA****************/



@media (max-width: 992px){
    .navbar-collapse{
        padding-bottom: 16px;
    }

    .home-logos{
        margin:64px 0 100px 0;
    }

    .project-heading{
        flex-direction: column;
        align-items: center;
    }

    .project-heading h1{
        line-height: 70px;
    }

    .project-heading img{
        max-width: 100%;
    }

    .project-heading.website-heading img{
        transform: translateX(12vw) translateY(0);
    }

    .inner-page h2{
        font-size: 60px;
        line-height: 48px;
    }

    .light-bg h2{
        font-size: 40px;
        line-height: 30px;
    }

    .light-bgs{
        flex-direction: column;
        gap: 1rem !important;
    }

    .light-bgs .align-self-center{
        align-self: flex-start !important;
    }

    .light-bg.persona-img{
        flex-direction: row !important;
        max-width: 100%;
        gap: 1rem;
    }

    .light-bg.persona-img img{
        max-width: 120px;
    }

    .w-50{
        width: 100% !important;
    }

    blockquote{
        /* order: 0 ; */
    }
}

@media (max-width: 768px){

    h1{
        font-size: 48px;
        line-height: 48px;
    }

    h2{
        font-size: 64px;
        text-align: center;
        line-height: 48px;
        padding-top: 80px;
    }

    h3{
        font-size: 24px;
        padding-top: 20px;
    }
    

    h4{
        font-size: 40px;
        /* text-align: center; */
        margin-bottom: 20px;
    }

    .content-container {
        max-width: 100%;
        padding: 0 32px;
    }

    .main-content{
        overflow: hidden;
    }

    .home-logos{
        margin:64px 32px 20px 32px;
    }

    /* .home-page .services{
        margin-bottom: 60px;
    } */

    .home-projects{
        gap:40px;
        padding: 0 32px;
    }

    .home-block{
        width: 100%;
        align-self: center !important;
        /* box-shadow: 0 20px 18px rgb(60 23 79 / 8%) !important; */
        padding: 32px !important;
    }

    .home-block>div{
        padding: 0;
        flex-direction: column-reverse !important;
        max-height: initial;
    }

    .home-block img{
        transform: scale(1.7) translate(-10px,10px);
    }
    
    .home-block.home-reverse img{
        transform: scale(1.9) translate(-20px,0px);
    }

    .home-block .w-50{
        width: 100% !important;
        text-align: center;
        align-items: center !important;
        gap:32px !important;
    }

    .home-block p{
        font-size: 16px;
    }

    .home-block .btn-primary{
        align-self: flex-start;
    }

    .project-heading.website-heading img{
        width: 100vw;
        transform: translateX(0) translateY(0);
    }

    .carousel{
        max-width: 100%;
        text-align: center;
        padding: 0 48px;
    }

    .carousel-inner{
        padding: 0;
    }

    .carousel-item p{
        font-size: 16px;
    }
    
    .carousel-item p:first-child{
        line-height: 22px;
    }
    
    .carousel-item p:last-child{
        font-size: 14px;
    }

    .testimonials{
        flex-direction: column;
    }

    .testimonials>div{
        text-align: center;
    }
}