/* Hero Banner Styles */
.hero-banner {
  /* min-height: 100vh; */
  padding: 50px 0 40px;
}

.hero-slides {
  position: relative;
  margin-bottom: 50px;
}

.slide {
  display: none;
  animation: fadeIn 0.5s ease-in-out;
}

.slide.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

.hero-content {
  display: flex;
  align-items: center;
  gap: 50px;
}

.text-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.text-content h1 {
  color: #0f0f0f;
  font-size: 28px;
  font-weight: 500;
  line-height: 38px;
  letter-spacing: 1px;
}

.text-content h1 span{
  color: #ec7323;
}

.text-content p {
  color: #0f0f0f;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  text-align: justify;
}

.button-group {
  display: flex;
  gap: 20px;
}

.primary-btn {
  width: 237px;
  height: 50px;
  padding: 7px;
  border-radius: 6px;
  border: 1px solid #1a508e;
  background: #1a508e;
  font-weight: 600;
  font-size: 15px;
  line-height: 36px;
  color: #fff;
  text-align: center;
}

.primary-btn:hover {
  background: transparent;
  color: #1a508e;
}

.secondary-btn {
  width: 164px;
  height: 50px;
  padding: 7px;
  border-radius: 6px;
  border: 1px solid #1a508e !important;
  font-weight: 600;
  font-size: 15px;
  line-height: 36px;
  color: #1a508e;
  text-align: center;
}

.secondary-btn:hover {
  background: #1a508e;
  color: #fff;
}

.image-content {
  width: 50%;
  text-align: right;
}

.image-wrapper {
  width: 560px;
  display: inline-block;
  height: 380px;
}

.image-wrapper img {
  width: auto;
  border-radius: 8px;
  height: 100%;
}

/* Thumbnail Navigation */
.thumbnail-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.thumbnail-item {
  padding: 10px;
  background: #f4f4f4;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.thumbnail-item:hover {
  transform: translateY(-5px);
}

.thumbnail-item.active {
  position: relative;
  background: #e0e8f2;
}

.thumbnail-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 5px;
  background: #1a508e;
  border-radius: 20px;
}

.thumbnail {
  position: relative;
}

.thumbnail img {
  width: 100%;
  height: 139px;
  object-fit: cover;
  border-radius: 8px;
}

.thumbnail p {
  font-size: 14px;
  font-weight: 600;
  line-height: 28px;
  color: #0f0f0f;
  padding: 5px 0;
}

/* Responsive Styles */
@media screen and (max-width: 820px) {
  .hero-content {
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .text-content,
  .image-content {
    width: 100%;
    gap: 15px;
  }
  
  .text-content h1,
  .text-content p {
    text-align: center;
    font-size: 13px;
  }
  
  .button-group {
    justify-content: center;
  }
  
  .image-content {
    margin-bottom: 25px;
    text-align: center;
  }
}

@media screen and (max-width: 600px) {
  .hero-banner {
    min-height: auto;
    padding: 25px 0 0;
  }
  
  .hero-slides {
    min-height: auto;
    margin-bottom: 10px;
  }
  
  .text-content h1 {
    font-size: 21px;
    line-height: 30px;
  }
  
  .primary-btn,
  .secondary-btn {
    width: auto;
    padding: 7px 15px;
    font-size: 12px;
    min-width: 45%;
  }
  
  .button-group {
    gap: 10px;
  }
  
  .image-wrapper {
    height: auto;
    max-width: -webkit-fill-available;
  }
  
  .thumbnail-nav {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .hero-banner {
    min-height: auto;
  }
}

/* Banner End */















/* Design-1 */

/* Design-2 */

.section02 {
  padding: 40px 20px;
}

        .section02 .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .section02 .main-title {
            font-size: 28px;
            text-align: center;
            font-weight: 500;
            color: #000000;
            margin-bottom: 40px;
            line-height: normal;
            letter-spacing: 1px;
        }

        .section02 .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .section02 .card {
            background: url("/assets/images/home/steps-bg.webp");
            border-radius: 20px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            padding: 20px 30px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
            border: 1px solid #c7c7c7;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            min-height: 280px;
            display: flex;
            flex-direction: column;
        }

        .section02 .card::before {
            content: "";
            position: absolute;
            inset: 0;
            background-color: rgba(255, 255, 255, 0.5); /* Adjust opacity here */
            z-index: 1;
        }
        .section02 .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }

        .section02 .card-bg-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.05;
            z-index: 1;
        }

        .section02 .card-content {
            position: relative;
            z-index: 2;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .section02 .icon-container {
            width: 60px;
            height: 60px;
            background-color: #000000;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px;
            flex-shrink: 0;
        }

        .section02 .icon {
            width: 28px;
            height: 28px;
            fill: #ff8c00;
        }

        .section02 .card-title {
            font-size: 20px;
            font-weight: 500;
            color: #1a1a1a;
            margin-bottom: 4px;
            line-height: 31px;
        }

        .section02 .card-description {
            font-size: 15px;
            color: #333333;
            line-height: 28px;
        }

        @media (max-width: 768px) {
            

            .section02 .main-title {
                margin-bottom: 20px;
                text-align: center;
                font-size: 19px;
                line-height: 28px;
                width: 100%;
            }

            .section02 .cards-container {
                gap: 20px;
                grid-template-columns: 1fr;
                margin-top: 20px;
            }

            .section02 .card {
                padding: 30px 25px;
                min-height: 250px;
            }

            .section02 .card-title {
                font-size: 20px;
            }

            .section02 .card-description {
                font-size: 13px;
                line-height: 22px;
            }
        }

        @media (max-width: 480px) {
          .section02 {
              padding: 10px 10px;
          }
            .section02 .card {
                padding: 25px 20px;
            }

            .section02 .icon-container {
                width: 50px;
                height: 50px;
            }

            .section02 .icon {
                width: 24px;
                height: 24px;
            }
        }

/* Design-3 */

.section03 {
  padding: 60px 20px;
}

.section03 .container {
            /* max-width: 1300px; */
            /* margin: 0 auto; */
        }

        .section03 .header {
            text-align: center;
            margin-bottom: 50px;
        }

        .section03 .header h1 {
            font-size: 28px;
            font-weight: 500;
            color: #000000;
            margin-bottom: 5px;
            letter-spacing: 1px;
        }

        .section03 .header p {
            font-size: 16px;
            color: #666;
            font-weight: 400;
            padding: 0 160px;
            line-height: 27px;
        }

        .section03 .process-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px 160px;
            align-items: start;
        }

        .section03 .step-card {
        background: url(/assets/images/home/steps-bg.webp);
        border-radius: 19px;
        background-size: cover;
        /* background-position: center; */
        background-repeat: no-repeat;
        padding: 20px 30px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        min-height: 240px;
        position: relative;
        display: flex;
        border: 1px solid #000;
        flex-direction: column;
        }

        .section03 .step-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 5px;
        }

        .section03 .step-number {
            background: transparent;
            color: #ff8c42;
            border: 1px solid;
            padding: 6px 14px;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .section03 .step-icon {
            width: 54px;
            height: 54px;
            background: #1a1a1a;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 23px;
        }

        .section03 .step-title {
            font-size: 24px;
            font-weight: 700;
            color: #1a1a1a;
            letter-spacing: 1px;
            margin-bottom: 5px;
        }

        .section03 .step-description {
            font-size: 16px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 20px;
        }

        .section03 .step-time {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #999;
            font-size: 18px;
        }

        .section03 .time-icon {
            width: 16px;
            height: 16px;
            border: 2px solid #ff8c42;
            border-radius: 50%;
            position: relative;
        }

        .section03 .time-icon::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 6px;
            width: 2px;
            height: 6px;
            background: #ff8c42;
        }

        .section03 .time-icon::before {
            content: '';
            position: absolute;
            top: 6px;
            left: 6px;
            width: 4px;
            height: 2px;
            background: #ff8c42;
        }

        .section03 .step-1 {
            grid-column: 1;
            grid-row: 1;
        }

        .section03 .step-2 {
            grid-column: 2;
            grid-row: 1;
            margin-top: 196px;
        }

        .section03 .step-3 {
            grid-column: 1;
            grid-row: 2;
            margin-top: -104px;
        }

        .section03 .step-4 {
            grid-column: 2;
            grid-row: 2;
            margin-top: 100px;
        }

        .section03 .arrow-image {
            position: absolute;
            pointer-events: none;
        }

        .section03 .arrow-1-to-2 {
            top: 69%;
            right: -223px;
            width: 223px;
            height: 100px;
            transform: translateY(-50%);
        }

        .section03 .arrow-2-to-3 {
            bottom: 13px;
            left: -22%;
            transform: translateX(-50%);
            width: 223px;
            height: 160px;
        }

        .section03 .arrow-3-to-4 {
            top: 73%;
            right: -224px;
            width: 223px;
            height: 147px;
            transform: translateY(-50%);
        }

        .section03 .arrow-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

       

        .section03 .icon-chat::before {content: "*";font-size: 45px;margin-top: 15px;}
        .section03 .icon-analysis::before {content: "*";font-size: 45px;margin-top: 15px;}
        .section03 .icon-offer::before {content: "*";font-size: 45px;margin-top: 15px;}
        .section03 .icon-project::before {content: "*";font-size: 45px;margin-top: 15px;}

        
        @media (max-width: 767px) {

            .section03 .header h1{
                font-size: 19px;
}
  .section03 .process-container {
    grid-template-columns: 1fr;
    gap: 20px;
    display: flex;
    flex-direction: column;
  }

  .section03 .step-2,
  .section03 .step-3,
  .section03 .step-4 {
    margin-top: 0 !important;
  }

  .section03 .arrow-image {
    display: none !important;
  }

  .section03 .step-card {
    min-height: 200px;
    width: -webkit-fill-available;
  }
}

    



/* design-4 */


.padding_top60 {
  padding-top: 60px;
}
.hed-same-cls {
  font-size: 28px;
  padding: 5px 0 15px;
  color: #000000;
  line-height: 30px;
  letter-spacing: 1px;
}
.content1366 {
  /* margin: auto; */
  /* max-width: 1366px; */
  padding-left: 100px;
  padding-right: 100px;
}
h6.borline {
  color: #000000;
  font-size: 18px;
}
h2.hed-same-cls span {
  color: #545454;
  -webkit-background-clip: text;
  font-weight: 500;
}
p.textp {
  font-size: 18px;
  color: #333;
}
.text_cnt_certified {
  display: flex;
  align-content: center;
  align-items: center;
  align-self: auto;
  flex-wrap: wrap;
  justify-content: space-between;
}
.about_certified_left {
  width: 52%;
}
.about_certified_right {
  width: 42%;
}
.awarded_certifiedy_slider {
  background-color: #f0f2f4;
  padding: 20px;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
}
.awarded_certifiedy_slider img{
  width: 85px;
  height: auto;
}
.row_clutch_awarded {
  display: flex;
  gap: 30px;
  padding: 20px 0 40px;
}
.awarded_certified_syr .award_itm a img {
  max-width: 110px;
  height: auto;
  margin: auto;
}
.awarded_certified_syr button.slick-arrow {
  display: none !important;
}
.awarded_certified_syr.slider .slick-track {
  height: 110px;
  overflow: hidden;
}
.awarded_certified_syr button.slick-arrow {
  display: none;
}
.col_row_clutch_bx:first-child {
  margin-left: 0;
}
.col_row_clutch_bx {
  background: #f0f2f4;
  vertical-align: top;
  border-radius: 15px;
}
.box-clutchawd {
  position: relative;
  padding: 20px 20px 35px;
}
.box-clutchawd p {
  color: #545454;
  font-size: 14px;
  margin-top: 10px;
  text-align: left;
}
.box-clutchawd a {
  display: inline-block;
  color: #9a9d9f;
  padding: 0;
  transition: all 0.3s;
  border-radius: 45px;
  transition: none;
  background: #ffffff;
  border: 1px solid #cacdcf;
  height: 43px;
  width: 43px;
  text-align: center;
  line-height: 40px;
}
.box-clutchawd a::before{
  content: "+";
  font-weight: 600;
}
.box-clutchawd img {
  max-height: 30px;
}
.btn-arow {
  position: absolute;
  right: 0;
  border-radius: 30px 0 0 0;
  bottom: 0;
  background-color: #fff;
  padding: 35px 31px 0;
}
.btn-arow:before {
  height: 40px;
  width: 20px;
  content: "";
  position: absolute;
  left: -19px;
  top: 2px;
  bottom: initial;
  -webkit-border-radius: 0;
  border-radius: 0;
  border-bottom-right-radius: 20px;
  box-shadow: 0 20px 0 0 #fff;
}

.about_certified_right img{
    width: 550px;
    height: auto;
}

.btn-arow:after {
  height: 27px;
  width: 20px;
  content: "";
  position: absolute;
  right: 0;
  top: -27px;
  -webkit-border-radius: 0;
  border-radius: 0;
  border-bottom-right-radius: 20px;
  box-shadow: 0 13px 0 0 #fff;
}
.box-clutchawd a:hover {
  color: #fff;
  background: #ff8c00;
}
.box-clutchawd a:hover i {
  transform: rotate(-40deg);
}
@media (prefers-reduced-motion: no-preference) {
  .image-animation {
    animation: 0.8s enter-animation;
  }
}
@media (max-width: 1366px) {
  .content1366 {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (max-width: 1180px) {
  .content1366 {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .content1366 {
    padding-left: 10px;
    padding-right: 10px;
  }
  .awarded_certifiedy_slider img{
    width: 50px;
  }
  .about_certified_right img{
    width: -webkit-fill-available;
  }
  .padding_top60 {
    padding-top: 30px;
  }
  .text_cnt_certified {
    display: block;
  }
  .hed-same-cls {
    font-size: 17px;
    padding: 10px 0 0px;
    text-align: center;
    line-height: 30px;
  }
  h6.borline {
    padding: 29px 0 5px;
    background-position: center bottom;
    text-align: center;
    font-size: 34px;
    line-height: 14px;
  }
  p.textp {
    text-align: center;
    font-size: 12px;
  }
  .about_certified_left,
  .about_certified_right {
    width: 100%;
  }
  .about_certified_right {
    padding: 30px 0 0;
  }
  .awarded_certified_outer.padding_top60 {
    padding: 0;
  }
  .col_row_clutch_bx {
    display: block;
    width: 100%;
    margin: 0 0 25px;
  }
  .awarded_certified_syr .award_itm a img {
    max-width: 95px;
  }
  .row_clutch_awarded {
    display: block;
    padding: 20px 0 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .hed-same-cls {
    font-size: 42px;
  }
  .about_certified_left {
    width: 56%;
  }
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
  .awarded_certified_cont {
    display: block;
    width: 100%;
  }
}


/* Design-5 */


        .testimonials-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .testimonials-header {
            display: flex;
            align-items: center;
            gap: 40px;
            margin-bottom: 40px;
        }

        .header-left {
            flex: 0 0 auto;
            width: 17%;
        }

        .testi-head {
            font-size: 28px;
            font-weight: 500;
            color: #000000;
            margin-bottom: 40px;
            line-height: 1.2;
            letter-spacing: 1px;
        }

        .rating-summary {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 15px;
        }

        .rating-label {
            font-size: 16px;
            font-weight: 500;
            color: #202124;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .stars-container {
            display: flex;
            gap: 4px;
            color: #f6bb08;
            font-size: 27px;
        }

    
        .rating-text {
            font-size: 14px;
            color: #5f6368;
        }

        .google-logo {
            width: 80px;
            height: auto;
            margin-top: 10px;
        }

        .carousel-container {
            flex: 1;
            position: relative;
            overflow: hidden;
        }

        .carousel-track {
            display: flex;
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            gap: 20px;
        }

        .testimonial-card {
            flex: 0 0 calc(25% - 15px);
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            border: 1px solid #e8eaed;
            position: relative;
        }

        .card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }

        .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4285f4, #34a853);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 18px;
        }

        .reviewer-info {
            flex: 1;
        }

        .reviewer-name {
            font-size: 14px;
            font-weight: 500;
            color: #202124;
            margin-bottom: 2px;
        }

        .review-date {
            font-size: 14px;
            color: #5f6368;
        }

        .google-icon {
            width: 20px;
            height: 20px;
        }

        .card-stars {
            margin-bottom: 10px;
            color: #f6bb08;
            font-size: 18px;
        }


        .verified-icon {
            width: 16px;
            height: 16px;
            margin-left: 4px;
        }

        .review-text {
            font-size: 14px;
            line-height: 1.5;
            color: #3c4043;
            margin-bottom: 12px;
        }

        .read-more {
            color: #1a73e8;
            font-size: 14px;
            text-decoration: none;
            font-weight: 500;
        }

        .read-more:hover {
            text-decoration: underline;
        }
/* Tablet Large - 1024px and below */
@media (max-width: 1024px) {
    .testimonials-container {
        padding: 30px 15px;
    }
    
    .testimonials-header {
        gap: 30px;
        margin-bottom: 30px;
    }
    
    .header-left {
        width: 20%;
    }
    
    .testi-head {
        font-size: 42px;
        margin-bottom: 30px;
    }
    
    .testimonial-card {
        flex: 0 0 calc(33.333% - 14px);
    }
}

/* Tablet - 768px and below */
@media (max-width: 768px) {
    .testimonials-container {
        padding: 25px 15px;
    }
    
    .testimonials-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        margin-bottom: 25px;
    }
    
    .header-left {
        width: 100%;
    }
    
    .testi-head {
        font-size: 36px;
        margin-bottom: 25px;
    }
    
    .rating-summary {
        align-items: center;
        flex-direction: row;
        gap: 20px;
        width: 100%;
        justify-content: space-between;
    }
    
    .carousel-container {
        width: 100%;
    }
    
    .testimonial-card {
        flex: 0 0 calc(50% - 10px);
        padding: 20px;
    }
    
    .carousel-track {
        gap: 15px;
    }
}

/* Mobile Large - 480px and below */
@media (max-width: 480px) {
    .testimonials-container {
        padding: 20px 10px;
    }
    
    .testimonials-header {
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .testi-head {
        font-size: 28px;
        margin-bottom: 20px;
    }
    
    .rating-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .rating-label {
        font-size: 14px;
    }
    
    .stars-container {
        gap: 3px;
    }
    
    .star-img {
        width: 20px;
        height: 20px;
    }
    
    .google-logo {
        width: 70px;
        margin-top: 5px;
    }
    
    .testimonial-card {
        flex: 0 0 calc(100% - 10px);
        padding: 18px;
    }
    
    .carousel-track {
        gap: 10px;
    }
    
    .card-header {
        gap: 10px;
        margin-bottom: 14px;
    }
    
    .avatar {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
    
    .reviewer-name {
        font-size: 15px;
    }
    
    .review-date {
        font-size: 13px;
    }
    
    .google-icon {
        width: 18px;
        height: 18px;
    }
    
    .card-star {
        width: 14px;
        height: 14px;
    }
    
    .review-text {
        font-size: 13px;
    }
    
    .read-more {
        font-size: 13px;
    }
}

/* Mobile Small - 320px and below */
@media (max-width: 320px) {
    .testimonials-container {
        padding: 15px 8px;
    }
    
    .testi-head {
        font-size: 24px;
        margin-bottom: 15px;
    }
    
    .testimonial-card {
        padding: 16px;
    }
    
    .avatar {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
    
    .reviewer-name {
        font-size: 14px;
    }
    
    .review-date {
        font-size: 12px;
    }
    
    .review-text {
        font-size: 12px;
    }
    
    .read-more {
        font-size: 12px;
    }
    
    .google-logo {
        width: 60px;
    }
    
    .star-img {
        width: 18px;
        height: 18px;
    }
}



/* Design-7 */

.faq-container {
            padding: 10px 120px 60px;
        }

        .faq-title {
            text-align: center;
            font-size: 28px;
            font-weight: 500;
            color: #000000;
            margin-bottom: 30px;
            letter-spacing: 1px;
        }

        .faq-item {
            background: white;
            border: 1px solid #e1e8ed;
            border-radius: 12px;
            margin-bottom: 16px;
            overflow: hidden;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .faq-item:hover {
            border-color: #3498db;
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.1);
            transform: translateY(-2px);
        }

        .faq-question {
            padding: 24px 28px;
            font-size: 1.1rem;
            font-weight: 600;
            color: #2c3e50;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }

        .faq-icon {
            font-size: 1.2rem;
            color: #7f8c8d;
            transition: transform 0.3s ease, color 0.3s ease;
            flex-shrink: 0;
            margin-left: 16px;
        }

        .faq-item:hover .faq-icon {
            color: #3498db;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.4s ease;
            background-color: #fafbfc;
        }

        .faq-answer-content {
            padding: 0 28px 24px 28px;
            color: #5a6c7d;
            font-size: 0.95rem;
            line-height: 1.7;
        }

        .faq-item:hover .faq-answer {
            max-height: 200px;
            padding-top: 8px;
        }

        .faq-item.expanded .faq-answer {
            max-height: 200px;
            padding-top: 8px;
        }

        .faq-item.expanded .faq-icon {
            color: #3498db;
        }

        @media (max-width: 768px) {
            .faq-title {
                font-size: 2rem;
                margin-bottom: 30px;
            }

            .faq-question {
                padding: 20px 20px;
                font-size: 1rem;
            }

            .faq-answer-content {
                padding: 0 20px 20px 20px;
                font-size: 0.9rem;
            }

            .faq-icon {
                margin-left: 12px;
            }
        }