/*!
 * Name: layout.css
 * Date: 2021-12-31
 * Credits: Mohammed Ba'ashar, https://www.bytsnbytes.com
 * Email: mabaashar@gmail.com;
 */

@charset "UTF-8";

/*-----------------------------------------------------------------------------------
  0. UI
  1. components
  2. Backgrounds
  3. text colors
  4. buttons

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

/*
=========================================
0. UI (user interface)
=========================================
*/

/*heade*/
.navbar{
 background-image: linear-gradient(to right, #fca311, #ec604f, #af3e6b, #5c3365, #14213d);
}

/*footer*/
.footer{
 background-image: linear-gradient(to right, #fca311, #ec604f, #af3e6b, #5c3365, #14213d);
}
/*navbar icon*/
.navbar-toggler-icon{
    color: #ffffff !important;
}
/*
=========================================
1. components
=========================================
*/

/*
=========================================
2. Backgrounds
=========================================
*/
.bg_img_light:before{
    position: absolute;
    content: '';
    background-image: linear-gradient(30deg, rgba(20, 33, 61, 0.35) 15%, rgba(252, 163, 17, 0.55) 100%);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.bg_img_light{
    position: relative;
}
.bg_img_light_2:before{
    position: absolute;
    content: '';
    background-image: linear-gradient(120deg, rgba(252, 163, 17, 0.35) 15%, rgba(46, 77, 142, 0.55) 100%);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.bg_img_light_2{
    position: relative;
}
.bg_img_light_3:before{
    position: absolute;
    content: '';
    background-image: linear-gradient(90deg, rgba(252,145,17,1) 6%, rgba(252,163,17,1) 13%, rgba(252,90,17,1) 46%); 
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.bg_img_light_3{
    position: relative;
}

/*
=========================================
3. text colors
=========================================
*/

.text_special{
    color: #EA9102;

}
.text_special_2{
    color: #213766;

}

/*
=========================================
4. buttons
=========================================
*/

.hb_btn_light {
  margin: 10px auto;
  border: yellow;
  padding: 5px 5px;
  font-size: 14px;
  position: relative;
  background: #EA9102;
  color: #000;


}

.hb_btn_light::before {
  transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  content: '';
  width: 20%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #FED188;
}

.hb_btn_light .text_light {
  color: #000;
  mix-blend-mode: color-burn;

}

.hb_btn_light:hover::before {
  background: #000;
  width: 100%;
}

.hb_btn_light.rounded {
  border-radius: 50px;
  background: #EA9102;

}

.hb_btn_light.rounded .text_light {
  color: #000;
  mix-blend-mode: color-burn;

}

.hb_btn_light.rounded::before {
  border-radius: 50px;
  width: 25%;
  background: #FED188;
}

.hb_btn_light.rounded:hover::before {
  background: #FED188;
  width: 100%;
}