html {
    font-family: 'Montserrat';
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

.m0 {
    margin: 0;
}

.p0 {
    padding: 0;
}

.mp0 {
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
}


/* intro card style start */

section.intro {
    margin-top: 150px;
}

.intro__card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.intro__card__content {
    width: 80%;
}

.intro__card__content p.intro {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.5;
}

.gif__icons {
    width: 15%;
}

.gif__icons img {
    width: 100%;
}

.rating__card {
    margin: 10px 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.rating__img {
    width: 80px;
    height: 80px;
    border-radius: 25px;
    background-color: #D9D9D9;
    margin-right: 10px;
}

.stars__numbers {
    width: 200px;
}

.rating__card p {
    width: 400px;
    padding: 0;
    margin: 0;
    color: #5F6368;
    line-height: 1.5;
    font-size: 18px;
}


/* intro card style end */


/* team photo image start*/

.team__photo {
    margin: 100px 0;
}

.team__img {
    width: 100%;
}


/* team photo image end*/


/* paralax slider start */

.paralax__container {
    display: flex;
    overflow: hidden;
}

.paralax__container img {
    width: 100%;
}


/* paralax slider end */


/* specialists style start */

.specialists {
    margin: 0;
    margin-top: 100px;
    background-color: #212120;
}

.specialists>.container {
    padding: 100px 0;
    height: 100vh;
}

.specialists h1 {
    font-size: 68px;
    font-weight: 700;
    text-align: center;
    color: #3F3E3E;
}

.red__span {
    color: #DA0903 !important;
}

.white__span {
    color: #fff !important;
}


/* specialists style end */

.sticky-element {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

.track {
    width: fit-content;
    flex: 0 0 auto;
    padding-inline-start: 20%;
    padding-inline-end: 5%;
}

.track-flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 75vh;
}

.panel-wide {
    position: relative;
    width: 1000px;
    height: 692px;
    overflow: hidden;
    flex: 0 0 auto;
    border-radius: 25px;
    background-color: #f1f1f1;
}

.panel-wide img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.panel-wide::after {
    position: absolute;
    content: "";
    inset: 0;
}

.half-height .track-flex {
    gap: 2rem;
}

.panel-wide-white {
    background-color: #fff;
}

.panel-wide-white {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 30px;
}

.panel-wide-white h1 {
    font-size: 72px;
    font-weight: 600;
}

.card__in__wide {
    position: absolute;
    bottom: 0;
    top: 0;
    padding: 50px 25px;
}

.card__in__wide img {
    width: 70%;
    height: 300px;
    border-radius: 10px;
}

.card__in__wide h1 {
    font-size: 32px;
    font-weight: 400;
    text-align: left;
    margin-top: 30px !important;
    width: 70%;
}

.card__in__wide p {
    font-size: 22px;
    font-weight: 400;
    text-align: left;
}

.training__link__btn {
    color: #DA0903 !important;
    font-size: 22px;
    font-weight: 500;
    text-align: left;
    /* z-index: 1; */
}

.training__link__btn:hover {
    cursor: pointer;
    text-decoration: underline !important;
}

.spe_h1 {
    margin: 10px 0;
}

.avatars {
    display: flex;
    align-items: center;
    justify-content: center;
}

.spe_span {
    background-color: #fff;
    border-radius: 40px;
    padding: 10px;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    opacity: 0;
    margin-bottom: -350px;
    transition: all ease 1s;
}

.spe_span img {
    border-radius: 50%;
    background-color: #e3e3e3;
    transition: all ease 1s;
    width: 60px;
    height: 60px;
}

.ml {
    margin-left: -48px;
    border: 2px solid #fff;
}

.paralax__active {
    height: 100vh;
}

.paralax__active .ml {
    margin-left: -10px;
}

.paralax__active .op {
    opacity: 1;
    margin-bottom: 0;
}

.spe__flex {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    /* z-index: 100000000; */
}

.bg__img__1 {
    aspect-ratio: 16 / 9;
    height: 275px;
    background-image: url('./../it/images/Frame\ 47.jpg');
    border-radius: 20px;
    background-size: cover;
    background-position: center;
}

.bg__img__2 {
    aspect-ratio: 16 / 9;
    height: 275px;
    background-image: url('./../it/images/website-banner.jpg');
    border-radius: 20px;
    background-size: cover;
    background-position: center;
}

.bg__img__3 {
    aspect-ratio: 16 / 9;
    height: 275px;
    background-image: url('./../it/images/002.jpg');
    border-radius: 20px;
    background-size: cover;
    background-position: center;
}

.bg__img__4 {
    aspect-ratio: 16 / 9;
    height: 275px;
    background-image: url('./../it/images/webdesign-banner.jpg');
    border-radius: 20px;
    background-size: cover;
    background-position: center;
}

.bg__img__5 {
    aspect-ratio: 16 / 9;
    height: 275px;
    background-image: url('./../it/images/workspace.png');
    border-radius: 20px;
    background-size: cover;
    background-position: center;
}

.bg__img__6 {
    aspect-ratio: 16 / 9;
    height: 275px;
    background-image: url('./../it/images/123.png');
    border-radius: 20px;
    background-size: cover;
    background-position: center;
}

@media only screen and (max-width: 940px) {
    .spe_h1 {
        font-size: 48px !important;
    }
    .panel-wide-white {
        justify-content: center !important;
    }
}

@media only screen and (max-width: 940px) {
    .spe_h1 {
        font-size: 30px !important;
    }
    .sticky-element {
        height: auto;
        width: 100%;
        margin: auto;
    }
    .card__in__wide h1 {
        width: 100%;
    }
    .track {
        width: 100%;
        margin: auto;
        padding: 0 10px;
    }
    .panel-wide {
        width: 100%;
        margin: auto;
    }
    .track-flex {
        width: 100%;
        flex-direction: column;
        height: auto;
        margin: auto;
    }
    .bg__img__1,
    .bg__img__2,
    .bg__img__3,
    .bg__img__4,
    .bg__img__5,
    .bg__img__6 {
        aspect-ratio: auto;
    }
    .spe_span img {
        width: 45px;
        height: 45px;
    }
    .card__in__wide h1 {
        font-size: 24px;
    }
    .card__in__wide p {
        font-size: 16px;
    }
    .intro__card__content p.intro {
        font-size: 28px;
    }
    .panel-wide-white {
        justify-content: center;
    }
    .panel-wide-white h1 {
        font-size: 52px;
    }
}

@media only screen and (max-width: 540px) {
    .spe_h1 {
        font-size: 20px !important;
    }
    section.intro {
        margin-top: 50px;
    }
    .bg__img__1,
    .bg__img__2,
    .bg__img__3,
    .bg__img__4,
    .bg__img__5,
    .bg__img__6 {
        height: 185px;
    }
    .intro__card__content p.intro {
        font-size: 20px;
    }
    .intro__card__content {
        width: 75%;
    }
    .team__photo {
        margin: 50px 0;
    }
    .gif__icons {
        width: 20%;
    }
    .spe_span img {
        width: 30px;
        height: 30px;
    }
    .panel-wide-white {
        justify-content: center;
        height: auto;
    }
    .panel-wide-white h1 {
        font-size: 32px;
    }
    .card__in__wide {
        padding: 25px 10px;
    }
    .card__in__wide {
        position: relative;
    }
    .panel-wide {
        height: auto;
    }
}

.card__in__wide {
    /* z-index: 2 !important; */
    min-height: 100% !important;
}

@media only screen and (max-width: 540px) {
    .specialists {
        padding: 20px 0;
    }
    .spe_span {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 0;
        opacity: 1;
        background-color: transparent;
    }
    .spe_span img {
        width: 130px;
        height: 130px;
        opacity: 0;
        margin-bottom: 30px;
    }
    .ml {
        margin-left: 0 !important;
        border: 2px solid #fff;
    }
    .spe__flex {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: auto;
        /* z-index: 100000000; */
    }
    .paralax__active img {
        opacity: 1;
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 440px) {
    .spe_span {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 340px) {
    .spe_h1 {
        font-size: 15px !important;
    }
    .spe_span {
        /* opacity: 0; */
        /* margin-bottom: -350px; */
        transition: all ease 1s;
    }
    .spe_span img {
        width: 130px;
        height: 130px;
    }
    .panel-wide-white {
        justify-content: center;
    }
    .panel-wide-white h1 {
        font-size: 24px;
    }
}

.w1 {
    transition: all ease .2s !important;
}

.w2 {
    transition: all ease .3s !important;
}

.w3 {
    transition: all ease .4s !important;
}

.w4 {
    transition: all ease .5s !important;
}

.w5 {
    transition: all ease .6s !important;
}

.w6 {
    transition: all ease .7s !important;
}

.w7 {
    transition: all ease .8s !important;
}

.w8 {
    transition: all ease .9s !important;
}