:root {
    --primary-color: #1baca5;
    --primary-color-dark: #137c76;
    --sec-color: #ffa300;
    --sec-color-dark: #e99000;
    --ice-blue-bg: #65728d;
    --ice-blue-light: #f2f6ff;
    --ice-blue: #e8f0f9;
}
html {
    scroll-behavior: smooth;
    color: black !important;
}
body{
    margin:  0;
    padding: 0;
    width: 100%;
    position: relative;
    overflow-x: hidden;
}
.list-unstyled{
    padding-left: 0 !important ;
    padding-right: 0 !important ;
}
.list-unstyled li{
    margin-bottom: 8px;
}
.bg-ice{
    background-color: var(--ice-blue);
}
a{
    color: var(--primary-color);
}
a:hover{
    color: lightslategrey;
}
.btn{
    border-radius: 16px;
    text-transform: none !important;
}
.btn-action{
    background-color: var(--sec-color);
    color: whitesmoke;
}
.btn-action:hover{
    background-color: var(--sec-color-dark);
    color: white;
}
.btn-lg{
    font-size: large;
}
.text-justify {
    text-align: justify !important;
    text-justify: inter-word !important;
    /* FIX horizontal / inner scroll on mobile */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;
}
.text-shadow{
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.mask{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #2b2b2c;
    opacity: 0.4;
    z-index: 1;
}
.header-inner{
    z-index: 3;
    color: white;
}
.spec-card{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    position: relative;
}
.spec-card img{
    width: 250px;
}
#banner img{ height: 350px}
#banner{
    background-color: var(--primary-color);
    color: white;
    border-radius: 24px;
}
#main-content{
    position: relative;
    overflow-x: hidden;
}
#about-text p {
    font-size: large;
}
main section {
    position: relative;
    z-index: 1;
}
#cards{
    border-radius: 24px !important;
}
#cards .col{
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
#cards .col img{
    margin-bottom: 16px;
    width: 120px;
    height: 120px;
}
#cards .col > div {
    /*background-color: var(--ice-blue);*/
    border-radius: 24px;
    padding: 24px 16px;
/*    -webkit-user-select: none; !* Chrome, Safari *!
    -moz-user-select: none;    !* Firefox *!
    -ms-user-select: none;     !* Old Edge *!
    user-select: none;         !* Standard *!*/
}
#download{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    position: relative;
    z-index: 1;
}
#download-image{
    z-index: 1;
    width: 350px;
}
footer{
    background-color: var(--primary-color-dark);
}
footer a{
    color: var(--ice-blue);
    opacity: 1 !important;
}
#contact-info img{
    margin-inline-end: 8px;
}
@media (max-width: 476px) {
    .bg-shape{
        display: none;
    }
}
@media (max-width: 376px) {
    header{
        background-size: 550px;
    }
    #banner {
        padding: 16px 16px 0 16px !important;
    }
}
@media (max-width: 576px) {
    #download{
        flex-direction: column-reverse;
    }
    header{
        background-position: bottom;
        background-size: cover;
    }
}
@media (max-width: 768px) {
    #footer-email{
        object-fit: scale-down;
        display: inline !important;
        width: 200px;
    }
    #download-image{
        width: 250px;
    }
    header{
        height: 350px !important;
    }
    .spec-card{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
        padding: 0 !important;
        margin-bottom: 48px;
        margin-top: 0 !important;
    }
    .spec-txt {
        width: 100% !important;
        text-align: center;
        order: 2;
    }
    #banner {
        width: 95%;
        margin-right: auto;
        margin-left: auto;
    }
    #banner img{
        order: 2;
    }
    .spec-card h4{
        font-size: large !important;
    }
    #banner .spec-text h3{
        font-size: large !important;
    }
    #banner .spec-text{
        padding-top: 32px !important;
        padding-bottom: 0 !important;
        width: 100%;
    }
    #cards{
        width: 95%;
    }
    #cards .col div{
        width: 100% !important;
    }
}
/**********/
.counter {
    position: relative;
    display: inline-block;

    font-size: 24px;
    font-weight: 700;
    color: white;

    line-height: 1;
    z-index: 1;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}
.counter::before {
    content: "";
    position: absolute;
    z-index: -1;

    width: 48px;
    height: 48px;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: var(--primary-color);
    /* smoother, more organic blob */
    border-radius: 58% 42% 60% 40% / 55% 60% 40% 45%;
}
.help-img {
    border: 1px solid var(--ice-blue);
    width: 90%;
    max-width: 400px;
    border-radius: 16px;
    box-shadow:
            0 4px 6px rgba(101, 114, 141, 0.18),
            0 10px 20px rgba(101, 114, 141, 0.12);
    margin-bottom: 1.6rem;
}

/* Common fade-in settings */
.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Fade In Up */
.fade-in-up { transform: translateY(20px); }
.fade-in-up.visible { opacity: 1; transform: translateY(0); animation: fadeInUp 0.8s ease-out forwards; }
@keyframes fadeInUp { from { opacity:0; transform: translateY(20px);} to { opacity:1; transform: translateY(0);} }

/* Fade In Down */
.fade-in-down { transform: translateY(-20px); }
.fade-in-down.visible { opacity: 1; transform: translateY(0); animation: fadeInDown 0.8s ease-out forwards; }
@keyframes fadeInDown { from { opacity:0; transform: translateY(-20px);} to { opacity:1; transform: translateY(0);} }

/* Fade In Left */
.fade-in-left { transform: translateX(-20px); }
.fade-in-left.visible { opacity: 1; transform: translateX(0); animation: fadeInLeft 0.8s ease-out forwards; }
@keyframes fadeInLeft { from { opacity:0; transform: translateX(-20px);} to { opacity:1; transform: translateX(0);} }

/* Fade In Right */
.fade-in-right { transform: translateX(20px); }
.fade-in-right.visible { opacity: 1; transform: translateX(0); animation: fadeInRight 0.8s ease-out forwards; }
@keyframes fadeInRight { from { opacity:0; transform: translateX(20px);} to { opacity:1; transform: translateX(0);} }

/* Delay classes */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }

@media (max-width: 576px) {
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.2rem; }
    h3 { font-size: 1.05rem; }
    h4 { font-size: 0.95rem; }
}