*{margin:0;padding:0;border:0}
html{width:100%;height:100%;}
body {
    font-size:          1em;
    background-color:   var(--color-blue);
    background-repeat:  no-repeat, repeat, no-repeat;
    background-position: top center,center 25em,top center;
    background-size:    100% auto, 100% auto, cover;
    background-image:   url(../images/homepage-header.jpg),
                        url(../images/background.png),
                        linear-gradient(125deg,#06d2ff 0%, #007dff 100%);

    --color-orange:     #FFA800;
    --color-blue:       #0097FF;
    --color-darkblue:   #000F98;
    --color-purple:     #B303DA;
    --color-yellow:     #FCFF00;
    --color-darkyellow:     #EBD400;
}

img {
    max-width: 100%;
}
a { color: inherit }


h3 {
    font-family:    'atma';
    font-size:      1.4em;
    color:          var(--color-blue);
    text-transform: uppercase;
}
h4 {
    padding-bottom: .5em;
    font-family:    'atma';
    color:          var(--color-blue);
    font-size:      2.1em;
    line-height:    1.2em;
}
h5 {
    padding-bottom: .5em;
    font-size:      1.5em;
    color:          #fff;
}




#header {
    display:            flex;
    flex-direction:     column;
    justify-content:    center;
    align-items:        center;
    padding:            10vw 0 8vw 0;
    width:              100%;
    color:              #fff;
}
#header #logo{
    display:        inline-block;
    width:          10em;
    aspect-ratio:   1;
    animation:      logoIn 350ms ease-out
}
#header #title{
    display:        block;
    text-align:     center;
    overflow:       hidden;
    transform:      translateY(-2em);
}
#header #title h1 {
    font-family:    'atma',helvetica,arial,sans-serif;
    font-size:      2.7em;
    transform:      translateY(0%);
    animation:      titleIn 500ms ease-out
}
#header #title h2 {
    padding:        0 1em;
    font-weight:    normal;
    font-size:      1.6em;
    animation:      subtitleIn 650ms ease-out
}






#main {
    position:       relative;
    margin:         0 auto;
    width:          100%;
    width:          calc(100% - 2em);
    max-width:      55em;
    color:          #000;
    background:     #fff;
}
#main::before {
    content:        '';
    position:       absolute;
    z-index:        -1;
    display:        block;
    margin:         .75em 0 0 .75em;
    width:          100%;
    height:         100%;
    background:     var(--color-darkblue);
}



#main .keypoint {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     left;
    padding:        2em 1.5em;
}
#main .keypoint div {
    font-size:      1em;
}
#main .keypoint figure {
    position:       relative;
    margin-top:     1em;
}
#main .keypoint img {
    transition:     transform 150ms ease-in-out;
    transform:      scale(.9) rotate(1deg);
}
#main .keypoint figure:hover img {
    transform:      scale(.93) rotate(-2deg);
}
#main .keypoint figure::before {
    content:        '';
    position:       absolute;
    top:            0;
    left:           0;
    display:        block;
    width:          100%;
    height:         100%;
    border:         .2em solid var(--color-blue);
    transform:      scale(.9) rotate(4deg);
    transition:     transform 150ms ease-in-out;
}
#main .keypoint figure:hover::before {
    transform:      scale(.88) rotate(1deg);
}

#main #main__block2 figure {
    transform:      rotate(-2deg);
}
#main #main__block2 figure::before {
    border-color:   var(--color-purple);
}
#main #main__block3 figure::before {
    transform:      scale(.9) rotate(4deg);
    border-color:   var(--color-darkyellow);
}
#main #main__block3 figure:hover::before {
    transform:      scale(.88) rotate(1deg);
}






#main .points {
    display:        flex;
    flex-wrap:      wrap;
    justify-content:space-between;
    margin:         1.5em 0;
    padding:        1em;
    background:     var(--color-orange);
}
#main .points div {
    padding:        2em 1em;
    width:          100%;
}
#main .points h5 {
    font-size: 1.2em;
    text-transform: uppercase;
}





#main .gallery {
    padding:        2em 0;
}

#main .gallery div {
    display:        flex;
    flex-wrap:      wrap;
    flex-direction: row;
    justify-content:space-between;
    padding:        1em;
    gap:            1em;
    width:          100%;
}
#main .gallery div img {
    width:          30%;
    aspect-ratio:   9/19;
    box-shadow:     0 .1em .4em rgba(0,0,0,.2);
}






#main .crm {
    padding:        2em .5em;
}





#main .contact {
    margin-top:     2em;
    padding:        4em 0;
    background:     var(--color-orange);
    clip-path:      polygon(0% 0%, 100% 8%, 100% 100%, 0% 100%);
}
#main .contact h4 {
    padding-bottom: 1em;
    color:          #fff;
}
#main .contact a {
    position:       relative;
    display:        inline-block;
    width:          auto;
    color:          #000;
    text-decoration: none;
    transform:      scale(1);
    transition:     transform 150ms ease-in-out;
}
#main .contact a span {
    position:       relative;
    z-index:        1;
    display:        block;
    padding:        .75em 1.5em;
    font-size:      1.2em;
    background:     var(--color-yellow);
}
#main .contact a::before {
    content:        '';
    position:       absolute;
    z-index:        0;
    display:        block;
    width:          100%;
    height:         100%;
    background:     #000;
    transform:      translate3d(.6em, .6em, 0);
    transition:     transform 150ms ease-in-out;
}
#main .contact a:hover {
    transform:      scale(1.05) rotateZ(-1deg);
}
#main .contact a:hover::before {
    transform:      translate3d(.8em, .8em, 0);
}






#footer {
    font-size:      .9em;
    padding:        4em 1em 2em 1em;
}
#footer h6 {
    padding-bottom: .3em;
    font-size:      1.3em;
}
#footer p {
    line-height:    1.25em;
}





@media (max-width:600px){
    body{
        font-size:      3.2vw;
        background-size:    auto 35em, cover;
    }
    p {
        font-size:      1.3em;
    }
    #header {
        padding:        20vw 0 26vw 0;
    }
}
@media (min-width:600px){
    body{
        font-size:      1.8vw;
        background-size:    auto 35em, 100% auto, cover;
    }
    p {
        font-size:      1.3em;
    }
    #main {
        width:          calc(100% - 3em);
    }
    #main .keypoint {
        flex-direction: row;
    }
    #main #main__block2 {
        flex-direction: row-reverse;
    }
    #main div {
        padding:        1em;
        width:          65%;
    }
    #main figure {
        width:          35%;
    }
    #main .points {
        padding:        2em .5em;
        gap:            1em;
    }
    #main .points div {
        width:          calc(50% - 1em);
    }
    #main .points h5 {
        font-size:      1.6em;
    }
    #main .gallery div {
        gap:            1.5em;
    }
    #main .gallery div img {
        width:          22%;
    }


}
@media (min-width:850px){
    body{
        font-size:          1em;
        background-size:    auto 30em, center 30em, cover;
    }
    p {
        font-size:      1em;
    }
    h4 {
        font-size:      1.8em;
    }
    #main .keypoint {
        flex-direction: row;
    }
    #main #main__block2 {
        flex-direction: row-reverse;
    }
    #main div {
        padding:        1em;
        width:          60%;
    }
    #main figure {
        width:          40%;
    }

    #main .points {
        padding: 2.5em 1em;
        gap: 1em;
    }
    #main .points div {
        width: calc(24% - .5em);
        padding: 0;
    }
    #main .points h5 {
        font-size:      1.1em;
    }
    #main .gallery {
        padding:        2em;
    }
    #main .gallery div {
        gap:            1em;
    }
    #main .gallery div img {
        width:          14%;
    }
}
@media (min-width:1100px){
    #header {
        padding:        7em 0 5em 0;
    }
    #main {
        font-size:      1em;
        width:          60em;
    }
    #footer {
        font-size:      .8em;
    }
}



@keyframes logoIn {
    0% { transform: scale(0) }
    80% { transform: scale(1.25) }
    100% { transform: scale(1) }
}
@keyframes titleIn {
    0% { transform: translateY(-120%); }
    65% { transform: translateY(-120%); }
    85% { transform: translateY(30%); }
    95% { transform: translateY(-10%); }
    100% { transform: translateY(0%); }
}
@keyframes subtitleIn {
    0% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 1; }
}