body, html {
    transition: none;
    /* убираем transition, используем keyframes */
}

/* Анимация свайпа влево: вылет и поворот */
@keyframes swipeLeftAnim {
    0% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateX(-120%) rotate(-15deg);
        opacity: 0;
    }
}

/* Анимация свайпа вправо: вылет и поворот */
@keyframes swipeRightAnim {
    0% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateX(120%) rotate(15deg);
        opacity: 0;
    }
}

.swipe-left {
    animation: swipeLeftAnim 0.6s forwards ease-in-out;
}

.swipe-right {
    animation: swipeRightAnim 0.6s forwards ease-in-out;
}


* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.wrapper2 {
    background-color: #fde1d9;
    padding: 40px 20px;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 40px;
}

.container {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 20px;
    max-width: 1400px;
}

.navbar {

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar__items {
    display: flex;
    align-items: center;
    gap: 40px;
}

.navbar__title {
    margin: auto;
    font-family: "Lato";
    font-style: normal;
    font-weight: 900;
    font-size: 27px;
    line-height: 130%;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
    color: #1e212c;
    margin-bottom: 2px;

}

.navbar__title span {
    color: red;
    margin-left: 2px;
}

.navbar__list {
    display: flex;
    gap: 30px;
    align-items: center;
}

.navbar__link,
.navbar__link2 {
    font-size: 16px;
    font-family: "Lato";
    font-weight: 700;
    color: #424551;
    transition: color 0.3s ease-in-out;
}

.navbar__link2 {
    font-family: "Montserrat";
    font-weight: 600;
}

.navbar__link:hover,
.navbar__link2:hover {
    color: #fa4a0c;
}

.header-actions {
    color: #fde1d9;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-right: 50px;
}

.btn-consultation {
    background: linear-gradient(90deg, #ff5722, #ff7043);
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 8px 20px;
    cursor: pointer;
    font-family: "Lato";
    font-weight: 700;
    font-size: 16px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 5px rgba(255, 87, 34, 0.4);
}

.btn-consultation:hover {
    background: linear-gradient(90deg, #ff7043, #ff5722);
}

.btn-consultation:active {
    background: linear-gradient(90deg, #f73a00, #ff3c00);
}

.login {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #444;
    cursor: pointer;
}

.login svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.header_span {
    font-family: "Lato";
    font-size: 14px;
    color: #444;
}

.navbar_subtitle {
    /* course */

    /* h6

subheading
*/
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    /* identical to box height, or 24px */
    letter-spacing: 1px;
    text-transform: uppercase;

    /* primary */
    color: #ff3f3a;
}

.navbar_title {
    width: 1020px;

    /* h1 */
    font-family: "Lato";
    font-style: normal;
    font-weight: 900;
    font-size: 46px;
    line-height: 130%;
    /* or 60px */
    display: flex;
    align-items: center;
    text-align: center;

    /* gray/900 */
    color: #1e212c;
}




.container {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding: 40px 20px;
}

.course-description {
    flex: 1 1 60%;
    max-width: 100%;
    padding: 40px 20px;
    margin-right: 100px;
}

.course-description h2 {
    /* About the course */

    /* h1 */
    font-family: "Lato";
    font-style: normal;
    font-weight: 900;
    font-size: 46px;
    line-height: 130%;
    /* identical to box height, or 60px */

    /* gray/900 */
    color: #1e212c;

    margin-bottom: 20px;
}

.course_title {
    /* Nulla amet, sagittis potenti rhoncus sit. Elit lectus nec pulvinar aliquet donec enim, ornare. Lacus facilisi curabitur turpis varius mauris. Nisi, tempus risus, odio mi suscipit sed. Curabitur faucibus porttitor quis sem lacus, arcu feugiat facilisis. Commodo nunc orci vitae accumsan id. */
    width: 560px;
    height: 104px;

    /* base/regular

main body text
*/
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    /* or 26px */

    /* gray/800 */
    color: #424551;


    margin-left: 30px;

    /* base/regular

main body text
*/
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    /* or 26px */

    /* gray/800 */
    color: #424551;
}

.course-description h3 {
    margin-top: 30px;
    /* You will learn: */

    /* h3 */
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 150%;
    /* identical to box height, or 42px */

    /* gray/900 */
    color: #1e212c;
}

.features-list {
    margin-top: 10px;
    /* A fermentum in morbi pretium aliquam adipiscing donec tempus. */

    /* base/regular

main body text
*/
    /* Aliquet lectus urna viverra in odio. */


    /* lead/bold */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    /* identical to box height, or 30px */

    /* gray/900 */
    color: #1E212C;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.features-list span {
    /* Theme 1. */

    /* lead/regular */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    /* identical to box height, or 30px */

    /* primary */
    color: #FF3F3A;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

    margin-right: 10px;
}

.features-list li {
    padding-left: 30px;
    /* место под иконку */
    margin-bottom: 10px;
    position: relative;
    display: flex;
    align-items: center;
}

.icon-check {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex-shrink: 0;
    background-image: url("/Img/Minus.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-plus {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex-shrink: 0;
    background-image: url("/Img/Plus.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.course-info {
    flex: 1 1 30%;
    max-width: 340px;
    background-color: #fff;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
}

.info-block {
    margin-bottom: 24px;
}

.info-title {
    /* Dates */

    width: 47px;
    height: 21px;

    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    /* identical to box height, or 21px */
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 7px;

    /* gray/900 */
    color: #1e212c;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

.highlight2 {
    /* Sept 7 – Nov 2 */

    /* h4 */
    /* Event on Facebook */


    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    /* identical to box height, or 21px */
    letter-spacing: 1px;

    text-transform: uppercase;

    /* primary */
    color: #FF3F3A;



    margin-bottom: 4px;
}

.highlight {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 150%;
    /* identical to box height, or 21px */
    letter-spacing: 1px;

    text-transform: uppercase;

    /* primary */
    color: #FF3F3A;



    margin-bottom: 4px;
}

.highlight2:hover {
    color: linear-gradient(to right, #e22214);
    text-decoration-line: underline;

}

.price {}

.enroll-btn {
    background: linear-gradient(90deg, #ff5722, #ff7043);
    border: none;
    border-radius: 4px;
    width: 100%;
    color: #fff;
    padding: 8px 20px;
    cursor: pointer;
    font-family: "Lato";
    font-weight: 700;
    font-size: 16px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 5px rgba(255, 87, 34, 0.4);
}

.enroll-btn:hover {
    background: linear-gradient(90deg, #ff7043, #ff5722);
    transition: background 0.3s;
}

.enroll-btn:active {
    background: linear-gradient(90deg, #f73a00, #ff3c00);
    transition: background 0.3s;
}

.course_title2 {
    /* Rhoncus pellentesque auctor auctor orci vulputate faucibus quis ut. */

    /* base/regular

main body text
*/
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    /* or 26px */

    /* gray/700 */
    color: #787a80;

    /* Inside auto layout */
}

.profile-container {
    display: flex;
    margin-right: 200px;
    max-width: 1400px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: auto;
}

.image-section {
    flex: 1;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-image {
    width: 300px;
    max-width: 450px;
    border-radius: 10px;
    object-fit: cover;
    height: 340px;
}

.info-section {
    flex: 2;
    padding: 20px;
    max-width: 1400px;
}

.name {
    /* Cody Fisher */

    /* h1 */
    font-family: "Lato";
    font-style: normal;
    font-weight: 900;
    font-size: 46px;
    line-height: 130%;
    /* identical to box height, or 60px */

    /* gray/900 */
    color: #1e212c;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

.title {
    margin: 8px 0 16px;
    /* Senior UX designer in IT Product Company */

    /* lead/regular */
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    /* identical to box height, or 30px */

    /* gray/700 */
    color: #787a80;
}

.stats {
    display: block;

    margin-bottom: 20px;
}

.stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
}

.icon {
    font-size: 18px;
}

.description2 {
    width: 600px;
    height: 156px;

    /* base/regular

main body text
*/
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    /* or 26px */

    /* gray/800 */
    color: #424551;


}

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

.social-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #ddd;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    color: #555;
    text-decoration: none;
    transition: background-color 0.3s;
}

.social-icon:hover {
    background-color: #bbb;
}

.info_subtitle {
    /* Course curator */

    /* h6

subheading
*/
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    /* identical to box height, or 24px */
    letter-spacing: 1px;
    text-transform: uppercase;

    /* gray/900 */
    color: #1e212c;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

.label {
    /* 4.9 rate */

    /* base/bold */
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 160%;
    /* identical to box height, or 26px */
    display: flex;
    align-items: center;

    /* gray/800 */
    color: #424551;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

.social-icons {
    display: flex;
    gap: 40px;
}

.icon {
    width: 40px;
    height: 40px;
    fill: #777;
    transition: fill 0.3s;
    cursor: pointer;
    display: inline-block;
}

.icon.facebook:hover {
    fill: #ff0000;
}

.icon.behance:hover {
    fill: #ff0000;
}

.icon.behance {
    margin-top: 7px;
}

.icon.twitter:hover {
    fill: #ff0000;
}

.icon.linkedin:hover {
    fill: #f44336;
}



.benefit__maintext {
    /* Who will benefit from the course: */

    width: 492px;
    height: 120px;

    /* h1 */
    font-family: "Lato";
    font-style: normal;
    font-weight: 900;
    font-size: 46px;
    line-height: 130%;
    margin-left: 80px;
    /* or 60px */

    /* gray/900 */
    color: #1e212c;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

.benefits {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 800px;
    margin-left: 450px;
}

.benefits___main {
    margin-top: 200px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.benefit-item .icon {
    color: #ff5d5d;
    font-size: 18px;
    margin-top: 4px;
    line-height: 1;
}

.benefit-item p {
    margin: 0;
}

.course-program {
    margin-top: 60px;
    padding-top: 60px;
}

.who-benefits {
    padding: 40px 20px;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 40px;
}

.benefit-item p {
    /* Mobile app designers who want to improve their skills in solving business problems, creating and testing human-centered interfaces */
    width: 564px;
    height: 90px;

    /* lead/bold */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    /* or 30px */

    /* gray/800 */
    color: #424551;


}

.benefit-item img {
    margin-top: 7px;
}

.section-title {
    /* For whom? */


    /* h6

subheading
*/
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    /* identical to box height, or 24px */
    letter-spacing: 1px;
    text-transform: uppercase;

    /* gray/900 */
    color: #1E212C;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}


.newsletter {
    background-color: #fde1d9;
    padding: 40px 20px;
}

.newsletter {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 40px;
    box-sizing: border-box;
}

.newsletter-image {
    flex: 0 1 250px;
    display: flex;
    justify-content: center;
}

.newsletter-image img {
    width: 100%;
    max-width: 250px;
    height: auto;
}

.newsletter-content {
    flex: 1 1 300px;
    min-width: 300px;
}

.newsletter-content h2 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
    color: #333;
}

.newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.newsletter-form input {
    padding: 12px 16px;
    width: 100%;
    max-width: 380px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.newsletter-form button {
    padding: 12px 24px;
    background-color: #fc5130;
    color: white;
    border: none;
    width: 150px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.newsletter-form button:hover {
    background-color: #f1431c;
    transition: background-color 0.3s ease;
}

.newsletter-form button:active {
    background-color: rgb(182, 39, 7);
    transition: background-color 0.3s ease;
}

.newsletter-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #555;
    flex-wrap: wrap;
}

.newsletter-checkbox input {
    margin-top: 3px;



}

.newsletter-checkbox span {
    /* I agree to receive communications from Createx Online School */


    /* base/regular

main body text
*/
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    /* identical to box height, or 26px */

    /* gray/800 */
    color: #424551;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.newsletter-content h2 {
    /* Don’t want to miss the best events? Subscribe to our newsletter! */

    /* h2 */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-size: 32px;
    line-height: 130%;
    /* or 42px */
    display: flex;
    align-items: center;

    /* gray/900 */
    color: #1E212C;


}

.check__img {
    margin-top: 4px;
    height: 20px;
    padding: 2px 0.3px;
    background-color: red;
}


.request-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 60px 40px;
    max-width: 1400px;
    margin: auto;
    gap: 40px;
}

.request-form {
    flex: 1;
    max-width: 450px;
}

.request-form h5 {
    /* Don’t miss the event */


    /* h6

subheading
*/
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    /* identical to box height, or 24px */

    letter-spacing: 1px;
    text-transform: uppercase;

    /* gray/900 */
    color: #1E212C;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

    margin-bottom: 8px;
}

.request-form h2 {
    /* Leave a request */


    /* h1 */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-size: 46px;
    line-height: 130%;
    /* identical to box height, or 60px */


    /* gray/900 */
    color: #1E212C;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

    margin-bottom: 24px;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #333;
}

.input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.request-container button {
    background: linear-gradient(to right, #fc5130, #ff6d00);
    border: none;
    color: white;
    padding: 14px 20px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    transition: background 0.3s ease;
}

.request-container button:hover {
    background: linear-gradient(to right, #e64825, #e95d00);
}

.request-container button:active {
    background: linear-gradient(to right, #da3510, #ff6600);
}

.note {
    margin-top: 12px;
    /* * You will receive a link to the online lecture in an email after registration. */

    /* base/regular

main body text
*/
    width: 500px;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    /* identical to box height, or 26px */
    display: flex;
    align-items: center;

    /* gray/800 */
    color: #424551;


}

.request-image img {
    max-width: 400px;
    width: 100%;
    height: auto;
}

.input__text {
    /* label */

    /* base/regular

main body text
*/
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    /* identical to box height, or 26px */

    /* gray/800 */
    color: #424551;


}



.events-section {
    padding: 60px 20px;
    text-align: center;
    background: #f7f7f7;
    font-family: "Lato";
    display: flex;
    padding: 60px 40px;
    max-width: 1400px;
    margin: 0 auto;
    gap: 40px;
    flex-direction: column;
}

.section-subtitle {
    /* Check other online events */



    /* h6

subheading
*/
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    /* identical to box height, or 24px */
    letter-spacing: 1px;
    text-transform: uppercase;

    /* gray/900 */
    color: #1E212C;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

    margin-bottom: 10px;
    text-align: start;
    margin-left: 100px;
}

.section-title {
    /* You may be interested in */

    /* h1 */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-size: 19px;
    line-height: 130%;
    /* identical to box height, or 60px */

    /* gray/900 */
    color: #1E212C;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

    margin-bottom: 40px;
    text-align: start;
    margin-left: 80px;
}

.events-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

.event-card {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    width: 325px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    transition: transform 0.2s ease;
}


.event-date {
    /* 05 Aug */



    /* h3 */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 150%;
    /* identical to box height, or 42px */

    /* primary */
    color: #FF3F3A;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

    margin-bottom: 6px;
}

.event-time {
    /* 11:00 – 14:00 */

    /* base/regular

main body text
*/
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    /* identical to box height, or 26px */

    /* gray/700 */
    color: #787A80;


    /* Inside auto layout */


    margin-bottom: 12px;
}

.event-title {
    /* Formation of the organizational structure of the company in the face of uncertainty. */

    width: 349px;
    height: 54px;

    /* large/bold */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 150%;
    /* or 27px */

    /* gray/900 */
    color: #1E212C;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

    margin-bottom: 10px;

}

.event-type {
    /* Onine master-class */


    /* base/regular

main body text
*/
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    /* identical to box height, or 26px */

    /* gray/700 */
    color: #787A80;

    margin-top: 5px;
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

    margin-bottom: 20px;
}

.event-button {
    border: 1px solid #fc5130;
    color: #fc5130;
    padding: 10px 110px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: background 0.3s, color 0.3s;
    background-color: white;
}

.event-button:hover {
    background: #fc5130;
    color: #fff;
}

.event-button:active {
    background: #db2501;
    color: #fff;
    transition: background-color 0.5s, color 0.3s;
}

.events-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.events-footer p {
    font-size: 16px;
    color: #333;
    margin: 0;
}

.explore-button {
    background: linear-gradient(to right, #fc5130, #ff6d00);
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    text-decoration: none;
    border: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

.explore-button:hover {
    background: linear-gradient(to right, #e64825, #e95d00);
    transition: background 0.3s;
    box-shadow: 0 6px 12px rgba(255, 0, 0, 0.15);
}

.explore-button:active {
    background: linear-gradient(to right, #ff2f00, #cf5300);
}


.simple-arrows {
    font-size: 20px;
    color: #333;
    margin: 10px 20px;
    gap: 10px;
}

.arrow {
    background-color: #fff;
    margin-left: 20px;
    color: #000;
    font-weight: 900;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.arrows {
    background-color: #fff;
    margin-left: 999px;
    color: #000;
    font-weight: 900;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.arrow:hover {
    opacity: 0.9;
    background: linear-gradient(90deg, #ec0606, #eb0c0c);
    transition: background 0.3s;
}

.arrows:hover {
    opacity: 0.9;
    background: linear-gradient(90deg, #ec0606, #eb0c0c);
    transition: background 0.3s;
}

.arrows:active {
    background: linear-gradient(90deg, #f73a00, #ff3c00);
    transition: background 0.3s;
}

.arrow:active {
    background: linear-gradient(90deg, #f73a00, #ff3c00);
    transition: background 0.3s;
}



.section-title2 {
    /* You may be interested in */

    width: 515px;
    height: 60px;

    /* h1 */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-size: 46px;
    line-height: 130%;
    /* identical to box height, or 60px */

    /* gray/900 */
    color: #1E212C;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
    margin-left: 100px;
    margin-bottom: 20px;

}



.footfooter {
    background-color: #222;
    color: #eee;
    font-family: "Lato";
    padding: 40px 20px;
}

.wrapper {
    padding: 40px 20px;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 40px;
}

.item1 {
    background-color: #1e212c;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.item1div {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
}

.logo {
    flex: 1 1 300px;
    max-width: 350px;
}

.logo img {
    max-width: 150px;
    margin-bottom: 20px;
}

.text {
    width: 279px;
    height: 90px;
    /* extrasmall/regular */
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    /* or 18px */

    /* white */
    color: #ffffff;
    opacity: 0.6;

    margin-bottom: 20px;
}

.icons svg {
    fill: white;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    cursor: pointer;
    transition: fill 0.3s;
    color: #ccc;
}

.icons svg:hover {
    fill: #444;
    color: white;
    transition: color 0.3s;
}

.listdiv {
    flex: 1 1 150px;
}

.listtitle {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 15px;
    color: #fff;
    font-family: "lato";
}

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

.items {
    margin-bottom: 10px;
}

.links {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    font-family: "lato";
}

.links:hover {
    color: #5e5b5b;
    transition: color 0.3s;
}

.contact-section {
    flex: 1 1 250px;
}

.contact {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.contact svg {
    margin-right: 10px;
    fill: #ccc;
}

.foot__links {
    width: 100%;
    height: 20px;
    background-color: #2a2d37;
    margin: auto;
    border: none;
}

.enter__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 250px;
    padding: 5px 15px;
    border-radius: 5px;
    border: 1px solid gray;
    background-color: #2a2d37;
    color: #ccc;
    font-family: "Lato";
}

.foot__emailtext {
    width: 286px;
    padding: 15px 0px;

    /* extraextrasmall/regular */
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 150%;
    /* or 15px */
    display: flex;
    align-items: center;

    /* white */
    color: #ccc;
}

.foot__listtitle {
    width: 80px;

    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    /* identical to box height, or 24px */
    display: flex;
    align-items: center;
    letter-spacing: 1px;
    text-transform: uppercase;

    /* white */
    color: #ccc;
    margin-bottom: 10px;
}

.foot__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #ccc;
}

.item2 {
    border-top: 1px solid #444;
    background-color: #252936;
    padding: 20px 20px;
}

.item2div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    color: #aaa;
    font-size: 13px;
}

.item2text {
    /* GO TO TOP */
    /* small/bold */
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    /* identical to box height, or 21px */
    display: flex;
    margin-left: 300px;

    /* white */
    color: #ffffff;

    opacity: 0.6;
}

.item2text:hover {
    color: #5e5b5b;
    transition: color 0.3s;
}

.item2text a {
    /* copyright */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    padding: 0px;
    gap: 2px;
    color: #ffffff;
}

.item2text a:hover {
    color: #5e5b5b;
    transition: color 0.3s;
}

.item2text a:active {
    color: #ffffff;
    transition: color 0.3s;
}

.item2text:active {
    color: #ffffff;
    transition: color 0.3s;
}

.search-box {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px 10px;
    margin-left: 20px;
    font-family: "Lato";
}

.search-box input {
    border: none;
    outline: none;
    font-size: 14px;
    font-family: "Lato";
}

.search-box button {
    background-image: url("/Img/search.png");
    background-color: transparent;
    background-size: 15px 15px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
    width: 20px;
    height: 20px;
}


.event__column {
    display: flex;
    flex-direction: column;
    width: 500px;
}