/*==================================================
  SATTA KHEL V2
  layout.css
  PART 1/8
==================================================*/

/*==================================================
  WEBSITE WRAPPER
==================================================*/

.site-wrapper{

    width:100%;

    min-height:100vh;

    background:var(--bg);

}

/*==================================================
  SECTION
==================================================*/

.section{

    position:relative;

    width:100%;

    padding-top:80px;

    padding-bottom:80px;

}

.section-sm{

    padding-top:50px;

    padding-bottom:50px;

}

.section-lg{

    padding-top:120px;

    padding-bottom:120px;

}

/*==================================================
  FULL WIDTH CONTAINER
==================================================*/

.container-fluid{

    width:100%;

    max-width:100%;

    padding-left:32px;

    padding-right:32px;

    margin:auto;

}

/*==================================================
  FLEX CONTAINER
==================================================*/

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==================================================
  HEADER
==================================================*/

.site-header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    background:rgba(11,31,58,.94);

    backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.site-header.scrolled{

    background:#08162B;

    box-shadow:0 12px 35px rgba(0,0,0,.18);

}

/*==================================================
  HEADER INNER
==================================================*/

.header-inner{

    width:100%;

    min-height:82px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/*==================================================
  LOGO
==================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}

.logo img{

    width:58px;

    height:58px;

}

.logo-text{

    color:#fff;

    font-size:28px;

    font-weight:800;

    letter-spacing:.5px;

}

/*==================================================
  NAVIGATION
==================================================*/

.navigation{

    display:flex;

    align-items:center;

    margin-left:auto;

}

.navigation ul{

    display:flex;

    align-items:center;

    gap:26px;

}

.navigation li{

    list-style:none;

}

.navigation a{

    position:relative;

    color:#fff;

    font-size:15px;

    font-weight:600;

    transition:.30s;

}

.navigation a:hover{

    color:#60A5FA;

}

.navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#60A5FA;

    transition:.30s;

}

.navigation a:hover::after{

    width:100%;

}

.navigation .active{

    color:#60A5FA;

}

.navigation .active::after{

    width:100%;

}

/*==================================================
  ALWAYS OPEN NAV
==================================================*/

.mobile-navigation{

    display:flex;

}

.menu-toggle{

    display:none !important;

}

/*==================================================
 END OF PART 1
==================================================*/
/*==================================================
  HERO SECTION LAYOUT
==================================================*/

.hero{

    position:relative;

    width:100%;

    min-height:720px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:linear-gradient(135deg,#08162B,#0B1F3A,#2563EB);

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(255,255,255,.10),
    transparent 45%);

}

.hero::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:180px;

    background:linear-gradient(
        to top,
        #F8FAFC,
        transparent
    );

}

/*==================================================
 HERO CONTAINER
==================================================*/

.hero-container{

    position:relative;

    z-index:2;

    width:100%;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    align-items:center;

    gap:70px;

}

/*==================================================
 HERO LEFT
==================================================*/

.hero-content{

    width:100%;

}

.hero-content h1{

    color:#fff;

    font-size:68px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:28px;

}

.hero-content p{

    max-width:700px;

    color:rgba(255,255,255,.82);

    font-size:18px;

    line-height:1.9;

    margin-bottom:40px;

}

/*==================================================
 HERO BUTTONS
==================================================*/

.hero-buttons{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

}

/*==================================================
 HERO RIGHT
==================================================*/

.hero-right{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==================================================
 LIVE RESULT BOX
==================================================*/

.live-result-box{

    width:100%;

    max-width:420px;

    padding:35px;

    border-radius:26px;

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

    backdrop-filter:blur(18px);

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

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.live-result-title{

    color:#fff;

    font-size:24px;

    font-weight:700;

    margin-bottom:25px;

}

.live-result-number{

    font-size:90px;

    font-weight:800;

    color:#fff;

    text-align:center;

    margin:20px 0;

}

.live-result-date{

    text-align:center;

    color:rgba(255,255,255,.75);

}

/*==================================================
 HERO SEARCH
==================================================*/

.hero-search{

    margin-top:45px;

    width:100%;

}

.hero-search form{

    width:100%;

    display:flex;

    align-items:center;

    gap:15px;

}

.hero-search input{

    flex:1;

    height:62px;

    border:none;

    border-radius:999px;

    padding:0 25px;

    font-size:16px;

}

.hero-search button{

    height:62px;

    padding:0 35px;

    border:none;

    border-radius:999px;

    background:var(--secondary);

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.30s;

}

.hero-search button:hover{

    background:var(--primary);

}

/*==================================================
 QUICK LINKS
==================================================*/

.quick-links{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:35px;

}

.quick-links a{

    padding:12px 20px;

    border-radius:999px;

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

    color:#fff;

    transition:.30s;

}

.quick-links a:hover{

    background:#fff;

    color:var(--primary);

}

/*==================================================
 LAST UPDATED BAR
==================================================*/

.update-bar{

    margin-top:45px;

    display:flex;

    align-items:center;

    gap:15px;

    color:#fff;

    font-size:15px;

}

.update-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#22C55E;

    animation:pulse 1.5s infinite;

}

/*==================================================
 RESULT STRIP
==================================================*/

.result-strip{

    width:100%;

    padding:22px 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    background:#fff;

    border-radius:22px;

    margin-top:-60px;

    position:relative;

    z-index:5;

    box-shadow:var(--shadow-lg);

}

.result-strip-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    min-width:140px;

}

.result-strip-market{

    font-size:14px;

    color:var(--text-muted);

    margin-bottom:8px;

}

.result-strip-number{

    font-size:34px;

    font-weight:800;

    color:var(--secondary);

}

/*==================================================
 END OF PART 2
==================================================*/
/*==================================================
  MARKET SECTION LAYOUT
==================================================*/

.market-section{

    position:relative;

    width:100%;

    padding:90px 0;

    background:#F8FAFC;

}

.market-header{

    text-align:center;

    margin-bottom:60px;

}

.market-header h2{

    font-size:44px;

    margin-bottom:18px;

    color:var(--primary);

}

.market-header p{

    max-width:760px;

    margin:auto;

    color:var(--text-muted);

}

/*==================================================
  MARKET GRID
==================================================*/

.market-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

/*==================================================
  MARKET CARD LAYOUT
==================================================*/

.market-card{

    display:flex;

    flex-direction:column;

    height:100%;

}

.market-card-body{

    flex:1;

    display:flex;

    flex-direction:column;

}

.market-card-footer{

    margin-top:auto;

    padding-top:24px;

}

/*==================================================
  RESULT SECTION
==================================================*/

.result-section{

    width:100%;

    padding:90px 0;

}

.result-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

/*==================================================
  LIVE RESULT CARD
==================================================*/

.live-card{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:24px;

    padding:30px;

    border:1px solid var(--border);

    transition:.35s;

}

.live-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.live-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        var(--accent)
    );

}

.live-market{

    font-size:22px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:20px;

}

.live-number{

    font-size:60px;

    font-weight:800;

    color:var(--secondary);

    text-align:center;

    margin:20px 0;

}

.live-time{

    text-align:center;

    color:var(--text-muted);

}

/*==================================================
  TIMING SECTION
==================================================*/

.timing-section{

    padding:90px 0;

    background:#fff;

}

.timing-wrapper{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:40px;

    align-items:start;

}

.timing-table{

    width:100%;

}

.timing-sidebar{

    position:sticky;

    top:110px;

}

/*==================================================
  SIDEBAR BOX
==================================================*/

.sidebar-box{

    background:#fff;

    border:1px solid var(--border);

    border-radius:24px;

    padding:30px;

    box-shadow:var(--shadow-sm);

}

.sidebar-box h3{

    margin-bottom:20px;

}

/*==================================================
  CHART SECTION
==================================================*/

.chart-section{

    width:100%;

    padding:90px 0;

}

.chart-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

/*==================================================
  ARCHIVE SECTION
==================================================*/

.archive-section{

    width:100%;

    padding:90px 0;

    background:#F8FAFC;

}

.archive-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

/*==================================================
  BLOG SECTION
==================================================*/

.blog-section{

    width:100%;

    padding:90px 0;

}

.blog-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

/*==================================================
  FAQ SECTION
==================================================*/

.faq-section{

    width:100%;

    padding:90px 0;

    background:#fff;

}

.faq-wrapper{

    max-width:950px;

    margin:auto;

}

/*==================================================
  CTA SECTION
==================================================*/

.cta-section{

    width:100%;

    padding:100px 0;

}

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

.content-width{

    max-width:850px;

}

.content-center{

    margin-left:auto;

    margin-right:auto;

}

/*==================================================
  END OF PART 3
==================================================*/
/*==================================================
  BLOG LAYOUT
==================================================*/

.blog-layout{

    width:100%;

    display:grid;

    grid-template-columns:minmax(0,1fr) 340px;

    gap:40px;

    align-items:start;

}

.blog-content{

    min-width:0;

}

.blog-sidebar{

    position:sticky;

    top:110px;

    display:flex;

    flex-direction:column;

    gap:30px;

}

/*==================================================
  SIDEBAR WIDGET
==================================================*/

.sidebar-widget{

    width:100%;

    background:#FFFFFF;

    border:1px solid var(--border);

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

}

.widget-header{

    padding:20px 24px;

    border-bottom:1px solid var(--border);

    background:#FFFFFF;

}

.widget-header h3{

    margin:0;

    color:var(--primary);

    font-size:20px;

}

.widget-body{

    padding:24px;

}

/*==================================================
  RECENT POSTS
==================================================*/

.recent-post{

    display:flex;

    gap:16px;

    padding:16px 0;

    border-bottom:1px solid var(--border);

}

.recent-post:last-child{

    border-bottom:none;

}

.recent-post-image{

    width:90px;

    height:90px;

    flex-shrink:0;

    overflow:hidden;

    border-radius:16px;

}

.recent-post-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.recent-post-content{

    flex:1;

}

.recent-post-content h4{

    font-size:17px;

    margin-bottom:8px;

}

.recent-post-content p{

    margin:0;

    font-size:14px;

}

/*==================================================
  CATEGORY LIST
==================================================*/

.category-list{

    display:flex;

    flex-direction:column;

}

.category-list a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

    border-bottom:1px solid var(--border);

    color:var(--text);

    transition:.30s;

}

.category-list a:last-child{

    border-bottom:none;

}

.category-list a:hover{

    color:var(--secondary);

    padding-left:8px;

}

/*==================================================
  TAG CLOUD
==================================================*/

.tag-cloud{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.tag-cloud a{

    padding:10px 18px;

    border-radius:999px;

    background:#EFF6FF;

    color:var(--secondary);

    transition:.30s;

}

.tag-cloud a:hover{

    background:var(--secondary);

    color:#FFFFFF;

}

/*==================================================
  ADVERTISEMENT LAYOUT
==================================================*/

.ad-section{

    width:100%;

    margin:40px 0;

}

.ad-box{

    width:100%;

    min-height:250px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:2px dashed var(--border);

    border-radius:24px;

    background:#FFFFFF;

    color:var(--text-muted);

    text-align:center;

}

.ad-horizontal{

    min-height:140px;

}

.ad-vertical{

    min-height:600px;

}

.ad-square{

    min-height:320px;

}

/*==================================================
  FUTURE ADMIN ADS
==================================================*/

.dynamic-ad{

    width:100%;

    overflow:hidden;

    border-radius:22px;

}

.dynamic-ad img{

    width:100%;

    display:block;

}

/*==================================================
  FOOTER LAYOUT
==================================================*/

.site-footer{

    width:100%;

    margin-top:100px;

    background:#08162B;

}

.footer-container{

    width:100%;

    padding:80px 32px 40px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

}

.footer-column{

    display:flex;

    flex-direction:column;

}

.footer-column h3{

    color:#FFFFFF;

    margin-bottom:24px;

}

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-column a{

    color:rgba(255,255,255,.70);

    transition:.30s;

}

.footer-column a:hover{

    color:#60A5FA;

    padding-left:8px;

}

.footer-about{

    color:rgba(255,255,255,.72);

    line-height:1.9;

}

.footer-social{

    display:flex;

    gap:14px;

    margin-top:30px;

}

.footer-bottom{

    margin-top:60px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.footer-copy{

    color:rgba(255,255,255,.60);

}

.footer-links{

    display:flex;

    gap:24px;

}

/*==================================================
  LEGAL PAGES
==================================================*/

.page-layout{

    width:100%;

    padding:80px 0;

}

.page-content{

    max-width:1100px;

    margin:auto;

}

.page-content h1{

    margin-bottom:30px;

}

.page-content p{

    margin-bottom:20px;

}

/*==================================================
  END OF PART 4
==================================================*/
/*==================================================
  MARKET PAGE LAYOUT
==================================================*/

.market-page{

    width:100%;

    padding:80px 0;

    background:#F8FAFC;

}

.market-page-header{

    width:100%;

    margin-bottom:50px;

}

.market-page-header h1{

    font-size:48px;

    color:var(--primary);

    margin-bottom:18px;

}

.market-page-header p{

    max-width:850px;

    color:var(--text-muted);

}

.market-layout{

    display:grid;

    grid-template-columns:minmax(0,1fr) 340px;

    gap:40px;

    align-items:start;

}

.market-main{

    min-width:0;

}

.market-sidebar{

    position:sticky;

    top:110px;

}

/*==================================================
  TODAY RESULT PANEL
==================================================*/

.today-panel{

    width:100%;

    margin-bottom:35px;

}

.today-panel-inner{

    display:grid;

    grid-template-columns:220px 1fr;

    gap:30px;

    background:#FFFFFF;

    border-radius:24px;

    border:1px solid var(--border);

    padding:30px;

    box-shadow:var(--shadow-sm);

}

.today-number{

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:72px;

    font-weight:800;

    color:var(--secondary);

    border-radius:22px;

    background:#EFF6FF;

}

.today-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.today-info h2{

    margin-bottom:15px;

}

.today-info p{

    margin-bottom:10px;

}

/*==================================================
  MONTH SELECTOR
==================================================*/

.month-selector{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin:35px 0;

}

.month-selector a{

    padding:12px 20px;

    border-radius:999px;

    border:1px solid var(--border);

    background:#FFFFFF;

    color:var(--primary);

    transition:.30s;

    font-weight:600;

}

.month-selector a:hover,

.month-selector .active{

    background:var(--secondary);

    color:#FFFFFF;

    border-color:var(--secondary);

}

/*==================================================
  YEAR SELECTOR
==================================================*/

.year-selector{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:35px;

}

.year-selector a{

    padding:10px 18px;

    background:#FFFFFF;

    border-radius:14px;

    border:1px solid var(--border);

    transition:.30s;

}

.year-selector a:hover,

.year-selector .active{

    background:var(--primary);

    color:#FFFFFF;

}

/*==================================================
  CHART WRAPPER
==================================================*/

.chart-wrapper{

    width:100%;

    overflow-x:auto;

    background:#FFFFFF;

    border-radius:24px;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

}

.chart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 28px;

    border-bottom:1px solid var(--border);

}

.chart-header h2{

    margin:0;

    font-size:28px;

}

/*==================================================
  MONTHLY CHART GRID
==================================================*/

.month-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:18px;

    padding:30px;

}

.month-card{

    display:flex;

    justify-content:center;

    align-items:center;

    height:110px;

    background:#F8FAFC;

    border-radius:18px;

    border:1px solid var(--border);

    font-size:30px;

    font-weight:800;

    color:var(--secondary);

    transition:.30s;

}

.month-card:hover{

    transform:translateY(-4px);

    border-color:var(--secondary);

    box-shadow:var(--shadow-sm);

}

/*==================================================
  ARCHIVE GRID
==================================================*/

.archive-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.archive-card{

    background:#FFFFFF;

    border-radius:22px;

    padding:28px;

    border:1px solid var(--border);

    transition:.30s;

}

.archive-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-md);

}

.archive-year{

    font-size:34px;

    font-weight:800;

    color:var(--secondary);

    margin-bottom:18px;

}

.archive-link{

    display:inline-flex;

    margin-top:18px;

    font-weight:600;

    color:var(--secondary);

}

/*==================================================
  SEARCH RESULT
==================================================*/

.search-layout{

    width:100%;

}

.search-result{

    display:flex;

    gap:22px;

    padding:26px;

    background:#FFFFFF;

    border-radius:22px;

    border:1px solid var(--border);

    margin-bottom:24px;

    transition:.30s;

}

.search-result:hover{

    box-shadow:var(--shadow-md);

}

.search-thumb{

    width:140px;

    height:110px;

    border-radius:18px;

    overflow:hidden;

    flex-shrink:0;

}

.search-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.search-content{

    flex:1;

}

.search-content h3{

    margin-bottom:12px;

}

.search-content p{

    margin-bottom:16px;

}

.search-content a{

    color:var(--secondary);

    font-weight:700;

}

/*==================================================
  EMPTY STATE
==================================================*/

.empty-state{

    padding:80px 30px;

    text-align:center;

    background:#FFFFFF;

    border-radius:24px;

    border:1px dashed var(--border);

}

.empty-state h3{

    margin:25px 0 15px;

}

.empty-state p{

    max-width:600px;

    margin:auto;

}

/*==================================================
  END OF PART 5
==================================================*/
/*==================================================
  HOMEPAGE STATISTICS SECTION
==================================================*/

.stats-section{

    width:100%;

    padding:90px 0;

    background:#FFFFFF;

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.stat-card{

    background:#FFFFFF;

    border:1px solid var(--border);

    border-radius:24px;

    padding:35px;

    text-align:center;

    transition:.35s;

    box-shadow:var(--shadow-sm);

}

.stat-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.stat-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:20px;

    background:#EFF6FF;

}

.stat-number{

    font-size:42px;

    font-weight:800;

    color:var(--secondary);

    margin-bottom:10px;

}

.stat-title{

    font-size:18px;

    font-weight:600;

    color:var(--text);

}

/*==================================================
  FEATURE SECTION
==================================================*/

.feature-layout{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.feature-card{

    height:100%;

}

/*==================================================
  FAQ LAYOUT
==================================================*/

.faq-container{

    max-width:900px;

    margin:auto;

}

.faq-item{

    background:#FFFFFF;

    border:1px solid var(--border);

    border-radius:20px;

    margin-bottom:18px;

    overflow:hidden;

}

.faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 30px;

    cursor:pointer;

    font-size:18px;

    font-weight:700;

    color:var(--primary);

}

.faq-answer{

    display:none;

    padding:0 30px 30px;

}

.faq-item.active .faq-answer{

    display:block;

}

/*==================================================
  CONTACT PAGE
==================================================*/

.contact-layout{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:40px;

    align-items:start;

}

.contact-form{

    background:#FFFFFF;

    border:1px solid var(--border);

    border-radius:24px;

    padding:35px;

}

.contact-info{

    background:#FFFFFF;

    border:1px solid var(--border);

    border-radius:24px;

    padding:35px;

    position:sticky;

    top:110px;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:30px;

}

.contact-item:last-child{

    margin-bottom:0;

}

.contact-icon{

    width:56px;

    height:56px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:#EFF6FF;

    flex-shrink:0;

}

/*==================================================
  ABOUT PAGE
==================================================*/

.about-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}

.about-image{

    width:100%;

}

.about-image img{

    width:100%;

    border-radius:26px;

}

.about-content{

    width:100%;

}

.about-content h2{

    margin-bottom:25px;

}

.about-content p{

    margin-bottom:18px;

}

.about-list{

    margin-top:30px;

}

.about-list li{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

}

/*==================================================
  LEGAL PAGES
==================================================*/

.legal-layout{

    width:100%;

    background:#FFFFFF;

    border:1px solid var(--border);

    border-radius:24px;

    padding:45px;

    box-shadow:var(--shadow-sm);

}

.legal-layout h2{

    margin-top:40px;

    margin-bottom:18px;

}

.legal-layout h2:first-child{

    margin-top:0;

}

.legal-layout p{

    margin-bottom:20px;

}

.legal-layout ul{

    margin:20px 0;

    padding-left:22px;

    list-style:disc;

}

.legal-layout li{

    margin-bottom:12px;

    color:var(--text-light);

}

/*==================================================
  AUTHOR BOX
==================================================*/

.author-box{

    display:flex;

    gap:24px;

    margin-top:50px;

    padding:30px;

    background:#FFFFFF;

    border:1px solid var(--border);

    border-radius:24px;

}

.author-avatar{

    width:90px;

    height:90px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

}

.author-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.author-info{

    flex:1;

}

/*==================================================
  NEWSLETTER SECTION
==================================================*/

.newsletter-section{

    margin-top:80px;

    padding:60px;

    background:linear-gradient(135deg,#0B1F3A,#2563EB);

    border-radius:28px;

    color:#FFFFFF;

    text-align:center;

}

.newsletter-section h2{

    color:#FFFFFF;

    margin-bottom:18px;

}

.newsletter-section p{

    color:rgba(255,255,255,.80);

    max-width:700px;

    margin:0 auto 30px;

}

/*==================================================
  END OF PART 6
==================================================*/
/*==================================================
  RESPONSIVE - LARGE DESKTOP
==================================================*/

@media (max-width:1400px){

    .hero-container{

        grid-template-columns:1fr .9fr;

        gap:50px;

    }

    .market-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .result-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .chart-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .archive-grid{

        grid-template-columns:repeat(3,1fr);

    }

}

/*==================================================
  LAPTOP
==================================================*/

@media (max-width:1200px){

    .container-fluid{

        padding-left:24px;

        padding-right:24px;

    }

    .hero{

        min-height:620px;

    }

    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-right{

        margin-top:40px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .quick-links{

        justify-content:center;

    }

    .update-bar{

        justify-content:center;

    }

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

/*==================================================
  TABLET
==================================================*/

@media (max-width:992px){

    .header-inner{

        flex-direction:column;

        gap:20px;

        padding:20px 0;

    }

    .navigation{

        width:100%;

        justify-content:center;

    }

    .navigation ul{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

    }

    .logo{

        justify-content:center;

    }

    .market-layout{

        grid-template-columns:1fr;

    }

    .blog-layout{

        grid-template-columns:1fr;

    }

    .contact-layout{

        grid-template-columns:1fr;

    }

    .about-layout{

        grid-template-columns:1fr;

    }

    .timing-wrapper{

        grid-template-columns:1fr;

    }

    .market-sidebar,
    .blog-sidebar,
    .contact-info,
    .timing-sidebar{

        position:relative;

        top:auto;

    }

    .result-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .market-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .archive-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .blog-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .feature-layout{

        grid-template-columns:repeat(2,1fr);

    }

    .month-grid{

        grid-template-columns:repeat(4,1fr);

    }

}

/*==================================================
  MOBILE
==================================================*/

@media (max-width:768px){

    .container-fluid{

        padding-left:16px;

        padding-right:16px;

    }

    .section{

        padding-top:60px;

        padding-bottom:60px;

    }

    .hero{

        min-height:auto;

        padding:80px 0 60px;

    }

    .hero-container{

        gap:35px;

    }

    .hero-content h1{

        font-size:40px;

    }

    .hero-content p{

        font-size:16px;

    }

    .live-result-number{

        font-size:64px;

    }

    .hero-search form{

        flex-direction:column;

    }

    .hero-search button{

        width:100%;

    }

    .result-strip{

        margin-top:30px;

        grid-template-columns:1fr 1fr;

        display:grid;

    }

    .today-panel-inner{

        grid-template-columns:1fr;

    }

    .today-number{

        min-height:140px;

    }

    .month-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .chart-grid,
    .market-grid,
    .result-grid,
    .archive-grid,
    .blog-grid,
    .stats-grid,
    .feature-layout{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .footer-links{

        flex-wrap:wrap;

        justify-content:center;

    }

}

/*==================================================
  SMALL MOBILE
==================================================*/

@media (max-width:576px){

    .hero-content h1{

        font-size:34px;

    }

    .hero-title{

        font-size:34px;

    }

    .month-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .navigation ul{

        gap:12px;

    }

    .navigation a{

        font-size:14px;

    }

    .logo-text{

        font-size:24px;

    }

    .newsletter-section{

        padding:35px 20px;

    }

    .legal-layout{

        padding:28px;

    }

    .author-box{

        flex-direction:column;

        text-align:center;

    }

}

/*==================================================
  ALWAYS OPEN MOBILE NAVIGATION
==================================================*/

@media (max-width:992px){

    .menu-toggle{

        display:none !important;

    }

    .mobile-navigation{

        display:flex !important;

        width:100%;

        justify-content:center;

    }

    .navigation{

        display:flex !important;

    }

    .navigation ul{

        display:flex !important;

    }

}

/*==================================================
  FULL WIDTH RULE
==================================================*/

html,
body,
header,
main,
section,
footer{

    width:100%;

    overflow-x:hidden;

}

/*==================================================
  END OF PART 7
==================================================*/
/*==================================================
  RESPONSIVE TABLE WRAPPER
==================================================*/

.table-responsive{

    width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

}

.table-responsive table{

    min-width:900px;

}

/*==================================================
  IMAGE RESPONSIVE
==================================================*/

img{

    max-width:100%;

    height:auto;

    display:block;

}

/*==================================================
  VIDEO RESPONSIVE
==================================================*/

.video-wrapper{

    position:relative;

    width:100%;

    padding-bottom:56.25%;

    overflow:hidden;

    border-radius:24px;

}

.video-wrapper iframe,
.video-wrapper video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    border:none;

}

/*==================================================
  SECTION SPACING
==================================================*/

.section-gap{

    margin-top:80px;

}

.section-gap-sm{

    margin-top:50px;

}

.section-gap-lg{

    margin-top:120px;

}

/*==================================================
  DIVIDER
==================================================*/

.section-divider{

    width:100%;

    height:1px;

    background:var(--border);

    margin:70px 0;

}

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

.center-content{

    display:flex;

    justify-content:center;

    align-items:center;

}

.space-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-start{

    display:flex;

    justify-content:flex-start;

    align-items:center;

}

.flex-end{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

/*==================================================
  HOVER EFFECTS
==================================================*/

.hover-up{

    transition:.35s;

}

.hover-up:hover{

    transform:translateY(-8px);

}

.hover-shadow{

    transition:.35s;

}

.hover-shadow:hover{

    box-shadow:var(--shadow-lg);

}

.hover-primary:hover{

    color:var(--secondary);

}

/*==================================================
  PAGE LOADER
==================================================*/

.page-loader{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFFFFF;

    z-index:999999;

}

.page-loader.hide{

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

.loader-circle{

    width:60px;

    height:60px;

    border:6px solid #E2E8F0;

    border-top-color:var(--secondary);

    border-radius:50%;

    animation:loaderSpin .8s linear infinite;

}

@keyframes loaderSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
  SCROLL PROGRESS BAR
==================================================*/

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        var(--accent)
    );

    z-index:999999;

}

/*==================================================
  PAGE TRANSITION
==================================================*/

.page-transition{

    animation:pageFade .45s ease;

}

@keyframes pageFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media print{

    header,
    footer,
    .whatsapp-float,
    .back-top,
    .navigation,
    .hero,
    .newsletter-section{

        display:none !important;

    }

    body{

        background:#FFFFFF;

        color:#000000;

    }

    .section{

        padding:0;

    }

}

/*==================================================
  PERFORMANCE
==================================================*/

*{

    -webkit-tap-highlight-color:transparent;

}

html{

    scroll-padding-top:90px;

}

body{

    text-size-adjust:100%;

    -webkit-text-size-adjust:100%;

}

/*==================================================
  BROWSER FIXES
==================================================*/

button{

    appearance:none;

    -webkit-appearance:none;

}

input,
textarea,
select{

    appearance:none;

    -webkit-appearance:none;

}

textarea{

    resize:vertical;

}

iframe{

    border:0;

}

svg{

    vertical-align:middle;

}

/*==================================================
  FUTURE COMPONENT PLACEHOLDER
==================================================*/

.layout-extension{

    display:none;

}

/*==================================================
  SATTA KHEL V2
==================================================

Build : 0.1

File : layout.css

Status : Production Ready

Theme :

✔ Navy Blue
✔ White
✔ Full Width
✔ Mobile First
✔ Always Open Navigation
✔ Sticky Header
✔ Premium Layout

==================================================*/

/*==================================================
  FILE COMPLETE
==================================================*/