/* Fonts */
:root {
  --default-font: "Mona Sans", sans-serif, "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Mona Sans", sans-serif;
  --nav-font: "Mona Sans", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #001023; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #001023; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #EB212E; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* The default color of the main navmenu links */
  --nav-hover-color: #EB212E; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #EB212E; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #fafafa;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #001023;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/



.mona-sans-ff {
  font-family: "Mona Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
} 

body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

p{ line-height: 30px;}

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--background-color) 50%, color-mix(in srgb, var(--background-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--background-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(0, 0, 0, 0);
}

.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(0, 0, 0, 0);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 10px 0;
  transition: all 0.5s;
  z-index: 997;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .cta-btn,
.header .cta-btn:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 26px;
  margin: 0;
  border-radius: 50px;
  transition: 0.3s;
}

.header .cta-btn:hover,
.header .cta-btn:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .logo h1 {
    font-size: 24px;
  }

  .header .cta-btn, .header .hd-button {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 20px;
  }

  .header .navmenu {
    order: 3;
  }
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: rgba(0,16,35, 0.9);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
	
	.navmenu a {
  text-transform: uppercase;
  font-weight: 600!important;
  color: #fff!important;
}
.header {
  border-bottom: 1px solid #ddd;
  padding-bottom: 3px;
}
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: color-mix(in srgb, var(--nav-color), transparent 30%);
    font-size: 15px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -27px;
    left: 0;
    background-color: var(--nav-hover-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: #212121 !important;
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: #EB212E!important;
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

header .cta-btn {
  font-weight: bold;
  text-transform: uppercase;
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background: var(--background-color) url("../img/foot-bg.png") bottom center no-repeat; background-size: cover;
  font-size: 14px;
  text-align: center;
  padding: 30px 0;
  position: relative;
}

.footer h3 {
  font-size: 36px;
  font-weight: 700;
  position: relative;
  padding: 0;
  margin: 0 0 15px 0;
}

.footer p {
  font-size: 15;
  font-style: italic;
  padding: 0;
  margin: 0 0 30px 0;
}

.footer ul { margin-bottom:0 ;}
	
@media(max-width: 992px){
	
.footer .social-links, .footer ul {
	margin: 0 0 30px 0;
}


}


.foot-inline-nav {
	padding: 0;
  list-style: none;
}

.foot-inline-nav li {
  display: inline;
  padding: 0 10px;
  font-size: 16px;
}

.foot-inline-nav li a{ Color: #fff; }
.foot-inline-nav li:hover a{ Color: #EB212E; }


.footmiddle{ border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); padding:40px 15px; }

.termsfoot a {
  font-size: 14px;
}


.footer .social-links a {
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  color: var(--contrast-color);
  line-height: 1;
  margin: 0 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 20%);
  text-decoration: none;
}

.footer .copyright {
  padding-top: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .credits {
  font-size: 13px;
  padding-top: 5px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid var(--accent-color);
  border-top-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 80px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 72px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 57px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 60px;
  font-weight: 600;
  margin-bottom: 10px;
  position: relative;
  line-height: 1.1;
}

.section-title h2 > span 
{ 
	font-family: 'newyorkregular'; 
}


.section-titl h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
}

.section-title p {
  margin-bottom: 0;
  color:var(--default-color) ; font-size: 16px;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%; background: #001023 url("../img/hero-dot.png") 0 0 repeat;
  position: relative;
  padding: 80px 0;

}
.user-img-hero img {
  width: 60px;
  height: 60px;
  border-radius: 70px;
  margin-right: -19px;
  border: 2px solid #fff;
}


.hero .container {
  position: relative;
  z-index: 3;
}

.hero h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 10px 0 20px 0;
  font-size: 24px;
}


.hero .hero-desc-wrap p{ color: #fff!important; text-align: left; font-size: 28px!important; padding-bottom:30px; border-bottom: 1px solid #fff; line-height:40px!important; margin-bottom: 30px; }

@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
    line-height: 36px;
  }

  .hero p {
    font-size: 18px;
    line-height: 24px;
  }
}

.hero-review-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero-review-block h5 {
  font-size: 22px;
  margin: 15px 0;
}

.hero .hero-review-block h2 {
  font-size: 63px;
  margin-bottom: 0;
  line-height: 52px;
}

.user-img-hero {
  text-align: left;
}


/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about ul {
  list-style: none;
  padding: 0;
}

.about ul li {
  padding-bottom: 5px;
  display: flex;
  align-items: center;
}

.about ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 10px 28px;
  border-radius: 50px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

 .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%); Color: #fff;
}

.read-more:hover i {
  transform: translate(5px, 0);
}

.about .figure-wrap {
  padding-right: 140px !important;
 }
 
.about .figure-wrap .awardimg {
  position: absolute;
  right: 20px;
  transform: rotate(-17deg);
  top: 60px;
  max-width:260px;
}


.about .figure-wrap .googleimg {
  position: absolute;
  right: 20px;
  transform: rotate(-17deg);
  bottom: 60px; max-width:240px;
}


/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  background-color: var(--surface-color);
  box-shadow: 0px 5px 90px 0px rgba(0, 0, 0, 0.1);
  padding: 60px 30px;
  transition: all ease-in-out 0.3s;
  border-radius: 18px;
  border-bottom: 5px solid var(--surface-color);
  height: 100%;
}

.services .service-item .icon {
  color: var(--contrast-color);
  background: var(--accent-color);
  margin: 0;
  width: 64px;
  height: 64px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: ease-in-out 0.3s;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

@media (min-width: 1365px) {
  .services .service-item:hover {
    transform: translateY(-10px);
    border-color: var(--accent-color);
  }

  .services .service-item:hover h3 {
    color: var(--accent-color);
  }
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  padding: 120px 0;
  position: relative;
  clip-path: inset(0);
}

.call-to-action img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.call-to-action:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.call-to-action .container {
  position: relative;
  z-index: 3;
}

.call-to-action h3 {
  color: var(--default-color);
  font-size: 28px;
  font-weight: 700;
}

.call-to-action p {
  color: var(--default-color);
}

.call-to-action .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  background: var(--accent-color);
  color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, white 15%);
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .features-image {
  position: relative;
  min-height: 400px;
}

.features .features-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.features .features-item h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 5px 0;
}

.features .features-item i {
  font-size: 48px;
  color: var(--accent-color);
  margin-right: 20px;
  line-height: 0;
}

.features .features-item p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .clients-wrap {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.clients .client-logo {
  background-color: var(--surface-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  overflow: hidden;
}

.clients .client-logo img {
  padding: 50px;
  max-width: 80%;
  transition: 0.3s;
}

@media (max-width: 640px) {
  .clients .client-logo img {
    padding: 30px;
    max-width: 50%;
  }
}

.clients .client-logo:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats {
  position: relative;
}

.stats img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.stats:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 20%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.stats .container {
  position: relative;
  z-index: 3;
}

.stats .subheading {
  text-align: center;
}

.stats .subheading h3 {
  font-weight: 700;
  font-size: 36px;
}

.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item span {
  font-size: 48px;
  display: block;
  color: var(--default-color);
  font-weight: 700;
}

.stats .stats-item p {
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
}

.portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-item img{
border-radius:10px;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -100%;
  z-index: 3;overflow: hidden;
  transition: all ease-in-out 0.5s;
  background: rgba(235,33,46,0.85);
  padding: 15px; border-radius:10px;
}

.portfolio .portfolio-item .portfolio-info h4 , .portfolio .portfolio-item .portfolio-info h3 {
  font-size: 24px;
  font-weight: 600;
  padding-right: 50px;color: #fff;
}

.portfolio .portfolio-item .portfolio-info p {
  color: #fff;
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
 position: absolute;
  right: 50px;
  font-size: 24px;
  bottom: 30px;
  color: #fff;
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
opacity: 1;
  bottom: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: column;
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  background-color: var(--surface-color);
  box-shadow: 0px 5px 90px rgba(0, 0, 0, 0.1);
  padding: 40px 20px;
  text-align: center;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.pricing .pricing-item h3 {
  padding: 15px;
  margin-top: 15px;
  font-size: 18px;
  font-weight: 600;
}

.pricing .pricing-item h4 {
  color: var(--accent-color);
  font-size: 42px;
  font-family: var(--default-font);
  font-weight: 500;
}

.pricing .pricing-item h4 sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

.pricing .pricing-item h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 16px;
  font-weight: 300;
}

.pricing .pricing-item ul {
  padding: 20px 0;
  list-style: none;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.pricing .pricing-item ul li {
  padding-bottom: 16px;
}

.pricing .pricing-item ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  text-decoration: line-through;
}

.pricing .pricing-item .btn-wrap {
  padding: 15px;
  text-align: center;
}

.pricing .pricing-item .btn-buy {
  color: var(--accent-color);
  background-color: transparent;
  border: 2px solid var(--accent-color);
  display: inline-block;
  padding: 10px 40px 12px 40px;
  border-radius: 50px;
  font-size: 14px;
  font-family: var(--heading-font);
  font-weight: 600;
  transition: 0.3s;
}

.pricing .pricing-item .btn-buy:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .recommended .btn-buy {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .recommended .btn-buy:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.pricing .recommended-badge {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-size: 13px;
  padding: 3px 25px 6px 25px;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
  border-radius: 50px;
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .content h3 {
  font-weight: 400;
  font-size: 34px;
}

.faq .content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.faq .faq-container {
  margin-top: 15px;
}

.faq .faq-container .faq-item {
  background-color: var(--surface-color);
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
  margin: 0 30px 0 32px;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item h3 span {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq .faq-container .faq-item .faq-icon {
  position: absolute;
  top: 22px;
  left: 20px;
  font-size: 22px;
  line-height: 0;
  transition: 0.3s;
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Recent Posts Section
--------------------------------------------------------------*/
.recent-posts article {
  background: var(--surface-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.recent-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.recent-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 10px;
}

.recent-posts .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.recent-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.recent-posts .title a:hover {
  color: var(--accent-color);
}

.recent-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.recent-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}

.recent-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .info-item:hover i {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.contact .php-email-form {
  height: 100%;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: var(--surface-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 25%);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/

.portfolio
{	
	background: #FFFFFF;
	background: -webkit-linear-gradient(180deg,rgba(255, 255, 255, 0) 60%, rgba(0, 16, 35, 1) 60%);
	background: -moz-linear-gradient(180deg,rgba(255, 255, 255, 0) 60%, rgba(0, 16, 35, 1) 60%);
	background: linear-gradient(180deg,rgba(255, 255, 255, 0) 60%, rgba(0, 16, 35, 1) 60%);
	filter: progid:DXImageTransform.Microsoft.gradient(
	  startColorstr="#FFFFFF",
	  endColorstr="#001023",
	  GradientType=0
	);
	
}



.portfolio.no-gc{ background: #fff; }


.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .swiper-wrapper {
  height: auto;
}

.portfolio-details .swiper-button-prev,
.portfolio-details .swiper-button-next {
  width: 48px;
  height: 48px;
}

.portfolio-details .swiper-button-prev:after,
.portfolio-details .swiper-button-next:after {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.15);
  font-size: 24px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.portfolio-details .swiper-button-prev:hover:after,
.portfolio-details .swiper-button-next:hover:after {
  background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 575px) {

  .portfolio-details .swiper-button-prev,
  .portfolio-details .swiper-button-next {
    display: none;
  }
}

.portfolio-details .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.portfolio-details .portfolio-info h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

.portfolio-details .portfolio-info ul strong {
  text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.portfolio-details .portfolio-info .btn-visit {
  padding: 8px 40px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  transition: 0.3s;
}

.portfolio-details .portfolio-info .btn-visit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

.portfolio-details .portfolio-description .testimonial-item {
  padding: 30px 30px 0 30px;
  position: relative;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  margin-bottom: 50px;
}

.portfolio-details .portfolio-description .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.portfolio-details .portfolio-description .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 5px 0;
  padding-top: 20px;
}

.portfolio-details .portfolio-description .testimonial-item h4 {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left,
.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.portfolio-details .portfolio-description .testimonial-item p {
  font-style: italic;
  margin: 0 0 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  background-color: var(--surface-color);
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  background-color: var(--surface-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.blog-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.blog-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.blog-posts .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.blog-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.blog-posts .title a:hover {
  color: var(--accent-color);
}

.blog-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}

.blog-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Pagination Section
--------------------------------------------------------------*/
.blog-pagination {
  padding-top: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}

.blog-pagination li a {
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent-color);
}

.blog-pagination li a.active,
.blog-pagination li a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.blog-pagination li a.active a,
.blog-pagination li a:hover a {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
}

.blog-details .article {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding: 10px 0;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
  padding-top: 10px;
}

.comment-form form {
  background-color: var(--surface-color);
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.comment-form form h4 {
  font-weight: bold;
  font-size: 22px;
}

.comment-form form p {
  font-size: 14px;
}

.comment-form form input {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.comment-form form input:focus {
  color: var(--default-color);
  background-color: var(--surface-color);
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form input::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form textarea {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.comment-form form textarea:focus {
  color: var(--default-color);
  box-shadow: none;
  border-color: var(--accent-color);
  background-color: var(--surface-color);
}

.comment-form form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form .form-group {
  margin-bottom: 25px;
}

.comment-form form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.comment-form form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  background-color: var(--surface-color);
  padding: 30px;
  margin: 60px 0 30px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.blog-author-widget img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author-widget h4 {
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author-widget .social-links {
  margin: 5px 0;
}

.blog-author-widget .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
  font-size: 18px;
}

.blog-author-widget .social-links a:hover {
  color: var(--accent-color);
}

.blog-author-widget p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 10px 0 0 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
  padding: 3px 10px;
  position: relative;
  border-radius: 50px;
  transition: 0.3s;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px 10px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
}

.search-widget form button {
  background: none;
  color: var(--default-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 16px;
  transition: 0.3s;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  color: var(--accent-color);
}

.search-widget form:is(:focus-within) {
  border-color: var(--accent-color);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  background-color: color-mix(in srgb, var(--default-color), transparent 94%);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  border-radius: 50px;
  font-size: 14px;
  padding: 5px 15px;
  margin: 0 6px 8px 0;
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}



/**home video**/

.video-block {
  min-height: 550px;
  position: relative;
  border-radius: 15px;
  overflow: hidden; background: url("../img/video/video.jpg") 0 0 no-repeat ;
}

.video-block img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: ;
}

.video-block a#playButton {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}


/**work swiper*/






.wordchanger {
  text-align: left;
}
.wordchanger h1 {
  font-size: 120px;
  color: #EB212E;font-family: 'newyorkregular';
}

.wordchanger h2 {
  font-size: 90px;
  line-height: 100px;  font-weight: 600;
}

/**word swiper end**/

/*insight blog*/


.blog-date h6 {
  margin: 0 0 0 10px;
  font-size: 14px;
  color: #666;
}

.blog-date {
  min-width: 250px;
}

.blog-figure {
  min-width: 260px;
  margin: 0 40px;
}

.blog-content h3 {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}

.blog-content p {
  line-height: 30px;
  margin-top: 20px;
}

.blog-inwrap {
  border-bottom: 1px solid #222;
  padding: 20px 0;
}



.blog-inwrap {
  border-bottom: 1px solid #222;
  padding: 20px 0;
  height: 110px;
  overflow: hidden;
  transition: height 1s;
}

.blog-inwrap .bfigure {
  height: 68px;
  overflow: hidden;
  border-radius: 6px; transition: height 1s;
}

.hover-blog-wrap{transition: height 1s;}


.hover-blog-wrap:hover .blog-inwrap, .hover-blog-wrap:hover .blog-inwrap .bfigure { height: 270px; }


.btn-view-all{ Color: #EB212E; font-weight: 600; font-size: 16px; transition: 0.6s;}

.btn-view-all i{ margin-left: 10px; transform: translateX(0px); transition: 0.6s; position: absolute;}

.btn-view-all:hover i{  transform: translateX(10px); }


.fs-44{ font-size: 44px!important;}





/**dev-pro**/


.dev-pro-wrap .dev-pro-no {
  position: absolute;
  left: 0;
  display: flex;
  background: #fff url("../img/icons/cut-bg.svg") 0 0 no-repeat;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 60px;
  height: 60px; font-size:24px;
}

.dev-pro-wrap {
 position: relative;
  padding-left: 90px;
  margin-bottom: 30px;
  min-height: 78px;
}

.dev-pro-wrap h4 {
  font-size: 18px;
  font-weight: 700;
}

.dev-pro-wrap .dev-pro-no::before {
 position: absolute;
  width: 3px;
  background: #111;
  height: 80px;
  content: "";
  top: -70px;
}

.dev-pro-wrap:first-child .dev-pro-no::before {
  display: none;
}

.c-red{ Color: #EB212E}

/****whychoose***/

.icon-box {
  border: 1px solid #ddd;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  width: 250px;
  height: auto; margin:10px;
}


.icon-box h4 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 15px;
}


/*technologies**/


.tech-icon-box {
  border: 1px solid #ddd;
  border-radius: 10px;
  margin: 10px; transition: 0.5s;
}

.tech-icon-box:hover{ transform: rotate(-10deg);} 


.tech-icon-box img {
  max-width: 105px;
}




.figure-wrap{ position: relative; }


.btn-view-all-round {
  background: #EB212E;
  Color: #fff;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 290px;
  font-size: 14px;
  font-weight: bold; transition: 1s. ease-in-out; position: relative;
}

.btn-view-all-round i {
  margin-left: 10px;
  transform: translateX(0px);
  transition: 0.6s;
  position: absolute; display: none;
  right: 10px;
}

.btn-view-all-round:hover { Color: #222}

.btn-view-all-round:hover i {  transform: translateX(10px); }


/**indus**/
.scrolltext{}

.scrolltext span {
  font-size: 32px;
  font-weight: 600;
  padding: 0px 30px;
  display: inline-flex;
  border-right: 4px solid #fff;
  margin: 30px 0 20px;
}


.indus-sec h4 {
	display: inline-block;
  background: #fff;
  color: #001023;
  font-size: 18px;
  padding: 10px 30px;
  border-radius: 90px;
  border: 4px solid #EB212E;
  margin-bottom: -50px;
  position: relative;
}




/**Services Sections**/

.services-sec{}
.services-sec{}
.services-sec{}

.services-sec #v-pills-tab .nav-link,  
.services-acc .accordion  .accordion-header .accordion-button.collapsed,
.services-acc .accordion  .accordion-header .accordion-button
{
  text-align: left;
  font-size: 46px; 
  font-weight:600;padding: 10px 0;
  
  color: #001023;display: flex;
  align-items: center; border-bottom: 1px solid #001023; border-radius:0;
}

.services-sec #v-pills-tab .nav-link span, 
.services-acc .accordion  .accordion-header .accordion-button.collapsed span,
.services-acc .accordion  .accordion-header .accordion-button span
{
  text-align: left;
  font-size: 46px; 
  font-weight:600;
  font-family: 'newyorkregular'; 
  color: #001023; margin:0 10px;
}

.services-sec #v-pills-tab .nav-link span.tab-no,
.services-acc .accordion  .accordion-header .accordion-button span.tab-no
{font-family: "Mona Sans", sans-serif; font-size: 30px; margin-right:20px;}

.services-sec #v-pills-tab .nav-link.active, 
.services-sec #v-pills-tab .nav-link.active span
{ background: #fff; Color: #EB212E; }


.services-acc .accordion  .accordion-header .accordion-button, 
.services-acc .accordion  .accordion-header .accordion-button span{ background: #fff; Color: #EB212E;}


.accordion-button:focus{ box-shadow: none;}

.services-sec .tab-pane {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  line-height: 28px;
  height: 100vh; height:520px; overflow: hidden;
}

.tab-text-wrap {
  height: 100%;
}

.tab-text-wrap h5 {
  font-weight: 600;
  font-size: 20px;
  margin: 20px 0;
}

.acc-text-wrap{ margin-top: 25px}
.acc-text-wrap h2{ font-size: 20px; margin-bottom:15px; font-weight: 700}


.acc-text-wrap p{ font-size: 16px; line-height: 30px}


/**brand swiper*/

.brand-title {
  font-size: 20px;
  margin: 10px 0;
}


.clients-wrap .swiper-slide{ height: 78px!important; border: 0px solid #333; border-radius: 10px; overflow: hidden; background: #222 }


/*header mod**/

.hd-button i {
  font-size: 36px;
}



@media (min-width: 576px) {
  .modal-dialog {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;

  }
  
  .modal-content {
  min-height:  700px; 
  background: #001023 url("../img/bmod.svg") bottom left no-repeat;
}

.modal-content *{ Color: #fff;}

}

.clients .card {
  border: 0;
}

.gettouch{ background: #EB212E; }

.c-detail .detail-block h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 15px;
  margin-bottom: 15px;
  position: relative;
}

.c-detail .detail-block h3::after { content:""; width:50px; height:2px; background: #fff; position: absolute; bottom:-0px; left:0;}

.c-form {
  background: #fff;
  padding: 40px 30px 30px 30px;
  position: relative;
  top: -24px;
  z-index: 9;
  border-radius: 22px;
}

.c-form .form-control {
  border-width: 0 0 1px 0;
  border-radius: 0;
}

.sent-message {
  text-align: left;
  font-size: 12px;
  color: #aaa;
}


/*****pricing table*****/


.table-wrap {
  background: #001023;
  border: 1px dashed #aaa;
  padding: 20px;Color: #fff;
  border-radius: 20px; margin-bottom:20px;
}
.table-head h2 {
  font-size: 29px;
  text-align: center;
  padding: 20px 0; Color: #fff;
  border-top: 0px solid #fff;
}

.table-row {
  border-top: 1px dashed #fff;
  padding: 10px 0 0;
  margin-bottom: 10px;
}

.ser-list ul{ padding:0; margin:0 0 0 30px; }
.ser-list ul li{ padding:0; margin:0 0 15px; 0; }


.table-row h4 {
  font-size: 16px;Color: #fff;
  font-weight: 600;
}

.table-row p{font-size: 16px;Color: #fff;}

.pricing-title{ text-align: center; margin:120px 0 40px; 0}





/*******Services page css********/

 /* ===== RedSpider Hosting Creative Animations ===== */
  .rs-hosting { isolation: isolate; }

  /* Animated background blobs */
  .rs-blob{
    position:absolute; inset:auto;
    width:520px; height:520px;
    border-radius: 999px;
    filter: blur(35px);
    opacity:.22;
    z-index:0;
    animation: rsBlob 10s ease-in-out infinite alternate;
  }
  .rs-blob-1{ top:-180px; left:-180px; background: #EB212E; }
  .rs-blob-2{ bottom:-220px; right:-220px; background #EB212E; animation-duration: 12s; }

  @keyframes rsBlob{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(40px,20px) scale(1.08); }
    100%{ transform: translate(-20px,35px) scale(0.98); }
  }

  /* Card hover shine + lift */
  .rs-card{
    position:relative;
    transition: transform .35s ease, box-shadow .35s ease;
    overflow:hidden;
  }
  .rs-card::before{
    content:"";
    position:absolute; inset:-2px;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.22) 35%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s ease;
    pointer-events:none;
  }
  .rs-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,.08) !important;
  }
  .rs-card:hover::before{ transform: translateX(120%); }

  /* Icon bubble */
  .rs-icon{
    width:44px; height:44px;
    display:grid; place-items:center;
    border-radius:14px;
    background: rgba(235, 33, 46,0.2);
    color:#EB212E;
  }

  /* Floating animation for main card */
  .rs-float{
    animation: rsFloat 4.5s ease-in-out infinite;
  }
  @keyframes rsFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-6px); }
  }

  /* Mini feature rows */
  .rs-mini{
    display:flex; align-items:center; gap:.75rem;
    padding:.9rem 1rem;
    background:#f8f9fa;
    border-radius: 16px;
    transition: transform .25s ease;
  }
  .rs-mini:hover{ transform: translateX(4px); }
  .rs-dot{
    width:10px; height:10px; border-radius:50%;
    background:#198754;
    box-shadow: 0 0 0 6px rgba(25,135,84,.10);
  }

  /* Glow accent for small cards */
  .rs-glow{
    position:absolute;
    width:180px; height:180px;
    right:-80px; bottom:-80px;
    background: radial-gradient(circle, rgba(235, 33, 46,.18) , transparent 60%);
    border-radius:50%;
    transform: scale(.8);
    transition: transform .35s ease;
    pointer-events:none;
  }
  .rs-card:hover .rs-glow{ transform: scale(1); }

  /* Buttons micro-interaction */
  .rs-btn, .rs-btn-dark{
    transition: transform .2s ease;
  }
  .rs-btn:hover, .rs-btn-dark:hover{
    transform: translateY(-2px);
  }
  .rs-arrow{
    display:inline-block;
    margin-left:.35rem;
    transition: transform .2s ease;
  }
  .rs-btn:hover .rs-arrow,
  .rs-btn-dark:hover .rs-arrow{
    transform: translateX(4px);
  }

  /* Reveal on scroll (no external libraries) */
  .rs-reveal{
    opacity:0;
    transform: translateY(14px);
    animation: rsReveal .8s ease forwards;
    animation-delay: var(--d, 0ms);
  }
  @keyframes rsReveal{
    to{ opacity:1; transform: translateY(0); }
  }

  /* Reduce motion accessibility */
  @media (prefers-reduced-motion: reduce){
    .rs-blob, .rs-float, .rs-reveal{ animation:none !important; }
    .rs-card, .rs-mini, .rs-btn, .rs-btn-dark, .rs-arrow{ transition:none !important; }
  }


  /**Sec 2***/

    /* ===== Section 2: Unique class namespace hx- ===== */
  .hx-hosting{ isolation:isolate; }

  /* Animated rings (different from blobs/grid) */
  .hx-ring{
    position:absolute;
    border-radius:999px;
    border: 2px solid rgba(13,110,253,.18);
    z-index:0;
    opacity:.2;
    animation: hxOrbit 10s linear infinite;
    background: #833AB4;
background: linear-gradient(90deg,rgba(131, 58, 180, 0.61) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
  }
  .hx-ring-a{
    width:560px; height:560px;
    top:-260px; right:-260px;
    animation-duration: 14s;
  }
  .hx-ring-b{
    width:420px; height:420px;
    bottom:-220px; left:-220px;
    border-color: rgba(32,201,151,.18);
    animation-duration: 18s;
    animation-direction: reverse;
  }
  @keyframes hxOrbit{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
  }

  /* Panel with animated border sweep */
  .hx-panel{
    position:relative;
    background:#ffffff;
    overflow:hidden;
  }
  .hx-panel::before{
    content:"";
    position:absolute; inset:-3px;
    background: conic-gradient(from 180deg, rgba(13,110,253,.0), rgba(13,110,253,.18), rgba(32,201,151,.18), rgba(13,110,253,.0));
    filter: blur(1px);
    opacity:.9;
    animation: hxSweep 3.8s linear infinite;
  }
  .hx-panel::after{
    content:"";
    position:absolute; inset:2px;
    background:#fff;
    border-radius: 1.25rem;
    z-index:0;
  }
  @keyframes hxSweep{
    to{ transform: rotate(360deg); }
  }
  .hx-panel > *{ position:relative; z-index:1; }

  /* Chip */
  .hx-chip{
    display:inline-block;
    font-size:.85rem;
    padding:.35rem .7rem;
    border-radius:999px;
    background: rgba(235, 33, 46, 0.1);
    color:#EB212E;
    border:0px solid #EB212E;
    margin-bottom:.5rem;
  }

  /* Pulse indicator (different) */
  .hx-pulse{
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.45rem .75rem;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.08);
    background:#fff;
  }
  .hx-pulse-dot{
    width:10px; height:10px;
    border-radius:50%;
    background:#198754;
    box-shadow: 0 0 0 rgba(25,135,84,.4);
    animation: hxPulse 1.4s infinite;
  }
  @keyframes hxPulse{
    0%{ box-shadow: 0 0 0 0 rgba(25,135,84,.35); }
    70%{ box-shadow: 0 0 0 12px rgba(25,135,84,0); }
    100%{ box-shadow: 0 0 0 0 rgba(25,135,84,0); }
  }
  .hx-pulse-text{ font-size:.9rem; color:#212529; }

  /* Stats */
  .hx-stat{
    padding:1rem;
    border-radius:16px;
    background:#f8f9fa;
    border:1px solid rgba(0,0,0,.06);
    transform: translateY(0);
    transition: transform .25s ease;
  }
  .hx-stat:hover{ transform: translateY(-4px); }
  .hx-stat-num{ font-weight:800; letter-spacing:.5px; }
  .hx-stat-txt{ font-size:.9rem; color:#6c757d; }

  /* Moving ticker (marquee-like) */
  .hx-ticker{
    border-radius:16px;
    border:1px solid rgba(0,0,0,.06);
    background:#fff;
    overflow:hidden;
    position:relative;
  }
  .hx-ticker::before,
  .hx-ticker::after{
    content:"";
    position:absolute; top:0; bottom:0;
    width:48px;
    z-index:2;
    pointer-events:none;
  }
  .hx-ticker::before{
    left:0;
    background: linear-gradient(to right, #fff, rgba(255,255,255,0));
  }
  .hx-ticker::after{
    right:0;
    background: linear-gradient(to left, #fff, rgba(255,255,255,0));
  }
  .hx-ticker-track{
    display:flex;
    gap:1.25rem;
    padding:.9rem 1rem;
    width:max-content;
    animation: hxMarquee 18s linear infinite;
  }
  .hx-ticker-track span{
    font-size:.92rem;
    color:#212529;
    padding:.25rem .7rem;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.08);
    background:#f8f9fa;
    white-space:nowrap;
  }
  .hx-ticker:hover .hx-ticker-track{ animation-play-state: paused; }

  @keyframes hxMarquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }

  /* Badge pills (different styling) */
  .hx-badge{
    display:inline-flex;
    align-items:center;
    padding:.5rem .85rem;
    border-radius:999px;
    border:0px dashed rgba(13,110,253,.35);
    background:rgba(235, 33, 46,0.1);
    color:#EB212E;
    font-size:.9rem;
    transition: transform .2s ease, background .2s ease;
  }
  .hx-badge:hover{
    transform: rotate(-1deg) translateY(-2px);
    background: rgba(32,201,151,.08);
    border-color: rgba(32,201,151,.35);
    color:#111;
  }

  /* Right-side copy animations: split + fadeup */
  .hx-kicker{
    display:inline-block;
    font-weight:600;
    color:#EB212E;
    margin-bottom:.6rem;
    position:relative;
  }
  .hx-kicker::after{
    content:"";
    display:block;
    height:2px;
    width:0%;
    background:#EB212E;
    margin-top:.45rem;
    animation: hxUnderline 1.1s ease forwards;
  }
  @keyframes hxUnderline{ to{ width:92px; } }

  .hx-split{
    animation: hxPop .7s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes hxPop{
    from{ opacity:0; letter-spacing: 2px; transform: translateY(10px); }
    to{ opacity:1; letter-spacing: 0; transform: translateY(0); }
  }

  .hx-fadeup{
    opacity:0;
    transform: translateY(12px);
    animation: hxFadeUp .8s ease forwards;
    animation-delay: .2s;
  }
  @keyframes hxFadeUp{ to{ opacity:1; transform: translateY(0); } }

  /* Buttons */
  .hx-btn, .hx-btn2{ transition: transform .2s ease; }
  .hx-btn:hover, .hx-btn2:hover{ transform: translateY(-2px); }
  .hx-btn-arrow{
    display:inline-block;
    margin-left:.35rem;
    transition: transform .2s ease;
  }
  .hx-btn:hover .hx-btn-arrow{ transform: translateX(4px); }

  /* Reduced motion accessibility */
  @media (prefers-reduced-motion: reduce){
    .hx-ring, .hx-panel::before, .hx-ticker-track,
    .hx-kicker::after, .hx-split, .hx-fadeup, .hx-pulse-dot{
      animation:none !important;
    }
    .hx-stat, .hx-badge, .hx-btn, .hx-btn2, .hx-btn-arrow{ transition:none !important; }
  }



  /***/

  /* ===== Brand Pricing Styles ===== */
.px-pricing { isolation: isolate; }

/* Background graphics */
.px-glow{
  position:absolute;
  width:520px; height:520px;
  border-radius:999px;
  filter: blur(45px);
  opacity:.18;
  z-index:0;
  animation: pxFloat 10s ease-in-out infinite alternate;
}
.px-glow-1{ top:-220px; left:-220px; background:#EB212E; }
.px-glow-2{ bottom:-240px; right:-240px; background:#212121; animation-duration:12s; }

@keyframes pxFloat{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(40px,20px) scale(1.05); }
  100%{ transform: translate(-20px,30px) scale(.98); }
}

.px-dots{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(0,0,0,.15) 1px, transparent 1px);
  background-size:18px 18px;
  opacity:.15;
}

/* Card */
.px-card{
  background:#fff;
  border-radius:20px;
  padding:1.4rem;
  position:relative;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 .75rem 2rem rgba(0,0,0,.06);
  transition:.35s ease;
}
.px-card:hover{
  transform:translateY(-8px);
  box-shadow:0 1.25rem 3rem rgba(0,0,0,.12);
  border-color:#EB212E;
}

.px-card-featured{
  border-color:#EB212E;
}

/* Header */
.px-card-top{
  display:flex;
  gap:1rem;
  margin-bottom:1rem;
}
.px-icon{
  width:52px; height:52px;
  border-radius:16px;
  background:rgba(235,33,46,.12);
  color:#EB212E;
  display:grid;
  place-items:center;
  font-size:22px;
}
.px-icon-alt{
  background:rgba(33,33,33,.12);
  color:#212121;
}

/* Price */
.px-price-wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#f8f9fa;
  border-radius:16px;
  padding:1rem;
  margin-bottom:1rem;
}
.px-amount{ font-size:2.2rem; font-weight:800; color:#212121; }
.px-currency,.px-term{ color:#6c757d; }

.px-chip{
  border:1px dashed #EB212E;
  background:rgba(235,33,46,.08);
  color:#EB212E;
  padding:.4rem .8rem;
  border-radius:999px;
}
.px-chip-alt{
  border-color:#212121;
  background:rgba(33,33,33,.08);
  color:#212121;
}

/* Table */
.px-table{ border-radius:16px; overflow:hidden; margin-bottom:1rem; }
.px-row{
  display:flex;
  justify-content:space-between;
  padding:.85rem 1rem;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.px-row:last-child{ border-bottom:0; }

/* Buttons */
.px-btn-primary{
  background:#EB212E;
  color:#fff;
  border:none;
  padding:.9rem;
  border-radius:14px;
}
.px-btn-dark{
  background:#212121;
  color:#fff;
  border:none;
  padding:.9rem;
  border-radius:14px;
}
.px-btn-primary:hover,
.px-btn-dark:hover{ opacity:.9; }

.px-arrow{ margin-left:.4rem; transition:.2s; }
.btn:hover .px-arrow{ transform:translateX(4px); }

/* Floating badge */
.px-badge-float{
  position:absolute;
  top:14px; right:14px;
  background:#EB212E;
  color:#fff;
  padding:.45rem .8rem;
  border-radius:999px;
  font-size:.85rem;
  animation:pxWiggle 2.6s ease-in-out infinite;
}
@keyframes pxWiggle{
  0%,100%{ transform:rotate(2deg); }
  50%{ transform:rotate(-2deg); }
}

/* Reveal */
.px-reveal{
  opacity:0;
  transform:translateY(16px);
  animation:pxReveal .8s ease forwards;
  animation-delay:var(--delay);
}
@keyframes pxReveal{
  to{ opacity:1; transform:none; }
}



/****************/

/* ===== Logo Design Section (Unique Namespace: ld-) ===== */

.ld-section{ isolation:isolate; }

/* Background graphics: moving orbs + animated diagonal lines */
.ld-orb{
  position:absolute;
  width:520px; height:520px;
  border-radius:999px;
  filter: blur(48px);
  opacity:.16;
  z-index:0;
  animation: ldDrift 10s ease-in-out infinite alternate;
}
.ld-orb-1{ top:-240px; left:-240px; background:#EB212E; }
.ld-orb-2{ bottom:-260px; right:-260px; background:#212121; animation-duration:12s; }

@keyframes ldDrift{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(45px,20px) scale(1.06); }
  100%{ transform: translate(-22px,34px) scale(.98); }
}

.ld-lines{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(235,33,46,.10) 0px,
      rgba(235,33,46,.10) 1px,
      transparent 1px,
      transparent 14px
    );
  opacity:.25;
  z-index:0;
  mask-image: radial-gradient(circle at 30% 35%, rgba(0,0,0,1), transparent 60%);
  -webkit-mask-image: radial-gradient(circle at 30% 35%, rgba(0,0,0,1), transparent 60%);
  animation: ldSlide 14s linear infinite;
}
@keyframes ldSlide{
  from{ background-position: 0 0; }
  to{ background-position: 160px 0; }
}

/* Badge */
.ld-badge{
  display:inline-block;
  font-weight:700;
  font-size:.9rem;
  padding:.45rem .9rem;
  border-radius:999px;
  color:#212121;
  background: rgba(235,33,46,.10);
  border: 1px solid rgba(235,33,46,.35);
}

/* Highlight block */
.ld-highlight{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding: 1rem 1rem;
  border-radius: 18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.06);
  transition: transform .25s ease;
}
.ld-highlight:hover{ transform: translateY(-3px); }

.ld-highlight-icon{
  width:44px; height:44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(235,33,46,.12);
  color:#EB212E;
  border: 1px solid rgba(235,33,46,.25);
}

/* Buttons */
.ld-btn-primary{
  background:#EB212E;
  border:1px solid #EB212E;
  color:#fff;
  border-radius:14px;
  font-weight:700;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.ld-btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 .75rem 1.75rem rgba(235,33,46,.20);
  opacity:.95;
  color:#fff; background: #212121;
}

.ld-btn-dark{
  background:#212121;
  border:1px solid #212121;
  color:#fff;
  border-radius:14px;
  font-weight:700;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.ld-btn-dark:hover{
  transform: translateY(-2px);
  box-shadow: 0 .75rem 1.75rem rgba(33,33,33,.18);
  opacity:.95;
  color:#fff;background:#EB212E;
}

.ld-arrow{
  display:inline-block;
  margin-left:.35rem;
  transition: transform .2s ease;
}
.ld-btn-primary:hover .ld-arrow{ transform: translateX(4px); }

/* Cards */
.ld-card{
  position:relative;
  background:#fff;
  border-radius:20px;
  padding:1.25rem;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 .75rem 2rem rgba(0,0,0,.06);
  overflow:hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ld-card:hover{
  transform: translateY(-7px);
  box-shadow: 0 1.25rem 3rem rgba(0,0,0,.10);
  border-color: rgba(235,33,46,.35);
}

/* Hero card */
.ld-card-hero{
  border-color: rgba(235,33,46,.22);
}
.ld-sheen{
  position:absolute;
  inset:-2px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.30) 35%, transparent 70%);
  transform: translateX(-140%);
  transition: transform .7s ease;
  pointer-events:none;
}
.ld-card:hover .ld-sheen{ transform: translateX(140%); }

.ld-mark{
  width:52px; height:52px;
  border-radius:16px;
  display:grid; place-items:center;
  background: rgba(33,33,33,.06);
  color:#212121;
  border:1px solid rgba(33,33,33,.12);
  animation: ldSpin 8s linear infinite;
}
@keyframes ldSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* Pills */
.ld-pill-row{ display:flex; gap:.5rem; flex-wrap:wrap; }

.ld-pill{
  font-size:.88rem;
  padding:.4rem .75rem;
  border-radius:999px;
  color:#212121;
  background: rgba(33,33,33,.05);
  border:1px solid rgba(33,33,33,.10);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.ld-pill:hover{
  transform: translateY(-2px);
  border-color: rgba(235,33,46,.35);
  background: rgba(235,33,46,.08);
}

/* Small card icons */
.ld-card-icon{
  width:44px; height:44px;
  border-radius:14px;
  display:grid; place-items:center;
  background: rgba(235,33,46,.10);
  color:#EB212E;
  border:1px solid rgba(235,33,46,.22);
  margin-bottom:.75rem;
}

.ld-glow{
  position:absolute;
  width:190px; height:190px;
  right:-95px; bottom:-95px;
  background: radial-gradient(circle, rgba(235,33,46,.18), transparent 60%);
  border-radius:50%;
  transform: scale(.85);
  transition: transform .35s ease;
  pointer-events:none;
}
.ld-card:hover .ld-glow{ transform: scale(1); }

/* Dark card */
.ld-card-dark{
  background:#212121;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 1rem 2.5rem rgba(33,33,33,.18);
}
.ld-card-dark:hover{
  transform: translateY(-7px);
  border-color: rgba(235,33,46,.35);
}

/* Spark */
.ld-spark{
  width:14px; height:14px;
  border-radius:50%;
  background:#EB212E;
  box-shadow: 0 0 0 rgba(235,33,46,.35);
  animation: ldPulse 1.5s infinite;
  margin-top:.35rem;
}
@keyframes ldPulse{
  0%{ box-shadow: 0 0 0 0 rgba(235,33,46,.35); }
  70%{ box-shadow: 0 0 0 14px rgba(235,33,46,0); }
  100%{ box-shadow: 0 0 0 0 rgba(235,33,46,0); }
}

/* List */
.ld-list{ list-style:none; padding:0; }
.ld-list li{
  padding:.65rem .75rem;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
  margin-bottom:.6rem;
  transition: transform .2s ease, border-color .2s ease;
}
.ld-list li strong{ color:#fff; }
.ld-list li:hover{
  transform: translateX(4px);
  border-color: rgba(235,33,46,.35);
}

/* Reveal */
.ld-reveal{
  opacity:0;
  transform: translateY(14px);
  animation: ldReveal .85s ease forwards;
  animation-delay: var(--t, 0ms);
}
@keyframes ldReveal{
  to{ opacity:1; transform: translateY(0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ld-orb, .ld-lines, .ld-reveal, .ld-mark, .ld-spark{ animation:none !important; }
  .ld-card, .ld-btn-primary, .ld-btn-dark, .ld-pill, .ld-highlight, .ld-arrow{ transition:none !important; }
}

/******Logo pricing table css******/

/* ===== Pricing (bp-) Unique Namespace ===== */
.bp-wrap{ isolation:isolate; }

/* Animated background */
.bp-aura{
  position:absolute;
  width:560px; height:560px;
  border-radius:999px;
  filter: blur(52px);
  opacity:.16;
  z-index:0;
  animation: bpDrift 11s ease-in-out infinite alternate;
}
.bp-aura-red{ top:-260px; left:-260px; background:#EB212E; }
.bp-aura-dark{ bottom:-280px; right:-280px; background:#212121; animation-duration: 13s; }

@keyframes bpDrift{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(48px,22px) scale(1.05); }
  100%{ transform: translate(-24px,34px) scale(.98); }
}

.bp-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity:.20;
  z-index:0;
  mask-image: radial-gradient(circle at 30% 30%, rgba(0,0,0,1), transparent 60%);
  -webkit-mask-image: radial-gradient(circle at 30% 30%, rgba(0,0,0,1), transparent 60%);
  animation: bpGridMove 18s linear infinite;
}
@keyframes bpGridMove{
  from{ background-position: 0 0, 0 0; }
  to{ background-position: 220px 0, 0 220px; }
}

/* Title kicker */
.bp-kicker{
  display:inline-block;
  font-weight:800;
  padding:.45rem .9rem;
  border-radius:999px;
  background: rgba(235,33,46,.10);
  border: 1px solid rgba(235,33,46,.35);
  color:#212121;
  margin-bottom: .9rem;
}

/* Card */
.bp-card{
  position:relative;
  z-index:1;
  background:#fff;
  border-radius: 20px;
  padding: 1.25rem;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 .9rem 2.2rem rgba(0,0,0,.06);
  overflow:hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.bp-card:hover{
  transform: translateY(-9px);
  box-shadow: 0 1.5rem 3.2rem rgba(0,0,0,.12);
  border-color: rgba(235,33,46,.40);
}

/* Featured */
.bp-card-featured{
  border-color: rgba(235,33,46,.45);
  box-shadow: 0 1.2rem 3rem rgba(235,33,46,.10);
}
.bp-badge{
  position:absolute;
  top:14px; right:14px;
  background:#EB212E;
  color:#fff;
  font-weight:800;
  font-size:.82rem;
  padding:.4rem .75rem;
  border-radius:999px;
  box-shadow: 0 .9rem 1.8rem rgba(235,33,46,.20);
  animation: bpWiggle 2.6s ease-in-out infinite;
}
@keyframes bpWiggle{
  0%,100%{ transform: rotate(2deg) translateY(0); }
  50%{ transform: rotate(-2deg) translateY(-3px); }
}

/* Top area */
.bp-top{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  margin-bottom: .85rem;
}
.bp-pack{
  font-weight:800;
  color:#EB212E;
  font-size:.9rem;
  letter-spacing:.2px;
}
.bp-title{
  font-weight:800;
  color:#212121;
  margin:0;
}

.bp-icon{
  width:48px; height:48px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(33,33,33,.06);
  border: 1px solid rgba(33,33,33,.10);
  color:#212121;
  position:relative;
  overflow:hidden;
}
.bp-icon-red{
  background: rgba(235,33,46,.10);
  border-color: rgba(235,33,46,.22);
  color:#EB212E;
}

/* Icon shimmer (CSS3) */
.bp-icon::after{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.40) 40%, transparent 70%);
  transform: translateX(-120%);
  animation: bpShimmer 3.5s ease-in-out infinite;
}
@keyframes bpShimmer{
  0%{ transform: translateX(-120%); }
  40%{ transform: translateX(120%); }
  100%{ transform: translateX(120%); }
}

/* List */
.bp-list{
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.bp-list li{
  position:relative;
  padding: .62rem .25rem .62rem 1.55rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
  color:#212121;
}
.bp-list li:last-child{ border-bottom:0; }

.bp-list li::before{
  content:"";
  position:absolute;
  left:.35rem; top: .95rem;
  width:9px; height:9px;
  border-radius:50%;
  background:#EB212E;
  box-shadow: 0 0 0 6px rgba(235,33,46,.12);
  transform: scale(.85);
  transition: transform .2s ease;
}
.bp-card:hover .bp-list li::before{ transform: scale(1); }

/* Buttons */
.bp-btn-dark{
  background:#212121;
  color:#fff;
  border: 1px solid #212121;
  border-radius: 14px;
  padding: .85rem 1rem;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.bp-btn-dark:hover{
  color:#fff;
  transform: translateY(-2px);
  box-shadow: 0 .9rem 1.8rem rgba(33,33,33,.18);
  opacity:.95;background:#EB212E;
}

.bp-btn-red{
  background:#EB212E;
  color:#fff;
  border: 1px solid #EB212E;
  border-radius: 14px;
  padding: .85rem 1rem;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.bp-btn-red:hover{
  color:#fff;background:#212121;
  transform: translateY(-2px);
  box-shadow: 0 .9rem 1.8rem rgba(235,33,46,.22);
  opacity:.96;
}

.bp-arrow{
  display:inline-block;
  margin-left:.35rem;
  transition: transform .2s ease;
}
.btn:hover .bp-arrow{ transform: translateX(5px); }

/* Sheen on hover */
.bp-sheen{
  position:absolute;
  inset:-2px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.28) 35%, transparent 70%);
  transform: translateX(-140%);
  transition: transform .75s ease;
  pointer-events:none;
}
.bp-card:hover .bp-sheen{ transform: translateX(140%); }

/* Reveal on load */
.bp-reveal{
  opacity:0;
  transform: translateY(16px) scale(.98);
  animation: bpReveal .85s ease forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes bpReveal{
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .bp-aura, .bp-grid, .bp-icon::after, .bp-badge, .bp-reveal{ animation:none !important; }
  .bp-card, .bp-btn-dark, .bp-btn-red, .bp-sheen, .bp-arrow{ transition:none !important; }
}



/*******************/


/* ===== Unique Namespace gd- | Colors: #EB212E, #212121 ===== */
.gd-wrap{ isolation:isolate; }

/* Background: flowing swooshes + dots (not boxes) */
.gd-swoosh{
  position:absolute;
  width:720px; height:420px;
  border-radius: 999px;
  filter: blur(55px);
  opacity:.14;
  z-index:0;
  transform: rotate(-18deg);
  animation: gdSwoosh 10s ease-in-out infinite alternate;
}
.gd-swoosh-red{ top:-220px; left:-280px; background:#EB212E; }
.gd-swoosh-dark{ bottom:-260px; right:-320px; background:#212121; animation-duration: 12s; }

@keyframes gdSwoosh{
  0%{ transform: translate(0,0) rotate(-18deg) scale(1); }
  50%{ transform: translate(55px,18px) rotate(-14deg) scale(1.05); }
  100%{ transform: translate(-30px,28px) rotate(-20deg) scale(.98); }
}

.gd-dots{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(33,33,33,.16) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.14;
  z-index:0;
  mask-image: radial-gradient(circle at 35% 25%, rgba(0,0,0,1), transparent 60%);
  -webkit-mask-image: radial-gradient(circle at 35% 25%, rgba(0,0,0,1), transparent 60%);
  animation: gdDots 18s linear infinite;
}
@keyframes gdDots{
  from{ background-position: 0 0; }
  to{ background-position: 220px 110px; }
}

/* Header kicker */
.gd-kicker{
  display:inline-block;
  font-weight:700;
  padding:.45rem .9rem;
  border-radius:999px;
  background: rgba(235,33,46,.10);
  border: 1px solid rgba(235,33,46,.35);
  color:#212121;
  margin-bottom: .9rem;
}

/* Copy area (no box card look) */
.gd-copy{
  padding: .25rem 0;
}

/* Points list */
.gd-points{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 1rem;
}
.gd-points li{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding: .9rem 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(33,33,33,.08);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  position:relative;
  overflow:hidden;
}
.gd-points li::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.32) 35%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .7s ease;
  pointer-events:none;
}
.gd-points li:hover{
  transform: translateY(-4px);
  border-color: rgba(235,33,46,.35);
  background: rgba(255,255,255,.85);
}
.gd-points li:hover::after{ transform: translateX(130%); }

.gd-bullet{
  width:12px; height:12px;
  border-radius:50%;
  background:#EB212E;
  box-shadow: 0 0 0 7px rgba(235,33,46,.12);
  flex: 0 0 auto;
  margin-top: .25rem
  animation: gdPulse 1.6s infinite;
}
@keyframes gdPulse{
  0%{ box-shadow: 0 0 0 0 rgba(235,33,46,.25); }
  70%{ box-shadow: 0 0 0 14px rgba(235,33,46,0); }
  100%{ box-shadow: 0 0 0 0 rgba(235,33,46,0); }
}

/* Buttons */
.gd-btn-red{
  background:#EB212E;
  color:#fff;
  border: 1px solid #EB212E;
  border-radius: 14px;
  font-weight:700;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.gd-btn-red:hover{
  color:#fff; background-color: #212121;
  transform: translateY(-2px);
  box-shadow: 0 .9rem 1.8rem rgba(235,33,46,.22);
  opacity:.96;
}
.gd-btn-dark{
  background:#212121;
  color:#fff;
  border: 1px solid #212121;
  border-radius: 14px;
  font-weight:800;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.gd-btn-dark:hover{
  color:#fff; background-color: #EB212E;
  transform: translateY(-2px);
  box-shadow: 0 .9rem 1.8rem rgba(33,33,33,.20);
  opacity:.96;
}
.gd-arrow{
  display:inline-block;
  margin-left:.35rem;
  transition: transform .2s ease;
}
.gd-btn-red:hover .gd-arrow{ transform: translateX(5px); }

/* Pricing "ribbon table" */
.gd-table-wrap{
  padding: 1.1rem 0;
}

.gd-table-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom: 1.1rem;
}
.gd-mini-title{
  font-weight:600;
  color:#212121;
  font-size: 1.15rem;
  letter-spacing: -.2px;
}
.gd-stamp{
  width:76px; height:76px;
  border-radius: 999px;
  display:none;
  place-items:center;
  text-align:center;
  font-weight: 700;
  line-height:1.05;
  color:#fff;
  background: #EB212E;
  box-shadow: 0 1rem 2.2rem rgba(235,33,46,.22);
  transform: rotate(10deg);
  animation: gdStamp 2.8s ease-in-out infinite;
}
@keyframes gdStamp{
  0%,100%{ transform: rotate(10deg) translateY(0); }
  50%{ transform: rotate(6deg) translateY(-4px); }
}

/* Rows */
.gd-row{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding: 1.05rem 1.1rem;
  border-radius: 22px;
  border: 1px solid rgba(33,33,33,.10);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: .85rem;
  overflow:hidden;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.gd-row::before{
  content:"";
  position:absolute;
  left: -40px;
  top: 50%;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  transform: translateY(-50%);
  opacity:.10;
  background:#EB212E;
  filter: blur(2px);
}

.gd-row:hover{
  transform: translateY(-4px);
  border-color: rgba(235,33,46,.35);
  background: rgba(255,255,255,.90);
}

/* different small motion per row */
.gd-row-1{ animation: gdFloatA 5.2s ease-in-out infinite; }
.gd-row-2{ animation: gdFloatB 5.6s ease-in-out infinite; }
.gd-row-3{ animation: gdFloatA 6.0s ease-in-out infinite; }
.gd-row-4{ animation: gdFloatB 6.4s ease-in-out infinite; }

@keyframes gdFloatA{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}
@keyframes gdFloatB{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(3px); }
}

.gd-row-left .gd-tag{
  display:inline-block;
  font-weight:700;
  font-size:16px;
  color:#EB212E;
  margin-bottom:.15rem;
}
.gd-row-left .gd-name{
  font-weight: 700;
  color:#212121;
  font-size: 14px;
  
}
.gd-row-left .gd-meta{
  color:#212121;
  font-size:.92rem;
}

/* Select link */
.gd-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  text-decoration:none;
  font-weight:600;
  color:#212121;
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(33,33,33,.18);
  background: rgba(33,33,33,.04);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.gd-link span{
  display:inline-block;
  transition: transform .2s ease;
}
.gd-link:hover{
  color:#fff;
  background:#EB212E;
  border-color:#EB212E;
  transform: translateY(-1px);
}
.gd-link:hover span{ transform: translateX(4px); }

/* Sheen overlay */
.gd-row-glow{
  position:absolute;
  inset:-2px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.28) 35%, transparent 70%);
  transform: translateX(-140%);
  transition: transform .75s ease;
  pointer-events:none;
}
.gd-row:hover .gd-row-glow{ transform: translateX(140%); }

/* Reveal */
.gd-reveal{
  opacity:0;
  transform: translateY(14px);
  animation: gdReveal .85s ease forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes gdReveal{
  to{ opacity:1; transform: translateY(0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .gd-swoosh, .gd-dots, .gd-bullet, .gd-stamp, .gd-row-1, .gd-row-2, .gd-row-3, .gd-row-4, .gd-reveal{
    animation:none !important;
  }
  .gd-points li, .gd-row, .gd-link, .gd-btn-red, .gd-btn-dark, .gd-arrow{
    transition:none !important;
  }
}



/******/


/* ===== Unique namespace re- | Brand colors only (#EB212E, #212121) ===== */
.re-wrap{ isolation:isolate; }

/* Background blobs */
.re-blob{
  position:absolute;
  width:620px; height:620px;
  border-radius: 50%;
  filter: blur(60px);
  opacity:.14;
  z-index:0;
  animation: reFloat 10s ease-in-out infinite alternate;
}
.re-blob-red{ top:-260px; left:-260px; background:#EB212E; }
.re-blob-dark{ bottom:-280px; right:-280px; background:#212121; animation-duration: 12s; }
@keyframes reFloat{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(55px,20px) scale(1.06); }
  100%{ transform: translate(-28px,32px) scale(.98); }
}

/* Subtle grain */
.re-grain{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(33,33,33,.06) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.18;
  z-index:0;
  mask-image: radial-gradient(circle at 30% 30%, rgba(0,0,0,1), transparent 60%);
  -webkit-mask-image: radial-gradient(circle at 30% 30%, rgba(0,0,0,1), transparent 60%);
}

/* Left collage */
.re-collage{ position:relative; min-height:720px; padding:10px; }
.re-shot{
  position:absolute;
  margin:0;
  border-radius: 26px;
  overflow:hidden;
  transform: translateZ(0);
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.14);
  border: 5px solid rgba(255,255,255,.85);
}
.re-shot img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.03);
  transition: transform .65s ease;
  filter: saturate(1.04) contrast(1.02);
}
.re-shot:hover img{ transform: scale(1.10); }
.re-cap{
  position:absolute;
  left:14px; bottom:14px;
  background: rgba(33,33,33,.78);
  color:#fff;
  padding:.45rem .75rem;
  border-radius: 999px;
  font-weight:600;
  font-size:.85rem;
  border: 1px solid rgba(235,33,46,.30);
}
.re-shot-main{ inset: 10px 70px 90px 10px; animation: reBob1 6s ease-in-out infinite; }
@keyframes reBob1{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
.re-shot-float{
  width:62%; height:44%;
  right:6px; top:38px;
  border-radius:22px;
  animation: reBob2 6.8s ease-in-out infinite;
}
@keyframes reBob2{ 0%,100%{ transform: translateY(0) rotate(.4deg); } 50%{ transform: translateY(10px) rotate(-.4deg); } }
.re-shot-mini{
  width:45%; height:36%;
  right:18px; bottom:14px;
  border-radius:22px;
  animation: reBob3 7.4s ease-in-out infinite;
}
@keyframes reBob3{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }

/* Badge */
.re-badge{
  position:absolute;
  left:18px; bottom:18px;
  width:120px; height:120px;
  border-radius: 999px;
  background:#EB212E;
  color:#fff;
  display:grid;
  place-items:center;
  text-align:center;
  font-weight: 700;
  box-shadow: 0 1.2rem 2.6rem rgba(235,33,46,.25);
  transform: rotate(-10deg);
  animation: reWiggle 2.8s ease-in-out infinite;
}
.re-badge-top{ font-size:1.05rem; line-height:1.1; }
.re-badge-sub{ font-size:.85rem; opacity:.92; }
@keyframes reWiggle{
  0%,100%{ transform: rotate(-10deg) translateY(0); }
  50%{ transform: rotate(-6deg) translateY(-4px); }
}

/* Right content */
.re-kicker{
  display:inline-block;
  font-weight:700;
  padding:.45rem .9rem;
  border-radius:999px;
  background: rgba(235,33,46,.10);
  border: 1px solid rgba(235,33,46,.35);
  color:#212121;
  margin-bottom:.9rem;
}
.re-title{
  font-weight:700;
  color:#212121;
  line-height:1.12;
  letter-spacing:-.4px;
  margin-bottom:.9rem;
}
.re-accent{ color:#EB212E; }
.re-text{  }
.re-subtitle{ font-weight:600; color:#212121; }

/* Feature list (hover reveal) */
.re-featurelist{
  display:grid;
  gap: .85rem;
}
.re-feature{
  position:relative;
  display:grid;
  grid-template-columns: 56px 1fr 18px;
  align-items:center;
  gap: 12px;
  padding: .85rem .9rem;
  text-decoration:none;
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(33,33,33,.10);
  overflow:hidden;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.re-feature:hover{
  transform: translateY(-3px);
  border-color: rgba(235,33,46,.35);
  background: rgba(255,255,255,.92);
}

/* Hover sheen */
.re-fx{
  position:absolute;
  inset:-2px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.32) 35%, transparent 70%);
  transform: translateX(-140%);
  transition: transform .75s ease;
  pointer-events:none;
}
.re-feature:hover .re-fx{ transform: translateX(140%); }

/* Icon bubble */
.re-ico{
  width:56px; height:56px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  color:#EB212E;
  background: radial-gradient(circle at 30% 30%, rgba(235,33,46,.16), rgba(255,255,255,.95));
  border: 1px solid rgba(235,33,46,.25);
  box-shadow: 0 .7rem 1.6rem rgba(0,0,0,.08);
  position:relative;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.re-ico::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  border: 1px dashed rgba(235,33,46,.55);
  opacity:.0;
  transform: scale(.88);
  transition: opacity .25s ease, transform .25s ease;
}
.re-feature:hover .re-ico{
  transform: translateY(-2px) rotate(-3deg);
  box-shadow: 0 1rem 2.2rem rgba(235,33,46,.16);
  background: radial-gradient(circle at 30% 30%, rgba(235,33,46,.22), rgba(255,255,255,.98));
}
.re-feature:hover .re-ico::after{
  opacity:1;
  transform: scale(1);
  animation: reSpin 6s linear infinite;
}
@keyframes reSpin{
  from{ transform: scale(1) rotate(0deg); }
  to{ transform: scale(1) rotate(360deg); }
}

/* Text */
.re-ftext{ display:block; }
.re-ftitle{
  display:block;
  font-weight:600;
  color:#212121;
  line-height:1.2;
}
.re-fdesc{
  display:block;
  color:#6c757d;
  font-size:.93rem;
  line-height:1.45;
  margin-top: .15rem;
  transform: translateY(6px);
  
  transition: transform .22s ease, opacity .22s ease;
}
.re-feature:hover .re-fdesc{
  transform: translateY(0);
  opacity: 1;
}

/* arrow */
.re-go{
  color:#212121;
  font-weight: 700;
  transform: translateX(-2px);
  transition: transform .22s ease, color .22s ease;
}
.re-feature:hover .re-go{
  transform: translateX(4px);
  color:#EB212E;
}

/* Buttons */
.re-btn{
  border-radius: 14px;
  font-weight:700;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.re-btn-red{ background:#EB212E; border:1px solid #EB212E; color:#fff; }
.re-btn-red:hover{
  color:#fff; transform: translateY(-2px);
  box-shadow: 0 .9rem 1.8rem rgba(235,33,46,.22);
  opacity:.96;background:#212121; 
}
.re-btn-dark{ background:#212121; border:1px solid #212121; color:#fff; }
.re-btn-dark:hover{
  color:#fff; transform: translateY(-2px);
  box-shadow: 0 .9rem 1.8rem rgba(33,33,33,.20);
  opacity:.96; background:#EB212E; 
}
.re-arrow{ display:inline-block; margin-left:.35rem; transition: transform .2s ease; }
.re-btn-red:hover .re-arrow{ transform: translateX(5px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .re-blob, .re-shot-main, .re-shot-float, .re-shot-mini, .re-badge{ animation:none !important; }
  .re-shot img, .re-btn, .re-arrow, .re-feature, .re-fx, .re-ico, .re-ico::after, .re-fdesc, .re-go{
    transition:none !important;
    animation:none !important;
  }
}





/*********/

/* ===== Unique namespace em- | Colors: #EB212E, #212121 ===== */
.em-wrap{ isolation:isolate; }

/* Animated background */
.em-orb{
  position:absolute;
  width:620px; height:620px;
  border-radius:999px;
  filter: blur(60px);
  opacity:.14;
  z-index:0;
  animation: emFloat 10s ease-in-out infinite alternate;
}
.em-orb-red{ top:-260px; left:-260px; background:#EB212E; }
.em-orb-dark{ bottom:-280px; right:-280px; background:#212121; animation-duration: 12s; }
@keyframes emFloat{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(55px,20px) scale(1.06); }
  100%{ transform: translate(-28px,32px) scale(.98); }
}

.em-lines{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(235,33,46,.10) 0px,
      rgba(235,33,46,.10) 1px,
      transparent 1px,
      transparent 14px
    );
  opacity:.22;
  z-index:0;
  mask-image: radial-gradient(circle at 30% 30%, rgba(0,0,0,1), transparent 60%);
  -webkit-mask-image: radial-gradient(circle at 30% 30%, rgba(0,0,0,1), transparent 60%);
  animation: emSlide 14s linear infinite;
}
@keyframes emSlide{
  from{ background-position: 0 0; }
  to{ background-position: 160px 0; }
}

/* Visual area */
.em-visual{
  position:relative;
  min-height: 620px;
  padding: 10px;
}
.em-shot{
  position:absolute;
  margin:0;
  border-radius: 26px;
  overflow:hidden;
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.45);
}
.em-shot img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.03);
  transition: transform .65s ease;
  filter: saturate(1.04) contrast(1.02);
}
.em-shot:hover img{ transform: scale(1.10); }

.em-shot-main{
  inset: 10px 70px 90px 10px;
  animation: emBob1 6.2s ease-in-out infinite;
}
@keyframes emBob1{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }

.em-shot-float{
  width: 62%;
  height: 44%;
  right: 6px;
  top: 38px;
  border-radius: 22px;
  animation: emBob2 6.8s ease-in-out infinite;
}
@keyframes emBob2{ 0%,100%{ transform: translateY(0) rotate(.4deg); } 50%{ transform: translateY(10px) rotate(-.4deg); } }

.em-cap{
  position:absolute;
  left:14px; bottom:14px;
  background: rgba(33,33,33,.78);
  color:#fff;
  padding: .45rem .75rem;
  border-radius: 999px;
  font-weight:600;
  font-size:.85rem;
  border: 1px solid rgba(235,33,46,.30);
}

/* stamp */
.em-stamp{
  position:absolute;
  left: 18px;
  bottom: 18px;
  width: 126px;
  height: 126px;
  border-radius: 999px;
  background: #EB212E;
  color:#fff;
  display:grid;
  place-items:center;
  text-align:center;
  font-weight: 700;
  box-shadow: 0 1.2rem 2.6rem rgba(235,33,46,.25);
  transform: rotate(-10deg);
  animation: emWiggle 2.8s ease-in-out infinite;
}
.em-stamp-top{ font-size: 1.05rem; line-height: 1.05; }
.em-stamp-sub{ font-size: .85rem; opacity:.92; }
@keyframes emWiggle{
  0%,100%{ transform: rotate(-10deg) translateY(0); }
  50%{ transform: rotate(-6deg) translateY(-4px); }
}

/* KPIs */
.em-kpis{
  position:absolute;
  right: 10px;
  bottom: 14px;
  display:flex;
  gap: 10px;
}
.em-kpi{
  width: 88px;
  height: 66px;
  border-radius: 18px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(33,33,33,.10);
  box-shadow: 0 .9rem 2rem rgba(0,0,0,.10);
  display:grid;
  place-items:center;
  text-align:center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: emKpi 6.2s ease-in-out infinite;
}
.em-kpi:nth-child(2){ animation-duration: 6.8s; }
.em-kpi:nth-child(3){ animation-duration: 7.4s; }
@keyframes emKpi{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
.em-kpi-n{
  font-weight: 700;
  color:#212121;
  line-height:1.05;
}
.em-kpi-t{
  font-size:.82rem;
  color:#6c757d;
  margin-top: 2px;
}

/* Text block */
.em-kicker{
  display:inline-block;
  font-weight:700;
  padding:.45rem .9rem;
  border-radius:999px;
  background: rgba(235,33,46,.10);
  border: 1px solid rgba(235,33,46,.35);
  color:#212121;
  margin-bottom: .9rem;
}
.em-title{
  font-weight:700;
  color:#212121;
  line-height:1.3;
  letter-spacing:-.4px;
  margin-bottom:.9rem;
}
.em-accent{ color:#EB212E; }
.em-text{  line-height:1.65; }

/* Service rail *




/* ===== Unique namespace ep- | Colors: #EB212E, #212121 ===== */
.ep-wrap{ isolation:isolate; }

/* Background */
.ep-orb{
  position:absolute;
  width:620px; height:620px;
  border-radius:999px;
  filter: blur(60px);
  opacity:.14;
  z-index:0;
  animation: epFloat 10s ease-in-out infinite alternate;
}
.ep-orb-red{ top:-260px; left:-260px; background:#EB212E; }
.ep-orb-dark{ bottom:-280px; right:-280px; background:#212121; animation-duration:12s; }
@keyframes epFloat{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(55px,20px) scale(1.06); }
  100%{ transform: translate(-28px,32px) scale(.98); }
}
.ep-lines{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(235,33,46,.10) 0px,
      rgba(235,33,46,.10) 1px,
      transparent 1px,
      transparent 14px
    );
  opacity:.18;
  z-index:0;
  mask-image: radial-gradient(circle at 30% 30%, rgba(0,0,0,1), transparent 60%);
  -webkit-mask-image: radial-gradient(circle at 30% 30%, rgba(0,0,0,1), transparent 60%);
  animation: epSlide 14s linear infinite;
}
@keyframes epSlide{
  from{ background-position: 0 0; }
  to{ background-position: 160px 0; }
}

/* Title kicker */
.ep-kicker{
  display:inline-block;
  font-weight:700;
  padding:.45rem .9rem;
  border-radius:999px;
  background: rgba(235,33,46,.10);
  border: 1px solid rgba(235,33,46,.35);
  color:#212121;
  margin-bottom:.9rem;
}

/* Plan block (animated) */
.ep-plan{
  position:relative;
  z-index:1;
  height:100%;
  border-radius: 26px;
  padding: 1.25rem 1.2rem;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(33,33,33,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow:hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.ep-plan:hover{
  transform: translateY(-10px);
  border-color: rgba(235,33,46,.35);
  box-shadow: 0 1.4rem 3.2rem rgba(0,0,0,.12);
}

/* Featured plan */
.ep-plan-featured{
  border-color: rgba(235,33,46,.42);
  box-shadow: 0 1.2rem 3rem rgba(235,33,46,.12);
}
.ep-feature-tag{
  position:absolute;
  top:14px; right:14px;
  background:#EB212E;
  color:#fff;
  font-weight: 700;
  font-size:.82rem;
  padding:.4rem .75rem;
  border-radius:999px;
  box-shadow: 0 .9rem 1.8rem rgba(235,33,46,.20);
  animation: epWiggle 2.6s ease-in-out infinite;
}
@keyframes epWiggle{
  0%,100%{ transform: rotate(2deg) translateY(0); }
  50%{ transform: rotate(-2deg) translateY(-3px); }
}

/* Dark plan (Pro) */
.ep-plan-dark{
  background: rgba(33,33,33,.92);
  border-color: rgba(255,255,255,.10);
}

/* Header */
.ep-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom: 1rem;
}
.ep-tier{
  font-weight:  700;
  color:#212121;
  font-size: 1.05rem;
  letter-spacing: .2px;
}
.ep-badge{
  font-weight:  700;
  font-size: .78rem;
  padding:.35rem .65rem;
  border-radius:999px;
  color:#212121;
  background: rgba(33,33,33,.06);
  border: 1px solid rgba(33,33,33,.12);
}
.ep-badge-red{
  background: rgba(235,33,46,.10);
  border-color: rgba(235,33,46,.35);
  color:#212121;
}
.ep-badge-outline{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}

/* Price */
.ep-price{
  display:flex;
  align-items:flex-end;
  gap:.35rem;
  line-height:1;
  margin-bottom: .25rem;
}
.ep-currency{
  font-weight:  700;
  color:#212121;
}
.ep-amount{
  font-weight:  700;
  font-size: 2.1rem;
  color:#212121;
  letter-spacing: -.6px;
}
.ep-price-light .ep-currency,
.ep-price-light .ep-amount{ color:#fff; }

.ep-meta{
  color:#6c757d;
  font-weight:700;
  margin-bottom: 1rem;
}
.ep-meta-light{ color: rgba(255,255,255,.75); }

/* Divider */
.ep-divider{
  height:1px;
  background: rgba(33,33,33,.10);
  margin: .95rem 0 1rem;
}
.ep-divider-light{ background: rgba(255,255,255,.14); }

/* List */
.ep-list{
  list-style:none;
  padding:0;
  margin: 0 0 1.05rem;
  display:grid;
  gap:.7rem;
}
.ep-list li{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  color:#212121;
}
.ep-list strong{ font-weight: 700; }

.ep-dot{
  width:10px; height:10px;
  border-radius:50%;
  background:#EB212E;
  box-shadow: 0 0 0 7px rgba(235,33,46,.12);
  margin-top:.35rem;
  flex: 0 0 auto;
  animation: epPulse 1.6s infinite;
}
@keyframes epPulse{
  0%{ box-shadow: 0 0 0 0 rgba(235,33,46,.25); }
  70%{ box-shadow: 0 0 0 14px rgba(235,33,46,0); }
  100%{ box-shadow: 0 0 0 0 rgba(235,33,46,0); }
}
.ep-list-light li{ color: rgba(255,255,255,.90); }
.ep-dot-light{
  background:#EB212E;
  box-shadow: 0 0 0 7px rgba(235,33,46,.18);
}

/* Buttons */
.ep-btn{
  border-radius: 14px;
  font-weight:  700;
  padding: .85rem 1rem;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.ep-btn-red{
  background:#EB212E;
  border:1px solid #EB212E;
  color:#fff;
}
.ep-btn-red:hover{
  color:#fff; background:#212121;
  transform: translateY(-2px);
  box-shadow: 0 .95rem 1.9rem rgba(235,33,46,.22);
  opacity:.96;
}
.ep-btn-dark{
  background:#212121;
  border:1px solid #212121;
  color:#fff;
}
.ep-btn-dark:hover{
  color:#fff;background:#EB212E;
  transform: translateY(-2px);
  box-shadow: 0 .95rem 1.9rem rgba(33,33,33,.20);
  opacity:.96;
}
.ep-arrow{
  display:inline-block;
  margin-left:.35rem;
  transition: transform .2s ease;
}
.ep-btn:hover .ep-arrow{ transform: translateX(5px); }

/* Sheen + glow */
.ep-sheen{
  position:absolute;
  inset:-2px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.28) 35%, transparent 70%);
  transform: translateX(-140%);
  transition: transform .75s ease;
  pointer-events:none;
}
.ep-plan:hover .ep-sheen{ transform: translateX(140%); }

.ep-glow{
  position:absolute;
  width:220px; height:220px;
  right:-110px; bottom:-110px;
  background: radial-gradient(circle, rgba(235,33,46,.18), transparent 60%);
  border-radius:50%;
  transform: scale(.85);
  transition: transform .35s ease;
  pointer-events:none;
}
.ep-plan:hover .ep-glow{ transform: scale(1); }

/* Reveal */
.ep-reveal{
  opacity:0;
  transform: translateY(16px) scale(.985);
  animation: epReveal .85s ease forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes epReveal{
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ep-orb, .ep-lines, .ep-dot, .ep-feature-tag, .ep-reveal{ animation:none !important; }
  .ep-plan, .ep-btn, .ep-arrow, .ep-sheen, .ep-glow{ transition:none !important; }
}





/* ===== Unique namespace ma3- | Colors: #EB212E, #212121 ===== */
.ma3-wrap{
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
  isolation:isolate;
}

/* background ribbons */
.ma3-ribbon{
  position:absolute;
  width:820px; height:820px;
  border-radius: 60px;
  filter: blur(40px);
  opacity:.12;
  z-index:0;
  transform: rotate(18deg);
  animation: ma3Drift 10.5s ease-in-out infinite alternate;
}
.ma3-ribbon-red{ top:-420px; left:-360px; background:#EB212E; }
.ma3-ribbon-dark{ bottom:-460px; right:-380px; background:#212121; animation-duration: 12.5s; }
@keyframes ma3Drift{
  0%{ transform: rotate(18deg) translate(0,0) scale(1); }
  100%{ transform: rotate(18deg) translate(60px,30px) scale(1.04); }
}

/* dotted overlay */
.ma3-dots{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(33,33,33,.12) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.10;
  z-index:0;
  mask-image: radial-gradient(circle at 30% 30%, rgba(0,0,0,1), transparent 62%);
  -webkit-mask-image: radial-gradient(circle at 30% 30%, rgba(0,0,0,1), transparent 62%);
}

/* kicker / title */
.ma3-kicker{
  display:inline-block;
  font-weight:600;
  padding:.45rem .95rem;
  border-radius:999px;
  background: rgba(235,33,46,.10);
  border:1px solid rgba(235,33,46,.35);
  color:#212121;
  margin-bottom:.9rem;
}
.ma3-title{
  font-weight:700;
  color:#212121;
  letter-spacing:-.6px;
  line-height:1.12;
  margin-bottom:.9rem;
}
.ma3-accent{ color:#EB212E; }


/* Poster */
.ma3-poster{
  position:relative;
  border-radius: 28px;
  padding: 1rem;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(33,33,33,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1.4rem 3.6rem rgba(0,0,0,.12);
  overflow:hidden;
}
.ma3-poster::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.34) 35%, transparent 70%);
  transform: translateX(-140%);
  transition: transform .85s ease;
  pointer-events:none;
}
.ma3-poster:hover::before{ transform: translateX(140%); }

.ma3-poster-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: .9rem;
}
.ma3-store{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:#212121;
}
.ma3-store-dot{
  width:10px; height:10px;
  border-radius:50%;
  background:#EB212E;
  box-shadow: 0 0 0 8px rgba(235,33,46,.14);
  animation: ma3Pulse 1.6s infinite;
}
@keyframes ma3Pulse{
  0%{ box-shadow: 0 0 0 0 rgba(235,33,46,.28); }
  70%{ box-shadow: 0 0 0 14px rgba(235,33,46,0); }
  100%{ box-shadow: 0 0 0 0 rgba(235,33,46,0); }
}

.ma3-rating{
  display:flex;
  align-items:center;
  gap: 4px;
  font-weight: 700;
  color:#212121;
}
.ma3-star{ color:#EB212E; }
.ma3-star-dim{ color: rgba(235,33,46,.35); }
.ma3-rating-txt{ margin-left:6px; color:#212121; }

.ma3-cover{
  position:relative;
  border-radius: 24px;
  overflow:hidden;
  border: 1px solid rgba(33,33,33,.10);
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.12);
  transform: translateZ(0);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ma3-cover img{
  width:100%; height: 330px;
  object-fit: cover;
  display:block;
  transform: scale(1.05);
  transition: transform .75s ease, filter .75s ease;
  filter: saturate(1.05) contrast(1.02);
}
.ma3-gloss{
  position:absolute;
  inset:-20%;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.26), transparent 55%);
  opacity:.9;
  pointer-events:none;
}
.ma3-poster:hover .ma3-cover{
  transform: translateY(-8px);
  border-color: rgba(235,33,46,.35);
  box-shadow: 0 1.7rem 3.9rem rgba(0,0,0,.16);
}
.ma3-poster:hover .ma3-cover img{ transform: scale(1.12); filter: saturate(1.12) contrast(1.05); }

.ma3-poster-mid{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-top: 1rem;
}
.ma3-appicon{
  width:58px; height:58px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(235,33,46,.22);
  box-shadow: 0 .9rem 1.8rem rgba(0,0,0,.10);
  flex: 0 0 auto;
}
.ma3-appicon img{ width:100%; height:100%; object-fit: cover; display:block; }

.ma3-appname{ font-weight: 700; color:#212121; line-height:1.2; }
.ma3-appmeta{ color:#6c757d; font-size:.92rem; margin-top:2px; }

.ma3-get{
  margin-left:auto;
  text-decoration:none;
  font-weight: 700;
  color:#fff;
  background:#EB212E;
  border: 1px solid #EB212E;
  padding: .55rem .95rem;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.ma3-get:hover{
  color:#fff;
  transform: translateY(-2px);
  box-shadow: 0 .9rem 1.8rem rgba(235,33,46,.22);
  opacity:.96;
}

.ma3-poster-btm{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top: 1rem;
}
.ma3-pill{
  font-weight: 700;
  font-size:.85rem;
  padding:.45rem .75rem;
  border-radius: 999px;
  color:#212121;
  background: rgba(33,33,33,.06);
  border: 1px solid rgba(33,33,33,.10);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.ma3-pill:hover{
  transform: translateY(-2px);
  border-color: rgba(235,33,46,.35);
  background: rgba(235,33,46,.08);
}

/* Tiles */
.ma3-tile{
  position:relative;
  border-radius: 22px;
  padding: 1rem;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(33,33,33,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow:hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  height: 100%;
}
.ma3-tile:hover{
  transform: translateY(-6px);
  border-color: rgba(235,33,46,.35);
  box-shadow: 0 1.3rem 3rem rgba(0,0,0,.12);
}
.ma3-tile-ico{
  width:54px; height:54px;
  border-radius: 18px;
  display:grid; place-items:center;
  color:#212121;
  background: rgba(235,33,46,.10);
  border: 1px solid rgba(235,33,46,.22);
  margin-bottom: .75rem;
  transition: transform .22s ease;
}
.ma3-tile:hover .ma3-tile-ico{ transform: rotate(-6deg) translateY(-2px); }
.ma3-tile-t{ font-weight:700; color:#212121; }
.ma3-tile-d{ color:#212121; font-size:.93rem; margin-top:.2rem; line-height:1.55; }

.ma3-tile-fx{
  position:absolute; inset:-2px;
  background: linear-gradient(115deg, transparent 0%, rgba(235,33,46,.08) 35%, transparent 70%);
  transform: translateX(-140%);
  transition: transform .8s ease;
  pointer-events:none;
}
.ma3-tile:hover .ma3-tile-fx{ transform: translateX(140%); }

/* Buttons */
.ma3-btn{
  border-radius: 14px;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.ma3-btn-red{ background:#EB212E; border:1px solid #EB212E; color:#fff; }
.ma3-btn-red:hover{
  color:#fff; transform: translateY(-2px);
  box-shadow: 0 .95rem 1.9rem rgba(235,33,46,.22);
  opacity:.96; background:#212121;
}
.ma3-btn-dark{ background:#212121; border:1px solid #212121; color:#fff; }
.ma3-btn-dark:hover{  background:#EB212E;
  color:#fff; transform: translateY(-2px);
  box-shadow: 0 .95rem 1.9rem rgba(33,33,33,.20);
  opacity:.96;
}
.ma3-arrow{ display:inline-block; margin-left:.35rem; transition: transform .2s ease; }
.ma3-btn-red:hover .ma3-arrow{ transform: translateX(5px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ma3-ribbon, .ma3-store-dot{ animation:none !important; }
  .ma3-cover, .ma3-cover img, .ma3-poster::before, .ma3-pill, .ma3-tile, .ma3-tile-ico, .ma3-tile-fx, .ma3-btn, .ma3-arrow, .ma3-get{
    transition:none !important;
  }
}



/* ===== Unique namespace mpc- | Colors: #EB212E, #212121 ===== */
.mpc-wrap{ isolation:isolate; }

/* background */
.mpc-orb{
  position:absolute;
  width:640px; height:640px;
  border-radius:999px;
  filter: blur(62px);
  opacity:.14;
  z-index:0;
  animation: mpcFloat 10s ease-in-out infinite alternate;
}
.mpc-orb-red{ top:-280px; left:-280px; background:#EB212E; }
.mpc-orb-dark{ bottom:-300px; right:-300px; background:#212121; animation-duration:12s; }
@keyframes mpcFloat{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(55px,18px) scale(1.06); }
  100%{ transform: translate(-30px,32px) scale(.98); }
}
.mpc-scan{
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(235,33,46,.10), transparent);
  width: 45%;
  transform: translateX(-140%);
  animation: mpcScan 6.5s linear infinite;
  opacity:.22;
  z-index:0;
}
@keyframes mpcScan{
  0%{ transform: translateX(-140%); }
  100%{ transform: translateX(260%); }
}

/* heading kicker */
.mpc-kicker{
  display:inline-block;
  font-weight:700;
  padding:.45rem .95rem;
  border-radius:999px;
  background: rgba(235,33,46,.10);
  border:1px solid rgba(235,33,46,.35);
  color:#212121;
  margin-bottom:.9rem;
}

/* card */
.mpc-step{
  position:relative;
  height:100%;
  border-radius: 26px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(33,33,33,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow:hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.mpc-step:hover{
  transform: translateY(-10px);
  border-color: rgba(235,33,46,.35);
  box-shadow: 0 1.5rem 3.4rem rgba(0,0,0,.12);
}
.mpc-step-featured{
  border-color: rgba(235,33,46,.40);
  box-shadow: 0 1.2rem 3rem rgba(235,33,46,.10);
}

/* image */
.mpc-media{
  position:relative;
  height: 190px;
  overflow:hidden;
}
.mpc-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.05);
  transition: transform .75s ease, filter .75s ease;
  filter: saturate(1.05) contrast(1.02);
}
.mpc-step:hover .mpc-media img{
  transform: scale(1.14);
  filter: saturate(1.12) contrast(1.05);
}

/* top overlay */
.mpc-top{
  position:absolute;
  inset: 14px 14px auto 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.mpc-no{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:grid; place-items:center;
  font-weight: 700;
  color:#212121;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(33,33,33,.10);
  box-shadow: 0 .9rem 1.8rem rgba(0,0,0,.12);
}
.mpc-chip{
  font-weight: 700;
  font-size:.82rem;
  padding:.4rem .75rem;
  border-radius:999px;
  color:#212121;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(33,33,33,.10);
  box-shadow: 0 .9rem 1.8rem rgba(0,0,0,.10);
}
.mpc-chip-red{
  color:#fff;
  background:#EB212E;
  border-color:#EB212E;
}

/* body */
.mpc-body{
  padding: 1rem 1.1rem 1.15rem;
}
.mpc-title{
  font-weight: 600;
  color:#212121;
  font-size: 1.05rem;
  margin-bottom: .45rem;
}
.mpc-text{
  color:#212121;
  line-height:1.65;
  margin-bottom: .85rem;
}

/* bullet list */
.mpc-points{
  list-style:none;
  padding:0;
  margin: 0 0 .95rem;
  display:grid;
  gap: .55rem;
}
.mpc-points li{
  display:flex;
  gap:.55rem;
  align-items:flex-start;
  color:#212121;
}
.mpc-dot{
  width:10px; height:10px;
  border-radius:50%;
  background:#EB212E;
  box-shadow: 0 0 0 7px rgba(235,33,46,.12);
  margin-top:.35rem;
  flex: 0 0 auto;
  animation: mpcPulse 1.6s infinite;
}
@keyframes mpcPulse{
  0%{ box-shadow: 0 0 0 0 rgba(235,33,46,.26); }
  70%{ box-shadow: 0 0 0 14px rgba(235,33,46,0); }
  100%{ box-shadow: 0 0 0 0 rgba(235,33,46,0); }
}

/* sheen + glow */
.mpc-sheen{
  position:absolute;
  inset:-2px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.30) 35%, transparent 70%);
  transform: translateX(-140%);
  transition: transform .85s ease;
  pointer-events:none;
}
.mpc-step:hover .mpc-sheen{ transform: translateX(140%); }

.mpc-glow{
  position:absolute;
  width:220px; height:220px;
  right:-110px; bottom:-110px;
  background: radial-gradient(circle, rgba(235,33,46,.18), transparent 60%);
  border-radius:50%;
  transform: scale(.85);
  transition: transform .35s ease;
  pointer-events:none;
}
.mpc-step:hover .mpc-glow{ transform: scale(1); }

/* button */
.mpc-btn{
  border-radius: 14px;
  font-weight: 700;
  padding: .85rem 1rem;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.mpc-btn-red{
  background:#EB212E;
  border:1px solid #EB212E;
  color:#fff;
}
.mpc-btn-red:hover{
  color:#fff; background: #212121;
  transform: translateY(-2px);
  box-shadow: 0 .95rem 1.9rem rgba(235,33,46,.22);
  opacity:.96;
}
.mpc-arrow{ display:inline-block; margin-left:.35rem; transition: transform .2s ease; }
.mpc-btn-red:hover .mpc-arrow{ transform: translateX(5px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mpc-orb, .mpc-scan, .mpc-dot{ animation:none !important; }
  .mpc-step, .mpc-media img, .mpc-sheen, .mpc-glow, .mpc-btn, .mpc-arrow{ transition:none !important; }
}



@media ( max-width: 992px ){

  .footmiddle { flex-direction: column-reverse; }
  .services-sec #v-pills-tab .nav-link, .services-sec #v-pills-tab .nav-link span{ font-size: 24px;}

  .blog-inwrap {
  height: auto;
  overflow: visible  ;  
  flex-direction: column;
}
.hover-blog-wrap:hover .blog-inwrap, .hover-blog-wrap:hover .blog-inwrap .bfigure {
  height: auto;
}

.section-title h2{ font-size: 32px;}

.copy-foot{ flex-direction: column;}


.off-plan .card-content {
  background: #000;
}

 .clients-wrap .off-plan .swiper-slide { height: auto!important; text-align: center;}

.off-plan .card-content img{ width: auto!important;}

}