*::selection{
    background-color: rgba(255,255,255,0.7);
    color: black;
}
*{
    color: white;
}

.white-trans-10{background: rgba(255,255,255,1) !important}
.white-trans-9{background: rgba(255,255,255,0.9) !important}
.white-trans-8{background: rgba(255,255,255,0.8) !important}
.white-trans-7{background: rgba(255,255,255,0.7) !important}
.white-trans-6{background: rgba(255,255,255,0.6) !important}
.white-trans-5{background: rgba(255,255,255,0.5) !important}
.white-trans-4{background: rgba(255,255,255,0.4) !important}
.white-trans-3{background: rgba(255,255,255,0.3) !important}
.white-trans-2{background: rgba(255,255,255,0.2) !important}
.white-trans-1{background: rgba(255,255,255,0.1) !important}
.white-trans-0{background: rgba(255,255,255,0) !important}

.font-10{font-size:10% !important}
.font-20{font-size:20% !important}
.font-30{font-size:30% !important}
.font-40{font-size:40% !important}
.font-50{font-size:50% !important}
.font-60{font-size:60% !important}
.font-70{font-size:70% !important}
.font-80{font-size:80% !important}
.font-90{font-size:90% !important}
.font-100{font-size:100% !important}
.font-110{font-size:110% !important}
.font-120{font-size:120% !important}
.font-130{font-size:130% !important}
.font-140{font-size:140% !important}
.font-150{font-size:150% !important}
.font-160{font-size:160% !important}
.font-170{font-size:170% !important}
.font-180{font-size:180% !important}
.font-190{font-size:190% !important}
.font-200{font-size:200% !important}
.font-210{font-size:210% !important}
.font-220{font-size:220% !important}
.font-230{font-size:230% !important}
.font-240{font-size:240% !important}
.font-250{font-size:250% !important}
.font-260{font-size:260% !important}
.font-270{font-size:270% !important}
.font-280{font-size:280% !important}
.font-290{font-size:290% !important}
.font-300{font-size:300% !important}
.font-310{font-size:310% !important}
.font-320{font-size:320% !important}
.font-330{font-size:330% !important}
.font-340{font-size:340% !important}
.font-350{font-size:350% !important}

#init-pre-loader{
    background : linear-gradient(180deg, rgb(8, 8, 46), rgb(47, 2, 2));
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index:213321321;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading-screen-logo{
    animation: innout 3s infinite ease-in-out;
    opacity: 0;
}

#particles-js{
    height:100vh; 
    width: 100%; 
    margin-top:-100vh; 
    z-index: 2000;
}


@keyframes innout {
    0%{opacity: .4} 
    40%{opacity: 1} 
    100%{opacity: .4}    
}

@keyframes outToDis{
    0%{
        opacity: 1;
    }
    99%{
        opacity: 0;
    }
    100%{
        opacity: 0;
        display: none;
    }
}

img::selection{
    background-color: rgba(168, 0, 0, 0.539) !important;
}

a{
    cursor: pointer;
    font-family: calibri;
}

.line-br{
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
}

.bg-soft-light{
    background: rgba(255,255,255,0.6)
}

p{
    font-weight: 50;
    font-size: 90%;
}


.padding-container p{
    color: rgba(255,255,255,0.7); font-size:80%; margin:0;padding:0; padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.5)
}
.padding-container a{
    color: rgba(255,255,255,0.7);
}
.padding-container .active{
    color: white !important;
}

html, 
body{
    background-color: black;
    overflow-x:hidden;
    overflow-y: hidden;
}

header{
    background: transparent;
    z-index: 501;
    position: fixed;
    top:0;
    left: 0;
}

menu ul{
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}
menu ul li{
    color: white;
}

menu ul li a{
    font-weight: 100;
    color: white;
    margin: 0 20px;
    padding-bottom:2px;
    margin-top:3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
    transition: .2s;
}

menu ul li .active{
    border-bottom: 1px solid rgba(255,255,255,1);
}

menu ul li a:hover{
    color: rgb(255, 114, 114);
    border-bottom: 1px solid rgba(255, 255, 255, 1);
}



#mobile-menu-toggle{
    width: 25px;
    cursor: pointer;
    display: none;
    margin-left:15px;
}

.mobile-bars{
    width: 100%; 
    height:1px; 
    background:#FFF;
}

#mobile-menu{
    height: 100vh;
    position: fixed;
    top: 0;
    background: black;
    width: 300px;
    z-index: 500;
    transition:.2s;
    right: 0;
    right: -300px;
    display: none;
}

.cursor-pointer
{
    cursor: pointer !important;
}

.portfolio-object{
    transition: .2s;
}
.portfolio-object:hover{
     transform: scale(1.05);
}

#mobile-menu a{
    color: white;
    text-decoration: none;
}

.inner-menu{
    margin-top:150px;
    color: white;
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    font-weight: 100;
    text-align: center;
    font-size: 125%;
}
.inner-menu a{
    margin-bottom: 15px;
}

.inner-menu .menu-socials{
    text-align: center;
}

.menu-socials a{
    margin: 0 10px;
    color: white;
}

.bg-vid{
    height:100%; 
    aspect-ratio: 16/9;
    object-fit: cover;
}

.bg-overlay{
    width:100%;
    height:100%;
    background:linear-gradient(180deg, rgba(7, 1, 27, 0.6), rgba(52, 6, 6, 0.4));
    position: fixed;
    top: 0%;
}

.more-vista{
    width: calc( 70% - 20px );
    left: 15%;
    height: 87vh;
    top:13vh;
    position: absolute;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0 20px;
}

/* width */
.more-vista::-webkit-scrollbar {
    width: 2px;
}
  
/* Track */
.more-vista::-webkit-scrollbar-track {
    background: #ffffff00;
}
  
/* Handle */
.more-vista::-webkit-scrollbar-thumb {
    /* background: rgba(255, 255, 255, 0); */
    background: rgba(255, 255, 255, 0.5);
    border-radius:100px ;
}
  
/* Handle on hover */
.more-vista::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.75);
}

.main-heading{
    font-weight: 100;
    font-size:350%;
    letter-spacing: 1px;
    word-spacing: 1px;
}
#main-header span{
    animation: appearo .2s forwards;
    opacity: 0;
}
#main-header span:nth-child(1){animation-delay: .1s}
#main-header span:nth-child(2){animation-delay: .2s}
#main-header span:nth-child(3){animation-delay: .4s}
#main-header span:nth-child(4){animation-delay: .5s}
#main-header span:nth-child(5){animation-delay: .6s}
#main-header span:nth-child(6){animation-delay: .8s}
#main-header span:nth-child(7){animation-delay: .9s}
#main-header span:nth-child(8){animation-delay: 1s}
#main-header span:nth-child(9){animation-delay: 1.2s}
#main-header span:nth-child(10){animation-delay: 1.3s}

@keyframes appearo {
    0%{opacity: 0}
    100%{opacity: 1}
}

.header_blinker{
    animation: blink .8s infinite !important;
    animation-delay: 1.4s !important;
    color: rgb(255, 114, 114);
}

.col-hov:hover{
    color: rgb(255, 114, 114) !important;
}
.col-hovi{
    color: rgb(255, 114, 114) !important;
}
.col-hovi:hover{
    color: rgb(231, 40, 40) !important;
}


.bannero{
    font-weight: 100 !important; 
    border-radius: 500px !important;
}



@keyframes blink {
    0%{opacity:1}
    50%{opacity:0}
    100%{opacity:1}
}



.main-para{
    font-weight: 100;
    letter-spacing: 1px;
    color: rgb(229, 229, 229);
    opacity:0;
    animation: forw .9s forwards;
    animation-delay: .95;
    opacity:0;
}
@keyframes forw {
    0%{
        /* padding-top:-22px; */
        opacity:0;
    }
    100%{
        /* padding-top:0px; */
        opacity:1;
    }
}

.font-aura{
    font-weight: 100;
}
.color-morph{
    color: white;
}
.color-morph:hover{
    color: white;
}
.color-morph:hover h1{
    color: rgb(180, 255, 255);
}

.HIG{
    font-weight: 100;
}

.aboutmeheading{
    font-weight: 100;
    animation: fadeInwards .45s;
}

.fadeInwards{
    opacity: 0;
    animation: fadeInwards .5s forwards;
}
.delay-1{animation-delay: .1s}
.delay-2{animation-delay: .2s}
.delay-3{animation-delay: .3s}
.delay-4{animation-delay: .4s}
.delay-5{animation-delay: .5s}
.delay-6{animation-delay: .6s}
.delay-7{animation-delay: .7s}
.delay-8{animation-delay: .8s}
.delay-9{animation-delay: .9s}

.delay-10{animation-delay: 1.0s}
.delay-11{animation-delay: 1.1s}
.delay-12{animation-delay: 1.2s}
.delay-13{animation-delay: 1.3s}
.delay-14{animation-delay: 1.4s}
.delay-15{animation-delay: 1.5s}
.delay-16{animation-delay: 1.6s}
.delay-17{animation-delay: 1.7s}
.delay-18{animation-delay: 1.8s}
.delay-19{animation-delay: 1.9s}



.my-text{
    margin-bottom:20px; 
    background: transparent !important;
    color: #FFF !important;
    resize: none;
}
.my-text:focus{
    background-color: transparent !important;
    outline: none !important;
}


.spinny-loader{
    width: 70px;
    animation: spinny 7.5s infinite;
}

@keyframes spinny {
    0%{
        transform: rotate(0deg);
        opacity: 1;
    }
    10%{
        opacity: .7;
    }
    20%{
        opacity: 1;
    }
    30%{
        opacity: .7;
    }
    40%{
        opacity: 1;
    }
    50%{
        transform: rotate(180deg);
        opacity: .7;
    }
    60%{
        opacity: 1;
    }
    70%{
        opacity: .7;
    }
    80%{
        opacity: 1;
    }
    90%{
        opacity: .7;
    }
    100%{
        transform: rotate(360deg);
        opacity: 1;
    }
}

.preLoader-main{
    height: 80vh !important;
}
.preLoader{
    height: 100% !important;
}
.preLoader-inner{
    flex-direction: column !important;
}
.loaderText{
    color: white; 
    margin-top:10px; 
    font-size: 80%;
}

.error-page{
    height: calc( 100vh - 200px ); 
    width:100%; 
    display: flex; 
    align-items: center
}

.footer-final{
    color: rgba(255,255,255,0.7);
}

@media screen and (max-width: 1500px){
    .more-vista{
        width: 90%;
        left: 5%;
    }
}

@media screen and (max-width:780px){
    #mobile-menu-toggle,
    #mobile-menu{
        display: block
    }

    #main-menu{
        display: none;
    }
    
    .portfolio-object:hover{
        transform: scale(1);
    }
}

@keyframes fadeInwards {
    0%{opacity: 0}
    100%{opacity: 1}
}

.swal-modal {
    background:linear-gradient(180deg, #01112be7, #2e0101e0);
  }
  .swal-text,.swal-title {
    color: white
  }
  .swal-button {
    padding: 7px 19px;
    border-radius: 2px;
    background-color: transparent;
    font-size: 12px;
    border: 1px solid #FFF;
    color: white;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
    transition: .2s;
  }
  .swal-button:hover {
    background: #ffffff;
    color: black;
  }
  .swal-icon--success::before,
  .swal-icon--success::after,
  .swal-icon--success__hide-corners{
    background: transparent !important;
    color: transparent !important;
    border-color: transparent !important;
    outline-color: transparent !important;
  }

  .newsletter-container{
    width: 100%; 
    border-bottom:.5px solid #ccccccab; 
    display: flex; 
    justify-content: center
  }

  .newsletter-s{
    width: 540px;
    height:200px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .newsletter-s .innert{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  
  .newsletter-s .innert input{
    background:transparent;
    border: none;
    outline: none;
    border-bottom: 1px solid white;
    width: calc(100% - 88px);
    height: 35px;
  }
  .newsletter-s .innert button{
    background:transparent;
    border: none;
    outline: none;
    border: 1px solid white;
    width: 80px;
    height: 35px;
    transition: .2s;
    font-size: 80%;
  }
  .newsletter-s .innert button:hover{
    background-color: white;
    color: black;
  }

  @media screen and (max-width: 600px){
    .newsletter-s{
        width: 90%;
    }
  }

  .default-a{
    color: unset;
    text-decoration: none;
  }

  .blogSec{
    transition: .25s;
  }
  .blogSec:hover{
    transform: scale(1.03);
  }

  .blogImage{
    width:100%;
    height:200px;
    background-size:cover;
    background-position:center;
    margin-bottom:15px;
  }
  .blogContent .paragraph{
    font-size:80%;
  }
  .blogContent .author{
    font-size:60%;
  }

  .blog-container-inner{
    width: 100%; min-height: 400px; background: transparent; display: flex; justify-content: center; align-items: center;
    margin-top:50px;
  }