/*
** This Theme was Desgined By
**@ Hossam Sadek
**
=========================================================
** CSS file Guide
=========================================================


** 1.General Settings
    1.1 body styling
    1.2 fonts styling
    1.3 color reference

** // The Header : involved in every page ( 2 )

** 2.Header styling
    2.1 the header 
    2.2 the Menu button
    2.3 the logo wrapper
    2.4 the social media icons wrapper styling
    2.5 the nav menu wrapper
    2.6 the nav menu itself
    2.7 the search form
    2.8 the social icons wrapper in the menu div
     
** // The Home Page 

** 3.home page sections styling
    3.1 the big wrapper and his image
    3.2 the big wrapper divs & thier content
    3.3 the second section know about us in home page
    3.4 the third section our services
    3.5 the fourth section the prices
    3.6 the fifth section contact and newsletter
    3.7 the sixth section instagram section



*/



/*
=========================================================
** 1. General setting
=========================================================

** 1.1 body styling =============
*/
body
{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 16px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-family: 'Gotham-Book-Regular',sans-serif;
}

/*
** 1.2 font styling ======================================
*/

/*

** FONTS USED IN THIS THEME
** headers : oblikbold,sans-serif;
** body    : Gotham-Book-Regular;
*/
@font-face
{
  font-family: 'Gotham-Book-Regular';
  src:url('../fonts/Gotham-Book-Regular.otf');
}

@font-face
{
  font-family: 'bulgatti';
  src: url('../fonts/Bulgatti.ttf')
}

h1,h2,h3,h4,h5,h6
{
  font-weight: bold;
  -webkit-font-smoothing :antialiased;
  text-rendering: optimizeLegibility;
  font-family: 'Roboto Condensed', sans-serif;
}
h1
{
  font-size: 64px;
  line-height: 96px;
}
h2
{
  font-size: 48px;
  line-height: 72px;
}
h3
{
  font-size: 32px;
  line-height: 48px;
}
h4
{
  font-size: 24px;
  line-height: 36px;
}
h5
{
  font-size: 18px;
  line-height: 27px;
}


/*
** 1.3 Color Reference =====================================



1- White : #ffffff;

2- Dark : #000000;

3- light-Dark : #141414;

4- Golden : #E6AF2E;



*/










/*
=========================================================
** 2. Header styling
=========================================================

** 2.1 the header  ==============================
*/
.header-wrapper
{
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding: 0 60px;
  z-index: 1000;
  background: transparent;
  
}
.customize-support .header-wrapper
{
  top: 32px;
}
.header-wrapper.moved
{
  background: rgb(255, 255, 255,.8);
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}





/*
** 2.2 the Menu Button styling =====================================
*/
.button-wrapper
{
  position: relative;
  width: 30%;
  height: 100%;
  padding: 20px 0;
  z-index: 1000;
  cursor: pointer;
}



.button-wrapper:hover .bar2
{
  width: 20px;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.bars
{
  height: 5px;
  width: 40px;
  background: #E6AF2E;
  transition: 0.4s;
}

.bar2
{
  margin: 5px 0;
}
.bar1
{
  margin-top: 7px;
}

.button-wrapper.active .bar1
{
  transform: rotate(-45deg) translate(-5px,5px);
  background: #000000;
}

.button-wrapper.active .bar3
{
  transform: rotate(45deg) translate(-8px,-10px);
  background: #000000;
}
.button-wrapper.active .bar2
{
  opacity: 0;
}

/*
** 2.3 the Logo wrapper styling =====================================
*/
.logo-wrapper
{
  display: flex;
  width: 40%;
  height: 100%;
  justify-content: center;
}
.logo-wrapper img
{
  height: 80px;
  width: auto;
  display: none;
}

/*
** 2.4 the social media icons wrapper styling =====================================
*/
.social-wrapper
{
  display: flex;
  width: 30%;
  height: 100%;
  justify-content: flex-end;
}
.social-wrapper a
{
  padding: 0 10px;
}

.social-wrapper a span
{
  display: inline-block;
  height: 20px;
  width: 20px;
}

.face
{
  background: url('../img/icons/facebook-3.png');
  background-size: contain;
  background-position: center;
}
.face:hover
{
  background: url('../img/icons/facebook-2.png');
  background-size: contain;
  background-position: center;
}

.twit
{
  background: url('../img/icons/twitter-3.png');
  background-size: contain;
  background-position: center;
}
.twit:hover
{
  background: url('../img/icons/twitter-2.png');
  background-size: contain;
  background-position: center;
}

.inst
{
  background: url('../img/icons/instagram-3.png');
  background-size: contain;
  background-position: center;
}
.inst:hover
{
  background: url('../img/icons/instagram-2.png');
  background-size: contain;
  background-position: center;
}

/*
** 2.5 the nav menu wrapper styling =====================================
*/
.nav-menu-wrapper
{
 position: fixed;
 display: none;
 top: 0;
 left: 0;
 height:  100vh;
 padding: 140px 60px 60px 60px;
 z-index: 500;
 background: #ffffff;
}
.customize-support .nav-menu-wrapper
{
  top: 32px;
  height: calc( 100vh - 32px );
}
.nav-menu-wrapper.active
{
  display: block;
}


/*
** 2.6 the nav menu itself styling =====================================
*/
.nav-menu
{
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  font-size: 32px;
  list-style: none;
  opacity: 0;
}
.nav-menu.active
{
  opacity: 1;
}
.nav-menu .menu-item
{
  padding:  10px 0;
}
.menu-item a
{
  color: #141414;
}
.menu-item a:hover
{
  text-decoration: none;
  color: #E6AF2E;
}

/*
** 2.7 the search form styling =====================================
*/
.searchform
{
  opacity: 0;
}

.searchform.active
{
  opacity: 1;
}
.searchform div
{
  margin-top: 50px;
  display: flex;
}

.searchform input[type="text"]
{
  padding: 5px 10px;
  border: 1px solid #E6AF2E;
  outline: none;
  border-right: none;
  color: #E6AF2E;
}
.searchform input[type="submit"] 
{
  padding: 5px 10px;
  border: 1px solid #E6AF2E;
  outline: none;
  border-left: none;
  cursor: pointer;
  background: #ffffff;
  color: #E6AF2E;
}

.searchform input>::placeholder
{
  color: #E6AF2E;
}
.searchform ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color:   #E6AF2E;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 color:   #E6AF2E;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:   #E6AF2E;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:   #E6AF2E;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color:   #E6AF2E;
}

.searchform input[type="submit"]:hover
{
  color: #E6AF2E;
}

/*
** 2.8 the menu social wrapper styling =====================================
*/
.menu-social-wrapper
{
  opacity: 0;
}
.menu-social-wrapper.active
{
  position: absolute;
  opacity: 1;
  bottom: 60px;
  width: 100%;
}
.menu-social-wrapper a
{
  padding: 0 10px;
}
.menu-social-wrapper a span
{
  display: inline-block;
  height: 30px;
  width: 30px;
}









/*
=========================================================
** 3. The Home Page sections styling
=========================================================

** 3.1 the big wrapper and the image  ==============================
*/
.big-wrapper
{
  position: relative;
  height: 100vh;
  width: 100%;
  background: #000000;
}
.big-wrapper>img
{
  position: absolute;
  top: 25%;
  right: 0;
  height: 75%;
  width: 40%;
  object-fit: cover;
  object-position: center;
  z-index: 350;
}
.img-eff
{
  position: absolute;
  top: 25%;
  right: 0;
  height: 75%;
  width: 40%;
  z-index: 400;
  background: rgb(0, 0, 0,.8)
}



/*
** 3.2 the big wrapper divs & thier content  ==============================
*/
.left-part
{
  position: absolute;
  top: 80px;
  left: 0;
  width: 60%;
  height: 100%;
  padding: 200px 60px 60px 60px;
  z-index: 300;
  box-sizing: border-box;
  background: #141414;;
}
.left-part img
{
  height: auto;
  width: 200px;
  object-fit: cover;
  object-position: center;
}
.left-part h3
{
  color: #ffffff;
  text-transform: capitalize;
  
}
.left-part p
{
  color:#b2b2b2;
  text-transform: uppercase;
}



/*
** 3.3 the second section in home page  ==============================
*/

.know-section-row
{
  padding: 0px;
  background: #ffffff;
}
.img-part
{
  height: 640px;
  padding: 0;
}
.img-part img
{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.info-part
{
  height: 640px;
  position: relative;
  padding: 20px 80px 20px 80px;
}
.info-part-content
{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  transform: translate(-50%,-50%);
}
.info-part h2
{
  color: #E6AF2E;
  text-transform: uppercase;
}
.info-part h3
{
  margin-bottom: 20px;
  text-transform: uppercase;
}
.info-part a
{
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #E6AF2E;
  color: #E6AF2E;
  
}
.info-part a:hover
{
  color: #ffffff;
  background: #E6AF2E;
  text-decoration: none;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

/*
** 3.4 the third section our services in home page  ==============================
*/
.services-row
{
  padding: 0;
  position: relative;
  background: #141414;
}
.services-wrapper
{
  padding: 50px 0px;
}
.back-h
{
  text-transform: uppercase;
  font-weight: 600;
  padding: 30px 0; 
  color: #ffffff;
}
.services-wrapper span
{
  display: inline-block;
  height: 25px;
  width: 25px;
  margin-bottom: 10px;
  background: #E6AF2E;
}
.services-wrapper p
{
  color: #ffffff;
}
.services-card
{
  position: relative;
  padding: 0;
  height: 460px;
  background: #141414;
}
.services-card .contain
{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  padding: 30px;
  transform: translate(-50%,-50%);
  z-index: 50;
  text-align: center;
}
.services-card img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
}
.services-card .trans-div
{
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  z-index: 20;
  height: 100%;
  width: 100%;
  background: rgb(0, 0, 0,.7);
}
.contain h3
{
  font-family: 'Gotham-Book-Regular',sans-serif;
  margin-bottom: 30px;
  color: #ffffff;
}
.contain span
{
  display: inline-block;
  padding: 10px;
  background: #E6AF2E;
}
.contain span a
{
  display: none;
}
.services-card:hover .trans-div
{
  display: block;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.services-card:hover a
{
 display: inline-block;
 color: #ffffff;
 -webkit-transition: all .5s ease-in-out;
 -moz-transition: all .5s ease-in-out;
 transition: all .5s ease-in-out;
}
.contain span a:hover 
{
  text-decoration: none;
}
.services-card:hover .img-w
{
  opacity: 1;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}


/*
** 3.4 the the fourth section the prices
*/
.prices-row
{
  padding: 20px 50px;
}
.prices-title h2
{
  text-transform: uppercase;
  font-weight: 600;
  padding: 30px 0; 
}
.price-col
{
  padding: 10px;
}
.price-col-wrapper
{
  padding: 0 0 10px 0;
  -webkit-box-shadow: 0 5px 30px rgba(0,0,0,.12);
  -moz-box-shadow: 0 5px 30px rgba(0,0,0,.12);
  box-shadow: 0 5px 30px rgba(0,0,0,.3);
}
.price-col img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.price-col .prices-img
{
  position: relative;
  width: 100%;
  height: 360px;
  margin-bottom: 20px;
  overflow: hidden;
}
.img-2
{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.price-col h4
{
  font-family: 'Gotham-Book-Regular',sans-serif;
  color: #141414;
}
.price-col p
{
  color: #141414;
  font-weight: bolder;
}
.prices-img span
{
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 10px 20px;
  display: inline-block;
  transform: translate(-50%,1000%);
  background: #000000;
  color: #ffffff;
  z-index: 300;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.prices-img:hover .more-span
{
  transform: translate(-50%,-50%);
}
.prices-img:hover .img-2
{
  opacity: 1;
}
.prices-img span a
{
  color: #ffffff;
}
.prices-img span a:hover
{
  text-decoration: none;
}



/*
** 3.5 the the fifth section the contact
*/
.contact-col
{
  padding: 140px 60px;
  background: #f7f7f7;
  color: #141414;
}
.contact-col P,.newsletter-col p
{
  color: #b2b2b2;
}
.contact-col a
{
  display: inline-block;
  padding: 10px 20px;
  background: #141414;
  color: #f7f7f7;
  border: 1px solid #141414;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.contact-col a:hover
{
  background: #f7f7f7;
  color: #141414;
  text-decoration: none;
}
.newsletter-col
{
  padding: 140px 60px;
  background: #141414;
  color: #ffffff;
}
.newsletter-col input
{
  display: flex;
  padding: 5px;
  border: none;
  outline: none;
  border-bottom: 3px solid #ffffff;
  background: #141414;
  color: #ffffff;
}
.newsletter-col ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color:   #f7f7f7;
}
.newsletter-col form
{
  display: flex;
}
.newsletter-col .mc4wp-form-fields
{
  display: flex;
  width: 100%;
}
.newsletter-col .newsletter-text
{
  width: 60%;
}
.newsletter-col .newsletter-submit
{
  cursor: pointer;
}
.newsletter-col .newsletter-submit:hover
{
  color: #E6AF2E;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

/*
** 3.7 the the sixth section the instagram section
*/
.instagram-col
{
  padding: 0;
}
.insta-title
{
  padding: 0;
  padding: 20px 20px 20px 60px;
  background: #141414;
  color: #f7f7f7;
  text-transform: uppercase;
}
.insta-hastag
{
  padding: 20px 60px;
  margin: 0;
  background: #f7f7f7;
}

.hastag-h
{
  display: inline-block;
  /*padding: 20px 60px;*/
  background: #f7f7f7;
  color: #141414;
  margin: 0;
}

.insta-col
{
  padding: 0px;
  height: 300x;
}
.insta-col img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.insta-feed
{
  padding: 0;
}
.sb_instagram_header
{
  display: none;
}
.sbi_follow_btn 
{
  margin-left: 5px;
  margin-bottom: 10px;
}





/*
=========================================================
** .. The footer styling
=========================================================

** ..1 the big wrapper and the image  ==============================
*/
footer
{
  padding: 200px 60px 30px 60px;
  background: #141414;
  color: #ffffff;
}

.footer-col
{
  padding: 0;
}

.footer-menu
{
  list-style: none;
  padding: 0 0 0 50px;
  margin: 0;
  text-transform: uppercase;
}
.footer-menu .menu-item
{
  display: inline-block;
  padding: 10px; 
}
.footer-menu .menu-item a
{
  color: #ffffff;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.footer-menu .menu-item a:hover
{
  text-decoration: none;
  color: #E6AF2E;
}


.footer-logo
{
  padding: 0 0 0 60px;
}

.footer-social-wrapper span
{
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0 5px;
}
.site-info>span
{
  display: inline-block;
  padding: 45px 5px;
}
.cube
{
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #E6AF2E;
  margin-right: 5px;
}





/* ===================================== Responsive Setup ============================*/

@media only screen and (max-width: 992px)
{
  /*
  **1- 1.2 fonts styling 
  */
  h1
  {
    font-size: 48px;
    line-height: 72px;
  }
  h2
  {
    font-size: 40px;
    line-height: 60px;
  }
 h3
  {
    font-size: 32px;
    line-height: 48px;
  }
 h4
  {
    font-size: 20px;
    line-height: 30px;
  }
  h5
  {
    font-size: 18px;
    line-height: 27px;
  }

  /*
  **2- services card height
  */
  .services-card
  {
    height: 320px;
  }

  /*
  **3-  3.4 prices img height
  */
  .price-col .prices-img
  {
    height: 280px;
  }

  /*
  ** .- .. the footer
  */
  .site-info
  {
    padding: 0;
  }
  .site-info>span
  {
    display: block;
    padding: 5px 60px;

  }

}


@media only screen and (max-width: 768px)
{
  /*
  **1- 1.2 fonts styling 
  */
  h1
  {
    font-size: 40px;
    line-height: 60px;
  }
  h2
  {
    font-size: 36px;
    line-height: 44px;
  }
 h3
  {
    font-size: 28px;
    line-height: 42px;
  }
 h4
  {
    font-size: 20px;
    line-height: 30px;
  }
  h5
  {
    font-size: 18px;
    line-height: 27px;
  }

  /*
  **2-  2.5 nav-menu-wrapper
  */
  .nav-menu-wrapper
  {
    width: 100%;
  }

  /*
  **  3.4 prices img height
  */
  .price-col .prices-img
  {
    height: auto;
  }


}