@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
outline: 0!important;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}

.name:focus,.name:hover{
  outline: none!important;
}

#wrapper{
  -webkit-transition: all 0.5s ease-in-out!important;
  -moz-transition: all 0.5s ease-in-out!important;
  -o-transition: all 0.5s ease-in-out!important;

}
.white
{
  transition: all 0.5s ease-in-out;
  background-color: white;
  color:black!important;
}

#Journey-section{
margin-top:-5%!important;
}

#trustUs-section
{
margin-top:-5%!important;
}

html
{
scroll-behavior: smooth;
}

.bold
{
font-weight: 1000;
}

.logo1
{
  height: 40px!important;  
}

.header_head
{
font-weight: 700;
}

.center
{
padding: 116px 40px;
text-align: center;
}
.center p
{
word-spacing:1px;
line-height:1.7em;
}



.callbtn
{
background-color: white;
color: black;
border-radius: 50px;
padding: 17px 30px 17px 30px!important;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
font-family: "Montserrat",sans-serif;
font-weight: bolder!important;
padding: 15px;
font-size: 0.7rem;
}

.callbtn:hover
{
color: black;
}

.formbox
{
background-color: white;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.3);
padding: 60px 60px;
transform: translateY(-20%);
z-index: 10!important;
}

.bolds
{
background-color: black;
border: 2px solid black;
border-radius: 7px;
}

.shadow
{
box-shadow: 0px 2px 2px 3px #bdc3c7;
}

header {
  position: relative;
  background-color: black;
  height: 65vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
  /*z-index: -1;*/
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /*background-color: rgba(255,198,43,0.8);*/
  background-color: #000000;
  opacity:0.7;
  z-index: 1;
}

.header .container {
  position: relative;
  z-index: 2;
  padding-top: 80px;
}

.header_content h1,.header_content p
{
  /*color: #3B3B3B;*/
  z-index: 5!important;
  color: #ffc62b;
}

      .head_links 
      {
        font-size :20px!important;
        font-weight:normal;
      }

.firsts
{
  text-decoration: uppercase!important;
}

#typewriter
{
  font-weight: bold;
  text-transform: uppercase;
}

.header_btn
{
position: absolute;
width: 100%;
transform: translateX(50%);
}
.header_sub
{
font-size: 1.1rem;
}
.navbar
{
z-index: 2!important;
}

.main_body
{
  min-width: 0px;
  width: 100%;
  z-index: 9;
  -webkit-transition: all 0.5s ease-in-out!important;
  -moz-transition: all 0.5s ease-in-out!important;
  -o-transition: all 0.5s ease-in-out!important;
}

.navbar
{
  z-index: 2!important;
}
.sidebar
{
  width: 0%;
  display: none;
  background-color: white;
  height: 100vh;
  -webkit-transition: all 0.3s ease-in-out!important;
  -moz-transition: all 0.3s ease-in-out!important;
  -o-transition: all 0.3s ease-in-out!important;
}

.toggled
{
  width: 0%;
}

.hiding
{
  width: 0%;  
}

.animate
{
  display: inline-block;
}
    .container
    {
        max-width:1300px!important;
    }
    
    .header_content{
padding-top: 10%!important;
}

.header_text,.header_text2
{
height: 100%;
padding-top: 55%;
padding-left: 5%;
color: #353b48;
}
.header_text2
{
height: 100%;
padding-top: 1%;
padding-left: 5%;
color: #353b48;
}
.header_text h1
{
font-weight: 700;
text-transform: uppercase;
}
.header_text h5
{
position: absolute;
}
#typewriter
{
margin-top: -5px!important;
font-family: 'Montserrat', sans-serif;
border-right: 2px solid #ffc62b;
white-space: nowrap;
overflow: hidden!important;
font-size: 8rem;
/*line-height: 2px;*/
}
.other_content
{
font-size: 1.5rem;
padding-top: 10%;
}
#brand,.brand
{
height: 10;
width: 20;
}
.nav-link
{
font-size: 0.7rem!important;
font-weight: bold;
color: white!important;
}

.footer_link
{
  font-size: 0.7rem!important;  
  color: white!important;
}

.mybtn,.mybtn2,.mybtn3
{
border: 2px solid white!important;
border-radius: 100px!important;
font-weight: bolder!important;
transition: all 0.5s ease-in-out;
padding-left: 20px!important;
padding-right: 20px!important;
transition: all 0.5s ease-in-out
}
.mybtn2
{
  border: 1px solid black!important;
}

.mybtn3
{
  border: 2px solid black!important;
}

.mybtn:focus,.mybtn2:focus
{
  background-color:rgba(255,198,43,0.8);
}

.mybtn2:focus,.mybtn2:hover
{
  background-color: rgba(255,198,43,0.9);
  box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3)!important;
}

.secondary
{
display: none;
}
.two
{
    margin-top:-50px!important;
    display: none;
}

.toggler:hover,#typewriter:hover,.header_text h1:hover
{
cursor: pointer;
}
a
{
text-decoration: none!important;
}
.links,.links2
{
color: black;
font-weight:bold;
transition: all 0.5s ease-in-out;
}
.links2
{
color: #777777;
}
.social i
{
color: #777777;
transition: all 0.5s ease-in-out;
padding: 10px;
}
.links:hover,.links2:hover,.social i:hover
{
color: rgba(255,198,43,0.8);
}

.icon
{
  width: 80px;
  height: 80px;
  /*position: absolute;*/
  /*top: 61%;*/
  /*bottom: 0px;*/
  /*right: 100px;*/
  z-index: 10!important;
  position : relative;
}
.content-icon{
   float: right;
   margin-right: 9%;
   margin-top: -42px;

}


.content
{
/*border: 2px solid red;*/
height: 30vh;
}
.box
{
padding:20px;
box-shadow: 0 0 1px 0 rgbaa(255,198,43,0.2) ;
transition: all 0.25s ease-in-out;
}
.box:hover
{
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3) ;
transform: translateY(-20px);
}

.box div
{
padding: 15px;
color: #7f8c8d;
}
.box div p
{
color: #2c3e50;
}

.box div p 
{
    margin-top:-30px;
}

.box div img
{
    height:135px;
}


.box h5
{
text-transform: uppercase;
letter-spacing: 0.1rem;
font-size: 18px;
}
.nav-link
{
    margin-top:-10px!important;
    transition: all 0.3s ease-in-out;
}
#two
{
    margin-top:-20px!important;
}
.go .nav-link:hover
{
border-bottom: 1px solid white;
color: #ffc62b!important;
}
.go2 .nav-link:hover
{
color: rgba(255,198,43,0.8)!important;
border-bottom: 1px solid rgba(255,198,43,0.8);
}


#bekar
{
padding: 0% 10% 0% 10%;
}
.effect
{
color: #777777;
width: 0;
white-space: nowrap;
overflow: hidden!important;
}
.effect:hover
{
cursor: pointer;
}
.expertiseicon
{
height: 10vh!importortant;
}
footer
{
background-color: #3B3B3B;
}
.boxs
{
background-image: url('Icon/line.png');
height: 50vh;
}
.line
{
height: 70vh;
transform: translateY(15%);
position: absolute!important;
z-index: 0;
}
.above-line
{
z-index: 1;
}

.first,.preparation,.plan,.perform,.perfect,.second,.third,.fourth,.how
{
opacity: 0;
}
.first .animate__animated.animate__bounce
{
opacity: 1;
}
.imgs
{
display: block;
filter: grayscale(100%);
transition: all 0.1s ease-in-out;
margin-left: auto;
margin-right: auto;
}
.imgs:hover
{
filter: none;
}

nav
{
  z-index: 10!important;
}

.video_box
{
  margin: auto;
  width: 50%;
  height: 50vh;
  transform: translateY(-50%);
  z-index: 20!important;
  background-color: rgba(255,198,43);
}
.icons
{
  margin: auto;
  width: 50%;
  text-align: center;
  padding: 40px 0;
  text-align: center;  
  transform: translateY(50%);
  background-color: white;
  border-radius: 100%;
}
.icons:hover
{
cursor: pointer;
}
.hello
{
padding: 10px 40px 10px 40px!important;
}


.clientBody
{
    background-image: linear-gradient(45deg,#1e3799,#0984e3);
}

.clientBody div
{
    color: white;
}

.card-footer
{
  background-color: white!important;
}

.photo
{
  transform: translateY(-50%);
}

.photo2
{

  padding: 3%!important;
  border: 2px solid silver;
  border-radius: 100px!important;
}

.fa-caret-left,.fa-caret-right
{
  color: black;
}

.star
{
 /*color:white;*/
 margin-top: 50px;
}


@media only screen and (max-width: 1990px) {
    
.center {
    padding: 40px 12px!important;
 
}


@media only screen and (max-width: 1480px) {
    
.center {
    padding: 25px 8px!important;
 
}

    
}

      /*Phone , Mobile and Other Small Device*/

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

body
{
  /*overflow-x: hidden;*/
}



.formbox
{
    background-color: white;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    padding: 60px 60px;
    transform: translateY(0);
    z-index: 10!important;
}


.footer_link
{
  font-size: 0.4rem!important;  
  color: white!important;
}

.image{
  background-color:tomato!important;
  height: 80px!important;
  width: 80px!important;
  border-radius: 50%;
  border: 5px solid white;
  position: absolute;
  top: -15%!important;
  left: 50%;
  transform: translateX(-50%);
  display:flex;
  justify-content:center;
  background-size: 100% 100% ;
  background-position: center;
  background-repeat: none;
}
    
  header
  {
    height: 65vh!important;
  }
    

  .customPrevBtn,.customNextBtn,.owl-section
  {
      display:none!important;
  }
  .primary
  {
    display: none;
  }

  .secondary
  {
    display: block;
  }

  .sidebar
  {
    width: 60%!important;
  }
  
  #typewriter
  {
      font-size: 2rem;
  } 

  .firsts
  {
    font-size: 1rem;
  }

  .lead
  {
    font-size: 0.7rem!important;
  }

  .header
  {
    padding-top: 15%;
  }

  .icon,.themebtn
  {
    display: none!important;
  }

  .line{
    display: none;
  }

  .headings{
    font-size: 1.2rem;
  }

  .mycontainer
  {
    max-width: 800px!important;
  }
  



}



    /*For More Bigger Screens*/

  @media screen and (min-width: 1000px) and (max-width:1366px )
  {
    
   .mcontainer
    {
        height:auto;
    }

  .line
  {
    transform: translateY(50%)!important;
  }
  #loader
  {
  height: 100vh!important;
  width: 100%;
  background: black url('../logo_1.gif') no-repeat center ;
  z-index: 99999!important;
}

#other
{
  display: none;
}


      header {
        height: 65vh;
      }

      #typewriter
      {
          font-size: 8rem;
      } 

      .firsts
      {
        font-size: 3.0rem;
      }
      

      .icon
      {
        width: 80px;
        height: 80px;
        
      }

      .content
      {
        height: 100vh;
      }
      
      .logo1
      {
        height: 5vh!important;  
      }

      .logo_width
      {
        height: 20vh;
        width: 100%;
      }

      .line
      {
      height: 70vh;
      transform: translateY(10%);
      position: absolute!important;
      z-index: 0;
      }
 
     .mycontainer{

       max-width: 1000px!important;
      }
 
  } 


  .mcontainer{
  /*background: rgb(237, 239, 240);*/
  height: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*border:2px solid red;*/
}

.testimonial-card{
  min-height: 400px;
  width: 700px;
  background-color: white;
  /*box-shadow: 0 8px 30px rgba(0,0,0,.3);*/
  display: flex;
  flex-flow: column;
  justify-content:space-between;
 
}

.image{
  background-color:tomato!important;
  height: 120px;
  width: 120px;
  border-radius: 50%;
  border: 5px solid white;
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  display:flex;
  justify-content:center;
  background-size: 100% 100% ;
  background-position: center;
  background-repeat: none;
}

.footer{
  background: #ffcc01;
  height: auto;
  border-radius: 0 0 10px 10px;
  position:relative;
  
}

.quote{
  font-size: 200%;
  float: right;
  opacity: .1;
  transform: rotate(10deg) translate(-10px, -40px);
 color:#4D3FA3;
}

.person{
  color:white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size:1.5rem;
  font-weight: 600;
}

.themebtn:focus, input:focus{
    outline: none!important;
    border: 2px solid red;
}


.owl-prev {
    width: 15px;
    height: 100px;
    position: absolute;
    top: 40%;
    margin-left: -20px;
    display: block !important;
    border:0px solid black;
}

.owl-next {
    width: 15px;
    height: 100px;
    position: absolute;
    top: 40%;
    right: -25px;
    display: block !important;
    border:0px solid black;
}
.owl-prev i, .owl-next i {transform : scale(1.0); color: #ccc;}


.themebtn
{
  background-color: #ffcc01!important;
  font-weight: bold;
  border:  2px solid rgba(255,198,43,0.8);
  padding: 20px;
  transition: all 0.3s ease-in-out;
}

.themebtn:hover
{
  background-color:  #f1c40f!important;
  color: white!important;
}

.themebtn i
{
 color: #353b48!important;
}

.thumbs
{
  height: 50vh;
  width: 100%;
}

.myport
{
  width: 100%;
  height: 50vh;
  border: 2px solid red;
}

.myimgs
{
    width:  100%;
    height: 100%;
}

.overlay2 {
  border: 10px solid #ffc62b;
  position: absolute;
  top: 0;
  bottom: 0;
  /*left: 0;*/
  /*right: 0;*/
  height: 100%;
  width: 92%;
  opacity: 0;
  transition: .5s ease;
  background-color: white;
}


.thumbs:hover .overlay2 {
  opacity: 1;
}

.text {

  /*padding: 2.0em;*/
  line-height: 3em;
  text-align: center;

}

.name,.email
{
    display: block!important;
    width: 100%!important;
    font-size: 12px!important;
    line-height: 1.5!important;
    border: 0px!important;
    background: transparent!important;
    border-bottom: 1px solid #333!important;
    padding: 5px 0!important;
    overflow: hidden!important;
}

.jumbotron div h1
{
    font-size: 38px;
    color: #3B3B3B;
}


  .socialIcon
  {
    padding: 17px;
    border-radius: 100%;
    border: 1px solid black;
    color: black;
    transition: all 0.5s ease-in-out;
  }

  .socialIcon:hover
  {
    color: black;
    background-color:rgba(255,198,43,0.9);
    transform: scale(1.1);
  }

  #mybg
  {
    background-color:rgb(255,198,43);   
  }



@media screen and (max-width: 900px) {
#portfolio-section,.mt-5,.my-5, #portfolio-section .mt-5,#portfolio-section .my-5{
    margin:0px!important;
    
}   

#portfolio-section
{
    margin-bottom: -35px!important;
}

}

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

.h3, h3 {
    font-size: 1.5rem!important;
}

.imgs {
    display: block;
    filter: grayscale(0%);
}

  .portfolio-all{
    margin-bottom: 64px!important;
    }    
    
  .portfolio-all .overlay2{
     border: none;
     top: 358px;
     opacity: 1;
     width: 100%;
     padding: 14px!important;
     left: 0px;
    }
    
    .p_name {
    font-size: 0.9em!important;
    }
    .p_service {
    font-size: 0.7em!important;
    }
    
    .portfolio-all hr 
{
    margin-top: 0.2rem!important;
    margin-bottom: 0.2rem!important;
}
.portfolio-all p 
{
    margin-top: 0!important;
    margin-bottom: 0.2rem!important;
}
.portfolio-all .center
{
padding-top: 0px !important;
}
    
 #banner-agency{
background-size: cover!important;
background-repeat: no-repeat!important;
background-position-x: center!important;
    position: relative;
    top: -150px;
}   

.mycontainer .bolds{
margin: 0px !important;
padding: 0px !important;
border: none !important;
}  
 
#content{
margin-bottom: 75px !important;
}
#banner-agency .heading_content
{
font-size: 0.8rem !important;
}
.btn-block {
    display: block!important;
    width: 70%!important;
    font-size: 0.7rem !important;
    margin-left: auto!important;
    margin-right: auto!important;
}   
.expertise-cols{
    margin-top: 0rem!important;
}
.expertise-cols .mb-5,.expertise-cols .mt-5,.expertise-cols .my-5{
    margin-top: 0rem!important;
    padding-top: 5px!important;
    margin-bottom: 0rem!important;
    padding-bottom: 0rem!important;
}
#Journey-section{
margin-top: -35%!important;
    margin-bottom: -85px!important;
}
#trustUs-section
{
margin-top:-50%!important;
}
.all-portfolio{
   margin-top: -5rem!important;
}
.portfolio-contact{
padding-bottom: 2rem;
}
.footer-all-links .mt-4,.footer-all-links .my-4 {
    margin-top: 2.3rem!important;
}
#other .expertise-section{
margin-top: -9rem!important;
}
}

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

  .portfolio-all{
    margin-bottom: 61px!important;
    }    
    
  .portfolio-all .overlay2{
     
     top: 300px;
     opacity: 1;
     width: 100%;
     padding: 14px!important;
     left: 0px;
    }
    .portfolio-all .center {
     padding-top: 0px!important;
   }
}
@media screen and (max-width: 345px){

  .portfolio-all .overlay2{
     top: 270px;
    }
   
}