/*-----------------------------------------------------------------------------------
  Template Name: Uniqlo-Minimalist eCommerce HTML5 Template.
  Template URI: #
  Description: Uniqlo is a unique website template designed in HTML with a simple & beautiful look. There is an excellent solution for creating clean, wonderful and trending material design corporate, corporate any other purposes websites.
  Author: HasTech
  Author URI: https://themeforest.net/user/hastech/portfolio
  Version: 1.1
-----------------------------------------------------------------------------------*/


 
/*======================================

[  Table of contents  ]


  01. Reset
  02. Helper Classes
  03. Typography
` 04. Transtion
  05. Images
  06. Bg-Color
  07. Social Icon Text Color
  08. Social Icon Bg Color
  09. Text Color
  10. Bg Images
  11. Background overlay
  12. Background Black Overlay
  13. Input
  14. Basic margin padding
  15. Margin top
  16. Margin bottom
  17. Padding top
  18. Padding bottom
  19. Page section padding
  20. Page section margin
  21. Custom cloumn
  22. Moz Placeholder

[ End table content ]
======================================*/

/*
    font-family: 'Poppins', sans-serif;

    font-family: 'Dosis', sans-serif;
*/

/*------------------
  01. Reset
--------------------*/
*,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
a {
  margin: 0;
  padding: 0;
}

/*----------------------
  02. Helper Classes
------------------------*/
.fix {
    overflow: hidden
}
.browserupgrade {
    margin: 0.2em 0;
    background: var(--uq-colour-cccccc, #ccc);
    color: var(--uq-black, #000);
    padding: 0.2em 0;
}
.owl-carousel {
  touch-action: manipulation; 
}
/*-----------------------
  03. Typography
------------------------*/
html {
    font-size: 100%;
}
@media all and (max-width: 768px) {
    html {
        font-size: 87.5%;
    }
}
body {
    font-family: var(--uq-font-poppins, 'Poppins'), var(--uq-font-sans-serif, sans-serif);
    color: var(--uq-colour-303030, #303030);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
p{
    font-family: var(--uq-font-poppins, 'Poppins'), var(--uq-font-sans-serif, sans-serif);
    color: var(--uq-colour-303030, #303030);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;

}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--uq-font-poppins, 'Poppins'), var(--uq-font-sans-serif, sans-serif);
    color: var(--uq-colour-303030, #303030);
    font-weight: 400;
    font-variant-ligatures: common-ligatures;
    margin-top: 0;
    margin-bottom: 0;
}
h1, .h1 {
    font-size: 30px;
    font-weight: 400;
}
h2, .h2 {
    font-size: 30px;
    font-weight: 400;
}
h3, .h3 {
    font-size: 14px;
    font-weight: 400;
}
h4, .h4 {
    font-size: 14px;
    font-weight: 400;
}
h5, .h5 {
    font-size: 18px;
    font-weight: 400;
}
h6, .h6 {
    font-size: 16px;
    font-weight: 300;
}
@media all and (max-width: 767px) {
    h1, .h1 {
        font-size: 30px;
        font-weight: 400;
    }
    h2, .h2 {
        font-size: 24px;
    }
    h3, .h3 {
        font-size: 20px;
    }
    h4, .h4 {
        font-size: 16px;
    }
    h5, .h5 {
        font-size: 16px;
    }
    h6, .h6 {
        font-size: 16px;
    }
}
ul,
ol {
    list-style: none;
}

ol {
    list-style-type: upper-roman;
    list-style-position: inside;
}
strong {
    font-weight: 600;
}
hr {
    margin: 1.625em 0;
    border-color: var(--uq-colour-e6e6e6, #e6e6e6);
}
a:hover,
a:focus,
a:active {
    text-decoration: none;
    outline: none;
}
a {
    color: var(--uq-colour-333333, #333);
    text-decoration: none;
}
a:hover,
a:focus,
a:active {
    color: var(--uq-colour-ff4136, #ff4136);
}
p a:hover,
p a:focus,
p a:active {
    color: var(--uq-colour-ff4136, #ff4136);
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit
}

body {
  overflow-x: hidden;
}
/*---------------------
` 04. Transtion
-----------------------*/
a,
.btn {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
input,

select,
textarea {
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}

/*---------------------
  05. Images
----------------------*/
img, .img {
  max-width: 100%;
  transition: all 0.3s ease-out 0s;
}
p + img,
img:last-child {
  margin-bottom: 0;
}
body {
  background: var(--uq-white, #fff);
}
.mark, mark {
    background: var(--uq-colour-ff4136, #ff4136) none repeat scroll 0 0;
    color: var(--uq-white, #ffffff);
}
/*-------------------------------
  06. Bg-Color
-------------------------------------*/
.bg__theme {
    background: var(--uq-colour-ff4136, #ff4136);
}
.bg__white {
  background: var(--uq-white, #fff);
}
.bg__gray {
    background: var(--uq-colour-f3f3f3, #f3f3f3);
}
.bg__dark {
    background: var(--uq-colour-151515, #151515);
}
.bg__cat--1{
    background-color: var(--uq-colour-00c8ff, #00c8ff);
}
.bg__cat--2{
    background-color: var(--uq-colour-f5f6f8, #f5f6f8);
}
.bg__cat--3{
    background-color: var(--uq-colour-ebebeb, #ebebeb);
}

.bg__cat--4{
    background-color: var(--uq-colour-f4f4f4, #f4f4f4);
}
.bg__cat--5{
    background-color: var(--uq-colour-f2f2f2, #f2f2f2);
}




/*-------------------------------
  07. Social Icon Text Color
-------------------------------*/
.color--facebook {
  color: var(--uq-colour-3b5998, #3b5998);
}
.color--twitter {
  color: var(--uq-colour-34465d, #34465d);
}
.color--googleplus {
  color: var(--uq-colour-dd4b39, #dd4b39);
}
.color--instagram {
  color: var(--uq-colour-e4405f, #e4405f);
}
.color--pinterest {
  color: var(--uq-colour-cb2027, #cb2027);
}
.color--dribbble {
  color: var(--uq-colour-ea4c89, #ea4c89);
}
.color--behance {
  color: var(--uq-colour-053eff, #053eff);
}
/*-------------------------------
  08. Social Icon Bg Color
-------------------------------*/
.bg--facebook {
  background: var(--uq-colour-3b5998, #3b5998);
}
.bg--twitter {
  background: var(--uq-colour-00aced, #00aced);
}
.bg--googleplus {
  background: var(--uq-colour-dd4b39, #dd4b39);
}
.bg--google {
  background: var(--uq-colour-bd081c, #bd081c);
}
.bg--instagram {
  background: var(--uq-colour-125688, #125688);
}
.bg--pinterest {
  background: var(--uq-colour-cb2027, #cb2027);
}
.bg--dribbble {
  background: var(--uq-colour-ea4c89, #ea4c89);
}
.bg--behance {
  background: var(--uq-colour-053eff, #053eff);
}
.bg--linkedin {
  background: var(--uq-colour-0189c3, #0189c3);
}
.bg--flickr {
  background: var(--uq-colour-0063dc, #0063DC);
}
.bg--skype {
  background: var(--uq-colour-00bbf0, #00bbf0);
}
.bg--youtube {
  background: var(--uq-colour-d84939, #d84939);
}
.bg--vimeo {
  background: var(--uq-colour-96d3f0, #96d3f0);
}
.bg--yahoo {
  background: var(--uq-colour-85268c, #85268c);
}
.bg--paypal {
  background: var(--uq-colour-4b6ea8, #4b6ea8);
}



/*-------------------------------
  08. Social Icon Bg Color
-------------------------------*/
.bg--facebook:hover {
  background: var(--uq-colour-3b5998, #3b5998);
}
.bg--twitter:hover {
  background: var(--uq-colour-00aced, #00aced);
}
.bg--googleplus:hover {
  background: var(--uq-colour-dd4b39, #dd4b39);
}
.bg--instagram:hover {
  background: var(--uq-colour-125688, #125688);
}

/*-----------------------------
  09. Text Color
--------------------------------*/
.text--theme { 
  color: var(--uq-colour-ff4136, #ff4136);
 }
.text--blue { 
  color: var(--uq-colour-ff4136, #ff4136);
 }
.text--white { 
  color: var(--uq-white, #fff) ;
}
.text--black { 
  color: var(--uq-colour-363636, #363636); 
}
.text--white { 
  color: var(--uq-white, #fff);
 }

/*--------------------------
  10. Bg Images
----------------------------*/

 .bg--1 {
  background: var(--uq-colour-000000-a000, rgba(0, 0, 0, 0)) url("../../images/bg/1.jpg") no-repeat fixed 0 0 / cover ;
}
 .bg--2 {
  background: var(--uq-colour-000000-a000, rgba(0, 0, 0, 0)) url("../../images/bg/2.jpg") no-repeat scroll center center / cover ;
}
 .bg--3 {
  background: var(--uq-colour-000000-a000, rgba(0, 0, 0, 0)) url("../../images/others/1.jpg") no-repeat scroll center center / cover ;
}
 .bg--4 {
  background: var(--uq-colour-000000-a000, rgba(0, 0, 0, 0)) url("../../images/bg/6.jpg") no-repeat scroll center center / cover ;
}

/*----------------------------
  11. Background overlay 
---------------------------------*/
[data__overlay] {
    position: relative;
}
[data__overlay]:before {
    position: absolute;
    content: '';
    background: var(--uq-colour-3f51b5, #3f51b5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
[data__overlay] *:not(.background-image-holder):not(.instafeed--background) {
    z-index: 2;
}
[data__overlay].image--light:before {
    background: var(--uq-white, #fff);
}
[data__overlay].bg--primary:before {
    background: var(--uq-colour-425cbb, #425cbb);
}
[data__overlay="1"]:before {
    opacity: 0.1;
}
[data__overlay="2"]:before {
    opacity: 0.2;
}
[data__overlay="3"]:before {
    opacity: 0.3;
}
[data__overlay="4"]:before {
    opacity: 0.4;
}
[data__overlay="5"]:before {
    opacity: 0.5;
}
[data__overlay="6"]:before {
    opacity: 0.6;
}
[data__overlay="7"]:before {
    opacity: 0.7;
}
[data__overlay="8"]:before {
    opacity: 0.8;
}
[data__overlay="9"]:before {
    opacity: 0.9;
}
[data__overlay="10"]:before {
    opacity: 1;
}


/*---------------------------------
  12. Background Black Overlay 
---------------------------------*/

[data--black__overlay] {
    position: relative;
}

[data--black__overlay]:before {
    position: absolute;
    content: '';
    background: var(--uq-black, #000);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
[data--black__overlay="1"]:before {
    opacity: 0.1;
}
[data--black__overlay="2"]:before {
    opacity: 0.2;
}
[data--black__overlay="3"]:before {
    opacity: 0.3;
}
[data--black__overlay="4"]:before {
    opacity: 0.4;
}
[data--black__overlay="5"]:before {
    opacity: 0.5;
}
[data--black__overlay="6"]:before {
    opacity: 0.6;
}
[data--black__overlay="7"]:before {
    opacity: 0.7;
}
[data--black__overlay="8"]:before {
    opacity: 0.8;
}
[data--black__overlay="9"]:before {
    opacity: 0.9;
}
[data--black__overlay="10"]:before {
    opacity: 1;
}
[data--black__overlay="0"]:before {
    opacity: 0;
}

[data--black__overlay="0"] > div{
  z-index: 5;
  color: var(--uq-white, #fff);
}

/*-------------------------
  13. Input
--------------------------*/
input[type=text],
input[type=email],
input[type=password]{
    width: 100%;
}
select {
    width: 100%;
    
}
input:focus {
    background: var(--uq-colour-000000-a000, transparent);
    border: 1px solid var(--uq-colour-ff4136, #ff4136);
}
textarea {
    resize: none;
    background: var(--uq-colour-ff4136, #ff4136);
    border: 1px solid var(--uq-colour-ff4136, #ff4136);
    padding: 10px;
    width: 100%;
    font-size: 14px;
}
textarea:focus {
    background: var(--uq-colour-000000-a000, transparent);
    border: 1px solid var(--uq-colour-ff4136, #ff4136);
    outline: none;
}
/*----------------------------
  14. Basic margin padding
-----------------------------*/
.m--0 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}
.p--0 {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}
/*---------------------------
  15. Margin top
--------------------------*/
.mt--0 { margin-top: 0 }
.mt--10 { margin-top: 10px }
.mt--15 { margin-top: 15px }
.mt--20 { margin-top: 20px }
.mt--30 { margin-top: 30px }
.mt--40 { margin-top: 40px }
.mt--50 { margin-top: 50px }
.mt--60 { margin-top: 60px }
.mt--70 { margin-top: 70px }
.mt--80 { margin-top: 80px }
.mt--90 { margin-top: 90px }
.mt--100 { margin-top: 100px }
.mt--110 { margin-top: 110px }
.mt--120 { margin-top: 120px }
.mt--130 { margin-top: 130px }
.mt--140 { margin-top: 140px }
.mt--150 { margin-top: 150px }

/*-----------------------------
  16. Margin bottom
-------------------------------*/
.mb--0 { margin-bottom: 0 }
.mb--10 { margin-bottom: 10px }
.mb--15 { margin-bottom: 15px }
.mb--20 { margin-bottom: 20px }
.mb--30 { margin-bottom: 30px }
.mb--40 { margin-bottom: 40px }
.mb--50 { margin-bottom: 50px }
.mb--60 { margin-bottom: 60px }
.mb--70 { margin-bottom: 70px }
.mb--80 { margin-bottom: 80px }
.mb--90 { margin-bottom: 90px }
.mb--100 { margin-bottom: 100px }
.mb--110 { margin-bottom: 110px }
.mb--120 { margin-bottom: 120px }
.mb--130 { margin-bottom: 130px }
.mb--140 { margin-bottom: 140px }
.mb--150 { margin-bottom: 150px }

/*--------------------------
  17. Padding top
---------------------------*/
.pt--0 { padding-top: 0 }
.pt--10 { padding-top: 10px }
.pt--15 { padding-top: 15px }
.pt--20 { padding-top: 20px }
.pt--30 { padding-top: 30px }
.pt--40 { padding-top: 40px }
.pt--50 { padding-top: 50px }
.pt--60 { padding-top: 60px }
.pt--70 { padding-top: 70px }
.pt--80 { padding-top: 80px }
.pt--90 { padding-top: 90px }
.pt--100 { padding-top: 100px }
.pt--110 { padding-top: 110px }
.pt--120 { padding-top: 120px }
.pt--130 { padding-top: 130px }
.pt--140 { padding-top: 140px }
.pt--150 { padding-top: 150px }

/*------------------------
  18. Padding bottom
---------------------------*/
.pb--0 { padding-bottom: 0 }
.pb--10 { padding-bottom: 10px }
.pb--15 { padding-bottom: 15px }
.pb--20 { padding-bottom: 20px }
.pb--30 { padding-bottom: 30px }
.pb--40 { padding-bottom: 40px }
.pb--50 { padding-bottom: 50px }
.pb--60 { padding-bottom: 60px }
.pb--70 { padding-bottom: 70px }
.pb--80 { padding-bottom: 80px }
.pb--90 { padding-bottom: 90px }
.pb--100 { padding-bottom: 100px }
.pb--110 { padding-bottom: 110px }
.pb--120 { padding-bottom: 120px }
.pb--130 { padding-bottom: 130px }
.pb--140 { padding-bottom: 140px }
.pb--150 { padding-bottom: 150px }


/*------------------------------
  19. Page section padding 
-------------------------------*/
.ptb--0 { padding: 0 }
.ptb--10 { padding: 10px 0 }
.ptb--20 { padding: 20px 0 }
.ptb--30 { padding: 30px 0 }
.ptb--40 { padding: 40px 0 }
.ptb--50 { padding: 50px 0 }
.ptb--60 { padding: 60px 0 }
.ptb--70 { padding: 70px 0 }
.ptb--80 { padding: 80px 0 }
.ptb--90 { padding: 90px 0 }
.ptb--100 { padding: 100px 0 }
.ptb--110 { padding: 110px 0 }
.ptb--120 { padding: 120px 0 }
.ptb--130 { padding: 130px 0 }
.ptb--140 { padding: 140px 0 }
.ptb--150 { padding: 150px 0 }

/*---------------------------
  20. Page section margin 
-----------------------------*/
.mtb--0 { margin: 0 }
.mtb--10 { margin: 10px 0 }
.mtb--15 { margin: 15px 0 }
.mtb--20 { margin: 20px 0 }
.mtb--30 { margin: 30px 0 }
.mtb--40 { margin: 40px 0 }
.mtb--50 { margin: 50px 0 }
.mtb--60 { margin: 60px 0 }
.mtb--70 { margin: 70px 0 }
.mtb--80 { margin: 80px 0 }
.mtb--90 { margin: 90px 0 }
.mtb--100 { margin: 100px 0 }
.mtb--110 { margin: 110px 0 }
.mtb--120 { margin: 120px 0 }
.mtb--130 { margin: 130px 0 }
.mtb--140 { margin: 140px 0 }
.mtb--150 { margin: 150px 0; }

/*------------------------
 Others
-------------------------*/
p.form-messege{
  margin-top:15px;font-size:14px
}
p.success {
  color: var(--uq-colour-008000, green);
}
p.error {
  color: var(--uq-colour-ff0000, red);
}

/*-----------------------------------------
  22. Moz Placeholder
------------------------------------------*/

*::-moz-selection {
    background: var(--uq-colour-ff4136, #ff4136);
    color: var(--uq-white, #fff);
    text-shadow: none;
}
::-moz-selection {
    background: var(--uq-colour-ff4136, #ff4136);
    color: var(--uq-white, #fff);
    text-shadow: none;
}
::selection {
    background: var(--uq-colour-ff4136, #ff4136);
    color: var(--uq-white, #fff);
    text-shadow: none;
}

input::-moz-placeholder {
    color: var(--uq-colour-333333, #333);
    font-size: 14px;
}



input [type="text"]:focus, 
input [type="text"]:focus::-moz-placeholder,
input [type="email"]:focus, 
input [type="email"]:focus::-moz-placeholder{
  color: var(--uq-colour-333333, #333333);
}

input::-moz-placeholder {
  color: var(--uq-colour-444444, #444) !important;
  opacity: 1;
}
input::-webkit-input-placeholder {
  color: var(--uq-colour-444444, #444) !important;
  opacity: 1;
}
input::-moz-placeholder {
  color: var(--uq-colour-444444, #444) !important;
  opacity: 1;
}
input:-ms-input-placeholder {
  color: var(--uq-colour-444444, #444) !important;
  opacity: 1;
}
input:-moz-placeholder {
  color: var(--uq-colour-444444, #444) !important;
  opacity: 1;
}