@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Math&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Signika:wght@300..700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* ======================================= */
.logo_new {
    width: 200px;
    border-radius: 10px;
}

.logo {
    width: 200px;
    border-radius: 10px;
}



.header_new {
    background-color: #d7dbdd;
}

/* ======================================= */


* {
    font-family: "Noto Sans", sans-serif;
    font-weight: 200;
}



.a_text {
    text-decoration: none;
    color: inherit;
}



.header {
    background-color: #2980B9;
    height: 80px;


}

.header li {
    display: inline;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    line-height: 80px;
    padding-right: 30px;

}

.a_jett {
    text-decoration: none;
    color: inherit;
}

.product {
    padding: 10px;

}

.img_pro {
    width: 100%;
    background-color: #FFFFFF;
    margin-bottom: 4px;
}

.desc {

    border-top: solid 1px #b1a9a9;
    margin-top: 4px;
    text-align: center;
    background-color: #73C6B6;
    padding: 15px;
}

.name {
    font-weight: bold;
    font-size: 18px;
    color: #FFFFFF;
}

.price {
    font-weight: bold;
    font-size: 18px;
    color: #FFFFFF;
}

.btn_more {
    background-color: #16A085;
    border: solid 1px #16A085;
    color: #FFFFFF;
    padding: 7px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
}

.btn_more:hover {
    background-color: #FFFFFF;
    color: #16A085;
}

.btn_add {
    background-color: #16A085;
    border: solid 1px #16A085;
    padding: 8px;
    font-size: 18px;
    color: #FFFFFF;
    border: solid 1px #16A085;
    text-decoration: none;
}

.btn_add:hover {
    background-color: transparent;
    color: #16A085;
}

.item_d {
    font-weight: normal;

}

.login_btn {
    background-color: #FE4600;
    border: solid 1px #FE4600;
    padding: 5px 20px;
    font-size: 16px;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 900;
}

.login_btn:hover {
    background-color: transparent;
    border: solid 1px #FE4600;
    color: #FE4600;
}

.header_search {
    background-color: #3F69E3;
    border-radius: 5px;
    padding: 15px;

}

.header_search_box {
    padding: 10px
}

.btn_header_search {
    background-color: #FFFFFF;
    border: solid 1px #FFFFFF;
    padding: 3px 20px;
    font-size: 16px;
    color: #3F69E3;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 900;
}


.btn_menu_header {
    color: #000 !important;
}

.btn_menu_header:hover {
    background-color: transparent;
}

.btn_menu_purchase {
    border: solid 1px #6680D2;
    padding: 3px 20px;
    font-size: 16px;
    color: #6680D2;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 900;
    background-color: inherit;
}

/* ===========Banner========== */
.banner {
    position: relative;
    width: 100%;
    height: 400px;
    background: url('../slider/slider1.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.content-box {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 50px 20px;
    border-radius: 8px;
    max-width: 300px;
    margin-left: 50px;
}

.content-box h2 {
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 900;
    color: #2e4053;
    opacity: .9;
}

.content-box ul {
    list-style-type: disc;
    padding-left: 20px;
}

.content-box ul li {
    margin-bottom: 10px;
}

.btn-create {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    background-color: #ffc107;
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    text-decoration: none;
}

.btn-create:hover {
    background-color: #ffb007;
    color: #fff;
}
.btn-sign {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    background-color: transparent;
    color: #000;
    font-weight: bold;
    border: solid 1px #ffc107;
    border-radius: 4px;
    text-decoration: none;
}

.btn-sign:hover {
    background-color: #ffb007;
    color: #fff;
}

/* ========================== */


.content_title {
    font-size: 40px;
    line-height: 50px;
    font-family: "Bebas Neue", serif;
    font-weight: 900;
    color: #2e4053;
    border-bottom: 2px solid #d7dbdd;
    text-align: center;
}


.stats-section {
    text-align: center;
    padding: 40px 0;
    background-color: #d7dbdd;
    margin: 1px;
}

.stats-section .stat {
    margin-bottom: 20px;
}

.stats-section .stat h4 {
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.stats-section .stat p {
    color: #3C4D5E;
    font-size: 1rem;
    margin: 0;
}

/* ========================== */
.customer-service-section {
    padding: 20px;
    border: solid 1px #d7dbdd;
}

.customer-service-section .image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 2px
}

.customer-service-section .info-container {
    text-align: left;
}

.customer-service-section .info-container p {
    font-size: 1rem;
    margin-bottom: 20px;
}

.customer-service-section .info-container .btn {
    margin-right: 10px;
    background-color: #4a90e2;
    color: white;
    border: none;
}

.steps-container {
    background-color: #d7dbdd;
    padding: 20px;
    border-radius: 5px;
}

.steps-container h5 {
    font-weight: 900;
    margin-bottom: 15px;
    color: #2e4053;
}

.steps-container ol {
    padding-left: 20px;
}

.steps-container ol li {
    margin-bottom: 10px;
}

/* ========================== */
.customer-says-section {
    padding: 30px 0;
    background-color: #f8f9fa;
}

.customer-says-section h2 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 40px;
    color: #333;
}

.testimonial-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    height: 100%;
}

.testimonial-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 15px;
}

.testimonial-card p {
    font-size: 1rem;
    color: #555;
}

.testimonial-card h5 {
    font-weight: bold;
    color: #333;
}

.testimonial-card span {
    font-size: 0.9rem;
    color: #999;
}

.img_service {
    width: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 5px;
}

.img_service_payment {
    width: 100px;
    height: 90px;
    object-fit: cover;
    object-position: 50% 50%;
}

.btn_service1 {
    color: #2e4053;
    border: solid 1px #2e4053;
    border-radius: 25px;
    padding: 5px;
    text-align: center;
    font-weight: 900;
    text-decoration: none;
}

.btn_service1:hover {
    background-color: #E4E7E9;

}

.category_title {
    text-align: center;
    font-weight: 900;
    color: #FFFFFF;
    font-size: 20px;
    line-height: 40px;
    font-family: "Montserrat", serif;
    /* border: solid 1px #2e4053; */
    list-style-type: none;
    margin: 1px;
    background-color: #3F69E3;
}




.sidebar_cat {
    background-color: #e5e7e9;
    padding: 10px;
}

.a_text_cat_list {
    text-decoration: none;
    color: #2e4053;
}

.a_text_cat_list:hover {
    color: #000
}

.title_service {
    color: #2e4053;
    font-weight: bold;
    text-decoration: none
}

.cat_label {
    color: #2e4053;
    font-weight: 900;
    font-size: 20px;
}

.cat_labelSub {
    color: #2e4053;
    font-weight: 700;
    font-size: 14px;
}

.cat_label2 {
    color: #2e4053;
    font-weight: 200;
    font-size: 14px;
    margin-top: -5px;
}



.product-image {
    max-height: 400px;
    object-fit: cover;
}

.thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.thumbnail:hover,
.thumbnail.active {
    opacity: 1;
}

.bg_container {
    background-color: #f4f8fa;
    padding: 20px;
    border: 1px solid #ccc;
}

.bg_prod_cat {
    background-color: #f4f8fa;
    padding: 10px;
    border: 1px solid #ccc;
}

.btnSubmit {
    background-color: #D7DBDD;
    color: #435262;
    border: solid 1px #D7DBDD;
    border-radius: 25px;
    padding: 7px 25px;
    text-align: center;
    font-weight: 900 !important;
    text-decoration: none;
    font-size: 14px;
}

.sign_in_btn {
    background-color: #6680D2;
    color: #FFFFFF;
    border: solid 1px #6680D2;
    border-radius: 25px;
    padding: 7px 25px;
    text-align: center;
    font-weight: 900 !important;
    text-decoration: none;
    font-size: 14px;
}

.sign_in_btn:hover {
    background-color: transparent;
    color: #6680D2;
}
.sign_in_btn2 {
    background-color: transparent;
    color: #6680D2;
    border: solid 1px #6680D2;
    border-radius: 25px;
    padding: 7px 25px;
    text-align: center;
    font-weight: 900 !important;
    text-decoration: none;
    font-size: 14px;
}

.sign_in_btn2:hover {
    background-color: #6680D2;
    color: #FFFFFF;
}

.sign_in_btn_out {
    background-color: transparent;
    color: #6680D2;
    border: solid 1px #6680D2;
    border-radius: 25px;
    padding: 7px 25px;
    text-align: center;
    font-weight: 900 !important;
    text-decoration: none;
    font-size: 14px;
}

.sign_in_btn_out:hover {
    background-color: #6680D2;
    color: #FFFFFF;
}

.btn_action{
    background-color: inherit;
    border: solid 1px #6680D2;
    border-radius: 25px;
    padding: 0px 15px;
}


.initial-text {
    font-size: 28px;
    line-height: 32px;
    color: #333;
    font-weight: 700;
    font-family: "Montserrat", serif;
}

.more-text {
    font-size: 18px;
    color: #666;
    line-height: 20px;
}

.view-more {
    text-decoration: none;
    color: #337ab7;
    font-size: 18px;
    cursor: pointer;
}

.view-more:hover {
    color: #23527c;
    text-decoration: underline;
}

.tet306_title{
    font-size: 20px;
    line-height: 24px;
    color: #333;
    font-weight: 500;
    font-family: "Montserrat", serif;
}
.tet306_title2{
    font-size: 18px;
    line-height: 22px;
    color: #333;
    font-weight: 500;
    font-family: "Montserrat", serif;
}