## SEOQ - SEO & Digital Marketing Agency HTML Template

Created: 3 December, 2023

Update: 3 December, 2023

24/7 Support: Send us a message

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to Support

### Template Installation

1. ##### FTP Upload:

   - Open up your FTP manager and connect to your hosting
   - Browse to required directory (Normally public_html)
   - Upload the files inside seoq-html folder.

### Pages

- index.html
- index-2.html
- index-3.html
- index-4.html
- 404.html
- about.html
- blog-details.html
- blog.html
- case-study.html
- contact.html
- faq.html
- login.html
- pricing.html
- service.html
- service-details.html
- team.html
- testimonial.html

### Fonts

        <!-- Google Fonts
        ============================================ -->
        @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");

### Source File (CSS)

        <!-- CSS here --<
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
        <link rel="stylesheet" href="assets/css/meanmenu.css">
        <link rel="stylesheet" href="assets/css/animate.min.css">
        <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
        <link rel="stylesheet" href="assets/css/slick.css">
        <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
        <link rel="stylesheet" href="assets/css/magnific-popup.css">
        <link rel="stylesheet" href="assets/css/nice-select.css">
        <link rel="stylesheet" href="assets/css/main.css">

### Source File (JS)

        <!-- JS here -->
        <script src="assets/js/jquery-3.6.0.min.js"></script>
        <script src="assets/js/jquery.appear.min.js"></script>
        <script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/meanmenu.js"></script>
        <script src="assets/js/owl.carousel.min.js"></script>
        <script src="assets/js/slick.min.js"></script>
        <script src="assets/js/swiper-bundle.min.js"></script>
        <script src="assets/js/isotope.pkgd.min.js"></script>
        <script src="assets/js/imagesloaded.pkgd.min.js"></script>
        <script src="assets/js/jquery.magnific-popup.min.js"></script>
        <script src="assets/js/jquery.countup.min.js"></script>
        <script src="assets/js/jquery.waypoints.min.js"></script>
        <script src="assets/js/nice-select.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/ajax-form.js"></script>
        <script src="assets/js/plugins.js"></script>
        <script src="assets/js/main.js"></script>

### Customization

#### How to Change Logo

#### How to Change Title

#### How to Change Favicon

#### How to Change Hero Sliders Section Homepage

#### How to Change Section Titile

#### How to Change Page Banner

#### How to Change Serivce

#### How to Change Single Pricing Plane Item

#### How to Change Blog Section Item

#### How to Change Social Links

#### How to Change Copyright

### SCSS Structure

#### CSS Structure

I'm using One SCSS files in this template. You change the SCSS Code of style.scss file

    /************ 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

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

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

#### Home 1 to 4 All Hero SCSS Code here - find and change it on _hero.scss from "assets/scss" folder

    @use '../utils' as *;
    .hero-one {
        height: 850px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        &__content {
            h2 {
                text-align: left;
                font-family: $mulish;
                font-size: 60px;
                font-weight: 700;
                line-height: 70px;
                margin-bottom: 14px;
                @media #{$xl} {
                    font-size: 50px;
                    line-height: 60px;
                    margin-bottom: 40px;
                }
                @media #{$lg} {
                    font-size: 40px;
                    line-height: 60px;
                    margin-bottom: 30px;
                }
                @media #{$md} {
                    font-size: 50px;
                    line-height: 70px;
                    margin-bottom: 30px;
                }
                @media #{$sm} {
                    font-size: 40px;
                    line-height: 70px;
                    margin-bottom: 30px;
                }
                @media #{$xs} {
                    font-size: 30px;
                    line-height: 50px;
                    margin-bottom: 30px;
                }
                .hero-highlighter-1 {
                    position: relative;
                }
                .hero-highlighter-1 svg {
                    position: absolute;
                    bottom: -10px;
                    left: 45px;
                    animation: rrdevshighlighter 3s infinite;
                    @media #{$xl} {
                        left: 20px;
                    }
                    @media #{$lg} {
                        bottom: -18px;
                        left: 3px;
                    }
                    @media #{$sm} {
                        bottom: -20px;
                        left: 4px;
                    }
                    @media #{$xs} {
                        bottom: -15px;
                        left: 0;
                    }
                }
            }
            p {
                color: $body-color;
                font-size: 20px;
                font-weight: 500;
                margin-bottom: 44px;
                opacity: .6;
                @media #{$xl} {
                    font-size: 15px;
                    line-height: 28px;
                    margin-bottom: 40px;
                }
                @media #{$lg} {
                    font-size: 18px;
                    line-height: 28px;
                    margin-bottom: 40px;
                }
                @media #{$sm} {
                    font-size: 15px;
                    line-height: 28px;
                    margin-bottom: 30px;
                }
            }
            .hero__input {
                position: relative;
                width: 690px;
                @media #{$xl} {
                    width: 500px;
                }
                @media #{$lg} {
                    width: 500px;
                }
                @media #{$md} {
                    width: 480px;
                }
                @media #{$sm} {
                    width: 490px;
                }
                @media #{$xs} {
                    width: 390px;
                }
                i {
                    position: absolute;
                    top: 50%;
                    left: 20px;
                    transform: translateY(-50%);
                }
                input {
                    color: $theme-text-4;
                    font-size: 15px;
                    font-weight: 500;
                    width: 690px;
                    height: 60px;
                    border: none;
                    border-radius: 6px;
                    padding: 21px 50px;
                    padding-right: 160px;
                    background: #FFF;
                    box-shadow: 0px 1px 2px 0px rgba(11, 23, 40, 0.14);
                    @media #{$xl} {
                        width: 500px;
                    }
                    @media #{$lg} {
                        width: 500px;
                    }
                    @media #{$md} {
                        width: 480px;
                    }
                    @media #{$sm} {
                        width: 490px;
                    }
                    @media #{$xs} {
                        width: 390px;
                    }
                    &::placeholder {
                        color: $theme-text-4;
                    }
                }
                .hero-btn-1 {
                    position: absolute;
                    top: 50%;
                    right: 8px;
                    transform: translateY(-50%);
                    font-size: 15px;
                    font-weight: 700;
                    border-radius: 4px;
                    color: #fff;
                    background: #0B1728;
                    padding: 10px 30px;
                    border: none;
                    &:before {
                        background-color: $theme-primary;
                        border-radius: 4px;
                    }
                    &:hover {
                        color: $white;
                    }
                }
            }
            .hero-popular-search {
                margin-top: 20px;
                span {
                    color: #0B1728;
                    font-family: Mulish;
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 22px;
                    margin-right: 10px;
                }
                ul {
                    margin: 0;
                    padding: 0;
                    display: inline-block;
                    li {
                        list-style: none;
                        display: inline-block;
                        margin-right: 4px;
                        a {
                            display: inline-block;
                            color: #0B1728;
                            font-family: Mulish;
                            font-size: 14px;
                            font-weight: 500;
                            border-radius: 6px;
                            padding: 8px 16px;
                            background: #FFF;
                            line-height: normal;
                            box-shadow: 0px 1px 2px 0px rgba(11, 23, 40, 0.14);
                            img {
                                width: 13px;
                                height: 13px;
                                margin-bottom: 2px;
                                margin-right: 6px;
                            }
                        }
                    }
                }
            }
        }
    }

    /* style 2*/

    .hero-style-two {
        height: 970px;
        position: relative;
        @media #{$md} {
            height: auto;
        }
        @media #{$sm} {
            height: auto;
        }
        @media #{$xs} {
            height: auto;
        }
        &__img-1 {
            position: absolute;
            top: 13%;
            left: 5%;
            animation: rrdevsleftright 6s ease-in-out 0.1s forwards infinite alternate;
            @media #{$xs} {
                top: 13%;
                left: 20%;
            }
        }
        &__img-2 {
            position: absolute;
            top: 30%;
            left: 14%;
            animation: rrdevsrotate 6s ease-in-out 0.1s forwards infinite alternate;
            @media #{$xl} {
                left: 10%;
            }
            @media #{$lg} {
                top: 20%;
            }
            @media #{$xs} {
                top: 24%;
            }
        }
        &__img-3 {
            position: absolute;
            bottom: 28%;
            right: 3%;
            animation: rrdevsrotate 6s ease-in-out 0.1s forwards infinite alternate;
        }
        &__img-4 {
            position: absolute;
            top: 15%;
            right: 5%;
            animation: rrdevsleftright 6s ease-in-out 0.1s forwards infinite alternate;
            @media #{$xs} {
                top: 12%;
                right: 10%;
            }
        }
        &__img-5 {
            position: absolute;
            top: 54%;
            left: 3%;
            animation: rrdevsrotate 6s ease-in-out 0.1s forwards infinite alternate;
            @media #{$xs} {
                top: 49%;
            }
        }
        &__img-6 {
            position: absolute;
            top: 30%;
            right: 13%;
            animation: rrdevsupdown 5s infinite alternate;
            @media #{$xl} {
                right: 6%;
            }
            @media #{$lg} {
                top: 36%;
                right: 9%;
            }
            @media #{$sm} {
                right: 5%;
            }
            @media #{$xs} {
                right: 2%;
            }
        }
        &__img-7 {
            position: absolute;
            top: 55%;
            left: 0;
            @media #{$xs} {
                display: none;
            }
        }
        &__content-box-1 {
            position: relative;
            margin-top: -24px;
            h3 {
                position: absolute;
                bottom: 50px;
                padding: 0 64px;
                font-size: 24px;
                font-weight: 500;
                line-height: 34px;
                margin-bottom: 0;
            }
        }
        &__content-box-2 {
            position: relative;
            a {
                position: absolute;
                right: 0;
                bottom: -42px;
                color: #fff;
                font-family: $montserrat;
                font-size: 18px;
                font-weight: 600;
                line-height: normal;
                border-radius: 10px;
                background: $theme-secondary;
                padding: 34px 82px;
                margin-right: 42px;
                i {
                    margin-left: 9px;
                    @include transition(.3s);
                }
                &:hover i {
                    transform: rotate(-45deg);
                    @include transition(.3s);
                }
            }
        }
        .happy-client {
            text-align: left;
            margin-top: 30px;
            @media #{$xs} {
                margin-top: 80px;
            }
            .rating {
                margin-bottom: 12px;
                i {
                    color: #FFB21D;
                    font-size: 16px;
                }
            }
            p {
                color: #0B1728;
                font-family: $montserrat;
                font-size: 14px;
                font-weight: 600;
                line-height: normal;
                margin-bottom: 0;
            }
        }
        .active-user {
            margin-top: 30px;
            @media #{$xs} {
                margin-bottom: 30px;
            }
            ul {
                li {
                    display: inline-block;
                    margin-right: -20px;
                }
                .user-number {
                    color: #0B1728;
                    text-align: center;
                    font-family: Roboto;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 26px;
                    padding: 7px 15px;
                    border-radius: 30px;
                    background: #F4B14B;
                }
            }
            span {
                display: inline-block;
                color: #0B1728;
                font-family: $montserrat;
                font-size: 14px;
                font-weight: 600;
                line-height: normal;
                margin-top: 20px;
                &:before {
                    content: "";
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    background-color: #11D825;
                    border-radius: 50px;
                    margin-right: 6px;
                }
            }
        }
        &__content {
            @media #{$md} {
                margin-top: 180px;
            }
            @media #{$sm} {
                margin-top: 190px;
            }
            @media #{$xs} {
                margin-top: 200px;
            }
            h2 {
                color: #0B1728;
                text-align: center;
                font-size: 60px;
                font-weight: 700;
                line-height: 70px;
                margin-bottom: 60px;
                @media #{$md} {
                    font-size: 40px;
                    line-height: 60px;
                }
                @media #{$sm} {
                    font-size: 32px;
                    line-height: 52px;
                }
                @media #{$xs} {
                    font-size: 28px;
                    line-height: 52px;
                }
            }
        }
        .hero-bottom-line {
            padding-top: 40px;
            padding-bottom: 40px;
            border-bottom: 1px solid #D9D9D9;
        }
        .hero-highlighter-2 {
            position: relative;
            svg {
                position: absolute;
                bottom: -15px;
                left: 50%;
                transform: translateX(-50%);
                animation: rrdevshighlighter 3s infinite;
            }
        }
    }

    /* style 3*/

    .hero-style-three {
        position: relative;
        height: 884px;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        overflow: hidden;
        &__animation-1 {
            position: absolute;
            left: 16%;
            bottom: 0;
            animation: footer1 4s ease-in-out 0.1s forwards infinite alternate;
            overflow: hidden;
            @media #{$xxl} {
                left: 9%;
            }
            @media #{$xl} {
                left: 6%;
            }
            @media #{$lg} {
                left: 3%;
            }
            @media #{$md} {
                left: 5%;
            }
            @media #{$sm} {
                left: 5%;
            }
            @media #{$xs} {
                left: 1%;
                bottom: -320px;
            }
        }
        &__animation-2 {
            position: absolute;
            left: 32%;
            bottom: 0;
            animation: footer2 4s ease-in-out 0.1s forwards infinite alternate;
            overflow: hidden;
            @media #{$md} {
                left: 36%;
            }
            @media #{$sm} {
                bottom: -50px;
            }
        }
        &__animation-3 {
            position: absolute;
            left: 48%;
            bottom: 0;
            animation: footer3 4s ease-in-out 0.1s forwards infinite alternate;
            overflow: hidden;
        }
        &__animation-4 {
            position: absolute;
            left: 65%;
            bottom: 0;
            animation: footer2 4s ease-in-out 0.1s forwards infinite alternate;
            overflow: hidden;
            @media #{$sm} {
                bottom: -40px;
            }
        }
        &__animation-5 {
            position: absolute;
            right: 16%;
            bottom: 0;
            animation: footer1 4s ease-in-out 0.1s forwards infinite alternate;
            overflow: hidden;
            @media #{$xxl} {
                right: 9%;
            }
            @media #{$xl} {
                right: 6%;
            }
            @media #{$lg} {
                right: 3%;
            }
            @media #{$md} {
                right: 5%;
            }
            @media #{$sm} {
                right: 5%;
            }
            @media #{$xs} {
                right: 2%;
                bottom: -320px;
            }
        }
        &__content {
            h2 {
                color: #fff;
                font-family: $montserrat;
                font-size: 90px;
                font-weight: 700;
                line-height: 96px;
                @media #{$sm} {
                    font-size: 65px;
                    line-height: 75px;
                }
                @media #{$xs} {
                    font-size: 40px;
                    line-height: 60px;
                }
                span {
                    display: block;
                    background: linear-gradient(270deg, #F07B27 1.24%, #FF516A 96.28%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }
        .slider__form {
            position: relative;
            width: 550px;
            height: 60px;
            border-radius: 50px;
            margin: auto;
            padding: 25px 27px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0px 1px 2px 0px rgba(11, 23, 40, 0.14);
            @media #{$md} {
                width: 400px;
                margin-left: 70px;
            }
            @media #{$sm} {
                width: 420px;
                margin-bottom: 60px;
            }
            @media #{$xs} {
                width: 430px;
                margin-bottom: 60px;
            }
            &-input {
                input {
                    position: absolute;
                    top: 50%;
                    left: 27px;
                    transform: translateY(-50%);
                    color: rgba(255, 255, 255, 0.6);
                    font-family: $montserrat;
                    font-size: 14px;
                    font-weight: 500;
                    background: transparent;
                    border: none;
                    &::placeholder {
                        color: rgba(255, 255, 255, 0.60);
                    }
                }
                .slider-form-btn {
                    position: absolute;
                    top: 0;
                    right: -160px;
                    height: 55px;
                    line-height: 0;
                    padding: 24px 47px;
                    border-radius: 50px;
                    border: none;
                    color: #fff;
                    font-family: $montserrat;
                    font-size: 15px;
                    font-weight: 600;
                    background-color: $theme-secondary;
                    @media #{$sm} {
                        position: inherit;
                        margin-top: 50px;
                    }
                    @media #{$xs} {
                        position: inherit;
                        margin-top: 50px;
                    }
                }
                &.has-select {
                    .nice-select {
                        position: absolute;
                        top: 50%;
                        right: 28px;
                        transform: translateY(-50%);
                        background: transparent;
                        border: none;
                        color: rgba(255, 255, 255, 0.6);
                        font-family: $montserrat;
                        font-size: 14px;
                        font-weight: 500;
                        z-index: 2;
                        .list {
                            color: $theme-text-10;
                        }
                    }
                }
            }
        }
    }

    /* style 4*/

    .hero-four {
        position: relative;
        background-color: #F0E6E0;
        height: 950px;
        overflow: hidden;
        @media #{$lg} {
            height: 680px;
        }
        &__img-1 {
            position: absolute;
            top: 13%;
            left: 5%;
            animation: rrdevsleftright 6s ease-in-out 0.1s forwards infinite alternate;
            z-index: 2;
            @media #{$xs} {
                top: 3%;
                left: 12%;
            }
        }
        &__img-2 {
            position: absolute;
            top: 35%;
            left: 12%;
            animation: rrdevsrotate 6s ease-in-out 0.1s forwards infinite alternate;
            @media #{$xxl} {
                left: 2%;
            }
            @media #{$xl} {
                left: 2%;
            }
            @media #{$lg} {
                left: 2%;
            }
            @media #{$md} {
                left: 3%;
            }
            @media #{$sm} {
                left: 3%;
            }
            @media #{$xs} {
                top: 33%;
                left: 6%;
            }
        }
        &__img-3 {
            position: absolute;
            bottom: 15%;
            right: 3%;
            animation: rrdevsrotate 6s ease-in-out 0.1s forwards infinite alternate;
        }
        &__img-4 {
            position: absolute;
            top: 20%;
            right: 5%;
            animation: rrdevsleftright 6s ease-in-out 0.1s forwards infinite alternate;
        }
        &__img-5 {
            position: absolute;
            top: 65%;
            left: 2%;
            animation: rrdevsrotate 6s ease-in-out 0.1s forwards infinite alternate;
        }
        &__img-6 {
            position: absolute;
            top: 0;
            left: 0;
            animation: rrdevsleftright 6s ease-in-out 0.1s forwards infinite alternate;
            @media #{$xxl} {
                left: -30px;
            }
            @media #{$xl} {
                left: -40px;
            }
            @media #{$lg} {
                top: -110px;
                left: -68px;
            }
            @media #{$md} {
                top: -13%;
            }
            @media #{$xs} {
                top: -26%;
            }
        }
        &__img-7 {
            position: absolute;
            top: 20%;
            right: 0;
            animation: rrdevsrightleft 6s ease-in-out 0.1s forwards infinite alternate;
            @media #{$xl} {
                top: -15%;
            }
            @media #{$lg} {
                top: -6%;
            }
            @media #{$xs} {
                top: 30%;
            }
            @media #{$xs} {
                top: 27%;
            }
        }
        &__content {
            margin-bottom: 235px;
            @media #{$md} {
                margin-bottom: 470px;
            }
            @media #{$sm} {
                margin-bottom: 530px;
            }
            @media #{$xs} {
                margin-bottom: 530px;
            }
            h2 {
                color: #0B1728;
                font-family: $montserrat;
                font-size: 90px;
                font-weight: 700;
                line-height: 100px;
                margin-bottom: 30px;
                @media #{$xl} {
                    font-size: 60px;
                    line-height: 80px;
                    margin-bottom: 40px;
                }
                @media #{$lg} {
                    font-size: 60px;
                    line-height: 70px;
                    margin-bottom: 30px;
                }
                @media #{$md} {
                    font-size: 46px;
                    line-height: 70px;
                    margin-bottom: 30px;
                }
                @media #{$sm} {
                    font-size: 36px;
                    line-height: 56px;
                    margin-bottom: 30px;
                }
                @media #{$xs} {
                    font-size: 36px;
                    line-height: 56px;
                    margin-bottom: 30px;
                }
            }
            p {
                color: $theme-text-7;
                font-family: $montserrat;
                font-size: 18px;
                font-style: normal;
                font-weight: 500;
                line-height: 26px;
                margin-bottom: 54px;
                @media #{$md} {
                    margin-bottom: 30px;
                }
            }
            form {
                position: relative;
                width: 550px;
                @media #{$xl} {
                    width: 480px;
                }
                @media #{$lg} {
                    width: 450px;
                }
                @media #{$sm} {
                    width: 420px;
                }
                @media #{$xs} {
                    width: 390px;
                }
            }
            input {
                color: #0B1728;
                font-family: $montserrat;
                font-size: 14px;
                font-weight: 500;
                width: 550px;
                height: 60px;
                background: #FFF;
                padding: 24px 26px;
                padding-right: 230px;
                border: none;
                box-shadow: 0px 1px 2px 0px rgba(11, 23, 40, 0.14);
                @media #{$xl} {
                    width: 480px;
                }
                @media #{$lg} {
                    width: 450px;
                }
                @media #{$sm} {
                    width: 420px;
                }
                @media #{$xs} {
                    width: 390px;
                }
            }
            button {
                color: #fff;
                font-family: $montserrat;
                font-size: 15px;
                font-weight: 600;
                line-height: normal;
                padding: 16px 23px;
                background-color: $theme-secondary;
                border: none;
                position: absolute;
                right: 5px;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        &__right {
            position: absolute;
            bottom: 0;
            right: 0;
            @media #{$xl} {
                right: -17%;
            }
            @media #{$lg} {
                right: -3%;
            }
            @media #{$md} {
                left: 0;
            }
            @media #{$sm} {
                left: 0;
                right: 0;
            }
            @media #{$xs} {
                left: 0;
            }
        }
        &__img {
            position: relative;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center center;
            z-index: 1;
        }
        &__img0 {
            @media #{$lg} {
                width: 600px;
            }
            @media #{$md} {
                width: 550px;
            }
            @media #{$sm} {
                width: 550px;
                height: auto;
            }
        }
        &__img1 {
            position: absolute;
            bottom: 19%;
            left: 16%;
            animation: rrdevsanimation1 6s infinite linear alternate;
            @media #{$lg} {
                left: 10%;
            }
            @media #{$md} {
                left: 2%;
            }
            @media #{$sm} {
                left: 4%;
            }
        }
        &__img2 {
            position: absolute;
            right: 24%;
            top: 45%;
            animation: rrdevsupdown 0.6s infinite alternate;
            @media #{$lg} {
                right: 18%;
            }
            @media #{$md} {
                right: 45%;
            }
        }
        &__img3 {
            position: absolute;
            top: 36%;
            left: 26%;
            animation: rrdevsupdown 5s infinite alternate;
            @media #{$md} {
                top: 35%;
                left: 16%;
            }
        }
        &__img4 {
            position: absolute;
            top: 14%;
            right: 30%;
            animation: rrdevsanimation1 5s infinite linear alternate;
            @media #{$lg} {
                right: 23%;
            }
            @media #{$md} {
                right: 49%;
            }
        }
        &__img5 {
            position: absolute;
            top: 30%;
            right: 20%;
            animation: rrdevsupdown 5s infinite alternate;
            @media #{$xl} {
                top: 24%;
                right: 24%;
            }
            @media #{$lg} {
                right: 12%;
            }
            @media #{$md} {
                right: 34%;
            }
            @media #{$sm} {
                right: 10%;
            }
        }
    }

    .hero-one__wrapper {
        position: relative;
        height: 850px;
        overflow: hidden;
        .hero-one__animation-1 {
            position: absolute;
            left: 96px;
            bottom: 0;
            animation: rrdevstranslateY2 6s ease-in-out 0.1s forwards infinite alternate;
            @media #{$xxl} {
                left: -15px;
            }
            @media #{$xl} {
                left: -22px;
            }
            @media #{$lg} {
                bottom: 13%;
            }
            @media #{$sm} {
                display: none;
            }
            @media #{$xs} {
                display: none;
            }
        }
        .hero-one__animation-2 {
            position: absolute;
            bottom: 0;
            right: 9%;
            @media #{$xxl} {
                right: 2%;
            }
            @media #{$xl} {
                right: 1%;
            }
            @media #{$lg} {
                bottom: -14%;
                right: 1%;
            }
            @media #{$md} {
                display: none;
            }
            @media #{$sm} {
                display: none;
            }
            @media #{$xs} {
                display: none;
            }
        }
    }

    .hero-one__content {
        padding-top: 149px;
        padding-left: 165px;
        @media #{$lg} {
            padding-top: 90px;
        }
    }

#### JavaScript Customization

Change Any jquery Related Code

    (function($) {
        "use strict";

        var windowOn = $(window);

        // PreLoader Js
        windowOn.on("load", function() {
            $("#loading").fadeOut(1000);
        });

        // WOW active
        new WOW().init();

        // Mobile Menu Js
        $("#mobile-menu").meanmenu({
            meanMenuContainer: ".mobile-menu",
            meanScreenWidth: "1199",
            meanExpand: [''],
            meanContract: [''],
        });
        $("#mobile-menu-media-all").meanmenu({
            meanMenuContainer: ".mobile-menu-media-all",
            meanScreenWidth: "8000",
            meanExpand: [''],
            meanContract: [''],
        });

        // Sidebar Js
        $(".sidebar-toggle-btn").on("click", function() {
            $(".sidebar__area").addClass("sidebar-opened");
            $(".body-overlay").addClass("opened");
        });
        $(".sidebar__close-btn").on("click", function() {
            $(".sidebar__area").removeClass("sidebar-opened");
            $(".body-overlay").removeClass("opened");
        });

        // Side Info Js
        $(".side-info-close,.offcanvas-overlay").on("click", function() {
            $(".side-info").removeClass("info-open");
            $(".offcanvas-overlay").removeClass("overlay-open");
        });
        $(".side-toggle").on("click", function() {
            $(".side-info").addClass("info-open");
            $(".offcanvas-overlay").addClass("overlay-open");
        });

        $(".offset__btn").on("click", function() {
            $(".offset-content-wrapper").addClass("offset-show");
        });
        $(".offset-content-close").on("click", function() {
            $(".offset-content-wrapper").removeClass("offset-show");
        });

        // Sticky Header Js
        windowOn.on("scroll", function() {
            var scroll = $(window).scrollTop();
            if (scroll < 100) {
                $("#header-sticky").removeClass("sticky");
            } else {
                $("#header-sticky").addClass("sticky");
            }
        });

        $(window).on("scroll", function() {
            if ($(".sticked-menu").length) {
                var headerScrollPos = 130;
                var sticky = $(".sticked-menu");
                if ($(window).scrollTop() > headerScrollPos) {
                    sticky.addClass("sticky-fixed");
                } else if ($(this).scrollTop() <= headerScrollPos) {
                    sticky.removeClass("sticky-fixed");
                }
            }
            if ($(".scroll-to-top").length) {
                var stickyScrollPos = 100;
                if ($(window).scrollTop() > stickyScrollPos) {
                    $(".scroll-to-top").fadeIn(500);
                } else if ($(this).scrollTop() <= stickyScrollPos) {
                    $(".scroll-to-top").fadeOut(500);
                }
            }
        });

        // Data Background Js
        $("[data-background]").each(function() {
            $(this).css(
                "background-image",
                "url( " + $(this).attr("data-background") + "  )"
            );
        });

        if ($(".tabs-box").length) {
            $(".tabs-box .tab-buttons .tab-btn").on("click", function(e) {
                e.preventDefault();
                var target = $($(this).attr("data-tab"));

                if ($(target).is(":visible")) {
                    return false;
                } else {
                    target
                        .parents(".tabs-box")
                        .find(".tab-buttons")
                        .find(".tab-btn")
                        .removeClass("active-btn");
                    $(this).addClass("active-btn");
                    target
                        .parents(".tabs-box")
                        .find(".tabs-content")
                        .find(".tab")
                        .fadeOut(0);
                    target
                        .parents(".tabs-box")
                        .find(".tabs-content")
                        .find(".tab")
                        .removeClass("active-tab");
                    $(target).fadeIn(300);
                    $(target).addClass("active-tab");
                }
            });
        }

        // Testimonial One
        if ($(".testimonial-one__active").length) {
            $(".testimonial-one__active").owlCarousel({
                loop: true,
                navText: ['', ''],
                nav: true,
                margin: 10,
                responsive: {
                    0: {
                        items: 1,
                        stagePadding: 0,
                    },
                    576: {
                        items: 1,
                        stagePadding: 0,
                    },
                    768: {
                        items: 1,
                        stagePadding: 120,
                    },
                    992: {
                        items: 1,
                        stagePadding: 160,
                    },
                    1200: {
                        items: 1,
                        stagePadding: 150,
                    },
                    1400: {
                        items: 1,
                        stagePadding: 200,
                    },
                    1600: {
                        items: 1,
                        stagePadding: 290,
                    },
                }
            });
        }

        // Testimonial Two
        if ($(".testimonial-two__active").length) {
            $(".testimonial-two__active").owlCarousel({
                items: 1,
                loop: true,
                nav: false,
                margin: 10,
                dotsData: true,
                animateOut: 'fadeOutDown',
                animateIn: 'fadeInDown',
            });
        }

        // Testimonial Three
        if ($(".testimonial-three__active").length) {
            $(".testimonial-three__active").slick({
                dots: true,
                fade: false,
                autoplay: false,
                slidesToShow: 1,
                prevArrow: '',
                nextArrow: '',
                arrows: true,
                responsive: [{
                        breakpoint: 992,
                        settings: {
                            arrows: false,
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            arrows: false,
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            arrows: false,
                        }
                    }
                ]
            });
        }

        // Testimonial Two
        if ($(".case-study-two__active").length) {
            $('.case-study-two__active').owlCarousel({
                loop: true,
                navText: ['', ''],
                nav: true,
                autoHeight: true,
                responsive: {
                    0: {
                        items: 1,
                        stagePadding: 0,
                    },
                    576: {
                        items: 1,
                        stagePadding: 0,
                    },
                    768: {
                        items: 1,
                        stagePadding: 120,
                    },
                    992: {
                        items: 1,
                        stagePadding: 160,
                    },
                    1200: {
                        items: 1,
                        stagePadding: 150,
                    },
                    1400: {
                        items: 1,
                        stagePadding: 200,
                    },
                    1600: {
                        items: 1,
                        stagePadding: 290,
                    },
                }
            });
        }

        // Brand One
        if ($(".brand-one__active").length) {
            $('.brand-one__active').owlCarousel({
                loop: true,
                nav: false,
                autoplay: true,
                responsive: {
                    0: {
                        items: 2
                    },
                    600: {
                        items: 3
                    },
                    1000: {
                        items: 5
                    }
                }
            });
        }

        // Magnific Popup Img View
        if ($(".popup-image").length) {
            $('.popup-image').magnificPopup({
                type: 'image',
                gallery: {
                    enabled: true
                }
            });
        }

        /* Magnific Popup Video View */
        if ($(".popup-video").length) {
            $('.popup-video').magnificPopup({
                type: 'iframe',
            });
        }

        // Swiper Init
        function thmSwiperInit() {
            // swiper slider
            const swiperElm = document.querySelectorAll(".thm-swiper__slider");
            swiperElm.forEach(function(swiperelm) {
                const swiperOptions = JSON.parse(swiperelm.dataset.swiperOptions);
                let thmSwiperSlider = new Swiper(swiperelm, swiperOptions);
            });
        }

        $(window).on("load", function() {
            thmSwiperInit();
        });

        // Case Study One
        if ($(".case-study-one__active").length) {
            new Swiper(".case-study-one__active", {
                slidesPerView: 6,
                spaceBetween: 50,
                loop: true,
                scrollbar: {
                    el: ".rr-scrollbar",
                    clickable: true,
                },
            });
        }

        // Toggle Password
        if ($(".toggle-password").length) {
            $(".toggle-password").on('click', function() {
                $(this).toggleClass("fa-eye fa-eye-slash");
                var input = $($(this).attr("data-toggle"));
                if (input.attr("type") == "password") {
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }
            });
        }

        function mediaSize() {
            /* Set the matchMedia */
            if (window.matchMedia('(min-width: 768px)').matches) {
                const panels = document.querySelectorAll('.col-custom')
                panels.forEach(panel => {
                    panel.addEventListener('click', () => {
                        removeActiveClasses()
                        panel.classList.add('active')
                    })
                })

                function removeActiveClasses() {
                    panels.forEach(panel => {
                        panel.classList.remove('active')
                    })
                }

            } else {
                /* Reset for CSS changes â€“ Still need a better way to do this! */
                $(".col-custom ").addClass("active");
            }
        };
        /* Call the function */
        mediaSize();
        /* Attach the function to the resize event listener */
        window.addEventListener('resize', mediaSize, false);

        var $gridOne = $('.portfolio-active').isotope();
        // filter items on button click
        $('.portfolio-menu').on('click', 'button', function() {
            var filterValue = $(this).attr('data-filter');
            $gridOne.isotope({ filter: filterValue });
        });

        // Isotop Filter Activation
        $('.portfolio-menu button').on('click', function(event) {
            $(this).siblings('.active').removeClass('active');
            $(this).addClass('active');
            event.preventDefault();
        });

        // Popular Causes Progress Bar
        if ($(".count-bar").length) {
            $(".count-bar").appear(
                function() {
                    var el = $(this);
                    var percent = el.data("percent");
                    $(el).css("width", percent).addClass("counted");
                }, {
                    accY: -50
                }
            );
        }

        //Progress Bar / Levels
        if ($(".progress-levels .progress-box .bar-fill").length) {
            $(".progress-box .bar-fill").each(
                function() {
                    $(".progress-box .bar-fill").appear(function() {
                        var progressWidth = $(this).attr("data-percent");
                        $(this).css("width", progressWidth + "%");
                    });
                }, {
                    accY: 0
                }
            );
        }

        //Fact Counter + Text Count
        if ($(".count-box").length) {
            $(".count-box").appear(
                function() {
                    var $t = $(this),
                        n = $t.find(".count-text").attr("data-stop"),
                        r = parseInt($t.find(".count-text").attr("data-speed"), 10);

                    if (!$t.hasClass("counted")) {
                        $t.addClass("counted");
                        $({
                            countNum: $t.find(".count-text").text()
                        }).animate({
                            countNum: n
                        }, {
                            duration: r,
                            easing: "linear",
                            step: function() {
                                $t.find(".count-text").text(Math.floor(this.countNum));
                            },
                            complete: function() {
                                $t.find(".count-text").text(this.countNum);
                            }
                        });
                    }
                }, {
                    accY: 0
                }
            );
        }

        // Fun Fact
        if ($(".counter").length) {
            $('.counter').countUp({
                delay: 10,
                time: 2000
            });
        }

        // Nice Select Js
        if ($("select").length) {
            $("select").niceSelect();
        }

    })(jQuery);

#### Credits And Sources

- jQuery Library
- Font Awesome 6 Pro
- Bootstrap 5.x
- Appear
- meanMenu
- Owl Carousel
- Slick
- Swiper Slider
- Isotope
- imagesloaded
- Magnific Popup
- countup
- waypoints
- Nice Select
- WOW
- Animate.css

### Thanks

#### Once again thank you for purchasing one of our Templates

##### Best Regards

### RRDevs