.elementor-kit-6{--e-global-color-primary:#0BA9EA;--e-global-color-secondary:#0A1628;--e-global-color-text:#444444;--e-global-color-accent:#0BA9EA;--e-global-color-3e51ee0:#FFFFFF;--e-global-color-0b8ed0e:#000000;--e-global-color-91c0c38:#0A1628;--e-global-color-4fda8fa:#061020;--e-global-color-3f9d7ef:#2AB8D4;--e-global-color-bccd5e6:#4ED8F0;--e-global-color-6cb2682:#1A8AAA;--e-global-color-0d766d3:#C9A84C;--e-global-color-3b79620:#E0C06A;--e-global-color-f362d11:#F4F6FA;--e-global-color-ac5c5bd:#8899AA;--e-global-color-5d1d1fc:#B0BFCC;--e-global-color-e5bcfb9:#0D1E35;--e-global-color-e7a7c6f:#0F2240;--e-global-color-7552ad3:#2AB8D426;--e-global-color-8f0e2a0:#2AB8D414;--e-global-color-c19ecee:#2D9E6A;--e-global-color-b79c490:#D4842A;--e-global-color-5476a24:#C0392B;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 h1{font-family:"Playfair Display", Sans-serif;font-size:clamp(2.027rem, 1.3974rem + 2.0146vw, 3.815rem);}.elementor-kit-6 h2{font-family:"Playfair Display", Sans-serif;font-size:clamp(1.75rem, 1.0458rem + 2.2535vw, 3.65rem);line-height:1.1em;}.elementor-kit-6 h3{font-family:"Playfair Display", Sans-serif;font-size:clamp(1.424rem, 1.2377rem + 0.5961vw, 1.953rem);}.elementor-kit-6 h4{font-family:"Playfair Display", Sans-serif;font-size:clamp(1.266rem, 1.1614rem + 0.3346vw, 1.563rem);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1360px;}.e-con{--container-max-width:1360px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.as__subtitle .elementor-heading-title:before {
    content: "";
    width: 50px;
    height: 1px;
    background: var( --e-global-color-primary );
}

.as__subtitle .elementor-heading-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}


.bg__gradient {
    background: linear-gradient(135deg, #041020, #0a1e38, #041020);
}


/* ============================================================
   HERO SECTION BACKGROUND — শুধু একটা ক্লাস
   এলিমেন্টর সেকশনে এই ক্লাসটি বসাও (Advanced > CSS Classes)
   এবং এই পুরো CSS কোড মডিউল/Custom CSS এ বসাও
   ============================================================ */

.radl-hero-bg {
  background-color: #0a0f1c; /* মেইন গাঢ় নেভি কালার */

  /* হালকা গ্রিড প্যাটার্ন (লাইন) */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;

  /* কর্নার/সাইডে সাবটল গ্লো এফেক্টের জন্য */
  position: relative;
  overflow: hidden;
}

/* উপরের দিকে হালকা গ্লো (গ্রেডিয়েন্ট ওভারলে) */
.radl-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(45, 212, 245, 0.08), transparent 60%),
    linear-gradient(to bottom, rgba(10, 15, 28, 0) 0%, rgba(10, 15, 28, 0.9) 100%);
  pointer-events: none;
  z-index: 0;
}

/* সেকশনের ভিতরের কন্টেন্ট গ্রিড/গ্লো এর উপরে থাকবে */
.radl-hero-bg > * {
  position: relative;
  z-index: 1;
}


/* ============================================================
   RADL — SHARED SERVICE PAGE CSS (সব Single Service Page এর জন্য কমন)
   এটা শুধু একবার Elementor > Site Settings > Custom CSS এ বসাও।
   এরপর প্রতিটা সার্ভিস পেজে শুধু HTML পেস্ট করলেই এই স্টাইল প্রযোজ্য হবে।
   ============================================================ */

/* ---------- TYPOGRAPHY (স্কোপড) ---------- */
.radl-service-hero h1, .radl-service-hero h2, .radl-service-hero h3,
.radl-service-hero h4, .radl-service-hero h5, .radl-service-hero h6,
.radl-service-content h1, .radl-service-content h2, .radl-service-content h3,
.radl-service-content h4, .radl-service-content h5, .radl-service-content h6,
.radl-service-features h1, .radl-service-features h2, .radl-service-features h3,
.radl-service-features h4, .radl-service-features h5, .radl-service-features h6 {
  font-family: var(--e-global-typography-primary-font-family, "Playfair Display", serif);
  font-weight: 600;
}

.radl-service-hero p, .radl-service-hero a, .radl-service-hero span,
.radl-service-content p, .radl-service-content a, .radl-service-content span,
.radl-service-features p, .radl-service-features a, .radl-service-features span {
  font-family: var(--e-global-typography-text-font-family, "Poppins", sans-serif);
}

.radl-title-highlight {
  color: #2dd4f5;
  font-style: italic;
}

/* ---------- SECTION 1: HERO ---------- */
.radl-service-hero {
  background-color: #0a0f1c;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
  position: relative;
  overflow: hidden;
  padding: 70px 30px;
  text-align: center;
}

.radl-service-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(45, 212, 245, 0.08), transparent 60%),
    linear-gradient(to bottom, rgba(10, 15, 28, 0) 0%, rgba(10, 15, 28, 0.9) 100%);
  pointer-events: none;
  z-index: 0;
}

.radl-hero-inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

.radl-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}

.radl-breadcrumb-link {
  color: #2dd4f5;
  text-decoration: none;
}

.radl-breadcrumb-sep {
  color: #4a5772;
}

.radl-breadcrumb-current {
  color: #8b96ab;
}

.radl-hero-title {
  color: #ffffff;
  margin: 0 0 18px 0;
  line-height: 1.25;
}

.radl-hero-subtitle {
  color: #8b96ab;
  line-height: 1.7;
  margin: 0;
}

/* ---------- SECTION 2: MAIN CONTENT ---------- */

.radl-content-grid {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 55px;
  align-items: start;
}

.radl-content-media {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #1c2638;
}

.radl-content-img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}

.radl-badge {
  display: inline-block;
  color: #2dd4f5;
  background-color: rgba(45, 212, 245, 0.08);
  border: 1px solid rgba(45, 212, 245, 0.35);
  border-radius: 20px;
  padding: 6px 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* বিকল্প রঙের ব্যাজ (Turnkey, Architecture এর জন্য সোনালী থিম) */
.radl-badge--alt {
  color: #d9a441;
  background-color: rgba(217, 164, 65, 0.08);
  border-color: rgba(217, 164, 65, 0.35);
}

.radl-content-title {
  color: #ffffff;
  margin: 0 0 18px 0;
  line-height: 1.3;
}

.radl-content-desc {
  color: #8b96ab;
  line-height: 1.7;
  margin: 0 0 30px 0;
}

.radl-step-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 35px;
}

.radl-step-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.radl-step-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(45, 212, 245, 0.1);
  border: 1px solid rgba(45, 212, 245, 0.4);
  color: #2dd4f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.radl-step-title {
  color: #ffffff;
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.radl-step-desc {
  color: #6e7c95;
  margin: 0;
  line-height: 1.6;
}

.radl-cta-btn {
  display: inline-block;
  background-color: #2dd4f5;
  color: #06121c;
  font-weight: 700;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 6px;
  transition: opacity 0.25s ease;
}

.radl-cta-btn:hover {
  opacity: 0.85;
  color: #06121c;
}

.radl-cta-btn--large {
  padding: 16px 36px;
}

/* ---------- SECTION 3: FEATURES + BOTTOM CTA ---------- */
.radl-service-features {
  background-color: #0a0f1c;
  padding: 70px 30px;
}

.radl-features-heading {
  text-align: center;
  margin: 0 auto 45px auto;
}

.radl-features-title {
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.radl-features-grid {
  margin: 0 auto 60px auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.radl-feature-card {
  background-color: #0c1322;
  border: 1px solid #1c2638;
  border-radius: 10px;
  padding: 30px 24px;
  text-align: center;
}

.radl-feature-emoji {
  display: inline-block;
  margin-bottom: 16px;
  line-height: 1;
}

.radl-feature-title {
  color: #ffffff;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.radl-feature-desc {
  color: #6e7c95;
  margin: 0;
  line-height: 1.6;
}

.radl-bottom-cta {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  background-color: #0c1322;
  border: 1px solid #1c2638;
  border-radius: 14px;
  padding: 45px 35px;
}

.radl-bottom-cta-title {
  color: #ffffff;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.radl-bottom-cta-desc {
  color: #8b96ab;
  margin: 0 0 26px 0;
  line-height: 1.6;
}

/* ---------- RESPONSIVE — TABLET ---------- */
@media (max-width: 900px) {
  .radl-content-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .radl-content-img {
    min-height: 280px;
  }

  .radl-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- RESPONSIVE — MOBILE ---------- */
@media (max-width: 600px) {
  .radl-service-hero {
    padding: 50px 20px;
  }

  .radl-service-content {
    padding: 45px 18px;
  }

  .radl-service-features {
    padding: 45px 18px;
  }

  .radl-content-img {
    min-height: 220px;
  }

  .radl-features-grid {
    grid-template-columns: 1fr;
  }

  .radl-bottom-cta {
    padding: 35px 22px;
  }

  .radl-cta-btn {
    width: 100%;
    text-align: center;
  }
}



.btn-tag a.elementor-button.elementor-size-sm {
    pointer-events: none;
}/* End custom CSS */