@import "button.css";
@import "form.css";
@import "menu.css";
@import "footer.css";
/***
    1. Common
    2. Header
    3. Menu
    4. Footer
    5. Button
    6. Form
    7. Homepage
    8. Contact
    9. Product
    10. Breadcrumb
 */

/***** Common *****/

body {
    font-size: 16px;
    line-height: 1.7;
    font-family: Suisse Regular,sans-serif;
    position: relative;
    min-height: 100dvh;
}

p {
    font-size: 1rem;
    line-height: 1.7;
    font-family: Suisse,sans-serif;
}
.remark {color: red;}
.text-underline {text-decoration: underline;}
.w-100 {width: 100%}

/***** Header *****/

.topbar {
    background-color: rgb(160, 202, 48, 0.35);
    color: #333;
    padding: 10px 20px;
    font-size: 14px;
}

.shipping-banner {
    background-color: #D31335;
    color: #fffef2;
    padding: 10px 20px;
    font-size: 14px;
}

.breadcrumb a {
    color: rgb(33, 37, 41);
    text-decoration: none;
}


/***** Menu *****/

.desktop-menu {
    transition: padding 0.3s ease;
}

.desktop-menu.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: #fffef2; /* Match your background color */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding-top: 0px;
    padding-bottom: 0px;
}

body.navbar-fixed {
    padding-top: 60px; /* Adjust this value to match your navbar height */
}

.navbar {
    transition: padding 0.3s ease;
}

.fixed-top .navbar {
    padding-top: 5px;
    padding-bottom: 5px;
}

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

.right-panel {
    padding: 0 20px 0 100px;
    line-height:27.2px;
    font-weight: 400;
}

.label-strong {
    font-weight: bold;
    padding-bottom: 20px;
    font-size: 14px;
}

.label-heading {
    font-size:1.875rem;
    line-height:1.33;
    padding-bottom: 30px;
    font-family: Zapf Humanist,serif;
}

.label-text {
    font-weight: 400;
}

/***** Contact ******/

.contact-item {
    border: 1px solid #00234D;
    border-radius: 4px;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background-color: transparent;
    padding: 16px;
}
.contact-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 30px;
}

.contact-form-area {
    padding: 64px;
    -webkit-box-shadow: 0px 0px 8px rgba(12, 18, 38, 0.06);
    box-shadow: 0px 0px 8px rgba(12, 18, 38, 0.06);
}

/***** Product *****/

.product-featured {

}

.product-featured .product-name {
    /*text-decoration: underline;*/
    font-weight: 700;
    font-size: 16px;
}

.product-featured .product-desc {
    font-weight:400;
    font-size: 20px;
}

.product-cover {
    /*padding:40px;*/
    padding: 40px 0 20px 0;
    margin:0 20px;
}

.product-cover img {
    /*max-width: 400px;*/
    text-align: center;
    margin: 0 auto;
}

.product-wrap-link {
    color: #000;
    text-decoration: none;
}

/***** Misc *****/

.card-header {background: #A0CA31;}
.card-header h4 {color: #fff;}
.bg-red {background: #D31435 !important;}
.border-red {border-color: #D31435 !important;}
.original-price {text-decoration-line: line-through; font-size: 22px; color: #888;}
.discounted-price {font-size: 22px; color: #D31435;}
.content-wrap {font-size: 16px;line-height: 24px; padding:10px 10px;}
.content-plan .original-price, .content-plan .discounted-price {font-size: 28px;}

.table-bottom-borderless {border-bottom: 0;}
.package-table td {vertical-align:middle!important;}

/*** SVG ***/
.checkmark {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: green;
    stroke-miterlimit: 10;
    stroke-dashoffset: 0;
    margin: 10% auto;
}

/***** Breadcrumb *****/
.breadcrumbs {
    background-color: #f8f9fa;
}


.breadcrumbs ul {
    padding: 10px 0;
    list-style: none;
    border-radius: 4px;
    font-size: 14px;
}

.breadcrumbs ul li {
    display: inline;
}

.breadcrumbs ul li + li:before {
    content: ">";
    padding: 0 5px;
    color: #6c757d;
}

.breadcrumbs ul li a {
    /*color: #007bff;*/
    color: #000;
    text-decoration: underline;
}

.breadcrumbs ul li a:hover {
    text-decoration: underline;
}