@media screen and (max-width: 1265px) {
    .central__line {
        height: 0;
    }
    .container {
        width: 1030px;
    }
    .animation__element-one,
    .animation__element-two,
    .animation__element-three,
    .animation__element-four{
        height: 250px;
        width: 400px;
        box-shadow: 0px 0px 0px 8px rgba(132, 127, 127, 0.4);
    }
    .animation__element-one:hover,
    .animation__element-two:hover,
    .animation__element-three:hover,
    .animation__element-four:hover,
    .animation__element-one:active,
    .animation__element-two:active,
    .animation__element-three:active,
    .animation__element-four:active{
        box-shadow: 0px 0px 0px 8px rgba(239, 235, 235, 0.4);
    }

    .first__element-one,
    .first__element-two,
    .first__element-three {
        border-radius: 8px;
        box-shadow: 0px 0px 0px 8px rgba(132, 127, 127, 0.4);
        height: 300px;
        width: 300px;
    }
    .first__element-two {
        top: 10rem;
        left: 15rem;
    }
    .first__element-two:active,
    .first__element-two:hover {
        transform: scale(1.2);
        top: 10rem;
        left: 20rem;
        z-index: 1;
    }
    .first__element-three {
        height: 270px;
        width: 270px;
    }
    .first__element-one:hover + .first__element-three,
    .first__element-one:active + .first__element-three {
        transform: translateX(-295%) translateY(0%) scale(.2) rotate(180deg);
    }
    .first__element-two:hover + .first__element-three,
    .first__element-two:active + .first__element-three {
        transform: translateX(-139%) translateY(30%) scale(.23);
    }


    .second__element-one,
    .second__element-two,
    .third__element-one,
    .third__element-two{
        height: 400px;
        width: 400px;
        box-shadow: 0px 0px 0px 8px rgba(132, 127, 127, 0.4);
    }


    
    .third__element-three{
        height: 350px;
        width: 250px;
    }
    .third__element-one,
    .third__element-two,
    .third__element-three {
        box-shadow: 0px 0px 0px 8px rgba(25, 18, 18, 0.4);
    }
    .third__element-two:active,
    .third__element-two:hover {
        box-shadow: 0px 0px 0px 7px rgba(25, 18, 18, 0.4);

    }
    .third__element-one:active + .third__element-three,
    .third__element-one:hover + .third__element-three{
        transform: scale(.225) translateX(-400%) translateY(-218%);
    }
    .third__element-three:active,
    .third__element-three:hover {
        box-shadow: 0px 0px 0px 7px rgba(210, 205, 205, 0.8);
    }



    .fourth__element-one,
    .fourth__element-two {
        height: 300px;
        width: 300px;
    }
    .fourth__element-two {
        top: 10rem;
        left: 15rem;
    }
    .fourth__element-three{
        height: 350px;
        width: 300px;
    }
    .fourth__element-four{
        height: 175px;
        width: 150px;
    }
    .fourth__element-five{
        height: 175px;
        width: 150px;
    }
    .fourth__element-one,
    .fourth__element-two,
    .fourth__block-subtitle {
        box-shadow: 0px 0px 0px 6px rgba(137, 125, 125, 0.6);
    }
    .fourth__element-one:active,
    .fourth__element-one:hover,
    .fourth__element-two:active,
    .fourth__element-two:hover,
    .fourth__element-three:hover,
    .fourth__element-three:active,
    .fourth__element-four:hover,
    .fourth__element-four:active,
    .fourth__element-five:hover,
    .fourth__element-five:active {
        box-shadow: 0px 0px 0px 6px rgba(25, 18, 18, 0.6);
    }
    .four__element-two-wrapper {
        height: 83px;
        width: 81px;
        position: absolute;
        top: 21%;
        left: 26%;
        z-index: 3;
        opacity: 0;
        transition: 1s;
    }



    .five__element-one {
        height: 550px;
        width: 450px;
        box-shadow: 0px 0px 0px 6px rgba(137, 125, 125, 0.6);
    }
    .five__element-two,
    .five__element-three {
        position: relative;
        height: 240px;
        width: 200px;
        overflow: hidden; 
        border-radius: 10px;
        transition: 1s; 
    }
    .five__element-one:hover + .five__block-subtitle,
    .five__element-one:active + .five__block-subtitle{
        transform: scale(.5) translateX(-530%) translateY(-50%);
    }

    .seven__element-one,
    .seven__element-two,
    .seven__element-three-title,
    .seven__element-three-subtitle{
        box-shadow: 0px 0px 0px 6px rgba(137, 125, 125, 0.6);
    }
    .seven__element-three-title:hover,
    .seven__element-three-title:active,
    .seven__element-three-subtitle:hover,
    .seven__element-three-subtitle:active{
        height: 450px;
        width: 400px;
    }
    .seven__element-two:hover + .seven__element-three-subtitle,
    .seven__element-two:active + .seven__element-three-subtitle {
        left: 634px;
        top: 8%;
        transform: scale(.1);
    }



    .six__element-one,
    .six__element-two,
    .eight__element-one,
    .eight__element-two,
    .nine__element-one,
    .nine__element-two {
        height: 250px;
        width: 250px;
        box-shadow: 0px 0px 0px 8px rgba(25, 18, 18, 0.4);
    }
    .six__element-one:hover,
    .six__element-one:active{
        transform: translateX(2rem) scale(1.1);
        box-shadow: 0px 0px 0px 6px rgba(137, 125, 125, 0.6);
    }

    .eight__element-one:hover,
    .nine__element-one:hover,
    .eight__element-one:active,
    .nine__element-one:active {
        transform: translateX(100%) scale(1.1);
        box-shadow: 0px 0px 0px 6px rgba(137, 125, 125, 0.6);
    }
    .six__element-two:hover,
    .eight__element-two:hover,
    .nine__element-two:hover,
    .six__element-two:active,
    .eight__element-two:active,
    .nine__element-two:active {
        box-shadow: 0px 0px 0px 6px rgba(137, 125, 125, 0.6);
    }
    .eight__element-one:hover + .eight__element-two,
    .eight__element-one:active + .eight__element-two {
        transform: translateX(-63%) translateY(-5%) scale(.1);
    }
    .nine__element-one:hover + .nine__element-two,
    .nine__element-one:active + .nine__element-two {
        transform: translateX(-80%) translateY(-5%) scale(.2);
    }
}



@media screen and (max-width: 1085px) {

    .container {
        width: 880px;
    }
    .sections {
        margin-top: 0;
    }
    .title {
        letter-spacing: 3px;
        font-size: 42px;
        opacity: .2;
        text-transform: uppercase;
        font-weight: 500;
    }

    header {
        top: -5px;
    }
    .animation__container-first,
    .animation__container-second{
        gap: 30px;
        margin-top: 30px;
    }
    .animation__element-one,
    .animation__element-two,
    .animation__element-three,
    .animation__element-four{
        height: 230px;
        width: 370px;
    }
    .animation__element-one:hover,
    .animation__element-two:hover,
    .animation__element-three:hover,
    .animation__element-four:hover,
    .animation__element-one:active,
    .animation__element-two:active,
    .animation__element-three:active,
    .animation__element-four:active{
        transform: scale(1.05);
    }

    .first__section-grid{
        margin-top: 50px;
    }
    .first__element-one,
    .first__element-two {
        height: 330px;
        width: 350px;
    }
    .first__element-three {
        height: 265px;
        width: 265px;
    }
    .first__element-one:hover + .first__element-three,
    .first__element-one:active + .first__element-three {
        transform: translateX(-238%) translateY(0%) scale(.24) rotate(180deg);
    }
    .first__element-two:hover + .first__element-three,
    .first__element-two:active + .first__element-three {
        transform: translateX(-73%) translateY(30%) scale(.29);
    }

    .second__element-one,
    .second__element-two,
    .third__element-one,
    .third__element-two{
        height: 400px;
        width: 350px;
    }


    .third__element-three{
        height: 300px;
        width: 200px;
    }
    .third__element-one,
    .third__element-two,
    .third__element-three {
        box-shadow: 0px 0px 0px 8px rgba(25, 18, 18, 0.4);
    }
    .third__element-two:active,
    .third__element-two:hover {
        box-shadow: 0px 0px 0px 7px rgba(25, 18, 18, 0.4);

    }
    .third__element-one:active + .third__element-three,
    .third__element-one:hover + .third__element-three{
        transform: scale(.225) translateX(-400%) translateY(-218%);
    }
    .third__element-three:active,
    .third__element-three:hover {
        box-shadow: 0px 0px 0px 7px rgba(157, 110, 165, 0.8);
    }
    .third__element-three:active,
    .third__element-three:hover {
        transform: scale(1.3);
    }

    .five__element-one {
        height: 450px;
        width: 380px;
        box-shadow: 0px 0px 0px 6px rgba(137, 125, 125, 0.6);
    }
    .five__element-one:hover + .five__block-subtitle,
    .five__element-one:active + .five__block-subtitle{
        transform: scale(.5) translateX(-625%) translateY(-50%);
    }
    .five__element-two,
    .five__element-three {
        height: 180px;
        width: 150px;
    }

    .seven__element-one,
    .seven__element-two {
        height: 450px;
        width: 400px;
    }
    .seven__element-one:hover,
    .seven__element-one:active,
    .seven__element-two:hover,
    .seven__element-two:active {
        transform: scale(1.1);
    }
    .seven__element-three-title,
    .seven__element-three-subtitle{
        height: 300px;
        width: 250px;
    }
    .seven__element-three-title:hover,
    .seven__element-three-title:active,
    .seven__element-three-subtitle:hover,
    .seven__element-three-subtitle:active{
        height: 400px;
        width: 345px;
    }
    .seven__element-one:hover + .seven__element-three-title,
    .seven__element-one:active + .seven__element-three-title {
        left: 13.6%;
        top: 8%;
        transform: scale(.09);
    }
    .seven__element-two:hover + .seven__element-three-subtitle,
    .seven__element-two:active + .seven__element-three-subtitle {
        left: 537px;
        top: 8%;
        transform: scale(.1);
    }


    .six__element-two:hover,
    .eight__element-two:hover,
    .nine__element-two:hover,
    .six__element-two:active,
    .eight__element-two:active,
    .nine__element-two:active {
        box-shadow: 0px 0px 0px 6px rgba(137, 125, 125, 0.6);
        transform: scale(1.1);
    }
    .eight__element-one:hover + .eight__element-two,
    .eight__element-one:active + .eight__element-two {
        transform: translateX(-33%) translateY(-5%) scale(.1);
    }
    .nine__element-one:hover + .nine__element-two,
    .nine__element-one:active + .nine__element-two {
        transform: translateX(-50%) translateY(-5%) scale(.2);
    }
}
@media screen and (max-width: 944px) {
    .container {
        width: 780px;
    }
    .title {
        letter-spacing: 2px;
        font-size: 25px;
        opacity: .2;
        text-transform: uppercase;
        font-weight: 500;
    }

    header {
        top: -15px;
    }
    .animation__container-first,
    .animation__container-second{
        gap: 20px;
        margin-top: 30px;
    }
    .animation__element-one,
    .animation__element-two,
    .animation__element-three,
    .animation__element-four{
        height: 200px;
        width: 330px;
        box-shadow: 0px 0px 0px 4px rgba(35, 32, 32, 0.4);
    }
    .animation__element-one:hover,
    .animation__element-two:hover,
    .animation__element-three:hover,
    .animation__element-four:hover,
    .animation__element-one:active,
    .animation__element-two:active,
    .animation__element-three:active,
    .animation__element-four:active{
        transform: scale(1.05);
        box-shadow: 0px 0px 0px 5px rgba(35, 32, 32, 0.4);
    }
    .animation__video-one,
    .animation__video-two,
    .animation__video-three {
        box-shadow: 0px 0px 0px 5px rgba(35, 32, 32, 0.4);
    }

    .first__section-grid{
        margin-top: 40px;
    }
    .first__element-one,
    .first__element-two {
        height: 270px;
        width: 300px;
        box-shadow: 0px 0px 0px 5px rgba(35, 32, 32, 0.4);

    }
    .first__element-two {
        top: 10rem;
        left: 10rem;
    }
    .first__element-three {
        height: 200px;
        width: 200px;
        box-shadow: 0px 0px 0px 5px rgba(91, 87, 87, 0.4);
    }
    .first__element-one:active,
    .first__element-one:hover {
        transform: scale(1.3);
        top: 4rem;
        left: 13rem;
    }
    .first__element-two:active,
    .first__element-two:hover {
        transform: scale(1.3);
        top: 4rem;
        left: 13rem;
        z-index: 1;
    }
    .first__element-one:hover + .first__element-three,
    .first__element-one:active + .first__element-three {
        transform: translateX(-188%) translateY(0%) scale(.32) rotate(180deg);
    }
    .first__element-two:hover + .first__element-three,
    .first__element-two:active + .first__element-three {
        transform: translateX(-113%) translateY(30%) scale(.303);
    }
    .first__element-three:active,
    .first__element-three:hover {
        box-shadow: 0px 0px 0px 4px rgba(108, 104, 104, .6);
    }

    .second__element-one,
    .second__element-two,
    .third__element-one,
    .third__element-two{
        height: 350px;
        width: 350px;
        box-shadow: 0px 0px 0px 4px rgba(108, 104, 104, .6);
    }
    .second__element-one:active,
    .second__element-one:hover {
        left: 5%;
    }
    .second__element-two:active,
    .second__element-two:hover {
        right: 5%;
    }



    .third__element-three{
        height: 200px;
        width: 150px;
    }
    .third__element-one,
    .third__element-two,
    .third__element-three {
        box-shadow: 0px 0px 0px 4px rgba(108, 104, 104, .6);

    }
    .third__element-two:active,
    .third__element-two:hover {
        box-shadow: 0px 0px 0px 4px rgba(108, 104, 104, .6);
    }
    .third__element-one:active + .third__element-three,
    .third__element-one:hover + .third__element-three{
        transform: scale(.225) translateX(-400%) translateY(-218%);
    }
    .third__element-three:active,
    .third__element-three:hover {
        box-shadow: 0px 0px 0px 4px rgba(108, 104, 104, .6);
    }
    .third__element-three:active,
    .third__element-three:hover {
        transform: scale(1.2);
    }


    .fourth__element-one,
    .fourth__element-two {
        height: 240px;
        width: 250px;
    }
    .fourth__element-two {
        top: 8rem;
        left: 10rem;
    }
    .fourth__block-subtitle{
        border-radius: 3px;
    }
    .fourth__element-three{
        height: 200px;
        width: 220px;
        border-radius: 3px;
    }
    .fourth__element-four{
        height: 100px;
        width: 110px;
        border-radius: 3px;
    }
    .fourth__element-five{
        height: 100px;
        width: 110px;
        border-radius: 3px;
    }
    .fourth__element-one,
    .fourth__element-two,
    .fourth__block-subtitle {
        box-shadow: 0px 0px 0px 4px rgba(108, 104, 104, .6);
    }
    .fourth__element-one:active,
    .fourth__element-one:hover,
    .fourth__element-two:active,
    .fourth__element-two:hover,
    .fourth__element-three:hover,
    .fourth__element-three:active,
    .fourth__element-four:hover,
    .fourth__element-four:active,
    .fourth__element-five:hover,
    .fourth__element-five:active {
        box-shadow: 0px 0px 0px 3px rgba(108, 104, 104, .6);
    }
    .four__element-two-wrapper {
        height: 68px;
        width: 68px;
        top: 20%;
        left: 26%;
    }


    .five__element-one {
        height: 400px;
        width: 330px;
        box-shadow: 0px 0px 0px 4px rgba(108, 104, 104, .6);
    }
    .five__element-one:hover + .five__block-subtitle,
    .five__element-one:active + .five__block-subtitle{
        transform: scale(.5) translateX(-725%) translateY(-50%);
    }
    .five__element-two,
    .five__element-three {
        height: 150px;
        width: 120px;
    }
    .five__element-two:hover,
    .five__element-two:active,
    .five__element-three:hover,
    .five__element-three:active{
        transform: translateX(-7rem) scale(1.3);
        box-shadow: 0px 0px 0px 3px rgba(108, 104, 104, .6);
    }
    

    .seven__element-one,
    .seven__element-two {
        height: 390px;
        width: 340px;
        box-shadow: 0px 0px 0px 3px rgba(108, 104, 104, .6);
    }
    .seven__element-one:hover,
    .seven__element-one:active,
    .seven__element-two:hover,
    .seven__element-two:active {
        transform: scale(1.1);
    }
    .seven__element-three-title,
    .seven__element-three-subtitle{
        height: 250px;
        width: 200px;
        box-shadow: 0px 0px 0px 3px rgba(108, 104, 104, .6);
    }
    .seven__element-three-title:hover,
    .seven__element-three-title:active,
    .seven__element-three-subtitle:hover,
    .seven__element-three-subtitle:active{
        height: 300px;
        width: 285px;
        box-shadow: 0px 0px 0px 4px rgba(108, 104, 104, .6);
    }
    .seven__element-one:hover + .seven__element-three-title,
    .seven__element-one:active + .seven__element-three-title {
        left: 13.6%;
        top: 8%;
        transform: scale(.09);
    }
    .seven__element-two:hover + .seven__element-three-subtitle,
    .seven__element-two:active + .seven__element-three-subtitle {
        left: 503px;
        top: 8%;
        transform: scale(.1);
    }

    .six__container,
    .eight__container,
    .nine__container {
        margin-bottom: 20px;
    }

    .six__element-one,
    .six__element-two,
    .eight__element-one,
    .eight__element-two,
    .nine__element-one,
    .nine__element-two {
        height: 200px;
        width: 200px;
        border-radius: 5px;
        box-shadow: 0px 0px 0px 4px rgba(57, 55, 55, 0.6);
    }
    .six__element-one:hover,
    .eight__element-one:hover,
    .nine__element-one:hover,
    .six__element-one:active,
    .eight__element-one:active,
    .nine__element-one:active {
        transform: translateX(6rem) scale(1.1);
        box-shadow: 0px 0px 0px 4px rgba(57, 55, 55, 0.6);
    }

    .six__element-two:hover,
    .six__element-two:active {
        box-shadow: 0px 0px 0px 4px rgba(57, 55, 55, 0.6);
        transform: translateX(-6rem) scale(1.05);
    }

    .eight__element-two:hover,
    .nine__element-two:hover,
    .eight__element-two:active,
    .nine__element-two:active {
        box-shadow: 0px 0px 0px 4px rgba(57, 55, 55, 0.6);
        transform: scale(1.1);
    }
    .eight__element-one:hover + .eight__element-two,
    .eight__element-one:active + .eight__element-two {
        transform: translateX(-104%) translateY(-5%) scale(.1);
    }
    .nine__element-one:hover + .nine__element-two,
    .nine__element-one:active + .nine__element-two {
        transform: translateX(-120%) translateY(-5%) scale(.2);
    }
}



@media screen and (max-width: 825px) {
    .container {
        width: 720px;
    }
    header {
        top: -20px;
    }
    .sections {
        height: 530px;
    }
    .animation__container-first,
    .animation__container-second{
        margin-top: 27px;
        justify-content: space-around;
    }
    .animation__element-one,
    .animation__element-two,
    .animation__element-three,
    .animation__element-four{
        height: 200px;
        width: 330px;
        box-shadow: 0px 0px 0px 2px rgba(35, 32, 32, 0.4);
    }
    .animation__element-one:hover,
    .animation__element-two:hover,
    .animation__element-three:hover,
    .animation__element-four:hover,
    .animation__element-one:active,
    .animation__element-two:active,
    .animation__element-three:active,
    .animation__element-four:active{
        transform: scale(1.05);
        box-shadow: 0px 0px 0px 4px rgba(35, 32, 32, 0.4);
    }
    .animation__container-theeth {
        gap: 10px;
    }
    .animation__video-one,
    .animation__video-two,
    .animation__video-three {
        height: 200px;
        width: 360px;
        box-shadow: 0px 0px 0px 3px rgba(35, 32, 32, 0.4);
    }
    .animation__video-one:hover,
    .animation__video-two:hover,
    .animation__video-three:hover,
    .animation__video-one:active,
    .animation__video-two:active,
    .animation__video-three:active{
        transform: scale(1.2);
        box-shadow: 0px 0px 0px 4px rgba(234, 231, 231, 0.8);
    }

    .first__section-grid{
        margin-top: 40px;
    }
    .first__element-one,
    .first__element-two {
        height: 250px;
        width: 260px;
        box-shadow: 0px 0px 0px 3px rgba(35, 32, 32, 0.4);
    }
    .first__element-two {
        top: 10rem;
        left: 10rem;
    }
    .first__element-three {
        height: 180px;
        width: 180px;
        box-shadow: 0px 0px 0px 3px rgba(74, 70, 70, 0.4);
    }
    .first__element-one:active,
    .first__element-one:hover {
        transform: scale(1.3);
        top: 2rem;
        left: 12rem;
    }
    .first__element-two:active,
    .first__element-two:hover {
        transform: scale(1.3);
        top: 2rem;
        left: 12rem;
        z-index: 1;
    }
    .first__element-one:hover + .first__element-three,
    .first__element-one:active + .first__element-three {
        transform: translateX(-196%) translateY(0%) scale(.32) rotate(180deg);
    }
    .first__element-two:hover + .first__element-three,
    .first__element-two:active + .first__element-three {
        transform: translateX(-124%) translateY(0%) scale(.27);
    }
    .first__element-three:active,
    .first__element-three:hover {
        box-shadow: 0px 0px 0px 4px rgba(108, 104, 104, .6);
    }

    .second__element-one,
    .second__element-two,
    .third__element-one,
    .third__element-two{
        height: 300px;
        width: 300px;
        box-shadow: 0px 0px 0px 3px rgba(74, 70, 70, 0.4);
    }
    .second__element-one:active,
    .second__element-one:hover {
        left: 5%;
        box-shadow: 0px 0px 0px 3px rgba(175, 165, 165, 0.4);
    }
    .second__element-two:active,
    .second__element-two:hover {
        right: 5%;
        box-shadow: 0px 0px 0px 3px rgba(175, 165, 165, 0.4);
    }



    .third__element-three{
        height: 200px;
        width: 150px;
    }
    .third__element-one,
    .third__element-two,
    .third__element-three {
        box-shadow: 0px 0px 0px 3px rgba(76, 72, 72, 0.6);

    }
    .third__element-two:active,
    .third__element-two:hover {
        box-shadow: 0px 0px 0px 3px rgba(108, 104, 104, .6);
    }
    .third__element-one:active + .third__element-three,
    .third__element-one:hover + .third__element-three{
        transform: scale(.225) translateX(-408%) translateY(-218%);
    }
    .third__element-three:active,
    .third__element-three:hover {
        box-shadow: 0px 0px 0px 4px rgba(108, 104, 104, .6);
        transform: scale(1.2);
    }
    /* .third__element-three:active,
    .third__element-three:hover {
        transform: scale(1.2);
    } */


 
    .fourth__element-one,
    .fourth__element-two {
        height: 240px;
        width: 220px;
        box-shadow: 0px 0px 0px 3px rgba(74, 70, 70, 0.4);
    }
    .fourth__element-two {
        top: 8rem;
        left: 10rem;
    }
    .fourth__block-subtitle{
        box-shadow: 0px 0px 0px 3px rgba(74, 70, 70, 0.4);
    }
    .fourth__element-three{
        height: 170px;
        width: 170px;
    }
    .fourth__element-four{
        height: 85px;
        width: 85px;
    }
    .fourth__element-five{
        height: 85px;
        width: 85px;
    }
    .fourth__element-one,
    .fourth__element-two,
    .fourth__block-subtitle {
        box-shadow: 0px 0px 0px 4px rgba(108, 104, 104, .8);
    }
    .fourth__element-one:active,
    .fourth__element-one:hover,
    .fourth__element-two:active,
    .fourth__element-two:hover,
    .fourth__element-three:hover,
    .fourth__element-three:active,
    .fourth__element-four:hover,
    .fourth__element-four:active,
    .fourth__element-five:hover,
    .fourth__element-five:active {
        box-shadow: 0px 0px 0px 3px rgba(108, 104, 104, .8);
    }
    .four__element-two-wrapper {
        height: 58px;
        width: 58px;
        top: 24%;
        left: 26%;
        border-radius: 1px;
    }


    .five__element-one {
        box-shadow: 0px 0px 0px 3px rgba(108, 104, 104, .8);
    }
    .five__element-one:hover + .five__block-subtitle,
    .five__element-one:active + .five__block-subtitle{
        transform: scale(.55) translateX(-570%) translateY(-50%);
        opacity: .6;
    }
    .five__element-two:hover,
    .five__element-two:active,
    .five__element-three:hover,
    .five__element-three:active{
        box-shadow: 0px 0px 0px 3px rgba(108, 104, 104, .8);
    }
    

    .seven__element-one,
    .seven__element-two {
        height: 380px;
        width: 320px;
        box-shadow: 0px 0px 0px 3px rgba(108, 104, 104, .8);
    }
    .seven__element-one:hover,
    .seven__element-one:active,
    .seven__element-two:hover,
    .seven__element-two:active {
        transform: scale(1.08);
    }
    .seven__element-three-title,
    .seven__element-three-subtitle{
        height: 230px;
        width: 210px;
        box-shadow: 0px 0px 0px 3px rgba(108, 104, 104, .8);
    }
    .seven__element-three-title:hover,
    .seven__element-three-title:active,
    .seven__element-three-subtitle:hover,
    .seven__element-three-subtitle:active{
        height: 300px;
        width: 285px;
        box-shadow: 0px 0px 0px 4px rgba(108, 104, 104, .6);
        top: 45%;
    }
    .seven__element-one:hover + .seven__element-three-title,
    .seven__element-one:active + .seven__element-three-title {
        left: 10.2%;
        top: 16%;
        transform: scale(.09);
    }
    .seven__element-two:hover + .seven__element-three-subtitle,
    .seven__element-two:active + .seven__element-three-subtitle {
        left: 422px;
        top: 18%;
        transform: scale(.1);
    }

    .six__container,
    .eight__container,
    .nine__container {
        margin-bottom: 20px;
    }


    .six__element-one,
    .six__element-two,
    .eight__element-one,
    .eight__element-two,
    .nine__element-one,
    .nine__element-two {
        height: 180px;
        width: 180px;
        box-shadow: 0px 0px 0px 3px rgba(85, 82, 82, 0.8);
    }
    
    .six__element-one:hover,
    .eight__element-one:hover,
    .nine__element-one:hover,
    .six__element-one:active,
    .eight__element-one:active,
    .nine__element-one:active {
        box-shadow: 0px 0px 0px 3px rgb(169, 165, 165);
        transform: scale(1.5) translateX(40%);
    }
    .six__element-two:hover,
    .six__element-two:active,
    .eight__element-two:hover,
    .nine__element-two:hover,
    .eight__element-two:active,
    .nine__element-two:active {
        box-shadow: 0px 0px 0px 3px rgb(169, 165, 165);
        transform: scale(1.05) translateX(-40%);
    }
    .eight__element-one:hover + .eight__element-two,
    .eight__element-one:active + .eight__element-two {
        transform: translateX(-82%) translateY(-5%) scale(.145);
    }
    .nine__element-one:hover + .nine__element-two,
    .nine__element-one:active + .nine__element-two {
        transform: translateX(-105%) translateY(-6%) scale(.24);
    }
}


















@media screen and (max-width: 740px) {
    .five__container {
        display: none;
    }
    .five__container-extra{
        position: relative;
        display: flex;
        justify-content: space-between;
    }
    .video__container{
        z-index: 6;
    }
    .container {
        width: 90%;
        padding-block: 0;
        /* background: #a03535; */
    }

    /* тут також ширина */
    .first__container-first,
    .first__container-second{
        /* width: 610px; */
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    header {
        top: 2px;
        z-index: 4;
        /* display: none; */
    }
    .header__title {
        justify-content: space-around;
    }
    .title {
        letter-spacing: 2px;
        font-size: 20px;
    }
    .central__line {
        height: 10000px;
        width: 5px;
        background: hsla(0, 0%, 100%, 0.266);
        display: none;
    }
    .sections {
        min-height: auto;
        height: auto;
        margin-top: 0;
    }

    /* це для зміни висоти відео та контейнерів під відео */
    .anim__container-img {
        padding: 30px 0 0 0;
        z-index: 20;
        height: 650px;
        padding-bottom: 30px;
        z-index: 10;
    }
    .animation__element-one,
    .animation__element-two,
    .animation__element-three,
    .animation__element-four{
        height: 180px;
        width: 300px;
        box-shadow: 0px 0px 0px 2px rgba(35, 32, 32, 0.6);
    }
    .anim__container-video {
        /* min-height: 940px; */
        display: flex;
        z-index: 20;
    }
    .animation__video-one,
    .animation__video-two,
    .animation__video-three {
        height: 260px;
        width: 100%;
        box-shadow: 0px 0px 0px 2px rgba(35, 32, 32, 0.6);
        margin-bottom: 20px;
        /* z-index: 20; */
    }
    .animation__video-one video,
    .animation__video-two video,
    .animation__video-three video {
        border-radius: 3px;
        z-index: 10;
    }

    /* вілступ між блоками */
    .first__container-first,
    .first__container-second,
    .second__section-grid,
    .third__section-grid,
    .fourth__block-title,
    .fourth__block-subtitle,
    .five__section-grid,
    .five__container-extra,
    .seven__section-grid,
    .seven__block-title,
    .six__container,
    .eight__container,
    .nine__container {
        margin-bottom: 30px;
    }

    /* розмір елементів */
    .first__element-one,
    .first__element-two,
    .first__element-three,
    .second__element-one,
    .second__element-two,
    .third__element-one,
    .third__element-two,
    .first__element-three,
    .third__element-three,
    .fourth__block-title,
    .fourth__block-subtitle,
    .five__element-one,
    .five__element-three,
    .five__block-subtitle,
    .seven__element-one,
    .seven__element-two,
    .seven__element-three-title,
    .seven__element-three-subtitle,
    .six__element-one,
    .six__element-two,
    .eight__element-one,
    .eight__element-two,
    .nine__element-one,
    .nine__element-two
    /* .seven__element-three-title:active,
    .seven__element-three-title:hover:,
    .seven__element-three-subtitle:active,
    .seven__element-three-subtitle:hover */
    {
        height: auto;
        position: relative;
        top: 0;
        left: 0;
        /* height: 260px;
        width: 260px; */
        box-shadow: 0px 0px 0px 3px rgba(35, 32, 32, 0.4);
        border-radius: 3px;
        width: 47%; /* Розмір елементів у відсотках (половина ширини контейнера) */
        position: relative;
        transition: 1s;
    }
    .fourth__element-two {
        height: auto;
        width: 100%;
    }






    .first__element-one:before,
    .first__element-two:before,
    .first__element-three:before,
    .second__element-one:before,
    .second__element-two:before,
    .third__element-one:before,
    .third__element-two:before,
    .first__element-three:before,
    .third__element-three:before,
    /* .fourth__block-title:before, */
    .four__element-two::before,
    .fourth__block-subtitle:before,
    .fourth__element-two:before,
    .five__element-one:before,
    .five__block-subtitle:before,
    .five__element-three:before,
    .seven__element-one:before,
    .seven__element-two:before,
    .seven__element-three-title:before,
    .seven__element-three-subtitle:before,
    .six__element-one:before,
    .six__element-two:before,
    .eight__element-one:before,
    .eight__element-two:before,
    .nine__element-one:before,
    .nine__element-two:before
    /* .seven__element-three-title:active:before,
    .seven__element-three-title:hover:before,
    .seven__element-three-subtitle:active,
    .seven__element-three-subtitle:hover */
     {
        position: relative;
        top: 0;
        left: 0;
        /* height: 260px;
        width: 260px; */
        /* box-shadow: 0px 0px 0px 3px rgba(35, 32, 32, 0.4); */
        border-radius: 3px;
        content: ""; /* Додаємо псевдоелементи, щоб встановити висоту */
        display: block;
        padding-top: 110%; 
    }
    
    /* перший рухаючий стoвбчик hover/active */
    .first__element-one:active,
    .first__element-one:hover,
    .first__element-two:active,
    .first__element-two:hover,
    .third__element-one:active,
    .third__element-one:hover,
    .five__element-one:hover,
    .five__element-one:active,
    /* .six__element-one:hover,
    .six__element-one:active, */
    .seven__element-one:hover,
    .seven__element-one:active,
    .seven__element-two:hover,
    .seven__element-two:active,
    .eight__element-one:hover,
    .eight__element-one:active,
    .nine__element-one:hover,
    .nine__element-one:active {
        transform: scale(1.1);
        top: 0rem;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0px 0px 0px 2px rgba(153, 147, 147, 0.6);
    }
    .four__element-one:hover,
    .four__element-one:active,
    .six__element-one:hover,
    .six__element-one:active {
        box-shadow: 0px 0px 0px 2px rgba(153, 147, 147, 0.6);
        transform: translateX(0) scale(1.1);
    }

    /* перший нерухаючий стoвбчик hover/active */
    .second__element-one:active,
    .second__element-one:hover {
        transform: scale(1.1);
        left: 0%;
        z-index: 1;
        box-shadow: 0px 0px 0px 2px rgba(153, 147, 147, 0.6);
    }
    /* другий рухаючий стoвбчик hover/active (четвертого нема бо то грід) */
    .first__element-three:active,
    .first__element-three:hover,
    .second__element-two:active,
    .second__element-two:hover,
    .third__element-three:active,
    .third__element-three:hover,
    .five__element-three:active,
    .five__element-three:hover,
    .six__element-two:hover,
    .eight__element-two:hover,
    .nine__element-two:hover,
    .six__element-two:active,
    .eight__element-two:active,
    .nine__element-two:active,
    .seven__element-three-title:hover,
    .seven__element-three-title:active,
    .seven__element-three-subtitle:hover,
    .seven__element-three-subtitle:active{
        box-shadow: 0px 0px 0px 2px rgba(153, 147, 147, 0.6);
        transform: scale(1.1);
        left: 0;
    }
    .seven__element-three-title:hover,
    .seven__element-three-title:active,
    .seven__element-three-subtitle:hover,
    .seven__element-three-subtitle:active{
        position: relative;
       height: auto;
       width: 47;
       /* transform: scale(1.1); */
    }

    
  /* перший + другий рухаючий елемент */
    .first__element-one:hover + .first__element-three,
    .first__element-one:active + .first__element-three {
        transform: translateX(-81.7%) translateY(0%) scale(.15) rotate(180deg);
    }
    .first__element-two:hover + .first__element-three,
    .first__element-two:active + .first__element-three {
        transform: translateX(-41%) translateY(0%) scale(.194);
    }

    .third__element-one:active + .third__element-three,
    .third__element-one:hover + .third__element-three{
        transform: translateX(-20%) translateY(0.5%) scale(.15) ;
    }

    .five__element-one:hover + .five__element-three,
    .five__element-one:active + .five__block-subtitle{
        transform: scale(.2) translateX(-111%) translateY(-60%);
        opacity: 1;
    }
    .seven__element-one:hover + .seven__element-three-title,
    .seven__element-one:active + .seven__element-three-title {
        opacity: .5;
        left: -44%;
        top: 8%;
        z-index: 4;
        transform: scale(.09);
    }
    .seven__element-two:hover + .seven__element-three-subtitle,
    .seven__element-two:active + .seven__element-three-subtitle {
        opacity: .5;
        left: -146px;
        top: 8%;
        transform: scale(.1);
    }
    .eight__element-one:hover + .eight__element-two,
    .eight__element-one:active + .eight__element-two {
        transform: translateX(-14%) translateY(-5%) scale(.1);
        opacity: .6;
    }
    .nine__element-one:hover + .nine__element-two,
    .nine__element-one:active + .nine__element-two {
        transform: translateX(-31%) translateY(-4%) scale(.18);
        opacity: .6;
    }

    /* ховер четвертого грід елементи */
    .fourth__element-four:hover,
    .fourth__element-four:active,
    .fourth__element-five:hover,
    .fourth__element-five:active,
    .fourth__element-three:hover,
    .fourth__element-three:active {
        box-shadow: 0px 0px 0px 2px rgba(153, 147, 147, 0.6);
    }
    /* ховер четвертого img елементи */
    .four__element-two-wrapper {
        height: 25%;
        width: 27%;
        top: 24%;
        left: 26%;
        border-radius: 1px;
    }




    .animation__section {
        display: block;
        z-index: 10;
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100vw;
    }
    .animation__container-first,
    .animation__container-second{
        margin-top: 20px;
        justify-content: space-around;
    }
    .animation__element-one:hover,
    .animation__element-two:hover,
    .animation__element-three:hover,
    .animation__element-four:hover,
    .animation__element-one:active,
    .animation__element-two:active,
    .animation__element-three:active,
    .animation__element-four:active{
        transform: scale(1.2);
        box-shadow: 0px 0px 0px 3px rgba(35, 32, 32, 0.4);
        z-index: 2;
    }
    .animation__container-theeth {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .animation__video-one:hover,
    .animation__video-two:hover,
    .animation__video-three:hover,
    .animation__video-one:active,
    .animation__video-two:active,
    .animation__video-three:active{
        transform: scale(1);
        box-shadow: 0px 0px 0px 3px rgba(113, 110, 110, 0.8);
    }

    .first__section-grid{
        margin-top: 40px;
        height: auto;
    }
    .first__element-three {
        position: relative;
        top: 0;
    }


    .second__section-grid {
        align-items: flex-start;
    }
    
    .third__block-flex{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .third__block-title {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
    }
    .third__element-two {
        display: none;
    }
    .third__element-three{
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0%, 0%);
    }

    .fourth__container {
        display: flex;
    }
    .fourth__element-one {
        display: none;
    }
    .fourth__element-two {
        top: 0;
        left: 0;
        right: 0;
        position: relative;
    }
    .fourth__element-three{
        height: 100%;
        width: 100%;
    }
    .fourth__element-four{
        height: 100%;
        width: 100%;
    }
    .fourth__element-five{
        height: 100%;
        width: 100%;
    }
    .fourth__element-two {
        border-radius: 3px;
        box-shadow: 0px 0px 0px 0px rgba(167, 117, 175, 0);
    }
    .five__element-two {
        display: none;
    }

    .seven__block-title,
    .seven__block-subtitle{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        top: 0;
    }
    .seven__container {
        display: block;
    }
    .seven__element-three-title,
    .seven__element-three-subtitle {
        /* top: 0; */
        transform: translateX(0%) translateY(0%);
    }


    .six__container,
    .eight__container,
    .nine__container {
        justify-content: space-between;
        align-items: flex-start;
    }
}