body {margin: 0;padding:0;width:100%;height:100%;font-family: 'Lora', serif !important;color:#fff;overflow-x:hidden;}
.p60 {padding:60px 0;}
.p100 {padding:100px 0;}
.t-left {text-align:left;}
.m10 {margin-bottom:10px !important;}
canvas {display: block;vertical-align: bottom;}
.canvas {position:absolute;top:0;left:0;width:100%;height:100vh;background-color: #42378f !important;background-image: linear-gradient(315deg, #42378f 0%, #f53844 74%) !important;z-index:9999;}
#particle-canvas div {display:none;}
canvas {height:100%;}
header {position: fixed;top: 0;left: 0;width: 100%;z-index: 99999;padding-top:24px;padding-bottom:24px;}
.navbar-toggler {color:#fff !important;border-color:transparent !important;position:absolute;top:10px;right:0;}
.navbar-toggler i {font-size:30px;}
.col-right {text-align:right;}
.col-right a i {font-size:30px;color:#fff;}
@media (min-width: 993px) {.collapse:not(.show) {display: none;}}
.navbar-toggler:focus {box-shadow:0 0 !important;}
.navbar-collapse {position:fixed;top:0;left:0;padding-top:70px;width:100%;text-align:center;background:#000;color:#fff;height:100%;}
.navbar-collapse li a.nav-link {color: #fff !important;font-weight:900; font-size: 30px;text-transform: uppercase;letter-spacing: 4px;margin: 40px 0px 0;}
.close {top:32px;right:64px;}
.resume {padding: 20px 100px;background: #fff;color: #000;font-size: 20px;font-weight: 900;text-transform: uppercase;letter-spacing: 2px;text-decoration: none;border-radius: 30px;}
.container1 p span.typed-text {color: #fff;font-size:65px;letter-spacing:3px;font-weight:800;}
.container1 p span.cursor {display: inline-block;background-color: #ccc;margin-left: 0.1rem;width: 3px;animation: blink 1s infinite;}
.container1 p span.cursor.typing {animation: none;}
@keyframes blink {0%{background-color:#ccc;}49%{background-color:#ccc;}50%{background-color:transparent;}99%{background-color:transparent;}100%{background-color:#ccc;}}
#particle-canvas{width:100%;height:100%;}
.main-header .automatic-text{position:relative;z-index:9999;margin-top:300px;}
.automatic-text p {color:#fff;margin:60px 0;}
.automatic-text span {font-size:50px;color:#fff;}
.automatic-text h2,.automatic-text h3 {color:#fff; font-size:65px;text-transform:uppercase;font-weight:700;letter-spacing:3px;}
.automatic-text h2 strong{font-weight:normal;color:#fff;}
.main-header {height:100vh;overflow:hidden;z-index:9999;}

#canvas0 {width: calc(100vh - 3rem);height: calc(100vh - 3rem);margin-right: .5em;transform: rotate(-4deg) translateX(22%);mix-blend-mode:overlay;}
/* About us */
.about-section {background:#000;color:#fff;}
.about-section h1 {letter-spacing: 2px;font-size: 50px;font-weight: 400;text-transform: uppercase;font-weight: bold;}
.about-section span {display: block;width: 100%;font-size: 40px;margin: 0px 0px 0px;}
body .about-section hr {display: block;margin:20px 0 0 10px;border-bottom: 8px dotted #fff;background-color:inherit !important}
.about-section p {font-size: 19px;letter-spacing: 2px;margin: 30px 0 15px;}
.experience {margin:40px 0 0;}
.experience h4 {font-size:40px;font-weight:900;text-transform:uppercase;letter-spacing:3px;}
.experience p {font-size:20px;text-transform:uppercase;font-weight:900;}
.experience p i {font-size:35px;}
.experience p strong {color:#aaa;}
/*Parallex */
.parallex {background:url('../img/parallex.jpg') no-repeat center center;position:relative;background-size:cover;background-attachment:fixed;padding:107px 0;text-align:center;color:#fff;}
.parallex h2,.parallex h3,.parallex h4 {font-size:85px;font-weight:bold;text-transform:uppercase;letter-spacing:3px;margin-bottom:20px;}
.vector {position: absolute;top: 12px;left: 20px;}
.my-projects {background:#f8f8f8;text-align:center;}
.main-heading {margin-bottom:40px;}
.main-heading h1 {font-size: 65px;text-transform: uppercase;letter-spacing: 6px;font-weight: 600;}

.company-detail {text-align:center;}
.company-detail h2 {font-size: 40px;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;}
.company-detail span {font-size: 22px;font-weight: 500;letter-spacing: 1px;margin: 30px 0 60px;display: block;}
.box {background: #fff;padding: 40px 17px;border-radius: 3px;margin-bottom:30px;box-shadow:0 0 29px 10px rgb(0 0 0 / 19%);}
.box h3 {font-size: 23px;text-transform: uppercase;font-weight: 900;}   
.box p {font-size: 17px;font-weight: 900;margin: 20px 0 40px;}
.box p a {margin-bottom:26px;display:inline-block;}
.box .m-btn {background-color: #42378f !important;background-image: linear-gradient(315deg, #42378f 0%, #f53844 74%) !important;color: #ffff;padding: 12px 60px;display: inline-block;text-decoration: none;font-size: 20px;letter-spacing: 2px;border-radius: 30px;}   
.mt {margin-top:70px !important;}
.box .m-btn:hover {background:#42378f !important;}
.bg-desc {background:url('../img/image2.jpg') no-repeat center center;padding: 200px 0 150px;background-attachment: fixed;text-align:center;color:#fff;}
.contact-detail h3 {font-size: 60px;font-weight: 900;text-transform: uppercase;letter-spacing: 2px;margin-bottom: 66px;}
.contact-detail p {font-size: 30px;margin-bottom: 40px;}
.contact-detail a {font-size: 70px;text-decoration: none;color: #fff;font-weight: 900;letter-spacing: 10px;}
footer {background:#000;padding:100px 0 60px;text-align:center;}
footer a img {margin-bottom:60px;}
footer ul {margin:0;padding:0;}
footer li {display:inline-block;margin-right:20px;}
footer li a {width:50px;height:50px;color:#fff;font-size:20px;border-radius:30px;border:4px solid #fff;display:inline-block;text-align:center;vertical-align:middle;line-height:42px;color:#fff;}
.onscroll {background:linear-gradient(315deg, #42378f 0%, #f53844 74%) !important;}
.logo1 img {width:100px;}
/* Media Queries */
@media screen and (orientation: landscape) {.console {display: flex;}}

@media (min-width: 768px) and (max-width:1200px) {
.resume {padding:20px 40px;}
.automatic-text h2, .automatic-text h3 {font-size:40px;}
.container1 p span.typed-text{font-size:40px;}
.main-s .col-sm-4 {width:100%;max-width:100%;flex:100%;}
.box p {text-align:center;}
.vector {position:relative;margin-bottom:50px;left:auto;}
.vector img {height: 300px;}
}
@media (max-width: 992px) {
.circle {display:none;}
}
@media (min-width: 992px) {  
.navbar-expand-lg .navbar-toggler {display:block !important;}}
@media (max-width: 767px) {
body .content9 {top:-304px !important;}
body .logo {width:35%;max-width:35%;flex:35%;}
body .col-right {width:60%;max-width:60%;flex:60%;}
.navbar-collapse li a.nav-link {font-size:24px;}
body .automatic-text {width: 100%;max-width: 100%;flex: 100%;text-align: center;text-align:center;margin-top:200px !important;}
.automatic-text h2, .automatic-text h3 {font-size:35px;}
.automatic-text p {margin:40px 0;}
.container1 p span.typed-text {font-size:30px;}
.resume {padding:20px 15px;}
.about-section h1,.experience h4 {font-size:25px;}
.experience p {font-size:16px}
.experience p i {font-size:20px;}

.about-section span {font-size:20px;}
body .about-section hr {margin-left:0;}
.parallex {padding:30px 0;}
.parallex h2, .parallex h3, .parallex h4 {font-size:40px;}
.vector {position:relative;margin-bottom:65px;left:auto;}
.vector img {height: 200px;}
.main-heading h1 {font-size:30px;}
.company-detail h2 {font-size:20px;}
.company-detail span {font-size:17px;}
.main-s .col-sm-4 {width:100%;max-width:100%;flex:100%;}
.box p {text-align:center;}
.box p a {font-size:14px}
.contact-detail h3 {font-size:30px;}
.contact-detail p {font-size:20px;}
.contact-detail a {font-size: 30px;}
footer li a {margin-bottom:10px;}}
@media (max-width: 500px) {
.parallex h2, .parallex h3, .parallex h4 {font-size:30px;}

}



.circle {
  position: absolute;
  border: solid 5px #42378f !important;
  width: 30px; 
  height: 30px; 
  border-radius: 50%;  
  z-index:9999;
}


/* scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 40px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background:#42378f;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background:#42378f;
}


.back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: none;
    color: #42378f ;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 40px;
}

.object {
  -webkit-animation: shimmy 2s infinite;
  animation: shimmy 2s infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-webkit-keyframes shimmy {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(20px, 50px);
    transform: translate(20px, 50px);
  }
}

@keyframes shimmy {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 50px);
    transform: translate(0, 50px);
  }
}