/*==================================================
ALLREVIEW UI FRAMEWORK v1.0
Author: AllReview
==================================================*/


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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    color:#1f2937;
    background:#ffffff;
    line-height:1.6;
}


/*==================================================
02 VARIABLES
==================================================*/

:root{

--ar-primary:#2196F3;
--ar-primary-hover:#1976D2;

--ar-dark:#08204A;

--ar-text:#374151;

--ar-light:#F8FAFC;

--ar-border:#E5E7EB;

--ar-radius:14px;

--ar-container:1240px;

--ar-shadow:
0 15px 45px rgba(0,0,0,.08);

}


/*==================================================
03 LAYOUT
==================================================*/

.ar-container{

width:100%;

max-width:1380px;

margin:auto;

padding:0 25px;

}


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

.ar-hero{

position:relative;

overflow:visible;

padding:120px 0 190px;

background:linear-gradient(
        90deg,
        rgba(5,20,55,.90) 0%,
        rgba(5,20,55,.78) 40%,
        rgba(5,20,55,.30) 100%
    ),
    url(https://allreview.ca/canada-guide/images/hero/hero-canada.png);
    background-size:cover;
    background-position:center;

background-repeat:no-repeat;

}


.ar-hero-content{

max-width:700px;

position:relative;

z-index:2;

}


.ar-badge{

display:inline-flex;

align-items:center;

padding:8px 18px;

border-radius:100px;

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

backdrop-filter:blur(10px);

font-size:14px;

color:#fff;

margin-bottom:22px;

}


.ar-hero h1{

font-size:54px;

font-weight:700;

line-height:1.1;

color:#fff;

margin-bottom:18px;

}


.ar-lead{

font-size:28px;

font-weight:500;

color:#fff;

margin-bottom:20px;

}


.ar-description{

font-size:18px;

line-height:1.9;

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

margin-bottom:35px;

}


/*==================================================
05 SEARCH
==================================================*/

.ar-search{

display:flex;

height:60px;

background:#fff;

border-radius:999px;

overflow:hidden;

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

margin-bottom:35px;

}


.ar-search input{

flex:1;

border:none;

padding:0 25px;

font-size:17px;

outline:none;

}


.ar-search button{

width:70px;

border:none;

background:var(--ar-primary);

color:#fff;

font-size:20px;

cursor:pointer;

transition:.3s;

}


.ar-search button:hover{

background:var(--ar-primary-hover);

}


/*==================================================
06 BUTTONS
==================================================*/

.ar-buttons{

display:flex;

gap:18px;

margin-bottom:45px;

flex-wrap:wrap;

}


.ar-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 32px;

border-radius:10px;

text-decoration:none;

font-weight:600;

transition:.3s;

}


.ar-btn-primary{

background:#2196F3;
border:none;

color:#fff;

}


.ar-btn-primary:hover{

background:var(--ar-primary-hover);

}


.ar-btn-outline{

border:2px solid rgba(255,255,255,.75);

color:#fff;

}


.ar-btn-outline:hover{

background:#fff;

color:var(--ar-dark);

}


/*==================================================
07 STATS
==================================================*/

.ar-stats{

display:flex;

gap:40px;

flex-wrap:wrap;

color:#fff;

}


.ar-stats div{

display:flex;

flex-direction:column;

}


.ar-stats strong{

font-size:34px;

margin-bottom:4px;

}


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

@media(max-width:992px){

.ar-hero{

padding:90px 0;

}

.ar-hero h1{

font-size:46px;

}

.ar-lead{

font-size:24px;

}

}


@media(max-width:768px){

.ar-hero{

padding:70px 0;

text-align:center;

}

.ar-hero-content{

max-width:100%;

}

.ar-buttons{

justify-content:center;

}

.ar-stats{

justify-content:center;

}

.ar-search{

height:56px;

}

.ar-hero h1{

font-size:36px;

}

.ar-lead{

font-size:20px;

}

.ar-description{

font-size:17px;

}

}


@media(max-width:480px){

.ar-search{

flex-direction:column;

height:auto;

border-radius:16px;

}

.ar-search input{

height:55px;

}

.ar-search button{

width:100%;

height:55px;

}

.ar-buttons{

flex-direction:column;

}

.ar-btn{

width:100%;

}

}


/*==================================================
09 FEATURED CATEGORIES
==================================================*/

.ar-section{

    padding:120px 0;

    background:#F8FAFC;

}

.ar-section-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.ar-section-tag{

    display:inline-block;

    background:#EAF5FF;

    color:#2196F3;

    padding:8px 18px;

    border-radius:999px;

    font-size:14px;

    font-weight:700;

    margin-bottom:18px;

}

.ar-section-header h2{

    font-size:42px;

    color:#08204A;

    margin-bottom:15px;

}

.ar-section-header p{

    font-size:19px;

    color:#64748B;

    line-height:1.8;

}

.ar-category-grid{

    display:grid;

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

    gap:30px;

}

.ar-category-card{

    background:#fff;

    border-radius:20px;

    padding:40px;

    text-align:center;

    text-decoration:none;

    border:1px solid #E5E7EB;

    transition:.3s;

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

}

.ar-category-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.ar-category-card img{

    width:72px;

    height:72px;

    margin-bottom:20px;

}

.ar-category-card h3{

    color:#08204A;

    font-size:24px;

    margin-bottom:12px;

}

.ar-category-card p{

    color:#64748B;

    line-height:1.7;

    font-size:16px;

}

@media(max-width:992px){

.ar-category-grid{

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

}

}

@media(max-width:768px){

.ar-category-grid{

grid-template-columns:1fr;

}

.ar-section{

padding:70px 0;

}

.ar-section-header h2{

font-size:32px;

}

}


/*==================================================
10 PROVINCE EXPLORER
==================================================*/

.ar-provinces{

background:#ffffff;

}

.ar-province-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.ar-province-card{

display:block;

overflow:hidden;

border-radius:22px;

background:#fff;

text-decoration:none;

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

transition:.35s;

}

.ar-province-card:hover{

transform:translateY(-8px);

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

}

.ar-province-card img{

width:100%;

height:240px;

object-fit:cover;

display:block;

}

.ar-province-content{

padding:25px;

}

.ar-province-content h3{

font-size:26px;

color:#08204A;

margin-bottom:10px;

}

.ar-province-content p{

font-size:16px;

color:#64748B;

}

.ar-center{

text-align:center;

margin-top:60px;

}

@media(max-width:992px){

.ar-province-grid{

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

}

}

@media(max-width:768px){

.ar-province-grid{

grid-template-columns:1fr;

}

}



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

.ar-section{

position:relative;

}

.ar-section + .ar-section{

border-top:1px solid #eef2f7;

}



/*==================================================
11 FEATURED GUIDES
==================================================*/

.ar-featured-guides{

background:#F8FAFC;

}

.ar-guide-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.ar-guide-card{

background:#fff;

padding:40px;

border-radius:22px;

box-shadow:0 15px 40px rgba(0,0,0,.06);

border:1px solid #E5E7EB;

transition:.35s;

}

.ar-guide-card:hover{

transform:translateY(-8px);

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

}

.ar-guide-icon{

width:78px;

height:78px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

margin-bottom:28px;

}

.ar-guide-icon.benefits{

background:#16A34A;

color:#fff;

}

.ar-guide-icon.education{

background:#7C3AED;

color:#fff;

}

.ar-guide-icon.travel{

background:#EA580C;

color:#fff;

}

.ar-guide-icon.money{

background:#0369A1;

color:#fff;

}

.ar-guide-card h3{

font-size:28px;

line-height:1.3;

color:#08204A;

margin-bottom:18px;

}

.ar-guide-card p{

font-size:17px;

line-height:1.8;

color:#64748B;

margin-bottom:24px;

}

.ar-guide-meta{

font-size:15px;

color:#64748B;

margin-bottom:20px;

}

.ar-guide-card a{

font-weight:700;

text-decoration:none;

color:#2563EB;

}.ar-container

.ar-guide-card a:hover{

text-decoration:underline;

}

@media(max-width:1200px){

.ar-guide-grid{

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

}

}

@media(max-width:768px){

.ar-guide-grid{

grid-template-columns:1fr;

}

}




/*==================================================
12 GOVERNMENT RESOURCES
==================================================*/

.ar-government{

background:#fff;

}

.ar-government-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.ar-government-card{

display:flex;

align-items:center;

gap:22px;

padding:30px;

background:#fff;

border-radius:18px;

border:1px solid #E5E7EB;

text-decoration:none;

transition:.3s;

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

}

.ar-government-card:hover{

transform:translateY(-4px);

box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.ar-government-icon{

width:58px;

height:58px;

border-radius:14px;

background:#EAF5FF;

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

flex-shrink:0;

}

.ar-government-card h3{

font-size:22px;

color:#08204A;

margin-bottom:6px;

}

.ar-government-card p{

font-size:16px;

color:#64748B;

line-height:1.6;

}

@media(max-width:768px){

.ar-government-grid{

grid-template-columns:1fr;

}

}


/*==================================================
13 FLOATING CATEGORY NAVIGATION
==================================================*/

.ar-floating-categories{

position:relative;

margin-top:-95px;

z-index:30;

}

.ar-category-nav{

display:grid;

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

gap:18px;

}

.ar-nav-card{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

background:#fff;

padding:22px 15px;

border-radius:18px;

text-decoration:none;

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

transition:.3s;

border:1px solid #eef2f7;

min-height:170px;

}

.ar-nav-card:hover{

transform:translateY(-6px);

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

border-color:#2196F3;

}

.ar-nav-card img{

width:58px;

height:58px;

margin-bottom:14px;

}

.ar-nav-card h3{

font-size:18px;

color:#08204A;

margin-bottom:8px;

}

.ar-nav-card span{

font-size:13px;

color:#64748B;

}

@media(max-width:1200px){

.ar-category-nav{

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

}

}

@media(max-width:768px){

.ar-category-nav{

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

}

.ar-floating-categories{

margin-top:-60px;

}

}



/*==================================================
14 PROVINCE BROWSER V2
==================================================*/

.ar-province-browser{

background:#fff;

}

.ar-browser-header{

display:flex;

justify-content:space-between;

align-items:flex-end;

margin-bottom:35px;

gap:30px;

}

.ar-browser-header h2{

font-size:38px;

color:#08204A;

margin-bottom:10px;

}

.ar-browser-header p{

color:#64748B;

max-width:700px;

line-height:1.8;

}

.ar-view-all{

text-decoration:none;

font-weight:700;

color:#2563EB;

white-space:nowrap;

}

.ar-browser-grid{

display:grid;

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

gap:20px;

}

.ar-browser-card{

display:block;

background:#fff;

border-radius:16px;

overflow:hidden;

text-decoration:none;

border:1px solid #E5E7EB;

transition:.3s;

box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.ar-browser-card:hover{

transform:translateY(-5px);

box-shadow:0 18px 40px rgba(0,0,0,.10);

}

.ar-browser-card img{

width:100%;

height:115px;

object-fit:cover;

display:block;

}

.ar-browser-body{

padding:14px;

}

.ar-browser-body strong{

display:block;

font-size:17px;

color:#08204A;

margin-bottom:4px;

}

.ar-browser-body span{

font-size:14px;

color:#64748B;

}

@media(max-width:1200px){

.ar-browser-grid{

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

}

}

@media(max-width:768px){

.ar-browser-header{

flex-direction:column;

align-items:flex-start;

}

.ar-browser-grid{

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

}

}

@media(max-width:520px){

.ar-browser-grid{

grid-template-columns:1fr;

}

}



/*==================================================
15 HUB COMPONENT
==================================================*/

.ar-hub{

background:#F8FAFC;

}

.ar-hub-header{

display:flex;

justify-content:space-between;

align-items:flex-end;

gap:30px;

margin-bottom:45px;

}

.ar-hub-layout{

display:grid;

grid-template-columns:2fr 1fr;

gap:30px;

}

.ar-hub-feature{

display:flex;

background:#fff;

border-radius:22px;

overflow:hidden;

box-shadow:0 10px 35px rgba(0,0,0,.06);

}

.ar-hub-feature img{

width:42%;

object-fit:cover;

}

.ar-hub-feature-content{

padding:35px;

display:flex;

flex-direction:column;

justify-content:center;

}

.ar-hub-feature-content span{

font-size:13px;

font-weight:700;

color:#2563EB;

text-transform:uppercase;

margin-bottom:12px;

}

.ar-hub-feature-content h3{

font-size:34px;

line-height:1.25;

margin-bottom:16px;

color:#08204A;

}

.ar-hub-feature-content p{

font-size:17px;

line-height:1.8;

margin-bottom:24px;

color:#64748B;

}

.ar-hub-feature-content a{

font-weight:700;

text-decoration:none;

color:#2563EB;

}

.ar-hub-list{

display:flex;

flex-direction:column;

gap:16px;

}

.ar-hub-item{

background:#fff;

padding:22px 24px;

border-radius:16px;

text-decoration:none;

font-weight:600;

color:#08204A;

box-shadow:0 8px 25px rgba(0,0,0,.05);

transition:.3s;

}

.ar-hub-item:hover{

transform:translateX(6px);

color:#2563EB;

}

@media(max-width:992px){

.ar-hub-layout{

grid-template-columns:1fr;

}

.ar-hub-feature{

flex-direction:column;

}

.ar-hub-feature img{

width:100%;

height:260px;

}

}

@media(max-width:768px){

.ar-hub-header{

flex-direction:column;

align-items:flex-start;

}

}



/*==================================================
16 FREE TOOLS
==================================================*/

.ar-tools-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}

.ar-tools-grid a{
display:flex;
justify-content:center;
align-items:center;
min-height:120px;
background:#fff;
border-radius:20px;
text-decoration:none;
font-weight:700;
font-size:17px;
color:#08204A;
box-shadow:0 8px 25px rgba(0,0,0,.05);
transition:.3s;
padding:20px;
text-align:center;
}

.ar-tools-grid a:hover{
transform:translateY(-6px);
box-shadow:0 20px 45px rgba(0,0,0,.10);
color:#2563EB;
}

@media(max-width:992px){

.ar-tools-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.ar-tools-grid{
grid-template-columns:1fr;
}

}



/*==================================================
17 LATEST ARTICLES
==================================================*/

.ar-latest-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

.ar-latest-card{
display:block;
background:#fff;
padding:30px;
border-radius:20px;
text-decoration:none;
box-shadow:0 8px 25px rgba(0,0,0,.05);
transition:.3s;
}

.ar-latest-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 45px rgba(0,0,0,.10);
}

.ar-latest-card span{
display:inline-block;
padding:6px 12px;
background:#EFF6FF;
color:#2563EB;
border-radius:50px;
font-size:13px;
font-weight:700;
margin-bottom:15px;
}

.ar-latest-card h3{
font-size:22px;
color:#08204A;
margin-bottom:12px;
}

.ar-latest-card p{
color:#64748B;
line-height:1.7;
}

@media(max-width:992px){

.ar-latest-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.ar-latest-grid{
grid-template-columns:1fr;
}

}



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

.ar-newsletter{

background:#08204A;
padding:90px 20px;
text-align:center;

}

.ar-newsletter h2{

font-size:42px;
color:#fff;
margin-bottom:20px;

}

.ar-newsletter p{

max-width:700px;
margin:auto;
color:#D9E6FF;
line-height:1.8;
margin-bottom:40px;

}

.ar-newsletter-form{

display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;

}

.ar-newsletter-form input{

width:420px;
max-width:100%;
padding:18px 22px;
border:none;
border-radius:50px;
font-size:16px;

}

.ar-newsletter-form button{

padding:18px 40px;
background:#2563EB;
border:none;
color:#fff;
font-weight:700;
border-radius:50px;
cursor:pointer;
transition:.3s;

}

.ar-newsletter-form button:hover{

background:#1D4ED8;

}



/*==================================================
19 POPULAR SEARCHES
==================================================*/

.ar-popular-searches{

display:flex;
flex-wrap:wrap;
gap:15px;

}

.ar-popular-searches a{

padding:12px 22px;
background:#F8FAFC;
border-radius:50px;
text-decoration:none;
color:#08204A;
font-weight:600;
transition:.3s;

}

.ar-popular-searches a:hover{

background:#2563EB;
color:#fff;

}



/*==================================================
20 FOOTER
==================================================*/

.ar-footer{

background:#061730;
padding:70px 20px 30px;

}

.ar-footer-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
margin-bottom:50px;

}

.ar-footer h4{

color:#fff;
margin-bottom:20px;
font-size:20px;

}

.ar-footer ul{

list-style:none;
padding:0;
margin:0;

}

.ar-footer li{

margin-bottom:12px;

}

.ar-footer a{

color:#C7D2FE;
text-decoration:none;
transition:.3s;

}

.ar-footer a:hover{

color:#fff;

}

.ar-footer-bottom{

border-top:1px solid rgba(255,255,255,.1);
padding-top:25px;
text-align:center;
color:#94A3B8;

}

@media(max-width:768px){

.ar-footer-grid{

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

}

}

@media(max-width:520px){

.ar-footer-grid{

grid-template-columns:1fr;

}

}