.section__why{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	margin-top: 135px;
}

.div__why{
    display: flex;
    flex-direction: column;
    gap: 90px;
    width: 100%;
    max-width: 1140px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 90px;
    margin-bottom: 80px;
}

.title__why{
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
}

.h2__why{
    align-self: center;
    font-weight: 800;
    font-size: 50px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #676767;

}

.why-color{
    color: #009EC1;
}

.title__p__why{
    width: 100%;
    align-items: start;
}

.p__why{
    width: 100%;
    max-width: 820px;
    font-weight: 800;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #676767;
}

.block__why-list{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: 
        ". . . . . A A A A A A A" 
        "B B B B B B B . . . . ." 
        ". . . . . C C C C C C C" 
        "D D D D D D D . . . . ." 
        ". . . . . E E E E E E E" 
        "F F F F F F F. . . . ." 
        ". . G G G G G G G G . .";
    gap: 60px 20px;

}

.block__why-item-wrapper{
    border-radius: 30px;
    position: relative;
    z-index: 1;
}

.block__why-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
    border-radius: 30px;
    padding: 50px 40px;
    position: relative;
    min-height: 250px;
    z-index: 3;
}

.block__why-item-wrapper-1{
    grid-area: A;
}

.block__why-item-1{
    background: #E0EEF1;
}

.block__why-item-wrapper-1::after{
    content: url(img/item-line-1.svg);
    position: absolute;
    bottom: -100%;
    left: 10%;
    z-index: 2;
}

.block__why-item-wrapper-2{
    background: #ECEFF0;
    grid-area: B;
}

.block__why-item-2{
    background: #ECEFF0;
}

.block__why-item-wrapper-2::after{
    content: url(img/item-line-2.svg);
    position: absolute;
    bottom: -100%;
    left: 10%;
    z-index: 2
}

.block__why-item-wrapper-3{
    background: #E0EEF1;
    grid-area: C;
}

.block__why-item-3{
    background: #E0EEF1;
}

.block__why-item-wrapper-3::after{
    content: url(img/item-line-3.svg);
    position: absolute;
    bottom: -100%;
    left: 10%;
    z-index: 2
}

.block__why-item-wrapper-4{
    background: #ECEFF0;
    grid-area: D;
}

.block__why-item-4{
    background: #ECEFF0;
}

.block__why-item-wrapper-4::after{
    content: url(img/item-line-4.svg);
    position: absolute;
    bottom: -100%;
    left: 10%;
    z-index: 2
}

.block__why-item-wrapper-5{
    background: #E0EEF1;
    grid-area: E;
}

.block__why-item-5{
    background: #E0EEF1;
}

.block__why-item-wrapper-5::after{
    content: url(img/item-line-5.svg);
    position: absolute;
    bottom: -100%;
    left: 10%;
    z-index: 2
}

.block__why-item-wrapper-6{
    background: #ECEFF0;
    grid-area: F;
}

.block__why-item-6{
    background: #ECEFF0;
}

.block__why-item-wrapper-6::after{
    content: url(img/item-line-6.svg);
    position: absolute;
    bottom: -100%;
    left: 10%;
    z-index: 2
}


.block__why-item-txt{
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
    max-width: 400px;
    z-index: 4;
}

.block__why-item-title{
    font-weight: 700;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #00A1C4;
}

.block__why-item-p{
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    font-variant: small-caps;
    color: #686868;
}

.block__why-item-img{
    position: absolute;
    top: 0;
    right: 0;
    height: 95%;
    z-index: 3;
    
}

.block__why-item-5 .block__why-item-img{
    top: auto;
    bottom: 0;  
    right: -70px;
    height: 125%;  
}

.block__why-item-6 .block__why-item-img{
    top: auto;
    bottom: 0; 
    height: 130%;   
}

.block__why-item-final{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 50px;
    border: 3px solid #C5E4EE;
    border-radius: 30px;
    background-color: #fff;
    grid-area: G;
}

.block__why-final-p{
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    font-variant: small-caps; 
    color: #686868;
}

.block__why-item-btn{
    border-radius: 20px;
    padding-top: 20px;
    padding-right: 40px;
    padding-bottom: 20px;
    padding-left: 40px;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
    background: #FFFFFF !important;
    color: #009EC1 !important;
    transition: color 0.4s ease, background 0.4s ease;
    text-decoration: none !important;
}

.block__why-item-btn:hover{
    color: #FFFFFF !important;
    background: #24adcb !important;
}

/* 

#009ec1,
        #23aac8,
        #13b2d5,
        #023c49,
        #2a879c,
        #14697c

*/
:root {
	--gradient-shadow: linear-gradient(
		45deg,
		#009CC1,
        #247C91,
        #00667D,
        #38C0E0,
        #65C9E0,
        #002CCB,
        #263E98,
        #001C84,
        #395EE5,
        #6782E5
	);
}

.shadow {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	color: #fff;
	text-align: center;
}

.shadow:before,
.shadow:after {
	content: "";
	position: absolute;
	/*top: -2px;
	left: -2px;*/
	background: var(--gradient-shadow);
	background-size: 300%;
    width: calc(100%);
	height: calc(100%);
	/*width: calc(100% + 4px);
	height: calc(100% + 4px);*/
	z-index: -1;
	animation: animate 20s linear infinite;
    border-radius: 25px;
}

.shadow:after {
	filter: blur(12px);
}

@keyframes animate {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 300% 0;
	}
	100% {
		background-position: 0 0;
	}
}




.block__why-item-wrapper,
.block__why-item-final {
  opacity: 0;
  transition: opacity 1.4s ease, transform 1.4s ease;
}

.block__why-item-wrapper-1::after,
.block__why-item-wrapper-2::after,
.block__why-item-wrapper-3::after,
.block__why-item-wrapper-4::after,
.block__why-item-wrapper-5::after,
.block__why-item-wrapper-6::after{
  opacity: 0;
  transition: opacity 5s ease, transform 2.4s ease;
}

/* Слева */
.block__why-item-wrapper.from-left {
  transform: translateX(-150px);
}

/* Справа */
.block__why-item-wrapper.from-right {
  transform: translateX(150px);
}

/* Финальный снизу */
.block__why-item-final.from-bottom {
  transform: translateY(150px);
}

/* Появление */
.block__why-item-wrapper.show,
.block__why-item-final.show {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.block__why-item-wrapper-1.show::after,
.block__why-item-wrapper-2.show::after,
.block__why-item-wrapper-3.show::after,
.block__why-item-wrapper-4.show::after,
.block__why-item-wrapper-5.show::after,
.block__why-item-wrapper-6.show::after{
    opacity: 1;
    transform: translateX(0) translateY(0);
}





@media (max-width: 1919px) {
	.section__why{
		margin-top: 100px;
	}


    .div__why{
        gap: 90px;
        max-width: 1140px;
    }

    .block__why-item{
        padding: 38px 35px 45px;
    }

    .block__why-item-txt{
        max-width: 360px;
    }
}

@media (max-width: 1200px) {
	.section__why{
		margin-top: 90px;
	}


    .div__why{
        gap: 50px;
        max-width: 960px;
    }

    .h2__why{
        font-size: 36px;
    }

    .p__why{
        font-size: 20px;
    }

    .block__why-list{
        gap: 100px;
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas: 
            ". . A A A A" 
            "B B B B . ." 
            ". . C C C C" 
            "D D D D . ." 
            ". . E E E E" 
            "F F F F . ." 
            ". G G G G .";
    }

    .block__why-item{
        padding: 42px 35px;
    }

    .block__why-item-txt{
        max-width: 345px;
    }

    .block__why-final-p{
        font-size: 20px;
    }

    .block__why-item-btn{
        padding: 20px 12px;
    }
}

@media (max-width: 992px) {
	.section__why{
		margin-top: 70px;
	}


    .div__why{
        gap: 60px;
        max-width: 720px;
    }

    .h2__why{
        font-size: 32px;
    }

    .p__why{
        font-size: 18px;
    }

    .block__why-list{
        gap: 70px;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: 
            ". . A A A A A A" 
            "B B B B B B . ." 
            ". . C C C C C C" 
            "D D D D D D . ." 
            ". . E E E E E E" 
            "F F F F F F . ." 
            ". G G G G G G .";
    }

    .block__why-item{
        padding: 47px 40px;
    }

    .block__why-item-txt{
        max-width: 320px;
    }

    .block__why-item-title{
        font-size: 24px;
    }
}

@media (max-width: 767px) {
	.section__why{
		margin-top: 60px;
	}


    .div__why{
        max-width: 540px;
    }

    .h2__why{
        font-size: 24px;
    }

    .block__why-list{
        gap: 130px;
        grid-template-columns: repeat(1, 1fr);
        grid-template-areas: 
            "A" 
            "B" 
            "C" 
            "D" 
            "E" 
            "F" 
            "G";
    }

    .block__why-item{
        padding: 36px 25px;
    }

    .block__why-item-txt{
        max-width: 270px;
    }

    .block__why-item-final{
        gap: 30px;
        padding: 45px 30px;
    }

    .block__why-final-p{
        font-size: 18px;
    }

    .block__why-item-btn{
        padding: 14px 10px;
        font-size: 20px;
    }



    .block__why-item-wrapper-1::after{
        position: absolute;
        bottom: -70%;
        left: 10px;
        z-index: 2;
        content: "";
        width: 90%;
        height: 100%;
        background-image: url(img/item-line-mob-1.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .block__why-item-wrapper-2::after{
        position: absolute;
        bottom: -70%;
        left: 10px;
        z-index: 2;
        content: "";
        width: 90%;
        height: 100%;
        background-image: url(img/item-line-mob-2.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .block__why-item-wrapper-3::after{
        position: absolute;
        bottom: -70%;
        left: 10px;
        z-index: 2;
        content: "";
        width: 90%;
        height: 100%;
        background-image: url(img/item-line-mob-3.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .block__why-item-wrapper-4::after{
        position: absolute;
        bottom: -70%;
        left: 10px;
        z-index: 2;
        content: "";
        width: 90%;
        height: 100%;
        background-image: url(img/item-line-mob-4.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .block__why-item-wrapper-5::after{
        position: absolute;
        bottom: -70%;
        left: 10px;
        z-index: 2;
        content: "";
        width: 90%;
        height: 100%;
        background-image: url(img/item-line-mob-5.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .block__why-item-wrapper-6::after{
        position: absolute;
        bottom: -70%;
        left: 10px;
        z-index: 2;
        content: "";
        width: 90%;
        height: 100%;
        background-image: url(img/item-line-mob-6.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .block__why-item-2 .block__why-item-txt,
    .block__why-item-5 .block__why-item-txt,
    .block__why-item-6 .block__why-item-txt{
        max-width: 250px;
    }

    .block__why-item-5 .block__why-item-img{
        right: -40px;
        height: 200px;

    }

    .block__why-item-2 .block__why-item-img{
        height: 200px;
    }

    .block__why-item-6 .block__why-item-img{
        top: -40px;
        bottom: 0;
        height: 200px;
    }
}

@media (max-width: 576px) {
	.section__why{
		margin-top: 45px;
	}


    .block__why-list{
        gap: 110px;
    }

    .block__why-item{
        padding: 40px 20px;
    }

    .block__why-item-txt{
        max-width: 100%;
    }

    .block__why-item-title{
        font-size: 20px;
    }

    .block__why-item-final{
        gap: 30px;
        padding: 30px 25px;
    }

    .block__why-list{
        gap: 80px;
    }

    .block__why-item-wrapper-1::after,
    .block__why-item-wrapper-2::after,
    .block__why-item-wrapper-3::after,
    .block__why-item-wrapper-4::after,
    .block__why-item-wrapper-5::after,
    .block__why-item-wrapper-6::after{
        bottom: -63%;
        width: 90%;
        left: 10px;
    }
}