/* CSS */
:root {
    
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */

    --text-color: #2b2b2b;

    --violet-300: #D6D5FC;

    --yellow-300: #F9E3BD;

    --green-300: #D4EEAE;

    --blue-300: #BDE0F9;

  }
  @supports (font-variation-settings: normal) {
    :root { font-family: InterVariable, sans-serif; }
  }


  /* This is set per font */
@font-feature-values "Inter" {
    /* salt feature */
    @stylistic {
        /* 
        'on' is the value which we'll use in styles, while
        1 is what will be passed to OpenType font.
         */
        on: 1;
        off: 0;
    }
 
    /* ss01, ss02, ... */
    @styleset {
        /* 
        alt-digits is the name for the set we'll use in styles,
        while 1 is its number (translates to ss01)
        */
        alt-digits: 1;
        disambiguation: 2;
    }
 
    /* cv01, cv02, ... */
    @character-variant {
        /* 
        This notation is a bit different: here, simplified-u will be used
        in styles, but 6 means that it should enable sixth character
        variant, OpenType feature cv06
        */
        simplified-u: 6;
        compact-f: 12;
        capital-G-with-Spur: 10;
        single-story-a: 11;

        uppercase-I-serif: 8;
        lowercase-L-tail:5;
        slashed-zero: zero;

    }



}
  

  
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    /* vertical-align: baseline; */
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

section{
    padding:0 2rem;
}
html {
    font-size: 16px;
}

body {
  

    line-height: 1;
}

main {
    padding: 1.25rem;

}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;

    display: block;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 120%;
}

/* @font-face {
    font-family: Gabarito;
    src: url(Gabarito-Variable.ttf);
  }
   */
  

/* General Styles */
body {
    /* font-family: "Atkinson Hyperlegible", sans-serif; */
    font-family: Inter, sans-serif;
     /* font-variant-alternates: stylistic(off) styleset(alt-digits) character-variant(compact-f,simplified-u); */
     font-variant-alternates: stylistic(off) styleset(disambiguation) ;



  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
/* 
    font-family: Gabarito, sans-serif; */
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1px;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    font-size: 1.125rem;

    background-color: #FBFBFB;

    /* text-wrap: pretty; */
}

.margin-top-0-5{
    margin-top:0.5rem;
}

.container {
    display: flex;
    flex-direction: column;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

img{
    width: 100%;
}

img.logo{

    max-width: 220px;
  }


/* Navigation Bar */
.navbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: var(--text-color);
    padding: 2rem 1rem;
}

.navbar .container {

    width: 100%;
 
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
   
    
}

.navbar a.logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #000;
    text-decoration: none;
    font-size: 1.5rem;
    width: 12rem;
    box-sizing: border-box;
    
}

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

.navbar ul li {
    margin-left: 2rem;
}

.navbar ul li a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 1rem;
}

.navbar ul li a:focus,
.navbar ul li a:hover {
    text-decoration: underline;
}

/* Hero Section */


h1, h2, h3, h4, h5{
    /* font-family: "Atkinson Hyperlegible", sans-serif; */
    font-family: Inter, sans-serif;
    
    /* font-family: Gabarito, sans-serif; */
    font-weight: 600;
    font-style: normal;
    line-height: 1.2;
}

h4, h5{
    font-weight: 600;
    margin-top: 1rem;
}

h2.big-text{
font-size: 1.75rem;
margin-bottom:1rem;
line-height: 120%;
}

.hero {

    height:60vh;
    max-height: 580px;
    text-align: center;
    text-wrap:balance;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    position: relative;
  
}

.hero h1 {
    font-size: 3rem;
    line-height: 110%;
    margin:0 0 1rem 0;
}

.hero p {
    font-size: 1.25rem;
    line-height: 140%;
    margin:1rem 0 1rem 0;
}




.hero .container{
    gap:0rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero .container div{
    max-width: 600px;
}

.hero .icon {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    font-size: 0.8em;
    color: #000;
    z-index: 0;
}

.icon-list {
    position: absolute;
    width: 100%;
    max-width: 1100px;
    height: 100%;
}

.icon img{
    height: 80%;
}

.icon.icon-small{
    width: 30px;
    height: 30px;
}

.hero .icon-1 {
    left: 6%;
    top:15%;
    background-color: var(--violet-300);
}

.hero .icon-2 {
    left: 14%;
    bottom:30%;
    background-color: var(--yellow-300);
}

.hero .icon-3 {
    left: 20%;
    top:25%;
    background-color: var(--green-300);
    padding:0 0.8rem;
}

.hero .icon-4 {
    left: 27%;
    bottom:15%;
    background-color: var(--violet-300);
}

.hero .icon-5 {
    top: 10%;
    left: 37%;
    background-color: var(--blue-300);
    padding:0 0.8rem;
}

.hero .icon-6 {
    top: 14%;
    right: 45%;
    background-color: var(--yellow-300);
}

.hero .icon-7 {
    bottom: 14%;
    right: 35%;
    background-color: var(--yellow-300);
    padding:0 0.8rem;
}

.hero .icon-8 {
    top: 14%;
    right: 28%;
    background-color: var(--violet-300);
    padding:0 0.8rem;
}

.hero .icon-9 {
    bottom: 28%;
    right: 20%;
    background-color: var(--blue-300);
}

.hero .icon-10 {
    bottom: 48%;
    right: 8%;
    background-color: var(--green-300);
}



.hero-article{

    text-align: center;
    text-wrap: balance;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.hero-article h1 {
    font-size: 2.5rem;
    text-align: left;
    margin:2rem 0 1rem 0;
}


.tagList {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag{
    font-size: 0.75rem;
    padding: 0.25rem 1rem;
}

.greenTag {
    font-size: 0.75rem;
    padding: 0.25rem 1rem;
    border-radius: 2rem;
    /* line-height: 2rem; */
    background-color: rgb(229, 244, 213);
    color: rgb(42, 58, 25);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.grayTag {
    font-size: 0.75rem;
    padding: 0.25rem 1rem;
    border-radius: 2rem;

    background-color: rgb(241, 241, 241);
    color: rgb(56, 56, 56);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

/* Blog Article */
.blog-article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 2rem; /* Optional: Adds some padding inside the container */

}

.blog-article h1, .blog-article h2, .blog-article h3, .blog-article h4, .blog-article h5{
    color: #000;
}

.blog-article p {
    margin-top:1.25rem;
}

.blog-article p + p {
    margin-top:2rem;
}

.blog-article h2 {
    font-size: 2.25rem;
    line-height: 120%;

    margin: 3.5rem 0 0.25rem 0;
}

.blog-article h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 2rem 0 0 0;
}

.blog-article h3 + p {
    margin-top: 0.25rem;
}


em {
    color: #7B68D7;
}

.blog-article ul,
.blog-article ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.blog-article ul + p,
.blog-article ol + p {
    margin: 2rem 0 1rem 0;

}




.blog-article ul li,
.blog-article ol li {
    margin-bottom: 0.5rem;
}

.blog-article .grid-1-8{
    display: grid;
    grid-template-columns: 0.5fr 1.5fr; 
    grid-template-rows: 1fr; 
    gap: 0px 0px; 
    grid-template-areas: 
      ". ."; 

      margin-top: 2rem;
}

.blog-article .grid-1-8 h3{
   margin-top:1.5rem;
}

.blog-article .grid-1-8 p + p{
    margin-top:1.25rem;
 }



/* table, td, th {  

   
  } */

table {
    border-collapse: collapse;
    margin: 0.5rem 0 2rem 0;
    overflow-x: auto;
    text-wrap:wrap;
    table-layout: auto;
}

/* table, thead,tbody, tr, td, th{
    width: 100%;
} */

th {
    border: 1px solid #ddd;
    text-align: center;
    line-height: 110%;
    padding: 0.5rem 0.5rem;
}



td{
    border: 1px solid #ddd;
    text-align: center;
    padding: 0.5rem 0.5rem;
  
}

tr:hover {
    background-color: white;
  }



  .firstLocked tr>th:first-child, .firstLocked tr>td:first-child {
    position: sticky;
    left: 0;
    border: 1px solid #ddd;
    background-color: #eee8f0;
  
    text-align: left;
  }

  .firstLocked tr:hover>th:first-child, .firstLocked tr:hover>td:first-child {
    background-color: #f2eef4;
  }

  
  
  .fiveColumns th, .fiveColumns td {
    width:20%;
  }

  .fourColumns th, .fourColumns td {
    width:25%;
  }



.tableCaption, .blog-article p.tableCaption{
 
    text-align: center;
    margin-top:1.5rem;
    font-size: 1rem; 
}


  

  code {
    font-size: 1rem;
    color: #473699;
    background-color: #ece9fa;
    border-radius:0.25rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
    padding: 0.05rem 0.2rem;
    vertical-align: baseline;
}

button {
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    background: #7B68D7;
    border:none;
    border-radius:8px;
    color:white;
}

button:hover{
  background: #6958be;
  color:white;
}

button:focus {
  outline: 2px solid #180864;
  outline-offset: 2px;
}

.info-container {
    background: white;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    border: #DBDBDB 1px solid;
    border-radius: 16px;
    gap:0.5rem;
}

.grid2x2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width:100%;
    grid-gap: 2rem;
    
}


.article-box{
 
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    color:var(--text-color);
    cursor: pointer;

    gap:0.5rem;
}



.empty-article{
    width: 100%;
    aspect-ratio: 2 / 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23E0E0E0FF' stroke-width='4' stroke-dasharray='24' stroke-dashoffset='43' stroke-linecap='round'/%3e%3c/svg%3e");
      border-radius: 8px;
}
.empty-article img{
    width:50px;
}



.article-box h3{
    font-size: 1.25rem;
    padding:0;
    margin:0;
    line-height: 120%;
}

h3.empty{
    color:#969696;
}



footer{
    
    border-top:var(--violet-300) solid 3px;
    margin-top: 4rem;
  
}

footer .container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 1rem;

}
.contacts{
    display: flex;
    flex-direction: column;
    justify-content: start;
}
.contacts p{
    font-weight: 600;
}

.fullwidth{
    width:100%;
    display: flex;
}

footer .fullwidth{
    flex-direction: row;
    justify-content: center;
    align-items: center;
text-align: center;
background-color: var(--violet-300);

padding:0.75rem 0;

font-size: 0.875rem;;
}


.animation-container{
    box-sizing: border-box;
    width: 100%;
    padding:2rem 0;
    margin:2rem 0 0.25rem 0;
    background-color: #322551;
    border-radius: 1rem;
}

.animation-container > div{
height: 300px;;
}


.tipBanner{
    display: flex;
    flex-direction: row;
    gap:0.5rem;
    justify-content: start;
    align-items: start;
    padding:1.5rem;
    margin: 1rem 0 2rem 0;
    background-color: #E5E1FB;
    color:black;
    border-radius: 1rem;
}

.tipBanner .icon{
    width:2rem;
}

.imageCaption {
    font-size: 1rem;
    text-align: center;
    color: #535353;
    margin-bottom: 2rem;
}

.splitting-line{
    width: 100%;
    margin-top:4rem;
    margin-bottom:4rem;
    height:1px;
    background-color: #dedede;
}


.cell-left-top{
    text-align: left;
}

.cell-left-top ul{
    margin:0;
}

.cell-left-top ul li{
    margin:0;
}


@media screen and (max-width: 780px) {

.blog-article .grid-1-8{
    display: grid;
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr; 
    gap: 0px 0px; 
    grid-template-areas: 
      "."; 
      margin-top: 0.5rem;
}




.blog-article .grid-1-8 div p:first-child {
    margin-top: 0.5rem;
}


}


@media screen and (max-width: 600px) {
    table {

        font-size: 0.75rem;
        line-height: 120%;
    }

    html {
        font-size: 14px;
    }
    
    .hero .icon {

        width: 45px;
        height: 45px;

    }
    
        .icon.icon-6{
        right: 15%;
    }
    
    .icon.icon-10{
        right: 0%;
    }

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

    
    }



    @media screen and (max-width: 500px) {


        .icon.icon-1{
            display:none;
        }

        .icon.icon-2{
            left: 8%;
            bottom:24%;
        }

        .icon.icon-3{
            left: 8%;
            top:16%;
        }

        .icon.icon-5{
            left: 35%;
            top:4%;
        }

        .icon.icon-6{
            right: 4%;
            top:8%;
        }

        .icon.icon-7{
            right: 16%;
            bottom:18%;
        }


        .icon.icon-8{
            right: 12%;
            top:15%;
        }


        .icon.icon-9{
            right: 4%;
            bottom:25%;
        }

        .icon.icon-10{
            /* right: 4%;
            bottom:25%; */
        }






    }

@media screen and (max-width: 400px) {
.grid2x2{
    grid-template-columns: 1fr;
    grid-template-rows:  1fr;
    
}

footer .container{
    flex-direction: column;
    gap:2rem
}

}


.why-important {
    padding: 4rem 1rem 2rem 1rem; /* Added padding */
}

.why-important h2 {
    font-size: 2.5rem; /* Slightly larger heading */
    font-weight: 700;
    color: #6A5ACD; /* Purple color, adjust if needed */
    text-align: center;
    margin-bottom: 2.5rem;
    line-height: 1.2;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns on wider screens */
    gap: 2.5rem; /* Gap between grid items */
    max-width: 920px; /* Consistent max width */
    margin: 0 auto; /* Center the grid if container is wider */
}

.benefit-item {
    /* Add background/border if desired, currently clean */
    /* background-color: #fff; */
    /* border: 1px solid #eee; */
    /* border-radius: 8px; */
    /* padding: 1.5rem; */
}

.benefit-item h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 0.75rem 0; /* Adjusted margin */
    line-height: 1.3;
}

.benefit-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0; /* Reset margin if needed */
}

/* =========================
   EAA Banner Section Styles
   ========================= */

.eaa-banner {
    background-color: #E0F2FE; /* Light blue background from image */
    padding: 3rem 1rem;
    margin-top: 3rem; /* Space above the banner */
}

.eaa-container {
    display: flex;
    flex-direction: row; /* Side-by-side layout */
    align-items: center;
    gap: 2.5rem; /* Gap between logo and text */
}

.eaa-logo {
    flex-shrink: 0; /* Prevent logo from shrinking */
    width: 180px; /* Control logo size */
}

.eaa-logo img {
    display: block; /* Remove extra space below image */
    width: 100%;
    height: auto;
}

.eaa-text {
    flex-grow: 1; /* Allow text to take remaining space */
}

.eaa-text h4 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

.eaa-text strong {
    font-weight: 700; /* Make date bold */
}

.eaa-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0 0 1.5rem 0; /* Margin below paragraph */
}

.eaa-cta {
    display: flex;
    flex-direction: row; /* Keep text and button in a row */
    align-items: center;
    gap: 1rem; /* Gap between text and button */
    flex-wrap: wrap; /* Allow button to wrap below text on small screens */
}

.eaa-cta p {
    margin: 0; /* Remove default margin */
    font-size: 1rem;
    line-height: 1.5;
}

.eaa-cta .cta-button {
    display: inline-block; /* Make it behave like a button */
    padding: 10px 20px; /* Slightly smaller padding than default button */
    font-size: 1rem;
    font-weight: 500; /* Medium weight */
    cursor: pointer;
    background: #7B68D7; /* Match existing button color */
    border: none;
    border-radius: 8px;
    color: white;
    text-decoration: none; /* Remove underline from link */
    text-align: center;
    transition: background-color 0.2s ease; /* Smooth hover effect */
}

.eaa-cta .cta-button:hover {
  background: #6958be; /* Match existing button hover */
  color: white;
}

.eaa-cta .cta-button:focus {
  outline: 2px solid #180864; /* Match existing button focus */
  outline-offset: 2px;
}


/* =========================
   Responsive Adjustments for New Sections
   ========================= */

@media screen and (max-width: 768px) {
    .why-important h2 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr; /* Stack items in a single column */
        gap: 2rem;
    }

    .eaa-container {
        flex-direction: column; /* Stack logo and text vertically */
        text-align: center; /* Center text when stacked */
        gap: 1.5rem;
    }

    .eaa-logo {
        width: 100px; /* Slightly smaller logo on mobile */
        margin-bottom: 1rem; /* Add space below logo when stacked */
    }

    .eaa-text h4 {
        font-size: 1.5rem;
    }

     .eaa-cta {
        justify-content: center; /* Center CTA items when stacked */
        gap: 0.75rem; /* Reduce gap */
    }

     .eaa-cta p {
        margin-bottom: 0.75rem; /* Add space below text when button wraps */
        width: 100%; /* Make text take full width */
    }

}


@media screen and (max-width: 480px) {
    .why-important {
        padding: 2.5rem 1rem 1.5rem 1rem;
    }

     .why-important h2 {
        font-size: 1.8rem;
    }

     .benefit-item h3 {
        font-size: 1.2rem;
    }

    .eaa-banner {
        padding: 2rem 1rem;
    }

    .eaa-text h4 {
        font-size: 1.3rem;
    }

    .eaa-text p,
    .eaa-cta p,
    .eaa-cta .cta-button {
        font-size: 0.95rem; /* Slightly smaller text on very small screens */
    }

    .eaa-cta .cta-button {
         padding: 8px 16px;
    }

}


/* Add the following styles at the end of the file to ensure they override */
/* Make email link in footer look like normal text unless hovered/focused */
footer .contacts a {
    color: inherit; /* Inherit text color from parent */
    text-decoration: none; /* Remove underline by default */
}

footer .contacts a:hover,
footer .contacts a:focus {
    text-decoration: underline; /* Add underline on hover/focus */
    color: #7B68D7; /* Optional: change color on interaction */
}

/* Add missing alt attributes or make them descriptive */
/* Example for article image */
.article-box img[src="img/modalas-straipsnis-hero.png"] {
    /* If the image is decorative, alt="" is fine. */
    /* If it conveys information, describe it: */
    /* alt: "Pavyzdys dialogo lango sąsajos pritaikytos ekrano skaityklėms"; */
     alt: ""; /* Assuming decorative for now */
}
.empty-article img {
    /* These seem purely decorative */
    alt: "";

}


.services-section {
    padding: 4rem 1rem; /* Add vertical padding */
    /* background-color: #f8f8f8; */ /* Optional: subtle background */
}

.services-container {
    display: grid;
    /* grid-template-columns: 1fr 2fr; /* Heading takes 1 part, list takes 2 */
    grid-template-columns: 0.8fr 1.2fr; /* Give heading slightly less space */
    gap: 3rem; /* Gap between heading and list */
    align-items: start; /* Align items to the top */
}

.services-heading h2 {
    font-size: 3rem; /* Large heading */
    font-weight: 700;
    color: #98D77B; /* Green color from image */
    line-height: 1.2;
    /* Optional: slight rotation like image, but consider readability */
    /* transform: rotate(-2deg); */
    margin: 0; /* Remove default margins */
    padding-top: 0.5rem; /* Align top visually with first service item */
}

.services-list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* Space between service items */
}

.service-item {
    /* Optional: Add border or background if needed */
    /* border-left: 3px solid var(--green-300); */
    /* padding-left: 1.5rem; */
}

.service-item h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.service-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0 0 1rem 0; /* Margin below paragraph */
}
.service-item p:last-child {
    margin-bottom: 0; /* Remove margin if it's the last element */
}

.service-item ul {
    list-style: disc; /* Use standard bullet points */
    margin: 0.5rem 0 1rem 1.5rem; /* Indentation and spacing */
    padding: 0;
}

.service-item li {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 0.5rem; /* Space between list items */
}
.service-item li:last-child {
    margin-bottom: 0;
}

/* =========================
   Responsive Adjustments for Services Section
   ========================= */

@media screen and (max-width: 768px) {
    .services-container {
        grid-template-columns: 1fr; /* Stack heading and list */
        gap: 2rem; /* Reduce gap */
    }

    .services-heading {
        text-align: center; /* Center the heading text */
    }

    .services-heading h2 {
        font-size: 2.5rem; /* Slightly smaller heading */
        padding-top: 0; /* Reset padding */
         /* transform: rotate(0deg); /* Remove rotation on mobile */
    }

    .services-list {
        gap: 2rem; /* Adjust gap for stacked items */
    }
}

@media screen and (max-width: 480px) {
    .services-section {
        padding: 2.5rem 1rem;
    }

    .services-heading h2 {
        font-size: 2rem;
    }

    .service-item h3 {
        font-size: 1.2rem;
    }

    .service-item p,
    .service-item li {
        font-size: 0.95rem;
    }
}



.page-header {
    padding: 3rem 1rem 2rem 1rem; /* Adjust padding as needed */
    /* background-color: #f0f0f0; */ /* Optional: subtle background */
    text-align: center; /* Center heading */
    border-bottom: 1px solid #eee; /* Optional separator */
    margin-bottom: 2.5rem; /* Space below header */
}

.page-header h1 {
    font-size: 2.5rem; /* Adjust size */
    line-height: 1.2;
    color: var(--text-color);
    margin: 0;
    text-wrap: balance; /* Improve title wrapping */
}


/* =========================
   Main Content Page Styles
   ========================= */
/* Use this class on the <main> element of inner pages */
.main-content-page {
    padding: 0 1rem 3rem 1rem; /* Add padding, especially at the bottom */
}

/* Adjust spacing for headings, paragraphs, lists within the main content */
.main-content-page .container h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 2.5rem 0 1rem 0;
    line-height: 1.3;
}

.main-content-page .container h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 2rem 0 0.75rem 0;
    line-height: 1.3;
}

.main-content-page .container p {
    font-size: 1.1rem; /* Slightly larger base font for readability */
    line-height: 1.7; /* Increased line height */
    margin: 0 0 1.25rem 0;
}

.main-content-page .container ul {
    list-style: disc;
    margin: 0 0 1.25rem 1.5rem; /* Indentation and bottom margin */
    padding: 0;
}

.main-content-page .container li {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 0.6rem; /* Space between list items */
}

.main-content-page .container ul + p {
    margin-top: 1.5rem; /* Space after a list before a paragraph */
}

/* Style for the final Call to Action button section */
.cta-section {
    margin-top: 2.5rem; /* Space above the button */
    text-align: center; /* Center the button */
}

.cta-section .cta-button {
    /* Reuse existing button styles if .cta-button is defined globally */
    /* If not, add styles similar to .eaa-cta .cta-button */
    display: inline-block;
    padding: 12px 24px;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    background: #7B68D7;
    border: none;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease;
}

.cta-section .cta-button:hover {
  background: #6958be;
  color: white;
}

.cta-section .cta-button:focus {
  outline: 2px solid #180864;
  outline-offset: 2px;
}

/* Responsive adjustments for page header */
@media screen and (max-width: 600px) {
    .page-header {
        padding: 2rem 1rem 1.5rem 1rem;
        margin-bottom: 1.5rem;
    }
    .page-header h1 {
        font-size: 2rem;
    }

    .main-content-page .container h2 {
         font-size: 1.6rem;
         margin-top: 2rem;
    }
     .main-content-page .container h3 {
         font-size: 1.2rem;
         margin-top: 1.5rem;
    }
     .main-content-page .container p,
     .main-content-page .container li {
         font-size: 1rem;
         line-height: 1.6;
     }

}