body {
    font-family: Montserrat, sans-serif;
}

.container {
    max-width: 875px;
}

.header-container {
    max-width: 1474px;
}

.header-logo img {
    max-width: 85px;
}

.header-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    height: 648px;
}

.footer-background {
    max-width: 100%;
    min-height: 1228px;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
}

.temp-btn {
    box-shadow: 0 4px 20px 0 rgba(103, 126, 195, 0.2); 
    border: unset;
    font-size: 24px;
    padding: 11px 21px;
    border-radius: 42.5px;
    font-weight: 500;
}

.premium-btn {
    font-size: 24px;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); 
    background-color: #5D8FD6;
    color: #fff;
    font-weight: 500;
    padding: 7px 33px;
    border-radius: 29px;
}

.premium-btn:hover, .premium-btn:focus, .premium-btn:active, .premium-btn:visited {
    background-color: #5D8FD6;
    color: #fff;
}

/* email */

.email {
    padding-bottom: 76px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 1;
}

.email__box-buttons {
    max-width: 356px;
    margin: 0 auto;
    padding: 0 !important;
}

.email__box-buttons .btn {
    border-radius: 42.5px !important;
    background-color: rgba(93, 143, 214, 0.5);
    border: unset;
    color: #fff;
}

.email > .container {
    max-width: 680px;
}

.email__box {
    background: url('../img/border.svg') no-repeat;
    background-size: 100%;
    padding: 60px 0;
}

.email__box-title {
    color: #000;
}

.email__box-input__input {
    /* max-width: 356px; */
}

.email__box-input__input input {
    min-width: 420px;
    height: 46px;
    font-weight: 500;
    font-size: 20px;
    background-color: rgba(93, 143, 214, 0.5);
    padding: 16px;
    outline: none;
    border-radius: 42.5px;
    border: unset
}

.email__box-input__input {
    position: relative;
}

.email__box-input__input-qr {
    position: absolute;
    top: 4px;
    right: 5px;
    cursor: pointer;
    width: 38px;
    height: 38px;
    background-color: #69C3F3;
    padding: 8px;
    border-radius: 50%;
}

.email__box-input__input-qr img {
    max-width: 100%;
    width: 100%;
    position: relative;
    top: -2px;
}

.email__box-input__btn {
    width: 38px;
    background-color: #5D8FD6;
    border-radius: 50%;
    padding: 5px;
}

.email__box-input__btn:hover, .email__box-input__btn:focus, .email__box-input__btn:active, .email__box-input__btn:visited {
    background-color: #5D8FD6;
}

.email__text {
    max-width: 530px;
}

.email-buttons-container {
    max-width: 870px;
}

.email-btn {
    width: 190px;
    height: 46px;
    box-shadow: 0 4px 20px 0 rgba(103, 126, 195, 1);
    border-radius: 42.5px;
    font-weight: 500;
}

.email-btn img {
    position: relative;
    top: -2px;
    margin-right: 14px;
}

/* postbox */

.postbox {
    background-color: #F9F4F4;
}

.postbox-container {
    max-width: 874px;
}

.postbox__form {
    min-height: 547px;
    background-color: #fff;
    border-radius: 33px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .25);
}

.postbox__messages {
    max-height: 547px;
    overflow: auto;
}

/* Style for the scrollbar itself */
.postbox__messages::-webkit-scrollbar {
    width: 4px;  /* Slim width */
    height: 4px; /* Slim height for horizontal scrollbar */
  }
  
  /* Style for the scrollbar thumb (the draggable part) */
  .postbox__messages::-webkit-scrollbar-thumb {
    background-color: black; /* Black color */
    border-radius: 10px; /* Optional, adds rounded corners */
  }
  
  /* Remove background of the scrollbar track */
  .postbox__messages::-webkit-scrollbar-track {
    background: none; /* No background */
  }
  
  /* Optional: Style for the scrollbar corner */
  .postbox__messages::-webkit-scrollbar-corner {
    background: none;
  }

.postbox__form-header {
    background-color: #53B4EB;
    padding: 57px 38px 19px;
    border-radius: 33px 33px 0 0;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .25);
}

.postbox__form-header > div {
    color: #fff;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 600;
}

.postbox__text-container {
    max-width: 854px;
}

.articles__articles a {
    text-decoration: none;
    box-shadow: 0 4px 20px 0 #A9AEBE;
    border-radius: 21px;
}

.articles__articles a img {
    border-radius: 13px;
}

.articles__articles a p {
    font-size: 11px;
}

.articles__title {
    font-weight: 600;
}

.article__wrap {
    max-width: 774px;
}

.footer {
    position: relative;
}

.footer .nav-link {
    position: relative;
    padding-bottom: 4px; /* Space for underline */
    transition: color 0.3s ease;
    padding: 0 !important;
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

.footer .nav-item {
    margin-right: 20px;
}

.footer .nav-item:last-child {
    margin-right: 0;
}

.footer .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #000; /* Underline color */
    transition: width 0.3s ease;
}

.footer .nav-link:hover::after {
    width: 100%; /* Full underline on hover */
}

.footer-container {
    max-width: 1424px;
}

.dropdown.lang {
    margin-left: 4px;
}

.dropdown.lang button {
    border-radius: 42.5px;
    background-color: #fff;
    font-weight: 600;
}

.source-container {
    max-width: 736px;
}

.source-container img {
    height: 48px;
    width: 100%;
}

.source-container .d-flex.gap-3 img {
    height: 39px;
}

.footer-links__container {
    max-width: 415px;
}

@media screen and (max-width: 768px) {
    .email__box {
        background: url('../img/border-mobile.png') no-repeat;
        background-size: 100% 100%;
        padding: 20px 0;
    }

    .articles__container, .articles__container .container {
        padding: 0;
        overflow: hidden;
    }

    .articles__articles a {
        border-radius: 0;
    }

    .footer .nav-link {
        font-size: 15px;
    }

    .footer .nav-item {
        margin-right: 0;
    }

    .footer ul {
        width: 100%;
        gap: 10px;
    }

    .nav-container {
        position: relative;
    }

    .nav-container::after {
        content: '';                /* Align it to the left */
        width: 100px;               /* The length of the border */
        height: 1px;                /* Border thickness */
        background-color: black;    /* Border color */
    }
    .email__box-input__input input {
        min-width: 356px;
    }
}

.tmp-nmbr-btn {
    padding: 8px 13px;
    font-size: 20px;
    background-color: rgba(255,255,255,.2);
    color: #fff;
}

.tmp-nmbr-btn img {
    filter: invert(1);
}

.article__text {
    padding: 0 20px;
}

.post-img {
    width: 186px;
    height: 186px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.postbox-spinner {
    position: absolute;
    animation: spin 5s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.first-letters{
    width: 50px;
    height: 50px;
    border: 2px solid #e5e5f0;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    line-height: 50px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: #00c497;
    border-radius: 50%;
    margin-right: 15px;
}

/* Animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.icon-btn {
    border: none;
    background-color: transparent;
    outline: 0;
}

.icon-btn i {
    color: #446CB3;
    font-size: 2em;
    cursor: pointer;
}

.icon-btn i.spin-animation {
    animation-name: spin;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
}