* {
    margin: 0;
    /* overflow: hidden; */
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    display: none;
}

:root {
    --orange: #FFA800;
    --grey: #2A2A2A;
    --logofont: "Poppins", sans-serif;
    --logoweight: 900;
    --logostyle: normal;
    --parastyle: normal;
    --parafont: "Markazi Text", serif;
    --parasize: auto;
    --paracolor: #DDDDDD;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--grey);
    transition: all 0.5s ease-in;
    overflow: hidden;
    z-index: 10000;
    flex-direction: column;
}


.loadwheel {
    position: absolute;
    width: 10vh;
    animation: wheel .1s ease-in infinite;
}
@keyframes wheel {
    100%{
        transform: rotate(360deg);
    }
    
}

.removepreloader {
    opacity: 0%;
    visibility: none;
    z-index: -1000;
}



h1,
h2 {
    font-family: var(--logofont);
}

h1 {
    font-weight: var(--logoweight);
}

h2 {
    color: white;
    font-size: 4vmax;
    font-weight: 700;
    padding-left: 3%;

}

p {
    font-family: var(--parafont);
    color: var(--paracolor);
    font-size: 2vmax;
    padding-left: 3%;
}

.paratext-orange {
    color: var(--orange);
}


.bgcontainer {
    display: flex;
    width: 100%;
    /* height: 600vh; */

    /* background-color: var(--grey); */
}

.bgdrop-left {
    width: 2%;
    /* height: 600vh; */
    background-color: var(--orange);
}

.bgdrop {
    width: 98%;
    /* height: 600vh; */
    background-color: var(--grey);
}

#wheel {
    position: fixed;
    top: 0vh;
    left: 1.9%;
    height: 9vmax;
    width: 9vmax;
    opacity: 0.8;
}

section {
    position: relative;
    z-index: 10;
}

/* -------------home------------- */

.home {
    display: flex;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    overflow: hidden;
}

.logoup {
    display: flex;
    background-color: var(--orange);
    font-size: 7vmax;
    transform: translateY(-40%)
}

.logoup-text {
    transform: translate3d(-1.15%, 27%, 0);
    color: var(--grey);
}

.logodown {
    display: flex;
    font-size: 7vmax;
    transform: translate3d(-1%, -50%, 0)
}

.logodown-text {
    color: var(--orange);
}

.home-para {
    display: flex;
    width: 90%;
    padding-left: 2%;
    transform: translateY(-25%);
}

.home-parain {
    font-size: 4vmax;
}


/* Product section----------- */

.product {
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    /* border: 2px solid red; */
}

.headproduct {
    margin-top: 4%;
    margin-bottom: 4%;
}

.headpara {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 96%;
}

.headpara-text1 {
    font-size: 3vmax;
}

.headpara-text2 {
    font-weight: bold;
    padding-top: 5%;
    padding-bottom: 1%;
}

.headpara-text3 {
    font-weight: bold;
    padding-top: 5%;
    padding-bottom: 1%;
}

.headpara-text4 {
    font-size: 3vmax;
    margin-top: 8%;
}


/* About section----------- */

.about {
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    /* border-bottom: 2px solid red; */
}

.abouthead {
    margin-top: 4%;
    margin-bottom: 4%;
}

.aboutcontainer {
    display: flex;
    /* flex-wrap: wrap; */
    width: 100%;
    /* border: 2px solid red; */
}

.aboutleft {
    display: flex;
    width: 100%;
    border: 2px solids;
    /* border: 3px solid yellow; */
}


.aboutcontent {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.aboutcontent p {
    font-size: 2.2vmax;
    margin-bottom: 4vw;
}

.aboutright {
    display: flex;
    justify-content: center;
    width: 40%;
    box-sizing: border-box;
}

.aboutimg {
    display: flex;
    /* border: 1px solid white; */
}

.aboutimg img {
    border-radius: 1.5vw;
    height: 40vw;
}

/* -------------CONTACT------------------ */

.contact {
    height: 100vh;
    width: 100%;
}

.contacthead {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.contact-containermain {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50vh;
    width: 60%;
}

.contact-backdrop {
    width: 75%;
}

.contact-dropup {
    display: flex;
    justify-content: space-between;
}

input:-webkit-autofill {
    border-top: 2px solid var(--orange);
    background: linear-gradient(145deg, #2d2d2d, #262626);
    box-shadow: 20px 20px 60px #242424,
        -20px -20px 60px #303030;
}

.name {
    width: 20vw;
    height: 3vmax;
    font-family: var(--parafont);
    font-size: 2.5vmax;
    border-radius: 0.5vmax;
    border: none;
    outline: none;
    color: white;
    border-top: 2px solid var(--orange);
    background: linear-gradient(145deg, #2d2d2d, #262626);
    box-shadow: 20px 20px 60px #242424,
        -20px -20px 60px #303030;
}


.phone {
    height: 3.3vmax;
    width: 20vw;
    font-family: var(--parafont);
    font-size: 2.5vmax;
    border-radius: 0.5vmax;
    border: none;
    outline: none;
    color: white;
    border-top: 2px solid var(--orange);
    background: linear-gradient(145deg, #2d2d2d, #262626);
    box-shadow: 20px 20px 60px #242424,
        -20px -20px 60px #303030;
}



.contact-dropmid {
    margin-top: 1vmax;
    width: 100%;
}

.comment {
    height: 100%;
    height: 25vh;
    width: 99%;
    font-family: var(--parafont);
    font-size: 2.5vmax;
    border-radius: 0.5vmax;
    border: none;
    outline: none;
    color: white;
    border-top: 2px solid var(--orange);
    background: linear-gradient(145deg, #2d2d2d, #262626);
    box-shadow: 20px 20px 60px #242424,
        -20px -20px 60px #303030;
}


.contact-dropdown {
    display: flex;
    justify-content: center;
    margin-top: 1vmax;
    width: 100%;
}

.submit {
    font-family: var(--logofont);
    height: 3vmax;
    width: 15vmax;
    text-decoration: none;
    color: white;
    font-size: 1.5vmax;
    background-color: transparent;
    border: 2px solid var(--orange);
    border-radius: 2vmax;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}

.submit:hover {
    box-shadow: 1px 1px 8px var(--orange);
}

/* -----------------footer-------------------- */

.footer {
    /* display: flex; */
    flex-direction: column;
    position: absolute;
    bottom: 0%;
    left: 0;
    height: 18vh;
    width: 100%;
}

.footer1 {
    display: flex;
    height: 8vh;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.footer1-text {
    font-size: 2vmax;
    color: var(--orange);
    font-family: var(--logofont);
    font-weight: var(--logoweight);
    transform: translateY(1.3vmax);
}

.footer2 {
    display: flex;
    height: 10vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: var(--orange);
}

.footer2-text {
    font-size: 2vmax;
    color: var(--grey);
    font-family: var(--logofont);
    font-weight: var(--logoweight);
}

/* -------------MEDIA QUERY --------------*/

@media screen and (max-width:450px) {

    #wheel {
        position: fixed;
        top: 0vh;
        left: 1.9%;
        height: 8vmax;
        width: 8vmax;
        opacity: 0.8;
    }

    /* --------------------home---------------- */
    .logoup {
        display: flex;
        background-color: var(--orange);
        font-size: 6.5vmax;
        transform: translateY(-42%)
    }

    .logoup-text {
        transform: translate3d(-1.15%, 28%, 0);
        color: var(--grey);
    }

    .logodown {
        font-size: 6.5vmax;
        transform: translate3d(-1.5%, -50%, 0)
    }

    .home-para {
        transform: translateY(25%);
    }

    /* ----------CONTACT---------- */

    .contact-containermain {
        height: 70vh;
        width: 100%;
    }

    .contact-backdrop {
        width: 90%;
    }

    .name,
    .phone {
        width: 40vw;
    }

    .name,
    .phone {
        height: 6vh;
        width: 40vw;
        font-size: 4.2vmax;
    }
    
    .comment{
        font-size: 4.2vmax;
        
    }
    

    .submit {
        font-size: 2vmax;
        height: 4vmax;
        width: 18vmax;
    }


    /* -----------FOOTER------------ */

    .footer1-text {
        font-size: 3.2vw;
        /* transform: translateY(3.3max);
        text-align: center; */
    }

    .footer2-text {
        font-size: 2vmax;
        text-align: center;
    }

}


@media screen and (max-height:915px){
h1,
h2 {
    font-family: var(--logofont);
}

h1 {
    font-weight: var(--logoweight);
}

h2 {
    color: white;
    font-size: 4vmax;
    font-weight: 700;
    padding-left: 3%;

}


p {
    font-family: var(--parafont);
    color: var(--paracolor);
    /* font-size: 3vmax; */
    padding-left: 3%;
}

}

.messagebox{
    height: 50px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    color: greenyellow;
    border: 2px solid #FFA800;
    background-color: #2A2A2A;
    opacity: 0;
    font-size:2rem;
    margin:auto;
    position: fixed;
    font-family: var(--parafont);
}
.msgcontainer{
    position: fixed;
    display: flex;
    width: 100%;
    top:20;
    margin-top:20px;
    justify-content: center;
    z-index: 100;

}