body, html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;

}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* STROKE Button styling (solid colour) */
.custombutton {

min-width: max-content;
    #buttonContent {


        #beforeHover {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

        }

        #afterHover {
            position: absolute;

            top: 35px;
            display: flex;
            cursor: pointer;
            align-items: center;
            justify-content: center;

        }
    }
}


#buttonContent:hover #beforeHover {
    transform: translateY(-35px);
    transition: .2s all ease-in-out;
}

#buttonContent:hover #afterHover {
    top: 0px;
    transition: .3s all ease-in-out;
}


#section5_WhyChooseUs {
    width: 100vw;
    height: 100vh;
    padding: 0px 9%;
    margin-top: 150px;
    color: var(--white);
    /* background: url("../assets/backgroundImages/linesPattern-01.svg");
    background-size: contain;
    background-repeat: no-repeat; */
>h2{
    font-family: primary_font !important;
    font-size: 4em;
    margin: 0px;
    color: var(--secondary-darkmode);
}
    h3 {
        margin-top: 40px;
        margin-bottom: 9px;
        font-family: secondary_mid;
    }

    .WhyChooseUsCardContainer {
        display: flex;
        flex-wrap: nowrap;

        .WhyChooseCard {
            border: var(--lowtransparent-mid-darkmode) solid 1px;
            display: flex;
            padding: 8px;
            border-radius: 15px;
            background-color: var(--min-White-Transparent);
            margin: 5px;
            align-items: center;
            height: max-content;

            >img {

                opacity: 45%;

                margin: 9px 10px 9px 4px;

                font-size: 40pt;
            }

            .CardContent {
                display: flex;
                flex-direction: column;
                justify-content: center;



                >h4 {
                    font-family: secondary_mid;
                }

                >p {
                    display: none;
                    font-family: secondary_reg;
                    font-size: 10pt;
                    opacity: 0;
                }
            }


        }

        .WhyChooseCard:hover {
            z-index: 999;
        }
    }
}




#section6_animatedScroller {
    width: 100vw;
    height: 100vh;

    margin-top: 150px;


    .imageScrollerParent {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;

        position: relative;

       
        .scrollAnimationHeader {
            position: absolute;
            text-align: center;
            width: 100%;
            font-size: 40pt;
            opacity: 0;
            z-index: 5;
        }

       
    }

}
.hide-scrollbar{
    -ms-overflow-style: none;
}
.hide-scrollbar{
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar{
    background-color: transparent;
    display: none;
}




  #afterReveal {
    background-clip: text;
    -webkit-background-clip: text;
    /* For Safari */
    background-image: url('./src/assets/images/LandingPage-website-Laptop-Image.jpg');
    /* Set the same background image */
    /*  background-size: 100vw 100vh; /* Ensure the background image fills the viewport */


  }

  .loading-circle {

  animation: spin .8s linear infinite; /* Rotates infinitely */
}

/* Keyframes for rotation */
@keyframes spin {
  from {
    transform: rotate(0deg); /* Start at 0 degrees */
  }
  to {
    transform: rotate(360deg); /* End at 360 degrees */
  }
}