html, body {
    height: 100%;
    margin: 0;
}

body {
    background-color: rgb(35, 35, 35);
    background-image: url(files/anasayfa.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

.containers {
    width: 100%;
    height: 60px;
    opacity: 100%;
    box-shadow: 2px 2px 15px 2px black;
    background-color: rgba(56, 56, 56, 0.701);
}

.containers a {
    padding: 15px;
    float: left;
    font-size: 17px;
    font-family: "Open Sans", system-ui;
    text-decoration: none;
    color: white;
    opacity: 100%;
    transition-duration: 0.4s;
}

.containers nav {
    display: inline-block;
    margin-right: 200px;
}

.containers a:hover {
    color: rgb(0, 187, 255);
    transform: scale(1.1);
}

.containers nav2 a:hover {
    color: yellow;
    transform:translateX(10px);
}

.packages {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    flex-wrap: wrap; 
}

.package-box {
    background-color: rgba(56, 56, 56, 0.9);
    width: 300px;
    margin: 20px;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    color: white;
    transition: box-shadow 0.5s ease, transform 0.5s ease;
    box-shadow: 2px 2px 15px 2px black;
}

.package-box h2 {
    font-family: "Open Sans", system-ui;
    font-size: 24px;
    margin-bottom: 20px;
}

.package-box ul {
    list-style-type: none;
    padding: 0;
}

.package-box ul li {
    font-family: "Open Sans", system-ui;
    font-size: 18px;
    margin: 10px 0;
}

.package-box:hover {
    box-shadow: 0px 0px 15px yellow;
    transform: scale(1.1);
    transition-duration: 0.9s;
    
}

.play-button {
    display: block;
    width: 200px;
    margin: 50px auto;
    padding: 15px;
    text-align: center;
    color: white;
    font-size: 20px;
    font-family: "Open Sans", system-ui;
    text-decoration: none;
    border: 2px solid white;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.play-button:hover {
    background-color: rgba(0, 187, 255, 0.7);
    color: black;
    border-color: rgba(0, 187, 255, 1);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .packages {
        flex-direction: column;
        align-items: center;
    }

    .package-box {
        width: 90%;
    }

    .play-button {
        width: 80%;
    }
}

.memories {
    margin: 50px auto;
    padding: 20px;
    max-width: 1200px;
    text-align: center;
    background-color: rgba(56, 56, 56, 0.8);
    border-radius: 10px;
    box-shadow: 2px 2px 15px 2px black;
}

.memories h2 {
    font-family: "Open Sans", system-ui;
    font-size: 28px;
    color: white;
    margin-bottom: 20px;
}

.photos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.photos img {
    width: 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    filter: blur(3px); 
    transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
    opacity: 0.8;
    box-shadow: 0px 0px 15px 0px black;
}

.photos img:hover {
    transform: scale(1.05);
    opacity: 1;
    filter: blur(0px);
    box-shadow: 0px 0px 15px 0px yellow;
    transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease; 
}


.memories p {
    font-family: "Open Sans", system-ui;
    font-size: 18px;
    color: white;
    max-width: 800px;
    margin: 0 auto;
}

.welcome-section {
    text-align: center;
    margin: 50px auto;
    padding: 20px;
    max-width: 900px;
    background-color: rgba(56, 56, 56, 0.8);
    border-radius: 10px;
    box-shadow: 2px 2px 15px 2px black;
}

.welcome-section h1 {
    font-family: "Open Sans", system-ui;
    font-size: 32px;
    color: white;
    margin-bottom: 20px;
}

.welcome-section img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}


footer {
    width: 100%;
    background-color: black;
    opacity: 0.5;
    padding: 10px;
    box-sizing: border-box;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.footer-section {
    width: 48%; 
    color: white;
    font-family: "Open Sans", system-ui;
    margin-left: 170px;
}

.footer-section p {
    margin: 0 0 10px 0; 
}

.footer-section a {
    display: block;
    font-size: 14px;
    color: white;
    text-decoration: none;
    margin: 2px 0;
}

.footer-section a:hover {
    color: rgba(255, 255, 255, 0.8);
}


.faq-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    justify-content: center; 
}

.faq-box {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    width: 300px;
    transition: box-shadow 0.3s ease;
    font-family: "Open Sans", system-ui;
    text-align: center;
}

.faq-box:hover {
    box-shadow: 0px 0px 15px 0px yellow;
}


.faq-box h3 {
    margin-top: 0;
    font-size: 1.2em;
    color: #333;
}

.faq-box p {
    margin-bottom: 0;
    color: #666;
}



h1 {
    font-family: "Open Sans", system-ui;
    color: white;

}


.social-media-section {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-family: "Open Sans", system-ui;
    padding: 20px;
    margin-top: 20px;
}

.social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    transition: transform 0.3s, filter 0.3s;
    text-decoration: none;
    overflow: hidden;
    background-color: transparent; 
    border: none; 
}

.social-button img {
    width: 60%;
    height: auto;
}

.social-button:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}


.youtube {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M29.41 9.26a3.5 3.5 0 0 0-2.47-2.47C24.76 6.2 16 6.2 16 6.2s-8.76 0-10.94.59a3.5 3.5 0 0 0-2.47 2.47A36 36 0 0 0 2 16a36 36 0 0 0 .59 6.74a3.5 3.5 0 0 0 2.47 2.47c2.18.59 10.94.59 10.94.59s8.76 0 10.94-.59a3.5 3.5 0 0 0 2.47-2.47A36 36 0 0 0 30 16a36 36 0 0 0-.59-6.74M13.2 20.2v-8.4l7.27 4.2Z'/%3E%3C/svg%3E");
}

.instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='22.406' cy='9.594' r='1.44' fill='%23ffffff'/%3E%3Cpath fill='%23ffffff' d='M16 9.838A6.162 6.162 0 1 0 22.162 16A6.16 6.16 0 0 0 16 9.838M16 20a4 4 0 1 1 4-4a4 4 0 0 1-4 4'/%3E%3Cpath fill='%23ffffff' d='M16 6.162c3.204 0 3.584.012 4.849.07a6.6 6.6 0 0 1 2.228.413a3.98 3.98 0 0 1 2.278 2.278a6.6 6.6 0 0 1 .413 2.228c.058 1.265.07 1.645.07 4.85s-.012 3.583-.07 4.848a6.6 6.6 0 0 1-.413 2.228a3.98 3.98 0 0 1-2.278 2.278a6.6 6.6 0 0 1-2.228.413c-1.265.058-1.645.07-4.849.07s-3.584-.012-4.849-.07a6.6 6.6 0 0 1-2.228-.413a3.98 3.98 0 0 1-2.278-2.278a6.6 6.6 0 0 1-.413-2.228c-.058-1.265-.07-1.645-.07-4.849s.012-3.584.07-4.849a6.6 6.6 0 0 1 .413-2.228a3.98 3.98 0 0 1 2.278-2.278a6.6 6.6 0 0 1 2.228-.413c1.265-.058 1.645-.07 4.849-.07M16 4c-3.259 0-3.668.014-4.948.072a8.8 8.8 0 0 0-2.912.558a6.14 6.14 0 0 0-3.51 3.51a8.8 8.8 0 0 0-.558 2.913C4.014 12.333 4 12.74 4 16s.014 3.668.072 4.948a8.8 8.8 0 0 0 .558 2.912a6.14 6.14 0 0 0 3.51 3.51a8.8 8.8 0 0 0 2.913.558c1.28.058 1.688.072 4.947.072s3.668-.014 4.948-.072a8.8 8.8 0 0 0 2.913-.558a6.14 6.14 0 0 0 3.51-3.51a8.8 8.8 0 0 0 .557-2.913C27.986 19.667 28 19.26 28 16s-.014-3.668-.072-4.948a8.8 8.8 0 0 0-.558-2.912a6.14 6.14 0 0 0-3.51-3.51a8.8 8.8 0 0 0-2.913-.557C19.667 4.013 19.26 4 16 4'/%3E%3C/svg%3E");
}

.discord {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.1.1 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.1 16.1 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.02.02.05.03.07.02c1.71-.53 3.44-1.33 5.24-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.44-3.1-11.96c-.02-.01-.02-.02-.03-.02M9.46 15.76c-1.05 0-1.91-.96-1.91-2.14c0-1.18.84-2.14 1.91-2.14c1.07 0 1.93.96 1.91 2.14c0 1.19-.84 2.14-1.91 2.14m5.09 0c-1.05 0-1.91-.96-1.91-2.14c0-1.18.84-2.14 1.91-2.14c1.07 0 1.93.96 1.91 2.14c0 1.19-.84 2.14-1.91 2.14'/%3E%3C/svg%3E");
}


.social-button:hover .youtube {
    background-color: #FF0000;
}

.social-button:hover .instagram {
    background-color: #E1306C;
}

.social-button:hover .discord {
    background-color: #7289DA;
}