.elementor-2385 .elementor-element.elementor-element-65aa7c7{--display:flex;overflow:visible;}.elementor-2385 .elementor-element.elementor-element-f8e64cc{--display:flex;overflow:visible;}.elementor-2385 .elementor-element.elementor-element-f9f3b24{--grid-row-gap:30px;--grid-column-gap:30px;}.elementor-2385 .elementor-element.elementor-element-f9f3b24 .elementor-post__thumbnail__link{width:100%;}.elementor-2385 .elementor-element.elementor-element-f9f3b24 .elementor-post__meta-data span + span:before{content:"///";}.elementor-2385 .elementor-element.elementor-element-f9f3b24.elementor-posts--thumbnail-left .elementor-post__thumbnail__link{margin-right:16px;}.elementor-2385 .elementor-element.elementor-element-f9f3b24.elementor-posts--thumbnail-right .elementor-post__thumbnail__link{margin-left:16px;}.elementor-2385 .elementor-element.elementor-element-f9f3b24.elementor-posts--thumbnail-top .elementor-post__thumbnail__link{margin-bottom:16px;}.elementor-2385 .elementor-element.elementor-element-f9f3b24 .elementor-post__title, .elementor-2385 .elementor-element.elementor-element-f9f3b24 .elementor-post__title a{color:#8E2B2F;}.elementor-2385 .elementor-element.elementor-element-f9f3b24 .elementor-post__read-more{color:#8E2B2F;}.elementor-2385 .elementor-element.elementor-element-f9f3b24 a.elementor-post__read-more{font-size:15px;}.elementor-2385 .elementor-element.elementor-element-f9f3b24 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-2385 .elementor-element.elementor-element-f9f3b24 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-2385 .elementor-element.elementor-element-f9f3b24 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-2385 .elementor-element.elementor-element-f9f3b24 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-2385 .elementor-element.elementor-element-f9f3b24 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}@media(max-width:1024px){.elementor-2385 .elementor-element.elementor-element-f8e64cc{--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-2385 .elementor-element.elementor-element-f9f3b24.elementor-posts--thumbnail-left .elementor-post__thumbnail__link{margin-right:14px;}.elementor-2385 .elementor-element.elementor-element-f9f3b24.elementor-posts--thumbnail-right .elementor-post__thumbnail__link{margin-left:14px;}.elementor-2385 .elementor-element.elementor-element-f9f3b24.elementor-posts--thumbnail-top .elementor-post__thumbnail__link{margin-bottom:14px;}}@media(max-width:767px){.elementor-2385 .elementor-element.elementor-element-f9f3b24 .elementor-post__thumbnail__link{width:100%;}}/* Start custom CSS for html, class: .elementor-element-6284926 *//*==================================================
BLOG HERO
PART 1
ROOT • RESET • FULL WIDTH HERO
==================================================*/

/*========================================
ROOT VARIABLES
========================================*/

:root{

    --primary:#8E2B2E;

    --primary-dark:#B11217;

    --secondary:#0A183D;

    --gold:#D8B46A;

    --white:#FFFFFF;

    --black:#111827;

    --light:#F8F9FB;

    --gray:#D8D8D8;

    --transition:.35s ease;

}

/*========================================
RESET
========================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Poppins",sans-serif;

    background:#000;

    color:#fff;

    overflow-x:hidden;

    line-height:1.7;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

a{

    text-decoration:none;

}

/*========================================
DON'T APPLY TO HERO
========================================*/

section:not(.hero){

    padding:70px 8%;

}

/*========================================
FULL WIDTH HERO
========================================*/

.hero{

    position:relative;

    width:100vw;

    margin-left:calc(50% - 50vw);

    margin-right:calc(50% - 50vw);

    min-height:65vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    padding:90px 20px;

    background:
    linear-gradient(
        135deg,
        rgba(10,24,61,.88),
        rgba(142,43,46,.82)
    ),
    url("https://tnarmwrestling.whydev.co.in/wp-content/uploads/2026/05/arm-wrestling.png");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

}

/*========================================
OVERLAY
========================================*/

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.18),

        rgba(0,0,0,.42)

    );

    z-index:1;

}

/*========================================
GLOW EFFECT
========================================*/

.hero::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    top:-220px;

    right:-180px;

    background:rgba(255,255,255,.05);

    filter:blur(25px);

    z-index:1;

}

/*========================================
CONTENT
========================================*/

.hero-content{

    position:relative;

    z-index:5;

    width:min(900px,90%);

    margin:auto;

}


/*==================================================
BLOG HERO
PART 2
CONTENT • TYPOGRAPHY • ANIMATION
==================================================*/

/*========================================
HERO TAG
========================================*/

.hero-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 24px;

    margin-bottom:20px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.18);

    border-radius:50px;

    color:var(--gold);

    font-size:12px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    transition:var(--transition);

}

.hero-tag:hover{

    background:rgba(255,255,255,.18);

    border-color:rgba(216,180,106,.45);

    transform:translateY(-3px);

}

/*========================================
HERO TITLE
========================================*/

.hero h1{

    margin:0 0 18px;

    font-family:'Oswald',sans-serif;

    font-size:clamp(30px,4vw,48px);

    font-weight:700;

    line-height:1.15;

    color:var(--white);

    text-transform:uppercase;

    text-shadow:0 5px 25px rgba(0,0,0,.35);

}

.hero h1 strong{

    color:var(--gold);

    font-weight:700;

    position:relative;

}

/* Gold Underline */

.hero h1 strong::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:100%;

    height:4px;

    background:var(--gold);

    border-radius:20px;

    opacity:.35;

}

/*========================================
DESCRIPTION
========================================*/

.hero p{

    width:100%;

    max-width:700px;

    margin:0 auto;

    color:#F3F4F6;

    font-size:17px;

    line-height:1.9;

    font-weight:400;

    text-shadow:0 2px 10px rgba(0,0,0,.30);

}

/*========================================
FADE ANIMATION
========================================*/

.hero-tag{

    animation:fadeUp .5s ease forwards;

}

.hero h1{

    animation:fadeUp .8s ease forwards;

}

.hero p{

    animation:fadeUp 1.1s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*========================================
TEXT SELECTION
========================================*/

.hero ::selection{

    background:var(--gold);

    color:#111827;

}

/*==================================================
BLOG HERO
PART 3
RESPONSIVE DESIGN
==================================================*/

/*========================================
DESKTOP (1600px)
========================================*/

@media (max-width:1600px){

.hero{

    min-height:60vh;

    padding:90px 5%;

}

.hero-content{

    max-width:820px;

}

.hero h1{

    font-size:46px;

}

.hero p{

    font-size:16px;

}

}

/*========================================
LAPTOP (1200px)
========================================*/

@media (max-width:1200px){

.hero{

    min-height:55vh;

    padding:80px 40px;

}

.hero-content{

    max-width:760px;

}

.hero h1{

    font-size:42px;

}

.hero p{

    font-size:16px;

    max-width:650px;

}

}

/*========================================
TABLET (992px)
========================================*/

@media (max-width:992px){

.hero{

    min-height:50vh;

    padding:70px 30px;

    background-position:center center;

}

.hero-content{

    max-width:100%;

}

.hero-tag{

    font-size:11px;

    padding:9px 20px;

    letter-spacing:2px;

}

.hero h1{

    font-size:36px;

    line-height:1.2;

}

.hero p{

    font-size:15px;

    max-width:600px;

    line-height:1.8;

}

}

/*========================================
TABLET PORTRAIT (768px)
========================================*/

@media (max-width:768px){

.hero{

    min-height:45vh;

    padding:60px 20px;

    background-position:center;

}

.hero-content{

    max-width:100%;

}

.hero-tag{

    font-size:10px;

    padding:8px 18px;

}

.hero h1{

    font-size:30px;

    margin-bottom:15px;

}

.hero p{

    font-size:14px;

    line-height:1.8;

    max-width:100%;

}

}

/*========================================
MOBILE (576px)
========================================*/

@media (max-width:576px){

.hero{

    min-height:42vh;

    padding:50px 18px;

}

.hero-tag{

    font-size:10px;

    padding:7px 16px;

    margin-bottom:12px;

}

.hero h1{

    font-size:26px;

    line-height:1.25;

}

.hero p{

    font-size:13px;

    line-height:1.7;

    max-width:100%;

}

}

/*========================================
SMALL MOBILE (390px)
========================================*/

@media (max-width:390px){

.hero{

    min-height:38vh;

    padding:45px 15px;

}

.hero-tag{

    font-size:9px;

    padding:6px 14px;

}

.hero h1{

    font-size:22px;

}

.hero p{

    font-size:12px;

    line-height:1.7;

}

}

/*==================================================
BLOG HERO
PART 4
FINAL PREMIUM VERSION
==================================================*/

/*========================================
ELEMENTOR FULL WIDTH FIX
========================================*/

.elementor-widget-html,
.elementor-widget-container{

    width:100%;

    max-width:100%;

}

.hero{

    max-width:none;

    left:50%;

    right:50%;

    margin-left:-50vw;

    margin-right:-50vw;

    width:100vw;

}

/*========================================
PREMIUM OVERLAY
========================================*/

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.10),
            rgba(0,0,0,.42)
        );

    z-index:1;

}

/*========================================
TOP GLOW
========================================*/

.hero::after{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    top:-180px;

    right:-160px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(216,180,106,.20),

            transparent 72%

        );

    filter:blur(25px);

    z-index:1;

}

/*========================================
BOTTOM GLOW
========================================*/

.hero-content::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    left:-170px;

    bottom:-160px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(142,43,46,.15),

            transparent 70%

        );

    filter:blur(20px);

    z-index:-1;

}

/*========================================
CONTENT
========================================*/

.hero-content{

    position:relative;

    z-index:5;

}

/*========================================
TEXT SHADOW
========================================*/

.hero h1{

    text-shadow:

        0 6px 30px rgba(0,0,0,.40);

}

.hero p{

    text-shadow:

        0 2px 12px rgba(0,0,0,.30);

}

/*========================================
HERO TAG
========================================*/

.hero-tag{

    box-shadow:

        0 12px 30px rgba(0,0,0,.18);

}

/*========================================
IMAGE OPTIMIZATION
========================================*/

.hero{

    image-rendering:auto;

    background-attachment:scroll;

}

/*========================================
SMOOTH TRANSITIONS
========================================*/

.hero,
.hero *,
.hero::before,
.hero::after{

    transition:.35s ease;

}

/*========================================
ACCESSIBILITY
========================================*/

.hero a:focus-visible{

    outline:3px solid #FFD66B;

    outline-offset:4px;

}

/*========================================
TEXT SELECTION
========================================*/

.hero ::selection{

    background:#FFD66B;

    color:#111827;

}

/*========================================
REDUCED MOTION
========================================*/

@media (prefers-reduced-motion:reduce){

*{

    animation:none!important;

    transition:none!important;

    scroll-behavior:auto!important;

}

}

/*========================================
PRINT
========================================*/

@media print{

.hero{

    background:#182446;

    color:#000;

    min-height:auto;

}

.hero::before,
.hero::after,
.hero-content::before{

    display:none;

}

}/* End custom CSS */