@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Poppins:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body{
    margin: 0px;
    background-color: rgb(244, 243, 243);
}
.navigation-bar nav{
    width: 90%;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0% 5%;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    position: fixed;
    z-index: 1;
}
.navigation-bar nav ul li{
    display: inline-block;
    list-style: none;
    margin: 2px 20px;
}
.navigation-bar nav ul li a{
    text-decoration: none;
    color: aliceblue;
    font-size: 15px;
    position: relative;
}
.navigation-bar nav ul li a::after{
    content:'';
    background-color: #ffffff;
    width: 0;
    height:3px;
    position: absolute;
    left: 0px;
    bottom: -6px;
    transition: 0.4s ease-in-out;
}
.navigation-bar nav ul li a:hover::after{
    width:100%;
}
.navigation-bar i{
    display: none;
}
#logoup{
    height: 65px;
}
/* navbar responsive */
@media only screen and (max-width: 800px){
    .navigation-bar #logoup{
        height: 53px;
    }
    .navigation-bar i{
        display: block;
        font-size: 25px;
    }
    .navigation-bar nav ul{
        background-color: #000000f0;
        position: fixed;
        top: 0;
        right: -200px;
        z-index: 5;
        width: 120px;
        height: 100vh;
        padding-top: 50px;
        transition: right 0.4s;
    }
    .navigation-bar nav ul li{
        display:block;
        margin: 23px;
        margin-left: -10px;
        margin-top: -1%;
    }
    .navigation-bar nav ul i{
        position: absolute;
        top: 9px;
        left: 25px;
        background-color: black;
        color: white;
        margin-top: -8px;
    }
}
@media only screen and (min-width: 1000px){
    .navigation-bar i{
        display: none;
    }
}


/* home page video */
video {
    margin-top: -4%;
    height: 860px;
}

/*--------intro section------- */

.model-3d{
    margin: 5% 8% 8%;
    border-radius: 20px;
    height: 300px;
    padding: 4%;    
    display: flex;   
    justify-content: space-between;
    gap: 20px;
    background-color: rgb(255, 255, 255);
    /* box-shadow: 1px 1px 100px 0px grey; */
    box-shadow: rgba(0, 0, 0, 0.662) 0px 5px 15px 0px;
}
.leftside{
    flex-basis: 50%;
    margin-right: 40px;
}
.leftside #head{
    font-family: 'Lobster', cursive; 
    font-size: 60px;
}
.leftside #descrip{
    font-family: 'Righteous', cursive; 
}

.rightside{
    margin-top: -30px;
    margin-right: -10px;
    flex-basis: 50%;
}
model-viewer{
    width: 600px;
    height: 350px;
    overflow: visible;
    background-color: rgb(255, 170, 32);
    border-radius: 25px;
    box-shadow: 8px 8px 50px -10px rgb(140, 140, 140);
}
@media only screen and (max-width: 800px){
    body{
        overflow-x: hidden;
    }
    video {
        margin: 0%;
        height: 300px;
        /* width: 100vh; */
        width: 100%;
    }

    .model-3d{
        margin: -2% 6% 20% 6%;
        height: 600px;
        padding: 0%;    
        display: block;   
        gap: 0px;
        box-shadow: rgba(0, 0, 0, 0.662) 0px 5px 15px 0px;
    }
    .leftside{
        margin-right: 0px;
        padding: 5%;
    }
    .leftside #head{
        font-family: 'Lobster', cursive; 
        font-size: 40px;
    }

    
    .rightside{
        margin-top: 0px;
        margin-right: 0px;
        overflow: visible;
    }
    model-viewer{
        width: 100%;
        height: 228px;
        background-color: rgba(255, 169, 32, 0);
        border-radius: 20px;
        box-shadow:none;
    }
}

/* -----footer------ */
footer {
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: #000000ea;
    padding: 5px 0;
    font-size: 14px;
    width: 100%;
    display: inline-block;
    position: relative;
    margin-bottom: -2%;
}
footer table:first-child{
    float: left;
}
footer ul{
    float: right;
    list-style: none;
    padding: 8px;
}
footer ul li{
    display: inline-block;
    margin: 0 8px;
}
footer a{
    color: white;
    text-decoration: none;
}
footer i{
    transition: ease-in-out 0.2s;
}
footer i:hover{
    color:rgb(255, 55, 5);
    transform: translateY(-3px);
}
@media only screen and (max-width: 600px){
    /* footer */
    footer {
        padding: 5px 0px;
        font-size: 14px;
        width: 100%;
        display: inline-block;
    }
    footer table{
        margin-left: 12%;
    }
    td:first-child{
        display: none;
    }
    footer ul{
        margin-right: 26%;
        display: flex;
        flex-direction: row;
        gap: 20px;
    }
    footer ul li{
        margin: 0px 0px;
}
}
#back{
    position: absolute;
    width: 100%;
}
#login{
    display: fixed;
}
#logo{
    height: 68px;
    margin: -70px;
    /* padding: 0px; */
}
#contains{
    padding: 0;
    margin: 0;
}


/* Filter */
#container{
    height: 100%;
    width: 100%;
    margin: auto;
    justify-content: center;
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 25;
}
#blurr{
    width: 100%;
    height: 100%;
    position: absolute;
    background: black;
    z-index: 0;
    opacity: 30%;
}
.fill_cont{
    z-index: 45;
    /* border-radius: 20px; */
    height: 80%;
    width: 71%;
    border: 1px solid;
    border-radius: 10px;
    padding: 10px 0px 15px 0px;
    background-color: rgb(255, 255, 255);
}
.fill_controls{
    height: 10%;
    background-color: rgb(255, 255, 255);
    /* border-bottom: 1px solid black; */
}
@media only screen and (max-width: 800px){
    #container{
        height: 100%;
        width: 100%;
        margin: auto;
        justify-content: center;
        display: block;
        align-items: center;
        position: fixed;
        z-index: 25;
    }
    #blurr{
        width: 100%;
        height: 100%;
        position: absolute;
        background: black;
        z-index: 0;
        opacity: 30%;
    }
    .fill_cont{
        z-index: 45;
        /* border-radius: 20px; */
        overflow: hidden;
        height: 80%;
        width: 90%;
        border: 1px solid;
        border-radius: 10px;
        padding: 10px 0px 15px 0px;
        background-color: rgb(255, 255, 255);
    }
    .fill_controls{
        margin-bottom: 15%;
        padding-bottom: 5px;
    }
    .fill_controls input{
        width: 78%;
    }
    .fill_controls select{
        margin-left: 9%;
        width: 80%;
    }
    div.rowd{
        /* height: 20%; */
        padding: 2%;
        display: block;
        grid-template-columns: none;
        }
    div.colsd{
        width: 100%;
        height: 10vh;
        border-radius: 10px;
        border: 1px solid;
        margin-top: 7px;
    }
    div.colsd img{
        display: none;
    }
}
.rowd{
    z-index: 45;
    height: 80%;
    padding: 3%;
    display: grid;
    grid-template-columns: auto auto auto auto;
    row-gap: 20px;
    column-gap: 30px;
    background-color: rgb(255, 255, 255);
    overflow: scroll;
    overflow-x: hidden;
    /* border-radius: 30px; */
    }
.colsd{
    border: 1px solid;
    width: 15vw;
    background-color: rgb(243, 244, 244);
    height: 32vh;
    box-shadow: rgba(0, 0, 0, 0.474) 0px 5px 15px 0px;
    border-radius: 20px;
    border: 1px solid;
    overflow: hidden;
}
.colsd:hover{
    transition: all 0.2s;
    box-shadow: rgba(255, 0, 0, 0.474) 0px 5px 15px 0px;   
}

.colsd img{ 
    width: 100%;
    height: 22vh;
    border-radius: 10px 10px 0px 0px;
}
.colsd font{
    font-size: 15px;
    font-family: 'Righteous',cursive;
    margin: 13px;
}

input{
    width: 70%;
    border: 0;
    outline: none;
    background-color: rgb(209, 209, 209);
    padding: 10px;
    margin: 10px 0px 0px 30px;
    color: rgb(16, 16, 16);
    font-size: 18px;
    border-radius: 15px;
    font-family: "Poppins", sans-serif;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}
select{
    width: 13vw;
    /* height: 4vh; */
    padding: 5px;
    margin: 6px 0px 0px 19px;
    /* border: 1px black; */
    border-radius: 11px;
    font-size: 20px;
    font-family: 'Righteous';
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}

select option{
    padding: 26px;
    margin: 10px;
    /* font-style: bold; */
    font-size: 18px;
    /* background-color: red; */
    font-family: 'Righteous';
    
}

#close{
    position: absolute;
    top: 25px;
    background-color: white;
    color: black;
    /* border: 1px solid black ; */
    padding: 2px 3px;
    font-size:25px;
    cursor: pointer;
    right: 45px;
    z-index: 15;
}

a{
    text-decoration: none;
    color: black;
}

/* Loader Css */

#loader-wrapper{position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #000; z-index: 15; overflow: hidden; z-index: 100;}

.loader{width: 150px; height: 150px; border: 1px #fff solid; position: absolute; left: 50%; top: 50%; margin: -75px 0 0 -75px; border-radius: 50%;}

.loader .loading{font-size: 10px; position: absolute; width: 100%; text-align: center; line-height: 14px; font-family: 'Century Gothic', sans-serif; font-style: italic; left: 0; top: 50%; margin-top: 20px; color: #fff; font-weight: bold; text-transform: uppercase;}

.loader-circle-1{width: 138px; height: 138px; left: 5px; top: 5px; border: 1px #fff solid; border-radius: 50%; position: absolute; border-right-color: transparent;
-webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
}

.loader-circle-2{width: 126px; height: 126px; left: 5px; top: 5px; border: 1px transparent solid; border-radius: 50%; position: absolute; border-right-color: #e81512;
-webkit-animation: spin 5s linear infinite;
        animation: spin 5s linear infinite;
}

.loader .line{width: 10px; height: 2px; background: #fff; position: absolute;}

.loader .line:nth-child(1){left: 16px; top: 50%; margin-top: -1px;}

.loader .line:nth-child(2){transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); left: 33px; top: 33px;}

.loader .line:nth-child(3){top: 16px; left: 50%; width: 2px; height: 10px;}

.loader .line:nth-child(4){transform: rotate(135deg); -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); right: 33px; top: 33px;}

.loader .line:nth-child(5){right: 16px; top: 50%; margin-top: -1px;}

.loader .line:nth-child(6){transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); right: 33px; bottom: 33px; background: #e81512;}

.loader .subline{position: absolute; width: 3px; height: 2px; background: #fff;}

.loader .subline:nth-child(7){transform: rotate(22.5deg); -moz-transform: rotate(22.5deg); -webkit-transform: rotate(22.5deg); -ms-transform: rotate(22.5deg); left: 21px; top: 50px;}

.loader .subline:nth-child(8){transform: rotate(67.5deg); -moz-transform: rotate(67.5deg); -webkit-transform: rotate(67.5deg); -ms-transform: rotate(67.5deg); left: 50px; top: 21px;}

.loader .subline:nth-child(9){transform: rotate(112.5deg); -moz-transform: rotate(112.5deg); -webkit-transform: rotate(112.5deg); -ms-transform: rotate(112.5deg); right: 50px; top: 21px;}

.loader .subline:nth-child(10){transform: rotate(157.5deg); -moz-transform: rotate(157.5deg); -webkit-transform: rotate(157.5deg); -ms-transform: rotate(157.5deg); right: 21px; top: 50px;}

.loader .subline:nth-child(11){transform: rotate(22.5deg); -moz-transform: rotate(22.5deg); -webkit-transform: rotate(22.5deg); -ms-transform: rotate(22.5deg); right: 20px; bottom: 49px; background: #e81512;}

.loader .needle{width: 14px; height: 14px; border-radius: 50%; border: 1px #fff solid; position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -8px;  z-index: 1;  
-webkit-animation: pegIt 3s infinite ease-in-out;
        animation: pegIt 3s infinite ease-in-out;
}

.loader .needle:before{content: ""; width: 0; height: 0; border-style: solid; border-width: 3.5px 50px 3.5px 0; border-color: transparent #e81512 transparent transparent; position: absolute; right: 50%; top: 50%; margin: -3.5px 0 0 0; border-radius: 0 50% 50% 0;}

@keyframes pegIt {
  0% {transform: rotate(0deg);}
  16% {transform: rotate(75deg);}
  25% {transform: rotate(55deg);}
  30% {transform: rotate(90deg);}
  36% {transform: rotate(170deg);}
  42% {transform: rotate(150deg);}
  50% {transform: rotate(227deg);}
  100% {transform: rotate(0deg);}
}

@-webkit-keyframes pegIt {
  0% {-webkit-transform: rotate(0deg);}
  16% {-webkit-transform: rotate(75deg);}
  25% {-webkit-transform: rotate(55deg);}
  30% {-webkit-transform: rotate(90deg);}
  36% {-webkit-transform: rotate(170deg);}
  42% {-webkit-transform: rotate(150deg);}
  50% {-webkit-transform: rotate(227deg);}
  100% {-webkit-transform: rotate(0deg);}
}

@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
	}