:root {
    --borderradius: 8px;
    --headsidebar: #6f6868;
    --primary-headcolor: #946fda;
    --primary-paracolor: #676873;

    --para-color: #C4C5CE;
    --headtitlefontsize: 30px;
    --box-bgcolor: #5a02ff;
    --boxhovercolor: #946fda;
    --sectionpadding: 2% 0;
    --namesfontweight: 500;
    --namesfontsize: 20px;
    --twittercolor: #55acee;
    --linkedincolor: #0077b5;
}

body {
    font-family: 'Open Sans', sans-serif;

}

.common-head-outer {
    padding: 50px 0px;
}

.spegz-logo-vr img {
    margin-top: -50px;
    width: 150%;
    height: 300%;
}

.common-head-one {
    font-size: 14px;
    display: inline-block;
    position: relative;
    padding: 0px 10px;
    color: #946fda;
    letter-spacing: 1.2px;
}

.common-head-one:before {
    position: absolute;
    width: 40px;
    height: 2px;
    background-color: #6f6868;
    right: 100%;
    content: '';
    top: 6px;
}

.vr-experience-one {
    font-size: 14px;
    display: inline-block;
    position: relative;
    padding: 0px 10px;
    color: #c3c1c8;
    letter-spacing: 1.2px;
}

.vr-experience-one:before {
    position: absolute;
    width: 40px;
    height: 2px;
    background-color: #6f6868;
    right: 100%;
    content: '';
    top: 6px;
}

.vr-promo-experience-one {
    font-size: 14px;
    display: inline-block;
    position: relative;
    padding: 0px 10px;
    color: black;
    letter-spacing: 1.2px;
}

.vr-promo-experience-one:before {
    position: absolute;
    width: 40px;
    height: 2px;
    background-color: #6f6868;
    right: 100%;
    content: '';
    top: 6px;
}

.promo-bx-outer {
    padding: 0% 0% 3% 0%;
    position: relative;
    width: 100%;
    background: #feeedb;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 10px;
}

.common-head-two {
    font-size: 26px;
}

.vr-experience-two {
    font-size: 26px;
    color: white;
}

.vr-promo-experience-two {
    font-size: 26px;
    color: black;
}

.common-head-three {
    /*font-weight: var(--headthreefontweight);*/
    font-weight: 100;
    font-size: 18px;
}

.vr-experience-three {
    /*font-weight: var(--headthreefontweight);*/
    font-weight: 100;
    font-size: 22px;
    color: white;
}

.team-image-width1 {
    width: 20%;

    padding: 0 20px;
}

.box-bg-shape {
    padding: 30% 0;
    border-radius: 8px;
    margin: 0 auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.box-bg-shape:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.box-bg-shape img {
    width: 70px;
    height: 70px;
}

.box-shape-color1 {
    background-color: #dc3545;
    box-shadow: 0 0 20px #dc3545;
}

.box-shape-color2 {
    background-color: #e95924;
    box-shadow: 0 0 20px #e95924;
}

.box-shape-color3 {
    background-color: limegreen;
    box-shadow: 0 0 20px limegreen;
}

.box-shape-color4 {
    background-color: coral;
    box-shadow: 0 0 20px coral;
}

.box-shape-color5 {
    background-color: mediumpurple;
    box-shadow: 0 0 20px mediumpurple;
}


.mypad-2 {
    padding: 4% 2%;
}

.spc-pad-10 {
    padding: 0 10%;
}

/* ==========================================================================
   About us page banner css, with media queries starts
 ========================================================================== */

.mypad-60 {
    padding: 60px 0;
}

.about-banner-section {
    background-image: url(../img/bg_3.png);
    position: relative;
    -webkit-background-size: cover;
    background-size: cover;
    background-position-y: 20px;
    padding-bottom: 19px;

}

.about-banner-section2 {
    background-image: url(../img/vr/vrbg-2.png);
    position: relative;
    -webkit-background-size: cover;
    background-size: cover;

    background-position: center;

}

.spl-banner-padding {
    /* background-image: url(../img/about-us/bg1.png); */
    position: relative;
    -webkit-background-size: cover;
    background-size: cover;
    background-position-y: 219px;
    padding: 0 0 8% 0;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;

    text-align: center;
    transform-style: preserve-3d;
    color: white;
    margin-top: 90px;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    transition: all 0.6s ease;

}

.skill-box:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
}

.flip-card-front {
    background: linear-gradient(to right, #ff7533, #ff7235, #ff6b4b, #ff4036, #ff223b);

    color: white;
    z-index: 2;
    padding: 28% 0;
}

.flip-card-back {
    background-color: #946fda;
    color: white;
    transform: rotateY(180deg);
    z-index: 1;
    padding: 0 3px;
}

.common-para-description {
    font-size: 16px;
    color: #424246;

}

.common-head-title {
    margin-bottom: 10px;
    font-size: 30px;
    margin-top: 0px;
}

.skill-box {
    text-align: center;
    height: 260px;
    width: 210px;

}

.skill-box-title {
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 600;
    margin-top: 20px;
}

.small-box1 {

    margin-top: -130px;

}

.small-box2 {

    margin-top: -80px;

}

.skill-box p {
    color: white;
}

.team-img img {
    width: 170px;
}

.img-description {
    margin: 2% 0;
}

.founder-name {
    font-size: 20px;
    font-weight: 500;
    text-transform: capitalize;

}

.founder {
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}

.social-media a {
    padding: 0 3%;
    font-size: 18px;
}

.social-media a:nth-child(1) {
    color: #55acee;
}

.social-media a:nth-child(2) {
    color: #0077b5;
}

.team-image-width {
    width: 25%;

    padding: 5px;
}

.team-image-width1 {
    width: 20%;

    padding: 0 20px;
}

.pos-relative {
    position: relative;
}

.name-onimage {
    position: absolute;
    content: '';
    bottom: 25px;
    padding: 20px;
    text-align: left;
    width: 100%;
    overflow: hidden;
}

.apply-btn {
    background-image: linear-gradient(to right, #e68c4f, #e77d4f, #e76d52, #e65d56, #e24c5d);
    color: white;
    font-weight: 500;
    border: 0;
    padding: 10px 30px;
    font-size: 14px;
    letter-spacing: 1px;
    border-radius: 8px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    font-family: raleway-semibold;
}

.apply-btn:hover {
    background-image: linear-gradient(to left, #e68c4f, #e77d4f, #e76d52, #e65d56, #e24c5d);
    color: white;
}

.round-bg {
    height: 90px;
    width: 90px;
    border-radius: 50%;

}

.team-image-width .skill-box {
    width: 100%;
    height: 100%;
}

.team-image-width .flip-card-front {
    padding: 0;
    background: none;
}

.team-image-width .flip-card-inner {
    margin-top: 0;
}

.strat-color {
    background-color: #982135;
}

.strat-color:after {
    border: 15px solid #982135;
}

.customer-color {
    background-color: blueviolet;
}

.customer-color:after {
    border: 15px solid blueviolet;
}

.software-color {
    background-color: #f2721f;
}

.software-color:after {
    border: 15px solid #f2721f;
}

.end-color {
    background-color: #41cb41;
}

.end-color:after {
    border: 15px solid #41cb41;
}

.round-bg:after {
    content: '';
    position: absolute;
    height: 90px;
    width: 90px;
    top: 0px;
    left: 0px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    animation: 1s borderanimate infinite linear;
    -webkit-transition: .8s time;
    -moz-transition: .8s time;
    -ms-transition: .8s time;
    -o-transition: .8s time;
    transition: .8s time;
}

@keyframes borderanimate {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        opocity: 1;
    }

    25% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 0.5;
    }

    75% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0.2;
    }

    100% {
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
        -o-transform: scale(1.3);
        transform: scale(1.3);
        opacity: 0.1;
    }
}

.round-bg img {
    padding: 24%;
}

.our-aim {
    font-size: 19px;
    text-transform: capitalize;
}

.pad-lt-rt {
    padding: 0 2%;
}

.pad-4 {
    padding: 4% 0 0 0;
}

.sec-btn {
    width: 75%;
}

.second-btn {
    background-color: #1E234D;
    color: white;
    font-weight: 500;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 13px;
    webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    padding: 12px;
}

.second-btn:hover {
    background-color: #946fda;
    color: white;
}

/**********About-us page media Queries***************/

@media (min-width: 0px) and (max-width: 320px) {
    .common-head-outer {
        text-align: center;
    }

    .flip-card-inner {
        margin-top: 10px;
    }

    .skill-box {
        text-align: center;
        height: 220px;
        margin: 0 auto;
        width: 235px;
    }

    .common-para-description {
        font-size: 13px;
    }

    .small-box1,
    .small-box2 {
        margin-top: 10px;
    }

    .team-image-width {
        width: 100%;
        text-align: center;
    }

    .round-bg {
        margin: 0 auto;
    }

    .round-bg:after {
        left: 36%;
    }

    .respo-pad {
        padding-top: 4%;
        text-align: center;
    }

    .pad-4 {
        text-align: center !important;
    }

    .common-head-outer {
        padding: 18px 0px;
    }

    .sec-btn {
        width: 100%;
    }
}

@media (min-width: 321px) and (max-width: 480px) {
    .common-head-outer {
        text-align: center;
    }

    .flip-card-inner {
        margin-top: 10px;
    }

    .skill-box {
        text-align: center;
        height: 220px;
        margin: 0 auto;
        width: 300px;
    }

    .flip-card-front {
        padding: 18% 0;
    }

    .common-para-description {
        font-size: 13px;
    }

    .name-onimage {
        padding: 0px 16%;
    }

    .small-box1,
    .small-box2 {
        margin-top: 10px;
    }

    .team-image-width {
        width: 100%;
        text-align: center;
    }

    .team-image-width1 {
        width: 50%;
        padding: 10px;
    }

    .round-bg {
        margin: 0 auto;
    }

    .round-bg:after {
        left: 39.5%;
    }

    .respo-pad {
        padding-top: 4%;
        text-align: center;
    }

    .pad-4 {
        text-align: center !important;
    }

    .common-head-outer {
        padding: 18px 0px;
    }

    .sec-btn {
        width: 100%;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .skill-box {
        height: 230px;
        width: 137px;
    }

    .small-box2 {
        margin-top: -85px;
    }

    .flip-card-front {
        padding: 34% 0;
    }

    .respo-pad {
        padding: 0 8%;
    }

    .team-image-width {
        width: 50%;
    }

    .name-onimage {
        bottom: 0;
        padding: 0px 25px;
    }
}

/******************About us page completed***********/