/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Equivalent to Body widget: Linear Gradient */
.gradient-background {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        to bottom,
        #001837 0%,
        #004B79 33%,
        #0074A8 66%,
        rgb(29, 157, 6) 100%
    );
}

/* Equivalent to Row & Expanded */
.sports-betting-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    align-items: center;
    padding: 20px;
}

.image-section, .content-section {
    flex: 1; /* Equivalent to Expanded */
    display: flex;
    flex-direction: column;
}

.image-section img {
    max-width: 100%;
    height: auto;
}

/* Text Alignment and Styles */
.content-section {
    padding-left: 40px;
    color: white;
}

.title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* CrossAxisAlignment.end in Flutter */
    width: fit-content;
}

/* Matrix4.skewX(-0.3) */
.skewed-label {
    background-color: red;
    padding: 5px 10px;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 20px;
    transform: skewX(-17deg); /* -0.3 radians is approx -17 degrees */
    margin-bottom: 5px;
}

.main-title {
    font-size: 30px;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 10px;
}



.download-button {
    display: inline-flex;
    align-items: center;
    /* This ensures the button only takes up the space it needs */
    width: max-content; 
    
    background-color: #EBB035;
    padding: 6px 20px 6px 6px; /* Tightened padding */
    border-radius: 50px;
    text-decoration: none;
    color: black;
    font-weight: 800;
    font-size: 16px; /* Scaled down further */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.icon-circle {
    background-color: #6556B3; 
    width: 28px; /* Smaller circle */
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.icon-arrow {
    color: #EBB035;
    font-size: 14px;
    /* Use a standard down arrow character or SVG */
}

.button-text {
    white-space: nowrap; /* Prevents text from wrapping to a second line */
    letter-spacing: -0.2px;
}
/* Container to keep buttons from stretching and stack them vertically */
.button-group {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between the two buttons */
    align-items: flex-start; /* Keeps them aligned to the left */
}

.download-button, .viber-button {
    display: inline-flex;
    align-items: center;
    width: fit-content; /* THIS FIXES THE "TOOOO BIG" WIDTH */
    padding: 6px 20px 6px 6px;
    border-radius: 50px;
    text-decoration: none;
    color: black;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

/* Download Button Specific Color */
.download-button {
    background-color: #EBB035;
}

/* Viber Button Specific Color */
.viber-button {
    background-color: #7360F2; /* Viber Purple */
    color: white;
}

.icon-circle, .viber-icon-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.icon-circle { background-color: #6556B3; }
.viber-icon-circle { background-color: white; }


.description {
    max-width: 400px; /* Limits the width of the Myanmar text */
    margin: 20px 0;
    font-size: 18px;
    line-height: 1.6;
    color: white;
}



/* Hover effects */
.download-button:hover, .viber-button:hover {
    transform: scale(1.02);
}