:root {
   --color-primary :#D50000;
   --color-black: #707070;
}

html {
   scroll-behavior: smooth;
}

body {
   background: #fff;
   color: rgba(255, 255, 255, 0.4);
   background: #222;
   line-height: 1.7;
   font-size: 16px;
   font-weight: 300;
}


h1,
h2,
h3,
h4,
h5 {
   color: #fff;
   font-weight: 200;
}

h2 {
   font-size: 25px;
}

a {
   -webkit-transition: .3s all;
   -o-transition: .3s all;
   transition: .3s all;
   color: var(--color-primary);
}

a:hover,
a:focus,
a:active {
   color: var(--color-primary);
   text-decoration: none;
}

/* ============ Navbar Start ================== */
.site-navbar {
   border: none;
   margin-bottom: 0px;
   position: absolute;
   width: 100%;
   z-index: 200;
   background: #fff;
}

.site-navbar .navbar-brand {
   padding: 5px 20px;
   color: var(--color-primary);
   text-transform: uppercase;
   font-family: 'Big Shoulders Stencil Text', cursive;
}


@media (max-width: 991.98px) {

   .site-navbar.bg-light .navbar-brand {
      display: inline-block;
      font-size: 18px;
      padding: 2px 10px !important;
   }
}

.site-navbar .navbar-nav>li>a {
   font-size: 14px;
   font-weight: 700;
   letter-spacing: .1em;
   position: relative;
   padding: 6px 10px !important;
   text-transform: uppercase;
   font-family: 'Big Shoulders Stencil Text', cursive;
}

.site-navbar .navbar-nav>li>a:hover {
   color: var(--color-primary) !important;

}

@media (max-width: 991.98px) {
   .site-navbar .navbar-nav>li>a {
      color: var(--color-black) !important;
   }
}

.site-navbar .navbar-nav.active>a {
   color: var(--color-primary) !important;
}

.site-navbar.scrolled {
   background: #fff;
   -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.09);
   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.09);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   -webkit-transform: translateY(0%);
   -ms-transform: translateY(0%);
   transform: translateY(0%);
}

.site-navbar.scrolled.bg-light {
   background: #fff !important;
}

.site-navbar.scrolled .navbar-brand {
   display: inline-block;
   font-size: 18px;
   padding: 2px 10px !important;
   color: var(--color-primary) !important;
}

.site-navbar.scrolled.awake,
.site-navbar.scrolled.sleep {
   -webkit-transition: .3s all ease;
   -o-transition: .3s all ease;
   transition: .3s all ease;
}

.site-navbar.scrolled.awake {
   -webkit-transform: translateY(0%);
   -ms-transform: translateY(0%);
   transform: translateY(0%);
   background: #fff !important;
}

.site-navbar.scrolled.sleep {
   -webkit-transform: translateY(-100%);
   -ms-transform: translateY(-100%);
   transform: translateY(-100%);
   background: var(--color-primary) !important;
}

.site-navbar.scrolled .navbar-brand {
   color: #000;
}

.site-navbar.scrolled .dropdown>a:before {
   color: rgba(0, 0, 0, 0.4);
}

.site-navbar.scrolled .navbar-nav>li>a {
   color: var(--color-black) !important;
}

.site-navbar.scrolled .navbar-nav>li>a:hover {
   color: var(--color-primary) !important;
}

.site-navbar.scrolled .navbar-nav>li>a.active {
   color: var(--color-primary) !important;
}

.site-navbar.scrolled .navbar-nav>li.active>a {
   color: var(--color-primary) !important;
}

/* =========== Navbar End ============== */


/* =========== Particles Start ============*/
.site-hero #particles-js {
   position: absolute;
   width: 100%;
   height: 100vh;
   z-index: 100;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 50% 50%;
}

/* =============== Particles End ==================*/


 /* ================= Home Start ================== */
.site-hero {
   background-image: linear-gradient(to right,#fff,#bdc3c7 );
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
   position: relative;
   overflow: hidden;
}

.site-hero,
.site-hero .row {
   height: 100vh;
   min-height: 800px;
}


.site-hero h1 {
   font-weight: 400;
   font-family: 'Big Shoulders Stencil Text', cursive;
   color: var(--color-primary) !important;
}

.site-hero h4 {
   font-family: 'Big Shoulders Stencil Text', cursive;
   font-size: 2.25rem;
   color: var(--color-black);
}

.site-hero a {
   font-family: 'Big Shoulders Stencil Text', cursive;
   font-weight: 600;
   border:1px solid var(--color-primary);
   color: var(--color-primary);
}


@media (min-width: 768px) {
   .site-hero h1 {
      font-size: 4.75rem;
   }
}

@media (max-width: 560px){
   .site-hero h1 {
      font-weight: 800;
      font-size: 2.92rem;
   }

   .site-hero h4 {
      font-size: 1.25rem;
      
   }
}

.site-hero h1,
.site-hero .lead {
   font-weight: 200;
   color: #fff;
}

.site-hero .lead {
   line-height: 2;
}

/* ================= End Home ================== */

.site-section {
   padding: 5em 0;
}


.section-heading {
   margin-bottom: 30px;
   position: relative;
   z-index: 10;
   font-family: 'Big Shoulders Stencil Text', cursive;
}

.section-heading h2 {
   position: relative;
   font-weight: 200;
   padding-top: 20px;
   font-size: 30px;
   color: var(--color-primary) !important;
}

.section-heading h2 strong {
   font-weight: 800;
   color: #fff;
}

.section-heading.text-center h2:before {
   left: 50%;
   -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
}

.lead {
   font-weight: 200;
   line-height: 1.5;
   letter-spacing: .2px;
   font-family: 'Inter', sans-serif;
   
}

.sub-lead {
   font-family: 'Inter', sans-serif;
   font-weight: 100;
}

.sub-lead a {
   text-decoration: none;
   color: var(--color-primary);
}

.site-service-item {
   background: #333;
   padding: 30px;
   padding-top: 40px;
   border-radius: 10px;
   border: 1px solid var(--color-primary);
   transition: .3s ease ;
}

.site-service-item:hover {
   cursor: pointer;
   transform: scale(1.03);
   box-shadow: 0 4px 4px 0 rgba(255, 255, 255, 0.1), 0 6px 20px 0 rgba(231, 231, 231, 0.1);
}

.site-service-item .icon {
   display: block;
   margin-bottom: 50px;
   background: #edf0f2;
   width: 100px;
   height: 100px;
   position: relative;
   border-radius: 50%;
   margin: 0 auto 30px auto;
}

.site-service-item .icon span {
   font-size: 40px;
   color:  var(--color-primary);
   position: absolute;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   left: 50%;
   top: 50%;
}

.site-service-item h3 {
   font-size: 20px;
   font-weight: 200;
   font-family: 'Big Shoulders Stencil Text', cursive;
   letter-spacing: .05rem;
}

.site-link {
   position: relative;
}

.site-link i {
   position: relative;
   top: 2px;
   -webkit-transition: .3s all ease;
   -o-transition: .3s all ease;
   transition: .3s all ease;
}

.site-link:hover i {
   position: relative;
   margin-left: 20px;
}

.btn:active,
.btn:focus {
   outline: none;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
}

.btn.btn-primary {
   color: #fff;
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus {
   background: var(--color-primary);
}

/* ========================================= */
.filters {
   text-align: center;
}

.filters ul {
   padding: 0;
   margin: 0 0 30px 0;
}

.filters ul li {
   display: inline-block;
   cursor: pointer;
   padding: 20px;
   -webkit-transition: .3s all ease;
   -o-transition: .3s all ease;
   transition: .3s all ease;
}

.filters ul li:hover {
   color: var(--color-primary);
}

.filters ul li.active {
   color: var(--color-primary);
}

.single-portfolio {
   margin-bottom: 50px;
   display: block;
}

.single-portfolio .relative {
   margin-bottom: 10px;
   transition: .6s;
   cursor: pointer;
}

.single-portfolio .relative:hover {
   transform: scale(1.06);
}

.single-portfolio .p-inner {
   text-align: center;
}

.single-portfolio .p-inner h4 {
   font-size: 20px;
   font-family: 'Big Shoulders Stencil Text', cursive;
}

.single-portfolio .p-inner .cat {
   font-size: 12px;
   text-transform: uppercase;
   color: #cccccc;
}

/*--------- Start Portfolio Area -------------*/
.portfolio-area .primary-btn {
   color: #fff;
   background-color: var(--color-primary);
   margin-left: auto;
   margin-right: auto;
}

.portfolio-area .filters {
   text-align: center;
}

.portfolio-area .filters ul {
   padding: 0;
}

.portfolio-area .filters ul li {
   list-style: none;
   display: inline-block;
   padding: 18px 15px;
   cursor: pointer;
   position: relative;
   text-transform: uppercase;
   color: #000;
   font-size: 12px;
   font-weight: 500;
}

@media (max-width: 736px) {
   .portfolio-area .filters ul li {
      padding: 6px 6px;
   }
}

.portfolio-area .filters ul li:after {
   content: "";
   display: block;
   width: calc(0% - 60px);
   position: absolute;
   height: 2px;
   background: #333;
   -webkit-transition: width 350ms ease-out;
   -o-transition: width 350ms ease-out;
   transition: width 350ms ease-out;
}

.portfolio-area .filters ul li:hover:after {
   width: calc(100% - 60px);
   -webkit-transition: width 350ms ease-out;
   -o-transition: width 350ms ease-out;
   transition: width 350ms ease-out;
}

.portfolio-area .filters ul li.active {
   color: var(--color-primary);
}

.portfolio-area .filters-content {
   margin-top: 50px;
}

.portfolio-area .filters-content .show {
   opacity: 1;
   visibility: visible;
   -webkit-transition: all 350ms;
   -o-transition: all 350ms;
   transition: all 350ms;
}

.portfolio-area .filters-content .hide {
   opacity: 0;
   visibility: hidden;
   -webkit-transition: all 350ms;
   -o-transition: all 350ms;
   transition: all 350ms;
}

.portfolio-area .filters-content .item {
   text-align: center;
   cursor: pointer;
   margin-bottom: 30px;
}

.portfolio-area .filters-content .item img {
   border-radius: 10px;
}

.portfolio-area .filters-content .p-inner {
   padding: 20px 0px;
   text-align: center;
}

.portfolio-area .filters-content .item .p-inner .cat {
   font-size: 13px;
}

.portfolio-area .filters-content .item img {
   width: 100%;
}

.image {
   opacity: 1;
   display: block;
   width: 100%;
   height: 100%;
   -webkit-transition: .5s ease;
   -o-transition: .5s ease;
   transition: .5s ease;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}

.middle {
   -webkit-transition: .5s ease;
   -o-transition: .5s ease;
   transition: .5s ease;
   opacity: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   text-align: center;
}

.single-portfolio:hover .middle {
   opacity: 1;
}

.text {
   color: white;
   font-size: 25px;
   padding: 16px 32px;
}

.single-portfolio {
   border-radius: 5px;
}

.single-portfolio:hover .thumb .overlay-bg {
   opacity: .85;
}

.thumb .overlay-bg {
   opacity: 0;
   border-radius: 5px;
   -webkit-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

@media screen and (prefers-reduced-motion: reduce) {
   .thumb .overlay-bg {
      -webkit-transition: none;
      -o-transition: none;
      transition: none;
   }
}

/* =============== Resume ===================== */

.resume-item {
   padding: 30px;
   background: #333;
   -webkit-transition: .3s all ease;
   -o-transition: .3s all ease;
   transition: .3s all ease;
   border: 1px solid var(--color-primary);
   border-radius: 7px;
}

.resume-item .date {
   display: block;
   margin-bottom: 10px;
   font-size: 12px;
   font-weight: 700;
   color: #fff;
}

.resume-item .school {
   display: block;
   font-size: 16px;
}

.resume-item h3 {
   color: var(--color-primary);
   font-size: 20px;
}

.resume-item .school {
   color: rgba(255, 255, 255, 0.3);
}

.resume-item *:last-child {
   margin-bottom: 0;
}

/* ================ Start Contact ================ */
.form-control {
   border: none !important;
   background: #333;
   color: #fff;
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) !important;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) !important;
}

.form-control:active,
.form-control:focus {
   background: #404040;
}

.form-control::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
   color: rgba(255, 255, 255, 0.5);
}

.form-control::-moz-placeholder {
   /* Firefox 19+ */
   color: rgba(255, 255, 255, 0.5);
}

.form-control:-ms-input-placeholder {
   /* IE 10+ */
   color: rgba(255, 255, 255, 0.5);
}

.form-control:-moz-placeholder {
   /* Firefox 18- */
   color: rgba(255, 255, 255, 0.5);
}

.site-form .form-control {
   border: 1px solid #b3bdc6;
}

.site-contact-details,
.site-contact-details li {
   padding: 0;
   margin: 0;
}

.site-contact-details li {
   list-style: none;
   margin-bottom: 20px;
}

.site-contact-details li>span {
   color: #2c3e50;
   letter-spacing: .1em;
   font-size: 12px;
   font-weight: 500;
   margin-bottom: 5px;
   display: block;
}
/* ================ End Contact ================ */

/* ================ Start Footer ================= */

.site-footer {
   padding: 3em 0;
}

.site-footer p:last-child {
   margin-bottom: 0;
}

.site-footer h2 {
   font-family: 'Big Shoulders Stencil Text', cursive;
   letter-spacing: .1rem;
}

.site-footer .social-item {
   display: inline-block;
   width: 60px;
   height: 60px;
   background: #333;
   position: relative;
   border-radius: 50%;
   font-size: 24px;
   margin: 0 10px;
}

.site-footer .social-item>span {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   color: white;
}

.site-footer .social-item>span:hover {
   color: var(--color-primary);
}

.site-footer .copyright {
   font-family: 'Big Shoulders Stencil Text', cursive;
   letter-spacing: 1px;
}
/* ============ End Footer =============== */