.elementor-1881 .elementor-element.elementor-element-5e536d0{--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-1881 .elementor-element.elementor-element-8569af1{margin:109px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-1881 .elementor-element.elementor-element-05d7425{--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-1881 .elementor-element.elementor-element-440b275{--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-1881 .elementor-element.elementor-element-bb9b584{--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-1881 .elementor-element.elementor-element-a81add5{--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-1881 .elementor-element.elementor-element-1309c0b{--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-1881 .elementor-element.elementor-element-0b26abe{--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-1881 .elementor-element.elementor-element-f6cf8d9{--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-1881 .elementor-element.elementor-element-ef2b2bc{--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-1881 .elementor-element.elementor-element-25cade1{--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;}@media(max-width:991px){.elementor-1881 .elementor-element.elementor-element-8569af1{margin:83px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}@media(max-width:767px){.elementor-1881 .elementor-element.elementor-element-8569af1{margin:110px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-1881 .elementor-element.elementor-element-8213ed2{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-8569af1 *//* -----------------------------
   TechRanky — Responsive Hero
   Mobile First
------------------------------ */

:root {
  --brand-black: #000;
  --brand-green: #76cf4d;
  --text-weak: #bfbfbf;
}

/* Base wrapper */
.tr-hero {
  background: var(--brand-black);
  color: #fff;
  padding: 50px 20px 80px;
  position: relative;
  overflow: hidden;
}

/* Inner container */
.tr-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 40px;
}

/* Mobile-first: stack */
.tr-hero__inner {
  grid-template-columns: 1fr;
}

/* Tablet & Desktop */
@media (min-width: 900px) {
  .tr-hero__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    padding: 40px 0;
  }
}

/* Background shapes */
.tr-hero__shape {
  position: absolute;
  opacity: 0.18;
  filter: blur(28px);
  animation: float 12s ease-in-out infinite;
}

.tr-hero__shape--1 {
  width: 480px;
  top: -10%;
  left: -15%;
}

.tr-hero__shape--2 {
  width: 300px;
  bottom: -10%;
  right: -10%;
  opacity: 0.06;
}

/* Responsive animations */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-18px); }
  100% { transform: translateY(0px); }
}

/* Title */
.tr-hero__title {
  font-size: clamp(28px, 6vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 16px;
  color: #76cf4d;
}

/* Subtitle */
.tr-hero__subtitle {
  font-size: clamp(16px, 4vw, 18px);
  color: white
  line-height: 1.6;
  margin-bottom: 28px;
}

/* CTA */
.tr-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}

.btn {
  padding: 14px 22px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: 0.2s;
  display: inline-flex;
  align-items: center;
}

.btn--primary {
  background: var(--brand-green);
  color: #111;
}

.btn--primary:hover {
  transform: translateY(-3px);
}

.btn--ghost {
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--brand-green);
}

.btn--ghost:hover {
  background: rgba(255,255,255,0.05);
}

/* Micro stats */
.client-pill {
  padding: 6px 12px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 14px;
}

/* Visual Card */
.tr-hero__visual {
  display: flex;
  justify-content: center;
}

.visual-card {
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.6);
  animation: fadeInUp 0.8s ease both;
}

/* Animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sparkline */
.sparkline__line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw 2s ease forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* Bars */
.visual-card__bars .bar {
  height: 10px;
  background: linear-gradient(90deg, var(--brand-green), rgba(118,207,77,0.5));
  width: 0;
  border-radius: 6px;
  animation: grow 1s forwards ease;
}

@keyframes grow {
  to { width: var(--w); }
}

/* Spacing */
@media (max-width: 500px) {
  .tr-hero {
    padding: 80px 16px 60px;
  }

  .visual-card {
    max-width: 100%;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8213ed2 *//* =====================================
   TechRanky – Free SEO Report Section
   Uses Contact Form 7
   Brand: Black + #76cf4d
===================================== */

.tr-report-section {
  background: #000;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}

/* subtle green glow */
.tr-report-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 0%, rgba(118,207,77,0.12), transparent 60%);
  pointer-events: none;
}

.tr-report-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* -------------------------------------
   Content (Left)
------------------------------------- */

.tr-report-content h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
  line-height: 1.1;
}

.tr-report-content p {
  color: #bfbfbf;
  font-size: 16px;
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 32px;
}

.tr-report-stats {
  display: flex;
  gap: 32px;
}

.tr-report-stats .stat strong {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #76cf4d;
  margin-bottom: 4px;
}

.tr-report-stats .stat span {
  font-size: 14px;
  color: #a5a5a5;
}

/* -------------------------------------
   Form Card (Right)
------------------------------------- */

.tr-report-form {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 40px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: fadeUp 0.8s ease both;
}

/* -------------------------------------
   Contact Form 7 Styling
------------------------------------- */

.tr-report-form .wpcf7 {
  width: 100%;
}

.tr-report-form input,
.tr-report-form textarea {
  width: 100%;
  padding: 15px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #0b0b0b;
  color: #fff;
  font-size: 15px;
}

.tr-report-form input::placeholder,
.tr-report-form textarea::placeholder {
  color: #8f8f8f;
}

.tr-report-form input:focus,
.tr-report-form textarea:focus {
  outline: none;
  border-color: #76cf4d;
  box-shadow: 0 0 0 3px rgba(118,207,77,0.15);
}

/* submit button */
.tr-report-form input[type="submit"] {
  background: linear-gradient(90deg, #76cf4d, #5fb83d);
  color: #0c1409;
  font-weight: 700;
  border: none;
  padding: 16px 22px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.tr-report-form input[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(118,207,77,0.25);
}

/* hide default CF7 spinner */
.tr-report-form .wpcf7-spinner {
  display: none;
}

/* -------------------------------------
   Animation
------------------------------------- */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------------------
   Responsive
------------------------------------- */

@media (max-width: 900px) {
  .tr-report-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .tr-report-form {
    padding: 32px 24px;
  }

  .tr-report-stats {
    gap: 24px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9cb16de *//* ======================================
   TechRanky – Services Section v2 (Refined)
   Brand colors only: Black + #76cf4d
====================================== */

.tr-services-v2 {
  background: #000; /* pure brand black */
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}

/* container */
.tr-services-v2__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* header */
.tr-services-v2__header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 100px;
}

.tr-services-v2__label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #76cf4d;
  margin-bottom: 16px;
}

.tr-services-v2__title {
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.1;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
}

.tr-services-v2__subtitle {
  font-size: 16px;
  line-height: 1.7;
  color: #bfbfbf;
}

/* grid */
.tr-services-v2__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* cards */
.tr-service-v2-card {
  position: relative;
  padding: 40px 36px;
  background: rgba(255,255,255,0.02); /* subtle contrast */
  border: 1px solid rgba(118,207,77,0.12);
  border-radius: 20px;
  transition:
    transform .35s cubic-bezier(.2,.9,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;
}

/* hover glow */
.tr-service-v2-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(
    circle at top left,
    rgba(118,207,77,0.25),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

/* text */
.tr-service-v2-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 14px;
}

.tr-service-v2-card p {
  font-size: 15px;
  line-height: 1.7;
  color: #cfcfcf;
}

/* hover */
.tr-service-v2-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 80px rgba(0,0,0,0.7);
  border-color: #76cf4d;
}

.tr-service-v2-card:hover::before {
  opacity: 1;
}

/* accent cards */
.tr-service-v2-card.accent {
  border-color: rgba(118,207,77,0.35);
}

/* entry animation */
.tr-service-v2-card {
  opacity: 0;
  transform: translateY(28px);
  animation: serviceV2FadeUp 0.9s ease forwards;
}

.tr-service-v2-card:nth-child(1) { animation-delay: 0.05s; }
.tr-service-v2-card:nth-child(2) { animation-delay: 0.15s; }
.tr-service-v2-card:nth-child(3) { animation-delay: 0.25s; }
.tr-service-v2-card:nth-child(4) { animation-delay: 0.35s; }
.tr-service-v2-card:nth-child(5) { animation-delay: 0.45s; }
.tr-service-v2-card:nth-child(6) { animation-delay: 0.55s; }

@keyframes serviceV2FadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CTA */
.tr-services-v2__cta {
  text-align: center;
  margin-top: 80px;
}

.tr-services-v2__btn {
  display: inline-block;
  padding: 16px 36px;
  font-size: 15px;
  font-weight: 700;
  color: #0b1208;
  background: #76cf4d;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.tr-services-v2__btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(118,207,77,0.35);
  color: #0b1208;
}

/* responsive */
@media (max-width: 1100px) {
  .tr-services-v2__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .tr-services-v2 {
    padding: 20px 20px;
  }

  .tr-services-v2__header {
    margin-bottom: 64px;
  }

  .tr-services-v2__grid {
    grid-template-columns: 1fr;
  }

  .tr-services-v2__cta {
    margin-top: 60px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-626ff6d *//* ================================
   How We Work – Compact Premium
================================ */

.tr-work-mini {
  background: #000;
  padding: 30px 20px; /* COMPACT */
}

.tr-work-mini__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* Header */
.tr-work-mini__header {
  text-align: center;
  margin-bottom: 48px;
}

.tr-work-mini__header span {
  color: #76cf4d;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
}

.tr-work-mini__header h2 {
  font-size: clamp(26px, 4vw, 36px);
  color: #fff;
  font-weight: 700;
}

/* Rail */
.tr-work-mini__rail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  position: relative;
}

/* animated underline */
.tr-work-mini__rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    #76cf4d,
    transparent
  );
  animation: railFlow 4s linear infinite;
}

@keyframes railFlow {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

/* Steps */
.tr-work-mini__step {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(118,207,77,0.15);
  border-radius: 14px;
  padding: 20px 22px;
  text-align: center;
  min-width: 160px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  z-index: 1;
}

/* subtle floating motion */
.tr-work-mini__step {
  animation: floatSoft 6s ease-in-out infinite;
}
.tr-work-mini__step:nth-child(2){ animation-delay: .4s; }
.tr-work-mini__step:nth-child(3){ animation-delay: .8s; }
.tr-work-mini__step:nth-child(4){ animation-delay: 1.2s; }
.tr-work-mini__step:nth-child(5){ animation-delay: 1.6s; }

@keyframes floatSoft {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* hover */
.tr-work-mini__step:hover {
  transform: translateY(-10px);
  border-color: #76cf4d;
  box-shadow: 0 18px 40px rgba(118,207,77,0.25);
}

/* text */
.tr-work-mini__step strong {
  display: block;
  color: #76cf4d;
  font-size: 14px;
  margin-bottom: 6px;
}

.tr-work-mini__step p {
  font-size: 14px;
  color: #cfcfcf;
  margin: 0;
}

/* Mobile */
@media (max-width: 900px) {
  .tr-work-mini__rail {
    flex-direction: column;
    gap: 14px;
  }

  .tr-work-mini__rail::before {
    display: none;
  }

  .tr-work-mini__step {
    width: 100%;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a62a716 *//* ======================================
   TechRanky – Premium Animated CTA
====================================== */

.tr-cta {
  position: relative;
  min-height: 520px;
  padding: 120px 20px;
  background: #000;
  overflow: hidden;
}

/* background image layer */
.tr-cta__bg {
  position: absolute;
  inset: 0;
  background-image: url('https://techranky.com/wp-content/uploads/2019/05/background-1-1.jpg');
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: slowZoom 18s ease-in-out infinite alternate;
}

/* dark overlay */
.tr-cta__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,0.65) 50%,
      rgba(0,0,0,0.9) 100%
    );
}

/* slow background motion */
@keyframes slowZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.12); }
}

/* content wrapper */
.tr-cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  align-items: center;
}

/* left content */
.tr-cta__label {
  color: #76cf4d;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 18px;
}

.tr-cta__title {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  color: #fff;
  font-weight: 700;
  margin-bottom: 18px;
}

.tr-cta__text {
  font-size: 16px;
  line-height: 1.7;
  color: #d0d0d0;
  max-width: 520px;
}

/* form card */
.tr-cta__card {
  background: #ffffff;
  border-radius: 22px;
  padding: 40px 36px;
  box-shadow: 0 50px 120px rgba(0,0,0,0.7);
  animation: cardFloat 6s ease-in-out infinite;
}

@keyframes cardFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.tr-cta__card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #000;
}

/* CF7 form styling */
.tr-cta__card input,
.tr-cta__card textarea {
  width: 100%;
  height: 48px;
  margin-bottom: 14px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid #e0e0e0;
  font-size: 14px;
}

.tr-cta__card input:focus {
  outline: none;
  border-color: #76cf4d;
  box-shadow: 0 0 0 3px rgba(118,207,77,0.25);
}

/* submit button */
.tr-cta__card input[type="submit"] {
  background: #76cf4d;
  color: #0b1208;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.tr-cta__card input[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(118,207,77,0.35);
  background: black;
  color: #76cf4d;
}

/* remove CF7 spacing */
.tr-cta__card p {
  margin: 0;
}

/* ----------------------------------
   Responsive
---------------------------------- */

@media (max-width: 900px) {
  .tr-cta {
    padding: 100px 20px;
  }

  .tr-cta__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .tr-cta__card {
    animation: none;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f15e9a5 *//* ======================================
   TechRanky – Marketing Packages
====================================== */

.tr-packages {
  background: #000;
  padding: 60px 20px;
}

.tr-packages__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.tr-packages__header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 100px;
}

.tr-packages__label {
  color: #76cf4d;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 16px;
}

.tr-packages__title {
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.1;
  color: #ffffff;
  font-weight: 700;
}

/* Grid */
.tr-packages__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: stretch;
}

/* Card */
.tr-package-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(118,207,77,0.12);
  border-radius: 20px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  transition:
    transform .35s cubic-bezier(.2,.9,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;
}

/* Hover */
.tr-package-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 90px rgba(0,0,0,0.7);
  border-color: #76cf4d;
}

/* Featured */
.tr-package-card.featured {
  border-color: #76cf4d;
  box-shadow: 0 30px 80px rgba(118,207,77,0.25);
}

.tr-package-badge {
  position: absolute;
  top: -14px;
  right: 20px;
  background: #76cf4d;
  color: #0b1208;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}

/* Titles */
.tr-package-card h3 {
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 10px;
}

.tr-package-tag {
  font-size: 14px;
  color: #bfbfbf;
  margin-bottom: 22px;
}

/* List */
.tr-package-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.tr-package-card li {
  font-size: 14px;
  color: #d0d0d0;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.tr-package-card li:last-child {
  border-bottom: none;
}

/* Button */
.tr-package-btn {
  margin-top: auto;
  text-align: center;
  padding: 14px 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  border: 1px solid rgba(118,207,77,0.4);
  text-decoration: none;
  transition: all .25s ease;
}

.tr-package-btn:hover {
  background: rgba(118,207,77,0.1);
  color: white;
}

.tr-package-btn.primary {
  background: #76cf4d;
  color: #0b1208;
  border-color: #76cf4d;
}

.tr-package-btn.primary:hover {
  background: #6bc343;
}

/* Entry animation */
.tr-package-card {
  opacity: 0;
  transform: translateY(30px);
  animation: packageFadeUp 0.9s ease forwards;
}

.tr-package-card:nth-child(1) { animation-delay: .1s; }
.tr-package-card:nth-child(2) { animation-delay: .25s; }
.tr-package-card:nth-child(3) { animation-delay: .4s; }
.tr-package-card:nth-child(4) { animation-delay: .55s; }

@keyframes packageFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 1100px) {
  .tr-packages__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .tr-packages {
    padding: 20px 20px;
  }

  .tr-packages__header {
    margin-bottom: 20px;
  }

  .tr-packages__grid {
    grid-template-columns: 1fr;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f2bef9d *//* ======================================
   TechRanky – Why We’re Different
====================================== */

.tr-why {
  position: relative;
  background: #000;
  padding: 40px 20px 60px;
  overflow: hidden;
}

/* ambient animated background */
.tr-why__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(118,207,77,0.15), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(118,207,77,0.10), transparent 60%);
  animation: whyGlow 12s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes whyGlow {
  from { transform: translateY(0); }
  to   { transform: translateY(-30px); }
}

.tr-why__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* header */
.tr-why__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 80px;
}

.tr-why__label {
  color: #76cf4d;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 14px;
}

.tr-why__title {
  font-size: clamp(30px, 4.5vw, 44px);
  color: #fff;
  font-weight: 700;
  margin-bottom: 16px;
}

.tr-why__subtitle {
  font-size: 16px;
  line-height: 1.7;
  color: #cfcfcf;
}

/* grid */
.tr-why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

/* cards */
.tr-why-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(118,207,77,0.15);
  border-radius: 18px;
  padding: 34px 30px;
  text-align: left;
  transition:
    transform .35s cubic-bezier(.2,.9,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;
  animation: whyFloat 6s ease-in-out infinite;
}

/* stagger idle motion */
.tr-why-card:nth-child(2) { animation-delay: .6s; }
.tr-why-card:nth-child(3) { animation-delay: 1.2s; }
.tr-why-card:nth-child(4) { animation-delay: 1.8s; }

@keyframes whyFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* hover */
.tr-why-card:hover {
  transform: translateY(-14px);
  border-color: #76cf4d;
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
}

/* icon */
.tr-why-icon {
  font-size: 26px;
  margin-bottom: 16px;
}

/* text */
.tr-why-card h3 {
  font-size: 17px;
  color: #ffffff;
  margin-bottom: 10px;
}

.tr-why-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: #cfcfcf;
}

/* responsive */
@media (max-width: 1100px) {
  .tr-why__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .tr-why {
    padding: 20px 20px;
  }

  .tr-why__grid {
    grid-template-columns: 1fr;
  }

  .tr-why__header {
    margin-bottom: 30px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c5d25fd *//* ======================================
   TechRanky – Testimonials (WORKING)
====================================== */

.tr-testimonials {
  background: #000;
  padding: 40px 20px;
}

.tr-testimonials__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.tr-testimonials__header {
  text-align: center;
  margin-bottom: 56px;
}

.tr-testimonials__label {
  color: #76cf4d;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 12px;
}

.tr-testimonials__title {
  font-size: clamp(28px, 4vw, 40px);
  color: #fff;
  font-weight: 700;
}

/* Slider */
.tr-testimonials__slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(33.333% - 20px);
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 10px;
}

.tr-testimonials__slider::-webkit-scrollbar {
  display: none;
}

/* Card */
.tr-testimonial {
  scroll-snap-align: start;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(118,207,77,0.15);
  border-radius: 20px;
  padding: 32px;
  transition: transform .3s ease, border-color .3s ease;
}

.tr-testimonial:hover {
  transform: translateY(-8px);
  border-color: #76cf4d;
}

.tr-testimonial p {
  color: #e0e0e0;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 18px;
}

.tr-testimonial span {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

/* Pagination */
.tr-testimonials__pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.tr-testimonials__pagination button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(118,207,77,0.3);
  cursor: pointer;
}

.tr-testimonials__pagination button.active {
  background: #76cf4d;
}

/* Mobile */
@media (max-width: 900px) {
  .tr-testimonials__slider {
    grid-auto-columns: 85%;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-797871a *//* ======================================
   TechRanky – Performance Metrics
====================================== */

.tr-metrics {
  background: #000;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}

/* subtle ambient glow */
.tr-metrics::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 20%, rgba(118,207,77,0.18), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(118,207,77,0.12), transparent 60%);
  pointer-events: none;
}

.tr-metrics__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Header */
.tr-metrics__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 80px;
}

.tr-metrics__label {
  color: #76cf4d;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 14px;
}

.tr-metrics__title {
  font-size: clamp(30px, 4.5vw, 44px);
  line-height: 1.1;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 18px;
}

.tr-metrics__subtitle {
  font-size: 16px;
  line-height: 1.7;
  color: #cfcfcf;
}

/* Grid */
.tr-metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

/* Metric card */
.tr-metric {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(118,207,77,0.18);
  border-radius: 20px;
  padding: 36px 28px;
  text-align: center;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* hover depth */
.tr-metric:hover {
  transform: translateY(-8px);
  border-color: #76cf4d;
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
}

/* number */
.tr-metric__value {
  display: block;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  color: #76cf4d; /* secondary color highlight */
  margin-bottom: 10px;
}

/* label */
.tr-metric p {
  font-size: 14.5px;
  color: #e0e0e0;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px) {
  .tr-metrics__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .tr-metrics {
    padding: 30px 20px;
  }

  .tr-metrics__grid {
    grid-template-columns: 1fr;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d128f83 *//* ======================================
   TechRanky – Final CTA
====================================== */

.tr-final-cta {
  position: relative;
  background: #000;
  padding: 120px 20px;
  overflow: hidden;
}

/* ambient glow */
.tr-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(118,207,77,0.18), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(118,207,77,0.12), transparent 60%);
  animation: finalGlow 10s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes finalGlow {
  from { transform: translateY(0); }
  to   { transform: translateY(-25px); }
}

.tr-final-cta__inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}

/* content */
.tr-final-cta__content h2 {
  font-size: clamp(30px, 4.5vw, 44px);
  line-height: 1.1;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 18px;
}

.tr-final-cta__content p {
  font-size: 16px;
  line-height: 1.7;
  color: #d0d0d0;
  max-width: 720px;
  margin: 0 auto 36px;
}

/* button */
.tr-final-cta__btn {
  display: inline-block;
  padding: 16px 40px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  background: #76cf4d;
  color: #0b1208;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.tr-final-cta__btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(118,207,77,0.35);
  color: #0b1208;
}

/* Responsive */
@media (max-width: 700px) {
  .tr-final-cta {
    padding: 40px 20px;
  }
}/* End custom CSS */