.background {
    position: absolute;
    z-index: 1;
    height: auto;
    width: 120%;
    left: 0px;
}

.turkey {
    position: absolute;
    z-index: 2;
    padding: 0px;
    top: 0px;
    animation-name: map_animation;
    animation-duration: 10s;
    display: none;
    height: auto;
    width: 100%;

}

.container {
    align-items: center;
    width: 100%;
}

.hiden_area {
    width: 100%;
    height: 760px;
    position: relative;
    overflow: hidden;
}

.text_hizmet {
    text-align: center;
    position: absolute;
    z-index: 3;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 80px;
    color: white;
    background-color: rgba(0, 0, 0, 0.386);
    padding: 20px;
    height: auto;
    display: none;
    width: 100%;
    top: 620px;
    width: 100%;
}


.logo {
    position: absolute;
    z-index: 4;
    padding: 0px;
    width: 1000px;
    animation-name: logo_hareket;
    animation-duration: 10s;
    left: 170px;
    top: 85px;
    display: block;
}

/*Animation Design*/


@keyframes map_animation {
    0% {
        transform: scale(5, 5);
    }

    20% {
        transform: scale(1, 1);

    }

    70% {
        transform: scale(1.001, 1.001);

    }

    80% {
        top: 0px;
        opacity: 100%;
    }

    100% {
        top: 100px;
        opacity: 0%;
    }
}

@keyframes logo_hareket {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}


/* Responsive Design */
@media screen and (max-width: 811px) {
    .turkey{
        top: 100px;
        left: -15px;

    }
    .logo{
        width: auto;
        height: 300px;
        left: 100px;
        top: 40px;
    }


    .text_hizmet{
        top: 335px;
        font-size: 20px;
        width: 1000px;
        left: -150px;

    }
    .hiden_area{
        height: 400px;
    }


    @keyframes map_animation {
        0% {
            transform: scale(5, 5);
            top: 40px;
        }
    
        20% {
            transform: scale(1, 1);
    
        }
    
        70% {
            transform: scale(1.001, 1.001);
    
        }
    
        80% {
            top: 40px;
            opacity: 100%;
        }
    
        100% {
            top: 140px;
            opacity: 0%;
        }
    }
  }


@media screen and (max-width: 768px) {
    .turkey{
        top: 100px;
        left: -10px;

    }
    .logo{
        width: auto;
        height: 200px;
        left: 20px;
        top: 40px;
    }


    .text_hizmet{
        top: 250px;
        font-size: 20px;

    }
    .hiden_area{
        height: 290px;
    }


    @keyframes map_animation {
        0% {
            transform: scale(5, 5);
            top: 40px;
        }
    
        20% {
            transform: scale(1, 1);
    
        }
    
        70% {
            transform: scale(1.001, 1.001);
    
        }
    
        80% {
            top: 40px;
            opacity: 100%;
        }
    
        100% {
            top: 140px;
            opacity: 0%;
        }
    }
  }

  @media screen and (max-width: 376px) {
    .turkey{
        top: 100px;
        left: -10px;

    }
    .logo{
        width: auto;
        height: 180px;
        left: 20px;
        top: 40px;
    }


    .text_hizmet{
        top: 210px;
        font-size: 20px;
        left: -320px;

    }


    @keyframes map_animation {
        0% {
            transform: scale(5, 5);
            top: 40px;
        }
    
        20% {
            transform: scale(1, 1);
    
        }
    
        70% {
            transform: scale(1.001, 1.001);
    
        }
    
        80% {
            top: 40px;
            opacity: 100%;
        }
    
        100% {
            top: 140px;
            opacity: 0%;
        }
    }
  }
  @media screen and (max-width: 415px) {
    .turkey{
        top: 100px;
        left: -10px;

    }
    .logo{
        width: auto;
        height: 180px;
        left: 20px;
        top: 40px;
    }


    .text_hizmet{
        top: 230px;
        font-size: 20px;
        left: -310px;

    }


    @keyframes map_animation {
        0% {
            transform: scale(5, 5);
            top: 40px;
        }
    
        20% {
            transform: scale(1, 1);
    
        }
    
        70% {
            transform: scale(1.001, 1.001);
    
        }
    
        80% {
            top: 40px;
            opacity: 100%;
        }
    
        100% {
            top: 140px;
            opacity: 0%;
        }
    }
  }