/* ------------------------------------------ */
/*             TABLE OF CONTENTS
/* ------------------------------------------ */
/*   01 - GENERAL SETTINGS SECTION  */
/*   02 - TYPOGRAPHY SECTION  */
/*   03 - HEADER SECTION  */
/*   04 - NAVIGATION SECTION */
/*   05 - ABOUT SECTION */
/*   06 - SEVICES SECTION */
/*   06 - WORK SECTION */
/*   07 - CLIENTS SECTION */
/*   08 - REVIEW SECTION */
/*   09 - CONTACT SECTION */
/*   10 - PROJECT SECTION */
/*   11 - FOOTER SECTION */
/*   12 - RESPONSIVE SECTION */

.tracking-in-contract {
	-webkit-animation: tracking-in-contract 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-contract 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-7-11 1:5:17
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/* ----------------------------------------------
 * Generated by Animista on 2024-7-11 1:7:13
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-contract
 * ----------------------------------------
 */
 @-webkit-keyframes tracking-in-contract {
    0% {
      letter-spacing: 1em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
        letter-spacing: 8pt;
      opacity: 1;
    }
  }
  @keyframes tracking-in-contract {
    0% {
      letter-spacing: 1em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
        letter-spacing: 8pt;
      opacity: 1;
    }
  }
  
  .text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-7-13 1:46:24
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
 @-webkit-keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  
  .focus-in-contract-bck {
	-webkit-animation: focus-in-contract-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: focus-in-contract-bck 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-7-13 1:50:13
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation focus-in-contract-bck
 * ----------------------------------------
 */
 @-webkit-keyframes focus-in-contract-bck {
    0% {
      letter-spacing: 1em;
      -webkit-transform: translateZ(300px);
              transform: translateZ(300px);
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(12px);
              transform: translateZ(12px);
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
  }
  @keyframes focus-in-contract-bck {
    0% {
      letter-spacing: 1em;
      -webkit-transform: translateZ(300px);
              transform: translateZ(300px);
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(12px);
              transform: translateZ(12px);
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
  }

  
.container2 {
    z-index: 1;
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    /* min-height: 35rem; */
    /* background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 168, 76, 0.6)), to(rgba(255, 123, 13, 0.6))), url("https://cdn.pixabay.com/photo/2014/12/16/22/25/woman-570883__340.jpg"); */
    /* background-image: linear-gradient(to bottom, rgba(255, 168, 76, 0.6) 0%, rgba(255, 123, 13, 0.6) 100%), url("https://images.pexels.com/photos/1000445/pexels-photo-1000445.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); */
    background-blend-mode: soft-light;
    background-size: cover;
    /* height: 100vh; */
    background-position: center center;
    /* padding: 2rem; */
}
.container h1
{
    margin-top: 47%;
}
.bird {
    background-image: url('http://www.iamramraj.com/demo/Flying_birds_CSS_animation_examples/bird-cells.svg');
    background-size: auto 100%;
    width: 88px;
    height: 125px;
    will-change: background-position;
    -webkit-animation-name: fly-cycle;
    animation-name: fly-cycle;
    -webkit-animation-timing-function: steps(10);
    animation-timing-function: steps(10);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.bird--one {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.bird--two {
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-delay: -0.75s;
    animation-delay: -0.75s;
}
.bird--three {
    -webkit-animation-duration: 1.25s;
    animation-duration: 1.25s;
    -webkit-animation-delay: -0.25s;
    animation-delay: -0.25s;
}
.bird--four {
    -webkit-animation-duration: 1.1s;
    animation-duration: 1.1s;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.bird-container {
    position: absolute;
    /* top: 20%; */
    left: -7.5vw;
    -webkit-transform: scale(0);
    transform: scale(0);
    will-change: transform;
    -webkit-animation-name: fly-right-one;
    animation-name: fly-right-one;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.bird-container--one {
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}
.bird-container--two {
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.bird-container--three {
    -webkit-animation-duration: 14.6s;
    animation-duration: 14.6s;
    -webkit-animation-delay: 9.5s;
    animation-delay: 9.5s;
}
.bird-container--four {
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
    -webkit-animation-delay: 10.25s;
    animation-delay: 10.25s;
}
 @-webkit-keyframes fly-cycle {
 100% {
 background-position: -900px 0;
}
}
 @keyframes fly-cycle {
 100% {
 background-position: -900px 0;
}
}
@-webkit-keyframes fly-right-one {
 0% {
 left: -10%;
 -webkit-transform: scale(0.3);
 transform: scale(0.3);
}
 10% {
 left: 10%;
 -webkit-transform: translateY(2vh) scale(0.4);
 transform: translateY(2vh) scale(0.4);
}
 20% {
 left: 30%;
 -webkit-transform: translateY(0vh) scale(0.5);
 transform: translateY(0vh) scale(0.5);
}
 30% {
 left: 50%;
 -webkit-transform: translateY(4vh) scale(0.6);
 transform: translateY(4vh) scale(0.6);
}
 40% {
 left: 70%;
 -webkit-transform: translateY(2vh) scale(0.6);
 transform: translateY(2vh) scale(0.6);
}
 50% {
 left: 90%;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
 60% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
 100% {
 left: 110%;
 opacity: 1;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
}
@keyframes fly-right-one {
 0% {
 left: -10%;
 -webkit-transform: scale(0.3);
 transform: scale(0.3);
}
 10% {
 left: 10%;
 -webkit-transform: translateY(2vh) scale(0.4);
 transform: translateY(2vh) scale(0.4);
}
 20% {
 left: 30%;
 -webkit-transform: translateY(0vh) scale(0.5);
 transform: translateY(0vh) scale(0.5);
}
 30% {
 left: 50%;
 -webkit-transform: translateY(4vh) scale(0.6);
 transform: translateY(4vh) scale(0.6);
}
 40% {
 left: 70%;
 -webkit-transform: translateY(2vh) scale(0.6);
 transform: translateY(2vh) scale(0.6);
}
 50% {
 left: 90%;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
 60% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
 100% {
 left: 110%;
 opacity: 1;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
}
@-webkit-keyframes fly-right-two {
 0% {
 left: -10%;
 opacity: 1;
 -webkit-transform: translateY(-2vh) scale(0.5);
 transform: translateY(-2vh) scale(0.5);
}
 10% {
 left: 10%;
 -webkit-transform: translateY(0vh) scale(0.4);
 transform: translateY(0vh) scale(0.4);
}
 20% {
 left: 30%;
 -webkit-transform: translateY(-4vh) scale(0.6);
 transform: translateY(-4vh) scale(0.6);
}
 30% {
 left: 50%;
 -webkit-transform: translateY(1vh) scale(0.45);
 transform: translateY(1vh) scale(0.45);
}
 40% {
 left: 70%;
 -webkit-transform: translateY(-2.5vh) scale(0.5);
 transform: translateY(-2.5vh) scale(0.5);
}
 50% {
 left: 90%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
 51% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
 100% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
}
@keyframes fly-right-two {
 0% {
 left: -10%;
 opacity: 1;
 -webkit-transform: translateY(-2vh) scale(0.5);
 transform: translateY(-2vh) scale(0.5);
}
 10% {
 left: 10%;
 -webkit-transform: translateY(0vh) scale(0.4);
 transform: translateY(0vh) scale(0.4);
}
 20% {
 left: 30%;
 -webkit-transform: translateY(-4vh) scale(0.6);
 transform: translateY(-4vh) scale(0.6);
}
 30% {
 left: 50%;
 -webkit-transform: translateY(1vh) scale(0.45);
 transform: translateY(1vh) scale(0.45);
}
 40% {
 left: 70%;
 -webkit-transform: translateY(-2.5vh) scale(0.5);
 transform: translateY(-2.5vh) scale(0.5);
}
 50% {
 left: 90%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
 51% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
 100% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
}

/******** GENERAL SETTINGS SECTION START ********/

.title {
    font-weight: 400;
    font-size: 10pt;
    color: #474643;
    letter-spacing: 8pt;
}

.sm-title {
    font-size: 30pt;
    letter-spacing: 5pt;
    padding: 10px;
    /* background-color: #B68E52; */
    color: black;
    border-radius:5px;
    /* text-shadow: 0px 4px 10px #B68E52; */
    background: url(https://w0.peakpx.com/wallpaper/314/713/HD-wallpaper-orange-black-digital-art-shapes-pattern-abstract-abstract.jpg) no-repeat center center;
    background-size: cover;
    color: #fff;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.sm-title-clients {
    font-size: 30pt;
    letter-spacing: 5pt;
    padding: 10px;
    /* background-color: #B68E52; */
    color: white;
    border-radius:5px;
    background: url(https://img.freepik.com/premium-photo/visually-striking-abstract-painting-featuring-vibrant-combination-oranges-blues-abstract-representation-love-using-intertwining-tendrils-warm-tones-ai-generated_538213-14829.jpg) no-repeat center center;
    background-size: cover;
    color: #fff;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.no-padding {
    padding: 0;
}

html,
body {
  height: 100%;
} 

/******** TYPOGRAPHY SECTION START ********/

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    letter-spacing: 1pt;
}


p {
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
    font-weight: 300;
    line-height: 25px;
    color: #898989;
}

/******** ABOUT SECTION START ********/
.kenburns-left {
	-webkit-animation: kenburns-left 2s ease-out none;
	        animation: kenburns-left 2s ease-out none;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-7-11 2:13:57
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation kenburns-left
 * ----------------------------------------
 */
/* ----------------------------------------------
 * Generated by Animista on 2024-7-11 2:15:2
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation kenburns-left
 * ----------------------------------------
 */
 @-webkit-keyframes kenburns-left {
    0% {
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
      -webkit-transform-origin: 16% 50%;
              transform-origin: 16% 50%;
    }
    100% {
      -webkit-transform: scale(1.15) translate(0, 0);
              transform: scale(1.15) translate(-0, 0);
      -webkit-transform-origin: left;
              transform-origin: left;
    }
  }
  @keyframes kenburns-left {
    0% {
      -webkit-transform: scale(1.15) translate(0, 0);
              transform: scale(1.15) translate(0, 0);
      -webkit-transform-origin: 16% 50%;
              transform-origin: 16% 50%;
    }
    100% {
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
      -webkit-transform-origin: left;
              transform-origin: left;
    }
  }
  
  
.header {
  background: url('../img/placeholderbg.jpg') no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  width: 100%;
  height: 100%; /* For at least Firefox */
  position: relative;
}

.header-wrapper {
  /* background-image: linear-gradient(rgb(255, 255, 255), rgb(198, 196, 196)); */
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  position: absolute;
  top: 85%;
  left: 50%;
  background-color: white;
  border-style: double;
  border-width: 4px;
  WIDTH: 100%;
}

.header-wrapper .sm-title {
    margin: 0;
}

.header-wrapper h3, .header-wrapper h1 {
    font-size: 25pt;
    letter-spacing: 8pt;
    line-height: 30pt;
    font-weight: 500;
    color: rgb(0, 0, 0);
}

.header-label {
    color:rgb(0, 0, 0);
    font-weight: 400;
    font-size:15pt;
    letter-spacing: 6pt;
}

.header-wrapper p {
    font-size: 25pt;
    font-weight: 800;
    letter-spacing: 6pt;
    color: rgb(255, 217, 159);
}

/******** NAVIGATION SECTION START ********/

#sidebar {
    background: #151718;
    width: 200px;
    height: 100%;
    display: block;
    position: absolute;
    left: -200px;
    top: 0px;
    transition: left 0.4s linear;
    position: fixed;
    z-index: 1000;
}

#sidebar.visible {
    left: 0px;
    transition: left 0.4s linear;
}

#sidebar-btn {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 15px;
    cursor: pointer;
    position: absolute;
    top: 60px;
    right: -60px;
}

#sidebar-btn span {
    height: 2px;
    width: 30px;
    background: #898989;
    margin-bottom: 5px;
    display: block;
}

ul {
    margin: 0px;
    padding: 0px;
}

ul li {
    list-style: none;
}


#sidebar ul li a {
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 8pt;
    letter-spacing: 2pt;
    color: #fff;
    display: block;
    padding: 12px;
    text-decoration: none;
    padding-top: 50px;
    margin-right: 40px;
}

#sidebar ul li a:hover {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    color: #B68E52;
}

/******** ABOUT SECTION START ********/

.about {
    margin: 0;
    background-color: #1b1b1b;
}

.about img {
    margin: 0 auto;
    border-radius: 360px;
    border: 7px solid rgb(215, 166, 74);
}

.userpic {
    margin-top: 70px;
}

.about .sm-title {
    margin-top: 50px;
}

.about h3 {
    margin-top: 30px;
    font-size: 18pt;
    font-weight: 400;
    letter-spacing: 4pt;
    color: #fff;
}

.about .line {
    width: 30px;
    height: 2px;
    background-color: #fff;
    float: left;
    margin: 0;
}

.about p {
    margin-top: 40px;
    font-weight: 400;
    font-size: 12pt;
    letter-spacing: 1pt;
    text-align: center;
    color:white;
    line-height: 3;
}

.about .btn-primary {
    border-radius: 0px;
    border: 0px;
    padding: 14px 36px;
    background-color: rgb(235, 168, 68);
    color: black;
    text-transform: uppercase;
    font-size: 11pt;
    letter-spacing: 1.5pt;
    margin-top: 30px;
    margin-left: 30px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    font-weight: 600;
}

.about .btn-primary:hover {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
        background-color: #d7c4a8;
        color: black;
        box-shadow: 0px 0px 5px 0px white;
}

.about .btn-default {
    border-radius: 0px;
    border: 0px;
    padding: 14px 36px;
    background-color: #fff; 
    color: #1b1b1b;
    text-transform: uppercase;
    font-size: 11pt;
    letter-spacing: 1.5pt;
    margin-top: 30px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    font-weight: 600;
}

.about .btn-default:hover {
    background-color: #e0d7ca;
    color: black;
    box-shadow: 0px 0px 5px 0px white;

}

.contact .btn-default {
    border-radius: 0px;
    border: 0px;
    padding: 14px 36px;
    background-color: #1b1b1b; 
    color: white;
    text-transform: uppercase;
    font-size: 11pt;
    letter-spacing: 1.5pt;
    margin-top: 30px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    font-weight: 600;
    
}

.contact .btn-default:hover {
    background-color: #d7c4a8;
    color: #1b1b1b;
    box-shadow: 0px 0px 10px 0px #5c5b5b;
}


.skill {
    background-color: #1b1b1b;
    padding-top: 100px;
}

.single_progress_bar .progress {
    height: 2px;
    margin-bottom: 40px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

.single_progress_bar .progress-bar {
    background-color: #B68E52;
}

.single_progress_bar h2{
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1pt;
    margin-bottom: 20px;
    margin-left: 0px;
}

/******** SERVICES SECTION START ********/

.services {
    margin-top: 170px;
}

.services .col-md-4 {
    margin-bottom: 55px;
}

.services .sm-title {
    margin-top:-70px;
    text-align: center;
}

.services .margin {
    margin-bottom: 50px;
}

.services .fa {

    font-size: 20pt;
    margin-top: 10px;
    color: #B68E52;
}

.smm {
    margin-left:50px;
}
.services h3 {

    color: #1b1b1b;
    margin-top: 30px;
    font-size: 12pt;
    font-weight: 400;
    letter-spacing: 4pt;
}

.services .line {
    padding-top: 40px;
    margin-top: 40px;
    width: 1px;
    height: 1px;
    background-color: #1b1b1b;
}

.service-wrapper h3 {
    letter-spacing: 1pt;
    margin-top: 15px;
}

.services p {
   margin-top: 10px;
   font-size: 10pt;
   font-weight: 300;
   color: #898989;
   letter-spacing: 1px;
   line-height: 15pt;
   margin-left:50px;

}

/******** WORK SECTION START ********/

.work {
    /* margin-top: 60px; */
}
 
.work h3 {
    margin-top: 30px;
    font-size: 12pt;
    font-weight: 400;
    letter-spacing: 4pt;
}

.work .sm-title {
    text-align: center;
    /* margin-top:-10px; */
}

.work .portfolio-thumb {
  position: relative;
  padding: 0;
}

.work .portfolio-thumb .portfolio-overlay {
  position: absolute;
  background: #B68E52;
  color: #ffffff;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: top;
  opacity: 0;
  transition: all 0.4s ease-in-out;
}

.work .portfolio-item {
    position: absolute;
    top:50%;
    left: 50%;
    -webkit-transform:translate(-50%,-50%);
      -ms-transform:translate(-50%,-50%);
          transform:translate(-50%,-50%);
}

.work .portfolio-thumb:hover .portfolio-overlay {
  opacity: 0.8;
}

.work .portfolio {
    margin-top: 50px;
}

.margin {
    margin-bottom:20px;
} 

.work .col-md-4 {
    margin-top: 30px;
}

/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

/******** CLIENTS SECTION START ********/

.clients {
    margin-top: 100px;
    background-color: #1b1b1b;
}

.clients .sm-title {
    margin-top: 100px;
}

.clients h3 {
    color: #fff;
    margin-top: 30px;
    font-size: 12pt;
    font-weight: 400;
    letter-spacing: 4pt;
}

.review h3 {
    color: #fff;
    margin-top: 30px;
    font-size: 12pt;
    font-weight: 400;
    letter-spacing: 4pt;
    text-align: center;
    margin-bottom: 40px;
}

.clients p {
    margin-top: 140px;
}

.clients .line {
    padding-top: 40px;
    margin: 50px auto 0;
    width: 1.5px;
    height: 1px;
    background-color: #fff;
}

.clients p {
    color: #fff;
    font-size: 16pt;
    text-align: center;
    letter-spacing: 1pt;
}

.logos {
    margin-top: 40px;
    padding: 15px;
    background-color: rgb(215, 166, 74);
}
#alignlogos > div
{
    display: inline-block;
}
#alignlogos
{
    text-align: center;
    margin: 0px auto;
}   
.gcimg {
    height:80%;
    width:40% !important;
}
.clients img {
    width: 50%;
    border-radius: 10px;
}

.clients .margin {
    margin-bottom: 50px;
}

.review {
    width: auto;
    height: auto;
    background-color: #1b1b1b;
}

.review .main-text {
    margin: 0 auto;
    margin-top: 50px;
    font-size: 15pt;
    font-weight: 800;
    letter-spacing: 1pt;
    color: rgb(255, 255, 255);
    line-height: 20pt;
    width: 550px;
}

.review h4 {
    margin-top: 25px;
    margin-bottom: 25px;
    font-size: 13pt;
    font-weight: 800;
    color: rgb(255, 255, 255);
}

.review h5 {
    color: rgb(255, 255, 255);
    margin-bottom: 45px;
    font-size: 12pt;
    font-weight: 800;
}

.review .owl-dots {
    margin-bottom: 140px;
}

.owl-theme .owl-dots .owl-dot span{
    width:10px;
    height:10px;
    margin:5px 7px;
    background: #B68E52 !important;
    display:block;
    -webkit-backface-visibility:visible;
    -webkit-transition:opacity 200ms ease;
    -moz-transition:opacity 200ms ease;
    -ms-transition:opacity 200ms ease;
    -o-transition:opacity 200ms ease;
    transition:opacity 200ms ease;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
}

/******** CONTACT SECTION START ********/

.contact {
    width: auto;
    height: auto;
    margin-top: 50px;
}

.item {
    border: 5px solid rgb(215, 166, 74);
    border-radius: 15px;
    /* background-color: white; */
    /* background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
background-color: #300;
background-size: 100px 100px; */
background-image: url('../img/reviewbg.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position:25% 85%;;
}
.button-89 {
    --b: 3px;   /* border thickness */
    --s: .45em; /* size of the corner */
    --color: #373B44;
    padding: calc(.5em + var(--s)) calc(.9em + var(--s));
    color: var(--color);
    --_p: var(--s);
    background:
      conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
      var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
    transition: .3s linear, color 0s, background-color 0s;
    outline: var(--b) solid #0000;
    outline-offset: .6em;
    font-size: 16px;
  
    border: 0;
  
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  
  .button-89:hover,
  .button-89:focus-visible{
    --_p: 0px;
    outline-color: var(--color);
    outline-offset: .05em;
    color:black;
  }
  
  .button-89:active {
    background: var(--color);
    color: #fff;
  }
.info-btn .btn-default {
    border-radius: 0px;
    padding: 20px 42px;
    border: 0px;
    background-color: #1b1b1b; 
    color: #fff;
    /* text-transform: uppercase; */
    font-size: 10pt;
    letter-spacing: 2pt;
    margin-top: 30px;
    box-shadow: 0 0 70px 0 rgba(0, 0, 0, 0.2);
}

.info-btn .btn-default:hover {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    background-color: #B68E52;
}

.info-btn h2 {
    font-size: 16pt;
    font-family: 'Montserrat', sans-serif;
    color: #1b1b1b;
    letter-spacing: 7pt;
}

.info-btn p {
    font-size: 12pt;
    font-weight: 100; 
    color: #dcdcdc;
    padding-top: 15px;
    letter-spacing: 2pt;
}

.contact .line {
    padding-top: 40px;
    margin-top: 50px;
    width: 1px;
    height: 1px;
    background-color: #1b1b1b;
}

.contact .title {
    color: #1b1b1b;
    margin-top: 0px;
}

.contact .info {
    margin-top: 100px;
}

.contact h3 {
    color: #1b1b1b;
    margin-top: 30px;
    font-size: 12pt;
    font-weight: 400;
    letter-spacing: 2pt;
}

.contact .fa {
    font-size: 22pt;
    color: #1b1b1b;
}

.contact h2 {
    font-size: 12pt;
}

/* .contact h4 {
    color: #898989;
} */

.contact a {
    text-decoration: none;
    font-weight:600;
}


/******** FOOTER SECTION START ********/

footer {
    margin-top: 50px;
    background-color: #1b1b1b;
}

footer h4 {
    font-size: 8pt;
    letter-spacing: 2pt;
    margin: 50px auto;
    color: #fff;
}

/******** PROJECT SECTION START ********/

.header-two {
  /* background: url('../img/placeholder.png') no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover; */
  width: 33%;
  height: 33%; /* For at least Firefox */
}

.header-wrapper-two {  
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  position: absolute;
  top: 20%;
  left: 50%;
}

.genesisimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 40%;
    width: 40%
}

.bunnyimg {
    /* width: 500px; */
    border-radius: 50%;
    margin: auto;
    display: block;
    height:30%;
    width:30%;
}

.pirateimg {
    /* width: 500px; */
    border-radius: 50%;
    margin: auto;
    display: block;
    height:30%;
    width:30%;
}

.header-wrapper-two h3 {
    font-size: 30pt;
    letter-spacing: 10pt;
    line-height: 30pt;
    font-weight: 700;
    color: black;;
}

.header-wrapper-two p {
    font-size: 14pt;
    font-weight: 600;
    letter-spacing: 7pt;
    color: #B68E52;
}

.gallery .col-md-4 {
    margin-top: 30px;
}

.fact {
    margin-top: 10px;
    width: auto;
    height: auto; 
}

.fact h4 {
    margin-top: 110px;
    font-size: 30pt;
    letter-spacing: 2pt;
    color: #1b1b1b;
}

.fact p {
    color: #1b1b1b;
    font-size: 10pt;
    letter-spacing: 2pt;
    margin-top: -40px;
    margin-bottom: 100px;
}

.visit-btn .btn-default {
    border-radius: 0px;
    padding: 14px 36px;
    border: 0px;
    background-color: #1b1b1b; 
    color: #fff;
    /* text-transform: uppercase; */
    font-size: 8pt;
    letter-spacing: 1.5pt;
    margin-top: 85px;
    box-shadow: 0 0 70px 0 rgba(0, 0, 0, 0.2);
}

.visit-btn .btn-default:hover {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    background-color: #B68E52;
}

.project {
    margin-top: 0;
    margin-bottom: 10px;
}

.project h4 {
    font-size: 14pt;
    letter-spacing: 2pt;
    font-weight: 700; 
}

.project p {
     margin-top: 10px;
     font-size: 12pt;
     font-weight: 300;
     color: #455a64;
     letter-spacing: 1px;
     line-height: 20pt;
}

.home, .next {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #111111;
}

.home:hover {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    background-color: #B68E52;
}

.next:hover {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    background-color: #B68E52;
}

.button {
    margin-top: 100px;
}

.button h3 {
    font-size: 10pt;
    letter-spacing: 2pt;
    color: #fff;
}

.button a {
    text-decoration: none;
}

.button .home, .next {
    width: auto;
    height: auto;
}

.ft-project {
    margin-top: 0px;
}

/******** RESPONSIVE SECTION START ********/


/* Small Devices, Tablets */ 
@media only screen and (max-width : 768px) {
    .about .main-text {
        width: 400px;
    }
    .review .main-text {
        width: 400px;
    }
    .menu-btn .fa {
      margin-top: 25px;
      margin-left: 40px;
    }

    .contact .info {
      margin-top: 170px;
    }

    .fact p {
      margin-bottom: 20px;  
    }
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
 .about .main-text {
    width: 330px;
}
.review .main-text {
    width: 330px;
}
.menu-btn .fa {
  margin-top: 25px;
  margin-left: 40px;
  
}
.contact .info {
    margin-top: 170px;
}
.fact p {
      margin-bottom: 20px;  
    }
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    .about .main-text {
        width: 230px;
    }
    .review .main-text {
        width: 230px;
    }
    .menu-btn .fa {
      margin-top: 25px;
      margin-left: 300px;
    }

    .contact .info {
      margin-top: 170px;
    }
    .fact p {
      margin-bottom: 20px;  
    }
}