/*
Theme Name:   Cesis Child
Theme URI:    http://example.com/twenty-twenty-child/
Description:  Cesis Child Theme
Author:       Promise Atokple
Author URI:   http://example.com
Template:     cesis
Version:      1.0.0
*/

/*@import url(https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css);*/
@import url(/wp-content/themes/cesis-child/assets/extended-styles.css);
@import url(/wp-content/themes/cesis-child/assets/borders.css);

*, body, .font-inter {
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}


.button-primary {
    background-color: #ffac27!important; /* Original color */
    border: none!important;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.button-primary:hover {
    background-color: #e69a1f!important; /* Darker shade for hover effect */
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.custom_color_primary_orange{
    color: #ffac27!important;
}
.custom_bg_primary_orange{
    background: #ffac27!important;
    color: #fff;
}

.custom_bg_primary_orange:hover{
    background: #f5a11c !important;
    color: #fff;
}

.custom_icon-bg-dark{
    background: #333333;
    color: #fff;
}
.custom_icon-bg-dark:hover{
    /*background: #fff!important;*/
    color: #fff;
}

.fab.fa-tiktok {
    font-family: "Font Awesome 5 Brands", sans-serif !important;
}

.custom_bg-body{
    background: #f0f0f1!important
}

.responsive-text {
    font-size: .8rem!important; /* Base size */
}

@media (min-width: 768px) {
    .responsive-text {
        font-size: .9rem!important; /* Medium screens */
    }
}

@media (min-width: 992px) {
    .responsive-text {
        font-size: 1rem!important; /* Large screens */
    }
}

.custom-link {
    position: relative;
    color: inherit; /* Keep default link color */
    text-decoration: none; /* Remove the default underline */
    padding-bottom: 2px; /* Space for the border */
    transition: color 0.3s ease;
}

.custom-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #fff;
    transition: width 0.3s ease;
}

/* Highlight direct active link */
.current-menu-item .custom-link::after,
.current_page_item .custom-link::after {
    width: 100%;
}

/* Highlight ancestors but without the border */
.current-menu-ancestor > .custom-link,
.current_page_ancestor > .custom-link {
    color: #fff;
}

/* On hover or focus, the border effect */
.custom-link:hover::after,
.custom-link:focus::after {
    width: 100%;
}

/* On hover or focus, change color */
.custom-link:hover,
.custom-link:focus {
    color: #fff;
    transition-duration: 3ms;
}


/* section colors and backgrounds*/
.color_mint-cream{
    background: #f0f4f4!important;
}

.btn-dark:hover{
    color: white!important;
}
/* endsection colors and backgrounds*/

:host, html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: Roboto,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-feature-settings: normal;
    font-variation-settings: normal;
}


.truncate-one-line {
    display: -webkit-box;       /* Fallback for old versions of browsers */
    -webkit-line-clamp: 1;      /* Limits the text to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;           /* Ensures content doesn't overflow */
    text-overflow: ellipsis;    /* Adds ellipsis (...) when text is truncated */
    height: calc(1.2em * 1);    /* Calculates the height for exactly 3 lines */
    max-height: calc(1.2em * 1);/* Restricts the maximum height */
    line-height: 1.2em;         /* Defines the line height */
    position:relative;
}

.truncate-two-lines {
    display: -webkit-box;       /* Fallback for old versions of browsers */
    -webkit-line-clamp: 2;      /* Limits the text to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;           /* Ensures content doesn't overflow */
    text-overflow: ellipsis;    /* Adds ellipsis (...) when text is truncated */
    height: calc(1.2em * 2);    /* Calculates the height for exactly 3 lines */
    max-height: calc(1.2em * 2);/* Restricts the maximum height */
    line-height: 1.2em;         /* Defines the line height */
    position:relative;
}

.truncate-three-lines {
    display: -webkit-box;       /* Fallback for old versions of browsers */
    -webkit-line-clamp: 3;      /* Limits the text to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;           /* Ensures content doesn't overflow */
    text-overflow: ellipsis;    /* Adds ellipsis (...) when text is truncated */
    height: calc(1.2em * 3);    /* Calculates the height for exactly 3 lines */
    max-height: calc(1.2em * 3);/* Restricts the maximum height */
    line-height: 1.2em;         /* Defines the line height */
    position:relative;
}

.truncate-four-lines {
    display: -webkit-box;       /* Fallback for old versions of browsers */
    -webkit-line-clamp: 4;      /* Limits the text to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;           /* Ensures content doesn't overflow */
    text-overflow: ellipsis;    /* Adds ellipsis (...) when text is truncated */
    height: calc(1.2em * 4);    /* Calculates the height for exactly 3 lines */
    max-height: calc(1.2em * 4);/* Restricts the maximum height */
    line-height: 1.2em;         /* Defines the line height */
    position:relative;
}

.truncate-five-lines {
    display: -webkit-box;       /* Fallback for old versions of browsers */
    -webkit-line-clamp: 5;      /* Limits the text to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;           /* Ensures content doesn't overflow */
    text-overflow: ellipsis;    /* Adds ellipsis (...) when text is truncated */
    height: calc(1.2em * 5);    /* Calculates the height for exactly 3 lines */
    max-height: calc(1.2em * 5);/* Restricts the maximum height */
    line-height: 1.2em;         /* Defines the line height */
    position:relative;
}



h1, h2, h3, h4, h5, h6 {
    color: #1a1c2e;
    display: inline-block; /* Needed to wrap just the heading text */
    text-align: inherit;   /* Inherit alignment from parent */
}

h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: linear-gradient(to right, #ff7e00, transparent);
    margin-top: 5px;
}