body {
    margin: 0;
    padding: 20px;
    height: 100vh;
    font-family: Arial, sans-serif;
    background-color: #f0f2f5;
    font-family: 'Poppins', sans-serif;


}

h1 h2 h3 {
    font-weight: 600;

}

p {
    color: #555;
}



/* Navbar */
.nav {
    display: flex;
    justify-content: space-between;
    background-color: #1f2937;
    color: white;
    padding: 15px 30px;
    border-bottom: 2px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
}

.menu {
    display: flex;
    border-left: 1px solid #ddd;
    /* Sol tarafa sınır ekleyerek bölme */
    padding-left: 20px;
    gap: 30px;
}

.menu a {
    color: white;
}

/*Hero*/
.hero {
    text-align: center;
    margin-top: 50px;
}

.trust {
    margin-top: 10px;
    color: #666;
    font-size: 14px;
}

.hero h1 {
    font-size: 28px;
    margin-bottom: 10px;
}

.hero a {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 20px;
    background: #25d366;
    color: white;
    text-decoration: none;
    border-radius: 8px;
}

/* Hizmet Kartları */
.services {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    justify-content: center;


}

/*sektör kartları*/
.clients {
    text-align: center;
    margin-top: 50px;
}

.client-lists {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    /* Kartların alt alta gelmesini engellemek için flex-wrap ekledik */

}

.client-box {
    background: white;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    /* Hafif gölge efekti */



}

.client-box:hover {
    transform: scale(1.25);
    /* Büyütme efekti */
    transition: 0.3s;
    /* Tepki süresi */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    /* Gölge efekti */
}

.card {
    text-align: center;
    background: white;
    padding: 10px;
    border: 1px solid #3d3131;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 200px;
    /* Kart genişliği */
    height: 200px;
    /* Kart yüksekliği */
    display: flex;
    /* Kart içeriğini esnek kutu yap */
    align-items: center;
    /* İçeriği dikey olarak ortala */
    flex-direction: column;
    /* İçeriği dikey olarak sıralama */
    justify-content: center;
    /* İçeriği yatay olarak ortala */

    /* Hafif gölge efekti */
}

.card:hover {
    transform: scale(1.05);
    /* Büyütme efekti */
    transition: 0.3s;
    /* Tepki süresi */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    /* Gölge efekti */
}

button {
    padding: 10px 20px;
    border-radius: 8px;
    transition: 0.3s;
    background-color: burlywood;
    border: none;



}

/* Üzerine gelindiğinde değişim */
button:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

a {
    display: inline-block;
    padding: 12px 20px;
    background-color: burlywood;
    border-radius: 8px;
    text-decoration: none;
    color: black;

}






.whatsapp {
    position: fixed;
    /*sabit konum*/
    bottom: 20px;
    /*alt boşluk*/
    right: 20px;
    /*sağ boşluk*/
    background-color: #25d366;
    /*WhatsApp yeşili*/
    color: white;
    /*yazı rengi*/
    padding: 12px 16px;
    /*iç boşluk*/
    border-radius: 50%;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    /*icon ve yazı arasındaki boşluk*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.whatsapp:hover {
    transform: scale(1.1);
    /*Büyütme efekti*/
    transition: 0.3s;
    /*Tepki süresi*/
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    /*Gölge efekti*/
    background-color: #1ebea5;
}

/*Smooth Scroll*/
html {
    scroll-behavior: smooth;
}

.about {
    text-align: center;
    /* yazıyı ortala */
    margin-top: 50px;
    /* üst boşluk */
    padding: 40px 20px;
    /* iç boşluk */
}

.about p {
    max-width: 600px;
    /*çok uzamasın diye genişlik sınırı*/
    margin: 20px auto;
    /*ortala hizalama*/
    line-height: 1.6;
    /*satır arası boşluk*/
    color: #555;
    /*metin rengi*/
}

.about h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.contact {
    text-align: center;
    margin-top: 60px;
    padding: 40px;
    background-color: #f5f5f5;

}

.contact-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 20px;
    background: #25d366;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: 0.3s;

}

.contact-btn:hover {
    transform: scale(1.05);
}



/*mobile uyumluluk*/

@media (max-width:768px) {

    /*hizmet kartları alt alta gelsin*/
    .services {
        flex-direction: column;
        /*kartlar alt alta*/
        align-items: center;
    }

    /*Kart Genişliği*/
    .card {
        width: auto;
    }

    /*sektörler*/
    .client-lists {
        flex-direction: column;
        /*sektörler alt alta*/
        align-items: center;
    }

    /*navbar alt alta/*/
    .nav {
        flex-direction: column;
        /*navbar alt alta*/
        gap: 10px;
    }

    .menu {
        flex-direction: column;
        /*menü alt alta*/
        align-items: center;
    }


}