/*

 Theme Name:   Astra Child

 Template:     astra

 Version:      1.0.0



*/



  /* Add your custom CSS below */

  header .custom-logo-link img {

	max-width: 250px;

	height: auto;

}

.main-header-bar .main-header-menu .menu-item {

  margin: 0 1.5rem; 

}

body.home .main-header-bar {

  background-color: transparent !important;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 9999;

  box-shadow: none !important; 

}

body.home .main-header-bar.sticky-header {

  background-color: transparent !important;

}

body.home .site-content > .ast-container {

  padding-top: 80px !important;

}

.main-header-bar,

.main-header-bar.sticky-header {

  border-bottom: none !important;

  box-shadow: none !important;

}
.hero-content h1 {
  font-size: 2.5rem;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 1.8rem;
  }
}

@media (max-width: 921px) {

	.ast-builder-menu-mobile 

  .main-navigation 

  .main-header-menu {

    top:    0 !important;

    bottom: 0 !important;

    height: auto !important;

    max-height: 100vh !important;

    overflow-y: auto !important;

  }

body.home 

  .ast-builder-menu-mobile 

  .main-navigation 

  .main-header-menu {

    top: 82px !important;                         

    max-height: calc(100vh - 82px) !important;    

  }

}

.hero-section {
  background-color: #ffffff;
  padding: 4rem 2rem;
}



.hero-content {

   display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    margin-top: 2rem;

    gap: 12rem; 

    flex-wrap: wrap;

}

.video-wrapper {

    width: 100%;

    max-width: 500px;

    aspect-ratio: 16 / 9;

    margin-top: -40px;

    overflow: hidden;

    border-radius: 8px;

}

.video-wrapper iframe {

  width: 100%;

    height: 100%;

    border: none;

    display: block;

}



.text-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    flex: 1;

  max-width: 600px;

   min-width: 300px;

}



.text-content h1 {

  font-size: 2.75rem;

  line-height: 1.2;

  font-weight: 700;

  margin-bottom: 1rem;

}



.text-content p {

  font-size: 1.125rem;

  line-height: 1.6;

  margin-bottom: 1.5rem;

}



.hero-content .cta-button {

  display: inline-block;

  padding: 0.75rem 1.5rem;

  font-size: 1rem;

  background-color: #ff0000;

  color: #fff;

  text-decoration: none;

  border-radius: 25px;

  transition: background 0.3s ease;

   margin-left: -100px;

}



.cta-button:hover {

  background-color: #cc0000;

  color: white;

}



@media (max-width: 768px) {

    .hero-section {

    padding-top: 0 !important;

    margin-top: 0 !important;

  }

   .container {

    padding-top: 0 !important;

    margin-top: 0 !important;

  }

  .hero-content {

    display: flex;

    flex-direction: row;

    align-items: center;

    flex-wrap: wrap;

    justify-content: center;

    text-align: center;

    gap: 3.5rem;

     margin: 0 !important;

  }



 .text-content {

    order: 2;

    margin-top: -2.5rem;

  }



  .video-wrapper {

    order: 1;

    margin-bottom: 1.5rem;

  }

.hero-content .text-content {

    order: 2;

  }

   .hero-content .video-wrapper {

    order: 1;

  }

 .hero-content .cta-button {

    order: 3;

    margin-top: 0.5rem;

    margin-left: 0.1rem;

  }

}

@media (min-width: 1024px) {

  .hero-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: auto auto;

    gap: 2rem 7rem;

    align-items: start;

  }

  .video-wrapper {
    grid-column: 1 / 2;
    grid-row: 1 / span 2; /* spans both text rows */
    max-width: 100%;
    aspect-ratio: 16/9;
    margin-top: 1rem;
  }

    .hero-content h1 {

    grid-column: 2 / 3;

    grid-row: 1 / 2;

    text-align: left;

  }

   .text-content {

    grid-column: 2 / 3;

    grid-row: 2 / 3;

    text-align: left;

  }

    .cta-button {

    margin-top: 1.25rem;

  }

}

@media (prefers-reduced-motion: no-preference) {

  .hero-content .video-wrapper {

    animation: slideInFromLeft 0.8s ease-out forwards;

  }



  .hero-content h1 {

    animation: slideInFromRight 0.8s ease-out forwards;

  }

   .hero-content .text-content {

    animation: slideInFromRight 0.8s ease-out forwards;

    animation-delay: 0.1s;

  }

}

.hero-content .video-wrapper,

.hero-content h1,

.hero-content .text-content {

  opacity: 1;

}

@keyframes slideInFromLeft {

  0% { opacity: 0; transform: translateX(-60px); }

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

}

@keyframes slideInFromRight {

  0% { opacity: 0; transform: translateX(60px); }

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

}

.hero-content .video-wrapper,

.hero-content h1,

.hero-content .text-content {

  opacity: 1;

  will-change: transform, opacity;

}

@media (prefers-reduced-motion: no-preference) {

  .hero-content .video-wrapper,

  .hero-content h1,

  .hero-content .text-content {

    opacity: 0;

  }

   .hero-content .video-wrapper {

    animation: slideInFromLeft 0.8s ease-out forwards;

  }

    .hero-content h1 {

    animation: slideInFromRight 0.8s ease-out forwards;

  }

    .hero-content .text-content {

    animation: slideInFromRight 0.8s ease-out forwards;

    animation-delay: 0.1s;

  }

}
.portfolio-hero-section .portfolio-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin: 4rem auto;
  padding: 0 1rem;
  max-width: 480px;
}
.portfolio-hero-section .video-wrapper {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
  border-radius: 10px;
  overflow: hidden;
}
.portfolio-hero-section .video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
.portfolio-hero-section .text-content {
  width: 100%;
  text-align: justify;
}
.portfolio-hero-section .text-content p {
  margin-bottom: 1.5rem;
}
.portfolio-hero-section .cta-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #ff0000;
  color: #fff;
  border-radius: 25px;
  text-decoration: none;
  font-weight: normal;
}
.portfolio-hero-section .cta-button:hover {
  background-color: #cc0000;
  color: #fff;
}
.portfolio-carousel {
  padding: 2rem 0;
}
.portfolio-carousel .swiper-slide {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  }
  .swiper-button-next,
.swiper-button-prev {
  color: #333;
  }
@media (min-width: 768px) {
  .portfolio-hero-section .portfolio-hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 2rem;
    align-items: start;     
    margin: 4rem auto 0;
    max-width: none;         
  }
   .portfolio-hero-section .video-wrapper {
    grid-column: 1 / 2;
    grid-row: 1 / span 2;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 2.5rem;
    margin-left: 0.1rem;
    align-self: center;
    border-radius: 10px;
    overflow: hidden;
    max-width: 500px;             
    padding-top: 0;          
    height: auto;
    box-shadow: 0 4px 5px 7px rgba(0, 0, 0, 0.08), 0 2px 3px 5px rgba(0, 0, 0, 0.04);
    opacity: 0;
    transform: translateX(-50px);
    animation: slideInFromLeft 0.8s ease-out forwards;
    animation-delay: 0.2s;            
  }
  .portfolio-hero-section .video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block; 
  }
  .portfolio-hero-section .portfolio-hero-content > h1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    margin: 0;               
    font-size: 2.5rem;
    line-height: 1.2;
    opacity: 0;
    transform: translateX(50px);
    animation: slideInFromRight 0.8s ease-out forwards;
    animation-delay: 0.2s;
    text-align: center;
  }
  
  .portfolio-hero-section .text-content {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background: #fff;
    box-shadow: 0 0 10px 12px rgba(0, 0, 0, 0.05);
    border-radius: 25px;
    padding: 2rem;
    opacity: 0;
    transform: translateX(50px);
    animation: slideInFromRight 0.8s ease-out forwards;
    animation-delay: 0.2s;
  }
   .portfolio-hero-section .cta-button {
    margin-top: 1.5rem;

     @keyframes slideInFromLeft {
      from {
      opacity: 0;
      transform: translateX(-50px);
    }
      to {
      opacity: 1;
      transform: translateX(0);
    }
  }
   @keyframes slideInFromRight {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
    }
  }
}
@media (min-width: 992px) {
  .portfolio-hero-section {
     padding-top: 10px;
  }
.portfolio-hero-container {
 display: flex;
    flex-direction: row;
    align-items: center;          
    justify-content: center;      
    gap: 3rem;                    
    max-width: 1200px;            
    margin: 0 auto;               
    box-sizing: border-box;
    padding: 0 1rem;              
  }
  .portfolio-hero-container .video-wrapper {
     order: 1;
    flex: 0 0 480px;              
    max-width: 480px;
    position: relative;
    padding-top: 56.25%;          
    overflow: hidden;
    border-radius: 8px;
  } 
   .portfolio-hero-container .video-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
  .portfolio-hero-container .hero-title {
    order: 2;
    flex: 1 1 400px;              
    max-width: 400px;
  }
  .portfolio-hero-container .hero-title h1 {
    margin-bottom: 1rem;
    line-height: 1.2;
  }
  .portfolio-hero-container .text-content {
    order: 3;
    flex: 1 1 400px;
    max-width: 400px;
    text-align: justify;
    padding: 1.5rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    margin-top: 0;                
  }
   .portfolio-hero-container .text-content .cta-button {
    display: inline-block;
    margin-top: 1.5rem;
  }
}
@media (max-width: 768px) {
  .portfolio-hero-section .video-wrapper {
    padding-top: 0;       
    height: 200px;        
    max-width: 100%;      
    margin-top: 0;
    opacity: 0;
    transform: translateX(-50px);
    animation: slideInFromLeft 0.8s ease-out forwards;   
  }
   .portfolio-hero-section .video-wrapper iframe {
    position: static; 
    width: 100%;
    height: 100%;
  }
  .portfolio-hero-section .portfolio-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem 3rem;
    margin: 1rem auto;
    padding: 0 1rem;
    max-width: 480px;
}
 .portfolio-hero-section .portfolio-hero-content > h1 {
  margin: 0; 
  opacity: 0;
  transform: translateX(50px);
  animation: slideInFromRight 0.8s ease-out forwards;
  animation-delay: 0.2s;
  text-align: center;
  }
 .portfolio-hero-section .text-content {
  opacity: 0;
  transform: translateX(50px);
  animation: slideInFromRight 0.8s ease-out forwards;
  animation-delay: 0.3s;              
}
.portfolio-hero-section .text-content p {
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}
}
@media (min-width: 992px) {
.site-content .ast-container {
 flex-direction: column; 
}
}
body.page-template-portfolio-page .portfolio-clients-carousel {
  margin-top: 5rem;   
}
body.page-template-portfolio-page .swiper.portfolio-carousel { overflow: hidden; }
body.page-template-portfolio-page .swiper-wrapper {
  display: flex; 
  will-change: transform;
  align-items: stretch;
 }
body.page-template-portfolio-page .swiper-slide   { flex: 0 0 auto; }

body.page-template-portfolio-page .swiper.portfolio-carousel {
  padding-top: 0.05rem;
  padding-bottom: 4rem;
}
body.page-template-portfolio-page .swiper-slide.case-study-card {
  box-shadow: 2px -1px 16px 6px rgba(0, 0, 0, 0.05);
  background: #fff;           
  border-radius: 12px;        
  padding: 24px;
  min-height: 500px;
  width: 600px !important;              
}
body.page-template-portfolio-page .portfolio-clients-carousel{
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
body.page-template-portfolio-page .swiper.portfolio-carousel { position: relative; overflow: visible; }
body.page-template-portfolio-page .swiper-button-prev,
body.page-template-portfolio-page .swiper-button-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 9999px;                 /* circle */
  background: #8d8a8a;                   /* grey circle */
  color: #e9e1e1;                            /* chevron color */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 6px 14px rgba(0,0,0,.12); /* subtle shadow */
}
body.page-template-portfolio-page .swiper-button-prev{ left: clamp(16px, 4vw, 48px); }
body.page-template-portfolio-page .swiper-button-next{ right: clamp(16px, 4vw, 48px); }

body.page-template-portfolio-page .swiper-button-prev::after {
  content: '‹';  /* or use unicode \2039 */
  font-size: 20px;
  line-height: 1;
}
body.page-template-portfolio-page .swiper-button-next::after{
content: '›';  /* or use unicode \203A */
font-size: 20px;
line-height: 1;     
}
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none !important;
}
body.page-template-portfolio-page .swiper-button-prev svg,
body.page-template-portfolio-page .swiper-button-next svg {
  width: 20px !important;
  height: 20px !important;
}

body.page-template-portfolio-page .swiper-button-prev:hover,
body.page-template-portfolio-page .swiper-button-next:hover,
body.page-template-portfolio-page .swiper-button-prev:focus-visible,
body.page-template-portfolio-page .swiper-button-next:focus-visible{
  background: #8f9aa2;
  outline: none;
}
body.page-template-portfolio-page .swiper-button-lock{ display: flex !important; }

body.page-template-portfolio-page .portfolio-carousel-title{
  margin: 0 auto 2rem;
  font-size: clamp(2rem, 1.2rem + 2.5vw, 3rem);
  line-height: 1.2;
  /* match the carousel’s inner gutter if you set one */
  padding-left: var(--carousel-gutter, 32px);
  padding-right: var(--carousel-gutter, 32px);
  padding-top: 4rem;
  text-align: center;
  font-weight: 700;
}

body.page-template-portfolio-page .strategy-row{
  display: block;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .5rem 0 1.25rem;
}
body.page-template-portfolio-page .strategy-heading{
  margin: 0;
  font-size: 1.5rem;   /* match your design */
  line-height: 1.2;
}
body.page-template-portfolio-page .strategy-tags{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin-top: 0.5rem;
  padding: 0;
  margin-left:0.05rem;
}
body.page-template-portfolio-page .strategy-tags a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem .6rem;
  min-height: 28px;
  border: 1px solid #e5e7eb;
  background: #f4f6f8;
  color: #1f2937;
  border-radius: 8px;       /* square-ish; increase for pills */
  font-size: .9rem;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .15s;
}
body.page-template-portfolio-page .strategy-tags a:hover{
  background: #e9eef3; border-color: #d1d5db;
}
body.page-template-portfolio-page .strategy-tags a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px #585757, 0 0 0 5px #2563eb; /* accessible focus */
}
body.page-template-portfolio-page .strategy-tags a:active{
  transform: translateY(1px);
}

body.page-template-portfolio-page .btn-case-study{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-radius: 10px;
  background: #ff0000;                 /* primary blue */
  color: #fff;
  border: 1px solid #b0b0b0;
  text-decoration: none;
  font-weight: normal;
  box-shadow: 0 6px 14px rgba(37,99,235,.25);
  transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
}
body.page-template-portfolio-page .btn-case-study:hover{
  background: #cd1313; border-color: #878787; transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(44, 44, 45, 0.35);
}
body.page-template-portfolio-page .btn-case-study:active{
  transform: translateY(0); box-shadow: 0 6px 12px rgba(26, 26, 26, 0.25);
}
body.page-template-portfolio-page .btn-case-study:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #cd1313;   /* accessible focus ring */
}
body.page-template-portfolio-page .swiper-slide.case-study-card{
  display: flex;
  flex-direction: column;
  position: relative;  
}
body.page-template-portfolio-page .case-footer{
  margin-top: auto;          /* pushes footer to the bottom */
  padding-top: 1rem;         /* <-- GAP between H3 and button; tweak */
  display: flex;
  justify-content: center;   /* center the button horizontally */
}
body.page-template-portfolio-page .btn-case-study{
  display: inline-flex;           /* intrinsic width */
  align-self: center;         /* ignore any stretch */
  width: auto;                    /* override any 100% from theme */
  margin-top: auto;               /* pushes it to the bottom of the card */
}
body.page-template-portfolio-page .case-logo{
  top: 18px;
  right: 18px;
  width: 200px;                      /* tweak to taste */
  height: auto;
  object-fit: contain;
  pointer-events: none;              /* remove if you want it clickable */
}
body.page-template-portfolio-page .case-header{
  display: flex;
  align-items: center;            /* vertical alignment */
  justify-content: space-between; /* logo to the right edge */
  gap: 12px;
  margin-bottom: .5rem;           /* space under the row */
}
body.page-template-portfolio-page .case-header .case-title{
  margin: 0;                      /* remove default h3 margin */
}
body.page-template-portfolio-page .case-header .case-logo{
  width: 150px; height: auto; object-fit: contain;
}
body.page-template-portfolio-page .case-header{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:.5rem;
  margin-bottom:1rem;
  border-bottom:1px solid rgba(2,6,23,.08); /* very light keyline */
}
.strategy-tags .tag-break {
  flex-basis: 100%;
  height: 0;
}
.logo-container {
  width: 150px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff; 
}

.case-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.case-header {
  height: 50px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 16px;
}


@media (max-width: 767.98px){
  body.page-template-portfolio-page .swiper-slide.case-study-card{
    min-height: auto;      /* don't force tall cards on phones */
    padding: 14px 14px 16px;
    border-radius: 12px;   /* slightly smaller corner on mobile */
  }
  .portfolio-clients-carousel{
     width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden !important;
  }
body.page-template-portfolio-page .portfolio-clients-carousel .case-logo{
  position: static;        /* reset any absolute/relative positioning */
    top: auto; right: auto; left: auto; bottom: auto;  /* clear offsets */
    display: block;
    margin: 0 auto 6px;      /* center it */
    width: 150px;             /* or keep 90px if you prefer */
    height: auto;
  }
   .portfolio-clients-carousel .case-header + p{      /* first paragraph after header       */
    display: none;
  }
  .portfolio-clients-carousel h4{                    /* your <h4> Objective / Strategy     */
    margin: 10px 0 6px;
    font-size: 1.5rem;
  }

  body.page-template-portfolio-page .portfolio-clients-carousel{
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 16px;    /* small side padding so the card isn't glued to the edge */
    padding-right: 16px;
    margin-top: 1.5rem;    /* was 5rem – much nicer on mobile */
  }
  body.page-template-portfolio-page .case-header{ margin-bottom: .5rem; }
  body.page-template-portfolio-page .case-footer{ padding-top: .75rem; }
  body.page-template-portfolio-page .btn-case-study{ margin-bottom: .5rem; }

  body.page-template-portfolio-page
  .portfolio-clients-carousel
  .swiper.portfolio-carousel
  > .swiper-button-prev,
  body.page-template-portfolio-page
  .portfolio-clients-carousel
  .swiper.portfolio-carousel
  > .swiper-button-next{
    display: none !important;
  }
  .portfolio-clients-carousel .swiper.portfolio-carousel{
    overflow: hidden;
     padding: 0;
    box-sizing: border-box;
  }
   .portfolio-clients-carousel .swiper-slide{
     display: flex;
     justify-content: center;                /* so we can center the card */
  }
  .portfolio-clients-carousel .case-study-card{
     width: 100%;
    max-width: 70vw;              /* 92% of viewport; tweak (e.g., 90vw, 360px, etc.) */
    margin: 0 auto;          /* center the card within the slide */
  }
  .portfolio-clients-carousel .swiper.portfolio-carousel .swiper-slide{
    width: auto; /* let Swiper compute it */
    margin: 12px 0;
  }
  body.page-template-portfolio-page .swiper-slide.case-study-card{
    min-height: auto;
    padding: 14px 14px 16px;
    border-radius: 12px;
  }
 .portfolio-clients-carousel .case-title{          /* "Digital Strategy Consultants" */
    display: none;                                   /* removes from visual flow on phones */
  }
  
   .portfolio-clients-carousel .case-header{
     display: block;
    text-align: center;
    margin-bottom: 8px;
  }


  .strategy-heading{ margin: 10px 0 6px; }
  .strategy-tags{ gap: 6px; }
  .strategy-tags a{ font-size: 13px; padding: 6px 10px; }

   .swiper-slide.case-study-card h3:not(.case-title){
    font-size: 22px;
    margin-top: 16px;
    text-align: center;
  }

  .btn-case-study{
    padding: 10px 14px;
    font-size: 14px;
    margin: 10px auto 6px; /* centers + keeps some bottom space */
  }
.case-header .logo-container {
display: block;       /* removes inline spacing */
  margin: 0 auto;       
  max-height: 100%;     
  max-width: 100%;  
}
}

  @media (min-width: 1024px) {
  body.page-template-portfolio-page .swiper-slide.case-study-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.skills-carousel-section {
  padding: 4rem 1rem;
  background: #ffffff;
  text-align: center;
}
.skills-carousel-section p {
  font-size: 1.125rem;
  max-width: 1000px;
  margin: 0 auto 30px;
}
.skills-section-title {
  font-size: 3rem;
  margin-bottom: 2rem;
}
.skills-carousel .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
 .skills-carousel { 
  overflow: visible !important;     /* stop clipping */
}

.skills-card {
  width: 100%;
  max-width: 1000px;
  height: 500px;
  background: white;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 1px 1px 25px 7px rgba(0, 0, 0, 0.07);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.skills-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.skills-columns {
  display: flex;
  gap: 10rem;
  justify-content: center;
  flex-wrap: wrap;
  text-align: left;
  align-items:flex-start;
  min-height: 100%;
}
.skills-columns .label-text {
font-weight: normal;
}
.skills-col {
  flex: 1;
  max-width: 300px;
}
.skill-bar{
   display: flex;
  flex-direction: column;  /* stack items vertically */
  align-items: flex-start; /* align text/icons to left */
  margin: 20px 0;
  gap: .25rem;             
}
.skill-bar .label {
 display: flex;
 align-items: center;
  gap: .5rem;
  font-weight: 600;
}
.bar-wrapper {
  display: flex;       /* makes children flexible */
  align-items: center; /* aligns vertically */
  gap: .5rem;          /* space between bar and pct */
  width: 100%;
}
.skill-bar .bar-wrapper {
  position: relative;
  width: 100%;
  max-width: 20rem;
   gap: 0.5rem;
}
.skill-bar .pct{
  flex-shrink: 0;    /* percentage won’t shrink */
  font-weight: 700;
  font-size: 14px;
  color: #24313f;
}
.skill-bar span {
  display: flex;
  font-weight: 600;
}
.skill-bar .bar {
  flex: 1;                  /* bar takes up available space */
  height: var(--barH, 10px);
  background: #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.skill-bar .fill {
  height: 100%;
  background: #ff0000;
  width: 0;
  border-radius: 4px;
  transition: width 0.8s ease;
}
.skill-bar .label{
grid-column: 1 / -1;
grid-row: 1;
display: flex;
align-items: center;
gap: .5rem;                 
line-height: 1.2;
margin-bottom: .25rem;
}
.skill-bar .label-icon{
  width: 28px;                
  height: auto;
  object-fit: contain;
} 
.skill-bar .label-text{ white-space: nowrap; } 
.mobile-disclaimer {
display: none;
}

@media (max-width: 768px) {
  .skills-carousel .swiper-button-prev,
  .skills-carousel .swiper-button-next,
  .skills-carousel .skills-nav {
    display: none !important;
  }
  .skills-section-title {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  .skills-columns {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
  .tool-item {
    display: none;
  }
  .tool-item.mobile-show {
    display: block;
  }
   .skills-col:not(:has(.tool-item.mobile-show)) {
    display: none;
  }
  .skills-carousel-section p {
  text-align: center;
  }
  .skills-carousel-section .mobile-disclaimer {
    display: block;
    font-size: 1rem;
  }
}
@media (max-width: 380px) {
   .skills-carousel .swiper-slide{
    width: 100% !important;      /* each slide fills the viewport */
    margin-right: 0 !important;  /* kills the gap that shows the next card */
    display: flex;
    justify-content: center;
    padding-right: 2rem;
  }
   .skills-carousel{
    overflow: hidden;            /* hide the next slide */
  }
  .skills-card{
    height: auto;                /* <- change from 500px */
    width: 400px;
    padding: 14px 16px;          /* comfy inner space */
    border-radius: 14px;
    box-sizing: border-box;
  }
}
.certifications-section {
  max-width: 1000px;
  margin: 60px auto;
  text-align: center;
  padding: 100px 20px;
}

.certifications-section h2 {
  font-size: 3rem;
  margin-bottom: 10px;
}

.certifications-section p {
  font-size: 18px;
  color: #555;
  max-width: 700px;
  margin: 0 auto 30px;
}

.carousel-container {
  position: relative;
  overflow: hidden;        /* hide edges while animating */
  padding: 0;
  margin: 0 auto;              /* IMPORTANT: no side padding */
}

.carousel{
  display: flex;
  gap: 30px;               /* your spacing between cards */
  padding: 0;              /* IMPORTANT: no side padding */
  margin: 0;               /* no side margin either */
  will-change: transform;
  overflow: visible
}

.carousel::-webkit-scrollbar {
  display: none;
}

.certificate-item { 
  flex: 0 0 auto; 
  margin: 0; 
  box-sizing: border-box;
  scroll-snap-align: start; }

.photo-frame {
  border: 12px solid #d4af37; /* Gold-ish frame */
  padding: 5px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  background: #fff;
  display: inline-block;
  max-width: 350px;
  height: auto;
}

.photo-frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.certificate-info {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0;
  width: fit-content;
  gap: 10px;
}

.course-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.course-name {
  font-size: 0.95em;
  font-weight: 700;
  color: #333;
  text-align: left;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;             /* fixed width */
  height: 44px;            /* fixed height */
  border-radius: 50%;      /* ensures perfect circle */
  background: #f77868 !important;     /* match Swiper blue */
  color: #fff;
  font-size: 20px;         /* arrow size */
  line-height: 44px;       /* vertically center arrow */
  text-align: center;      /* horizontally center arrow */
  padding: 0;              /* remove default button padding */
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
  z-index: 10;
}

.carousel-btn.left  { left: clamp(16px, 4vw, 48px); }

.carousel-btn.right { right: clamp(16px, 4vw, 48px); }

.carousel-btn:hover {
  background: #b5b5b5;
}

.left {
  margin-right: 10px;
}

.right {
  margin-left: 10px;
}

section.certifications-section {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
} 

@media (max-width: 600px) {
.photo-frame {
    width: 80vw;           /* << tweak this first: 80 → 75 → 70 → 65 */
    max-width: 240px;      /* << hard cap; tweak down if needed: 220 / 200 */
    padding: 4px;          /* thinner inner gap; tweak 4 → 3 → 2 */
    border-width: 6px;     /* thinner gold border; tweak 6 → 4 → 3 */
    box-sizing: border-box;
    margin: 0 auto;        /* center */
    display: inline-block; /* keep it fitting its content */
  }

  /* image should just fill the (smaller) frame */
  .photo-frame img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .certificate-info {
    width: 80vw;          /* same as frame */
    max-width: 240px;     /* same as frame */
    margin: 8px auto 0;
    display: flex;
    align-items: center;
    gap: 19px;             /* TWEAK 8→6→4 */
  }

    section.certifications-section .carousel-container { 
    position: relative;
    padding-bottom: 80px;
    --btn-gap: 84px;        
  }
  
  .carousel-btn {
    position: absolute;
    top: auto !important;        /* override the 50% rule */
    bottom: 12px !important;     /* TWEAK: raise/lower */
    transform: translateX(-50%) !important;
    width: 40px;                 /* smaller buttons on mobile */
    height: 40px;
    left: 50% !important;
    line-height: 32px;
    font-size: 16px;
    z-index: 10;
  }

  .carousel-btn.left  { left: calc(50% - var(--btn-gap)/2) !important; }
  .carousel-btn.right { left: calc(50% + var(--btn-gap)/2) !important; }

  .certifications-section h2 {
    font-size: 2rem;}
  
  .certifications-section p {
    text-align: justify;
    padding:0 18px;}
  
  .certifications-section {
    padding: 48px 16px;  /* reduce from 100px to 48px */
    margin: 32px auto;   /* reduce from 60px to 32px */
  }
}

.testimonials-section {
  max-width: 900px;
  margin: 10px auto;
  padding: 0 1.5rem;
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.testimonials-section h2 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.testimonial-intro {
  font-size: 1.125rem;
  color: #555;
  margin-bottom: 2rem;
}

.testimonial-card {
  background: #ffffff;
  width: 700px;
  max-width: 700px;
  margin: 0 auto;  
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 12px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  box-sizing: border-box;
}

blockquote.testimonial-quote{    
  margin: 0.5em;
  border-color: rgb(0 0 0 / 0%);}

.testimonial-photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #e0e0e0;
}

.testimonial-quote {
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.6;
  color: #333;
  max-width: 600px;
  text-align: justify;
}

.testimonial-author {
  font-weight: 600;
  color: #222;
  font-size: 1rem;
  line-height: 1.4;
}

.testimonial-author .designation {
  font-weight: 400;
  color: #777;
  display: block;
  font-size: 0.95rem;
}

body {
  overflow-x: hidden;
}

.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100vw;
  max-width: 100%;
  padding: 0;
  margin: 0 auto;
}

#carousel {
   display: flex;
  flex-wrap: nowrap;
  width: max-content;
  padding: 0;
  margin: 0;
  gap: 30px; /* keep this or adjust to your spacing preference */
  transition: transform 0.4s ease;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.testimonial-carousel,
.testimonial-carousel .swiper-wrapper,
.testimonial-carousel .swiper-slide {
  overflow: visible !important;
}

.testimonial-outer-wrapper {
  overflow-x: hidden;
  overflow-y: visible;
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
}
.testimonial-quote.mobile-only {
display: none;
}
@media (max-width: 768px) {
.testimonials-section h2 {
font-size: 2rem;
margin-bottom: 0.5rem; 
}
.testimonials-section {
margin: 40px auto;
padding-left: 12px;         /* give space for shadow */
padding-right: 12px;
overflow: visible !important; /* allow shadows to show */
}
.testimonial-card {
  box-shadow: 0 2px 10px 4px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
  padding: 20px 16px;
  width: 90vw;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.testimonial-carousel,
.testimonial-carousel .swiper-wrapper,
.testimonial-carousel .swiper-slide {
  overflow: visible !important;
}

.testimonial-carousel .swiper-slide {
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
  overflow: visible !important;
}

.testimonial-intro {
    font-size: 1.125rem;
    color: #555;
    margin-bottom: 2rem;
    text-align: center;
}
.testimonial-quote.desktop-only {
display: none;
}
.testimonial-quote.mobile-only {
display: block;
text-align: center;
padding: 0;
font-size: 1rem;
}
.testimonial-card .testimonial-author {
margin-top: 8px;
}
.testimonial-author .designation {
font-weight: normal;
}
} 

.contact-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 5rem;
  padding: 64px 32px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 4px 20px 15px rgba(0, 0, 0, 0.05);
  max-width: 1200px;
  margin: 70px auto;
}

.contact-left, .contact-right {
  flex: 1 1 320px;
  max-width: 500px;
  padding-top: 4rem;
}

.contact-left h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.contact-left p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

.contact-section .cta-button {
  background: #ff0000;
  color: #fff;
  padding: 12px 24px;
  font-weight: normal;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.3s ease;
}
.contact-section .cta-button:hover {
  background: #cc0000;
}

.contact-right h3 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.social-icons {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  gap: 30px;
  margin-bottom: 1.5rem;
  justify-content: center;
  text-align: center;
}
.social-icons img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.social-icons img:hover {
  transform: scale(1.1);
}

.cv-download {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.cv-download a {
  color: #0073e6;
  text-decoration: underline;
}

.contact-left p {
font-size: 1.125rem;
margin-bottom: 2rem;
text-align: justify;
}

.contact-right {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  padding: 6rem 2rem 2rem 2rem;
  border-radius: 20px;
  min-height: 500px;
}
.mobile-only {
    display: none;
}
.desktop-only {
    display: inline;
}

@media (max-width: 768px) {
  .contact-section {
    flex-direction: column;
    padding: 0;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    gap: 1rem;
  }

  .contact-left, .contact-right {
    max-width: 100%;
  }
  .contact-left h2 {
    font-size: 2rem;
}
.contact-right {
  background-image: none !important;
  background-color: transparent; 
  box-shadow: none;              
  border-radius: 0;
  min-height: auto;
  padding-bottom: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;                 
  }
  .contact-section .cta-button {
    display: inline-block;
    margin: 1.5rem auto 0; 
    text-align: center;
  }
  
   .mobile-only {
        display: inline;
    }
    .desktop-only {
        display: none;
    }
    .social-icons{
    display: grid;
    grid-template-columns: repeat(3, 50px);
    gap: 15px;
    margin-bottom: 1.5rem;
    justify-content: center;
    text-align: center;
    justify-items: center;
}
.social-icons img{
    width: 35px;
    height: 35px;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
}

.case-study .hero {
  text-align: center;
  padding: 4rem 2rem;
  background: #f4feff;
  border-radius: 13px;
  margin-top: 50px;
  box-shadow: 0px 8px 24px 7px rgba(0, 0, 0, 0.08);
}
.case-study .hero img {
  border-radius: 13px;
  margin-top: 30px;
  box-shadow: 0px 8px 24px 7px rgba(0, 0, 0, 0.08);
}

.case-study .stats {
  display: flex;
  justify-content: center;
  gap: 6rem;
  margin-top: 4rem;
  margin-bottom: 4rem;
}
.case-study .stat-box {
  background-color: #ffffff;
  padding: 1.5rem 2rem;
  border-radius: 12px;
  box-shadow: 0px 4px 15px 6px rgba(0, 0, 0, 0.05);
  text-align: center;
  min-width: 180px;
  transition: transform 0.2s ease;
}
.case-study .stat-box:hover {
  transform: translateY(-5px);
}
.case-study .stat-box strong {
  display: block;
  font-size: 1.5rem;
  color: #c42a2a;
}
.case-study .stat-box p {
  margin: 0.25rem 0 0;
  font-size: 1rem;
  color: #444;
}
.case-study .hero p {
  margin-bottom: 1.75em;
  margin-top: 1.75em;
  font-size: 1.125rem;
}
.case-study .content p {
  margin-bottom: 1.75em;
  font-size: 1.125rem;
  max-width: 800px;   /* controls line length */
  margin-left: auto;  /* center horizontally */
  margin-right: auto; /* center horizontally */
  line-height: 1.6;
  text-align: justify;
}
.case-study .content {
  text-align: center;
}
.case-study .content figure.growth-chart {
  max-width: 700px;
  margin: 2rem auto;
  text-align: center;
}
.case-study .content figure.growth-chart img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}
.case-study .content figure.growth-chart figcaption {
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.5rem;
  font-style: italic; /* optional */
}
.case-study .content h2 {
  text-align: left;
  margin: 4rem auto 1rem auto;
  max-width: 800px;
  font-size: 2rem;
}
.case-study .content ul {
  max-width: 800px;
  margin: 1.5rem auto;   /* centers the whole list block */
  padding-left: 1.5rem;  /* space for bullets */
  text-align: left;      /* align bullets + text */
  list-style-position: outside; /* bullets outside text block */
  font-size: 1.125rem;
}
.case-study .content ul li {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}
.case-study .content h3 {
  text-align: left;
  margin: 1rem auto 1rem auto;
  font-size: 1.5rem;
  max-width: 800px;
}
.case-study .content-box {
  background: #f4feff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0px 4px 20px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 50px;
}
.case-study .cta {
  background: #ffffff;        /* light background */
  padding: 3rem 2rem;
  margin: 3rem auto;
  text-align: center;
  border-radius: 12px;
  font-size: 1.25rem;
}
.case-study .cta .cta-button {
  display: inline-block;
  background: #e63946;
  color: #fff;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: normal;
  border-radius: 25px;
  text-decoration: none;
  transition: background 0.3s ease;
}
.case-study .cta .cta-button:hover {
  background: #cc0000;
}

@media (max-width: 767px) {
  .case-study .stats {
    display: flex;
    flex-wrap: nowrap;            /* keep in one line */
    justify-content: space-between;
    gap: 0.5rem;                  /* smaller gap so they fit */
  }

  .case-study .stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;                  /* equal width, shrink as needed */
    min-width: 0;                 /* allow shrinking beyond content */
    text-align: center;
    justify-content: center;
  }
  .case-study .cta .cta-content {
    display: flex;
    justify-content: center;
  }
  .case-study .cta .cta-button {
    display: block;
    justify-content: center;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }
}
.case-study-acowebs .hero {
  background:#e4f6fe;
}
.ta-case-study .hero {
  background: #ebf2fc;
}
.case-study-acowebs .content-box {
background: #e4f6fe;
}
.ta-case-study .content-box {
background:#ebf2fc;  
}
.digital-strategy-case-study .hero {
background: #edf1f4;
}
.digital-strategy-case-study .content-box {
background: #ecf0f3;  
}
.gpttraining-case-study .hero {
background: #e0eaff;
}
.gpttraining-case-study .content-box {
background: #dfe8fd;
}
.under-construction-wrapper {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
}
body.page-template-under-construction #page .site-content {
  background-color: #000616;
}
.under-construction-box {
  background-color: rgba(0, 0, 0, 0.75); /* dark semi-transparent */
  padding: 2rem;
  border-radius: 12px;
  max-width: 700px;
  margin: 2rem auto; /* center horizontally */
  color: #fff; /* make text white for readability */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* optional depth */
}
.under-construction-box h1 {
color: #ffffff;
}
.under-construction-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #ff0000;
    color: #fff;
    border-radius: 25px;
    text-decoration: none;
    font-weight: normal;
}
.under-construction-button:hover {
  background-color: #cc0000;
  color: #fff;
}
.video-placeholder {
  width: 100%;
  max-width: 600px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  display: block;
}
.blog-header {
    text-align: center;
    padding: 60px 20px 20px;
}
.blog-header h1 {
    font-size: 2.5rem;
    font-weight: bold;
}
.blog-header p {
    font-size: 1.1rem;
    color: #666;
}
.blog-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 30px 0;
}
.blog-filters a {
    padding: 10px 20px;
    background: #eee;
    border-radius: 30px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
}
.blog-filters a.active,
.blog-filters a:hover {
    background: #7C3AED;
    color: #fff;
}
.blog-grid {
   display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    padding-bottom: 4rem;
}

.blog-post {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
    height: 100%;
}
.blog-post img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.blog-post .category {
    background: #4F46E5;
    color: #fff;
    padding: 6px 12px;
    display: inline-block;
    margin: 15px;
    border-radius: 5px;
    font-size: 0.8rem;
}
.blog-post h2 {
    font-size: 1.2rem;
    margin: 0 15px;
}
.blog-post h2 a {
    text-decoration: none;
    color: #111;
}
.blog-post .date {
    margin: 10px 15px 20px;
    color: #888;
    font-size: 0.85rem;
}
.custom-post-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
    padding: 2rem 1rem;
}
.custom-post-header .post-categories {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a73e8;
    margin-bottom: 1rem;
}
.custom-post-header .post-categories a {
    color: #1a73e8;
    text-decoration: none;
}
.custom-post-header .post-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
}
.custom-post-header .post-meta {
    font-size: 1rem;
    color: #666;
}
.custom-post-header .post-meta .author {
    font-weight: 500;
}
.custom-post-header .separator {
    margin: 0 8px;
    color: #aaa;
}
.blog-post:hover {
transform: translateY(-5px);
}
.blog-post-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.blog-post-thumbnail img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.blog-post-content {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.blog-post-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.5rem;
}
.blog-post-date {
    font-size: 0.875rem;
    color: #888;
    margin-top: auto;
}
.filter-button {
  background-color: #dcdce1;
  color: #0d0c22;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 20px; /* Soft pill shape like your competitor */
  box-shadow: 0 4px 12px 7px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}
.filter-button:hover,
.filter-button[aria-pressed="true"] {
  background-color: #cc0000;  /* Purple shade like the selected one */
  color: white;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.service-hero-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4rem 2rem;
  padding-left: 0;
}

/* Left + right */
.hero-left,
.hero-right {
  flex: 1;
  min-width: 300px;
}
.hero-left.slide-left {
animation-delay: 0.1s;
max-width:550px;
}
.hero-right.slide-right {
animation-delay: 0.25s;
}

.slide-left {
  opacity: 0;
  transform: translateX(-40px);
  animation: slideInLeft 0.8s ease-out forwards;
}
.slide-right {
  opacity: 0;
  transform: translateX(40px);
  animation: slideInRight 0.8s ease-out forwards;
}
.hero-left.slide-left p {
  font-size: 1.125rem;
  font-family: 'Rubik', sans-serif;
  margin-top: 2rem;
}
.hero-right.slide-right h2 {
 font-size: 2rem;
 margin-bottom: 2rem; 
}
/* Service styling (unchanged) */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.service-box {
  background-color: #d4d3d3;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: all 0.3s ease;
  color: inherit !important;
  text-decoration: none !important;
}

.service-box:hover {
  border-color: #555;
  background-color: #f0f0f0;
}

.unsure-section {
  background-color: #fff;
  padding: 1rem 1.25rem;
  border: 1px solid #ffffff;
  box-shadow: 0px 1px 30px 6px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  text-align: center;
  font-family:'Rubik', sans-serif;
  font-weight: bold;
}

.seo-audit-button {
  margin-top: 1rem;
  display: inline-block;
  background-color: #ff0000;
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: normal;
}

.seo-audit-button:hover {
  background-color: #cc0000;
   color: #fff;
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (max-width: 768px) {
  .service-hero-wrapper {
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 1rem;
  }

  .hero-left, .hero-right {
    width: 100%;
  }

  .hero-left.slide-left p {
    font-size: 1rem;
    text-align: center;
  }

  .hero-right.slide-right h2 {
    text-align: center;
    font-size: 2rem;
  }

  .services-grid {
    grid-template-columns: 1fr; /* Stack vertically */
    gap: 0.5rem;
  }

  .unsure-section {
    margin-top: 2rem;
  }

  .seo-audit-button {
    width: auto;
    padding: 0.6rem 2rem;
    font-size: 1rem;
  }
   .service-intro {
    padding: 0 1rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
  }
   .services-prompt {
    text-align: center;
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  .hero-left.slide-left h1 {
    text-align: center;
    margin: 0 auto;
    font-size: 2rem;
    line-height: 1.3;
  }
  .service-box {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
}
.service-detail {
  padding: 4rem 1rem;
  margin-top: 2rem;
}
.service-detail-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}
.service-detail-left {
  flex: 1;
}
.service-detail-left h2 {
  font-size: 2.5rem;
  margin-bottom: 1.25rem;
}
.service-detail-left p {
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.service-bullets {
  list-style: disc;
  padding-left: 1.5rem;
  line-height: 1.6;
}
.service-bullets li {
  margin-bottom: 0.7rem;
  font-size: 1.05rem;
}
.service-detail-right {
  flex: 1;
  text-align: center;
}
.service-detail-image {
  width: 100%;
  max-width: 650px;
  height: auto;
  display: block;
  margin: 0 auto 1.5rem auto;
}
.cta-button.cta-start-now {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: #ff0000;
  color: #fff;
  text-decoration: none;
  border-radius: 25px;
  transition: background 0.3s ease;
  font-size: 1rem;
}
.cta-button.cta-start-now:hover {
  background: #cc0000;
}

@media (min-width: 769px) {
  .service-detail-right {
    align-self: center;
  }
}
.service-detail-left,
.service-detail-right {
    opacity: 0;
    transform: translateX(0); 
    transition: all 0.8s ease-out;
}
.service-detail-left.slide-in {
    opacity: 1;
    transform: translateX(0);
}
.service-detail-left {
    transform: translateX(-60px);
}
.service-detail-right.slide-in {
    opacity: 1;
    transform: translateX(0);
}
.service-detail-right {
    transform: translateX(60px);
}

/* Modal background */
.audit-modal {
    display: none; 
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
    justify-content: center;
    align-items: center;
}

/* Modal box */
.audit-modal-content {
    background: #fff;
    padding: 30px;
    width: 90%;
    max-width: 600px;
    border-radius: 12px;
    animation: modalFade 0.3s ease-out;
}

/* Close button */
.audit-close {
    float: right;
    font-size: 28px;
    cursor: pointer;
}

/* Form styling */
#audit-form label {
    font-weight: 600;
    margin-top: 15px;
    display: block;
}

#audit-form input,
#audit-form textarea,
#audit-form select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-top: 5px;
}

.audit-submit {
    background: #ff2d2d;
    color: #fff;
    padding: 12px 22px;
    border: none;
    border-radius: 30px;
    margin-top: 20px;
    cursor: pointer;
    font-size: 16px;
}

.audit-submit:hover {
    background: #d61818;
}

@keyframes modalFade {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

#audit-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px; /* helps on small screens */
}

.audit-modal-content {
  background: #fff;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;  /* <-- IMPORTANT */
  overflow-y: auto;  /* <-- enables scroll INSIDE modal */
  padding: 30px;
  border-radius: 12px;
  position: relative;
  box-shadow: 0px 10px 30px rgba(0,0,0,0.2);
}
#on-page-seo-services .service-detail-left p:first-of-type {
    text-align: justify;
    text-justify: inter-word;
  }
.service-detail-section .service-bullets{
  list-style: disc;
  list-style-position: outside;
  padding-left: 1.4rem;
  margin: 0 0 0 -1.4rem;     
}
#on-page-seo-services .service-bullets {
    margin-left: 0 !important;
    padding-left: 1.25rem;           
    list-style-position: outside;
  }
  #on-page-seo-services .service-bullets li {
    margin-left: 0;
  }
.service-detail-section .service-bullets li{
  margin: 0 0 0.7rem 0;
}
#on-page-seo-services .service-detail-image {
  max-width: 500px;   
  width: 100%;
  height: auto;
}
#link-building-services .service-bullets{
  margin: 0;
  padding-left: 1.4rem;      
  list-style-position: outside;
}
#link-building-services .service-bullets li {
  margin-left: 0;
  }
#content-seo-services .service-bullets{
 margin: 0;
 padding-left: 1.4rem;      
 list-style-position: outside;
}
#content-seo-services .service-bullets li {
  margin-left: 0;
  }
#local-seo-services .service-bullets{
 margin: 0;
 padding-left: 1.4rem;      
 list-style-position: outside;
}
#local-seo-services .service-bullets li {
  margin-left: 0;
  }
#advanced-seo-services .service-bullets{
 margin: 0;
 padding-left: 1.4rem;      
 list-style-position: outside;
}
#advanced-seo-services .service-bullets li {
  margin-left: 0;
  }
#analytics-services .service-bullets{
 margin: 0;
 padding-left: 1.4rem;      
 list-style-position: outside;
}
#analytics-services .service-bullets li {
margin-left: 0;
  }
form label {
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
form input,
form textarea,
form select {
margin-bottom: 20px;
}
.audit-checkboxes label {
  display: block;
  margin-bottom: 2px;
  font-weight: normal;
  line-height: 1.3; 
}

.audit-checkboxes {
  margin-bottom: 20px;
  margin-top: 20px;
}  

/* MOBILE: image behind bullets w/ low opacity */
@media (max-width: 768px) {

  /* Stack columns + create positioning context for the absolute image */
  .service-detail-wrapper {
    flex-direction: column;
    position: relative !important;
    gap: 20px;
  }

  /* Keep the text content above everything */
  .service-detail-left {
    order: 1;
    position: relative;
    z-index: 2;
  }

  /* Put CTA at the bottom */
  .service-detail-right {
    order: 3;
    text-align: center;
    position: static !important;
    z-index: 2;
  }


  
  .service-detail-image { display: none; }
  
  .service-detail-left,
  .technical-seo-cta {
    position: relative;
    z-index: 2;               /* keep text + button above image */
  }

  /* Optional: make the button centered */
  .technical-seo-cta {
    display: inline-block;
    margin: 18px auto 0;
  }
   .service-detail-left h2 {
    text-align: center;
  }
  .service-detail-left p {
    text-align: justify;
    text-justify: inter-word;
  }
   .service-bullets {
    margin: 0;
    padding-left: 1.4rem;
    list-style: disc;
    list-style-position: outside;
    position: relative;
    z-index: 2; 
  }
  .service-bullets li {
    margin: 0 0 0.7rem 0;
    padding-left: 0.25rem;        
  }
  .service-bullets::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, 92vw);
    height: 260px;
    background: var(--bullets-bg) center / contain no-repeat;
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
  }
  
  #technical-seo-services .technical-seo-cta {
    display: block;
    width: fit-content;
    margin: 18px auto 0;
    margin-top: 18px;
  }
   #technical-seo-services .service-detail-right {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #technical-seo-services .service-detail-wrapper {
    align-items: stretch; /* make children take full width */
  }
.service-detail-section .service-bullets {
    position: relative;
    z-index: 2;
  }

  .service-detail-section .service-detail-image {
    display: none;
  }
   #on-page-seo-services .service-detail-right{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #on-page-seo-services .on-page-seo-cta{
    display: block;
    width: fit-content;
    margin: 18px auto 0;
  }
   #link-building-services .service-detail-right{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #link-building-services .cta-button{
    display: inline-block;
    margin: 18px auto 0;
  }
  #content-seo-services .service-detail-right{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #content-seo-services .cta-button{
    display: inline-block;
    margin: 18px auto 0;
  }
  #local-seo-services .service-detail-right{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #local-seo-services .cta-button{
    display: inline-block;
    margin: 18px auto 0;
  }
  #advanced-seo-services .service-detail-right{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #advanced-seo-services .cta-button{
    display: inline-block;
    margin: 18px auto 0;
  }
  #analytics-services .service-detail-right{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #analytics-services .cta-button{
    display: inline-block;
    margin: 18px auto 0;
  }
}
 p a {
  text-decoration: underline !important;
  text-decoration-color: #ff0000 !important;
}

 p a:hover {
  text-decoration: underline !important;
  text-decoration-color: #ff0000 !important;
}