* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.3s ease 0.0s;
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}

a.btn {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    padding: 8px 22px;
    border: 2px solid #e62d34;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    transition-duration: .5s;
    text-align: center;
}

body {
    font-family: "Poppins", sans-serif;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 50px;
}

header a.logo {
    font-size: 20px;
    color: white;
}

header nav {
    display: flex;
    gap: 20px;
}

header nav a img {
    width: 30px;
    height: auto;
    filter: invert(1);
}

main {

}

main section {
    width: 100%;
    display: flex;
}

main section.well {
    height: 600px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    gap: 25px;
    padding: 50px;
    background-position: center;
    background-size: cover;
}

main section.well::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .7);
    z-index: 1;
}

main section.well > * {
    position: relative;
    z-index: 9;
}

main section.well h3 {
    font-size: 20px;
    font-weight: 200;
    color: #ffffff;
}

main section.well h1 {
    font-size: 67px;
    font-weight: 300;
    color: #ffffff;
    text-transform: uppercase;
    height: 100px;
    width: 100%;
    text-align: center;
}

main section.well h1 span {
    -webkit-animation: in-out 9s linear both infinite;
    -moz-animation: in-out 9s linear both infinite;
    animation: in-out 9s linear both infinite;
    position: absolute;
    width: 100%;
    left: 0;
    top: -100%;
    text-align: center;
}

main section.well h1 span:nth-child(1) {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
}

main section.well h1 span:nth-child(2) {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    animation-delay: 3s;
}

main section.well h1 span:nth-child(3) {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    animation-delay: 6s;
}

main section.well h1 span:nth-child(4) {
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    animation-delay: 9s;
}

main section.well h1 span:nth-child(5) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    animation-delay: 12s;
}

main section.well h1 span:nth-child(6) {
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    animation-delay: 15s;
}

main section.well h1 span:nth-child(7) {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    animation-delay: 18s;
}

main section.well h1 span:nth-child(8) {
    -webkit-animation-delay: 21s;
    -moz-animation-delay: 21s;
    animation-delay: 21s;
}

main section.well a.btn:hover {
    background-color: rgba(230, 45, 52, 0.7);
    transition-duration: .5s;
}

main section.studyo a.btn:hover {
    background-color: #4f4f5a;
}

main section.talk a.btn:hover {
    background-color:#036635;
    color: #F5F5F5;
}

main section.plc a.btn:hover {
    background-color:#363FA3;
    color: #F5F5F5;
}

main section.tasarim a.btn:hover {
    background-color:#FBB000;
    color: #F5F5F5;
}

main section.coffee a.btn:hover {
    background-color:#B7A793;
    color: #F5F5F5;
}

main section.about {
    flex-direction: row;
}

main section.about div {
    width: 70%;
    
    background-color: #e62d34;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 25px;
}

main section.about div h2 {
    width: 100%;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    text-align: start;
}

main section.about div p {
    width: 100%;
    font-size: 20px;
    font-weight: 300;
    color: #F5F5F5;
    text-align: start;
}

main section.about div a.btn {
    border-color: #fff;
}

main section.about div a.btn:hover {
    background-color: #fff;
    color: #e62d34;
    transition-duration: .5s;
}

main section.about picture {
    width: 30%;
    
    display: block;
}

main section.about picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

main section.features {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 90vh;
    gap: 150px;
    background-position: center;
    background-size: cover;
}

main section.features::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(89, 89, 102, .7);
    z-index: 1;
}

main section.features > * {
    position: relative;
    z-index: 9;
}

main section.features > section {
    flex-direction: row;
    justify-content: space-between;
}

main section.features > h2 {
    font-size: 23px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
}

main section.features section > div {
    width: 40%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
    align-self: center;
}

main section.features section > div div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    cursor: pointer;
}

main section.features section > div div h4 {
    color: white;
}

main section.features section > div div span {
    background-color: #fff;
    display: block;
    border-radius: 50%;
    padding: 25px;
    border: 5px solid white;
}

main section.features section > div div span img {
    display: block;
    width: 50px;
    height: 50px;
}

main section.features section > div div.active span {
    background-color: white;
}

main section.studyo section > div div.active span {
    border-color: #4f4f5a;
}

main section.tasarim section > div div.active span {
    border-color: #FBB000;
}

main section.plc section > div div.active span {
    border-color: #363FA3;
}

main section.talk section > div div.active span {
    border-color: #036635;
}

main section.features section > div div.active span img {
}

main section.features div.area {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    display: none;
    flex-direction: column;
    gap: 20px;
    background-color: rgba(255, 0, 9, 0.68);
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    transition-duration: .5s;
    transform-origin: center;
    transition: all 0.3s cubic-bezier(1, .02, 0, .99) 0.0s;
}

main section.features div.area.active {
    display: flex;
    transform: translate(-50%, -50%) scale(1);
    transition-duration: .5s;
    transition: all 0.3s cubic-bezier(1, .02, 0, .99) 0.0s;
}

main section.features div.area h3 {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
}

main section.features div.area p {
    font-size: 18px;
    font-weight: 300;
    color: #ffcacc;
    text-align: center;
    width: 80%;
}

main section.works {
    flex-direction: column;
    gap: 50px;
    padding: 50px 50px 100px 50px;
    align-content: center;
    align-items: center;
}

main section.works h2 {
    font-size: 23px;
    font-weight: 600;
    color: #e62d34;
}

main section.works div.works {

}

main section.works div.works div {
    position: relative;
}

main section.works div.works div img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

main section.works div.works div span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, .4);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: bold;
    opacity: 0;
    transition-duration: .5s;
    cursor: pointer;
}

main section.works div.works div span:hover {
    opacity: 1;
    transition-duration: .5s;
}

main section.info {
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 50px;
    padding: 50px;
    background-size: cover;
    background-position: center;
}

main section.info::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(230, 45, 52, .9);
    z-index: 1;
}

main section.info.studyo::before {
    background-color: rgba(79, 79, 90, .9);
}

main section.info.tasarim::before {
    background-color: rgba(251, 176, 0, .9);
}

main section.info.plc::before {
    background-color: rgb(54,63,163, .9);
}

main section.info.talk::before {
    background-color: rgb(3,102,53, .9);
}

main section.info.coffee::before {
    background-color: rgba(183, 167, 147, .9);
}

main section.info > * {
    position: relative;
    z-index: 9;
}

main section.info > p {
    color: #fff;
    font-size: 20px;
    font-weight: 200;
    width: 40%;
    text-align: center;
}

main section.info div {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 150px;
}

main section.info div span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

main section.info div p {
    color: #fff;
    font-weight: bold;
}

main section.info div span p:first-of-type {
    margin-top: 35px;
    margin-bottom: 10px;
}

main section.info div span svg {
    width: 80px;
}

main section.info div span svg path, main section.info div span svg polyline {
    fill: none;
    stroke: #ffffff;
    stroke-width: 6px;
    stroke-dasharray: 500px 500px;
    stroke-dashoffset: 530px;
    transition: all 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
    -webkit-animation: grow 7s ease infinite;
    -moz-animation: grow 7s ease infinite;
    animation: grow 7s ease infinite;
}

main section.filler {
    background-color: #4f4f5a;
    padding: 25px 50px;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

main section.filler p, main section.filler a.btn {
    color: #fff;
}

main section.filler a.btn {
    background-color: #e62d34;
    border-color: #fff;
    transition-duration: .5s;
}

main section.filler a.btn:hover {
    background-color: #fff;
    color: #e62d34;
    transition-duration: .5s;
}

main section.banners {
    padding: 25px 50px;
    background-color: #f9f8f8;
}

main section.banners div a img {
    width: 100%;
    height: 150px;
}

footer {
    padding: 50px;
    background-color: #4f4f5a;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 50px;
}

footer h2 {
    font-size: 23px;
    font-weight: 600;
    color: #cccccc;
}

footer section {
    display: flex;
    flex-direction: row;
    gap: 100px;
}

footer section form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
}

footer section form input, footer section form textarea {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    outline: none;
    color: #ffffff;
}

footer section form input:focus, footer section form textarea:focus {
    border-color: #fff;
}

footer section form textarea {
    resize: none;
}

footer section form button {
    width: fit-content;
    border: 1px solid #fff;
    border-radius: 25px;
    padding: 10px 30px;
    background-color: transparent;
    color: #fff;
    cursor: pointer;
    margin-top: 25px;
    transition-duration: .5s;
}

footer section form button:hover {
    background-color: #fff;
    color: #111;
    transition-duration: .5s;
}

footer section div {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

footer section div p, footer section div a {
    color: #fff;
}

@media only screen and (max-width: 750px) {
    main section.about {
        flex-direction: column;
    }

    main section.about div {
        width: 100%;
    }

    main section.about picture {
        width: 100%;
    }

    main section.features {
        justify-content: unset;
        gap: 50px;
        padding: 50px 0;
    }

    main section.features div.area {
        transform: translate(-50%, 10%) scale(0.5);
    }

    main section.features div.area.active {
        transform: translate(-50%, 10%) scale(1);
    }
}

@media only screen and (max-width: 600px) {
    header {
        padding: 25px 5%;
    }

    main section.well h1 span {
        font-size: 35px;
    }

    main section.about div {
        height: auto;
        max-height: unset;
        padding: 50px 5%;
    }

    main section.info > p {
        width: 100%;
    }

    main section.info {
        padding: 50px 5%;
    }

    main section.info div {
        flex-direction: column;
        gap: 50px;
        align-items: center;
    }
    
    main section.filler {
        flex-direction: column;
        padding: 25px 5%;
    }

    main section.filler p, main section.filler a.btn {
        text-align: center;
    }

    main section.works {
        padding: 50px 5%;
    }

    main section.features {
        gap: 50px;
        padding: 50px 5%;
        height: auto;
    }

    main section.features > section {
        gap: 30px;
        flex-direction: column;
        align-items: center;
        align-content: center;
        align-self: center;
        display: flex;
        flex-wrap: wrap;
    }

    main section.features section > div {
        width: 100%;
        justify-content: space-between;
    }

    main section.features div.area, main section.features div.area.active {
        position: relative;
        left: unset;
        top: unset;
        transform: unset;
        width: 300px;
        height: 300px;
    }

    footer {
        padding: 50px 5%;
    }

    footer section {
        flex-direction: column;
    }

    footer section div p, footer section div a {
        text-align: center;
        display: block;
    }
}

@keyframes grow {
    0% {
        stroke-dashoffset: 530px;
    }
    15% {
        stroke-dashoffset: 1000px;
    }
    16% {
        stroke-dashoffset: 1000px;
    }
    84% {
        stroke-dashoffset: 1000px;
    }
    85% {
        stroke-dashoffset: 1000px;
    }
    100% {
        stroke-dashoffset: 530px;
    }
}

@keyframes in-out {
    0% {
        filter: blur(12px) opacity(0%);
    }
    3% {
        filter: blur(0px) opacity(100%);
    }
    4% {
        filter: blur(0px) opacity(100%);
    }
    20% {
        filter: blur(0px) opacity(100%);
    }
    21% {
        filter: blur(0.01) opacity(100%);
    }
    22% {
        filter: blur(12px) opacity(0%);
    }
    100% {
        filter: blur(12px) opacity(0%);
    }
}