/* Index CSS */

.coy-name-bell {
    text-shadow: 0 2px 3px rgba(0, 0, 0, .35);
    & .note-bell.fa {
        &::before { 
            display: inline-block;
            animation: shake .15s infinite; 
        }
        &:hover { color: var(--accent) !important; }
    }
}

@keyframes shake {
    0%{ transform: rotate(0deg);}
    25%{ transform: rotate(7deg);}
    50%{ transform: rotate(0eg);}
    75%{ transform: rotate(-7deg);}
    100%{ transform: rotate(0deg);}
}

.services {
    & .service-item {
        & .service-sub-item {
            padding-left: 3rem;
            display: flex;
            align-items: flex-start;
            color: var(--bs-dark-primary);
            cursor: pointer;
            &::before {
                margin-right: .5rem;
                display: inline-block;
                position: relative;
                color: var(--bs-accent);
                transition: transform .3s;
            }
            &[aria-expanded=true]::before { transform: rotate(90deg); }
            &:hover { color: var(--bs-primary); }
        }    
        & .service-sub-item-item-wrapper {
            margin-bottom: .25rem;
            padding-left: 4rem;
            padding-right: .25rem;
            padding-bottom: .25rem;
            & .service-sub-item-item {
                display: flex;
                align-items: flex-start;
                color: var(--bs-secondary);
                font-size: 1rem;
                &::before {
                    margin-top: .5rem;
                    margin-right: .5rem;
                    content: "\f111";
                    font-family: "Font Awesome 5 Free";
                    font-size: 5px;
                    font-weight: 600;
                }
                &:last-of-type { border-bottom: 2px solid #787878; }
            }
        }
    }
}

.why-us {
    & .causes-progress {
        & div.d-flex p.text-dark-primary { font-size: medium; }
    }
}
/* @Min-Medium */
@media (min-width: 768px) {
    .why-us-icon-wrapper {
        transition: all .3s;
        transform: rotate(45deg);
        & .why-us-icon {
            transition: all .3s;
            transform: rotate(-45deg);
        }
    }
}

.blogs {
    & .blog-item {
        padding: 0 .5rem;
        width: calc(320px + 1rem);
        max-height: 240px;
        border: none !important;
        position: relative;
        transition: width 3s;
        & div { position: relative; }
        &.slide {
            width: 0;
        }
        & img {
            max-width: 100% !important;
            max-height: unset !important;
            object-fit: cover !important;
        }
    }
    & .blog-item:has(video) overlay {
        display: none;
        position: absolute;
        max-width: calc(320px - 1.5rem);
        top: 35px;
        left: 0;
        right: 0;
        color: white;
        font-size: calc(.875rem + .3vw);
        line-height: 1;
        text-shadow: 0 2px 3px rgba(0, 0, 0, .35);
        transition: all .1000s;
    }
    & .blog-item:has(video[overlay=show]) overlay, & .blog-item:has(video:hover) overlay, & .blog-item:has(video) overlay:hover { display: block; }
    & .blog-item:has(img[overlay=show]) overlay, & .blog-item:has(img:hover) overlay, & .blog-item:has(img) overlay:hover { display: flex; }
    & .blog-item:has(img) {
        & overlay {
            display: none;
            gap: .25rem;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: absolute;
            /* max-width: calc(320px - 1.5rem); */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: transparent;
            color: white;
            font-size: calc(.875rem + .3vw);
            line-height: 1;
            text-shadow: 0 2px 3px rgba(0, 0, 0, .35);
            transition: all .1000s;
            & a.btn {
                opacity: 0;
                border-radius: 3px;
            }
        }
        &:hover overlay {
            display: flex;
            background-color: var(--bs-primary-tp);
            & a.btn { opacity: 1; }
        }
    }
    & .carousel-control-prev, & .carousel-control-next { 
        width: auto;
        & .carousel-control-prev-icon, & .carousel-control-next-icon {
            background-color: transparent;
            border: 12px solid transparent;
            border-radius: 3rem;
            transition: all .3s;
        }
    }
    & .slide-body:hover {
        & .carousel-control-prev-icon, & .carousel-control-next-icon {
            background-color: var(--dark);
            border-color: var(--dark);
            font-weight: bolder;
        }
    } 
}