body{
    font-family: "Oswald", serif;
    /* font-family: "Roboto Condensed", serif; */
    color: #484848;
}

h1,h2,h3,h4,h5,h6{
    color: #414141;
    font-weight: 700;
}

p{
    font-size: 20px;
    line-height: 28px;
    font-weight: 300;
}

.text-white{
    color: #fff;
}

.preloader{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: #fff;
    height: 100vh;
    width: 100%;
    text-align: center;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.preloader-text{
    width: 162px;
    height: 60px;
    margin: 0 auto;
    text-align: center;
}

.preloader-text .glitch-wrapper{
    /* text-align: center; */
    justify-content: center;
}

@keyframes loading{
    from { -webkit-transform: translateX(-50%); }
    to   { -webkit-transform: translateX(0%); }
}

.download-block{
    height: 20px;
    width: 100%;
    margin: 25px auto;
    overflow: hidden;
}

.dashed{
    width: 200%;
    border-top: 4px dashed #2c4bff;
    animation: loading 10s infinite linear;
}

.page-loaded{
    visibility: hidden;
    height: 0;
}

/* menu style */
.light-menu{
    /* content: ''; */
    background: rgb(255, 255, 255 / 70%);
    backdrop-filter: blur(12px);
    box-shadow: 0px 8px 10px #00000010;

}

.light-menu::after{

}

.bg-light-theme{
    background-color: #bdecff;
    background-image: radial-gradient(at 40% 20%, hsl(252deg 100% 97%) 0px, transparent 50%), radial-gradient(at 80% 0%, hsl(180deg 100% 98%) 0px, transparent 50%), radial-gradient(at 0% 50%, hsl(280deg 100% 98%) 0px, transparent 50%), radial-gradient(at 14% 75%, hsl(50deg 100% 97%) 0px, transparent 50%), radial-gradient(at 0% 100%, hsl(47deg 100% 98%) 0px, transparent 50%), radial-gradient(at 84% 84%, rgb(252 248 255) 0px, transparent 50%), radial-gradient(at 0% 0%, hsl(241deg 100% 98%) 0px, transparent 50%);
    margin: 100px 20px 20px 20px;
    border-radius: 14px;
}

/* buttons style */

.btn{
    font-family: "Oswald", serif;
    /* font-family: "Roboto Condensed", serif; */
    font-weight: 500;
    padding: 10px 25px;
    font-size: 20px;
}

.btn-bordered{
    border: 1px solid #414141;
    color: #414141;
}

.btn-bordered:hover{
    background: #2c4bff;
    border: 1px solid #2c4bff;
    color: #fff;
}

.btn-theme{
    background-color: #ffd23f;
}

.btn-theme:hover{
    background-color: #fff;
    border: 1px solid #000;
}

/* fonts headers and text style */

.subtitle-bg{
    font-weight: 300;
    color: #2c4bff;
    font-size: 28px;
    position: relative;
    padding-left: 15px;
}

.subtitle-bg::before{
    content: '';
    display: inline-block;
    position: absolute;
    top: 53%;
    left: 0;
    width: 10px;
    height: 2px;
    background-color: #2c4bff;
}

.bannerText{
    position: relative;
}

.bannerText h1{
    padding: 15px 0 20px 0;
    font-size: 48px;
}

.bannerText p{
    padding-bottom: 25px;
}

.bannerText .inline-btn{
    margin-left: 15px;
    font-size: 20px;
}

.links-banner{
    display: flex;
    align-items: center;
}

.inline-btn{
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    color: #3e82f9;
    position: relative;
}

.inline-btn::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    background-color: #3e82f9;
    bottom: 0;
    left: 0;
    transition: width 0.3s ease, left 0.3s ease;
    
}

.inline-btn:hover::after{
    width: 100%;
    height: 2px;
}

.logo-container{
    padding: 50px 0;
}

.imagebox{
    overflow: hidden;
}

.imagebox img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* cards */

.bordered{
    border: 1px solid #c9c9c9;
}

.card{
    padding: 35px 30px;
    margin-bottom: 15px;
    background-image: radial-gradient(circle at center center, rgba(217, 217, 217, 0.05) 0%, rgba(217, 217, 217, 0.05) 15%, rgba(197, 197, 197, 0.05) 15%, rgba(197, 197, 197, 0.05) 34%, rgba(178, 178, 178, 0.05) 34%, rgba(178, 178, 178, 0.05) 51%, rgba(237, 237, 237, 0.05) 51%, rgba(237, 237, 237, 0.05) 75%, rgba(138, 138, 138, 0.05) 75%, rgba(138, 138, 138, 0.05) 89%, rgba(158, 158, 158, 0.05) 89%, rgba(158, 158, 158, 0.05) 100%), radial-gradient(circle at center center, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 6%, rgb(255, 255, 255) 6%, rgb(255, 255, 255) 12%, rgb(255, 255, 255) 12%, rgb(255, 255, 255) 31%, rgb(255, 255, 255) 31%, rgb(255, 255, 255) 92%, rgb(255, 255, 255) 92%, rgb(255, 255, 255) 97%, rgb(255, 255, 255) 97%, rgb(255, 255, 255) 100%);
    background-size: 42px 42px;
    box-shadow: 0px 8px 10px #00000010;
    transition: all 0.8s;
}

.card:hover {
    transform: translateY(-10px);
}

.card:hover .inline-btn::after{
    width: 100%;
    height: 2px;
}

.image-card{
    overflow: hidden;
    width: 80px;
    height: 80px;
    margin-bottom: 25px;
}

.image-card img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.portfolio-card{
    /* border-radius: 14px; */
    overflow: hidden;
    position: relative;
    margin-bottom: 25px;
}

.portfolio-image{
    position: relative;
    width: 100%;
    height: 350px;
    padding: 10px 0;
    border-radius: 14px;
    background-color: #cccccc;
    background-image: radial-gradient(at 40% 20%, hsl(252deg 100% 97%) 0px, transparent 50%), radial-gradient(at 80% 0%, hsl(180deg 100% 98%) 0px, transparent 50%), radial-gradient(at 0% 50%, hsl(280deg 100% 98%) 0px, transparent 50%), radial-gradient(at 14% 75%, hsl(50deg 100% 97%) 0px, transparent 50%), radial-gradient(at 0% 100%, hsl(47deg 100% 98%) 0px, transparent 50%), radial-gradient(at 84% 84%, rgb(252 248 255) 0px, transparent 50%), radial-gradient(at 0% 0%, hsl(241deg 100% 98%) 0px, transparent 50%);
    /* transition: all 0.7ms; */
    overflow: hidden;
    
}

.portfolio-image img{
    transition: all 0.7s;
}

.portfolio-card:hover img{
    transform: scale(1.1);
}

.tag-spanWrapper{
    position: absolute;
    z-index: 999;
    top: 15px;
    left: 15px;
    background-color: #4e8cf9;
    color: #fff;
    border-radius: 5px;
    padding: 2px 16px;
}

.portfolio-card .card-text{


}

.no-padding{
    padding: 0;
}



.shadowed{

}

/* padding 0 */
.pd-0{
    padding: 0;
}

.mb-50{
    margin-bottom: 50px;
}

.mt-50{
    margin-top: 50px;
}

.quote{
    padding: 25px 0;
    position: relative;
    display: flex;

}

.quote .quote-icon{
    position: absolute;
    top: 5px;
    left: -15px;
}

.text-quote{
    padding-left: 35px;
}

.d3-image{
    width: 100%;
    overflow: hidden;
}

.d3-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.right-position{
    float: right;
}

.ficha{
    padding: 15px 0px;
    background-color: #f8f9fa;
    border-radius: 14px;
    align-items: center;
    text-align: center;
    margin-bottom: 15px;
}

.head-banner{
    padding: 150px 0 100px 0;
    background: linear-gradient(135deg, #c3eaff, #fff4fa);
}

.head-bannerWrapper{
    position: relative;

}

.textWrapper{
    z-index: 999;
}

@keyframes jumping{
    0%{ top: 20px; }
    50%{ top: 0; }
    100%{top: 20px;}
}

.animeImg{
    position: absolute;
    z-index: 99;
    width: 120px;
    height: 120px;
    right: 0;
    float: right;
    animation: jumping 3s linear infinite;
    padding-right: 15px;
}

.leftBottom{
    bottom: 0;
    left: 0;
}

.stepWrapper{
    padding: 50px 0;
}

.step{
    position: relative;
    /* overflow: hidden; */
    display: flex;
    align-items: center;

}

.stepOver{
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 14px;
    transition: all 0.4s linear;
    box-shadow: 0px 8px 10px #0000001a;
    z-index: 999;
}

.bigDigit{
    font-size: 10em;
    color: #414141;
    -webkit-text-stroke: 1px #414141;
    position: absolute;
    top:15%;
    left: -15px;
    z-index: 99;
}

.stepImg{
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    border-radius: 14px;
}



.stepImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stepText{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: inherit;
    background-color: #00000080;
    color: #fff;
    padding: 15px;
    opacity: 0;
    transition: all 0.4s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



.stepOver:hover .stepText{
    opacity: 1;
    cursor: pointer;
}

.imgBox{
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.imgBox img{
    width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.portfolioImageBig:hover img{
    /* width: 100%; */
    transform: scale(1.1);
    cursor: pointer;
}


.portfolioImageBig img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.4s linear;
}

@keyframes round {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.animateImgRnd{
    position: absolute;
    top: -2em;
    right: 0;
    width: 70px;
    height: 70px;
    animation: round 2.5s linear infinite;
}

/* bg styles */

.grey-bg{
    background: linear-gradient(135deg, #DFEBF7, #faf6ff);
}

.blue-bg{
    background: linear-gradient(135deg, #2c4bff, #6a2cff);
    color: #fff;
}

.purple-bg{
    background: linear-gradient(135deg, #ff7c2c8c, #6a2cff);
    color: #fff;
}

.blue-bg h1,.blue-bg h2,.blue-bg h3,.blue-bg h4,.blue-bg h5,.blue-bg p,.blue-bg a, .blue-bg.inline-btn{
    color: #fff;
}

.purple-bg h1,.purple-bg h2,.purple-bg h3,.purple-bg h4,.purple-bg h5,.purple-bg p,.purple-bg a, .purple-bg.inline-btn{
    color: #fff;
}

.blue-bg .inline-btn::after{
    background-color: #fff;
}

.purple-bg .inline-btn::after{
    background-color: #fff;
}

.light-bg{
    background: linear-gradient(135deg, #ff7c2c8c, #2cc7ff75);
    /* color: #fff; */
}

.contactWrapper{
    border-radius: 14px;
    /* padding: 25px 0; */
    align-items: flex-start;
    background: #fff;
}

.contactForm{
    padding: 15px;
}

.contactBox{
    padding: 25px;

    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    height: 450px;
    background: url(../images/cta-bg.svg) center top / cover, rgb(109 122 211);
}