* {
  box-sizing: border-box;
}
        .main-container {
            display: flex;
            flex-direction: column;
            /* width: 100%; */
        }
        
        .content-wrapper {
            /* width: 100%; */
            margin: 0 auto;
            padding: 0 0 0 16px;
        }
        
        .hero-section {
            /* width: 100%; */
            position: relative;
        }
        
        .hero-image {
            /* width: 100%; */
            height: 200px;
            object-fit: cover;
        }
        
        .hero-content {
            background-color: #997755;
            /* width: 100%; */
            padding: 16px;
            display: flex;
            align-items: center;
        }
        
        .hero-title {
            font-size: 24px;
            font-weight: 700;
            line-height: 1.2;
            color: #ffffff;
            text-align: center;
            width: 90%;
            max-width: 1722px;
        }
        
        .intro-text {
            line-height: 1.3;
            color: #000000;
            margin-top: 16px;
        }
        .intro-text p{
            font-size: 18px;
        }
        
        .table-of-contents {
            background-color: #d4d0cb;
            border-radius: 20px;
            padding: 24px;
            margin: 16px;
            margin-top: 32px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .toc-title {
            font-size: 28px;
            font-weight: 700;
            line-height: 1.2;
            color: #000000;
        }
        
        .toc-divider {
            width: 4px;
            height: 200px;
            background-color: #aa8357;
            display: none;
        }
        
        .toc-content {
            font-size: 16px;
            font-weight: 400;
            line-height: 1.3;
            color: #000000;
            white-space: pre-line;
        }
        
        .section-header {
            position: relative;
            margin-top: 32px;
        }
        
        .section-bg {
            /* width: 100%; */
            height: 60px;
            object-fit: cover;
        }
        
        .section-title {
            font-size: 24px;
            font-weight: 700;
            line-height: 1.3;
            color: #000000;
            z-index: 2;
        }
        
        .content-section {
            background-color: #eeeeec;
            /* width: 100%; */
            padding: 24px 16px;
        }
        
        .content-row {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: center;
        }
        
        .content-text {
            font-size: 16px;
            font-weight: 400;
            line-height: 1.2;
            color: #000000;
        }
        
        .content-image {
            /* width: 100%; */
            height: auto;
        }
        
        .advantages-section {
            background-color: #eeeeec;
            /* width: 100%; */
            padding: 24px 16px;
        }
        
        .advantages-content {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        .hero-content h2{
          color: #ffffff;
          font-size: 34px;
        }
        
        .advantages-row {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .content-text.advantages-text{
            flex: 0 0 40%;
        }
        .advantages-row article{
            flex: 0 0 60%;
        }
        .comparison-table {
            background-color: #eeeeec;
            margin: 16px;
            margin-top: 30px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }
        
        .table-header {
            background-color: #8a8885;
            height: 50px;
            /* width: 100%; */
        }
        
        .table-content {
            padding: 16px;
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }
        
        .table-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 8px;
            text-align: center;
            font-size: 14px;
        }
        
        .table-cell {
            padding: 8px;
            font-size: 14px;
            line-height: 1.2;
        }
        
        .table-header-cell {
            font-weight: 700;
            color: #ffffff;
        }
        
        .fact-box {
            background-color: #000000;
            /* width: 100%; */
            padding: 24px 16px;
            margin-top: 40px;
        }
        
        .fact-content {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: center;
        }
        .fact-text-section{
                flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
        }
          .comparison-table table {
    border-collapse: collapse;
    width: 100%;
  }
  .comparison-table th, .comparison-table td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    white-space: pre-wrap;
  }
  .comparison-table thead th {
    background-color: #8a8885;
    color: white;
  }
  .comparison-table tbody tr {
    background-color: #eeeeec;
  }
 .title-section p{
    font-size: 36px;
  }

        
        .fact-text-section .fact-title p,.fact-description p {
          color: #eeeeec;
        }
        .fact-text-section .fact-title p{
            font-size: 36px;
        }
        
        .fact-title {
            font-size: 24px;
            font-weight: 700;
            line-height: 1.3;
            color: #ffffff;
        }
        
        .fact-description {
            font-size: 16px;
            font-weight: 400;
            line-height: 1.2;
            color: #ffffff;
        }
        
        .cta-button {
            background-color: #a98357;
            border-radius: 20px;
            padding: 12px 24px;
            margin: 32px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            width: fit-content;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .cta-button:hover {
            background-color: #8a6b47;
            transform: scale(1.05);
        }
        
        #cta-ai-blog .cta-text {
            font-size: 24px;
            font-weight: 700;
            line-height: 1.3;
            color: #ffffff;
            text-align: center;
        }
        
        .faq-section {
            background-color: #d4d0cb;
            border-radius: 20px;
            padding: 24px;
            margin: 16px;
            margin-top: 40px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            align-items: stretch;
        }
        
        .faq-title {
            line-height: 1.3;
            color: #000000;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .faq-title p{
          font-size: 36px;
          line-height: 1.3;
        }
        
        .faq-divider {
            width: 4px;
            height: auto;
            background-color: #aa8357;
            display: none;
        }
        
        .faq-content {
            font-size: 16px;
            font-weight: 400;
            line-height: 1.2;
            color: #000000;
            white-space: pre-line;
            display: flex;
            align-items: center;
        }
        
        .underline {
            text-decoration: underline;
        }
        .node--type-ai-blog-template ul li{
            list-style-type: disc;
        }
        
        /* Responsive media queries */
        @media (min-width: 640px) {
            .content-wrapper {
                padding: 0 0 0 24px;
            }
            
            .hero-image {
                height: 250px;
            }
            
            .hero-title {
                font-size: 32px;
            }
            
            .intro-text {
                font-size: 18px;
            }
            
            .table-of-contents {
                padding: 32px;
                margin: 24px;
            }
            
            .toc-title {
                font-size: 36px;
            }
            
            .toc-content {
                font-size: 18px;
            }
            
            .section-title {
                font-size: 32px;
                left: 24px;
            }
            
            .content-section {
                padding: 32px 24px;
            }
            
            .content-text {
                font-size: 18px;
            }
            
            .advantages-section {
                padding: 32px 24px;
            }
            
            .table-cell {
                font-size: 16px;
            }
            
            .fact-box {
                padding: 32px 24px;
            }
            
            .fact-title {
                font-size: 32px;
            }
            
            .fact-description {
                font-size: 18px;
            }
            
            .cta-text {
                font-size: 20px;
            }
            
            .faq-section {
                padding: 32px;
                margin: 24px;
            }
            
            .faq-title {
                font-size: 36px;
            }
            
            .faq-content {
                font-size: 18px;
            }
        }
        @media (max-width: 768px) {
         .fact-box img{
          height: 300px;
          width: 300px;
         }
        .field--name-field-ai-blog-paragraphs p{
            line-height: 35px;
         }
        }
        
        @media (min-width: 768px) {
            .content-wrapper {
                padding: 0 0 0 32px;
            }
            
            .hero-image {
                height: 300px;
            }
            
            .hero-title {
                font-size: 42px;
            }
            
            .intro-text {
                font-size: 20px;
            }
            
            .table-of-contents {
                flex-direction: row;
                align-items: flex-start;
                gap: 24px;
            }
            
            .toc-title {
                font-size: 42px;
                width: 25%;
            }
            
            .toc-divider {
                display: block;
                height: 300px;
            }
            
            .toc-content {
                font-size: 20px;
                width: 70%;
            }
            
            .section-title {
                font-size: 36px;
                left: 32px;
            }
            
            .content-row {
                flex-direction: row;
                align-items: flex-start;
            }
            
            .content-text {
                font-size: 20px;
                width: 40%;
            }
            
            .content-image {
                width: 60%;
                max-width: none;
            }
            
            .advantages-row {
                flex-direction: row;
                align-items: flex-start;
            }
            
            .table-content {
                padding: 24px;
            }
            
            .table-cell {
                font-size: 18px;
                padding: 12px;
            }
            
            .fact-content {
                flex-direction: row;
            }
            
            .fact-text-section {
                width: 40%;
            }
            
            .fact-title {
                font-size: 36px;
            }
            
            .fact-description {
                font-size: 20px;
            }
            
            .faq-section {
                flex-direction: row;
                gap: 60px;
            }
            
            .faq-title {
                font-size: 42px;
                width: 20%;
            }
            
            .faq-divider {
                display: block;
                height: auto;
            }
            
            .faq-content {
                font-size: 20px;
                width: 75%;
            }
        }
        
        @media (min-width: 1024px) {
            .content-wrapper {
                padding: 0 0 0 48px;
            }
            
            .hero-image {
                height: 450px;
            }
            
            .hero-content {
        padding: 26px 26px 26px 48px;
              }
            
            .hero-title {
                font-size: 36px;
                line-height: 80px;
            }
            
            .intro-text {
                font-size: 28px;
                line-height: 45px;
                margin-top: 26px;
                margin: 40px 99px 0 0;
            }
              .title-section{
                 margin: 50px 99px 50px 0;
            }
            
            .table-of-contents {
                padding: 46px 62px;
                margin: 16px;
            }
            
            .toc-title {
                font-size: 32px;
                line-height: 80px;
                width: 18%;
            }
            
            .toc-divider {
                height: 476px;
            }
            
            .toc-content {
                font-size: 35px;
                line-height: 45px;
                width: 72%;
            }
            
            .section-header {
                margin-top: 64px;
            }
            
            .section-bg {
                height: 104px;
            }
            
            .section-title {
                font-size: 32px;
                line-height: 66px;
                left: 100px;
            }
            
            .content-section {
                padding: 0;
            }
            
            .content-row {
                padding: 0 100px;
                gap: 52px;
            }
            
            .content-text {
                font-size: 24px;
                line-height: 40px;
                width: 34%;
            }
            
            .content-image {
                width: 60%;
            }
            
            .advantages-section {
                padding: 0;
            }
            
            .advantages-content {
                gap: 32px;
            }
            
            
            .advantages-text {
                font-size: 24px;
                line-height: 40px;
                width: 36%;
                padding-top: 30px;
            }
            
            .advantages-image {
                width: 64%;
            }
            
            .advantages-description {
                font-size: 24px;
                line-height: 40px;
                width: 97%;
            }
            
            .comparison-table {
                margin: 30px 48px 0 0px;
            }
            
            .table-header {
                height: 92px;
            }
            
            .table-content {
                padding: 0;
                position: relative;
            }
            
            .table-cell {
                font-size: 24px;
                line-height: 40px;
                padding: 26px 0;
            }
            
            .fact-box {
                margin-top: 68px;
                padding: 0 0;
            }
            
            .fact-content {
                /* padding: 0 100px; */
                gap: 0;
            }
            
            .fact-text-section {
                width: 34%;
            }
            
            .fact-title {
                font-size: 36px;
                line-height: 66px;
            }
            
            .fact-description {
                font-size: 24px;
                line-height: 40px;
                width: 92%;
            }
            
            .cta-button {
                margin: 54px auto 0;
                padding: 8px;
                width: 54%;
            }
            
            .cta-text {
                font-size: 30px;
                line-height: 53px;
            }
            
            .faq-section {
                padding: 40px 62px;
                margin: 74px 48px 0 0;
            }
            
            .faq-title {
                font-size: 36px;
                line-height: 92px;
                width: auto;
            }
            
            .faq-divider {
                height: auto;
            }
            
            .faq-content {
                font-size: 24px;
                line-height: 40px;
                width: 80%;
                margin-bottom: 14px;
            }
        }
        
        @media (min-width: 1280px) {
            .hero-title {
                font-size: 36px;
            }
        }
.hero-section img{
        height: calc(50vh - 115px);
    width: 100%;
}
.advantages-section img,.fact-box img{
  width: 100%;
  height: auto;
  display: block;
}
.fact-content .fact-text-section{
    flex: 0 0 40%;
}
.fact-content article{
    flex: 0 0 60%;
}
.comparison-table th span,.comparison-table td span{
     text-align: center;
    justify-content: center;
    display: block;
}