* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bs-primary-rgb: 137, 137, 137;
    --bs-secondary-rgb: 251, 189, 35;
    --bs-success-rgb: 108, 108, 108;
    --bs-dark-rgb: 30, 130, 76;
}

/* ===================== Start T20 Mens World Cup 2026 App ===================== */
body {
    font-family: 'Poppins', sans-serif;
}

.design_section {
    position: relative;
    padding-top: 60px;
    padding-bottom: 10px;
    color: white;
    background: #170947;
}

.top_row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.main_title {
    font-size: 87px;
    font-weight: 400;
    line-height: 1.1;
    background: radial-gradient(circle, #fff 112%, #bbb 60%, #666 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Rubik Microbe", system-ui;
}

.character {
    position: absolute;
    top: 0;
    left: 70%;
    width: 362px;
}

.design_card {
    position: relative;
    height: 720px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    border-radius: 20px;
    background: linear-gradient(113deg, rgba(96, 74, 170, 1), rgba(28, 8, 99, 1));
    overflow: hidden;
    box-shadow: 0 3px 21px rgba(143, 143, 143, 0.10), 36px 12px 38px rgba(143, 143, 143, 0.09);
}

.design_card_title {
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
}

.design_card p {
    text-align: center;
    font-size: 14px;
    color: #d3d3ff;
    margin-bottom: 40px;
}

.palette1 {
    margin-top: 5px;
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 30px;
}

.color_item1 {
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.color_item1 span {
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
}

.box_color {
    text-align: center;
    width: 100%;
    height: 88%;
    border-radius: 11px;
    margin-bottom: 10px;
}

.c1 {
    background: #10044A;
}

.c2 {
    background: #0C2359;
}

.c3 {
    background: #FF9100;
}

.font_card {
    top: 10px;
    width: 493px;
    height: 255px;
    padding: 35px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 3;
    text-align: center;
}

.font_card h3 {
    font-size: 60px;
    margin-bottom: 15px;
}

.letters {
    font-size: 16px;
    letter-spacing: 5px;
    color: #dcdcff;
}

.font_text {
    position: absolute;
    top: 28%;
    left: 58%;
    font-size: 418px;
    font-weight: 500;
    color: #FFFFFF;
    z-index: 1;
    pointer-events: none;
}

.section_problem, .section_solution {
    background: #170947;
    display: flex;
    align-items: center;
}

.problem_text, .solution_text {
    text-align: center;
}

.left {
    position: relative;
}

.title_statement {
    font-size: 87px;
    font-weight: 400;
    line-height: 1.1;
    background: radial-gradient(circle, #fff 112%, #bbb 60%, #666 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Rubik Microbe", system-ui;
}

.description {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.8;
    color: #FFFFFF !important;
}

.section_features {
    background: #170947;
    color: #fff;
    overflow: hidden;
    position: relative;
}

.title_section {
    text-align: center;
    font-size: 87px;
    font-weight: 400;
    line-height: 1.1;
    background: radial-gradient(circle, #fff 112%, #bbb 60%, #666 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Rubik Microbe", system-ui;
}

.features_wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.feature_box {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    padding: 4px 25px 0 25px;
    width: 280px;
    backdrop-filter: blur(10px);
}

.feature_box h4 {
    font-size: 16px;
}

.feature_box p {
    font-size: 16px;
    margin-bottom: 0;
}

.feature_box ul li {
    font-size: 16px;
    opacity: .9;
}

.left_top {
    position: absolute;
    left: -1%;
    top: -9px;
    width: 45%;
    padding-left: 12%;
}

.left_bottom {
    position: absolute;
    left: -1%;
    bottom: -2%;
    width: 45%;
    padding: 4px 18% 0 1%;
}

.right_box {
    position: absolute;
    right: -3%;
    top: 110px;
    width: 45%;
}

.mobile_mockup {
    width: 280px;
    z-index: 2;
}

.mobile_mockup img {
    width: 100%;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6));
}

.boy_character {
    position: absolute;
    z-index: 3;
}

.char1 {
    left: -1%;
    top: -17%;
    width: 190px;
    height: 369px;
}

.char2 {
    left: 25%;
    bottom: -3%;
    width: 270px;
    height: 342px;
}

.char3 {
    right: -7%;
    top: 10px;
    width: 238px;
    height: 457px;
}

.tech_section {
    background: #170947;
    position: relative;
    overflow: hidden;
}

.tech_title1 {
    text-align: center;
    font-size: 87px;
    font-weight: 400;
    line-height: 1.1;
    background: radial-gradient(circle, #fff 112%, #bbb 60%, #666 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Rubik Microbe", system-ui;
    margin-bottom: 11%;
}

.tech_boy {
    position: absolute;
    right: 27%;
    top: 23%;
    z-index: 5;
}

.tech_box {
    width: 687px;
    margin: auto;
    padding: 35px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
}

.tech_items {
    text-align: center;
    flex: 1;
}

.tech_items img {
    width: 119px;
    margin-bottom: 10px;
    border-radius: 14px;
}

.tech_items p {
    color: #fff;
    font-size: 14px;
    opacity: .9;
}

.journey_section {
    background: #170947;
    overflow: hidden;
}

.journey_wrap {
    position: relative;
    width: 100%;
    height: 2800px;
}

.path {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 662px;
    z-index: 1;
}

.path1 {
    top: 137px;
}

.path2 {
    top: 51%;
}

.phone {
    position: absolute;
    width: 300px;
    z-index: 3;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, .6));
}

.journey_boy {
    position: absolute;
    width: 322px;
    z-index: 5;
    animation-timing-function: ease-out;
    opacity: 0;
}

.phone1 {
    left: 10%;
    top: -61px;
}

.boy1 {
    left: 34%;
    top: -82px;
}

.phone2 {
    right: 11%;
    top: 277px;
}

.boy2 {
    left: 34%;
    top: 486px;
}

.phone3 {
    left: 10%;
    top: 30%;
}

.boy3 {
    left: 39%;
    top: 895px;
}

.phone4 {
    right: 7%;
    top: 43%;
}

.boy4 {
    left: 33%;
    top: 1414px;
    width: 383px;
}

.phone5 {
    left: 10%;
    top: 64%;
}

.boy5 {
    left: 46%;
    top: 1952px;
}

.phone6 {
    right: 8%;
    top: 79%;
}

@keyframes boyMove1 {
    from {
        opacity: 0;
        transform: translate(-80px, -30px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes boyMove2 {
    from {
        opacity: 0;
        transform: translate(80px, -70px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes boyMove3 {
    from {
        opacity: 0;
        transform: translate(-90px, -30px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes boyMove4 {
    from {
        opacity: 0;
        transform: translate(80px, -50px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes boyMove5 {
    from {
        opacity: 0;
        transform: translate(-90px, -30px);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.thank_section {
    background: #170947;
    text-align: center;
    color: #fff;
}

.download_box {
    border: 4px solid #FFFFFF;
    padding: 35px 25px;
    max-width: 700px;
    margin: auto auto 80px;
}

.download_box p {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.play_btn img {
    transition: .3s;
}

.play_btn:hover img {
    transform: scale(1.05);
}

.thank_content h1 {
    font-size: 128px;
    font-weight: 800;
    background: linear-gradient(to bottom, #0F1A57, #FFFFFF);
    -webkit-background-clip: text;
    color: transparent;
}

@keyframes thank_text {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

.thank_content p {
    font-size: 16px;
    opacity: .9;
}

/* ===================== End Start T20 Mens World Cup 2026 App App ===================== */