/*
BASE THEME STYLING VARIABLES
*/

body {

    color: $black-color;

    font-family: $primary-font;

    font-weight: $font-regular;

    font-size: $default-text;

    line-height: 28px;

    background: $black-color;

}



* {

    outline: none;

}



h1,

h2,

h3,

h4,

h5,

h6,

ul,

li,

dl,

dt,

dd {

    margin: 0;

    padding: 0;

    list-style: none;

}



strong,

b {

    font-weight: $font-bold;

}



.semibold {

    font-weight: $font-semibold;

}



input {

    &:focus {

        outline: none;

    }

}



a {

    color: $color-black;

}



a:focus {

    color: $color-black;

    text-decoration: none;

    outline: none;

}



a:hover {

    color: $color-black;

    text-decoration: none;

}



.h1 {

    margin: 0;

    padding: 0;

    font-size: 60px;

    font-weight: $font-light;

    line-height: 72px;

}



.h2 {

    margin: 0;

    padding: 0;

    font-size: 45px;

    font-weight: $font-light;

}



.h3 {

    margin: 0;

    padding: 0;

    font-size: 36px;

    font-weight: $font-light;

}



h4,

.h4 {

    margin: 0;

    padding: 0;

    font-size: 28px;

    font-weight: $font-light;

    line-height: 40px;

}



.h5 {

    margin: 0;

    padding: 0;

    font-size: 18px;

    font-weight: $font-light;

    line-height: 28px;

}



@media (max-width: 767px) {

    .h1 {

        font-size: 36px;

        line-height: 48px;

    }

    .h3 {

        font-size: 24px;

        line-height: 36px;

    }

}



@media (min-width: 768px) and (max-width: 1023px) {

    .h1 {

        font-size: 36px;

        line-height: 48px;

    }

}



.text-large {

    font-size: 20px;

    line-height: 28px;

}



.text-small {

    font-size: 16px;

    font-weight: $font-light;

    line-height: 24px;

}



.text-tiny {

    color: $color-dark-grey;

    font-size: 14px;

    line-height: 22px;

}



.button-solid {}



.button-solid:focus {}



.button-solid:hover {}



.button-outline {}



.button-outline:focus {}



.button-outline:hover {}

.btn {
    display: inline-block;
    padding: 10px 25px !important;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 4px;
}


.mt-btn-blue {
    border: 1px solid $primary-color-dark;
    color: #fff;
    border-radius: 5px!important;
    margin-bottom: 10px;
    background-color: $primary-color-dark;
    transition-duration: .8s;
}
.mt-btn-blue:hover {
    background-color: #2f6dda;
    color: #ffffff;
    transition-duration: .8s;
    border: 1px solid transparent;
}

.mt-btn-orange {
    border: 1px solid $secondary-color-dark;
    color: #fff;
    border-radius: 5px!important;
    margin-bottom: 10px;
    background-color: $secondary-color-dark;
    transition: all .8s;
}

.mt-btn-orange:hover{
    background-color: #e28600;
    color: #ffffff;
    transition-duration: .8s;
    border: 1px solid transparent;
}

.mt-btn-white {
    border: 1px solid #fff;
    color: $primary-color-dark;
    border-radius: 5px!important;
    margin-bottom: 10px;
    background-color: #fff;
    transition: all .8s;
}

.mt-btn-white:hover{
    background-color: #fff;
    color: $primary-color-dark;
    transition-duration: .8s;
    border: 1px solid #fff;
}

.btn-transparent-blue {
    border: 1px solid $primary-color-dark;
    color: $primary-color-dark;
    border-radius: 5px!important;
    font-weight: 700;
    margin-bottom: 10px;
    /* background-color: $primary-color; */
    transition: all .8s;
}
.btn-transparent-blue:hover {
    background-color: $primary-color-dark;
    color: #fff;
    border-color: transparent;
    transition-duration: .8s;
}


.btn-transparent-orange {
    border: 1px solid $secondary-color-dark;
    color: $secondary-color-dark;
    border-radius: 5px!important;
    font-weight: 700;
    margin-bottom: 10px;
    background-color: transparent;
    transition: all .8s;    
}

.btn-transparent-orange:hover {
    background-color: $secondary-color-dark;
    color: #fff;
    border-color: transparent;
    transition-duration: .8s;
}

.btn-transparent-white {
    border: 1px solid #fff;
    color: #fff;
    border-radius: 5px!important;
    font-weight: 700;
    margin-bottom: 10px;
    background-color: transparent;
    transition: all .8s;
}

.btn-transparent-white:hover {
    background-color: #fff;
    color: #333;
    border-color: #fff;
    transition-duration: .8s;
}

.btn-portfolio {padding: 0px 10px;font-weight: 400;font-size: 12px;margin-bottom: 0px;}

.button-transparent{

    border: 1px solid #929292;

    border-radius: 5px!important;

    padding: 10px 25px;

    font-weight: $font-semibold;

    margin-bottom: 10px;
    transition: all .3s;

}

.button-transparent-primary{
    border-color: $primary-color;
    color: $primary-color;
}

.button-transparent-secondary{
    border-color: $secondary-color;
    color: $secondary-color;
}

.button-transparent-primary:focus, .button-transparent-secondary:focus {
    background-color: transparent;
    border-color: $white-color;
}


.button-transparent-primary:hover {
    background-color: $primary-color;
    color: $white-color;
}


.button-transparent-secondary:hover{
    background-color: $secondary-color;
    color: $white-color;
}




.wdp-heading {

    margin-bottom: 50px;

}



.wdp-heading .pre-title {

    margin-bottom: 15px;

    padding: 0;

    font-size: 22px;

    text-transform: capitalize

}



.wdp-heading .main-title {

    padding: 0;

    margin: 0 0 20px 0;

    font-size: 45px;

    font-weight: 600;

    text-transform: capitalize

}



.wdp-heading .title-desc {

    margin: 0;

    padding: 0;

    font-size: 16px;

    color: #545454;

    padding: 0 20px

}

.wdp-heading-white .pre-title {color: #f1f1f1;}
.wdp-heading-white .main-title{color: #ffffff;}
.wdp-heading-white .title-desc{color: #f1f1f1;}

.btn-blue {

    background-color: $primary-color;

    color: $white-color

}



.btn-blue:focus,

.btn-blue:hover {

    background-color: $primary-color-hover;

    color: $white-color

}





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

                                CONTACT MODAL CSS

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



.modal-container {

    background-color: #ff6363;

    text-align: center;

}



.modal-services {

    min-height: 500px;

    padding: 0px 0px;

}



.modal-tagline {

    color: #fff;

    margin: 0px;

    padding: 20px 0px;

    font-size: 16px;

    font-weight: 700;

}



.mt-modal-Info-icon i {

    color: #fff;

    font-size: 50px;

}



.modal-contact-list {

    margin: 0px;

    padding: 0px;

}



.modal-contact-list li {

    margin: 0px;

    padding: 0px;

    display: inline-block;

    text-align: left;

    color: #fff;

    font-size: 12px;

}



.modal-contact-list li i {

    display: inline-block;

}



.modal-services ul {

    margin: 0px;

    padding: 0px;

    margin: 30px 0px;

}



.modal-services ul li {

    margin: 0px;

    padding: 0px 15px;

    text-align: center;

}



.modal-services ul li h3 a {

    margin: 0px;

    padding: 0px;

}



.mt-modal-Info .mt-modal-Info-head {

    font-size: 18px;

    color: #333;

    position: relative;

    text-align: center;

    margin-top: 10px;

}



.mt-modal-Info .mt-modal-Info-head h5 {

    color: #fff;

    padding-bottom: 10px;

}



.mt-modal-Info .mt-modal-Info-head:after {

    content: '';

    position: absolute;

    left: 47%;

    bottom: -2px;

    width: 30px;

    height: 2px;

    margin: 0 auto;

    background: #e4552e;

}



.mt-modal-Info ul.mt-modal-Info-list {

    width: 100%;

    display: block;

    padding: 10px 0;

    margin-left: 12%;

}



.mt-modal-Info ul.mt-modal-Info-list li {

    width: 25%;

    float: left;

    display: block;

    padding: 0 5px;

    text-align: center;

}



.mt-modal-Info ul.mt-modal-Info-list li .promCirInfo {

    -moz-border-radius: 50%;

    -webkit-border-radius: 50%;

    border-radius: 50%;

    width: 48px;

    height: 48px;

    text-align: center;

    display: inline-block;

}



.mt-modal-Info ul.mt-modal-Info-list li .promCirInfo i {

    font-size: 28px;

    color: #f1f1f1;

    border: 3px solid #ffffff;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    line-height: 45px;

}



.mt-modal-Info ul.mt-modal-Info-list li .promLeadListTextInfo {

    font-size: 12px;

    color: #fdfdfd;

    display: inline-table;

    line-height: 16px;

    padding: 5px 0;

    margin-top: 10px;

}





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

                            COMMON REQUIRED CLASSES

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



.list-inline {

    margin-left: -5px;

}



.list-inline,

.list-unstyled {

    padding-left: 0;

    list-style: none;

}



.list-inline>li {

    display: inline-block;

    padding-right: 5px;

    padding-left: 5px;

}

.text-light{color: #fff}
.wdp-section{padding: 50px 0px;background-color: #fff;}
.wdp-section-grey{background-color: #f7f7f7;}
.wdp-section-blue{background-color: #f7faff;}