@import "https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;700;800&display=swap";

@font-face {
    font-family: "Kontora-Bold";
    src: url("/assets/fonts/kontora/Kontora-Bold.otf") format("opentype");
}

@font-face {
    font-family: "Kontora-ExtraBold";
    src: url("/assets/fonts/kontora/Kontora-ExtraBold.otf") format("opentype");
}

*,
*::after,
*::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

div {
    display: block;
}

.container {
    margin: 0 auto;
    max-width: 1300px;
    display: block;
}

body {
    display: block;
}

section {
    padding: 0;
    margin: 84px 0;
}

.header_section {
    padding: 0 calc(50vw - 646px);
}

.anirase {
    padding-top: 43px;
    margin-bottom: 100px;
}

.anirase__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.gray__block {
    width: 80%;
    background: #edeff4;
    height: 994px;
    position: relative;
}

.gray__block::after {
    position: absolute;
    z-index: 4;
    top: 250px;
    left: 103px;
}

.gray__block:before {
    position: absolute;
    z-index: 5;
    top: 260px;
    left: 160px;
    width: 277px;
    height: 600px;
    /* background-size: 100% 100%; */
    /* background-size: cover; */
    background-size: contain;
    background-position: center;
    border-radius: 40px;
    background-repeat: no-repeat;
}

.anirase-title {
    font-size: 40px;
    line-height: 48px;
    font-weight: 400;
    color: #000;
    font-family: "Inter", sans-serif;
    text-transform: uppercase;
    padding-top: 40px;
    padding-left: 140px;
}

.white__block {
    margin-left: 23px;
    width: 20%;
    height: 994px;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: left bottom;
    position: relative;
}

.white__block::after {
    position: absolute;
    top: 115px;
    left: -860px;
    z-index: 1;
}

.white__block .white-title {
    color: E8EBF4;
}

.white__block::before {
    position: absolute;
    top: 135px;
    left: -840px;
    z-index: 2;
    width: 960px;
    height: 535px;
    background-size: cover;
    background-position: center;
}

.description__title-desc {
    margin-right: 15px;
}

.description__title-desc,
.color__title-desc,
.project__title-desc,
.project__title-desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 84px;
}

.desc-number-01,
.desc-number,
.color-number-02,
.color-desc,
.project-number-03,
.project-desc,
.mobile__title-number-04,
.mobile__title-name,
.control__inner-title {
    font-family: "Kontora-Bold";
    font-size: 95px;
}

.desc-number-01,
.color-number-02,
.project-number-03,
.mobile__title-number-04,
.control__inner-title {
    color: #bebebe;
    font-size: 95px;
}

.desc-number,
.color-desc,
.project-desc,
.mobile__title-name {
    color: #e8ebf4;
}

.description-paragraph {
    font-size: 18px;
    font-family: "Kontora-Bold";
    margin-bottom: 84px;
}

.project__title-desc,
.description__inner,
.mobile__title,
.control__inner-title {
    margin-left: 10%;
    margin-right: 20%;
}

.color {
    margin-bottom: 84px;
}

.color__inner {
    max-width: 930px;
    margin-left: 10%;
    margin-right: 10%;
}

.color-number-02 {
    width: 109px;
    height: 71px;
}

.color-circles {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 80px 130px;
}

@media (max-width: 700px) {
    .color-circles {
        gap: 20px;
    }
}

.circle {
    max-width: 221px;
    width: 100%;
    height: 221px;
    border-radius: 50%;
    border: 25px solid #000;
    /* margin-right: 140px; */
    font-size: 32px;
    font-family: "Kontora-Bold";
    padding: 69px 17px 65px 16px;
    /* margin-bottom: 84px; */
}

.circle-01 {
    border-color: #fc8c52;
}

.circle-02 {
    border-color: #2c2b2c;
}

.circle-03 {
    margin-right: 0;
    border-color: #2b2b2b;
}

.circle-04 {
    border-color: #fdf652;
    margin-bottom: 0;
}

.circle-05 {
    border-color: #2a2a2a;
    margin-bottom: 0;
}

.project__inner {
    max-width: 1290px;
    margin-right: 0;
}

.project {
    margin-bottom: 84px;
}

.swiper {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: right;
    -ms-flex-pack: right;
    justify-content: right;
    max-width: 1148px;
    margin-right: 0 !important;
    padding-right: 5px;
    flex-direction: column;
    /* margin-left: 130px !important; */
}

.swiper-wrapper {
    padding-top: 84px;
    /* margin-bottom: 84px; */
    max-height: 620px;
}
.mobileSwiper .swiper-wrapper,
.mobileSwiper .swiper-wrapper .swiper-slide {
    max-height: fit-content;
}
.portfolioSwiper .swiper-wrapper,
.portfolioSwiper .swiper-wrapper .swiper-slide {
    max-height: 1400px;
}


.project__title-number {
    display: block;
}

.project__title-number h1 {
    color: #000;
    font-size: 32px;
    z-index: 999;
    /* position: absolute; */
    /* left: -3px; */
    color: #bebebe;
    font-family: "Kontora-Bold";
    font-size: 95px;
}

.wrap-title {
    display: flex;
    justify-content: space-between;
    max-width: 930px;
    margin-left: 6%;
    margin-right: 6%;
    margin-bottom: 0;
}

.project__title-desc {
    display: block;
}

.project__title-desc h1 {
    color: #000;
    /* position: absolute; */
    font-size: 32px;
    /* right: 260px; */
    color: #e8ebf4;
    font-family: "Kontora-Bold";
    font-size: 95px;
}

.swiper-slide {
    width: 100%;
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-height: 620px;
    height: 100%;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: top;
    max-width: 1149px;
    max-height: 100%;
    margin-bottom: 0;
}

.portfolioSwiper .swiper-wrapper {
    max-height: 1400px;
}

.portfolioSwiper .swiper-wrapper img {
    max-height: 1400px;
    object-fit: contain;
}

.swiper-button-next {
    /* position: relative; */
    position: absolute;
    top: 53px;
    left: 381px;
}

.swiper-button-next::after {
    content: "";
    display: none;
}

.swiper-button-next::before {
    position: absolute;
    content: url(../img/Arrow-right.png);
    bottom: 0;
    left: 0;
}

.swiper-button-prev {
    position: absolute;
    top: 53px;
    left: 223px;
}

.swiper-button-prev::after {
    content: "";
    display: none;
}

.swiper-button-prev::before {
    position: absolute;
    content: url(../img/Arrow-left.png);
    bottom: 0;
    left: 0;
}

.mobile {
    margin-bottom: 84px;
}

.mobileSwiper {
    height: 653px;
    position: relative;
    max-width: 1036px;
    position: absolute;
    top: -240px;
}

.mobileSwiper .swiper-wrapper {
    padding-top: 18px;
}

.mobileSwiper .swiper-slide.mobile-slide {
    width: 322px;
    position: relative;
    background: unset;
}

.mobileSwiper::before {
    content: url(/assets/img/anirase-bg-gray-mobile.png);
    position: absolute;
    left: calc(50% - 225px);
    z-index: 1;
}

.mobileSwiper::after {
    content: url(/assets/img/cutout.png);
    position: absolute;
    top: 17px;
    left: calc(50% - 83px);
    z-index: 9;
}

.swiper-slide.mobile-slide.swiper-slide-visible.swiper-slide-active {
    /* background-image: url(/assets/img/anirase-bg-gray-mobile.png);
    background-repeat: no-repeat; */
    background: unset;
}

.mobileSwiper .swiper-slide.mobile-slide img {
    width: 296px;
    height: 620px;
    border-radius: 35px;
}

/* .swiper-slide.mobile-slide.swiper-slide-visible.swiper-slide-active::before {
    content: url(/assets/img/cutout.png);
} */
/* .mobileSwiper .swiper-slide.mobile-slide::before {
    content: url(/assets/img/cutout-unset.png);
    position: absolute;
    top: 17px;
} */
.mobileSwiper .swiper-slide-shadow-left,
.mobileSwiper .swiper-slide-shadow-right {
    background: unset;
}

.mobile__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 84px;
}

.mobile__inner {
    margin-left: 10%;
}

.mobile__block-white {
    height: 240px;
    max-width: 1045px;
    position: relative;
}

.mobile__block-white::after {
    position: absolute;
    left: 360px;
    top: 10px;
    z-index: 1;
}

.mobile__block-white::before {
    position: absolute;
    left: 380px;
    top: 20px;
    z-index: 2;
}

.mobile__block-gray {
    height: 530px;
    max-width: 1045px;
    background: #edeff4;
    position: relative;
}

.mobile__block-gray::after {
    position: absolute;
    left: 145px;
    top: -210px;
}

.mobile__block-gray::before {
    position: absolute;
    right: 145px;
    top: -210px;
}

.controlpanel {
    margin-bottom: 84px;
}

.control__inner-title {
    margin-bottom: 84px;
    max-width: 890px;
}

.control__inner-title h1 {
    font-size: 95px;
}

.gray-strip {
    max-width: 1057px;
    height: 43px;
    background: #edeff4;
}

.control__inner-dashboard {
    max-width: 1192px;
    margin-bottom: -5px;
}

.dashboard__img {
    width: 100%;
    height: 620px;
    object-fit: cover;
}

.control__inner-desc {
    background-color: #edeff4;
    max-width: 1057px;
}

.control__inner-desc-p {
    padding: 84px 34px 84px 140px;
    font-family: "Kontora-Bold";
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 18px;
}

.circle-02-02 {
    border-color: #f7f7f7;
}

.swiper-button-next-02 {
    /* position: relative; */
    z-index: 9;
    cursor: pointer;
    position: absolute;
    top: 70px;
    left: 381px;
}

.swiper-button-next-02::after {
    content: "";
    display: none;
}

.swiper-button-next-02::before {
    position: absolute;
    content: url(../img/Arrow-right.png);
    bottom: 0;
    left: 0;
    cursor: pointer;
}

.swiper-button-prev-02 {
    /* position: relative; */
    cursor: pointer;
    z-index: 9;
    position: absolute;
    top: 70px;
    left: 223px;
}

.swiper-button-prev-02::after {
    content: "";
    display: none;
}

.swiper-button-prev-02::before {
    position: absolute;
    content: url(../img/Arrow-left.png);
    bottom: 0;
    left: 0;
    cursor: pointer;
}

.mySwiper-02 {
    margin-left: 60px !important;
    position: relative;
    flex-direction: column;
}

.project-number {
    display: block;
    margin-left: 60px;
}

.project-number h1 {
    left: 70px;
}

.project-desc h1 {
    right: 150px;
}

.project-slider__inner {
    margin-bottom: 84px;
}

.swiper-button-disabled {
    opacity: 0.4;
}

.footer__inner {
    margin-bottom: 20px;
}

.footer__inner-title {
    margin-bottom: 84px;
}

.footer__inner-title h1 {
    font-family: "Inter";
    font-weight: 400;
    font-size: 40px;
    margin-left: 140px;
    max-width: 566px;
}

.footer__inner-portfolio {
    margin-left: 10px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr) [4];
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 4em;
}

a {
    text-decoration: none;
}

.portfolio-item {
    width: 260px;
    height: 260px;
    text-transform: uppercase;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    background-size: cover;
    background-position: center;
}

.portfolio-item-p {
    opacity: 0;
    font-size: 30px;
    font-weight: 700;
    font-family: "Segoe UI";
    line-height: 260px;
    text-align: center;
    color: #fff;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
}

.portfolio-item:hover p {
    opacity: 1;
    background: -webkit-gradient(linear,
            left bottom,
            left top,
            from(rgba(46, 46, 46, 0.9)),
            to(rgba(46, 46, 46, 0.9)));
    background: -o-linear-gradient(bottom,
            rgba(46, 46, 46, 0.9),
            rgba(46, 46, 46, 0.9));
    background: linear-gradient(0deg,
            rgba(46, 46, 46, 0.9),
            rgba(46, 46, 46, 0.9));
    cursor: pointer;
}