<!-- HTML code -->
<section class="cm-item-13 hero-section">
    <div class="hero-container">
        <div class="content-wrapper">
            <div class="left-area">
                <div class="hero-img">
                    <img src="http://cdn.codemela.com/wp-content/uploads/2024/07/4.png" alt="" />
                </div>
                <div class="countdown-container">
                    <div class="countdown-el days-c">
                        <p class="big-text" id="days">0</p>
                        <span>days</span>
                    </div>
                    <div class="countdown-el hours-c">
                        <p class="big-text" id="hours">0</p>
                        <span>hours</span>
                    </div>
                    <div class="countdown-el mins-c">
                        <p class="big-text" id="mins">0</p>
                        <span>mins</span>
                    </div>
                    <div class="countdown-el seconds-c">
                        <p class="big-text" id="seconds">0</p>
                        <span>seconds</span>
                    </div>
                </div>
            </div>
            <div class="right-area">
                <div class="event-title">
                    <h6>UPCOMING NEW <span>EVENT</span> 2023</h6>
                    <h1>STARTUP <span>GLOBAL</span> CONFERENCE</h1>
                </div>
                <div class="event-info">
                    <ul>
                          <li>
                            <svg fill="#fff" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px"
                                    viewBox="0 0 610.398 610.398" xml:space="preserve">
                                    <g>
                                        <g>
                                            <path d="M159.567,0h-15.329c-1.956,0-3.811,0.411-5.608,0.995c-8.979,2.912-15.616,12.498-15.616,23.997v10.552v27.009v14.052
                                       c0,2.611,0.435,5.078,1.066,7.44c2.702,10.146,10.653,17.552,20.158,17.552h15.329c11.724,0,21.224-11.188,21.224-24.992V62.553
                                       V35.544V24.992C180.791,11.188,171.291,0,159.567,0z" />
                                            <path
                                                d="M461.288,0h-15.329c-11.724,0-21.224,11.188-21.224,24.992v10.552v27.009v14.052c0,13.804,9.5,24.992,21.224,24.992
                                       h15.329c11.724,0,21.224-11.188,21.224-24.992V62.553V35.544V24.992C482.507,11.188,473.007,0,461.288,0z" />
                                            <path
                                                d="M539.586,62.553h-37.954v14.052c0,24.327-18.102,44.117-40.349,44.117h-15.329c-22.247,0-40.349-19.79-40.349-44.117
                                       V62.553H199.916v14.052c0,24.327-18.102,44.117-40.349,44.117h-15.329c-22.248,0-40.349-19.79-40.349-44.117V62.553H70.818
                                       c-21.066,0-38.15,16.017-38.15,35.764v476.318c0,19.784,17.083,35.764,38.15,35.764h468.763c21.085,0,38.149-15.984,38.149-35.764
                                       V98.322C577.735,78.575,560.671,62.553,539.586,62.553z M527.757,557.9l-446.502-0.172V173.717h446.502V557.9z" />
                                            <path
                                                d="M353.017,266.258h117.428c10.193,0,18.437-10.179,18.437-22.759s-8.248-22.759-18.437-22.759H353.017
                                       c-10.193,0-18.437,10.179-18.437,22.759C334.58,256.074,342.823,266.258,353.017,266.258z" />
                                            <path
                                                d="M353.017,348.467h117.428c10.193,0,18.437-10.179,18.437-22.759c0-12.579-8.248-22.758-18.437-22.758H353.017
                                       c-10.193,0-18.437,10.179-18.437,22.758C334.58,338.288,342.823,348.467,353.017,348.467z" />
                                            <path d="M353.017,430.676h117.428c10.193,0,18.437-10.18,18.437-22.759s-8.248-22.759-18.437-22.759H353.017
                                       c-10.193,0-18.437,10.18-18.437,22.759S342.823,430.676,353.017,430.676z" />
                                            <path
                                                d="M353.017,512.89h117.428c10.193,0,18.437-10.18,18.437-22.759c0-12.58-8.248-22.759-18.437-22.759H353.017
                                       c-10.193,0-18.437,10.179-18.437,22.759C334.58,502.71,342.823,512.89,353.017,512.89z" />
                                            <path
                                                d="M145.032,266.258H262.46c10.193,0,18.436-10.179,18.436-22.759s-8.248-22.759-18.436-22.759H145.032
                                       c-10.194,0-18.437,10.179-18.437,22.759C126.596,256.074,134.838,266.258,145.032,266.258z" />
                                            <path
                                                d="M145.032,348.467H262.46c10.193,0,18.436-10.179,18.436-22.759c0-12.579-8.248-22.758-18.436-22.758H145.032
                                       c-10.194,0-18.437,10.179-18.437,22.758C126.596,338.288,134.838,348.467,145.032,348.467z" />
                                            <path d="M145.032,430.676H262.46c10.193,0,18.436-10.18,18.436-22.759s-8.248-22.759-18.436-22.759H145.032
                                       c-10.194,0-18.437,10.18-18.437,22.759S134.838,430.676,145.032,430.676z" />
                                            <path
                                                d="M145.032,512.89H262.46c10.193,0,18.436-10.18,18.436-22.759c0-12.58-8.248-22.759-18.436-22.759H145.032
                                       c-10.194,0-18.437,10.179-18.437,22.759C126.596,502.71,134.838,512.89,145.032,512.89z" />
                                        </g>
                                    </g>
                                </svg>
                                22-24 MAY 2024
                            </li>
                            <li>
                                <svg width="18px" height="18px" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z"
                                        stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    <path
                                        d="M12 12C13.1046 12 14 11.1046 14 10C14 8.89543 13.1046 8 12 8C10.8954 8 10 8.89543 10 10C10 11.1046 10.8954 12 12 12Z"
                                        stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                QUEENBAY MALL 4217 ROAD, USA
                            </li>
                        </ul>
                </div>
                <div class="event-desc">
                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
                            anim id est laborum.</p>
                    <div class="button-wrapper">
                        <a href="#">PURCHASE TICKET</a>
                        <a class="btn-2" href="#">VIEW SCHEDULE</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- JS code -->
<script>
    const daysEl = document.getElementById("days");
    const hoursEl = document.getElementById("hours");
    const minsEl = document.getElementById("mins");
    const secondsEl = document.getElementById("seconds");
    const newYears = "1 jan 2025";
    function countdown() {
        const newYearsDate = new Date(newYears);
        const currentDate = new Date();

        const totalSeconds = (newYearsDate - currentDate) / 1000;

        const days = Math.floor(totalSeconds / 3600 / 24);
        const hours = Math.floor(totalSeconds / 3600) % 24;
        const mins = Math.floor(totalSeconds / 60) % 60;
        const seconds = Math.floor(totalSeconds) % 60;

        daysEl.innerHTML = days;
        hoursEl.innerHTML = formatTime(hours);
        minsEl.innerHTML = formatTime(mins);
        secondsEl.innerHTML = formatTime(seconds);
    }

    function formatTime(time) {
        return time < 10 ? `0${time}` : time;
    }

    // initial call
    countdown();

    setInterval(countdown, 1000);
</script>
<!-- CSS code -->
<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .cm-item-13.hero-section {
            background-image: url(http://cdn.codemela.com/wp-content/uploads/2024/07/1.webp);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 0% 10%;
            padding-top: 120px;
            z-index: -100;
            position: relative;
            overflow: hidden;
        }
        .cm-item-13.hero-section::before {
            content: "";
            background-image: linear-gradient(180deg, #c40f4c 0%, #24369c 100%);
            background-blend-mode: overlay;
            background-size: auto;
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            opacity: 0.5;
            z-index: -1;
        }
        .cm-item-13.hero-section .wave {
            overflow: hidden;
            fill: #fff;
        }
        .cm-item-13.hero-section .hero-container {
            max-width: 90%;
            margin: 0 auto;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .left-area {
            width: 48%;
            flex: 0 0 auto;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .left-area .hero-img {
            background-image: url(http://cdn.codemela.com/wp-content/uploads/2024/07/3.webp);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            text-align: center;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .left-area .hero-img img {
            width: 50%;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .left-area .countdown-container{
            padding: 15px;
            display: flex;
            gap: 80px;
            justify-content: center;
            background-color: #fff;
            box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
            border-radius: 30px;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .left-area .countdown-container .countdown-el{
            text-align: center;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .left-area .countdown-container .countdown-el .big-text{
            color: #e91e63a1;
            font-size: 54px;
            font-weight: 700;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .left-area .countdown-container .countdown-el span{
            font-size: 18px;
            color: rgb(108,117,125);
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .right-area {
            width: 48%;
            flex: 0 0 auto;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-title h6 {
            font-size: 26px;
            color: #fff;
            margin-bottom: 15px;
            font-weight: 700;
            letter-spacing: 1px;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-title h6 span {
            color: #e91e63;
        }

        .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-title h1 {
            font-size: 55px;
            color: #fff;
            margin-bottom: 15px;
            font-weight: 700;
            letter-spacing: 1px;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-title h1 span {
            color: #e91e63;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-info ul {
            display: flex;
            list-style: none;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-info ul li {
            font-size: 17px;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-info ul li:nth-child(1) {
            border-right: 2px solid #f7f7f757;
            padding-right: 10px;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-info ul li:nth-child(2) {
            padding-left: 10px;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-desc p {
            color: #fff;
            margin-top: 20px;
            font-size: 18px;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-desc .button-wrapper {
            margin-top: 30px;
            display: flex;
            align-items: center;
            gap: 40px;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-desc .button-wrapper a {
            font-size: 15px;
            border-radius: 25px;
            padding: 18px 25px;
            transition: all .5s ease-in-out;
            background-color: #e91e63;
            color: #fff;
            font-weight: 500;
            text-transform: uppercase;
            text-decoration: none;
            width: 100%;
            text-align: center;
            display: block;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-desc .button-wrapper a.btn-2 {
            background-color: transparent;
            border: 1px solid #fff;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-desc .button-wrapper a:hover {
            background-color: #3a4cb4;
            transition: all .5s ease-in-out;
            color: #fff;
        }
        .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-desc .button-wrapper a.btn-2:hover {
            background-color: #e91e63;
            border: none;
        }
        @media (max-width: 768px) {
            .cm-item-13.hero-section {
                padding-top: 80px;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper {
                align-items: start;
                flex-direction: column-reverse;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper .left-area {
                width: 100%;
                margin-top: 40px;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper .left-area .countdown-container{
                gap: 20px;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper .left-area .countdown-container .countdown-el .big-text{
                font-size: 30px;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper .right-area {
                width: 100%;
                text-align: center;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-title h6 {
                font-size: 18px;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-title h1 {
                font-size: 35px;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-info ul {
                display: block;
                text-align: center;
                margin-top: 20px;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-info ul li {
                font-size: 15px;
                justify-content: center;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-info ul li:nth-child(1) {
                border: none;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-info ul li:nth-child(2) {
                padding-left: 0;
                margin-top: 5px;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-desc .button-wrapper {
                display: block;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-desc .button-wrapper a {
                margin-top: 15px;
            }
        }
        @media (min-width: 768px) and (max-width: 1020px) {
            .cm-item-13.hero-section {
                padding-top: 80px;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper {
                align-items: start;
                flex-direction: column-reverse;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper .left-area {
                width: 100%;
                margin-top: 40px;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper .right-area {
                width: 100%;
                text-align: center;
            }
            .cm-item-13.hero-section .hero-container .content-wrapper .right-area .event-info ul {
                justify-content: center;
            }
        }
        @media (min-width: 1020px) and (max-width: 1400px){
            .cm-item-13.hero-section .hero-container .content-wrapper .left-area .countdown-container{
                gap: 50px;
            }
        }
</style>