.elementor-1856 .elementor-element.elementor-element-b9bf68c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1856 .elementor-element.elementor-element-b9bf68c:not(.elementor-motion-effects-element-type-background), .elementor-1856 .elementor-element.elementor-element-b9bf68c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A1F44;}.elementor-1856 .elementor-element.elementor-element-5fb6ece{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1856 .elementor-element.elementor-element-99f8620{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1856 .elementor-element.elementor-element-7ae93b2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1856 .elementor-element.elementor-element-9bed8b9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1856 .elementor-element.elementor-element-e1bf6fd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1856 .elementor-element.elementor-element-e1bf6fd:not(.elementor-motion-effects-element-type-background), .elementor-1856 .elementor-element.elementor-element-e1bf6fd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A1F44;}.elementor-1856 .elementor-element.elementor-element-c100d03{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1856 .elementor-element.elementor-element-5776f34{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1856 .elementor-element.elementor-element-d6c5ca8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1856 .elementor-element.elementor-element-d6c5ca8:not(.elementor-motion-effects-element-type-background), .elementor-1856 .elementor-element.elementor-element-d6c5ca8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A1F44;}.elementor-1856 .elementor-element.elementor-element-a9d5117{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1856 .elementor-element.elementor-element-a9d5117:not(.elementor-motion-effects-element-type-background), .elementor-1856 .elementor-element.elementor-element-a9d5117 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A1F44;}.elementor-1856 .elementor-element.elementor-element-481642a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1856 .elementor-element.elementor-element-5b4ef9c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1856 .elementor-element.elementor-element-9314bd0{padding:50px 0px 0px 0px;}.elementor-1856 .elementor-element.elementor-element-62e3175{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1856 .elementor-element.elementor-element-2bea25b{padding:0px 50px 0px 50px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-1856 .elementor-element.elementor-element-99f8620.e-con{--align-self:center;}}@media(min-width:768px){.elementor-1856 .elementor-element.elementor-element-99f8620{--width:50%;}.elementor-1856 .elementor-element.elementor-element-7ae93b2{--width:50%;}.elementor-1856 .elementor-element.elementor-element-5b4ef9c{--width:50%;}.elementor-1856 .elementor-element.elementor-element-62e3175{--width:50%;}}@media(max-width:767px){.elementor-1856 .elementor-element.elementor-element-99f8620{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1856 .elementor-element.elementor-element-74ec6f6{padding:0px 0px 0px 0px;}.elementor-1856 .elementor-element.elementor-element-74ec6f6 img{width:100%;max-width:500%;height:228px;}}/* Start custom CSS for html, class: .elementor-element-ae0ce06 */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Services</title>

<!-- Font Awesome (for icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
:root{
  --navy:#0A1F44;
  --gold:#D4AF37;
  --white:#ffffff;
}

/* SERVICES SECTION */
.services-section {
  padding: 20px 20px;
  background-color: var(--navy);
}

.services-container {
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

/* TITLE */
.services-title {
  font-size: 38px;
  color: var(--white);
  margin-bottom: 10px;
}

/* SUBTITLE */
.services-subtitle {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 50px;
}

/* GRID */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

/* CARD */
.service-card {
  background: var(--white);
  padding: 35px 25px;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* ICON */
.service-icon {
  width: 70px;
  height: 70px;
  background: var(--navy);
  color: var(--gold);
  font-size: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

/* CARD TITLE */
.service-card h3 {
  font-size: 20px;
  color: var(--gold);
  margin-bottom: 12px;
}

/* CARD TEXT */
.service-card p {
  font-size: 14px;
  color: #333333;
  line-height: 1.6;
}
</style>
</head>

<body>

<section class="services-section">
  <div class="services-container">

    <h2 class="services-title">Our Services</h2>
    <p class="services-subtitle">
      Complete digital marketing and development solutions for your business.
    </p>

    <div class="services-grid">

      <div class="service-card">
        <div class="service-icon"><i class="fas fa-bullhorn"></i></div>
        <h3>Social Media Marketing</h3>
        <p>Grow your brand and engage your audience across all social platforms.</p>
      </div>

      <div class="service-card">
        <div class="service-icon"><i class="fas fa-ad"></i></div>
        <h3>Google Ads</h3>
        <p>High-converting paid campaigns to drive leads and sales instantly.</p>
      </div>

      <div class="service-card">
        <div class="service-icon"><i class="fas fa-search"></i></div>
        <h3>SEO</h3>
        <p>Improve visibility and rank higher on search engines organically.</p>
      </div>

      <div class="service-card">
        <div class="service-icon"><i class="fas fa-code"></i></div>
        <h3>Website Development</h3>
        <p>Custom, fast, and responsive websites built for performance.</p>
      </div>

      <div class="service-card">
        <div class="service-icon"><i class="fas fa-mobile-alt"></i></div>
        <h3>Mobile App Development</h3>
        <p>Android & iOS mobile applications tailored to your business.</p>
      </div>

      <div class="service-card">
        <div class="service-icon"><i class="fas fa-shopping-cart"></i></div>
        <h3>E-commerce Setup</h3>
        <p>Complete online store setup with payment & product management.</p>
      </div>

      <div class="service-card">
        <div class="service-icon"><i class="fas fa-users-cog"></i></div>
        <h3>Staff Augmentation</h3>
        <p>Hire skilled professionals to scale your team quickly.</p>
      </div>

      <div class="service-card">
        <div class="service-icon"><i class="fas fa-paint-brush"></i></div>
        <h3>Graphic Designing</h3>
        <p>Creative designs that build strong brand identity.</p>
      </div>

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

</body>
</html>/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-2bea25b *//* ===== Premium Contact Form 7 Styling ===== */
.wpcf7 {
  max-width: 520px;
  margin: auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  font-family: 'Inter', sans-serif;
}

/* Labels */
.wpcf7 label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0A1F44; /* Navy Blue */
  margin-bottom: 6px;
}

/* Inputs */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1.5px solid #0A1F44; /* Navy Blue border */
  border-radius: 10px;
  font-size: 15px;
  color: #0A1F44; /* Text color navy blue */
  background: #f9f9f9;
  transition: all 0.3s ease;
}

/* Placeholder */
.wpcf7 input::placeholder {
  color: #D4AF37; /* Gold placeholder */
}

/* Focus effect */
.wpcf7 input:focus {
  outline: none;
  background: #ffffff;
  border-color: #D4AF37; /* Gold focus border */
  box-shadow: 0 0 0 3px rgba(212,175,55,0.2); /* Subtle gold glow */
}

/* Submit Button */
.wpcf7 input[type="submit"] {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #0A1F44, #D4AF37); /* Navy to gold gradient */
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.35s ease;
}

/* Button hover */
.wpcf7 input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  background: linear-gradient(135deg, #D4AF37, #0A1F44); /* Reverse gradient on hover */
}

/* Success message */
.wpcf7-mail-sent-ok {
  color: #0A1F44; /* Navy Blue */
  font-weight: 600;
  text-align: center;
  margin-top: 10px;
}

/* Error messages */
.wpcf7-not-valid-tip {
  font-size: 12px;
  color: #D4AF37; /* Gold for subtle attention */
  margin-top: -10px;
  margin-bottom: 10px;
}

/* Remove extra CF7 spacing */
.wpcf7 p{
  margin:0 0 10px !important;
}

.wpcf7 br{
  display:none;
}

/* Contact Form 7 – compact inputs */
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select{
  height:38px;
  padding:6px 10px;
  margin-bottom:10px;
  font-size:14px;
}

.wpcf7 textarea{
  height:auto;
}

/* ===== Responsive Styling ===== */

/* Tablets */
@media (max-width: 991px) {
  .wpcf7 {
    padding: 25px;
  }
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea,
  .wpcf7 select {
    padding: 12px 14px;
    font-size: 14px;
    height: 36px;
  }
  .wpcf7 input[type="submit"] {
    padding: 12px;
    font-size: 14px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .wpcf7 {
    padding: px;
  }
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea,
  .wpcf7 select {
    padding: 10px 12px;
    font-size: 13px;
    height: 34px;
  }
  .wpcf7 input[type="submit"] {
    padding: 10px;
    font-size: 13px;
  }
}/* End custom CSS */