/* btn style */
.btn {
  background-color: #fff !important;
  border-color: #fff !important;
  color: #000; 
  border-radius: 38.74px;
  width: 216px;
  font-weight: 700;
}
.btn-primary {
  background-color: #CC067F !important;
  border-color: #CC067F !important;
  border-radius: 50px;
  color: #fff;
}
.btn:hover {
 background-color: #fff;
 color: #000;
}
.btn-outline {
  border: 0.84px solid #000000 !important;
}
.section-what-you-get {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0%;
    flex-wrap: wrap;
    background-repeat: no-repeat;
    background-position: right bottom;
}
.gap-110 {
   gap: 110px;
}
.monitor-inner {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.what-you-get-section-left {
    flex: 1 1 450px;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;    
}
.monitor {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
}
.monitor img.frame {
    width: 100%;
    display: block;
}
.screen {
    position: absolute;
    top: 20px;
    left: 3.8%;
    width: 92.5%;
    height: 55%;
    overflow: hidden;
    border-radius: 0;
}
.screen {
    height: 55%;
}
.screen img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    position: absolute;
    top: 0;
    left: 100%;
    opacity: 0;
    transition: all 0.6s ease-in-out;
}
.what-you-get-section-left .title h2  {
    font-weight: 800;
    text-transform: capitalize;
    color: var(--primary-color);
    margin-bottom: 10px;
}
.screen img.active {
    left: 0;
    opacity: 1;
    z-index: 1;
}
.screen img.slide-out {
    left: -100%;
    opacity: 0;
    z-index: 0;
}
.what-you-get-section-right {
    flex: 1 1 400px;
}
.subtitle {
    font-size: 20px;
    font-weight: 300;
    line-height: 33px;
    margin-bottom: 20px;
}
.service {
    border-bottom: 1px solid var(--text-dark);
    padding: 20px 0;
    cursor: pointer;
}
.service h3 {
    margin: 0;
    font-weight: 800;
    line-height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s;
}
.service:hover h3,
.service.active h3 {
    color: var(--primary-color);
}
.service p {
    margin: 5px 0 0;
    color: var(--text-dark);
    font-weight: 300;
    line-height: 31px;
    position: relative;
    top: -5px;
    font-size: 22px;
}
.arrow {
    font-size: 14px;
    transition: transform 0.3s ease;
}
.service.active .arrow {
    transform: rotate(180deg);
}
.arrow path { stroke:var(--text-dark) }   
.service.active .arrow path { stroke:var(--primary-color); }  
.service-body { display:none; padding:6px 0 14px; color:#555; position: relative; top: 18px; transition: all 0.6s ease-in-out; }
.service.active .service-body { display:block;  } 

/* how it work */

.howitwork {
    padding: 158px 0px 0px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}
.howitwork .container{
    padding: 0px 0px 158px 0px;
}
.pen-tool-icon {
    position:relative;
    left: 0px;
    margin-bottom: -120px;
}
.icon-point-size {
 width: 77px;
 height: 106px;
}
.pl-70 {
   padding-left: 70px;
}

.our-process .title p {
  font-size: 18px;
  font-weight: 300;
  line-height: 33px;
}

/* recent work */

    .hdr{
      display:flex;
      align-items:center;
      justify-content:space-around;
      margin-bottom:24px;
      gap:12px;
    }
    /* Arrow group anchored to the right (visually like screenshot) */
    .nav-arrows{
      display:flex;
      gap:10px;
    }
    .nav-arrows button{
      width:62px; height:62px;
      border-radius:999px;
      border:none;
      background:transparent;
      display:grid; place-items:center;
      cursor:pointer;
      color:#fff;
      transition:transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .nav-arrows button svg {
        width: 62px;
        height: 62px;
    }
    .nav-arrows button:hover{transform:translateY(-1px); }
    .nav-arrows button:active{ transform:translateY(0); }
    .nav-arrows svg{ width:20px; height:20px; }
    .navbar-collapse.collapse{ display: none; }
    .navbar-collapse.collapse.show{ display: block; }

  

    /* Slick overrides: spacing between slides */
    .recent-work{
      margin-top:10px;
      padding-bottom:40px;
    }
    .recent-work .slick-list{ margin:0 calc(var(--gap) * -0.5); }
    .recent-work .slick-slide{ padding:0 calc(var(--gap) * 0.5); }

    /* Card */
    .work-card{
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 22%) border-box,
                 var(--card-bg) padding-box;
      border:none;
      border-radius:var(--radius);
      overflow:hidden;
      position:relative;
      box-shadow: 0 20px 40px rgba(0,0,0,.35);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .work-card:hover{
      transform: translateY(-4px);
    }

    /* Image (keeps consistent height like the mockup) */
    .cover{
        position: relative;
        aspect-ratio: 18 / 20;
        background: #0b0b14;
        overflow: hidden;
        margin: 20px;
        border-radius: 15.34px;
    }
    /* fallback for older browsers – maintains ~16:11 ratio */
    .cover::before{
      content:"";
      display:block;
      padding-top:68.75%;
    }
    .cover img{
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover;
      display:block;
    }

    .card-body{
      padding:16px 16px 22px;
    }
    .project-title{
      margin:0;
      font-weight:800;
      font-size: 38px;
      line-height:1.15;
      letter-spacing:.2px;
    }
    .project-title span{ display:block; }

    /* Slick dots styled subtly (hidden by default on desktop) */
    .recent-work .slick-dots{
      bottom:-32px;
    }
    .recent-work .slick-dots li button:before{
      color:#fff; opacity:.35;
    }
    .recent-work .slick-dots li.slick-active button:before{
      opacity:.95;
    }

    /* complete header */
       .top-bar {
      background: #000;
      color: #fff;
      font-size: 16.98px;
      font-weight:700;
      padding: 6px 0;
      border-bottom: 1.61px solid #64686B;
    }
    .top-bar svg {
      width: 19.506792068481445px;
      height: 19.538042068481445px;
      color: #1abc9c;
      margin-right: 5px;
    }

    .top-bar .left-icons{
          padding-left: 50px;
    }  
    .top-bar .thr{
      width: 1.3058898448944092px;
      height: 27.423686981201172px;
      background-color:#FFFFFF33;
    } 
    .top-bar .social-icons {
     width: 210px;
     display: flex;
     gap: 30px;
     justify-content: center;
     align-items: center;
    }
    .lang-switch svg {
      width: 12px;
      height: 12px;
      position: relative;
      left: 10px;
    }
    .top-bar .me-3 {
      margin-left:1rem !important;
    }
    .navbar {
    background-color: #000000;
    padding: 0px;
    }
    .navbar-nav {
      gap:11px;
    }
    .navbar-nav .nav-link {
      color: #fff !important;
      padding: 12px 20px;
      background-color: transparent;
      width: 108px;
      height: 65px;
      text-align: center;
      line-height: 2.6;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
    }
    .navbar-nav .nav-link.active, 
    .navbar-nav .nav-link:hover {
      background-color: #333;
    }
    
    .logo img {
      height: 115px; /* default for tablet & mobile */
    }
    
    @media (min-width: 992px) { /* desktop aur us se badi screens */
      .logo img {
        height: 65px;
      }
    }

    .lang-flag {
      width: 20px;
      height: 15px;
      object-fit: cover;
    }
    
   /* header */



 /* ===== Hero styles ===== */
.hero{
  background: #0C0C0C;
  color: #fff;
  padding:0;
  position: relative;
  overflow: visible;
  margin-top:24px;
}

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

.hero-deco-clip{
  position: absolute;
  inset: 0;               
  overflow: hidden;       
  pointer-events: none;   
  z-index: 1;             
}
.hero-deco {
  position: absolute;
  pointer-events: none;
  opacity: 0.9;
  z-index: 1;          
}

.hero-deco--tl {
  top: -120px;         
  left: -120px;
  width: min(360px, 40vw);
}

.hero-deco--br {
  right: -63px;
  bottom: -400px;
  width: min(340px, 38vw);
}

/* Eyebrow */
.eyebrow-about{ font-weight: 400; letter-spacing:.02em; color:#fff; opacity:1; }
.eyebrow-line-about{
  display:inline-block; width: 110px; height: 2px; background: #fff;
}

/* Title + sub */
.hero-title{
  font-size: 76.36px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0;
  position: relative;
  z-index: 11;
  text-transform: capitalize;
}
.hero-sub{
  max-width: 46ch;
  color: #fff;
  font-size:19.81px;
  line-height: 1.65;
}

/* Right media card with deep purple radial gradient */
.hero-media{
    background: none;
    border-radius: 0px;
    width: 100%;
    height: 690.1207275390625px;
    position: relative;
    transform: translate(-12%, 20%);
    padding: 0px;
    margin-top: clamp(12px, 3vw, 40px);
    overflow: visible;
}

/* Video fit + subtle overlay */
.hero-video-wrap{ overflow: hidden; }
.hero-video{
  width: 100%; 
  /*min-height: 650px; */
  min-height: max-content; 
  object-fit: cover;
  display: block;
}
.hero-video-wrap::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}


.hero-ring{
  position:absolute; width: 360px; height: 360px;
  opacity:.85;
}
.hero-ring--tl{ top: -40px; left: -40px; }
.hero-ring--br{ right: -40px; bottom: -60px; }

/* results */

.our-results {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;   
    z-index: 1; 
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 402px;
    padding: 80px 0%;
    } 
.our-results .container {position: relative; z-index: 1;}
.overlay {
    background: linear-gradient(265.77deg, rgba(0, 0, 0, 0) -55.33%, #000000 87.67%, #000000 136.47%);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0px;
}
.our-results .title h3 {
    font-size:50.35px;
    font-weight:700;
    line-height:50.35px;
    text-transform: uppercase;
    margin-bottom:34px;
}
.our-results .innter-title h4{
    font-size: 21.58px;
    font-weight:800;
    line-height: 23.74px;
    text-align: center;
}
.slide-container {
    width: 629.4068603515625px;
    height: 232.77967834472656px;
    overflow: hidden;
}
.slider-for {
   width: 629.4068603515625px !important;  
}
.slider-for .back-cover {
    width: 629.4068603515625px !important;
    height: 232.77967834472656px;
    border-radius: 157.35px;
    color: #fff;
    text-align: center;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
}
.slider-nav {
    max-width: 629.4068603515625px !important;
}
.slider-nav .back-thp {
    width: 206px;
    height:206px;
    border-radius:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    border: 1px solid #fff;
    position: relative;
    z-index: 10;
    top:-220px;
    float:right;
    right: 20px;
    background-size: cover;
    background-repeat: no-repeat;
}
.innter-title {
    position: relative !important;
    top: 0px !important;
    left: 0;
}
.innter-title h2 
{
    font-size:21.58px;
    font-weight:700;
    text-align:center;
    line-height:23.74px;
}
  /* Dots styling */
    .custom-dots {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .dot {
      width: 12px;
      height: 12px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.3s;
    }
    .dot.active {
      background-color: #e6007e; /* pink */
    }

    /* Button styling */
    .custom-btn {
      background: #fff;
      border-radius: 50px;
      padding: 10px 25px;
      font-weight: 600;
      border: none;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
 .custom-btn:hover {
    background-color: #fff;
 }
.back-cover, .back-thp {
  background-size: cover;
  background-position: center;
  will-change: opacity, right, background-image;
}

/* services page style */
/* branding-section */
.branding-section { 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 60px 20px; 
}
.branding-section p {
    font-weight: 300;
    line-height: 22px;
    font-size: 16.24px;
}
.branding-section .content-box .d-flex {
  gap: 20px;
}

/* Flex container for top row */
.combine-section { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
}
.text-first {
  font-size: 43px;
  max-width: 704px;
  line-height: 48.87px;
  text-align: left;
  color: #FFFFFF;
}
.what-you-get-section-left .title p {
    max-width: 78%;
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
    margin-bottom: 0px;
        text-align: left;
}

.chlid-image-section img {
    min-height: 403.3897399902344px;
    border-radius: 28.48px;
}
.images-4.row.g-3 {
  margin-top: 10px;
}
/* Left column (image) */
.chlid-image-section { 
  flex: 0 0 40%; 
  max-width: 40%; 
  height: 403px;
}

/* Right column (text) */
.elevate-section { 
  flex: 0 0 60%; 
  max-width: 60%; 
  display: flex; 
  align-items: center; 
}

.content-box {
  position: relative;
  height: 403px;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  background: #020024;
  overflow: hidden;
}

.content-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(49deg, rgba(2,0,36,0.47) 0%, rgba(2,0,36,0.5) 41%, rgba(204,6,127,0.73) 100%);
  opacity: 0;
  transition: opacity 2s ease; /* slow fade */
  z-index: 0;
}

.content-box:hover::before {
  opacity: 1;
}

.content-box > * {
  position: relative;
  z-index: 1; /* text/image upar rahe */
}

/* Bottom 4 images container */
.images-4 { 
  background-color: #1B1B1B; 
  border-radius: 20px; 
  padding-bottom: 10px;
 
}

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


.image-box {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 3px solid transparent;
  background: transparent; /* normal state me border invisible */
  transition: transform 0.3s ease;
}

.image-box img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 2s ease;
}

.image-box .services-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #030405;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: "Raleway";
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  transition: opacity 0.5s ease;
}

.image-box:hover img {
  transform: scale(1.05);
}

.image-box:hover .services-overlay {
  opacity: 0.7;
}

.image-box:hover {
  background: linear-gradient(
    135deg,
    #ffffff,
    #FF6A00,
    #CC067F,
    #FF6A00,
    #ffffff
  ); /* hover par gradient visible */
  background-size: 300% 300%;
  animation: moveGradient 6s linear infinite; /* hover par move kare */
}

@media (min-width: 1025px) {
  .elevate-section p {
    max-width: 70%;
  }
}

@keyframes moveGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* branding end */
/* Solutions In Branding */
  .customers-section{
    width: 100%;
    position:relative;
    padding:60px 20px 75px 20px;
    overflow:hidden;
    isolation:isolate;
    background-color: #0b0d12;
  }
  .customers-title{
   font-size: 82.59px;
   font-weight:700;
   line-height:1.2;
   text-align:center; 
   color: #FFFFFF;
   position: relative;
   top:80px; 
   left: 100px;
  }
    .customers-grid{
       display:flex;
       flex-direction: row;
       grid-template-columns:1.15fr .85fr;
       gap:28px;
       align-items:stretch;
    }
    .media{
        position: relative;
        width: 100%;
        height: 558px;
        border-radius: 0;
        overflow: hidden;
    }
    .media img{
          
          display:block;
          width:100%;
          height:100%;
          object-fit:cover;
          filter: grayscale(100%);
          transition: filter 0.8s ease;
    }
    .media img:hover {
      filter: grayscale(0%);
    }
    .customers-title,
    .customers-content {
      position: relative;
      z-index: 2; /* text hamesha upar */
    }
  .customers-content{
    display:flex;
    width: 65% ;
    flex-direction:column;
    align-self: baseline;
    justify-content:space-between;
    color: #fff;
    padding:6px 0px;
    position: relative;
    top: 90px;
  }
  .bullets{
    margin:0 0 22px; padding:0; list-style:none;
    color:var(--muted); font-size:14px; line-height:1.65; max-width:520px;
  }
  .bullets li{margin:0 0 8px}
  .bullets a{color:var(--muted); text-decoration:none; border-bottom:1px dashed #3c4150}
  .bullets a:hover{color:#e5eaf5}
  .cta{
    display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  }


/* Solutions In Branding End */
/* marquee */
 .marquee-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 238.724609375px;
    overflow: hidden;
    padding: 10px 0;
    white-space: nowrap;
}
.marquee {
    display: inline-block;
    animation: scroll 20s linear infinite;
}
.marquee span {
    display: inline-block;
    margin: 0 40px;
    font-size: 45px;
    font-weight: 600;
    color: #FFFFFF;
}
/* duplicate the content in HTML for continuous scroll */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* -50% works if you duplicate content */
}
.my-marquee {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
/* marquee End*/
/* advantages */
  .container-fluid.py-5.my-sec {
    background-repeat: no-repeat;
    background-size: cover;
}
.myslide{     background: #2E2A40;
    background-repeat: no-repeat;
    background-size: cover;     border-radius: 30px;}
.my-sec .p-4 {
    padding: 1rem 1rem !important;
}
.my-sec .py-5 {
    padding-top: 5rem !important;
    padding-bottom: 4rem !important;
}
.my-sec h4{font-size:65.82px;  text-transform: capitalize; font-weight:500; color:#fff;  margin-bottom: 35px;}
.my-sec h4 span {
    font-weight: 300 !important;
    color: #fff;
}

.my-sec h2{font-size:65.82px;  text-transform: capitalize; font-weight:500; color:#fff;  margin-bottom: 35px;}
.my-sec h2 span {
    font-weight: 300 !important;
    color: #fff;
}



.my-sec p{
    font-size: 17px;
    line-height: 20px;
    color: #fff;
    font-weight: 300;
}
.stat-box {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    min-height: 235px
}
.stat-box h2 {
    font-size: 40px;
    font-weight: 400; 
}
.stat-box h4 {
    font-size: 40px;
    font-weight: 400; 
}
.stat-box h6 {
    font-size: 26.4px;
    font-weight: 400;
    line-height: 30px;
}

.stat-box h3 {
    font-size: 26.4px;
    font-weight: 400;
    line-height: 30px;
}
.my-sec .w-100 {
    max-width: 100%;
    max-height: 486px;
    object-fit: cover;
    border-radius: 9.4px;
}
.container.py-5.myslide {
    margin-bottom: 100px;
}
.myslide .row.align-items-center {
    margin: 10px;
    background: #2E2A40;
    border-radius: 10px;
    padding: 20px;
    margin-right: 50px;
    position: relative;
    padding-bottom: 48px;
    background-repeat: no-repeat !important;
    background: url(after-me.png);
    background-size: 99% 100%;
    background-position: 10px 0px;
}
.myslide .swiper.mySwiper {
    padding-bottom: 15px;
}
.myslide .swiper.mySwiper {
    /*border: 1px solid #fff;
    border-radius: 11px;*/
}
.myslide .row.align-items-center img {
    border-radius: 26px;
}

.myslide .swiper-button-prev,
.myslide .swiper-button-next {
  width: 45px;
  height: 45px;
  background-color: #CC067F;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  position: relative;
}
.myslide .swiper-button-prev::after,
.myslide .swiper-button-next::after {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
}
#logoCarousel .logo-item img {
    width: 100%;
    max-width: 100%;
    }
	
#logoCarousel .logo-item img:hover {
      filter: grayscale(0%);
      transform: scale(1.05);
    }
	
#logoCarousel span.carousel-control-prev-icon {
    background: url(arrow-left.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 5rem;
    height: 5rem;
    opacity: 1 !important;
    z-index: 222;
}
#logoCarousel span.carousel-control-next-icon {
    background: url('arrow-right.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 5rem;
    height: 5rem;
    opacity: 1 !important;
    z-index: 222;
}
#logoCarousel {
    background: url('logo-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;     padding: 6rem 0rem !important;
}
#logoCarousel .carousel-control-next, #logoCarousel .carousel-control-prev {
    opacity: 1;
}
  /* Custom pagination dots */
    .carousel-indicators [data-bs-target] {
      background-color: #8E8E8E;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin: 0 5px;
      transition: all 0.3s ease;
    }
    .carousel-indicators .active {
      background-color: #CC067F;
      width: 14px;
      height: 14px;
    }
	
	#logoCarousel .carousel-control-next, #logoCarousel .carousel-control-prev {
     width: 96.8427734375px;
     top: 40%;
     height: 96.8427734375px;
     background: #FFFFFF;
     border-radius: 100%;
     box-shadow: 0px 4px 8.5px 0px #00000040;
    }
	
	#logoCarousel .carousel-control-prev {
    left: -150px;
    }
    #logoCarousel .carousel-control-next {
        right: -150px;
    }

.btn-white {
    background: #000;
    color: #fff;
    border-radius: 30px;
    border: none;
    font-size: 16px;
    width: 200px;
}
.btn-white:hover{background: #CC067F; color:#fff;}
.btn-red{    background: #CC067F;
    color: #fff;
    border-radius: 30px;
    border: none;
    font-size: 16px;
    width: 200px;
}
/* advantages END */
/* why choose branding */
.whychoosebranding{padding:70px 0px !important;}
.whychoosebranding  .title h2 {font-weight: 600;}
.whychoosebranding  .text-small {font-weight: 400;font-size: 20.28px;}
.whychoosebranding  .mb-10 {margin-bottom: 60px;}
.whychoosebranding  .point {margin-bottom: 53px;}
.whychoosebranding  .point .title h3 {font-size: 27.85px; font-weight: 700;color: #fff; margin-bottom: 10px;}
.whychoosebranding  .point .title p {font-size: 20.03px; font-weight: 400;color: #fff; line-height: 24.09px; max-width: 90%;}
/* why choose branding end */
/* about branding  */
.about-brand {background-repeat: no-repeat;background-size: cover; border-radius: 30px;padding: 80px;position: relative;}
.about-brand .text-small {font-weight: 300;font-size:30px;}
.about-brand .title h3 {font-size: 39.34px; font-weight: 600;}
.about-brand .right-p  {text-align: right;line-height:21.91px;font-size: 13.14px; font-weight:200;}
.about-brand .swiper-slide .title p {font-size: 14.84px; line-height: 22.8px;font-weight: 300;}
/*.about-brand .btn {width: 150px;}*/
.about-brand .btn {width: max-content;}
.myslide .swiper-button-prev,
.myslide .swiper-button-next {
  width: 45px;
  height: 45px;
  background-color: #CC067F;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  position: relative; 
}

.myslide .swiper-button-prev::after,
.myslide .swiper-button-next::after {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
}
.myslide .row.align-items-center {
    margin: 10px;
    background: #2e2a40;
    border-radius: 10px;
    padding: 20px;
    margin-right: 50px;
    position: relative;
    padding-bottom: 48px;
    background-repeat: no-repeat !important;
    background: url('http://127.0.0.1:8000/assets/images/home_assets/services/after-me.png');
    background-size: 99% 100%;
    background-position: 10px 0px;
}
.myslide .swiper.mySwiper {
    padding-bottom: 15px;
}

.myslide .row.align-items-center img {
    border-radius: 26px; 
}
.mySwiper  {
    padding: 30px;
    overflow: hidden;
    border-radius: 24.75px;
    position: relative;
    right: -55px;
    top: 25px;
}
.swiper-slide {
    margin-left: 0px !important;
}
.mySwiper-bg{
    border-radius: 10px;
    position: relative !important;
    padding-bottom: 48px !important;
    background-repeat: no-repeat !important;
    background-size: 99% 100% !important;
    background-position: 8px 0px !important;
}
.swiper-slide.swiper-slide-active {
    padding: 40px;
}

.about-brand .swiper-button-prev,
.about-brand .swiper-button-next {
  width: 85px;
  height: 85px;
  padding: 20px;
  background-color: #CC067F;
  border-radius: 9.93px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  position: relative; 
  top: 50px;
  left: -65px;
}

.about-brand .swiper-button-prev::after,
.about-brand .swiper-button-next::after {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
}
.about-brand .swiper-button-prev::after, .about-brand .swiper-button-next::after {display:none}
.about-brand .swiper-button-prev::after, .about-brand .swiper-button-next::after {display:none}
.swiper-button-next svg, .swiper-button-prev svg {
    width: 65% !important;
}

.swiper-slid h4 {
    font-weight: 400;
}


/*
/* our clients */
.our-clients-logo {
    background-size: cover;
    background-repeat: no-repeat;
    padding: 60px;
     
}
/* our clients end */

/* ----------- Process Section ----------- */
.process-section {
  position: relative;
  text-align: center;
  background-size: cover;
  color: #fff;
  overflow: hidden;
  padding: 60px;
  background-position-y: 0;
  background-repeat: no-repeat;
  height: 160vh;
}
.process-section .container {
  position: relative;
  z-index: 1;
}

.section-title {
  font-size: 100px;
  font-weight: 700;
  color: #ff007f;
  margin-bottom: 15px;
}

.section-description {
  font-size: 16px;
  max-width: 700px;
  margin: 0 auto 30px;
  line-height: 1.6;
}

/* ----------- Button ----------- */
.process-btn {
  background: #fff;
  color: #000;
  padding: 12px 25px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 80px;
  transition: all 0.3s ease;
  font-size: 16px;
}

.process-btn:hover {
  background: #ff007f;
  color: #fff;
}

/* ----------- Process Layout ----------- */
.process-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  height: 100dvh;
}

/* Center Image */
.center-image {
  position: absolute;
  top: -50%;
  left: 0%;
  width: 100%;
  height: 100%;
  transform: scale(0.7);
}


.center-image:before {
  content: "";                     /* required */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: red;
}
.center-image img {
  width: 100%;
  max-width: 100%;
}

/* Process Cards */
.process-card {
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  width: 310px;
}

.process-card h5 {
  color: #ffffff;
  margin-bottom: 10px;
  font-size: 23.4px;
}

.process-card p {
  color: #FFFFFF;
  font-size: 14px;
  line-height: 21px;
}

/* ----------- Positioning Cards for Desktop ----------- */
.step-1 {
  position: absolute;
  top: 15px;
  right: 150px;
}

.step-2 {
  position: absolute;
  top: 128px;
  left: 150px;
  text-align: right;
}

.step-3 {
  position: absolute;
  top: 216px;
  right: 150px;
}

.step-4 {
  position: absolute;
  top: 340px;
  left: 150px;
  text-align: right;
}

.step-5 {
  position: absolute;
  bottom: 395px;
  right: 150px;
}



/*  */
.xp-section{
  position:relative; padding:60px 20px 600px 20px; text-align:center;
  background:url('https://dmbrick.ecomsellr.com/wp-content/uploads/2025/08/Screenshot-2025-08-26-012723-scaled.webp') center/cover no-repeat;
}
.xp-overlay{position:absolute; inset:0;}
.xp-container{position:relative; max-width:var(--maxw); margin:0 auto; z-index:2;}
.xp-container h2{
  font-size:50px; font-weight:800; margin-bottom:40px; color:var(--heading);
}
.xp-container h4{
  font-size:50px; font-weight:800; margin-bottom:40px; color:var(--heading);
}
.xp-list{
  display:flex; flex-wrap:wrap; justify-content:center; gap:24px 40px; max-width:1200px; margin:0 auto;
}
.xp-item{
  display:flex; align-items:justify; gap:10px; font-weight:600; font-size:24px; color:#fff; max-width:900px;
}
.xp-item .icon {
  display: flex;
  width: 33.173519134521484px;
  height: 33.173519134521484px;
  border-radius: 50%;
  background: #CC067F;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  flex-wrap: nowrap;
  align-content: stretch;
  flex-direction: row;
}

section.wrap button.newsletter-btn:hover {
  background: #b30974;
}
section.wrap button.newsletter-btn {
  background: #d10b89;
  color: #fff;
}

.wrap{max-width:var(--maxw); margin:60px auto; padding:0 24px; height:40vh; display:flex; flex-direction:column; justify-content:center;}
.eyebrow{font-size:11px; color:var(--muted); margin-bottom:16px; text-align: start;}
.form-row{display:flex; gap:16px; align-items:flex-start;}
.field{flex:1 1 0; display:flex; flex-direction:column; min-width:180px}
.label{position:relative}
input[type="text"], input[type="email"],input[type="tel"]{
    width:100%; height:var(--field-h); padding:10px 12px; font-family:inherit; font-size:14px; color:var(--text);
    border:1px solid var(--border); border-radius:var(--radius); outline:none; background:#fff;
}
.tel{
      width:100%; height:43px; padding:10px 12px; font-family:inherit; font-size:14px; color:var(--text);
    border:1px solid var(--border); border-radius:var(--radius); outline:none; background:#fff;
}
input:focus{border-color:#8d8d94; box-shadow:0 0 0 2px rgba(0,0,0,.03)}
.hint{margin-top:6px; font-size:11px; color:var(--muted)}
.newsletter-btn{
    height:var(--field-h); margin-top:0; flex:0 0 auto; padding:0 28px; border:none; border-radius:0; cursor:pointer;
    background:var(--newsletter-btn); color:#fff; font-weight:700; letter-spacing:.04em; font-size:14px; align-self:flex-start;
}
.newsletter-btn:hover{background:var(--newsletter-btn-hover)}
/* Required asterisk */
.req::after{content:" *"; color:var(--text); opacity:.6}
/* Responsive */

/* newslatter */
.newslatter {
     display: none;
    justify-content: center;
    align-items: center;
    min-height: 289.2690124511719px;
    padding: 20px;
}
.newslatter h2 {
    font-size: 27.71px;
    line-height: 41.57px;
    margin-bottom: 25px;
}
.newslatter h6 {
    font-size: 27.71px;
    line-height: 41.57px;
    margin-bottom: 25px;
}
.form-row{
    display:flex;
    gap:16px;
    align-items:flex-start;
}
.field{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    min-width: 310.32232666015625px;
}
.label{
    position:relative;
}
input[type="text"], input[type="email"], input[type="tel"]{
    width: 100%;
    height: 43.302799224853516px;
    padding: 10px 12px;
    font-size: 16.17px;
    color: #000;
    border-radius: 0px;
    outline: none;
    background: #fff;
    border: 0.72px solid #2E2E2E;
}
input:focus{border-color:#8d8d94; box-shadow:0 0 0 2px rgba(0,0,0,.03)}
.hint{margin-top:6px; font-size:11px; color:var(--muted)}
.newsletter-btn{
    width: 313.9452819824219px;
    height: 43.302799224853516px;
    margin-top: 0;
    flex: 0 0 auto;
    padding: 0 28px;
    border: 1px solid #CC067F;
    border-radius: 0;
    background: #CC067F;
    color: #fff;
    font-weight: 600;
    letter-spacing: .04em;
    font-size: 18.48px;
    align-self: baseline;
}
.newsletter-btn:hover{background:#CC067F;}
/* Required asterisk */
.req::after{content:" *"; color:var(--text); opacity:.6}



/* home about us */
.about-hero{ background:#fff; 
    padding-top: 180px !important;
    padding-bottom: 100px !important;
}
.about-hero h1 {
    font-weight:700;
}
.about-hero p {
 font-size:18.68px;
 line-height:29.5px;
 font-weight:300;
}
.about-us-small {
    font-size:19.07px;
}
.about-us-small {
    position: relative;
    left: 20px;
}
.about-hero{ background:#fff; }
.tracking-wider{ letter-spacing:.12em; }
.happay-customer .h3 {
    font-size: 42.05px;
}
.happay-customer .text-secondary {
    font-size: 14px;
}
/* Play button */
.btn-about {
    /*width: 250.57554626464844px;*/
    width: auto;
    height: 52.572444915771484px;
    line-height: 32px;
    font-size: 19.05px;
    font-weight: 700;
      border: 0.76px solid #000000 !important;
}
.btn-how-itworks {
    line-height: 32px;
    font-size: 19.05px;
    font-weight: 700;  
}
.btn-play .play-ring{
  width:44px; height:44px; border-radius:50%;
  display:inline-block; position:relative; flex:0 0 44px;
  background:
    radial-gradient(circle at 50% 50%, #ff4ea2 0 34%, #fff0 35%),
    radial-gradient(circle at 50% 50%, #fff0 0 56%, #8b2cf5 57% 100%);
  outline:6px solid #ff4ea23d;
}
.btn-play{ color:#111; }
.btn-play:hover{ opacity:.9; }

/* Right column dashed grid container */
.media-grid{
  max-width: 640px;         /* keep it tidy in the column */
  padding: 0;
  border-radius: 0;
  border:1px dashed rgba(0,0,0,.15);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 32px);
}

/* Stage height scales with viewport */
.media-stage{
  position: relative;
  min-height: clamp(360px, 52vw, 640px);
}
.media-stage img{ object-fit: cover; }

/* Decorative images inside .bubble/.deco-ring fill their wrappers */
.adjust-size{
  position: static;      /* was absolute – makes it fluid */
  width: 100%;
  height: auto;
  display: block;
}

/* Overlapped images (desktop defaults) */
.back-img{
  /*width: 50%;*/
  /*position:absolute; top: 6%; left: 8%;*/
  /*aspect-ratio: 3/4;*/
    width: 44%;
    position: absolute;
    top: 10%;
    left: 4%;
    aspect-ratio: 3 / 4;
}
.front-img{
  /*width: 50%;*/
  /*position:absolute; top: 22%; right: 8%;*/
  /*aspect-ratio: 3/4;*/
    width: 44%;
    position: absolute;
    top: 25%;
    right: 4%;
    aspect-ratio: 3 / 4;
}

/* Decorative bubbles */
.bubble{
  position:absolute; border-radius:50%;
  background: transparent;  /* image used instead */
}
.bubble-lg{
 width: 160px;
 bottom: -5%;
 left: -6%;
}
.bubble-sm{ width:18px; height:18px; bottom:12%; left:30%; background:#ff4ea2; }
.bubble-mini{ width:10px; height:10px; bottom:20%; left:36%; background:#ff4ea2; }

/* Top-right ring decoration */
.deco-ring{
  position:absolute; top:-28px; right:-6px;
  width:140px; height:140px;
  display:grid; place-items:center;
  border-radius:50%;

}

/* Base mega menu styles */
.mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-list li {
  position: relative;
}

.mega-list li a {
  display: block;
  padding: 8px 12px;
  color: #fff; /* change as per theme */
  text-decoration: none;
}

/* Submenu container (default hidden + animation setup) */
.mega-sub-col {
  display: block; /* keep block for animation, hide with opacity */
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 110%; /* start a little right */
  background: #1a1a1a;
  padding: 10px;
  min-width: 250px;
  border-radius: 0px;
  z-index: 99;

  /* animation */
  transform: translateX(-20px); /* shift left initially */
  transition: all 0.3s ease-in-out;
  border-top:4px solid #c21f54;
}

/* Submenu list */
.mega-sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-sub-list li a {
  padding: 6px 10px;
  display: block;
  color: #fff;
  font-size: 14px;
}

/* Hover effect – smooth slide in */
.has-submenu:hover > .mega-sub-col {
  opacity: 1;
  visibility: visible;
  left: 100%; /* final position */
  transform: translateX(0); /* move to natural place */
}

@media (max-width: 1024px) {
    
 
  .mega-sub-col {
    position: static;
    opacity: 0;
    visibility: hidden;
    max-height: 0;          /* collapsed */
    overflow: hidden;       /* hide content */
    transform: translateY(-10px);
    background: #222;
    margin-top: 0px;
    border-radius: 0px;
    width: 100%;
    padding: 0px;
    transition: all 0.3s ease-in-out;
  }

  .has-submenu:hover > .mega-sub-col {
    opacity: 1;
    visibility: visible;
    max-height: 520px;      /* enough space for submenu items */
    transform: translateY(0);
  }

  .mega-sub-list li a {
    padding: 10px;
    font-size: 34px;
  }
}

@media (max-width: 576px) {
  .mega-sub-list li a {
    font-size: 14px;
    padding: 8px;
  }

  .mega-sub-col {
    margin-top: 0px;
    width: 100%;
    padding: 0px;
  }
}

.services-overlay h2{
    font-size: 38px;
}

    h2.customers-background-title {
  position: absolute;
  top: 180px;
  right: 20px; /* adjust as needed */
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1px #242424;
  text-transform: uppercase;
  background: transparent;
  font-size: 130px; /* default for large screens */
  line-height: 1.1;
  white-space: nowrap;
  word-spacing: -20px;
  z-index: -1; /* keep it behind content */
}

/* XXL Screens (1600px+) */
@media (min-width: 1600px) {
  h2.customers-background-title {
    font-size: 135px;
    top: 80px;
    right: 330px;
  }
}

/* Large screens (1200px – 1599px) */
@media (max-width: 1599px) {
  h2.customers-background-title {
    font-size: 120px;
    top: 95px;
    right: 100px
  }
}

/* Medium screens (992px – 1199px) */
@media (max-width: 1199px) {
  h2.customers-background-title {
    font-size: 80px;
    top: 45px;
    right: 55px;
  }
}

/* Tablets (768px – 991px) */
@media (max-width: 991px) {
  h2.customers-background-title {
    font-size: 80px;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
}

/* Small tablets & large phones (576px – 767px) */
@media (max-width: 767px) {
  h2.customers-background-title {
    font-size: 60px;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
}

/* Mobile phones (up to 575px) */
@media (max-width: 575px) {
  h2.customers-background-title {
    font-size: 40px;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
}

.challenge-accordion h4 {
        font-weight: 500;
         font-size: 50px;
             text-transform: uppercase;
}

/*our process section */

.our-process .title {
    max-width: 60%;
    margin: 0 auto;
    margin-bottom: 30px;
}

.our-process .title h2 {
    font-size: 64px;
    color: #CC067F;
}

.our-process .title h3 {
    font-size: 64px;
    color: #CC067F;
}

.our-process .title p {
    max-width: 100%;
}

.timeline-body p {
    font-size: 18px;
    line-height: 37px;
}

.timeline {
    position: relative;
    padding: 4px 0 0 0;
    margin-top: 22px;
    list-style: none;
}

.timeline>li:nth-child(even) {
    position: relative;
    margin-bottom: 50px;
    height: 180px;
    right: -100px;
}

.timeline>li:nth-child(odd) {
    position: relative;
    margin-bottom: 50px;
    height: 180px;
    left: -100px;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* CSS for tablets */
  .timeline>li:nth-child(even){
      height: 30px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* CSS for desktops */
  .timeline>li:nth-child(even){
      height: 80px;
  }
}

.timeline>li:before,
.timeline>li:after {
    content: " ";
    display: table;
}

.timeline>li:after {
    clear: both;
    min-height: 170px;
}

.timeline>li .timeline-panel {
    position: relative;
    float: left;
    width: 41%;
    padding: 0 20px 20px 30px;
    text-align: right;
}

.timeline>li .timeline-panel:before {
    right: auto;
    left: -15px;
    border-right-width: 15px;
    border-left-width: 0;
}

.timeline>li .timeline-panel:after {
    right: auto;
    left: -14px;
    border-right-width: 14px;
    border-left-width: 0;
}

.timeline>li .timeline-image {
    z-index: 100;
    position: absolute;
    left: 50%;
    border: 6px solid #d01277;
    border-radius: 100%;
    background-color: transparent;
    box-shadow: none;
    width: 120px;
    height: 120px;
    margin-left: -30px;
    margin-top: 20px;
}

.timeline>li .timeline-image img {
    width: 100%;
    position: relative;
    border: 4px solid #0b011b;
    border-radius: 100%;
}

.timeline>li .timeline-image h4 {
    margin-top: 12px;
    font-size: 10px;
    line-height: 14px;
}

.timeline>li.timeline-inverted>.timeline-panel {
    float: right;
    padding: 0 30px 20px 20px;
    text-align: left;
}

.timeline>li.timeline-inverted>.timeline-panel:before {
    right: auto;
    left: -15px;
    border-right-width: 15px;
    border-left-width: 0;
}

.timeline>li.timeline-inverted>.timeline-panel:after {
    right: auto;
    left: -14px;
    border-right-width: 14px;
    border-left-width: 0;
}

.timeline>li:last-child {
    margin-bottom: 0;
}

.timeline .timeline-heading h4 {
    margin-top: 22px;
    margin-bottom: 10px;
    padding: 0;
    color: #fff;
    font-size: 44.04px;
}

.timeline .timeline-heading h4.subheading {
    margin: 0;
    padding: 0;
    text-transform: none;
    font-size: 18px;
    color: #fff;
}

.timeline .timeline-body>p,
.timeline .timeline-body>ul {
    margin-bottom: 0;
    color: #fff;
}

/*Style for even div.line*/
.timeline>li:nth-child(odd) .line:before {
    content: "";
    position: absolute;
    top: 94px;
    bottom: 0;
    left: 790px;
    width: 4px;
    height: 192px;
    background-color: #fff;
    -ms-transform: rotate(-44deg);
    /* IE 9 */
    -webkit-transform: rotate(-44deg);
    /* Safari */
    transform: rotate(-44deg);
    box-shadow: 0 0 5px #d01277;
}

/*Style for odd div.line*/
.timeline>li:nth-child(even) .line:before {
    content: "";
    position: absolute;
    top: 72px;
    bottom: 0;
    left: 556px;
    width: 4px;
    height: 215px;
    background-color: #d01277;
    -ms-transform: rotate(44deg);
    /* IE 9 */
    -webkit-transform: rotate(44deg);
    /* Safari */
    transform: rotate(44deg);
    box-shadow: 0 0 5px #d01277;
}

@media (max-width: 1440px) {
    
    .howitwork{
        padding:81px 0px 0px !important;
    }
    .timeline>li:nth-child(odd) {
        left: 0px;
    }

    .timeline>li:nth-child(even) {
        right: 0px;
    }

    .timeline>li:nth-child(odd) .line:before {
        display: none;
        left: 677px;
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .timeline>li:nth-child(even) .line:before {
        display: none;
        left: 676px;
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@media (max-width: 1200px) {
    .timeline>li:nth-child(odd) .line:before {
        content: "";
        position: absolute;
        top: 94px;
        bottom: 0;
        left: 54%;
        width: 4px;
        height: 192px;
        background-color: #fff;
        -ms-transform: rotate(344deg);
        -webkit-transform: rotate(344deg);
        transform: rotate(344deg);
        box-shadow: 0 0 5px #d01277;
    }

    .timeline>li:nth-child(even) .line:before {
        content: "";
        position: absolute;
        top: 72px;
        bottom: 0;
        left: 556px;
        width: 4px;
        height: 215px;
        background-color: #d01277;
        -ms-transform: rotate(19deg);
        -webkit-transform: rotate(19deg);
        transform: rotate(19deg);
        box-shadow: 0 0 5px #d01277;
    }

    .timeline>li:nth-child(odd) {
        left: 0px;
    }

    .timeline>li:nth-child(even) {
        right: -40px;
    }
}

/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {
    .img-mob-2 {
        top: 75px;
    }

    .img-mob-3 {
        top: 115px;
    }

    .img-mob-4 {
        top: 165px;
    }

    .img-mob-5 {
        bottom: -160px;
    }

    .timeline>li:nth-child(even) {
        margin-bottom: 0px;
        min-height: 0px;
        right: 0px;
    }

    .timeline>li:nth-child(odd) {
        margin-bottom: 0px;
        min-height: 0px;
        left: 0px;
    }

    .timeline>li:nth-child(even) .timeline-image {
        left: 0;
        margin-left: 0px;
    }

    .timeline>li:nth-child(odd) .timeline-image {
        left: 690px;
        margin-left: 0px;
    }

    .timeline>li:nth-child(even) .timeline-panel {
        width: 76%;
        padding: 0 0 20px 0px;
        text-align: left;
    }

    .timeline>li:nth-child(odd) .timeline-panel {
        width: 70%;
        padding: 0 0 20px 0px;
        text-align: right;
    }

    .timeline>li .line {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .img-mob-2 {
        top: 115px;
    }

    .img-mob-3 {
        top: 205px;
    }

    .img-mob-4 {
        top: 310px;
    }

    .img-mob-5 {
        bottom: -380px;
    }

    .timeline>li:nth-child(even) {
        margin-bottom: 0px;
        min-height: 0px;
        right: 0px;
    }

    .timeline>li:nth-child(odd) {
        margin-bottom: 0px;
        min-height: 0px;
        left: 0px;
    }

    .timeline>li:nth-child(even) .timeline-image {
        left: 0;
        margin-left: 0px;
        margin-top:-40px;
    }

    .timeline>li:nth-child(odd) .timeline-image {
        left: 520px;
        margin-left: 0px;
    }

    .timeline>li:nth-child(even) .timeline-panel {
        width: 70%;
        padding: 0 0 20px 0px;
        text-align: left;
    }

    .timeline>li:nth-child(odd) .timeline-panel {
        width: 70%;
        padding: 0 0 20px 0px;
        text-align: right;
    }

    .timeline>li .line {
        display: none;
    }
}

/* Custom, iPhone Retina */
@media only screen and (max-width: 767px) {
    .timeline>li:nth-child(even) {
        margin-bottom: 0px;
        min-height: 0px;
        right: 0px;
    }

    .timeline>li:nth-child(odd) {
        margin-bottom: 0px;
        min-height: 0px;
        left: 0px;
    }

    .timeline>li .timeline-image {
        position: static;
        width: 150px;
        height: 150px;
        margin-bottom: 0px;
    }

    .timeline>li:nth-child(even) .timeline-image {
        left: 0;
        margin-left: 0;
       
    }

    .timeline>li:nth-child(odd) .timeline-image {
        float: right;
        left: 0px;
        margin-left: 0;
    }

    .timeline>li:nth-child(even) .timeline-panel {
        width: 100%;
        padding: 0 0 20px 14px;
    }

    .timeline>li:nth-child(odd) .timeline-panel {
        width: 100%;
        padding: 0 14px 20px 0px;
    }

    .timeline>li .line {
        display: none;
    }
}

/* Small Devices, Tablets */
@media (min-width: 1024px) and (max-width: 1199px) {
    .img-mob-2 {
        top: 75px;
    }

    .img-mob-3 {
        top: 115px;
    }

    .img-mob-4 {
        top: 165px;
    }

    .img-mob-5 {
        bottom: -160px;
    }
}
.container-hero-inner{
    position:relative; 
    z-index:1;
    padding:0;
}
.mySwiper .title button.btn.btn-primary.btn-sm{
    display:none;
}


.btn-lg {
  position: relative;
  background-color: #fff !important;
  /*border-color: #fff !important;*/
  color: #000;
  border-radius: 38.74px;
  width: -webkit-fill-available;
  max-width:340px;
  font-weight: 700;
  overflow: hidden;
  z-index: 1;
  padding: 10px 20px;
  transition: all 0.4s ease;
  border:0.76px solid #000000 !important;
}

.wt-icon{
    height:40px;
    width:40px;
}