BLACK FRIDAY SPECIAL!
Apply Coupon:BLFCM2022to Get 50% Flat Discount!🔥
Header Style 1
<!--====== HEADER ONE PART START ======-->
<section class="header-area header-one">
   <div class="header-content-area">
      <div class="container">
         <div class="row align-items-center">
            <div class="col-lg-6 col-12">
               <div class="header-wrapper">
                  <div class="header-content">
                     <h1 class="header-title">
                        Unlimited Friendly & Easy Customisable
                     </h1>
                     <p class="text-lg">
                        Stop wasting time and money designing and managing a website
                        that doesn’t get results. Happiness guaranteed!
                     </p>
                     <div class="header-btn rounded-buttons">
                        <a
                           class="btn primary-btn-outline btn-lg"
                           href="javascript:void(0)"
                           >
                        DOWNLOAD NOW
                        </a>
                     </div>
                  </div>
                  <!-- header content -->
               </div>
            </div>
            <div class="col-lg-6 col-12">
               <div class="header-image d-none d-lg-block">
                  <div class="image">
                     <img
                        src="https://cdn.ayroui.com/1.0/images/header/header-1.svg"
                        alt="Header"
                        />
                  </div>
               </div>
            </div>
         </div>
         <!-- row -->
      </div>
      <!-- container -->
      <div class="header-shape">
         <img src="https://cdn.ayroui.com/1.0/images/header/header-shape.svg" alt="shape" />
      </div>
      <!-- header-shape -->
   </div>
   <!-- header content area -->
</section>
<!--====== HEADER ONE PART ENDS ======-->
/* ===== Buttons Css ===== */
.header-one .header-content-area .primary-btn-outline {
  border-color: var(--primary);
  color: var(--primary);
}
.header-one .header-content-area .active.primary-btn-outline, .header-one .header-content-area .primary-btn-outline:hover, .header-one .header-content-area .primary-btn-outline:focus {
  background: var(--primary-dark);
  color: var(--white);
}
.header-one .header-content-area .deactive.primary-btn-outline {
  color: var(--dark-3);
  border-color: var(--gray-4);
  pointer-events: none;
}

/*===== HEADER ONE =====*/
.header-one {
  position: relative;
}
.header-one .header-content-area {
  background-color: var(--primary);
  position: relative;
  padding: 130px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-one .header-content-area {
    padding: 100px 0;
  }
}
@media (max-width: 767px) {
  .header-one .header-content-area {
    padding: 60px 0;
  }
}
@media only screen and (min-width: 1400px) {
  .header-one .header-content-area {
    height: 900px;
  }
}
@media (max-width: 767px) {
  .header-one .header-content-area {
    height: 550px;
  }
}
.header-one .header-content-area .primary-btn-outline {
  border-color: var(--white);
  background-color: var(--white);
  color: var(--primary);
}
.header-one .header-content-area .primary-btn-outline:hover {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}
.header-one .header-wrapper {
  position: relative;
}
.header-one .header-content {
  max-width: 540px;
  position: relative;
  z-index: 5;
}
.header-one .header-title {
  color: var(--white);
  font-weight: 800;
}
.header-one .text-lg {
  color: var(--white);
  font-weight: 300;
  margin-top: 16px;
}
.header-one .header-btn {
  margin-top: 40px;
}
.header-one .header-image {
  text-align: center;
}
.header-one .header-image .image {
  max-width: 730px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-one .header-image .image {
    max-width: 600px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-one .header-image .image {
    max-width: 550px;
  }
}
.header-one .header-image .image img {
  width: 100%;
}
.header-one .header-shape {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  width: 100%;
}
.header-one .header-shape img {
  width: 100%;
}
Header Style 2
Header Style 3
Header Style 4
Header Style 5
Header Style 6
Header Style 7
Header Style 8
Header Style 9
Header Style 10
Header Style 11
Header Style 12
Header Style 13