@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap');
*{
     box-sizing: border-box;
}


body{
	background-color: #000000 !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

#jssor_1{
    border: 3px solid #f39c12;
}



/********navbar starts*********/



.headings{
    text-align: center;
    padding: 15px;
    padding-top: 20px;  
    margin-top: 20px;
}



nav{
    height: 5rem;
    width: 100vw;
    background:#000;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    position: fixed !important;
top: 0 !important;
    z-index: 10;

}

/*Styling logo*/
.logo{
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo img {
    height: 75px;
    width: 130px;
    border-radius: 50%;
    margin-left: 40px;
}

/*Styling Links*/
.nav-links{
    display: flex;
    list-style: none; 
    width: 88vw;
    padding: 0 0.7vw;
    justify-content: space-evenly;
    align-items: center;
    text-transform: uppercase;
}
.nav-links li a{
    text-decoration: none;
    margin: 0 0.7vw;
    font-family: 'M PLUS Rounded 1c', sans-serif;
     color: #f39c12;
}
.nav-links li a:hover {

    border-top: 2px solid white;
    border-bottom: 2px solid white;
    padding: 5px;
   
}
.nav-links li {
    position: relative;
}
.nav-links li a::before {
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    position: absolute;
    transition: all ease-in-out 250ms;
    margin: 0 0 0 10%;
}
.nav-links li a:hover::before{
    width: 80%;
}

/*Styling Buttons*/
.login-button{
    background-color: transparent;
    border: 1.5px solid #f2f5f7;
    border-radius: 2em;
    padding: 0.6rem 0.8rem;
    margin-left: 2vw;
    font-size: 1rem;
    cursor: pointer;

}
.login-button:hover {
    color: #131418;
    background-color: #f2f5f7;
    border:1.5px solid #f2f5f7;
    transition: all ease-in-out 350ms;
}
.join-button{
    color: #131418;
    background-color: #61DAFB;
    border: 1.5px solid #61DAFB;
    border-radius: 2em;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    cursor: pointer;
}
.join-button:hover {
    color: #f2f5f7;
    background-color: transparent;
    border:1.5px solid #f2f5f7;
    transition: all ease-in-out 350ms;
}

/*Styling Hamburger Icon*/
.hamburger div{
    width: 30px;
    height:3px;
    background:  #FFA500;
    margin: 5px;
    transition: all 0.3s ease;
}
.hamburger{
    display: none;
}

/*Stying for small screens*/
@media screen and (max-width: 800px){
    nav{
        position: fixed;
        z-index: 3;
    }
    .hamburger{
        display:block;
        position: absolute;
        cursor: pointer;
        right: 5%;
        top: 50%;
        transform: translate(-5%, -50%);
        z-index: 2;
        transition: all 0.7s ease;
    }
    .nav-links{
        position: fixed;
        background: #000;
        height: 100vh;
        width: 100%;
        flex-direction: column;
        clip-path: circle(50px at 90% -20%);
        -webkit-clip-path: circle(50px at 90% -10%);
        transition: all 1s ease-out;
        pointer-events: none;
    }
    .nav-links.open{
        clip-path: circle(1000px at 90% -10%);
        -webkit-clip-path: circle(1000px at 90% -10%);
        pointer-events: all;
    }
    .nav-links li{
        opacity: 0;
    }
    .nav-links li:nth-child(1){
        transition: all 0.5s ease 0.2s;
    }
    .nav-links li:nth-child(2){
        transition: all 0.5s ease 0.4s;
    }
    .nav-links li:nth-child(3){
        transition: all 0.5s ease 0.6s;
    }
    .nav-links li:nth-child(4){
        transition: all 0.5s ease 0.7s;
    }
    .nav-links li:nth-child(5){
        transition: all 0.5s ease 0.8s;
    }
    li.fade{
        opacity: 1;
    }
}
/*Animating Hamburger Icon on Click*/
.toggle .line1{
    transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
    transition: all 0.7s ease;
    width:0;
}
.toggle .line3{
    transform: rotate(45deg) translate(-5px,-6px);
}


/********navbar ends*********/



/****header starts here************/
.v-header{
	width: 100vw;
  height:100vh;
  display:flex;
  align-items:center;
  color:#fff;
}

.container{
	width: 100vw !important;
}

.fullscreen-video-wrap{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  overflow:hidden;
}

.fullscreen-video-wrap video{
  min-height:100%;
  min-width:100%;
}

.header-overlay{
  height:100vh;
  position: absolute;
  top:0;
  left:0;
  width:100vw;
  z-index:1;
  background:#000;
  opacity:0.1;

}

.header-content{
  z-index:2;
  color: #FFA500;
}

.header-content h1{
  font-size:80px;
  margin-bottom:0;
  color: #FFA500;
}

.header-content p{
  font-size:1.5rem;
  display:block;
  padding-bottom:2rem;
}
.header-content img{
    width: 500px;
    height: 350px;
    opacity: 1.5;
    background:  -webkit-linear-gradient(bottom, #000,transparent);
    
}

@media(max-width: 738px){
    .header-content img{
        max-width: 100%;
        height: auto;
       
    }
}

@media(max-width:960px){
  .container{
    padding-right:3rem;
    padding-left:3rem;
  }
}


/****header ends here************/










































/********footer starts*********/






/*section .section-title {
    text-align: center;
    color: #007b5e;
    margin-bottom: 50px;
    text-transform: uppercase;
}*/
#footer {
	
	padding-top: 2em;
	padding-bottom: 2em;
	margin-top: 6em !important;
    background: #0A0A0A !important;
	margin-bottom: 0 !important;
  
}
#footer h5{
    padding-left: 10px;
    border-left: 3px solid #eeeeee;
    padding-bottom: 6px;
    margin-bottom: 6px;
    color:#FFA500;
}
#footer a {
    color: white !important;
    text-decoration: none !important;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
#sendus{
	margin: 0 !important;
    color:  white;
    font-size: 25px;
}
#sendus1{
	margin: 0 !important;
    color:  white;
    font-size: 18px;
}
#footer ul.social li{
    padding: 6px 0;
	margin-left: 0.5EM;
	margin-right: 0.5em;
}
#footer ul.social li:hover{
    padding: 6px 0;
	margin-left: 0.5EM;
	margin-right: 0.5em;
	color:#f39c12;
}
#footer ul.social li a i {
    margin-right: 5px;
    font-size:25px;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    transition: .5s all ease;
}
#footer ul.social li:hover a i {
    font-size:30px;
    margin-top:-10px;
}
#sendus:hover{
    color: #f39c12;
}
#footer ul.social li a,
#footer ul.quick-links li a{
    color:#FFA500;
}
#footer ul.social li a:hover{
    color:  #f39c12;
}

#footer ul.quick-links li{
    padding: 3px 0;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    transition: .5s all ease;
}
#footer ul.quick-links li:hover{
    padding: 3px 0;
    margin-left:5px;
    font-weight:700;
}
#footer ul.quick-links li a i{
    margin-right: 5px;
}
#footer ul.quick-links li:hover a i {
    font-weight: 700;
}

@media (max-width:767px){
    #footer h5 {
    padding-left: 0;
    border-left: transparent;
    padding-bottom: 0px;
    margin-bottom: 10px;
}
}




/********footer ends*********/



body{
	background-color: #000000;
	font-family: Manjari,sans-serif !important;
	text-align: center;
}

.title{
	margin-top: 1em;
	align-content: center;
	text-align: center;
	font-size: 2.5em;
	color: #f39c12;
	font-weight: 600;
	margin-bottom: 1em;
}

hr{
	background-color: #9C640C;
	width:12em;
}

.carouselhr{
	background-color: #9C640C;
	width:5em !important;
}

/************************about******************/

/* ==== Cards using Bootstrap === */
section{
	
  background-color: black;

}

.post{
	font-size: 1.0em;
  color:#d35400 !important;
}


.para{
  font-size:0.78em;
  color:whitesmoke;
}

.ele{
	
	padding-top: 8em !important;
}



#cards .card {
	
  text-align: left;
  background-color:#1a1a1a;
  font-size:1.2em;
    border-radius: 20px;
    min-height: 100%;
}

#cards .heading-border {
    position: absolute;
    width: 100%;
    top: 60%;
}

#cards .card .user-picture img {
 border-radius: 50%;
    padding-bottom: 3em;
    position: absolute;
    top: -20%;
    right: 10%;
    background: #1A1A1A !important;
    padding: 10px;
}

#cards .card .user-content .user-name {
  color:#f39c12;
  font-size:1.3em;
    margin-right: 150px;
  margin-top:4em;
}

.titleabout{
	margin-top: 1.5em;
  color:#f39c12;
  font-weight:600;
	font-size: 3.5em;
	}


@media screen and (max-width: 700px){
#jssor_1{
	
	padding-left: 2em!important;
	padding-right: 2em!important;
}
}





.about-section{
    background: url(img2.jpg) no-repeat left;
    background-size: 55%;
    background-color: #000000;
    overflow: hidden;
    padding: 100px 0;
	
	
}

.inner-container{
	border: 2px solid #f39c12;
    width: 50%;
    float: right;
    background-color: #1A1A1A;
    padding: 40px;
	
	margin-right: 20px;
}



.electro{
	align-content: center;
	text-align: center;
	padding: 3px;
	
}
.inner-container h1{
	 color:#f39c12;
	text-align: center;
    margin-bottom: 20px;
    font-size: 2.5em;
    font-weight: 500;
}

.text{
    font-size: 0.95em;
    color: whitesmoke;
    line-height: 30px;
    text-align: justify;
    margin-bottom: 20px;
}

.skills{
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 13px;
}

@media screen and (max-width:1200px){
    .inner-container{
        padding: 80px;
    }
}

@media screen and (max-width:1000px){
    .about-section{
        background-size: 100%;
        padding: 100px 40px;
    }
    .inner-container{
        width: 100%;
    }
}

@media screen and (max-width:600px){
    .about-section{
        padding: 0;
    }
    .inner-container{
        padding: 60px;
    }
}






/* width */
::-webkit-scrollbar {
  width: 26px;
	background: #1a1a1a;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px black;
  border-radius: 15px !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
	height: 10em !important;
  background:  #f39c12;
  border-radius: 10px !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #A04000 ;
}