/*
 Theme Name:   Tico Libre Pro
 Theme URI:    https://ticolibre.com
 Description:  StyleSheet for TicoLibre Quizzes
 Author:       Manuel Campos (TicoLibre)
 Author URI:   https://ticolibre.com
 Template:     TicoLibre
 Version:      2.0
*/


/*CSS Reset*/
blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0;border:0}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}main{display:block}progress{vertical-align:baseline}*,::after,::before{box-sizing:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;margin:0}


/* 101 */
    .homepage-container {
        max-width: 1200px;
        margin: 0 auto;
        padding-top: 50px;
    }
    .homepage-h2 {
        color: #2c3e50;
        text-align: center;
        position: relative; /* Required for absolute positioning of the pseudo-element */
        padding-bottom: 5px; /* Space for the pseudo-element */
    }
    .homepage-h2::after {
        content: ''; /* Required for pseudo-element */
        display: block;
        width: 45px; /* Width of the border */
        height: 3px; /* Height of the border */
        background-color: red; /* Color of the border */
        margin: 0 auto; /* Center the border */
        position: absolute; /* Position relative to the h2 */
        left: 50%; /* Center it horizontally */
        transform: translateX(-50%); /* Adjust to truly center */
        bottom: -10px; /* Adjust to create space below the border */
    }
    .homepage-pre-heading {
        color: #FF1949;
        text-align: center;
        font-size: 18px;
        font-weight:700;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .description {
        text-align: center;
        font-size: 18px;
        margin-bottom: 30px;
        max-width: 1100px;
        margin: 0 auto;
        margin-top: 25px;
        margin-bottom: 35px;
    }

/* 102 */

body.page {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    width: 100%; /* Ensure the body spans the full width of the container */
    max-width: 100%; /* Ensure it doesn't exceed the container's width */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.hero {
    margin-top: -20px;
    padding: 0;
    background-color: #223382; 
    padding: 2rem;
    position: relative;
    overflow: hidden;
    color: white;
    width: 100vw; /* Use viewport width to ensure full width */
    left: 50%; /* Center the element */
    right: 50%; /* Center the element */
    margin-left: -50vw; /* Offset to make it full width */
    margin-right: -50vw; /* Offset to make it full width */
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #223382;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 2px);
  background-size: 60px 60px;
  opacity: 0.2;
}



.container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding-right:35px;
    padding-left:35px;
}


    .content {
        margin-top:135px;
        margin-bottom:190px;
        max-width: 1000px;
    }

   .content h1 {
        font-size: 45px;
        margin-bottom: 1rem;
        color: #fff;
        line-height: 1.5;
    }

    .content h2 {
        font-size: 18px;
        font-weight: normal;
        margin-bottom: 1.5rem;
       line-height: 2;
        color: #fff;
    }

     .content p {
        margin-bottom: 2rem;
        font-size:18px;
       line-height: 2;
    }

    .cta-buttons {
        display: flex;
        gap: 1rem;
        margin-top: 20px !important;
        margin-bottom: 10px !important;
        
    }

    .cta-button {
        background-color: #FF1849;
        color: white;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 14px;
        font-weight: bold;
        cursor: pointer;
        text-decoration: none;
    }

    .cta-button:hover {
        background-color: #FF1849;
    }





/* 107 */
  .my-site-header, header {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    background-color: transparent;
}