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

    Template Name: SEOQ - SEO & Digital Marketing Agency HTML Template.
    Author: RRdevs
    Support: https://support.rrdevs.net/
    Description: SEOQ - SEO & Digital Marketing Agency HTML Template.
    Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

	-----------------
    01. THEME CSS
	-----------------
		1.1 Theme Default
		1.2 Default Spacing	
        1.3 Preloader
        1.4 Scroll to Top
        
    -----------------
    02. HEADER CSS
	-----------------
		2.1 Header Style 1
		2.2 Header Style 2
		2.3 Header Style 3
		2.4 Header Style 4
		2.5 Header Style 5
		2.6 Mobile Menu

    -----------------
    03. HEADER CSS
	-----------------
		3.1 Section Title

	-----------------
    04. COMPONENTS CSS
	-----------------
        4.1 Hero
        4.2 Breadcrumb
		4.3 About
		4.4 Service
		4.5 Service Details
		4.6 Portfolio
		4.7 Team
		4.8 Testimonial
		4.9 Skill
		4.10 Stack Card
		4.11 Quote Form
		4.12 Pricing
		4.13 Integration
		4.14 Horizontal Accordion
		4.15 Fun Fact
		4.16 FAQ
		4.17 CTA
		4.18 Case Study
		4.19 Contact
		4.20 Brand
		4.21 Blog
		4.22 Blog Details
		4.23 Error
		4.24 Login

	---------------------------------
	05. FOOTER CSS
	---------------------------------
		5.1 Footer Style 1
		5.2 Footer Style 2
		5.3 Footer Style 3
		5.4 Footer Style 4
		5.5 Footer Style 5

**********************************************/


/* 1.1 Theme Default */

@use '../utils' as *;
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@300;400;500;600;700;800;900&family=Mulish:wght@300;400;500;600;700;800;900&display=swap');
body {
    font-family: $mulish;
    font-weight: 400;
    font-style: normal;
    color: $body-color;
    overflow-x: hidden;
}

.img,
img {
    max-width: 100%;
    @include transition(.3s);
}

.f-left {
    float: left
}

.f-right {
    float: right
}

.fix {
    overflow: hidden
}

.clear {
    clear: both;
}

.custom-container-1 {
    max-width: 1290px;
}

.bg-property {
    background-position: center!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
}

a,
.button {
    @include transition(.3s);
    text-decoration: none;
}

a:focus,
.button:focus {
    text-decoration: none;
    outline: none;
}

a:focus,
a:hover {
    color: inherit;
    text-decoration: none;
}

a,
button {
    color: inherit;
    outline: medium none;
}

button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {
    outline: 0
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: $montserrat;
    color: $heading-color;
    margin-top: 0px;
    font-weight: 600;
    text-transform: normal;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
}

h1 {
    font-size: 40px;
    font-weight: 500;
}

h2 {
    font-size: 35px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 22px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

ul {
    margin: 0px;
    padding: 0px;
}

p {
    font-size: 16px;
    font-weight: normal;
    line-height: 26px;
    color: $body-color;
    margin-bottom: 15px;
    opacity: .7;
}

hr {
    border-bottom: 1px solid $hr-border-color;
    border-top: 0 none;
    margin: 30px 0;
    padding: 0;
}

label {
    color: $body-color;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    opacity: .7;
}

*::-moz-selection {
    background: $black;
    color: $white;
    text-shadow: none;
}

::-moz-selection {
    background: $black;
    color: $white;
    text-shadow: none;
}

::selection {
    background: $black;
    color: $white;
    text-shadow: none;
}


/* clears the ‘X’ from Internet Explorer */

input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}


/* clears the ‘X’ from Chrome */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

[data-overlay] {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    &::before {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        content: "";
    }
}


/*-- Overlay Color --*/

[data-overlay="light"] {
    &::before {
        background-color: $white;
    }
}

[data-overlay="dark"] {
    &::before {
        background-color: $black;
    }
}


/*-- Overlay Opacity --*/

[data-opacity="1"] {
    &::before {
        opacity: 0.1;
    }
}

[data-opacity="2"] {
    &::before {
        opacity: 0.2;
    }
}

[data-opacity="3"] {
    &::before {
        opacity: 0.3;
    }
}

[data-opacity="4"] {
    &::before {
        opacity: 0.4;
    }
}

[data-opacity="5"] {
    &::before {
        opacity: 0.5;
    }
}

[data-opacity="6"] {
    &::before {
        opacity: 0.6;
    }
}

[data-opacity="7"] {
    &::before {
        opacity: 0.7;
    }
}

[data-opacity="8"] {
    &::before {
        opacity: 0.8;
    }
}

[data-opacity="9"] {
    &::before {
        opacity: 0.9;
    }
}


/**
* Input Placeholder
*/

*::-moz-placeholder {
    color: $black;
    font-size: 14px;
    opacity: 1;
}

*::placeholder {
    color: $black;
    font-size: 14px;
    opacity: 1;
}


/**
* Background Color
*/

.grey-bg {
    background: $grey;
}

.white-bg {
    background: $white;
}

.black-bg {
    background: $black;
}

.theme-primary {
    background: $theme-primary;
}

.theme-gray-1 {
    background: $theme-gray-1;
}

.theme-gray-2 {
    background: $theme-gray-2;
}

.theme-gray-3 {
    background: $theme-gray-3;
}

.theme-gray-4 {
    background: $theme-gray-4;
}


/**
* Color
*/

.white-color {
    color: $white;
}

.black-color {
    color: $black;
}

.theme-primary {
    color: $theme-primary;
}


/**
* Button
*/

.theme-btn-1 {
    display: flex;
    width: 119px;
    padding: 14px 15px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: #FE7919;
}


/**
* 1.2 Default Spacing
*/


/*-- Margin Top --*/

@for $i from 1 through 40 {
    .mt-#{5 * $i} {
        margin-top: 5px * $i;
    }
}


/*-- Margin Bottom --*/

@for $i from 1 through 40 {
    .mb-#{5 * $i} {
        margin-bottom: 5px *$i;
    }
}


/*-- Margin Left --*/

@for $i from 1 through 40 {
    .ml-#{5 * $i} {
        margin-left: 5px * $i;
    }
}


/*-- Margin Right --*/

@for $i from 1 through 40 {
    .mr-#{5 * $i} {
        margin-right: 5px *$i;
    }
}


/*-- Padding Top --*/

@for $i from 1 through 40 {
    .pt-#{5 * $i} {
        padding-top: 5px *$i;
    }
}


/*-- Padding Bottom --*/

@for $i from 1 through 40 {
    .pb-#{5 * $i} {
        padding-bottom: 5px *$i;
    }
}


/*-- Padding Left --*/

@for $i from 1 through 40 {
    .pl-#{5 * $i} {
        padding-left: 5px *$i;
    }
}


/*-- Padding Right --*/

@for $i from 1 through 40 {
    .pr-#{5 * $i} {
        padding-right: 5px *$i;
    }
}


/**
* 1.3 Preloader
*/

#loading {
    color: $theme-secondary;
    background-color: #fff;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 999999;
    margin-top: 0px;
    top: 0px;
    #loading-center {
        width: 100%;
        height: 100%;
        position: relative;
        #loading-center-absolute {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 25%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            @media only screen and (min-width: 1200px) and (max-width: 1399px) {
                width: 40%;
            }
            @media only screen and (min-width: 992px) and (max-width: 1199px) {
                width: 40%;
            }
            @media only screen and (min-width: 768px) and (max-width: 991px) {
                width: 45%;
            }
            @media only screen and (min-width: 576px) and (max-width: 767px) {
                width: 50%;
            }
            @media (max-width: 575px) {
                width: 60%;
            }
            .loading-icon .loading-logo {
                width: 100px;
                height: 101px;
                -webkit-animation: ghurche 4s linear infinite -1.2s;
                animation: ghurche 4s linear infinite -1.2s;
                margin: 20px;
                @media (max-width: 575px) {
                    margin-bottom: 10px;
                }
            }
        }
    }
}

@-webkit-keyframes ghurche {
    0% {
        left: 100px;
        top: 0;
    }
    100% {
        left: 100px;
        top: 0;
    }
}

@keyframes ghurche {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/**
* 1.4 Scroll to Top
*/

.scroll-to-top {
    display: inline-block;
    width: 45px;
    height: 45px;
    background: $theme-primary;
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 99;
    text-align: center;
    display: none;
    border-radius: 50%;
    @include transition(.4s);
    @media #{$xxl} {
        bottom: 120px;
        right: 80px;
    }
    @media #{$xl} {
        bottom: 120px;
        right: 60px;
    }
    @media #{$lg} {
        bottom: 120px;
        right: 60px;
    }
    @media #{$md} {
        bottom: 100px;
        right: 70px;
    }
    @media #{$xs} {
        bottom: 130px;
        right: 20px;
    }
}

.scroll-to-top i {
    color: $white;
    font-size: 18px;
    line-height: 45px;
}

.scroll-to-top:hover {
    box-shadow: inset 0 0 0 30px $theme-secondary;
    @include transition(.4s);
}

.scroll-to-top:hover i {
    color: $white;
}