:root {
    --primary-color: #133B5C;
    --secondary-color: #ffffff;
    --light-bg: #f8f9fa;
    --text-clr: #000000;
    --text2-clr: #c3cfe2;
    --border-clr: #f5f7fa;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    font-family: 'Oswald', sans-serif;
}

.main-wrapper {
    width: 1075px;
    max-width: 100% !important;
    margin: auto;
    padding: 0;
}
.comments-section .logBtn{
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background: var(--secondary-color);
}
.comments-section .signBtn{
    background: var(--primary-color);
    color: var(--secondary-color);
}
.comments-section .logBtn:hover{
    border: 1px solid var(--primary-color);
    color: var(--secondary-color);
    background: var(--primary-color)
}

@media(max-width: 876px){
    .main-wrapper{
        padding: 0px;
    }
}

.h1, h1{
    font-size: 30px !important;
}

.h2, h2{
    font-size: 26px !important;
}

.h3, h3{
    font-size: 24px !important;
}

.h4, h4{
    font-size: 22px !important;
}

.h5, h5{
    font-size: 20px !important;
}

.h6, h6{
    font-size: 18px !important;
}

@media(max-width: 768px){
    .h1, h1{
        font-size: 24px !important;
    }

    .h2, h2{
        font-size: 20px !important;
    }

    .h3, h3{
        font-size: 18px !important;
    }

    .h4, h4{
        font-size: 16px !important;
    }

    .h5, h5{
        font-size: 14px !important;
    }

    .h6, h6{
        font-size: 12px !important;
    }
}

.head-bg{
    background: var(--primary-color);
}

.btn-giz {
    background: var(--primary-color);
    border: none;
    color: var(--secondary-color);
    border-radius: 8px;
    font-weight: 600;
    transition: var(--transition);
}

.text-clr{
    color: var(--primary-color);
}
.log-link{
    color: var(--primary-color);
    font-size: 13px;
}
.modal{
    z-index: 9999999 !important;
}
::-webkit-scrollbar {
    width: 4px;
    height: 5px;
    border-radius: 34px;
    background: #edeef2;
}

::-webkit-scrollbar-thumb {
    background-color: #133B5C;
    border-radius: 34px;
}

::-webkit-scrollbar-track {
    border-radius: 30px;
    background: #edeef2;
}
/* <?= view('front/components/comments', [
    'entityType' => 'mobile',
    'entityId'   => $phone['id'],
    'isLoggedIn' => session()->has('user_id')
]) ?> */