/*
Theme Name: eDreams Blog New Theme
Author: Agustin Hernan Ponce
Description: Customizable theme for eDreams Blog.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: edreams-blog-new-theme
*/



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-color: #FFD633 #ffffff;
    scrollbar-width: auto;
    
}

::placeholder { color: #005DAD; }

strong {
    font-weight: 500;
}


body {
    font-family: 'Rubik', sans-serif;
    padding-top: 0px !important; /* Space for fixed navbar */
    background-color: #fff;
    scrollbar-gutter: stable; /* Mantener espacio reservado para la barra */
}


body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-thumb {
    background-color: #FFD633; /* Color del pulgar (thumb) */
    border-radius: 4px;
}

body::-webkit-scrollbar-track {
    background-color: #fff; /* Color de fondo de la pista (track) */
}

 section {
    width: 100%; /* Para que ocupe el ancho completo disponible */
    max-width: 1200px !important; /* Ancho máximo para un diseño estándar */
    margin: 0 auto;
    padding: 0px !important;
}



@media (max-width: 1024px) {
    body {
        padding-top: 53px; /* Adjust based on navbar height */
}

    section {
    padding: 0px 20px !important;
}

}

@media (min-width: 1024px) {
    body {
        padding-top: 0px; /* Adjust based on navbar height */
}

.admin-bar .navbar {
    top: 32px;
}

}

/* Layout general */

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

/* /////////////////////////-----HEADER-STYLES----////////////////////////////////////////////// */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #FFD633;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 15px;
    z-index: 1000;
    transition: all 0.3s ease-in-out !important;
}

.navbar.scrolled {
    background-color: #fff;
    border-bottom: 1px solid #005DAD;
    padding: 20px 15px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    transition: all 0.3s ease-in-out !important;
}

.pre-scroll-logo {
    display: block;
    transition: all 0.3s ease-in-out;
}

.navbar.scrolled .pre-scroll-logo {
    display: none;
}

.desktop-logo {
    display: none;
    transition: all 0.3s ease-in-out;
}

.navbar.scrolled .desktop-logo {
    display: block;
}

.pre-scroll-logo img,
.desktop-logo img {
    width: 270px;
    height: auto;
}


.navbar.scrolled .desktop-logo {
    display: block;
}


.nav-links {
    display: flex;
    flex-direction: row;
    gap: 20px;
    text-decoration: none;
}

.nav-links a {
    color: #005DAD;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 20px;
    text-decoration: none;
    background-color: transparent !important;
}

/* Mobile Styles */
.hamburger, .mobile-menu {
    display: none;
}

@media (min-width: 1024px) {
    

    .menu-toggle-icon {
        display: none;
    }

    .mobile-logo {
        display: none;
    }

    .post-card {
        overflow: hidden; /* Hide overflow */
        position: relative;
    }

    .post-card:hover img {
    transform: scale(1.03);
    transition: 0.4s ease-in-out;

}

.post-large {
    overflow: hidden; /* Hide overflow */
    position: relative;
}

.post-large:hover img {
transform: scale(1.03);
transition: 0.4s ease-in-out;

}

.navbar.scrolled .desktop-logo {
    display: block !important;
    transition: all 0.3s ease-in-out !important;
}
}

@media (max-width: 1024px) {
    .navbar.scrolled .logo {
        display: none;
    }
    

    .nav-links {
        display: none;
    }

    .main-logo img {
        display: none;
        margin-top: 0px;
    }

    .categories-menu {
        display: none;
    }

    .navbar {
        background-color: #fff;
        border-bottom: 1px solid #005DAD;
    }

    .navbar.scrolled {
        padding: 15px;
    }

    .menu-toggle-icon {
        font-size: 32px; /* Increase the size */
        font-weight: 500; /* Set font weight to 500 */
        cursor: pointer;
        position: absolute;
        left: 15px;
        top: 10px;
        transition: transform 0.3s ease;
        color: #005DAD;
    }

    .menu-toggle-icon.open {
        transform: rotate(90deg); /* Rotate for a smooth transition effect */
    }


    .desktop-logo {
        display: none !important;
    }

    .pre-scroll-logo {
        display: none !important;
    }

    .desktop-logo.scrolled {
        display: none !important;
    }

    .mobile-logo {
        display: block;
    }

    .mobile-logo img {
        width: 330px;
        height: auto !important;
    }

    .mobile-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 105px;
        left: 0;
        right: 0;
        background-color: #fff;
        padding: 20px;
        transition: transform 0.3s ease;
        transform: translateY(-100%);
        z-index: 900;
    }

    .mobile-menu.show {
        transform: translateY(0);
        z-index: 900;
        border-bottom: 1px solid #005DAD;
        overflow-y: auto;
        max-height: 100%;
        position: fixed;
        top: 0;
        margin-top: 90px;
    }

    .nav-links-mobile ul {
        display: flex;
        flex-direction: row; /* Align items in a row */
        flex-wrap: wrap; /* Allow wrapping */
        gap: 10px; /* Space between items */
        padding: 0;
    }
    
    .nav-links-mobile ul li {
        list-style: none; /* Remove bullet points */
    }
    
    .nav-links-mobile ul li a {
        display: block; /* Ensure links fill their container */
        font-size: 14px !important;
        padding: 12px !important;
        letter-spacing: 0.07em !important;
        background-color: #FFD633; /* Example background color */
        color: #005DAD;
        border-radius: 5px;
        text-decoration: none;
        font-weight: 500;
        text-align: center;
        white-space: nowrap; /* Prevent text from breaking */
        text-transform: uppercase;
    }
    

    
    .categories ul {
        display: flex;
        flex-direction: row; /* Align items in a row */
        flex-wrap: wrap; /* Allow wrapping */
        gap: 10px; /* Space between items */
        padding: 0;
    }
    
    .categories ul li {
        list-style: none; /* Remove bullet points */
    }
    
    .categories ul li a {
        display: block; /* Ensure links fill their container */
        font-size: 14px !important;
        padding: 12px !important;
        letter-spacing: 0.07em !important;
        background-color: #fff; /* Example background color */
        color: #005DAD;
        border: 1px solid #005DAD;
        border-radius: 5px;
        text-decoration: none;
        font-weight: 500;
        text-align: center;
        white-space: nowrap; /* Prevent text from breaking */
        text-transform: uppercase;
    }
    }






 /* Main content */
 .main-logo {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    
}

.main-logo img {
    width: 472.55px;
    height: auto;
    margin: 113px 0px 40px 0px !important;
}


.desktop-categories-menu {
    display: flex; /* Use flexbox for horizontal alignment */
    justify-content: center; /* Center items */
    align-items: center;
    width: auto !important;
    border-bottom: 1px solid #005DAD;
    gap: 20px;
    padding-bottom: 8px !important;
}

.category-item {
   font-weight: 500;
   letter-spacing: 0.07em !important;
   font-size: 14px !important;
   color: #005DAD;
    border-radius: 4.4px; /* Pill shape */
    padding: 12px !important; /* Padding for appearance */
    text-transform: uppercase;
    cursor: pointer; /* Pointer cursor */
    transition: all 0.3s; /* Transition for hover effect */
}

.category-item:hover {
    background-color: #FFD633; /* Change background on hover */
}

.category-item a {
    font-weight: 500;
    color: #005DAD;
 }

.more-button {
    font-weight: 500;
    font-size: 14px !important;
    letter-spacing: 0.07em !important;
    color: #005DAD;
    border-radius: 4.4px; /* Pill shape */
    padding: 12px !important; /* Padding for appearance */
    /* margin: 10px 40px; */
    cursor: pointer; /* Pointer cursor */
    transition: all 0.3s; /* Transition for hover effect */
}

.more-button:hover {
    background-color: #FFD633; /* Darker yellow on hover */
}

/* Modal Styles */
.modal {
    display: none; /* Hidden default */
    opacity: 0; /* Start with full transparency */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.7); /* Black with opacity */
    transition: opacity 0.4s ease; /* Smooth transition on opacity */
    backdrop-filter: blur(4px);
}

.modal-content {
    width: 100%;
    max-height: 600px;
    background-color: #fff; /* White background */
    padding: 40px 50px 50px 40px;
    border: 1px solid #888;
    border-top: 10px solid #FFD633;            
}

.modal-logo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #005DAD;
}

.modal-logo img {
    width: 353px;
    height: 30px;
}

.modal-categories ul {
    display: flex;
    flex-direction: row; /* Align items in a row */
    flex-wrap: wrap; /* Allow wrapping */
    gap: 10px; /* Space between items */
    padding: 0;
    margin: 20px 0px;
}

.modal-categories ul li {
    list-style: none; /* Remove bullet points */
}

.modal-categories ul li a {
    display: block; /* Ensure links fill their container */
    font-size: 14px !important;
    padding: 12px !important;
    letter-spacing: 0.07em !important;
    background-color: #fff; /* Example background color */
    color: #005DAD;
    border: 1px solid #005DAD;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    text-align: center;
    white-space: nowrap; /* Prevent text from breaking */
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}

.modal-categories ul li a:hover {
    background-color: #FFD633; /* Example background color */
    color: #005DAD;
    border: 1px solid #FFD633;
    
}

.categories-modal-section {
    padding: 0px 150px;
}

.categories-modal-title {
    color: #005DAD;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 15px;
    
}

.nav-links-modal-desktop ul {
    display: flex;
    flex-direction: row; /* Align items in a row */
    flex-wrap: wrap; /* Allow wrapping */
    gap: 10px; /* Space between items */
    padding: 0;
    margin: 20px 0px;
}

.nav-links-modal-desktop ul li {
    list-style: none; /* Remove bullet points */
}

.nav-links-modal-desktop ul li a {
    display: block; /* Ensure links fill their container */
    font-size: 14px !important;
    padding: 12px !important;
    letter-spacing: 0.07em !important;
    background-color: #FFD633; /* Example background color */
    color: #005DAD;
    border: 1px solid #FFD633;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    text-align: center;
    white-space: nowrap; /* Prevent text from breaking */
    text-transform: uppercase;
    transition: all 0.3s ease-in-out !important;
}

.nav-links-modal-desktop ul li a:hover {
    
    background-color: #005DAD; /* Example background color */
    color: #FFD633;
    border: 1px solid #005DAD;
    transition: all 0.3s ease-in-out !important;
}
    


.discover-section {
   padding: 0px 150px;
}

.search-box-modal {
    padding: 0px 150px;
}


.discover-title {
    color: #005DAD;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 15px;
}



.modal.show {
    display: block; /* Display the modal */
    opacity: 1; /* Fade to full opacity */
    transition: opacity 0.5s ease-in-out; /* Fade in transition */
}

.close {
    color: #005DAD; /* Close button color */
    float: right; /* Right-align close button */
    font-size: 42px; /* Close button size */
    /* transform: translateY(-50px); */
}

.close:hover,
.close:focus {
    color: #001930; /* Change color on hover */
    text-decoration: none; /* No underline */
    cursor: pointer; /* Pointer cursor */
}



/* ////////////////////////////////////////////////////////////////////////////////////// */
   /* Latest Posts Grid */

  

.posts-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1200px !important;
    margin: 40px auto !important;
}

.post-card {

    position: relative;
    border-radius: 8px;
    transition: all 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    cursor: pointer;
    width: 270px !important;
    height: 350px !important;
    
    
    
}



.post-card-time {
   font-weight: 400;
}

.post-card-time::before {
    content: "\25CF"; /* Genera el bullet */
    color: #FFD633; /* Cambia el color del bullet */
    margin-right: 5px;
}



.post-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    transition: background-size 0.4s ease-in-out;
}



 .post-card .post-content {
    height: 170px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 8px;
    padding: 15px 10px 10px 10px !important;
    gap: 10px !important;
    
  
}

.post-card:hover {
    background-color: #E6F3FF;
    transition: all 0.4s ease-in-out;
}

.post-category {
    font-size: 14px;
    letter-spacing: 0.07rem !important;
    text-transform: uppercase;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1 !important;
    overflow: hidden;
    height: 17px !important;
    color: #005DAD;
    
}

.post-category a {
    color: #005DAD !important;
}

.post-category a::before {
    content: "\25CF" !important; /* Genera el bullet */
    color: #FFD633 !important; /* Cambia el color del bullet */
    margin-right: 5px !important;
}

.time {
    font-weight: 400;
}


.post-title a {
    color: #333;
    font-size: 24px;
    font-weight: 400;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  /* Number of lines displayed before it truncate */
    overflow: hidden;
    height: 85px;
}



.post-title-big a {
    color: #333;
    font-size: 40px;
    font-weight: 400;
    /* margin: 20px 0px; */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  /* Number of lines displayed before it truncate */
    overflow: hidden;
    height: 140px;
   
}

.post-author {
    font-size: 16px;
    color: #292929;
    font-weight: 500 !important;
    text-align: left;
    display: flex;
    gap: 10px;
}

.post-author span {
    display: inline-block;
    /* margin-left: 10px; */
}

@media(max-width: 1024px) {
    .post-card .post-content {
        height: 160px;
    }

    .post-author span{
        font-size: 14px;
    }

    .post-title a {
        font-size: 24px;
        height: 85px;
    }
}

/* Specific grid layout */
.post-large {
    position: relative;
    border-radius: 8px;
    transition: all 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    width: auto;
   height: 740px !important;
    gap: 0px !important;
    
    
    
}

.post-large .post-content {
    height: auto !important;
    gap: 10px !important;
    padding: 10px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;

}

.post-large img {
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: background-size 0.4s ease-in-out;
    height: 510px !important;
}

.post-large:hover {
    background-color: #E6F3FF !important;
    transition: all 0.4s ease-in-out;
}

.small-posts-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 40px;
   
}



@media(max-width: 1024px) {

    .latest-posts{
    padding: 0px 10px ;
    margin-top: 60px !important;
   }

    .posts-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        
    }

    .main-logo img {
        width: 300px;
        height: auto;
    }

    .post-large {
        width: auto;
        height: 450px !important; 
        margin-top: 70px;
    }

    body.is-ios .post-large {
        margin-top: 70px;
      }
    
      body:not(.is-ios) .post-large {
        margin-top: 20px;
      }


    .post-large a img {
        height: 255px !important;
    }

    .post-title-big a {
        font-size: 30px !important;
        height: 110px;
    }

    .small-posts-container {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 20px;
        height: 360px;
        scrollbar-gutter: stable; /* Mantener espacio reservado para la barra */
        }

        .small-posts-container::-webkit-scrollbar {
        height: 10px; /* Altura de la barra de desplazamiento */
    }

    .small-posts-container::-webkit-scrollbar-thumb {
        background-color: #FFD633; /* Color del pulgar (thumb) */
        border-radius: 5px; /* Bordes redondeados */
    }

    .small-posts-container::-webkit-scrollbar-track {
        background-color: #fff; /* Color de fondo de la pista (track) */
        border-radius: 5px; /* Bordes redondeados */
    }



.small-posts-container .post-card {
    width: 250px !important;
}

.post-card {
    height: 320px !important;
}

.post-card img {
    width: 250px !important;
    height: 150px !important;
}

.card-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* For smooth snapping */
    }


}

/* ////////////////////////////////////////////////////////////////////////////////////// */

 

    .search-box-desktop form {
    width: 100%;
    height: 80px !important;
    display: flex;
    align-items: center;
    border: 1px solid #005DAD;
    border-radius: 4.4px;
    padding: 8px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 60px !important;
    }

    .search-box {
        height: 80px !important;
        margin-bottom: 0px !important;
    }

    .icon {
    margin-right: 8px;
    }

    .icon img {
    width: 28px !important; /* Adjust size as needed */
    height: 28px !important;
    margin-left: 10px;
    }

    .search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 18px !important;
    }

    .search-button {
    display: inline-block;
    height: 60px !important; 
    margin: 0 auto;
    border: 1px solid #005DAD;
    background: transparent;
    color: #005DAD;
    padding: 18px 20px !important;
    border-radius: 5px;
    font-size: 16px !important;
    letter-spacing: 0.07rem !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s, color 0.3s;
    }

    .search-button:hover {
    background-color: #FFD633 !important;
    color: #005DAD !important;
    border: 1px solid #FFD633;
    }

    @media(max-width: 1024px) {

        .search-box-container {
            padding: 0px;
            margin: 20px 0px 80px 0px;
        }

        .search-button {
            display: none !important;
        }

        .search-box-mobile-menu {
            margin-top: 20px;
        }

        .modal-title {
            color: #005DAD;
            font-weight: 500;
            margin: 20px 0px;
        }
        
    }


    .search-page-name {
        font-family: "Rubik", sans-serif;
        font-weight: 400;
        letter-spacing: 0.07rem;
        font-style: normal;
        font-size: 32px;
        text-align: center;
    }




    .no-search-results {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        text-align: center;
        max-width: 1200px;
        margin: 0 auto;
        color: #005DAD;
    }
    
    .no-results-icon {
        max-width: 400px;
        margin-bottom: 20px;
		height: auto;
        
    }

    @media(max-width: 1024px) {
        .no-results-icon {
            max-width: 300px; 
			height: auto;
        }

        .no-search-results h2 {
            font-size: 20px !important;
        }

    }
    
    .no-search-results h2 {
        font-size: 24px;
        margin-bottom: 10px;
        font-weight: 500;
    }
    
    .no-search-results p {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .btn-go-home {
        display: inline-block;
        text-transform: uppercase;
        letter-spacing: 0.07rem;
        font-weight: 500;
        padding: 18px 20px;
        background-color: #fff;
        color: #005DAD;
        border: 1px solid #005DAD;
        text-decoration: none;
        border-radius: 5px;
        transition: all 0.3s ease;
    }
    
    .btn-go-home:hover {
        background-color: #FFD633;
        border: 1px solid #FFD633;
    }
    

    .error-wrapper {
        margin: 60px auto;
  
    }

/* ////////////////////////////////////////////////////////////////////////////////////// */



    /* ///////////////////////////////NEW TABS CARDS CONTAINER//////////////////////////// */

          /* Parallax Container */
.parallax-container {
    position: relative;
    height: 500px;
    width: 100%;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding-top: 20px;
}

@media (max-width: 1024px) {
    .parallax-container {
      background-attachment: scroll;
      background-position: center;
      background-size: cover;
    }
  }

.section-title {
    color: #fff;
    font-size: 50px;
    font-weight: 500 !important;
    
}

@media(max-width: 1024px) {
    .section-title {
        padding: 0px 10px;
    }

    .tabs {
        padding: 0px 10px;
    }
}

/* Tabs (Pills) */
.tabs {
    display: flex;
    margin: 20px 0px 40px 0px;
    flex-wrap: wrap;
    gap: 20px;
}

.tab-button {
    background-color: #fff;
    color: #333;
    font-size: 14px !important;
    padding: 12px !important;
    letter-spacing: 0.07em !important;
    background-color: transparent;
    padding: 13px 23px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease, color 0.3s ease;
    border-radius: 4.4px;
    border: 1px solid #fff;
    font-weight: 600;
    text-transform: uppercase;

}

.tab-button:hover {
    background-color: #FFD633;
    color: #005DAD;
    border: 1px solid #FFD633 !important;
    font-weight: 600;
}

.tab-button.active {
    background-color: #005DAD;
    color: #fff;
    font-weight: bold;
    border-radius: 4.4px;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}

.tab-button.active {
    border: 1px solid #005DAD !important;
    
}

.tabs-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}




/* Cards Container */
.cards-container {
    position: absolute; /* Asegúrate de que el contenido ocupe espacio sin colisionar */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 60px 0px !important;
    
    width: 100%; /* Asegúrate de mantener el ancho */
    opacity: 0; /* Invisible al principio */
    visibility: hidden; /* Oculto pero ocupa espacio */
    transform: translateY(20px); /* Efecto de desplazamiento */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 0; /* Asegura que las capas no se superpongan */
    
}

.cards-container.active {
    position: relative; /* Restaura la posición normal */
    opacity: 1; /* Completamente visible */
    visibility: visible; /* Ahora visible */
    transform: translateY(0); /* Desplazamiento original */
    z-index: 1; /* Trae el contenido activo al frente */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
    
}

.post-card-container {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex; /* Ensure it maintains structure */
    justify-content: space-around;
    gap: 40px !important;
}

@media(max-width: 1024px) {
    .post-card-container {
        gap: 20px !important;
    
    }
}

.post-card-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

@media(max-width: 1024px) {
    .post-card-container.active {
        gap: 20px;
        height: 360px;
        scrollbar-gutter: stable; /* Mantener espacio reservado para la barra */
    }

    .post-card-container.active::-webkit-scrollbar {
    height: 10px; /* Altura de la barra de desplazamiento */
}

.post-card-container.active::-webkit-scrollbar-thumb {
    background-color: #FFD633; /* Color del pulgar (thumb) */
    border-radius: 5px; /* Bordes redondeados */
}

.icon-row::-webkit-scrollbar-track {
    background-color: #fff; /* Color de fondo de la pista (track) */
    border-radius: 5px; /* Bordes redondeados */
}
}



.scroll-bar {
        position: absolute;
        bottom: -4px; /* Justo debajo de las cards */
        left: 0;
        height: 4px;
        background-color: yellow; /* Barra amarilla */
        width: 23%; /* Inicialmente igual a una card */
        transition: left 0.3s ease-in-out; /* Movimiento suave */
    }


    .tab-more {
        color: #005DAD;
         border-radius: 5px; /* Pill shape */
         font-size: 16px !important;
        padding: 18px 20px !important;
        letter-spacing: 0.07em !important;
        font-weight: 500 !important;
         cursor: pointer; /* Pointer cursor */
         transition: all 0.3s; /* Transition for hover effect */
         margin: 0 auto !important;
         border: 1px solid #005DAD !important;                 
     }

     .tab-more:hover {
         background-color: #FFD633; /* Change background on hover */
         border: 1px solid #FFD633 !important;
     }

     .tab-more a {
        color: #005DAD;
        text-transform: uppercase;
     }
        

@media(min-width: 1024px) {
    .cards-container {
        /* width: auto; */
        /* flex-wrap: wrap; */
        overflow-x: visible; /* Eliminar scroll horizontal en desktop */
        gap: 40px;
    }

}

@media(max-width: 1024px) {
    .card {
        min-width: 250px !important;
        min-height: 300px;
    }

    .tabs-content {
        padding: 0px 10px;
    }

    .tab-more {
        margin-top: 40px !important;
    }

    .cards-container {
        display: flex;
        flex-direction: column;
        
        
    }

    .post-card-container {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        
    }

    .post-card-container .post-card {
        min-width: 250px !important;
        /* min-height: 300px; */
        margin-bottom: 20px;
    }

}



/* Section Backgrounds */
#category_tabs_1 {
    background-image: url("https://www.edreams.com/blog/wp-content/uploads/sites/3/2025/03/explore-by-country.jpg") !important;
}

#category_tabs_2 {
    background-image: url("https://www.edreams.com/blog/wp-content/uploads/sites/3/2025/03/urban-gateways.jpg") !important;
}

#category_tabs_3 {
    background-image: url("https://www.edreams.com/blog/wp-content/uploads/sites/3/2025/03/travel-types.jpg") !important;
}


    .scroll-bar {
    height: 4px;
    background-color: #FFD633;
    width: 200px; /* Same as card width for initial display */
    position: relative;
    transition: transform 0.3s ease;
    }

    @media (min-width: 1024px) {

    .card {
        width: 300px;
        /* height: 320px; */
    }

    .card img {
        border-radius: 8px;
    }

    .card-container {
        /* display: grid; */
        grid-template-columns: repeat(4, 1fr);
        overflow: visible; /* Remove horizontal scroll on desktop */
    }

    .card-container {
        height: 300px;
    }

    .scroll-bar {
        display: none; /* Hide yellow bar on desktop */
    }
    }




    .icon-container {
        text-align: left;
        padding: 40px 0;
        color: #005DAD;
        
    }
    
    .icon-row {
        display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* For smooth snapping */
    }
    
    .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 120px;
        transition: all 0.3s ease-in-out;
    }
    
    
    
    /* Circle background */
    .icon-circle {
        width: 80px;
        height: 80px;
        background-color: #FFD633; /* Default yellow */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease-in-out;
    }

    /* For SVG icons, color is controlled via currentColor */
    .svg-icon-container svg {
        width: auto;
        height: auto;
        color: #005DAD; /* Initial color is blue */
        transition: color 0.3s ease-in-out;
    }



    /* Hover effect - Circle turns blue and icon turns yellow */
    .icon-circle:hover {
        background-color: #005DAD; /* Circle turns blue */
    }

    /* On hover, icon color turns yellow */
    .icon-circle:hover .svg-icon-container svg {
        color: #FFD633; /* Icon turns yellow */
    }

    
    
    

.icon-container h2 {
	font-size: 32px;
    font-weight: 500;
    color: #005DAD;
    border-bottom: 1px solid #005DAD;
    padding-bottom: 20px;
    margin-top: 40px;
}

.icon-row {
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  margin: 40px 0px 60px 0px !important;
  gap: 40px !important;
}

.icon-row a {
    color: #333;
  }



.icon-item {
width: 200px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 gap: 15px !important;
 padding: 0px !important;
}

.icon-container a:hover {
 transition: 0.5s ease;
 text-decoration: none;
}

.icon-item h3 {
    height: 44px;
 }

.icon-item p {
  width: 100% !important;
	height: 95px;
}


.icon-item img{
  width: 36px !important;
  transition: 0.4s ease-in-out;
  
}

@media (max-width: 1024px) {
    .icon-container {
      padding: 0px 10px;
    }

    .icon-container h1 {
        font-size: 34px;
    }

    .icon-row {
        display: flex;
        overflow-x: scroll;
        scroll-snap-type: x mandatory; /* For smooth snapping */
        scrollbar-gutter: stable; /* Mantener espacio reservado para la barra */
        }

        .icon-row::-webkit-scrollbar {
        height: 10px; /* Altura de la barra de desplazamiento */
    }

    .icon-row::-webkit-scrollbar-thumb {
        background-color: #FFD633; /* Color del pulgar (thumb) */
        border-radius: 5px; /* Bordes redondeados */
    }

    .icon-row::-webkit-scrollbar-track {
        background-color: #fff; /* Color de fondo de la pista (track) */
        border-radius: 5px; /* Bordes redondeados */
    }

    .icon-item {
        margin-bottom: 20px;
    }
    
}


/* /////////////////////////-----FOOTER-STYLES----////////////////////////////////////////////// */

footer {
    background-color: #0056b3;
    color: #fff;
    padding: 80px !important;
    
}

footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start !important;
    max-width: 1200px !important;
    margin: 0 auto;
    gap: 150px;
    min-height: 366px;
}

@media (max-width: 1024px) {
    .footer-container {
        flex-direction: column;
        align-items: center !important;
        gap: 20px;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 1px solid #fff;
    }


    .footer-menu-mobile{
        display: flex;
        flex-direction: row;
        gap: 0px !important;
    }

    .footer-social-icons {
        justify-content: center;
    }

    .footer-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
     }

    .footer-logo img {
        max-width: 350px;
        height: auto;
     }

     .footer-menu h3 {
        display: none;
     }

     .footer-categories {
        display: flex;
        gap: 20px;
     }

     .footer-categories h3 {
        display: none;
     }

     .footer-conditions {
        text-align: center;
     }

     .footer-categories {
        text-align: center;
     }
}

.footer-categories ul{
        list-style: none;
     }

.footer-categories h3 {
    margin-bottom: 10px;
}

.footer-logo {
    flex: 1;
}

.footer-logo h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

.footer-logo img {
    width: 500px;
    height: auto !important;
}

.footer-logo p {
    margin-top: 60px;
    font-size: 16px;
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .footer-logo p {
        margin-top: 20px;
    }

    .footer-links ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 435px) {
    .footer-logo img {
        width: 250px;
    }

}

.footer-social-icons {
    display: flex;
    gap: 15px;
    margin: 20px 0;
}

.footer-social-icons a {
    color: #fff;
    font-size: 20px;
    text-decoration: none;
}

.footer-description {
    margin-top: 60px;
    line-height: 1.5;
}


.footer-links h3 {
    margin-bottom: 10px;
    font-size: 18px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links ul li {
    margin: 5px 0;
}

.footer-links ul li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links ul li a:hover {
    color: #ffcc00;
}

.footer-line {
    width: 100%;
    height: 1px;
    background: white;
    margin: 20px 0;
}

.footer-social-icons img {
    width: 35px;
    height: 35px;
}

.footer-menu {
    color: #FFD633;
}
.footer-menu ul li a {
    color: #FFD633;
}





        /*//////////////////////////////// CATEGORY PAGE STYLES //////////////////////////*/

        /* Cards Container */

        
        .category-page {
            background-color: #0056b3;
            height: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 40px auto;
        }

        .category-section {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .category-posts-title {
            font-size: 32px;
            font-weight: 500;
            color: #005DAD;
            border-bottom: 1px solid #005DAD;
            padding-bottom: 20px;
           
          }

          @media (min-width: 1024px) {
            .category-posts-title {
                display: none;
            }
          }

        @media (min-width: 1024px) {

        .card-category {
            position: relative;
            border-radius: 8px;
            transition: all 0.4s ease-in-out;
            display: flex;
            flex-direction: column;
            justify-content: flex-start !important;
            cursor: pointer;
            width: 270px !important;
            height: 350px !important;
            gap: 0px !important;
            
        }

    }

        @media (max-width: 1024px) {

            .category-page {
                    height: 150px;
                }

                body.is-ios .category-page {
                    margin-top: 100px;
                  }
                
                  body:not(.is-ios) .category-page {
                    margin-top: 60px;
                  }

                .card-category {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    border-radius: 8px;
                    height: 135px;
                    
                }

                .card-category-large {
                    width: auto;
                    border-radius: 8px;
                    height: 450px;
                }

                .card-category-large img {
                    height: 255px !important;
                }

                .card-category-large .post-content-category {
                    height: 184px;
                }


                .card-category img{
                    width: 120px !important;
                    height: 135px !important;
                }

                .card-category .post-content-category {
                    width: 100%;
                }

                .card-category-large .post-category-title {
                    font-size: 30px !important; /* cambia a lo que necesites */
                    height: 110px; /* o el valor exacto que querés */
                  }

                  .card-category-large .post-category-title a {
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 30px;
                  }
    
               
            }
    
            .category-page section {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 20px;
                color: #fff;
            }
    
            .category-page-name {
                font-family: 'Rubik';   
                font-weight: 400;
                letter-spacing: 0.07rem;
                font-style: normal;
                font-size: 40px;
                text-align: center;
            }
    
            .category-page-posts {
                font-size: 20px;
                color: #FFD633;
            }

            /* -------------------------------- */
            
            

        /*//////////////////////////////// SINGLE POST STYLES //////////////////////////*/

       

        .post-image img {
            width: 100%;
            height: 600px;
            object-fit: cover;
            margin-top: 113px !important;
            border-radius: 0px !important;
        }

		@media (min-width:1024px) and (max-width:1460px) {

            .post-image img {
                height: 400px;
                margin-top: 93px !important;
            }
        }

        @media (max-width: 1024px) {
            section .post-image img {
                height: 300px;
            }

            .post-image img {
                    margin-top: 0px !important;
            }

            .single-post-info {
                border-bottom: 1px solid #fff;
                margin: 0px;
            }
        }

        @media (min-width: 1024px) {
            .single-post-info-container {
                width: 70%;
            }
        }

       

        .image-credits {
            font-size: 14px;
            margin-bottom: 50px;
            color: #646464;
        }

        .single-post-categories {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            letter-spacing: 0.07rem !important;
        }
        

        .single-post-categories a {
            font-size: 16px;
            color: #005DAD !important;
            text-transform: uppercase !important;
            font-weight: 500 ;
            transition: all 0.3s ease-in-out;
        }

        .single-post-categories a:hover {
            color: #002a4f !important;
            
        }

        .single-post-categories a::before {
            content: "\25CF"; /* Genera el bullet */
            color: #FFD633; /* Cambia el color del bullet */
            margin-right: 10px;
        }


        .single-post-title {
            font-size: 40px;
            font-weight: 400;
            margin: 10px 0px 20px 0px !important;
        }

        .single-post-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 30px 0px;
            padding-bottom: 20px;
            border-bottom: 1px solid #005DAD;
        }

        @media (max-width: 1024px) {

            .single-post-categories {
                margin-top: 30px;
            }

            body.is-ios .single-post-categories {
                margin-top: 30px;
              }
            
              body:not(.is-ios) .single-post-categories {
                margin-top: 0px;
              }


            .single-post-info {
                border-bottom: 0px ;
                margin: 20px 0px;
            }
        }

        .single-first-info {
            display: flex;
            align-items: center;
            
            gap: 20px;
        }

        .single-post-author {
            font-weight: 500 !important;
        }

        .single-post-time {
            font-weight: 400;
        }

        .single-post-info-details {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        @media (max-width: 1024px) {
            .single-post-info-details {
                display: flex;
            }

            .single-post-info {
                flex-direction: column;
                align-items: flex-start;
            }

            .single-first-info {
                flex-direction: row-reverse;
                justify-content: space-between;
                width: 100%;
                
            }

            .single-post-banner {
                display: flex;
                flex-direction: column-reverse;
                margin-top: 100px !important;
            }

        }

        .single-post-time::before {
            content: "\25CF"; /* Genera el bullet */
            color: #FFD633; /* Cambia el color del bullet */
            margin: 0px 10px;
        }


        /*//////////SINGLE POSTS CONTENT STYLES ///////////*/


                        /* Apply margin and padding to post content */
        .single-post-content {
            font-size: 18px; /* Set font size for readability */
            line-height: 1.6; /* Set line height for better readability */
            color: #333; /* Set text color */
        }

        @media (min-width: 1024px) {
            .single-post-content {
                width: 70%;
            }

        }


        .single-post-content h2 {
            font-size: 28px;
            margin-bottom: 10px; 
        }

        .single-post-content h3 {
            font-size: 24px; 
            margin-bottom: 10px;
        }

        .single-post-content h3::before {
            content: "\25CF"; /* Genera el bullet */
            color: #FFD633; /* Cambia el color del bullet */
            margin-right: 5px;
        }

        .single-post-content h4 {
            font-size: 20px; 
            margin-bottom: 10px;
        }

        .single-post-content h5 {
            font-size: 18px; 
            margin-bottom: 10px;
        }


        .single-post-content p {
            margin-bottom: 20px; /* Space between paragraphs */
        }

        /* Add margin between images and text */
        .single-post-content img {
            margin: 20px 0px; 
            width: auto;
            height: auto;
            display: block; /* Avoid text wrapping around images */
            
        }

        figure.wp-caption.aligncenter {
            width: 100% !important;
            max-width: 100%;
          }
          
          figure.wp-caption.aligncenter img {
            width: 100%;
            height: auto;
            display: block;
          }
          

        .wp-caption-text {
            font-size: 14px;
        }


        /* Style anchor links (Links within the post) */
        .single-post-content a {
            color: #005DAD; /* Link color */
            text-decoration: none; /* Remove underline by default */
            transition: all 0.3s ease-in-out;
        }

        .single-post-content a:hover {
            color: #00305b; /* Link color */
            text-decoration: none; /* Underline on hover */
        }

        /* Style buttons in the post */
        .single-post-content button,
        .single-post-content input[type="button"],
        .single-post-content input[type="submit"] {
            background-color: #FFD633; /* Button background color */
            color: #005DAD; /* Button text color */
            padding: 18px 20px; /* Padding around button text */
            border: none;
            border-radius: 4.4px; /* Rounded corners */
            cursor: pointer; /* Change cursor on hover */
            font-size: 16px;
            transition: all 0.3s ease-in-out;
        }

        .single-post-content button:hover,
        .single-post-content input[type="button"]:hover,
        .single-post-content input[type="submit"]:hover {
            background-color: #005DAD; /* Darken button on hover */
            color: #FFD633;
        }

        .wp-block-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }

        .wp-block-button a {
            background-color: #fff; /* Button background color */
            color: #005DAD; /* Button text color */
            margin: 20px 0px;
            padding: 18px 20px; /* Padding around button text */
            border: 1px solid #005DAD !important;
            border-radius: 5px !important; /* Rounded corners */
            cursor: pointer; /* Change cursor on hover */
            font-size: 16px;
            transition: all 0.3s ease-in-out;
            font-weight: 500;
            letter-spacing: 0.07rem;
        }

        .wp-block-button a:hover {
            background-color: #FFD633; /* Darken button on hover */
            color: #005DAD;
            border: 1px solid #FFD633 !important;
        }


        .su-button {
            background-color: #fff !important;
            margin: 30px 0px 40px 0px;
            border-radius: 5px !important; /* Rounded corners */  
            padding: 0px !important;                  
        }

        @media (max-width: 768px) {
            .su-button   {
                padding: 16px 0px !important;                  
            }

            .su-button:hover {
               
                background-color: #FFD633 !important;
                
            }


        }
    



        .su-button:hover {
            opacity: 1 !important; 
            border: none !important;
            background-color: #FFD633 !important;
            
        }

        .su-button a{
            background-color: #fff !important;
            margin: 30px 0px 40px 0px;
            padding: 16px 0px;
            border-radius: 5px !important; /* Rounded corners */   
            
        }

        .su-button a:hover{
            background-color: #FFD633;
            
        }

    

        .su-button span {
            background-color: #fff; /* Button background color */
            color: #005DAD !important; /* Button text color */
            font-size: 16px !important;
            border: 0px !important;;
            padding: 18px 20px !important; /* Padding around button text */
            border: 0px solid #005DAD !important;
            border-radius: 5px !important; /* Rounded corners */
            cursor: pointer; /* Change cursor on hover */
            transition: all 0.3s ease-in-out !important;
            font-weight: 500;
            letter-spacing: 0.07rem;
            text-transform: uppercase;
            line-height: 18px !important;
        }

        .su-button span:hover {
            background-color: #FFD633 !important; /* Darken button on hover */
            color: #005DAD;
            opacity: 1 !important; 
            border: 1px solid #FFD633 !important;
            
        }


        /*//////////////////////////////// SINGLE POOST STYLES //////////////////////////*/

        .share-container {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
          }
      
          .share-button {
            width: 50px;
            height: 50px;
            background-color: #fff;
            border: 1px solid ;
            border-radius: 30px;
            color: #3b5998;
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 1;
            transition: all 0.3s ease;
          }

          .share-button:hover {
            border-radius: 30px;
          }
      
          .share-button.open {
            border-radius: 30px 30px 0px 0px; /* Nuevo border-radius cuando el dropdown está abierto */
            border-bottom: 0px;
          }
      
          .dropdown {
            position: absolute;
            top: 50px; /* Ensures dropdown starts below the button */
            width: 50px;
            background-color: #fff;
            border-radius: 50%; /* Nuevo border-radius inicial */
            overflow: hidden;
            opacity: 0;
            height: 0;
            transition: height 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          }
      
          .dropdown.open {
            height: 140px; /* Adjust based on number of icons */
            opacity: 1;
            border-radius: 0px 0px 30px 30px; /* Nuevo border-radius cuando está abierto */
            border-bottom: 1px solid #3b5998;
            border-right: 1px solid #3b5998;
            border-left: 1px solid #3b5998;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      
      
          }
      
          .dropdown a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            margin: 5px auto;
            border-radius: 50%;
            text-decoration: none;
            color: #005DAD;
            
            transition: all 0.4s ease;
          }
      
          .dropdown a:hover {
            background-color: #ffcc00;
          }
      
          .dropdown a i {
            font-size: 20px;
          }


          .related-posts-section {
            display: flex;
            flex-direction: column;
            gap: 40px;
            margin-bottom: 10px;
        }

          .related-posts-title {
            font-size: 32px;
            font-weight: 500;
            color: #005DAD;
            border-bottom: 1px solid #005DAD;
            padding-bottom: 20px;
            margin-top: 40px;
          }


          .post-related-card-container {

            display: flex; /* Ensure it maintains structure */
            justify-content: space-between !important;
            gap: 20px; 
            margin-bottom: 40px;
        }
          
        

        .post-related-card {
            position: relative;
            border-radius: 8px;
            transition: all 0.4s ease-in-out;
            display: flex;
            flex-direction: column;
            justify-content: flex-start !important;
            cursor: pointer;
            width: 270px !important;
            height: 350px !important;
            
        }

        .post-related-card-time {
           font-weight: 400;
        }

        .post-related-card-time::before {
            content: "\25CF"; /* Genera el bullet */
            color: #FFD633; /* Cambia el color del bullet */
            margin-right: 5px;
        }

        

        .post-related-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 8px;
            transition: background-size 0.4s ease-in-out;
        }





         .post-related-card .post-related-content {
            height: 170px !important;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border-radius: 8px;
            padding: 15px 10px 10px 10px !important;
            gap: 10px !important;
        }

        .post-related-card:hover {
            background-color: #E6F3FF;
            transition: all 0.4s ease-in-out;
        }

        .post-related-title a {
            color: #333;
            font-size: 24px;
            font-weight: 400;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;  /* Number of lines displayed before it truncate */
            overflow: hidden;
            height: 85px;
        }

        .post-related-category {
            font-size: 14px;
            letter-spacing: 0.07rem !important;
            text-transform: uppercase;
            font-weight: 500;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1 !important;
            overflow: hidden;
            height: 17px !important;
            color: #005DAD;
        }

        .post-related-category a {
            color: #005DAD !important;
        }


        .post-related-category a::before {
            content: "\25CF" !important; /* Genera el bullet */
            color: #FFD633 !important; /* Cambia el color del bullet */
            margin-right: 5px !important;
        }


        .post-related-author {
            font-weight: 500 !important;
        }

        @media (min-width: 1024px) {
    

            .post-related-card {
                overflow: hidden; /* Hide overflow */
                position: relative;
                
                }
            


            .post-related-card:hover img {
            transform: scale(1.03);
            transition: 0.4s ease-in-out;

        }
    }

    @media (max-width: 1024px) {
    

            .post-related-card-container {
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
                gap: 30px;
                scrollbar-gutter: stable; 
            }


            .post-related-card-container::-webkit-scrollbar {
                height: 8px; /* Altura de la barra de desplazamiento */
            }

            .post-related-card-container::-webkit-scrollbar-thumb {
                background-color: #FFD633; /* Color del pulgar (thumb) */
                border-radius: 4px; /* Bordes redondeados */
            }

            .post-related-card-container::-webkit-scrollbar-track {
                background-color: #fff; /* Color de fondo de la pista (track) */
                border-radius: 5px; /* Bordes redondeados */
            }

            .post-related-card-container .post-related-card {
                min-width: 250px !important;
                margin-bottom: 20px;
                height: 320px !important;
            }

            .post-related-image {
                height: 150px !important;
            }

            .post-related-card img {
                height: 150px !important;
            }

            .post-related-author {
                font-size: 14px;
            }
        }



        .post-related-card-container {
            display: flex; /* Ensure it maintains structure */
            justify-content: space-around;
            gap: 20px;
        }
          
        

        .post-related-card-time {
           font-weight: 400;
        }

        .post-related-card-time::before {
            content: "\25CF"; /* Genera el bullet */
            color: #FFD633; /* Cambia el color del bullet */
            margin-right: 5px;
        }

        

        .post-related-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 8px;
            transition: background-size 0.4s ease-in-out;
        }



        .post-related-card:hover {
            background-color: #E6F3FF;
            transition: all 0.4s ease-in-out;
        }

        .post-related-title a {
            color: #333;
            font-size: 24px;
            font-weight: 400;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;  /* Number of lines displayed before it truncate */
            overflow: hidden;
            height: 85px;
        }

        .post-related-category {
            font-size: 14px;
            text-transform: uppercase;
            font-weight: 500;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .post-related-category a {
            color: #005DAD !important;
        }

        @media (min-width: 1024px) {

            .card-container-category {        
                display: grid;
                grid-template-columns: repeat(4, 1fr); /* Always 4 columns */
                gap: 40px; /* Adjust spacing as needed */
                align-items: start;
                margin-top: 40px;
            
            }
    

            .post-related-card {
                overflow: hidden; /* Hide overflow */
                position: relative;
            }

            .post-related-card:hover img {
            transform: scale(1.03);
            transition: 0.4s ease-in-out;

        }
    }

    @media (max-width: 1024px) {
    

        .post-related-card-container {
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            gap: 30px;
        }

        .post-related-card-container .post-related-card {
            min-width: 250px;
            margin-bottom: 20px;
        }
}




/*//////////////////   category page styles ///////////////////*/






.post-category-card {
    width: 100%; /* Ensures consistency */
    position: relative;
    border-radius: 8px;
    transition: all 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    cursor: pointer;
    max-width: 270px !important;
    gap: 0px !important;
    
}

.post-category-card-time {
   font-weight: 400;
}

.post-category-card-time::before {
    content: "\25CF"; /* Genera el bullet */
    color: #FFD633; /* Cambia el color del bullet */
    margin-right: 5px;
}



.card-category img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    transition: background-size 0.4s ease-in-out;
}

.card-category-large img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    transition: background-size 0.4s ease-in-out;
}



 .post-category-content {
    display: flex; 
    flex-direction: column;   
    justify-content: space-between;   
    padding: 10px;
}



.card-category:hover {
    background-color: #E6F3FF;
    transition: all 0.4s ease-in-out;
}

.card-category-large:hover {
    background-color: #E6F3FF;
    transition: all 0.4s ease-in-out;
}

.post-category-title a {
    color: #333;
    font-size: 24px;
    font-weight: 400;
}



.post-category-category {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.post-category-category a {
    color: #005DAD !important;
}

.post-category-author {
    font-weight: 00 !important;
}

.post-category-card-time {
    font-weight: 400 !important;
}

@media (min-width: 1024px) {

    .post-category-content {
        height: 170px !important;
        gap: 10px !important;
    }


    .card-category-large {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        transition: all 0.4s ease-in-out;
        display: flex;
        flex-direction: column;
        justify-content: flex-start !important;
        cursor: pointer;
        width: 270px !important;
        height: 350px !important;
        gap: 0px !important;
        
    }

    .card-category-large:hover img {
        transform: scale(1.03);
        transition: 0.4s ease-in-out;
    }

    


    .card-category {
        overflow: hidden; /* Hide overflow */
        position: relative;
    }

    .card-category:hover img {
    transform: scale(1.03);
    transition: 0.4s ease-in-out;

    }

    .post-category-title a {
        
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;  /* Number of lines displayed before it truncate */
        overflow: hidden;
        height: 85px;
    }
}

@media (max-width: 1024px) {



.card-container-category {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-cateogory .post-category-title {
    color: #333;
    font-size: 24px;
    height: 60px;
}


 .post-category-title a {
    
    display: -webkit-box ;
    -webkit-box-orient: vertical ;
    -webkit-line-clamp: 2 ;  /* Number of lines displayed before it truncate */
    overflow: hidden ;
}

.post-category-category {
    font-size: 14px !important;
    text-transform: uppercase;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1 !important;
    overflow: hidden;
    
}

.post-category-author {
    font-size: 14px !important;
    font-weight: 500 !important;
}



.post-category-card .post-category-content {
    padding: 10px !important;
}
}

.tab-more-category {
    color: #005DAD;
    border-radius: 5px; /* Pill shape */
         font-size: 16px !important;
        letter-spacing: 0.07em !important;
        font-weight: 500 !important;
         cursor: pointer; /* Pointer cursor */
         transition: all 0.3s; /* Transition for hover effect */
         margin: 0 auto;
         margin-bottom: 40px;
         border: 1px solid #005DAD !important;  
        
    }

.tab-more-category:hover {
    background-color: #FFD633; /* Change background on hover */
    border: 1px solid #FFD633 !important;

}

.tab-more-category a {
    color: #005DAD; 
    padding: 18px 20px !important;   
}



@media (min-width:1025px) and (max-width:1260px) {

    section {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }



    .post-card-container {
        gap: 30px !important;
    }

    

    .post-title a {
        font-size: 20px !important;
        height: 75px;
        
    }

    .post-related-title a {
        font-size: 20px !important;
        height: 75px;
        
    }

    .post-author {
        font-size: 14px !important;
    }

    .post-related-author span {
        font-size: 14px !important;
    }

    .footer-container {
        gap: 100px;
    }


    .icon-row {
        gap: 20px !important;
    }

    .icon-item {
        width: 150px;
    }

    .card-container-category {        
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Always 4 columns */
        margin: 0px 60px;
    
    }
}

@media (max-width: 420px) {
    .mobile-logo img {
        width: 260px;
    }

    .navbar {
        height: 105px;
    }

    .post-content .post-title-big a {
        font-size: 24px;
    }


    footer {
        font-size: 14px !important;
    }

    footer p {
        font-size: 14px !important;
    }

}



.pagination {
    margin: 40px 0px;
}

.pagination-wrapper {
    padding: 40px 0;
    text-align: center;
}

.pagination ul {
    display: inline-flex;
    list-style: none;
    padding: 0;
    gap: 8px;
}

.pagination li {
    display: inline;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 5px;
    text-decoration: none;
    color: #005DAD;
    transition: all 0.3s ease;
}

.pagination a:hover {
    background-color: #FFD633;
    
}

.pagination .current {
    background-color: #005DAD;
    color: #fff;
    
}

a[href="javascript:Didomi.preferences.show()"] {
  display: none !important;
}

#top {
    margin: 40px 0px;
}

@media (max-width: 1024px) {
	#top {
    margin: 0px 0px 20px 0px;
}
}