/* Genel Stiller */
body {
    font-family: "Roboto", sans-serif;
    margin: 0;
    padding: 0;
    color: black;
    overflow: scroll;
    overflow-x: hidden;
}

html {
    height: 100%;
    margin-bottom: 0.01em;
}

h1, h2, h3, span {
    font-family: "Roboto", sans-serif;
    color: black;
}

.normalText {
    font-family: "Roboto", sans-serif;
    color: black;
    font-weight: 200;
}

.smallTitle {
    font-family: "Roboto", sans-serif;
    color: gray;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.section {
    position: relative; /* Konumlamayı sağlamak için */
    overflow: auto;
    padding-top: 100px; /* Navbar yüksekliğine göre ayarlayın */
    margin-top: 100px;
}

/* Main Container */
.main-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Navbar Stilleri */
.navbar {
    padding: 0.75rem 0;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    position: fixed;
    top: 0;
    z-index: 1050; /* Z-index artırıldı */
    width: 100%;
}

/* Navbar içerikleri */
.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto; /* Ortalanmış içerik */
    padding: 0 15px; /* İçerik kenar boşlukları */
}

.navbar-brand {
    display: block;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700; /* Bold yapıldı */
    color: #6a1b9a;
    margin-left: -2%; /* Sol kaydırma kaldırıldı */
}

@media (max-width: 768px) {
    .navbar-brand {
        margin-left: 0;
    }
}

@media (min-width: 1400px) {
    .navbar-brand {
        margin-left: -10%;
    }
}

.navbar-profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 0;
}

/* Navbar Nav */
.navbar-nav-new {
    display: flex;
    align-items: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    margin-left: 20px;
}

.nav-link {
    font-size: 0.75rem;
    font-weight: 500;
    color: black;
    text-decoration: none;
    transition: color 0.3s;
    line-height: 1.5;
    text-transform: uppercase;
}

.nav-link:hover {
    color: hotpink; /* Hover durumda mavi renge dönüştür */
}

.navbar-toggler {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    color: #6a1b9a;
    cursor: pointer;
}

@media (max-width: 768px) {
    .navbar-toggler {
        display: block;
    }

    .navbar-nav-new {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: white;
        padding: 10px 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
        z-index: 1050; /* Mobilde navbarın görünürlüğü için z-index artırıldı */
    }

    .navbar-nav-new.show {
        display: flex;
    }

    .nav-item {
        margin-left: 0;
        padding: 10px;
        text-align: center;
    }
}

/* **** Sections **** */

.about {
    position: relative;
    width: 100%;
    height: 100vh; /* veya uygun bir yükseklik */
    background-image: url('Images/Background/home-banner.png'); /* Banner resminizin yolu */
    background-size: cover; /* Resmin tam olarak arka plana kaplamasını sağlar */
    background-position: right; /* Resmi sağa dayalı yerleştirir */
    background-repeat: no-repeat; /* Resmin tekrar etmesini engeller */
    color: #fff; /* Metin rengini beyaz yapar, gerektiği şekilde değiştirebilirsiniz */
    display: flex;
    align-items: center; /* Yüksekliği ortalamak için */
    justify-content: center; /* İçeriği ortalamak için */
}

.profile-container {
    width: 360px;
    height: 400px;
    overflow: hidden;
    border-radius: 50%; /* Tam yuvarlak yapar */
    position: absolute; /* Sayfanın belirli bir yerine sabitler */
    top: 20%; /* Üstten mesafe */
    right: 10%; /* Sağdan mesafe */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 1); /* Hafif gölge */
}

.profile-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi kapsayıcıya sığdırır */
    object-position: bottom; /* Resmi aşağı kaydırır */
}

@media (max-width: 1200px) {
    .profile-container {
        display: none; /* Fotoğrafı gizler */
    }
}

.background-container {
    position: relative;
    height: 100vh; /* Tüm görünüm yüksekliğini kaplar */
    width: 100%; /* Tüm genişliği kaplar */
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi kapsayıcıya uyacak şekilde keser */
    z-index: -1; /* Resmi diğer içeriğin arkasına yerleştirir */
}

.content {
    position: relative; /* Diğer içeriğin konumunu belirler */
    z-index: 1; /* İçeriği arka planın önüne getirir */
    color: white; /* İçeriğin görünürlüğü için */
    padding: 20px; /* İçeriğe boşluk ekler */
    text-align: left; /* İçeriği ortalar */
    overflow: auto;
}

.primary_btn {
    display: inline-block;
    background: linear-gradient(to right, #1345e6 0%, #ed239f 51%, #1345e6 100%);
    color: white;
    letter-spacing: 0;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 50px;
    padding: 0 38px;
    outline: none !important;
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 5px;
    background-size: 200% auto;
    text-decoration: none;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s
}

.primary_btn:hover {
    background-position: right center;
    color: #fff
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%
}

.icon-link {
    display: inline-block;
    font-size: 24px;
    font-weight: 1;
    transition: all 0.3s ease;
    background: rgba(128, 128, 128, 0.75);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 1rem;
    cursor: pointer;
}

.icon-link:hover {
    background: linear-gradient(45deg, rgb(19, 69, 230) 0%, rgb(237, 35, 159) 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ----------------- Experience -------------- */

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Kartlar baştan itibaren sıralanır */
    gap: 40px; /* Kartlar arasındaki boşluk */
    margin-left: 5px;
    height: auto;
    overflow-y: hidden;
}

@media (max-width: 768px) {
    .card-container {
        flex-direction: column; /* Stack elements vertically on mobile */
        align-items: center; /* Center align the cards */
    }

    .card-container > * {
        width: 100%; /* Ensure each card takes up the full width */
        max-width: 100%; /* Prevent any max-width limits */
    }
}

.card {
    width: 22%; /* 4 kartın yan yana sığması için yaklaşık yüzde 23 genişlik */
    height: 500px;
    min-width: 260px; /* Kartın minimum genişliği */
    min-height: 500px; /* Kartın minimum yüksekliği */
    flex-shrink: 0; /* Kartların küçülmesini engeller */

    background-color: white;
    border-radius: 10px;
    box-shadow: rgba(160, 0, 255, 0.4) 5px 5px,
    rgba(160, 0, 255, 0.3) 10px 10px,
    rgba(160, 0, 255, 0.2) 15px 15px,
    rgba(160, 0, 255, 0.1) 20px 20px,
    rgba(160, 0, 255, 0.05) 25px 25px;
    overflow: visible;
    margin: 20px 0;
    text-align: center;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column; /* Kart içindeki elemanlar dikey olarak hizalanır */
    justify-content: space-between; /* Kart içindeki elemanlar arasında boşluk bırakır */
    position: relative; /* Overlay'in konumlandırılabilmesi için gerekli */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: none;
}

:root {
    --overlay-color: rgba(160, 0, 255, 0.8);
    /*var(--overlay-color, rgba(160, 0, 255, 0.8));*/
}

.card::after {
    content: "";
    position: absolute;
    top: 0; /* Başlangıçta kartın dışında */
    left: 0; /* Başlangıçta kartın dışında */
    width: 100%; /* Kartın genişliği */
    height: 100%; /* Kartın yüksekliği */
    background: rgba(160, 0, 255, 0.8); /* Mor renk ve transparanlık */
    z-index: 2; /* Overlay’in içerikten arkada kalmasını sağlar */
    opacity: 0;
    transition: top 0.75s ease, left 0.75s ease, opacity 0.75s ease; /* Pozisyon ve opaklık için geçiş */
    backdrop-filter: blur(3px); /* Gölgeleme efekti */
    border-radius: 10px;
}

.card:hover::after {
    top: 20px; /* Hover durumunda pozisyon */
    left: 20px; /* Hover durumunda pozisyon */
    opacity: 1; /* Hover durumunda görünür */
}

.overlay-card-container {
    position: absolute;
    color: white;
    font-weight: bold;
    text-align: center;
    z-index: 3; /* Yazının overlay'in üstünde görünmesini sağlar */
    padding: 10px;
    width: 100%; /* Yazının genişliği */
    height: 500px;
    opacity: 0;
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.overlay-card-container ul {
    list-style-position: inside; /* Madde işaretlerini metne daha yakın hale getirir */
    padding-left: 0; /* Varsayılan padding'i kaldırır */
}

.overlay-card-container li {
    margin-bottom: 10px; /* Madde işaretleri arasına boşluk ekler */
}

.overlay-card-text-list-element {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: white;
    margin-left: -20px;
}

.overlay-card-text {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: white;
}

.card:hover .overlay-card-container {
    opacity: 1; /* Hover durumunda görünür */
    transform: translate(20px, 20px); /* Hover durumunda ortalanmış olarak */
}

.card-content {
    padding: 20px;
    position: relative; /* İçeriğin overlay’in üstünde görünmesini sağlar */
    z-index: 2; /* İçeriğin overlay’in üstünde görünmesini sağlar */
}

.card-name {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: black;
}

.card-text {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: black;
}

.image-container {
    flex-grow: 1; /* Görüntü konteynerinin esnemesine izin verir */
    display: flex;
    align-items: flex-end; /* Resmi alt kısma hizalar */
    justify-content: center; /* Resmi yatayda ortalar */
}

.card-img {
    display: block;
    margin: 0 auto; /* Yatayda ortalama */
    object-fit: contain; /* Resmi kapsayıcıya sığdırır ve en-boy oranını korur */
    align-self: flex-end; /* Resmi alt kısma hizalar */
    max-height: 100%; /* Kart içindeki alanı aşmaması için maksimum yükseklik */
    max-width: 100%; /* Kart genişliğini aşmaması için maksimum genişlik */
}

.clickable-text {
    cursor: pointer;
}

.clickable-text:hover {
    color: yellow; /* Hover durumunda renk değişimi */
}

footer {
    font-family: "Roboto", sans-serif;
    color: black;
    font-weight: bold;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
}

/* ************* Projects *************** */

/*.project-card-container {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    justify-content: flex-start; !* Kartlar baştan itibaren sıralanır *!*/
/*    gap: 40px; !* Kartlar arasındaki boşluk *!*/
/*    margin-left: 5px;*/
/*    height: auto;*/
/*    overflow-y: hidden;*/
/*}*/

.project-card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Cards are aligned from the start */
    gap: 40px; /* Space between cards */
    margin-left: 5px;
    height: auto;
    overflow-y: hidden;
}

@media (max-width: 768px) {
    .project-card-container {
        flex-direction: column; /* Stack elements vertically on mobile */
        align-items: center; /* Center align the cards */
    }

    .project-card-container > * {
        width: 100%; /* Ensure each card takes up the full width */
        max-width: 100%; /* Prevent any max-width limits */
    }
}

.project-card {
    width: 22%; /* 4 kartın yan yana sığması için yaklaşık yüzde 23 genişlik */
    height: 22%;
    min-width: 260px; /* Kartın minimum genişliği */
    min-height: 460px; /* Kartın minimum yüksekliği */
    /*min-width: 260px; !* Kartın minimum genişliği *!*/
    /*min-height: 500px; !* Kartın minimum yüksekliği *!*/
    flex-shrink: 0; /* Kartların küçülmesini engeller */
    background-color: white;
    border-radius: 10px;
    box-shadow: rgba(162, 4, 49, 0.4) 5px 5px,
    rgba(162, 4, 49, 0.3) 10px 10px,
    rgba(162, 4, 49, 0.2) 15px 15px,
    rgba(162, 4, 49, 0.1) 20px 20px,
    rgba(162, 4, 49, 0.05) 25px 25px;
    overflow: visible;
    margin: 20px 0;
    text-align: center;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column; /* Kart içindeki elemanlar dikey olarak hizalanır */
    justify-content: space-between; /* Kart içindeki elemanlar arasında boşluk bırakır */
    position: relative; /* Overlay'in konumlandırılabilmesi için gerekli */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.project-card-horizontal {
    width: 22%; /* 4 kartın yan yana sığması için yaklaşık yüzde 23 genişlik */
    height: 22%;
    min-width: 300px; /* Kartın minimum genişliği */
    min-height: 150px; /* Kartın minimum yüksekliği */
    /*min-width: 260px; !* Kartın minimum genişliği *!*/
    /*min-height: 500px; !* Kartın minimum yüksekliği *!*/
    flex-shrink: 0; /* Kartların küçülmesini engeller */
    background-color: white;
    border-radius: 10px;
    box-shadow: rgba(162, 4, 49, 0.4) 5px 5px,
    rgba(162, 4, 49, 0.3) 10px 10px,
    rgba(162, 4, 49, 0.2) 15px 15px,
    rgba(162, 4, 49, 0.1) 20px 20px,
    rgba(162, 4, 49, 0.05) 25px 25px;
    overflow: visible;
    margin: 20px 0;
    text-align: center;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column; /* Kart içindeki elemanlar dikey olarak hizalanır */
    justify-content: space-between; /* Kart içindeki elemanlar arasında boşluk bırakır */
    position: relative; /* Overlay'in konumlandırılabilmesi için gerekli */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.project-image {
    border-radius: 10px;
}

.project-card::after, .project-card-horizontal::after {
    content: "";
    position: absolute;
    top: 0; /* Başlangıçta kartın dışında */
    left: 0; /* Başlangıçta kartın dışında */
    width: 100%; /* Kartın genişliği */
    height: 100%; /* Kartın yüksekliği */
    background: rgba(162, 4, 49, 0.9);
    z-index: 2; /* Overlay’in içerikten arkada kalmasını sağlar */
    opacity: 0;
    transition: top 0.75s ease, left 0.75s ease, opacity 0.75s ease; /* Pozisyon ve opaklık için geçiş */
    /*backdrop-filter: blur(3px); !* Gölgeleme efekti *!*/
    border-radius: 10px;
}

.project-card:hover::after, .project-card-horizontal:hover::after {
    top: 20px; /* Hover durumunda pozisyon */
    left: 20px; /* Hover durumunda pozisyon */
    opacity: 1; /* Hover durumunda görünür */
}

.overlay-project-card-container {
    position: absolute;
    color: white;
    font-weight: bold;
    text-align: center;
    z-index: 3; /* Yazının overlay'in üstünde görünmesini sağlar */
    padding: 10px;
    width: 100%; /* Yazının genişliği */
    height: 100%;
    opacity: 0;
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.project-card:hover .overlay-project-card-container, .project-card-horizontal:hover .overlay-project-card-container {
    opacity: 1; /* Hover durumunda görünür */
    transform: translate(20px, 20px); /* Hover durumunda ortalanmış olarak */
}

.overlay-project-card-text {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: white;
    display: flex;
    justify-content: center; /* Centers the text horizontally */
    align-items: center; /* Centers the text vertically */
    height: 100%; /* Ensures the text container takes up the full height */
    width: 100%;
    text-align: center;
}

/* *********** Modal ************ */

.modal {
    display: none;
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /*background-color: rgba(0, 0, 0, 0.5);*/
    justify-content: center;
    align-items: center;
}

.modal-content {
    /*rgba(255, 255, 255, 0.7)*/
    background-color: rgba(201, 201, 201, 0.75);
    padding: 20px;
    border: 1px solid #888;
    height: 75%;
    width: 75%;
    max-width: 1100px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 1); /* Hafif gölge */
    /*margin: auto;*/
    box-sizing: border-box;
    /*display: flex; !* Flexbox kullanarak yan yana dizilim sağlandı *!*/
    align-items: center; /* Öğeleri dikey olarak ortala */

    flex-wrap: wrap;
    justify-content: flex-start; /* Kartlar baştan itibaren sıralanır */
    overflow-y: auto;
    overflow-x: hidden;
    flex-direction: row;
    backdrop-filter: blur(8px); /* Gölgeleme efekti */
    z-index: 1000;
}

@media (max-width: 768px) {
    .modal-content {
        max-width: 90%;
        background-color: rgba(201, 201, 201, 0.9);
        min-height: 85%;
        width: 90%;
        overflow-x: hidden;
        position: relative;
        top: 4%; 
        box-sizing: border-box;
    }
}

.modal-icon-link {
    display: inline-block;
    font-size: 24px;
    font-weight: 1;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 1rem;
    cursor: pointer;
}

.modal-icon-link:hover {
    background: linear-gradient(45deg, rgb(19, 69, 230) 0%, rgb(237, 35, 159) 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.video-container {
    justify-content: center; /* Centers horizontally */
    align-content: center;
    vertical-align: center;
    max-width: 560px;
    width: 560px;
    max-height: 315px;
    height: 315px;
}

@media (max-width: 768px)
{
    .video-container
    {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }
}

.horizontal-div {
    width: 100%;
    height: 100%;
}

.centered-container {
    display: flex;
    flex-direction: column; /* Bu, içerikleri dikeyde hizalar */
    justify-content: space-between;
    align-items: center; /* Bu, içerikleri yatayda ortalar */
    margin-left: 15px; /* Varsayılan margin */
    height: auto;
    width: 100%;
    gap: 20px;
}

.fullscreen-div {
    position: fixed; /* Ekranın her yerinde sabit kalması için */
    top: 0; /* Üstten sıfır uzaklık */
    left: 0; /* Soldan sıfır uzaklık */
    width: 100vw; /* Genişlik %100 ekran genişliği */
    height: 100vh; /* Yükseklik %100 ekran yüksekliği */
    z-index: 5; /* Diğer elemanların üstünde olması için */
}


/* ******** Slider ******* */

.slider-container {
    /*margin-bottom: 250px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    width: 800px; /* Fixed width */
    height: 450px; /* Fixed height */
    position: relative;
}

@media (max-width: 768px) {
    .slider-container {
        max-width: 100%; /* Ekran genişliği 768px'den büyük olduğunda max 1100px genişlik */
        width: 100%;
        height: 450px;
        overflow-x: hidden; /* Yatay kaydırmayı engelle */
        /*overflow-y: scroll;*/
    }
}

.game-content-image-container {
    display: flex;
    flex-direction: column; /* Resimleri dikey olarak hizalar */
    align-items: center; /* Resimleri yatayda ortalar */
    gap: 10px; /* Resimler arasına boşluk ekler */
    height: auto;
}

.game-content-image-container img {
    width: 100%; /* Resim genişliği container genişliğine uyacak şekilde ayarlanır */
    max-width: 700px; /* Resimlerin maksimum genişliği ayarlanır */
    height: auto; /* Resim yüksekliği orantılı olarak ayarlanır */
    border-radius: 8px; /* Köşeleri yuvarlatır */
}

@media (max-width: 768px) {
    .slider-container {
        max-width: 100%; /* Ekran genişliği 768px'den büyük olduğunda max 1100px genişlik */
        width: 100%;
        /*height: 450px;*/
        overflow-x: hidden; /* Yatay kaydırmayı engelle */
        /*overflow-y: scroll;*/
    }
}

.slider-image {
    width: auto;
    max-width: 85%; /* Adjust as needed */
    max-height: 85%;
    /*min-height: 85%;*/
    /*min-width: 85%;*/
    height: auto;
    display: block;
    /*object-fit: contain;*/
    /*margin: 0 auto;*/
    /*margin-bottom: 10%;*/
}

.prev, .next {
    background-color: transparent;
    border: none;
    font-size: 28px;
    cursor: pointer;
    position: relative;
}


.prev:focus, .next:focus {
    outline: none;
}

.prev:hover, .next:hover {
    background: linear-gradient(45deg, rgb(19, 69, 230) 0%, rgb(237, 35, 159) 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.png-icons {
    height: 30px;
    width: 30px;
    object-fit: contain; /* Görüntü boyutlandırmasını korur */
}

.png-icons:hover {
    cursor: pointer;
}

.icon-container {
    display: flex; /* Flexbox modelini kullan */
    justify-content: center; /* İkonları yatayda ortala */
    align-items: center; /* İkonları dikeyde ortala */
    gap: 10px; /* İkonlar arasına boşluk ekle */
}


/* *********** Knowledge ***********/

.card9 {
    width: 300px;
    height: 430px;
    border-radius: 15px;
    /* background-color: #2c2a2a; */
    background: linear-gradient(to right, rgb(20, 145, 111) 0%, rgb(228, 230, 105) 100%);
    border-radius: 20px;
    transition: all .2s;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.card9:hover {
    transform: scale(1.15);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -ms-transform: scale(10);
    -o-transform: scale(10);
}

/*.p_color {*/
/*    color: var(--theme-ui-colors-black, #000);*/
/*    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/

/*}*/

/*.p_hcolor {*/
/*    color: var(--theme-ui-colors-black, #000);*/
/*    font-size: 35px;*/
/*    font-weight: 700;*/
/*    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
/*    margin-top: 29px;*/
/*}*/