why-us.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <!-- fontawesom -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
    <!-- owl carousel -->
    <link rel="stylesheet" href="owlCarousel/owl.carousel.min.css">
    <link rel="stylesheet" href="owlCarousel/owl.theme.default.min.css">
    <!-- google fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap" rel="stylesheet">
    <!-- my styling -->
    <link rel="stylesheet" href="css/styles.css">

    <title>Mario-nanni</title>
    <!-- wow js -->
    <link rel="stylesheet" href="css/animate.css">

    <!-- styling carousel dots -->
    <style>
        .owl-carousel .owl-dots {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 20px;
        }

        .owl-carousel .owl-dots .owl-dot {
            border: 1px solid #f86011;
            width: 20px;
            height: 20px;
            outline: none;
            border-radius: 50%;
        }

        .owl-carousel .owl-dot.active {
            background-color: #f86011;
            border-radius: 50%;
        }
    </style>
</head>

<body>

    <div class="wrapper">
        <div class="bg-white sticky-top pageNav d-flex justify-content-center align-items-center">
            <nav data-wow-duration=".7s" data-wow-delay=".01s"
                class="wow fadeInDown bg-white navbar  navbar-light navbar-expand-lg justifyCenter-on-big max-wrapper">

                <div class="log-container">
                    <strong id="logo">
                        <div>
                            <span class="d-block"><a href="#">
                                    <img src="images/avada-marketing-logo-2x.png" class="logo" width="100%" alt="Logo">
                                </a></span>
                        </div>
                    </strong>
                </div>

                <button class="navbar-toggler order2 " type="button" data-toggle="collapse"
                    data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span>Menu</span>
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse navLinks-responsive justify-content-center nav-links"
                    id="navbarNavAltMarkup">
                    <ul class="navbar-nav w-100 justify-content-between">
                        <li class="position-relative nav-item navLinkHover ">
                            <a class="nav-item nav-link nav-links-margin active" href="#">
                                <span class="nav-link-border"></span>
                                <div class="d-flex align-items-center justify-content-center">
                                    <span
                                        class="responsive-fonts font-weight-500 color-black whie-s-nowrap ">Home</span>
                                    <span class="nav-link-angle color-black"><i class="fa fa-angle-down"></i></span>
                                </div>
                                <span class="sr-only">(current)</span>
                            </a>
                            <div class="hide-992 position-absolute nav-link-drop-down">
                                <ul class="d-flex flex-column">
                                    <li class="nav-link-dropDrown-li bg-white"><a
                                            class="hover-c-primary responsive-fonts font-weight-500 color-black whie-s-nowrap d-block"
                                            href="#">Home Alternate</a></li>
                                </ul>
                            </div>
                        </li>
                        <li id="services-link" class=" position-static li nav-item navLinkHover">
                            <a class="position-relative nav-item nav-link nav-links-margin " href="#">
                                <span class="nav-link-border"></span>
                                <div class="d-flex align-items-center justify-content-center">
                                    <span
                                        class="responsive-fonts font-weight-500 color-black whie-s-nowrap">Services</span>
                                    <span class="nav-link-angle color-black"><i class="fa fa-angle-down"></i></span>
                                </div>
                            </a>
                            <div
                                class="bg-white container hide-992 primary-box-shadow position-absolute services-drop-down">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mega-menu-card p-3">
                                            <div
                                                class="mega-menu-card-icon d-flex justify-content-center align-items-center icon-bg-light-blue c-pointer">
                                                <i class="fa fa-eye"></i>
                                            </div>
                                            <div class="mega-menu-card-text">
                                                <h3 class="menu-card-title my-3"><a href="#"
                                                        class="color-black font-weight-500  hover-c-primary">Strategic
                                                        Marketing Plan</a></h3>
                                                <p class="my-3 responsive-fonts">Maecenas ut erat malesuada tortor
                                                    mattis scelerisque eu ut tortor.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mega-menu-card p-3">
                                            <div
                                                class="mega-menu-card-icon d-flex justify-content-center align-items-center icon-bg-light-pink c-pointer">
                                                <i class="fa fa-eye"></i>
                                            </div>
                                            <div class="mega-menu-card-text">
                                                <h3 class="menu-card-title my-3"><a href="#"
                                                        class="color-black font-weight-500  hover-c-primary">Sales
                                                        Development</a></h3>
                                                <p class="my-3 responsive-fonts">Maecenas ut erat malesuada tortor
                                                    mattis scelerisque eu ut tortor.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mega-menu-card p-3">
                                            <div
                                                class="mega-menu-card-icon d-flex justify-content-center align-items-center icon-bg-light-green c-pointer">
                                                <i class="fa fa-eye"></i>
                                            </div>
                                            <div class="mega-menu-card-text">
                                                <h3 class="menu-card-title my-3"><a href="#"
                                                        class="color-black font-weight-500  hover-c-primary">Digital
                                                        Marketing</a></h3>
                                                <p class="my-3 responsive-fonts">Maecenas ut erat malesuada tortor
                                                    mattis scelerisque eu ut tortor.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class=" li nav-item navLinkHover text-center">
                            <a class="position-relative nav-item nav-link nav-links-margin text-center"
                                href="why-us.html" target="_blank">
                                <span class="nav-link-border"></span>
                                <span class="responsive-fonts font-weight-500 color-black whie-s-nowrap">Why Us</span>
                            </a>
                        </li>
                        <li class=" li nav-item navLinkHover">

                            <a class="position-relative nav-item nav-link nav-links-margin text-center" href="#">
                                <span class="nav-link-border"></span>
                                <span class="responsive-fonts font-weight-500 color-black whie-s-nowrap">Case
                                    Studies</span>
                            </a>
                        </li>
                        <li class="li nav-item navLinkHover ">

                            <a class="position-relative navLinkHover nav-item nav-link nav-links-margin text-center"
                                href="#">
                                <span class="nav-link-border"></span>
                                <span class="responsive-fonts font-weight-500 color-black whie-s-nowrap">About </span>
                            </a>
                        </li>
                        <li class="li text-center nav-item navLinkHover">

                            <a class="position-relative nav-item nav-link nav-links-margin" href="blog.html"
                                target="_blank">
                                <span class="nav-link-border"></span>
                                <span class="responsive-fonts font-weight-500 color-black whie-s-nowrap">Blog </span>
                            </a>
                        </li>

                    </ul>
                </div>
                <div class="nav-right-side hide-on-phone">
                    <div class="d-flex align-items-center after-border gap-12">
                        <div class="d-flex align-items-center navPhone">
                            <span class="color-primary nav-phone-icon"><i class="fa fa-phone"></i></span>
                            <span class="font-weight-500 color-black whie-s-nowrap responsive-fonts">(555)
                                802-1234</span>
                        </div>
                        <a href="#" class="light-pink-btn border-radius-10  bg-light-pink d-inline-block">
                            <span class="responsive-fonts font-weight-500 free-quote-text whie-s-nowrap">
                                Free Quote
                            </span>
                        </a>

                    </div>

                </div>
            </nav>
        </div>
        <header id="header" class="pb-4 max-wrapper">
            <div class="container-fluid ">
                <div class="whyUs-hero-section">
                    <div class="container-fluid ">
                        <div class="row align-items-center">
                            <div class="col-lg-5 wow fadeInLeft">
                                <div class="col-right-margin">
                                    <h1 class="font-bigger font-weight-700 color-black mb-20px">
                                        We Want Your Business to Succeed
                                    </h1>
                                    <h3 class="heading-desc family-serif">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor placerat
                                        luctus.
                                    </h3>
                                    <div class="btn-c-primary my-4">
                                        <button type="button" class="primary-hovered border-radius-10 font-weight-500">
                                            <span>Get a Consultation</span>
                                        </button>
                                    </div>
                                    <div class="hero-tick-list">
                                        <div class="my-3 d-flex gap-12 align-items-center">
                                            <div>
                                                <div
                                                    class="d-flex justify-content-center align-items-center check-icon">
                                                    <i class="fa fa-check"></i>
                                                </div>
                                            </div>
                                            <p class="font-20px">Donec pretium augue et ultrices interdum</p>
                                        </div>
                                        <div class="my-3 d-flex gap-12 align-items-center">
                                            <div>
                                                <div
                                                    class="d-flex justify-content-center align-items-center check-icon">
                                                    <i class="fa fa-check"></i>
                                                </div>
                                            </div>
                                            <p class="font-20px">Nunc nulla ante, auctor non dolor vitae</p>
                                        </div>
                                        <div class="my-3 d-flex gap-12 align-items-center">
                                            <div>
                                                <div
                                                    class="d-flex justify-content-center align-items-center check-icon">
                                                    <i class="fa fa-check"></i>
                                                </div>
                                            </div>
                                            <p class="font-20px">Aliquam justo nec velit porttitor sodales</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-7 px-0 wow fadeInRight">
                                <div class="why-us-right my-20px">
                                    <div class="whyUs-heroBg">
                                        <div class="hero-img-box-container">
                                            <div class="hero-img-box">
                                                <div class="herocardSm-img">
                                                    <img src="images/hemisferio.png" width="100%" alt="">
                                                </div>
                                                <P class="font-20px family-serif line-height-30px mb-20px">
                                                    Our website revenue has increased by over 210% in only 9 months.
                                                </P>
                                                <div>
                                                    <strong class="font-weight-700 family-serif font-20px">
                                                        Richard Taylor
                                                    </strong>
                                                    <small class="d-block mb-3 text-secondary">
                                                        Founder & CEO of Hermisferio
                                                    </small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <section id="carousel" data-wow-duration=".9s" class="wow fadeInUp max-wrapper whyUs-brands-work">
            <div class="container-fluid ">
                <h2 class="big-title font-weight-700 my-4 text-center">Some Brands We Work With
                </h2>
                <h4 class="responsive-font text-center">
                    Quisque aliquet, libero consequat elementum convallis.
                </h4>
                <div class="owl-carousel whyUs-carousel my-5">
                    <div class="carouselItem max-w-200px mx-auto">
                        <img src="images/next.png" width="100%" alt="Lorem">
                    </div>
                    <div class="carouselItem max-w-200px mx-auto">
                        <img src="images/cglobal.png" width="100%" alt="Lorem">
                    </div>
                    <div class="carouselItem max-w-200px mx-auto">
                        <img src="images/digitalbox.png" width="100%" alt="Lorem">
                    </div>
                    <div class="carouselItem max-w-200px mx-auto">
                        <img src="images/abstract.png" width="100%" alt="Lorem">
                    </div>
                    <div class="carouselItem max-w-200px mx-auto">
                        <img src="images/spaces.png" width="100%" alt="Lorem">
                    </div>
                    <div class="carouselItem max-w-200px mx-auto">
                        <img src="images/hemisferio.png" width="100%" alt="Lorem">
                    </div>
                    <div class="carouselItem max-w-200px mx-auto">
                        <img src="images/next.png" width="100%" alt="Lorem">
                    </div>
                    <div class="carouselItem max-w-200px mx-auto">
                        <img src="https://avada.theme-fusion.com/marketing-consultant/wp-content/uploads/sites/142/2020/06/cglobal.png"
                            width="100%" alt="Lorem">
                    </div>


                    <div class="carouselItem max-w-200px mx-auto">
                        <img src="images/abstract.png" width="100%" alt="Lorem">
                    </div>
                </div>
            </div>
        </section>

        <section data-wow-duration=".9s" data-wow-delay=".9s" class="wow fadeInDown py-4 py-lg-5">
            <div class="md-w-60 mx-auto mt-20px mb-5-percent d-flex">
                <h2 class="color-black mid-title text-center">
                    Let’s Work Together to Create Your Perfect Marketing Strategy
                </h2>
            </div>
            <div class="container mt-5">
                <div class="row">
                    <div class="col-md-6 my-md-4 my-lg-4 my-2 wow fadeInDown">
                        <div class="lets-work-f-columns">
                            <div>
                                <div
                                    class="p-3 bg-c-primary mx-4 lets-work-icon d-flex justify-content-center align-items-center border-radius-10">
                                    <i class="fa fa-plus text-light"></i>
                                </div>
                            </div>
                            <div>
                                <h4 class="hover-c-primary font-24px mb-4">
                                    Increase Visibility
                                </h4>
                                <p class="font-20px family-serif">
                                    Suspendisse posuere condimentum dui, in ullamcorper leo iaculis non. Maeces aliquam
                                    accumsan mauris interdum.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 my-md-4 my-lg-4 my-2 wow fadeInDown">
                        <div class="lets-work-f-columns">
                            <div>
                                <div
                                    class="p-3 bg-c-primary mx-4 lets-work-icon d-flex justify-content-center align-items-center border-radius-10">
                                    <i class="fa fa-plus text-light"></i>
                                </div>
                            </div>
                            <div>
                                <h4 class="hover-c-primary font-24px mb-4">
                                    Get Quality Leads
                                </h4>
                                <p class="font-20px family-serif">
                                    Suspendisse posuere condimentum dui, in ullamcorper leo iaculis non. Maeces aliquam
                                    accumsan mauris interdum.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div data-wow-duration="1s" data-wow-delay="1s"
                        class="col-md-6 my-md-4 my-lg-4 my-2 wow fadeInDown">
                        <div class="lets-work-f-columns">
                            <div>
                                <div
                                    class="p-3 bg-c-primary mx-4 lets-work-icon d-flex justify-content-center align-items-center border-radius-10">
                                    <i class="fa fa-plus text-light"></i>
                                </div>
                            </div>
                            <div>
                                <h4 class="hover-c-primary font-24px mb-4">

                                    Monthly Reporting

                                </h4>
                                <p class="font-20px family-serif">
                                    Suspendisse posuere condimentum dui, in ullamcorper leo iaculis non. Maeces aliquam
                                    accumsan mauris interdum.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div data-wow-duration="1s" data-wow-delay="1s"
                        class="col-md-6 my-md-4 my-lg-4 my-2 wow fadeInDown">
                        <div class="lets-work-f-columns">
                            <div>
                                <div
                                    class="p-3 bg-c-primary mx-4 lets-work-icon d-flex justify-content-center align-items-center border-radius-10">
                                    <i class="fa fa-plus text-light"></i>
                                </div>
                            </div>
                            <div>
                                <h4 class="hover-c-primary font-24px mb-4">

                                    Grow Your Customer Base

                                </h4>
                                <p class="font-20px family-serif">
                                    Suspendisse posuere condimentum dui, in ullamcorper leo iaculis non. Maeces aliquam
                                    accumsan mauris interdum.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="my-md-5 my-lg-5">
                    <div class="btn-c-primary my-4 text-center">
                        <button type="button" class="primary-hovered border-radius-10 font-weight-500">
                            <span>Get a Consultation</span>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <section class="grey-section wow fadeInUp">
            <div class="container-fluid max-wrapper">
                <div class="md-w-60 mx-auto py-lg-5 py-md-4">
                    <h2 class="mb-20px big-title font-weight-700 text-center">
                        Secured Marketing Growth
                    </h2>
                    <h3 class="heading-desc family-serif text-center">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor placerat luctus.
                    </h3>
                </div>
                <div class="row py-2">
                    <div class="col-md-4 wow fadeInUp">
                        <div class="marketing-card p-md-4 p-lg-4 bg-white text-center">
                            <h4 class="mb-3 md-title">
                                Advertising
                            </h4>
                            <p class="font-20px y-2">
                                Curabitur ac leo nunc. Vestibulum et mauris vel ante finibus.
                            </p>
                            <span
                                class="my-2 card-icon d-flex justify-content-center align-items-center bg-c-primary mx-auto">
                                <i class="fa fa-play text-white"></i>
                            </span>
                            <a href="#" class="light-pink-btn border-radius-10  bg-light-pink d-inline-block my-4">
                                <span class="responsive-fonts font-weight-500 free-quote-text px-3 whie-s-nowrap">
                                    Learn more
                                </span>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 wow fadeInUp">
                        <div class="marketing-card p-md-4 p-lg-4 bg-white text-center">
                            <h4 class="mb-3 md-title">
                                Performance
                            </h4>
                            <p class="font-20px y-2">
                                Curabitur ac leo nunc. Vestibulum et mauris vel ante finibus.
                            </p>
                            <span
                                class="my-2 card-icon d-flex justify-content-center align-items-center bg-c-primary mx-auto">
                                <i class="fa fa-play text-white"></i>
                            </span>
                            <a href="#" class="light-pink-btn border-radius-10  bg-light-pink d-inline-block my-4">
                                <span class="responsive-fonts font-weight-500 free-quote-text px-3 whie-s-nowrap">
                                    Learn more
                                </span>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 wow fadeInUp">
                        <div class="marketing-card p-md-4 p-lg-4 bg-white text-center">
                            <h4 class="mb-3 md-title">
                                Optimization
                            </h4>
                            <p class="font-20px y-2">
                                Curabitur ac leo nunc. Vestibulum et mauris vel ante finibus.
                            </p>
                            <span
                                class="my-2 card-icon d-flex justify-content-center align-items-center bg-c-primary mx-auto">
                                <i class="fa fa-play text-white"></i>
                            </span>
                            <a href="#" class="light-pink-btn border-radius-10  bg-light-pink d-inline-block my-4">
                                <span class="responsive-fonts font-weight-500 free-quote-text px-3 whie-s-nowrap">
                                    Learn more
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container-fluid max-wrapper wow fadeInUpBig" data-wow-duration="1.1s" data-wow-delay=".2s">
                <div class="row py-lg-5 py-lg-5 py-2" style="padding-bottom: 50px !important">
                    <h4 class="sec-title text-center mt-60">Awards</h4>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-6">
                        <div class="awards-img mx-auto awards-img1">
                            <img src="https://avada.theme-fusion.com/marketing-consultant/wp-content/uploads/sites/142/2020/07/award-a.png"
                                width="100%" alt="">
                        </div>
                        <div class="awards-text">
                            <p class="mb-20px font-20px line-height-1-6 text-center">Winner Seo Master MAGT Smart Start
                                Award 2017</h4>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-6">
                        <div class="awards-img mx-auto awards-img2">
                            <img src="https://avada.theme-fusion.com/marketing-consultant/wp-content/uploads/sites/142/2020/07/award-b.png"
                                width="100%" alt="">
                        </div>
                        <div class="awards-text">
                            <p class="mb-20px font-20px line-height-1-6 text-center">Top Social Media Agencies Next
                                Partner 2018</h4>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-6">
                        <div class="awards-img mx-auto awards-img3">
                            <img src="https://avada.theme-fusion.com/marketing-consultant/wp-content/uploads/sites/142/2020/07/award-c.png"
                                width="100%" alt="">
                        </div>
                        <div class="awards-text">
                            <p class="mb-20px font-20px line-height-1-6 text-center">0 Fastest Growing Abstract Solution
                                Providers 2019</h4>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-6">
                        <div class="awards-img mx-auto awards-img4">
                            <img src="https://avada.theme-fusion.com/marketing-consultant/wp-content/uploads/sites/142/2020/07/award-d.png"
                                width="100%" alt="">
                        </div>
                        <div class="awards-text">
                            <p class="mb-20px font-20px line-height-1-6 text-center">National Excellence Agencie Award
                                Winner 2020</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="max-wrapper">
            <div class="container-fluid">
                <div class="row  align-items-center" style="padding-bottom: 6% !important; padding-top: 5%;">
                    <div class="col-md-6 my-20px">
                        <div class="col-text-spacing col-img-boxShadow wow fadeInLeft">
                            <div class="col-img">
                                <img class="border-radius-10" src="images/large-testimonial-2.jpg" width="100%" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="anim-col-space wow fadeInRight">
                            <h6 class="font-weight-700 famin
                             sec-title">
                                “The team at Avada Marketing Consultant is fabulous. They helped us unlock our potential
                                online and offline. We have experienced year on year growth due to their progressive
                                approach.”
                            </h6>
                            <strong class="mt-20px d-block responsive-fonts family-serif">
                                Andreas Casey
                            </strong>
                            <small class="text-secondary d-block">Marketing Consultant Expert</small>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="max-wrapper sticky-sec wow fadeInDown">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="sticky-row bg-white">
                            <div class="sticky-row-img-sec">
                                <div class="sticky-row-img">
                                    <img src="images/marketing-expert-cta.png" width="100%" alt="">
                                </div>
                                <div class="mx-5">
                                    <h4 class="text-left mb-0 color-black">Sandy Reiff</h4>
                                    <small class="color-black">Marketing Consultant Expert</small>
                                </div>
                            </div>
                            <div>
                                <h4 class="md-title font-weight-500 color-black text-center">Drive Leads and Sales with
                                    Avada
                                </h4>
                            </div>
                            <a href="#" class="light-pink-btn border-radius-10  bg-light-pink d-flex max-w-fit">
                                <span class="color-primary mx-3"><i class="fa fa-phone"></i></span>
                                <span class="font-weight-500 color-primary whie-s-nowrap">(555) 802-1234</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <section class="max-wrapper">
            <div class="container-fluid">
                <div class="row  align-items-center pt-5-percent">
                    <div class="md-w-60 mx-auto my-lg-5 my-md-4 wow fadeInDown">
                        <h2 class="mx-5 big-title font-weight-700 text-center">
                            Harness The Power <br> Of Social Media
                        </h2>
                        <h3 class="heading-desc family-serif text-center my-3">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor placerat luctus.
                        </h3>
                    </div>
                    <div class="col-md-6">
                        <div class="col-img-spacing ">
                            <div class="col-img p-md-5 p-lg-5">
                                <img class="border-radius-10" src="images/equip-leaders-from-strategy.png" width="100%"
                                    alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 wow fadeInDown">
                        <div id="accordion">
                            <div class="mb-3">
                                <div class="p-3" id="headingOne">
                                    <h5 class="mb-0">
                                        <div data-toggle="collapse" class="tester" data-target="#collapseOne"
                                            aria-expanded="true" aria-controls="collapseOne">
                                            <div class="collapBtn d-flex align-items-center c-pointer">
                                                <i id="plus1" class="plus-minus-icon color-primary fa fa-minus"></i>
                                                <h4
                                                    class="w-100 hover-c-primary md-title my-0 collap-title-margin color-black">
                                                    Customer Service</h4>
                                            </div>
                                        </div>
                                    </h5>
                                </div>
                                <div id="collapseOne" class="collapser show collapse" aria-labelledby="headingO"
                                    data-parent="#accordion">
                                    <div class="card-body mt-3">
                                        <p class="font-20px family-serif line-height-1-6">
                                            Curabitur ac leo nunc. Vestibulum et mauris vel ante finibus maximus nec ut
                                            leo. Integer consectetur luctus dui id convallis. Sed pellentesque erat non
                                            eu auctor tortor, sit amet egestas purus.
                                        </p>
                                        <p class="my-20px family-serif font-20px line-height-1-6">
                                            Sed tincidunt tempor leo, vitae consequat lorem ornare ultricies. Nullam
                                            fringilla ultricies pharetra.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="p-3" id="headingTwo">
                                    <h5 class="mb-0">
                                        <div data-toggle="collapse" class="tester" data-target="#collapseTwo"
                                            aria-expanded="false" aria-controls="collapseTwo">
                                            <div class="collapBtn d-flex align-items-center c-pointer">
                                                <i class="plus-minus-icon color-primary  fa fa-plus"></i>
                                                <h4
                                                    class="w-100 hover-c-primary md-title my-0 collap-title-margin color-black">
                                                    Online Consultation</h4>
                                            </div>
                                        </div>
                                    </h5>
                                </div>
                                <div id="collapseTwo" class="collapser collapse" aria-labelledby="headingTwo"
                                    data-parent="#accordion">
                                    <div class="card-body mt-3">
                                        <p class="font-20px line-height-1-6">
                                            Curabitur ac leo nunc. Vestibulum et mauris vel ante finibus maximus nec ut
                                            leo. Integer consectetur luctus dui id convallis. Sed pellentesque erat non
                                            eu auctor tortor, sit amet egestas purus.
                                        </p>
                                        <p class="mt-3 font-20px family-serif line-height-1-6">
                                            Sed tincidunt tempor leo, vitae consequat lorem ornare ultricies. Nullam
                                            fringilla ultricies pharetra.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="p-3" id="headingThree">
                                    <h5 class="mb-0">
                                        <div data-toggle="collapse" class="tester" data-target="#collapseThree"
                                            aria-expanded="false" aria-controls="collapseThree">
                                            <div class="collapBtn  d-flex align-items-center c-pointer">
                                                <i class="plus-minus-icon color-primary  fa fa-plus"></i>
                                                <h4
                                                    class="w-100 hover-c-primary md-title my-0 collap-title-margin color-black">
                                                    Sales Mnagement</h4>
                                            </div>
                                        </div>
                                    </h5>
                                </div>
                                <div id="collapseThree" class="collapser collapse" aria-labelledby="headingThree"
                                    data-parent="#accordion">
                                    <div class="card-body mt-3">
                                        <p class="font-20px family-serif line-height-1-6">
                                            Curabitur ac leo nunc. Vestibulum et mauris vel ante finibus maximus nec ut
                                            leo. Integer consectetur luctus dui id convallis. Sed pellentesque erat non
                                            eu auctor tortor, sit amet egestas purus.
                                        </p>
                                        <p class="mt-3 font-20px family-serif line-height-1-6">
                                            Sed tincidunt tempor leo, vitae consequat lorem ornare ultricies. Nullam
                                            fringilla ultricies pharetra.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="max-wrapper py-md-5 py-lg-5">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 my-3 wow fadeInDown">
                        <div class="twoCards-grey-card twoCards-grey-card-left">
                            <h4 class="text-center mb-3 font-30">Grow your traffic</h4>
                            <p class="font-20px text-center menu-card-title py-2 family-serif">
                                Nullam et cursus neque, eget fringilla dolor, curabitur ac leo nunc. Vestibulum et
                                mauris vel ante finibus.
                            </p>
                            <div class="towCards-card-img border-radius-10 bg-white wow fadeInLeft">
                                <img src="images/traffic-card-400x209.png" width="100%" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 my-3 wow fadeInDown">
                        <div class="twoCards-grey-card twoCards-grey-card-right">
                            <h4 class="text-center mb-3 font-30">Increase your sales
                            </h4>
                            <p class="font-20px text-center menu-card-title py-2 family-serif">
                                Nullam et cursus neque, eget fringilla dolor, curabitur ac leo nunc. Vestibulum et
                                mauris vel ante finibus.
                            </p>
                            <div class="towCards-card-img border-radius-10 bg-white wow fadeInRight">
                                <img src="images/sales-card-400x234.png" width="100%" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <section class="collapse-section wow fadeInDown">
            <div class="container max-wrapper accordianSec">
                <div class="row">
                    <div id="accordion-1" class="px-5">
                        <h2 class="text-center collapse-heading">What problem are you trying to solve?</h2>
                        <div id="accordion">
                            <div class="mb-3">
                                <div class="p-3" id="headingFour">
                                    <h5 class="mb-0">
                                        <div data-toggle="collapse" class="tester" data-target="#collapseFour"
                                            aria-expanded="true" aria-controls="collapseFour">
                                            <div class="collapBtn-1 d-flex align-items-center c-pointer">
                                                <h5 class="w-100 hover-c-primary collap-title my-0 color-black">Vivamus
                                                    id
                                                    ante vel purus commodo cursus? Nunc sit amet cursus massa?</h5>
                                                <i id="plus1" class="plus-minus-icon-1 color-primary  fa fa-plus"></i>
                                            </div>
                                        </div>
                                    </h5>
                                </div>
                                <div id="collapseFour" class="collapser collapse" aria-labelledby="collapH"
                                    data-parent="#accordion-1">
                                    <div class="card-body mt-3">
                                        <p class="responsive-fonts line-height-1-6">
                                            Curabitur ac leo nunc. Vestibulum et mauris vel ante finibus maximus nec ut
                                            leo.
                                            Integer consectetur luctus dui id convallis. Sed pellentesque erat non eu
                                            auctor
                                            tortor, sit amet egestas purus.
                                        </p>
                                        <p class="mt-3 responsive-fonts line-height-1-6">
                                            Sed tincidunt tempor leo, vitae consequat lorem ornare ultricies. Nullam
                                            fringilla ultricies pharetra.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="p-3" id="headingFive">
                                    <h5 class="mb-0">
                                        <div data-toggle="collapse" class="tester" data-target="#collapseFive"
                                            aria-expanded="true" aria-controls="collapseFive">
                                            <div class="collapBtn-1 d-flex align-items-center c-pointer">
                                                <h5 class="w-100 hover-c-primary collap-title my-0 color-black">Quisque
                                                    aliquet,
                                                    libero consequat elementum convallis, erat risus imperdiet?
                                                    </h4>
                                                    <i id="plus1"
                                                        class="plus-minus-icon-1 color-primary  fa fa-plus"></i>
                                            </div>
                                        </div>
                                    </h5>
                                </div>
                                <div id="collapseFive" class="collapser collapse" aria-labelledby="collapH2"
                                    data-parent="#accordion-1">
                                    <div class="card-body mt-3">
                                        <p class="responsive-fonts line-height-1-6">
                                            Curabitur ac leo nunc. Vestibulum et mauris vel ante finibus maximus nec ut
                                            leo.
                                            Integer consectetur luctus dui id convallis. Sed pellentesque erat non eu
                                            auctor
                                            tortor, sit amet egestas purus.
                                        </p>
                                        <p class="mt-3 responsive-fonts line-height-1-6">
                                            Sed tincidunt tempor leo, vitae consequat lorem ornare ultricies. Nullam
                                            fringilla ultricies pharetra.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="p-3" id="hedingSix">
                                    <h5 class="mb-0">
                                        <div data-toggle="collapse" class="tester" data-target="#collapseSix"
                                            aria-expanded="true" aria-controls="collapseSix">
                                            <div class="collapBtn-1 d-flex align-items-center c-pointer">
                                                <h5 class="w-100 hover-c-primary collap-title my-0 color-black">Duis vel
                                                    risus
                                                    egestas, viverra enim sed, pretium velit?
                                                    </h4>
                                                    <i id="plus1"
                                                        class="plus-minus-icon-1 color-primary  fa fa-plus"></i>
                                            </div>
                                        </div>
                                    </h5>
                                </div>
                                <div id="collapseSix" class="collapser collapse " aria-labelledby="collapH3"
                                    data-parent="#accordion-1">
                                    <div class="card-body mt-3">
                                        <p class="responsive-fonts line-height-1-6">
                                            Curabitur ac leo nunc. Vestibulum et mauris vel ante finibus maximus nec ut
                                            leo.
                                            Integer consectetur luctus dui id convallis. Sed pellentesque erat non eu
                                            auctor
                                            tortor, sit amet egestas purus.
                                        </p>
                                        <p class="mt-3 responsive-fonts line-height-1-6">
                                            Sed tincidunt tempor leo, vitae consequat lorem ornare ultricies. Nullam
                                            fringilla ultricies pharetra.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="p-3" id="headingSeven">
                                    <h5 class="mb-0">
                                        <div data-toggle="collapse" class="tester" data-target="#collapseSeven"
                                            aria-expanded="true" aria-controls="collapseSeven">
                                            <div class="collapBtn-1 d-flex align-items-center c-pointer">
                                                <h5 class="w-100 hover-c-primary md-title my-0  color-black">Curabitur
                                                    ornare felis sit amet neque volutpat, porta lobortis elit rutrum?
                                                </h5>
                                                <i id="plus1" class="plus-minus-icon-1 color-primary  fa fa-plus"></i>
                                            </div>
                                        </div>
                                    </h5>
                                </div>
                                <div id="collapseSeven" class="collapser collapse " aria-labelledby="collapH4"
                                    data-parent="#accordion-1">
                                    <div class="card-body mt-3">
                                        <p class="responsive-fonts line-height-1-6">
                                            Curabitur ac leo nunc. Vestibulum et mauris vel ante finibus maximus nec ut
                                            leo.
                                            Integer consectetur luctus dui id convallis. Sed pellentesque erat non eu
                                            auctor
                                            tortor, sit amet egestas purus.
                                        </p>
                                        <p class="mt-3 responsive-fonts line-height-1-6">
                                            Sed tincidunt tempor leo, vitae consequat lorem ornare ultricies. Nullam
                                            fringilla ultricies pharetra.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-grey py-6-percent px-32">
            <div class="container-fluid max-wrapper">
                <div class="row align-items-end">
                    <div class="col-md-7">
                        <h2 class="mid-title family-serif font-weight-700 wow fadeInLeft color-black">
                            Learn How We Have Helped Leading Organizations
                        </h2>
                    </div>
                    <div class="col-md-5">
                        <div class="btn-c-primary my-4 text-left-small text-right wow fadeInRight">
                            <button type="button" class="primary-hovered border-radius-10 font-weight-500">
                                <span>Explore All Resources</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row mb-20px mt-4-percent">
                    <div class="col-md-4">
                        <div class="help-card wow fadeInDown">
                            <div class="help-card-img position-relative">
                                <img src="https://avada.theme-fusion.com/marketing-consultant/wp-content/uploads/sites/142/2020/06/case-studies-1.jpg"
                                    width="100%" alt="">

                                <a class="hlp-card-overlay" href="#"></a>

                            </div>
                            <div class="help-card-footer">
                                <div class="wow fadeInDown" data-wow-delay=".5s" data-wow-duration="1s">
                                    <h2 class="help-card-link">
                                        <a href="#" class="color-black hover-c-primary">
                                            How Spaces attracted five million visitors by improving the content
                                        </a>
                                    </h2>
                                </div>
                                <div class="help-card-border">

                                </div>
                                <div class="wow fadeInUp">
                                    <p class="big-title">
                                        200%
                                    </p>
                                    <p class="font-20px">
                                        Higher revenue from digital
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="help-card wow fadeInDown">
                            <div class="help-card-img position-relative">
                                <img src="images/case-studies-4.jpg" width="100%" alt="">

                                <a class="hlp-card-overlay" href="#"></a>

                            </div>
                            <div class="help-card-footer">
                                <div class="wow fadeInDown" data-wow-delay=".5s" data-wow-duration="1s">
                                    <h2 class="help-card-link">
                                        <a href="#" class="color-black hover-c-primary">
                                            Creativity helped Hemisferio to increase their brand reach vertically
                                        </a>
                                    </h2>
                                </div>
                                <div class="help-card-border">

                                </div>
                                <div class="wow fadeInUp">
                                    <p class="big-title">
                                        10x
                                    </p>
                                    <p class="font-20px">
                                        Sales increase with the same ad spend
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="help-card wow fadeInDown">
                            <div class="help-card-img position-relative">
                                <img src="images/case-studies-6.jpg" width="100%" alt="">

                                <a class="hlp-card-overlay" href="#"></a>

                            </div>
                            <div class="help-card-footer">
                                <div class="wow fadeInDown" data-wow-delay=".5s" data-wow-duration="1s">
                                    <h2 class="help-card-link">
                                        <a href="#" class="color-black hover-c-primary">
                                            How DigitalBox used AI-powered data insight to boost sales
                                        </a>
                                    </h2>
                                </div>
                                <div class="help-card-border">

                                </div>
                                <div class="wow fadeInUp">
                                    <p class="big-title">
                                        3-year
                                    </p>
                                    <p class="font-20px">
                                        Partnership with Avada Consultant
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <section class="py-lg-5 py-md-5 wow fadeInDown">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="text-center md-w-60 mx-auto wow fadeInRight">
                            <div class="mx-auto" style="max-width: 110px;">
                                <img src="https://avada.theme-fusion.com/marketing-consultant/wp-content/uploads/sites/142/2020/06/abstract.png"
                                    width="100%" alt="">
                            </div>
                            <h4 class="heading-desc text-center mt-3 color-black  hover-c-primary">“The team at Avada
                                Marketing Consultant is fabulous. They helped us unlock our potential online and
                                offline. We have experienced year on year growth due to their progressive approach.”
                            </h4>
                            <div class="sticky-row-img mx-auto">
                                <img src="images/small-testimonial.jpg" width="100%" alt="" title="Melissa Dean">
                            </div>
                            <h4 class="color-black my-2">Melissa Dean</h4>
                            <p class="text-secondary small-text-center d-block">Marketing Consultant Expert
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="black-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="black-container border-radius-10">
                            <div class="mx-md-4 mx-lg-5">
                                <div class="w-md-60 mx-auto">
                                    <h4 class="mb-5 bigger-title text-white text-center">
                                        Let’s Make Things Happen
                                    </h4>
                                </div>
                                <div class="mx-auto contact-form bg-white" id="blackForm-container">
                                    <div class="mx-auto" style="max-width: 110px;">
                                        <img src="images/marketing-consultant-expert.jpg" width="100%"
                                            class="rounded-circle" alt="">
                                    </div>
                                    <h4 class="color-black my-2 text-center">Melissa Dean</h4>
                                    <p class="text-secondary text-center d-block">Marketing Consultant Expert
                                    </p>

                                    <div class="mx-auto border-radius-10 justify-content-center d-flex">
                                        <span class="color-primary mx-3"><i class="fa fa-phone"></i></span>
                                        <h5 class="font-weight-500 color-primary whie-s-nowrap">(555) 802-1234</h5>
                                    </div>
                                    <form>
                                        <div class="mt-3">
                                            <div class="form-input my-3">
                                                <input type="text" required class="input" placeholder="Your Name*">
                                            </div>
                                            <div class="form-input my-3">
                                                <input type="text" required class="input" placeholder="Your Email*">
                                            </div>
                                            <div class="form-input my-3">
                                                <input type="text" required class="input"
                                                    placeholder="Your Phone Number*">
                                            </div>
                                            <div class="btn-c-primary my-3">
                                                <button type="button"
                                                    class="w-100 primary-hovered border-radius-10 font-weight-500">
                                                    <span>Get a Callback</span>
                                                </button>
                                            </div>
                                            <div class="my-3">
                                                <small class="d-block text-center text-secondary">By submitting my data
                                                    I agree to be contacted</small>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                                <div class="mx-auto w-md-60 owl-carousel blackCarousel my-4 ">
                                    <div class="carouselItem max-w-200px mx-auto">
                                        <img src="images/abstract.png" width="100%" alt="Lorem">
                                    </div>


                                    <div class="carouselItem max-w-200px mx-auto">
                                        <img src="images/digitalbox.png" width="100%" alt="Lorem">
                                    </div>

                                    <div class="carouselItem max-w-200px mx-auto">
                                        <img src="images/next.png" width="100%" alt="Lorem">
                                    </div>
                                    <div class="carouselItem max-w-200px mx-auto">
                                        <img src="images/cglobal.png" width="100%" alt="Lorem">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <footer class="footer max-wrapper" id="footer">
            <div class="container-fluid">
                <div class="row">

                    <div class="col-md-5">
                        <div class="my-20px">
                            <div class="p-3 small-text-center small-mx-auto footer-f-column">
                                <h3 class="footerTitle">
                                    Grow Your Online Business Strategically, and Improve Customer Retention.
                                </h3>
                                <ul class="d-flex align-items-center footer-social-icons smalll-justify-center">
                                    <li><a href="#">
                                            <i class="font-20px fab fa-facebook-f color-black"></i>
                                        </a></li>
                                    <li><a href="#">
                                            <i class="font-20px fab fa-twitter color-black"></i>
                                        </a></li>
                                    <li><a href="#">
                                            <i class="font-20px fab fa-instagram color-black"></i>
                                        </a></li>
                                    <li><a href="#">
                                            <i class="font-20px fab fa-youtube color-black"></i>
                                        </a></li>
                                    <li><a href="#">
                                            <i class="font-20px fab fa-linkedin color-black"></i>
                                        </a></li>
                                    <li><a href="#">
                                            <i class="font-20px fab fa-tiktok color-black"></i>
                                        </a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="row">
                            <div class="col-md-4">
                                <ul class="my-20px d-flex flex-column">
                                    <li>
                                        <h4 class="color-black font-20px">
                                            Services
                                        </h4>
                                    </li>
                                    <li> <a href="#" class="font-20px hover-c-primary my-2 d-block footer-link">
                                            Marketing Plan
                                        </a></li>
                                    <li> <a href="#" class="font-20px hover-c-primary my-2 d-block footer-link">
                                            Sales Development
                                        </a></li>
                                    <li> <a href="#" class="font-20px hover-c-primary my-2 d-block footer-link">
                                            Digital Marketing
                                        </a></li>
                                    <li> <a href="#" class="font-20px hover-c-primary my-2 d-block footer-link">
                                            Pricing
                                        </a></li>
                                    <li> <a href="#" class="font-20px hover-c-primary my-2 d-block footer-link">
                                            Marketing Plan
                                        </a></li>
                                    <li> <a href="why-us.html"
                                            class="font-20px hover-c-primary my-2 d-block footer-link">
                                            Why Us
                                        </a></li>
                                    <li>
                                        <p class="responsive-fonts">
                                            Case Studies
                                            </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <ul class="my-20px d-flex flex-column">
                                    <li>
                                        <h4 class="color-black font-20px">
                                            Resources
                                        </h4>
                                    </li>
                                    <li> <a href="#" class="font-20px hover-c-primary my-2 d-block footer-link">
                                            Learning Center
                                        </a></li>
                                    <li> <a href="#" class="font-20px hover-c-primary my-2 d-block footer-link">
                                            Video Tutorials
                                        </a></li>
                                    <li> <a href="#" class="font-20px hover-c-primary my-2 d-block footer-link">
                                            Customers
                                        </a></li>
                                    <li> <a href="blog.html" target="_blank"
                                            class="font-20px hover-c-primary my-2 d-block footer-link">
                                            Blog
                                        </a></li>

                                </ul>
                            </div>
                            <div class="col-md-4">
                                <ul class="my-20px d-flex flex-column">
                                    <li>
                                        <h4 class="color-black font-20px">
                                            Company
                                        </h4>
                                    </li>
                                    <li> <a href="#" class="font-20px hover-c-primary my-2 d-block footer-link">
                                            Who We Are
                                        </a></li>
                                    <li> <a href="#" class="font-20px hover-c-primary my-2 d-block footer-link">
                                            Contact Us
                                        </a></li>
                                    <li> <a href="#" class="font-20px hover-c-primary my-2 d-block footer-link">
                                            Careers
                                        </a></li>


                                </ul>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
            <div class="footer-end">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-5"><span class="d-block small-text-center">&copy;2021 • Avada Consultant •
                                Powered by
                                WordPress</span>
                        </div>
                        <div class="col-md-7">
                            <div class="row">
                                <div class="col-md-6"><span class="d-block small-text-center">Call Us (555)
                                        802-1234</span></div>
                                <div class="col-md-6 text-right-md"><span
                                        class="d-block small-text-center">info@yourcompany.com

                                    </span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

    </div>

    <!-- bootstrap JavaScript Bundle with Popper -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <!-- owl carousel -->
    <script src="owlCarousel/jquery.min.js"></script>
    <script src="owlCarousel/owl.carousel.min.js"></script>
    <!-- wow js -->

    <script src="js/wow.min.js"></script>

    <script>
        new WOW().init();
        // collapse
        const collapBtn = document.querySelectorAll('.collapBtn');
        const pM = document.querySelectorAll('.plus-minus-icon');

        const collapBtn_1 = document.querySelectorAll('.collapBtn-1');
        const pM_1 = document.querySelectorAll('.plus-minus-icon-1');


        collapBtn.forEach((colBtn, idx) => {
            colBtn.addEventListener('click', () => {
                pM.forEach((icon, idx1) => {
                    if (idx === idx1) {
                        const currentIcon = icon.className;
                        if (currentIcon.includes('fa-minus'))
                            icon.classList.replace('fa-minus', 'fa-plus');
                        else icon.classList.replace('fa-plus', 'fa-minus');
                    } else icon.classList.replace('fa-minus', 'fa-plus');
                });
            });
        });

        collapBtn_1.forEach((colBtn, idx) => {
            colBtn.addEventListener('click', () => {
                pM_1.forEach((icon, idx1) => {
                    if (idx === idx1) {
                        const currentIcon = icon.className;
                        if (currentIcon.includes('fa-minus'))
                            icon.classList.replace('fa-minus', 'fa-plus');
                        else icon.classList.replace('fa-plus', 'fa-minus');
                    } else icon.classList.replace('fa-minus', 'fa-plus');
                });
            });
        });


        $(document).ready(function () {


            const responSive = {
                0: {
                    items: 2,

                },
                600: {
                    items: 3,
                },
                1000: {
                    items: 5,
                }
            }


            $(".whyUs-carousel").owlCarousel({
                loop: true,
                dots: false,
                items: 5,
                responsiveClass: true,
                responsive: responSive
            });
            $(".blackCarousel").owlCarousel({
                loop: true,
                dots: false,
                items: 3,
            });


        });
    </script>
</body>

</html>