/* @todo prune fonts.css if it's too expensive to import that many */
@import url('fonts.css');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Pacifico&family=Great+Vibes&display=swap');

abbr[title] {
    cursor: auto; /* Default cursor */
}
/* @todo see if I can target this element without creating a new class */
/* hero section CTA button (on index page) */
.hero-cta-btn {
    border:2px solid var(--bs-white);
    color: var(--bs-blue);
}
.btn.hero-cta-btn:hover,
.btn.hero-cta-btn:focus {
    background-color: var(--bs-blue);
    color: var(--bs-white);
    text-decoration: underline;
}
.btn.hero-cta-btn:focus {
    outline: 2px solid var(--bs-white);
    outline-offset: 2px;
}

/* @todo see if I can get the navbar styles that are customized and kill them */
/* target large and above screen sizes */
@media (min-width: 992px) {
    .navbar-nav .nav-item .nav-link.active {
        border-left: 2px solid var(--bs-primary);
        border-top: 2px solid var(--bs-primary);
        border-right: 2px solid var(--bs-primary);
        border-bottom: none;
        border-radius: 0.25rem 0.25rem 0 0;
    }
    .navbar-nav .nav-item .nav-link {
        border-bottom: 2px solid var(--bs-primary);
    }
}
.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link:focus {
    text-decoration: underline;
}

/* create yellow underline effect */
.underlined {
    position: relative;
    display: inline-block;
}
.underlined::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.1em;
    height: 0.3em;
    width: 100%;
    border: solid 0.08em var(--bs-yellow);
    border-color: var(--bs-yellow) transparent transparent transparent;
    border-radius: 80%;
    /* transform: scaleX(0);
    transform-origin: bottom left; */
    animation: drawUnderline 1s ease-out forwards;
}
@keyframes drawUnderline {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .underlined::after {
        animation: none;
        clip-path: inset(0 0 0 0);
    }
}

.letter-container {
    border: 1px solid var(--bs-border-color);
    position: relative;
    z-index: 1;
}
.letter-container::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 16px 16px 0;
    border-style: solid;
    border-color: var(--bs-gray-100) var(--bs-white);
}
.paper-edge {
    height: 50px;
    background-color: var(--bs-gray-100);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
    margin-top: -25px;
}

/* Usage: <div class="curve-down-divider" role="presentation" aria-hidden="true"></div> */
/* Alt usage for the bottom half of section to match colors: style="--curve-color: var(--bs-warning)" */
/* do a cool effect that puts a curve divider */
.curve-down-divider {
    position: relative;
    background: var(--bs-primary);
    height: 150px;
    overflow: hidden;
}
.curve-down-divider::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: var(--curve-color, var(--bs-body-bg));
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
/* Usage: <div class="curve-up-divider" role="presentation" aria-hidden="true"></div> */
/* Alt usage for the bottom half of section to match colors: style="--curve-color: var(--bs-warning)" */
/* curve-up-divider class */
.curve-up-divider {
    position: relative;
    background: var(--curve-color, var(--bs-body-bg));
    /* background: var(--bs-primary); */
    height: 150px;
    overflow: hidden;
}
.curve-up-divider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: var(--bs-primary);
    /* background: var(--curve-color, var(--bs-body-bg)); */
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.slant-up-divider {
    position: relative;
    height: 100px;
    overflow: hidden;
    background-color: var(--bs-blue);
}
.slant-up-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%;
    background: var(--bs-white);
    clip-path: polygon(
        0% 100%,
        10% 99%,
        20% 98%,
        30% 95%,
        40% 91%,
        50% 85%,
        60% 77%,
        70% 67%,
        80% 54%,
        85% 46%,
        90% 36%,
        93% 28%,
        96% 18%,
        98% 10%,
        100% 0%,
        100% 100%
    );
}

.signature {
    font-family: 'Dancing Script', 'Pacifico', 'Great Vibes', 'Brush Script MT', cursive;
    font-size: 2.25rem;
    transform: rotate(-5deg);
}

/* About us team member */
.team-member-img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 1rem;
}
.subtitle-container {
    height:60px
}
@media (max-width: 767.98px) {
    .team-member-img {
        width: 150px;
        height: 150px;
    }
}

/* @todo see if I can animate the circular highlight */
.circular-highlight {
    position: relative; 
    display: inline-block;
    padding: 0.5em 0.75em;
}
.circular-highlight::before{
    content:"";
    position:absolute;
    left:0.1em;
    top:0.25em;
    height:1.5em;
    border: 3px solid var(--bs-yellow);
    width:100%;
    transform:rotate(2deg);
    border-radius:50%;
    padding:0.1em 0.25em;    
}
.circular-highlight::after {
    content:"";
    left:0.2em;
    top:0.65em;
    padding:0.5em 0.25em;
    border-width:2px;
    border-style:solid;
    border-color:var(--bs-yellow);
    border-left-color:transparent;
    border-top-color:transparent;
    position:absolute;
    width:100%;
    height:1em;
    transform:rotate(-1deg);
    opacity:0.7;
    border-radius:50%;
}

/* Services page specific styles */
.services-container {
    background-color: #f8f9fa;
    position: relative;
    z-index: 1;
}

.services-card {
    height: 300px; /* Adjust this value as needed */
    width: 100%; /* This ensures the card takes up the full width of its column */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    backdrop-filter: blur(10px);
}
.services-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
/* @todo make sure this is in use */
/* Remove the alternating background color for even cards */
.services-card:nth-child(even) {
    background-color: inherit;
}

.testimonial-card {
    height: 300px;
    width: 100%;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    backdrop-filter: blur(10px);
}
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Add this new style to reverse the skew for the contact page */
/* .contact-hero::after {
    transform: skewY(3deg);
} */
.grecaptcha-badge { 
    visibility: hidden; 
}
.team-card {
    max-width: 300px;
}
.team-member-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.form-control {
    background-color: var(--bs-info-bg-subtle);
}

/* Add this new style for right-aligned images */
.richtext-image-right {
    float: right;
    margin-left: 15px;
    margin-bottom: 10px;
}

/* It's also good to add a clearfix to prevent layout issues */
.richtext::after {
    content: "";
    display: table;
    clear: both;
}

/* Add this new style for left-aligned images */
.richtext-image-left {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
}

/* Add this new style for center-aligned images */
.richtext-image-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}