* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

@font-face {

  font-family: "Century-Gothic";

  src: url(../fonts/Century-Gothic.ttf);

}



/* animate.css */

/* This changes all the animations globally */

:root {

  --animate-duration: 800ms;

  --animate-delay: 0.9s;

}





body {

  overflow-x: hidden;

  background-color: #000;

  scroll-behavior: smooth;

}

img {

  width: 100%;

  height: 100%;

}

.viner {

  font-family: "viner-hand-itc-regular", sans-serif;

}

a,

a:hover,

a:focus {

  outline: none;

  text-decoration: none;

}

.white-bg{

  background-color: #F1F1F1;

}

.gothic{

  font-family:'Century-Gothic';

}

/* header */

header {

  background: #1483cd;

}

header nav {

  justify-content: space-between;

  display: flex;

  vertical-align: middle;

  align-items: center;

  height: 100px;

}

header .logo {

  width: 400px;

}

.menu-icon img {

  cursor: pointer;

}

.color-black{

  color: #000!important;

}

/* overlay menu */

.menu {

    position: relative;

    height: 46px;

    width: 46px;

  }

  

  .menu-link {

    width: 100%;

    height: 100%;

    position: absolute;

    z-index: 1002;

  }

  

  .menu-icon {

    position: absolute;

    width: 20px;

    height: 14px;

    margin: auto;

    left: 0;

    top: 0;

    right: 0;

    bottom: 1px;

  }

  

  /* ------------- */

  .menu-line {

    background-color: #333;

    height: 2px;

    width: 100%;

    border-radius: 2px;

    position: absolute;

    left: 0;

    transition: all 0.25s ease-in-out;

  }

  .menu-line-2 {

    top: 0;

    bottom: 0;

    margin: auto;

  }

  .menu-line-3 {

    bottom: 0;

  }

  .menu.open .menu-line-1 {

    transform: translateY(7px) translateY(-50%) rotate(-45deg);

  }

  .menu.open .menu-line-2 {

    opacity: 0;

  }

  .menu.open .menu-line-3 {

    transform: translateY(-7px) translateY(50%) rotate(45deg);

  }

  

  /* ------------- */

  .menu-circle {

    background-color: #fff;

    width: 100%;

    height: 100%;

    position: absolute;

    border-radius: 50%;

    transform: scale(1);

    z-index: 1000;

    transition: transform 0.3s ease-in-out;

  }

  .menu:hover .menu-circle {

    transform: scale(1.5);

  }

  .menu.open .menu-circle {

    transform: scale(60);

  }

  

  /* ------------- */

  .menu-overlay {

    background-color: #fff;

    color: #333;

    height: 100%;

    width: 100%;

    position: fixed;

    text-align: center;

    transition: opacity 0.2s ease-in-out;

    z-index: 1001;

    opacity: 0;

    visibility: hidden;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    top: 0;

  }

  .menu-overlay.open {

    opacity: 1;

    visibility: visible;

  }

ul.menu-links {

    list-style: none;

}

ul.menu-links li{

    font-size: 48px;

}

ul.menu-links li a{

  font-family: "Century-Gothic", sans-serif;

  color:black

}

ul.menu-links li a.hover-underline-animation.active::after{

  transform:scaleX(1);

  transform-origin: bottom left;

}

/* main page content starts */

.hero-section {

  background-position: center center;

  background-size: cover;

  /* background-attachment: fixed; */

  min-height: 600px;

  position: relative;

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

}

.hero-section img {

  width: 200px;

  margin-top: 30px;

}

.hero-section h1{

  font-size: 150px;

  color: white;

  font-family: 'Century-Gothic';

}

/* person img */

.person-img {

  text-align: center;

  margin-top: -75px;

  position: relative;

}

/*.person-img img {*/

/*  width: 250px;*/

/*}*/



/* project section */

.project-section {

  padding: 100px 0;

}

.project-section .heading-title {

  margin-bottom: 40px;

}

.project-section .heading-title h1 {

  color: white;

  font-size: 72px;

}

.project-section .heading-title hr.title-seperator {

  width: 150px;

  height: 3px;

  margin: 20px auto;

  background-color: #1483cd;

  border: none;

}

.project-section .heading-title p {

  color: white;

  font-family: "Century-Gothic";

  max-width: 800px;

  margin: auto;

  font-size: 16px;

  line-height: 24px;

}

.project-section .heading-title.color-black h1,

.project-section .heading-title.color-black p{

  color: black;

}

.showcase-wrapper {

}

.showcase-wrapper .image {

  overflow: hidden;

  max-height: 360px;

  box-shadow:0px 0px 6px 3px #ffffff35;

  position: relative;

}

.showcase-wrapper.showcase-4 .image {

  overflow: hidden;

  max-height: 260px;

  box-shadow:0px 0px 6px 3px #ffffff35;

}

.showcase-wrapper .image img {

  width: 100%;

  height: 100%;

  transition: all 0.3s linear;

}

 /* .showcase-wrapper:hover .image img {

  transform: scale(1.1);

}  */

.showcase-wrapper .content {

  padding: 30px 0;

}

.showcase-wrapper .content a.project-name {

  text-transform: uppercase;

  color: white;

  font-size: 24px;

  margin-bottom: 0px;

}

.showcase-wrapper .content a.project-name:hover{

    color: #1483cd!important;

}

.showcase-wrapper .content p.img-dim{

  color: #c7c7c7;

  font-size: 12px;

  margin:0;

}

.showcase-wrapper .content p.project-desc {

  color: white;

  font-family: "Century-Gothic";

  font-size: 16px;

  padding-left: 10px;

  position: relative;

  margin: 10px 0;

}

.showcase-wrapper .content p.project-desc:after {

  content: "";

  width: 4px;

  height: 4px;

  background-color: #1483cd;

  top: 10px;

  left: 0;

  position: absolute;

}



/* button */

.btn-holder{

    text-align: center;

    margin-top: 40px;

}

.btn-holder .btn-1 {

  color: white;

  border: 2px solid #1483cd;

  padding: 15px 50px;

  border-radius: 30px;

  font-size: 16px;

  font-family: "Century-Gothic";  

}

.btn-holder .btn-1 span{

margin-left: 10px;

}

.btn-holder .btn-1:hover {

    background-color: #1483cd;

    color: white;

}

.btn-holder.text-left{

  text-align: left;

}

/* btn-2 */

.btn-holder{

    text-align: center;

    margin-top: 40px;

}

.btn-holder .btn-2 {

  color: white;

  border: 2px solid #1483cd;

  padding: 15px 50px;

  border-radius: 30px;

  font-size: 16px;

  font-family: "Century-Gothic";  

  background-color: #1483cd;

}

.btn-holder .btn-2 span{

margin-left: 10px;

}

.btn-holder .btn-2:hover {

    background-color: transparent;

    color: #1483cd;

}





/* about section */

.about-content p{

  color: white;

  font-family: "Century-Gothic";

  font-size: 16px;

  line-height: 24px;

}

.about-content p span{

  text-decoration: underline;

}





/* footer */

footer .footer-top{

  padding: 60px 0;

}

footer .footer-logo{

  margin-bottom: 14px;

  width: 60%;

}

footer .footer-text{

    font-family: "Century-Gothic";

    margin:0 auto 30px;

    font-size: 16px;

    line-height: 24px;

    color: #fff;

}

footer ul.footer-social-links{

  list-style: none;

}

footer ul.footer-social-links li{

  display: inline-block;

  font-family: 'Century-Gothic';

  font-size: 16px;

  cursor: pointer;

  padding: 0 5px;

}

footer ul.footer-social-links li a{

  color: #FFF;

}

footer ul.footer-social-links li:hover{

  text-decoration: none;

}

footer .menu-title{

  font-size: 24px;

  font-family: 'Century-Gothic';

  color: #FFF;

  margin: 0 0 30px;

}

footer ul.footer-menu{

  list-style: none;

}

footer ul.footer-menu li{

  padding: 3px 0;

}

footer ul.footer-menu li a{

  color: white;

  font-family: "Century-Gothic";

  font-size: 16px;

}

.copyright{

  border-top: 1px solid #FFF;

  margin-top: 30px;

  padding: 15px 0;

}

.copyright .copyright-text{

  color: #FFF;

  font-family: 'Century-Gothic';

  font-size: 16px;



}





/* hover animation */

.hover-underline-animation {

  display: inline-block;

  position: relative;

  color: #FFFFFF;

}



.hover-underline-animation::after {

  content: '';

  position: absolute;

  width: 100%;

  transform: scaleX(0);

  height: 2px;

  bottom: 0;

  left: 0;

  background-color: #FFF;

  transform-origin: bottom right;

  transition: transform 0.50s ease-out;

}



.hover-underline-animation:hover::after {

  transform: scaleX(1);

  transform-origin: bottom left;

}



.project-name.hover-underline-animation{

  color: #1483cd;

}

.project-name.hover-underline-animation:after,.menu-links .hover-underline-animation:after{

  background-color: #1483cd;

}





/* scroll to top btn */

#scrollBtn {

  display: none;

  position: fixed;

  bottom: 20px;

  right: 30px;

  z-index: 99;

  border: none;

  outline: none;

  background-color: white;

  cursor: pointer;

  padding: 17px 5px;

  border-radius: 100%;

}

#scrollBtn img{

  width: 50%;

}



/*  */

.image{

  transition: 0.5s;

}

.image span,.about-img .image-holder .image-div span{

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: -120%;

  background-color: rgba(255, 255, 255, 0.3);

  transition: 0.4s;

  transform: skewX(10deg);

  z-index: 3;

}

.about-img{

  padding: 30px;

}

.showcase-wrapper:hover .image span, .about-img .image-holder .image-div:hover span{

  left: 120%;

}

.about-img .image-holder{

  position: relative;

  transition: 0.5s;

}

.about-img .image-holder .image-div{

  position: relative;

  overflow: hidden;

}

.about-img .image-holder img{

  z-index: 1;

  position: relative;

}

.about-img .bg-1{

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  background-color: #1483cd78;

  transform: rotate(5deg);

}





/* MINIMAL FADE IN UP EFFECT */



/* Animation */



@keyframes fadeInUp {

  from {

      transform: translate3d(0,40px,0)

  }



  to {

      transform: translate3d(0,0,0);

      opacity: 1

  }

}



@-webkit-keyframes fadeInUp {

  from {

      transform: translate3d(0,40px,0)

  }



  to {

      transform: translate3d(0,0,0);

      opacity: 1

  }

}



.animated {

  animation-duration: 0.5s;

  animation-fill-mode: both;

  -webkit-animation-duration: 0.5s;

  -webkit-animation-fill-mode: both

}



.animatedFadeInUp {

  opacity: 0

}



.fadeInUp {

  opacity: 0;

  animation-name: fadeInUp;

  -webkit-animation-name: fadeInUp;

}



.no-scroll{

  overflow: hidden;

}





/* Contact Page */

.pageHeader{

  background:url(../images/bg/hero-bg.jpg);

  background-size: cover;  

  padding: 100px 0;

  position: relative;

  background-attachment: fixed;

}

.pageHeader:before{

position: absolute;

width: 100%;

height: 100%;

content: "";

background: rgba(0, 0, 0, 0.3);

top: 0;

left: 0;

}

.pageHeader h1{

  position: relative;

  text-align: center;

  color: white;

  font-size: 48px;

  font-family: "Century-Gothic", sans-serif;

}



/* contact form */

form.contactform div {

  padding: 20px;

}

form.contactform div input[type='text'], [type='email'], select,textarea{

  background-color: transparent;

  padding: 10px ;

  border: none;

  border-bottom: 1px solid rgba(255, 255, 255, 0.623);

  outline: none;

  width: 100%;

  color: white;

}

form.contactform div input:focus{

  border-bottom: 1px solid #FFFFFF;

}

input[type='text']:focus, [type='email']:focus, textarea:focus {

	outline: none;

}





::-webkit-input-placeholder {

	color: #ffffffaf;

}



:-moz-placeholder { 

	color: #ffffffaf;

	opacity: 1;

}



::-moz-placeholder {

	color: #ffffffaf;

	opacity: 1;

}



:-ms-input-placeholder {

	color: #ffffffaf;

}



#form_button {

  background: none;

  border: solid 2px #ffffff;

  color: #ffffff;

  cursor: pointer;

  display: inline-block;

  font-family: 'Helvetica', Arial, sans-serif;

  font-size: 0.875em;

  font-weight: bold;

  outline: none;

  padding: 20px 35px;

  text-transform: uppercase;

  -webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	-ms-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;

}



#form_button:hover {

  background: #ffffff;

  color: #000000;

}

.about-content p a{

  color: #FFFFFF;

}

.about-content p i{

  margin-right: 15px;

  background-color: #1483cd;

  padding: 5px;

  font-size: 16px;

  width: 30px;

  text-align: center;

  height: 30px;

}



.image-slider{



}

.image-slider img{

  max-height: 700px;

}

.clear {

  clear: both;

}





/* RESPONSIVE */

@media only screen and (max-width:476px){

  header .logo{

    width: 200px;

  }

  ul.menu-links li{

    font-size:24px;

    padding: 10px 0;

  }

  .hero-section{

    min-height: 300px;

  }

  .hero-section img{

    width:350px;

  }

  .hero-section h1{

    font-size: 200px;

    color: white;

    font-family: 'Century-Gothic';

  }

  ul.menu-links li a{}

  .animatedFadeInUp {

    opacity: 1;

}

.showcase-wrapper.showcase-4 .image{

  max-height:none

}

.about-img{

  margin-top: 50px;

}

.project-section{

  padding:40px 10px;

}

.project-section .heading-title h1{

  font-size:36px;

}

.project-section .heading-title p{

  font-size:14px;

}

.pageHeader{

  padding:50px 0;

}

footer .menu-title{

  margin:30px 0 20px;

}

footer .footer-top{

  padding:40px 0;

}

.copyright{margin-top:10px}

.showcase-wrapper .content a.project-name{

  font-size:20px;

  margin-bottom:10px;

}

.showcase-wrapper .content p.project-desc{margin:0 0 10px}

.project-section .heading-title{

  /* margin-bottom:20px; */

}

form.contactform div{

  padding:0 0 20px;

}

.form-div{

  padding-top:30px;

}

footer{

  border-top:1px solid white;

}
}


.prettyprint, .prettyprintS {
    background: red;
    color: #fff;
    padding: 6px 25px;
    margin-left: 10px;
    display: inline-block;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
}


/* 22-02-23 changes */
.about-heading-img{
  width: 150px;float: right;margin-top:-40px;
}
.heading-title .about{
  display:inline-block;
}
.hero-section .person-img {
  margin:0 50px
}
.hero-section .person-img img{
  margin:0;
}
@media only screen and (max-width: 476px){
.hero-section img {
  width: 75px;
}
.hero-section h1 {
  font-size: 40px;
  color: white;
  font-family: 'Century-Gothic';
}
.hero-section .person-img {
  margin:0 20px;
}
.about-heading-img{
  float: none;
  margin:0;
}
}
.about-content p{

}