:root {
    --hero-bg-color: #000007;
    --section-6-bg-image: url("../images/bg-1.jpg");
    --section-1-bg-color: #eef4ed;
    --section-2-bg-color: #ffffff;
    --section-3-bg-color: #111117;
    --section-4-bg-color: #eef4ed;
    --section-5-bg-color: #ffffff;
    --section-6-bg-color: #111117;
    --section-7-bg-color: #ffffff;
    --switches-bg-color: goldenrod;
    --switches-label-color: #ffffff;
    --switch-bg-color: #ffffff;
    --switch-text-color: goldenrod ;
}
.hide{
    display: none !important;
}
.hide-btn{    display: none !important; }
@media (max-width: 1199px){
    .hide-btn{ display: block !important; }
}


section.featured:after{
    background-image: url("../images/bullets.png");
}
input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

* {
    box-sizing: border-box;
}

/* container for all of the switch elements
    - adjust "width" to fit the content accordingly
*/
.switches-container {
    width: 16rem;
    position: relative;
    display: flex;
    padding: 0;
    background: var(--switches-label-color);
    line-height: 3rem;
    border-radius: 3rem;
    margin-left: auto;
    margin-right: auto;
}

/* input (radio) for toggling. hidden - use labels for clicking on */
.switches-container input {
    visibility: hidden;
    position: absolute;
    top: 0;
}

/* labels for the input (radio) boxes - something to click on */
.switches-container label {
    width: 50%;
    padding: 0;
    margin: 0;
    text-align: center;
    cursor: pointer;
    color: var(--primary-color);
}

/* switch highlighters wrapper (sliding left / right)
    - need wrapper to enable the even margins around the highlight box
*/
.switch-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    padding: 0.15rem;
    z-index: 3;
    transition: transform .5s cubic-bezier(.77, 0, .175, 1);
    /* transition: transform 1s; */
}

/* switch box highlighter */
.switch {
    border-radius: 3rem;
    background: rgb(118,184,42);
    background: linear-gradient(90deg, rgba(118,184,42,1) 0%, rgba(49,176,137,1) 100%);
    height: 100%;
}

/* switch box labels
    - default setup
    - toggle afterwards based on radio:checked status
*/
.switch div {
    width: 100%;
    text-align: center;
    opacity: 0;
    display: block;
    color: var(--switch-bg-color) ;
    transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
    will-change: opacity;
    position: absolute;
    top: 0;
    left: 0;
}

/* slide the switch box from right to left */
.switches-container input:nth-of-type(1):checked~.switch-wrapper {
    transform: translateX(0%);
}

/* slide the switch box from left to right */
.switches-container input:nth-of-type(2):checked~.switch-wrapper {
    transform: translateX(100%);
}

/* toggle the switch box labels - first checkbox:checked - show first switch div */
.switches-container input:nth-of-type(1):checked~.switch-wrapper .switch div:nth-of-type(1) {
    opacity: 1;
}

/* toggle the switch box labels - second checkbox:checked - show second switch div */
.switches-container input:nth-of-type(2):checked~.switch-wrapper .switch div:nth-of-type(2) {
    opacity: 1;
}



[tooltip] {
    position: relative;
}
[tooltip]::before,
[tooltip]::after {
    text-transform: none;
    font-size: 0.9em;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: block;
    opacity: 1;
}
[tooltip]::before {
    content: "";
    border: 5px solid transparent;
    z-index: 1;
}
[tooltip]::after {
    content: attr(tooltip);
    font-family: "Segoe UI", Arial, sans-serif;
    text-align: center;
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.5em 1em;
    border-radius: 5px;
    box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
    background: #020204;
    color: #fff;
    z-index: 1;
}
[tooltip]:hover::before,
[tooltip]:hover::after {
    display: block;
}
[tooltip=""]::before,
[tooltip=""]::after {
    display: none !important;
}


[tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: #020204;
}
[tooltip][flow^="down"]::after {
    top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, 0.5em);
}

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after{
    animation: tooltips-vert 300ms ease-out forwards;
}
@-moz-keyframes tooltips-vert {
    to {
        opacity: 0.9;
        transform: translate(-50%, 0);
    }
}
@-webkit-keyframes tooltips-vert {
    to {
        opacity: 0.9;
        transform: translate(-50%, 0);
    }
}
@-o-keyframes tooltips-vert {
    to {
        opacity: 0.9;
        transform: translate(-50%, 0);
    }
}
@keyframes tooltips-vert {
    to {
        opacity: 0.9;
        transform: translate(-50%, 0);
    }
}
@-moz-keyframes tooltips-horz {
    to {
        opacity: 0.9;
        transform: translate(0, -50%);
    }
}
@-webkit-keyframes tooltips-horz {
    to {
        opacity: 0.9;
        transform: translate(0, -50%);
    }
}
@-o-keyframes tooltips-horz {
    to {
        opacity: 0.9;
        transform: translate(0, -50%);
    }
}
@keyframes tooltips-horz {
    to {
        opacity: 0.9;
        transform: translate(0, -50%);
    }
}