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

:root{

--home-bg:#ff0;
--body-bg:#550061;

--card:none;

--text:#fff;

--text-light:#ffffae;

--border:#e5e7eb;

--primary:#ff9800;

--primary-dark:#f57c00;

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

--radius:16px;

--max-width:1400px;

--transition:.3s ease;

}


/*==================================================
GLOBAL
==================================================*/

/* ==========================================
   GLOBAL DEFAULTS
========================================== */

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    margin:0;
    padding:0;
    font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:16px;
    line-height:1.6;
    font-weight:400;
    color:#222;
    background:#fff;
    overflow-x:hidden;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    cursor:pointer;
    border:none;
    background:none;
}

ul,
ol{
    margin:0;
    padding:0;
    list-style:none;
}

h1,h2,h3,h4,h5,h6,
p{
    margin:0;
}

main{

padding: 0 5%;
background:var(--body-bg);

color:var(--text);

}


section{

padding:70px 20px;

}


.hero-container,

.section-header,

.stats-container,

.newsletter-box,

.about-content{

max-width:var(--max-width);

margin:auto;

}


.section-header{

text-align:center;

margin-bottom:50px;

}


.section-header h2{

font-size:36px;

font-weight:700;

line-height:1.2;

margin:0 0 18px;

color:var(--text);

}


.section-header p{

max-width:850px;

margin:auto;

font-size:17px;

line-height:1.8;

color:var(--text-light);

}


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

.hero{

padding:90px 20px;

background:linear-gradient(135deg,#093f75,#1d0087);

}


.hero-container{

display:grid;

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

align-items:center;

gap:70px;

}


.hero-badge{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:#fff3e0;

color:var(--primary-dark);

font-weight:600;

margin-bottom:20px;

}


.hero h1{

font-size:56px;

line-height:1.15;

margin:0 0 25px;

color:var(--text);

}


.hero p{

font-size:18px;

line-height:1.9;

color:var(--text-light);

margin-bottom:35px;

max-width:680px;

}


.hero-search{

display:flex;

background:#fff;

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

border-radius:60px;

overflow:hidden;

box-shadow:var(--shadow);

margin-bottom:30px;

}


.hero-search input{

flex:1;

border:none;

outline:none;

padding:18px 22px;

font-size:16px;

background:transparent;

}


.hero-search button{

border:none;

background:var(--primary);

color:#fff;

padding:0 34px;

font-size:16px;

cursor:pointer;

transition:var(--transition);

}


.hero-search button:hover{

background:var(--primary-dark);

}


.hero-buttons{
    display:grid;
    gap:18px;
    grid-template-columns:1fr;
    width:100%;
}

.hero-buttons a{
    display:block;
    width:100%;
    box-sizing:border-box;
    text-decoration:none;
    padding:15px 28px;
    border-radius:50px;
    font-weight:600;
    transition:var(--transition);
}


.hero-buttons a:first-child{

background:var(--primary);

color:#fff;

}


.hero-buttons a:first-child:hover{

background:var(--primary-dark);

}


.hero-buttons a:last-child{

background:#fff;

color:var(--text);

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

}


.hero-buttons a:last-child:hover{

background:#f8fafc;

}


.hero-image img{

width:100%;

display:block;

border-radius:20px;

box-shadow:var(--shadow);

}

/*==================================================
GRID LAYOUTS
==================================================*/

.category-grid,
.topics-grid,
.article-grid,
.facts-grid,
.explore-grid,
.question-grid,
.stats-grid,
.benefit-grid{

max-width:var(--max-width);

margin:auto;

display:grid;

gap:30px;

}


.category-grid{

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

}


.topics-grid{

grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));

}


.article-grid{

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

}


.facts-grid{

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

}


.explore-grid{

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

}


.question-grid{

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

}


.stats-grid{

grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));

margin-top:45px;

}


.benefit-grid{

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

}


/*==================================================
COMMON CARD
==================================================*/

.category-card,
.topic-card,
.article-card,
.fact-card,
.explore-card,
.question-card,
.stat-card,
.benefit-card{

background:var(--card);

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

border-radius:var(--radius);

padding:25px;

transition:var(--transition);

box-shadow:0 2px 10px rgba(0,0,0,.04);

}


.category-card:hover,
.topic-card:hover,
.article-card:hover,
.fact-card:hover,
.explore-card:hover,
.question-card:hover,
.stat-card:hover,
.benefit-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}


/*==================================================
CATEGORY CARD
==================================================*/

.category-card img{

display:block;

width:100%;

height:220px;

object-fit:cover;

border-radius:12px;

margin-bottom:18px;

}


.category-card h3{

margin:0 0 12px;

font-size:22px;

color:var(--text);

}


.category-card p{

margin:0 0 22px;

line-height:1.8;

color:var(--text-light);

}


.category-card a{

display:inline-block;

padding:12px 24px;

border-radius:40px;

background:var(--primary);

color:#fff;

text-decoration:none;

font-weight:600;

transition:var(--transition);

}


.category-card a:hover{

background:var(--primary-dark);

}


/*==================================================
TOPIC CARD
==================================================*/

.topic-card a{

text-decoration:none;

font-size:18px;

font-weight:600;

color:var(--text);

display:block;

margin-bottom:12px;

}


.topic-card p{

margin:0;

line-height:1.8;

color:var(--text-light);

}


/*==================================================
ARTICLE CARD
==================================================*/

.article-card img{

width:100%;

height:200px;

object-fit:cover;

border-radius:12px;

margin-bottom:18px;

}


.article-card h3{

margin:0 0 12px;

font-size:24px;

}


.article-card p{

margin:0 0 20px;

line-height:1.8;

color:var(--text-light);

}


.article-card a{

text-decoration:none;

font-weight:600;

color:var(--primary-dark);

}


/*==================================================
FACT CARD
==================================================*/

.fact-card{

border-left:5px solid var(--primary);

}


.fact-card h3{

margin:0 0 15px;

font-size:22px;

}


.fact-card p{

margin:0;

line-height:1.9;

color:var(--text-light);

}

/*==================================================
EXPLORE CATEGORY
==================================================*/

.explore-card h3{

margin:0 0 18px;

font-size:22px;

color:var(--text);

}


.explore-card ul{

margin:0;

padding-left:18px;

}


.explore-card li{

margin-bottom:12px;

}


.explore-card li:last-child{

margin-bottom:0;

}


.explore-card a{

text-decoration:none;

color:var(--text-light);

transition:var(--transition);

}


.explore-card a:hover{

color:var(--primary-dark);

}


/*==================================================
QUESTION CARD
==================================================*/

.question-card h3{

margin:0 0 15px;

font-size:21px;

line-height:1.5;

color:var(--text);

}


.question-card p{

margin:0;

line-height:1.8;

color:var(--text-light);

}


/*==================================================
STATISTICS
==================================================*/


.stat-card{

text-align:center;

}


.stat-card h3{

margin:0;

font-size:42px;

font-weight:700;

color:var(--primary-dark);

}


.stat-card p{

margin:14px 0 0;

font-size:16px;

color:var(--text-light);

}


/*==================================================
WHY WORLDINFO
==================================================*/

.benefit-card{

text-align:center;

}


.benefit-card h3{

margin:0 0 16px;

font-size:24px;

color:var(--text);

}


.benefit-card p{

margin:0;

line-height:1.9;

color:var(--text-light);

}


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

.newsletter-box{

background:#5e003d;

padding:55px 35px;

border-radius:var(--radius);

box-shadow:var(--shadow);

text-align:center;

}


.newsletter-box h2{

margin:0 0 18px;

font-size:36px;

}


.newsletter-box p{

max-width:700px;

margin:0 auto 30px;

line-height:1.8;

color:var(--text-light);

}


.newsletter-form{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}


.newsletter-form input{

width:420px;

max-width:100%;

padding:16px 20px;

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

border-radius:50px;

font-size:16px;

outline:none;

}


.newsletter-form button{

padding:16px 34px;

border:none;

border-radius:50px;

background:var(--primary);

color:#fff;

font-size:16px;

cursor:pointer;

transition:var(--transition);

}


.newsletter-form button:hover{

background:var(--primary-dark);

}


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

.about-content{

max-width:900px;

}


.about-content p{

margin:0 0 24px;

font-size:17px;

line-height:2;

color:var(--text-light);

}


.about-content p:last-child{

margin-bottom:0;

}


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

@media (max-width:992px){

.hero-container{

grid-template-columns:1fr;

gap:50px;

text-align:center;

}

.hero p{

margin-left:auto;

margin-right:auto;

}

.hero-search{

max-width:700px;

margin-left:auto;

margin-right:auto;

margin-bottom:30px;

}

.hero-buttons{

justify-content:center;

}

.hero h1{

font-size:46px;

}

}


@media (max-width:768px){

section{

padding:55px 18px;

}

.section-header h2{

font-size:30px;

}

.hero{

padding:70px 18px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:16px;

}

.hero-search{

flex-direction:column;

border-radius:16px;

}

.hero-search input{

padding:16px;

}

.hero-search button{

padding:16px;

}

.newsletter-box{

padding:35px 20px;

}

.newsletter-box h2{

font-size:30px;

}

}


@media (max-width:480px){

.section-header h2{

font-size:26px;

}

.hero h1{

font-size:32px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

width:100%;

text-align:center;

}

.stat-card h3{

font-size:34px;

}

.about-content p{

font-size:16px;

}

}


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

a:focus-visible,
button:focus-visible,
input:focus-visible{

outline:2px solid var(--primary);

outline-offset:3px;

}


::selection{

background:var(--primary);

color:#fff;

}