@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    
    --default-theme :#000000;
    --special-font-style : 'Lato', sans-serif;
    --heading-fs-bold : 'Montserrat', sans-serif;
    --darktheme-f-clr : #fff;
    /* edit in btn clr */
    --btn-clr : #091540;        
    
}

#canva1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
    height: 50%;
    width: 50%;
    cursor: pointer;
}

#canva {
    position: relative;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,#000,rgb(15, 34, 104),#000)
}

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

.videoupload {
    border: 3px solid #2B76D8;
    border-style: dashed;
    border-radius: 10px;
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.videoupload i {
    color: grey;
    font-size: 10rem;
    animation: updown 3s infinite;
    /* animation-duration: 1s;
    animation-iteration-count: infinite; */

}

.videoupload p {
    color: grey;
    padding: 2%;
    font-size: large;
    text-align: justify;
}


@keyframes updown {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

.btns{
    float: right;
    margin: 1.5% 1%;
    /* edit in color */
    color: white;       
    background-color: var(--btn-clr);
    /* edit in paading */
    padding: 5% 4%;
    border: none;
    box-shadow: 0 0px 3px 0.5px #3b3b3b;
    border-radius: 5px;
    font-family: var(--heading-fs-bold);
    font-weight: 400;
}

.btns:hover {
    /* edit in bg-col */
    background-color: #000000;
    color: white;
    font-weight: 800;
    box-shadow: rgba(0, 0, 0, 0.44) 0px 5px 8px;
    cursor: pointer;
}


.main,.overlay{
    background-color: var(--default-theme);
}

.overlay {
    margin-top: -8px;
    padding-top: 5%;
    color: #fff;
}

/* Navbar Styling */

/* Toggler bar animation */

.navbar-toggler{
    /* Sizing and positioning the box of toogler button */
    width: 35px;
    height: 35px;
    position: relative;
    top: 8px;
    right: 5px;
}

#togoogle,
#togoogle:focus,
#togoogle:active,
.navbar-toggler-icon:focus{
    /* This is for to erase outside border  and shadow when clicked which is deafaulted by bootstrap */
    outline: none;
    box-shadow: none;
    border: 0px;
    position: relative;
}

.navbar-toggler span{
    /* to clear the if there is a default margin and padding for the lines inside */
    margin: 0;
    padding: 0;
}

.toggler-icon{
    /* The lines inside the toogler button */
    display: block;
    height:3px;
    width:100%; /*means 100% width of the box size of toogler */
    background: #1C9D9D;
    border-radius: 1px;
    opacity: 1;
    left:0;
    transition: .4s ease-in-out; /*Transition speed of animation turning into cross mark */
    position:absolute;
}

.middle-bar{
    margin-top: 0px;
}

       /* when navigation is clicked */
.navbar-toggler .top-bar{
    top: inherit;
    transform: rotate(135deg);
}
.navbar-toggler .middle-bar{
    opacity: 0;
    top: inherit;
    filter: alpha(opacity=0); /*it will smoothly turns the opacity from 1 to 0 with animation */
}
.navbar-toggler .bottom-bar{
    top: inherit;
    transform: rotate(-135deg);
}

/* state when navbar will regain its original form by cliking cross */
.navbar-toggler.collapsed .top-bar{
    position: absolute;
    top:0;
    transform: rotate(0deg);
}

.navbar-toggler.collapsed .middle-bar{
    position: absolute;
    top:10px;
    opacity:1;
    filter:alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar{
    position: absolute;
    top:20px;
    transform: rotate(0deg);
}

.navbar-custom{
    background-color: #000000;
    padding-block: 5px;
}

.navbar-custom .navbar-brand{
    font-family: var(--heading-fs-bold);
    font-size: 2.3rem;
}

.navbar-custom .nav-link{
    font-family: var(--special-font-style);
    font-size: 1.2rem;
    font-weight: 550;
}

a.navbar-brand {
    margin-left: 5%;
}

div#navbarNav {
    padding-inline-end: 8%;
}

a.nav-link {
    margin-inline: 10px;
}

.navbar .container-fluid {
    padding-bottom: 5px;
}

@media (width < 992px){
    ul.navbar-nav.ms-auto {
        text-align: right;
    }
}
/* End of navbar styling */


/* Upload Page Styles */

.upload{
    background-color: var(--default-theme);
    color: var(--darktheme-f-clr);
}

.main-grid {
    display: grid;
    grid-template-columns: 65% auto;
}

.upload .img{
    display: flex;
    justify-content: space-around;
}

.upload .face{
    padding: 6.5%;
}

.upload .info{
    font-size: 1.8rem;
}

.upload .content {
    padding: 8.5%;
    display: grid;
    align-content:stretch;
}

.upload-file{
    padding: 5.5% 8%;
    width: 100%;
}

@media (width < 1340px){
    
    .upload .face {
        height: 55vh;
        width: min-content;
    }

    .upload .info {
        font-size: 1.45rem;
    }

}

@media (width < 1040px){
    .upload .face {
       height: 45vh;
       width: 100%;
    }

    div#navbarNav {
        padding-inline-end: 0;
    }
}

@media (width < 850px){

    div#navbarNav {
        padding-inline-end: 0;
    }

    .upload .face {
        display: none;
        visibility: hidden;
    }

    .main-grid {
        display: grid;
        grid-template-columns: 100% auto;
    }

    .upload .content {
        text-align: left;
        padding: 8.5%;
        grid-auto-flow:dense;
    }

}
/* End of Upload page style */


