/* custom style */
:root {
    --dark-blue: #0a3a8c;
    --blue: #0f4eb8;
    --light-blue: #b6d0fa;
    --yellow: #ffdc3e;
    --baby-yellow: #fff3a1;
    --cream: #fffdf0;
    --white: #ffffff;
    --red: #ff69aa;
    /* Add more colors as needed */

    --min-column-gap-vw: 3vw; /* Minimum column gap in vw */
    --max-column-gap-vw: 10vw; /* Maximum column gap in vw */
}

html {
    /* 영문이면 roboto가 적용되고, 한글이면 Noto Sans KR가 적용되도록 아래와 같은 순서로 배치 */
    font-family: "GmarketSansMedium", "GmarketSansLight", "GmarketSansBold",
        sans-serif;
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 100px;
}

/*폰트 여러개 지정하는 방법*/
@font-face {
    font-family: "GmarketSansLight";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff")
        format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GmarketSansMedium";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
        format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GmarketSansBold";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff")
        format("woff");
    font-weight: normal;
    font-style: normal;
}
/*폰트만들기*/
.font-light {
    font-family: "GmarketSansLight" !important;
}

.font-medium {
    font-family: "GmarketSansMedium" !important;
}

.font-bold {
    font-family: "GmarketSansBold" !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    /* inherit from body */
    /* or set specific font-family for headings if needed */
}

button,
.btn {
    font-family: inherit;
}

a:hover h5 {
    color: var(--light-blue); /* Change to the desired light blue color */
}

a h5 {
    color: var(--dark-blue); /* Change to the desired light blue color */
}

.btn-sellwing {
    border: 2px solid var(--dark-blue);
    background-color: var(--light-blue);
    border-radius: 3px;
}

.btn-sellwing:hover {
    border: 2px solid var(--dark-blue);
    background-color: var(--yellow);
    border-radius: 3px;
}

#contactUsBg {
    background-image: url("images/business/09_Contact.svg"),
        linear-gradient(var(--cream), var(--baby-yellow)); /* Specify the path to your image */
    background-size: contain; /* Adjust as needed */
    background-position: bottom; /* Adjust as needed */
    background-repeat: no-repeat;
}

.contact-us-textbox {
    border: 2px solid var(--light-blue);
    font-size: 20px;
    line-height: 23px;
    color: var(--dark-blue);
}

.testimonial-scroll::-webkit-scrollbar {
    height: 15px;
    /* Adjust the width of the scrollbar */
    background-color: var(--light-blue);
    border-radius: 100px;
}

/* Change the color of the scrollbar thumb (handle) */
.testimonial-scroll::-webkit-scrollbar-thumb {
    background-color: var(--blue);
    /* Set the desired color */
    border-radius: 100px;
}

/* Change the color on hover */
.testimonial-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--dark-blue);
    /* Set the desired hover color */
}

.testimonial-card {
    min-height: 400px;
    background: var(--white);
    border: 2px solid var(--light-blue);
    padding: 35px 20px;
}

.testimonial-row:nth-child(even) {
    margin-top: 20px;
}