* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Poppins, sans-serif;
}

html {
scroll-behavior: smooth;
}

body {
font-family: "Poppins", Arial, sans-serif;
background-color: #f5f7fa;
color: #333333;
}


/* =========================================
MAIN FAQ PAGE
========================================= */

.faq-page {
width: 100%;
min-height: 100vh;

background-color: #f5f7fa;

padding: 34px 20px 80px;
}


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

.faq-container {
width: 100%;
max-width: 1030px;

margin: 0 auto;
}


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

.faq-header {
text-align: center;

margin-bottom: 47px;
}


.faq-small-heading {
display: block;

color: #f0a742;

font-size: 15px;
line-height: 1.4;

font-weight: 700;

letter-spacing: 0.7px;

text-transform: uppercase;

margin-bottom: 17px;
}


.faq-header h1 {
color: #0a3168;

font-size: 48px;
line-height: 1.2;

font-weight: 700;

letter-spacing: -0.5px;
}


/* =========================================
MAIN TWO COLUMN LAYOUT
========================================= */

.faq-layout {
display: grid;

grid-template-columns:
minmax(0, 720px)
minmax(310px, 350px);

gap: 24px;

align-items: start;
}


.faq-content {
width: 100%;
min-width: 0;
}


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

.faq-section {
margin-bottom: 45px;
}


.faq-section h2 {
color: #082f66;

font-size: 37px;
line-height: 1.3;

font-weight: 700;

letter-spacing: -0.5px;

margin-bottom: 34px;
}


/* =========================================
FAQ CARD
========================================= */

.faq-card {
width: 100%;

background-color: #ffffff;

border-radius: 22px;

padding: 41px 40px;

margin-bottom: 24px;

box-shadow:
0 5px 20px rgba(17, 53, 93, 0.035);
}


/* Question heading */

.faq-card h3 {
color: #1c62ce;

font-size: 25px;
line-height: 1.45;

font-weight: 700;

letter-spacing: -0.4px;

margin-bottom: 30px;
}


/* Internal subheading */

.faq-card h4 {
color: #082f66;

font-size: 17px;
line-height: 1.7;

font-weight: 600;

margin-top: 23px;
margin-bottom: 10px;
}


/* Normal paragraphs */

.faq-card p {
color: #3c3c3c;

font-size: 16.5px;
line-height: 2.05;

font-weight: 400;
}


.faq-card p + p {
margin-top: 14px;
}


/* =========================================
FAQ LISTS
========================================= */

.faq-card ul {
padding-left: 27px;

margin-top: 10px;
margin-bottom: 14px;
}


.faq-card li {
color: #3c3c3c;

font-size: 16px;
line-height: 1.9;

font-weight: 400;

padding-left: 4px;

margin-bottom: 4px;
}


.faq-card li::marker {
color: #1763ce;
}


/* =========================================
CONTACT INFORMATION
========================================= */

.faq-contact {
margin-top: 17px;
}


.faq-contact p {
color: #1763ce;

font-weight: 500;
}


/* =========================================
RIGHT FAQ SIDEBAR
========================================= */

.faq-sidebar {
width: 100%;

position: sticky;

top: 20px;
}


/* Main sidebar container */

.sidebar-box {
width: 100%;

max-height: calc(100vh - 40px);

overflow-y: auto;
overflow-x: hidden;

background-color: #ffffff;

border-radius: 22px 22px 0 0;

box-shadow: 7px 0 0 #dce2ec;
}


/* =========================================
SIDEBAR BLUE HEADER
========================================= */

.sidebar-title {
background-color: #2166cc;

color: #ffffff;

font-size: 24px;
line-height: 1.4;

font-weight: 700;

padding: 24px 28px;

position: sticky;

top: 0;

z-index: 2;
}


/* =========================================
SIDEBAR CATEGORY
========================================= */

.sidebar-category {
background-color: #ffffff;

color: #082f66;

font-size: 16px;
line-height: 1.5;

font-weight: 700;

padding: 18px 26px;

border-bottom: 1px solid #e8e8e8;
}


/* =========================================
SIDEBAR FAQ LINKS
========================================= */

.sidebar-box a {
display: block;

width: 100%;

background-color: #ffffff;

color: #555555;

font-size: 14px;
line-height: 1.55;

font-weight: 400;

text-decoration: none;

padding: 16px 25px 16px 40px;

border-bottom: 1px solid #eeeeee;

transition:
background-color 0.2s ease,
color 0.2s ease,
padding-left 0.2s ease;
}


/* Hover effect */

.sidebar-box a:hover {
color: #1763ce;

background-color: #f5f8fc;

padding-left: 44px;
}


/* =========================================
SIDEBAR SCROLLBAR
========================================= */

.sidebar-box::-webkit-scrollbar {
width: 7px;
}


.sidebar-box::-webkit-scrollbar-track {
background-color: #eef1f6;
}


.sidebar-box::-webkit-scrollbar-thumb {
background-color: #cfd6e1;

border-radius: 10px;
}


.sidebar-box::-webkit-scrollbar-thumb:hover {
background-color: #b9c2cf;
}


/* =========================================
SCROLL TARGET OFFSET
========================================= */

.faq-card {
scroll-margin-top: 30px;
}


/* =========================================
LAPTOP
1100px and below
========================================= */

@media (max-width: 1100px) {

.faq-container {
max-width: 940px;
}


.faq-layout {
grid-template-columns:
minmax(0, 1fr)
300px;

gap: 25px;
}


.faq-header h1 {
font-size: 44px;
}


.faq-section h2 {
font-size: 33px;
}


.faq-card {
padding: 35px 32px;
}


.faq-card h3 {
font-size: 23px;
}
}


/* =========================================
TABLET
850px and below
========================================= */

@media (max-width: 850px) {

.faq-page {
padding:
35px
24px
65px;
}


.faq-header {
margin-bottom: 40px;
}


.faq-header h1 {
font-size: 40px;
}


/*
Change desktop two-column
design into one column
*/

.faq-layout {
grid-template-columns: 1fr;

gap: 35px;
}


.faq-section h2 {
font-size: 32px;

margin-bottom: 26px;
}


/*
Sidebar goes under FAQs
on tablet/mobile
*/

.faq-sidebar {
position: static;
}


.sidebar-box {
max-height: none;

overflow: visible;

border-radius: 20px;

box-shadow: 6px 6px 0 #dce2ec;
}


.sidebar-title {
position: static;

border-radius: 20px 20px 0 0;
}
}


/* =========================================
MOBILE
600px and below
========================================= */

@media (max-width: 600px) {

.faq-page {
padding:
28px
16px
50px;
}


/* Header */

.faq-header {
margin-bottom: 35px;
}


.faq-small-heading {
font-size: 12px;

letter-spacing: 0.6px;

margin-bottom: 12px;
}


.faq-header h1 {
font-size: 32px;

line-height: 1.25;

letter-spacing: -0.3px;
}


/* Sections */

.faq-section {
margin-bottom: 38px;
}


.faq-section h2 {
font-size: 27px;

line-height: 1.35;

margin-bottom: 22px;
}


/* Cards */

.faq-card {
padding: 28px 22px;

border-radius: 18px;

margin-bottom: 18px;
}


.faq-card h3 {
font-size: 21px;

line-height: 1.45;

margin-bottom: 20px;
}


.faq-card h4 {
font-size: 15px;

line-height: 1.7;
}


.faq-card p {
font-size: 15px;

line-height: 1.8;
}


.faq-card li {
font-size: 15px;

line-height: 1.8;
}


.faq-card ul {
padding-left: 22px;
}


/* Sidebar */

.sidebar-title {
font-size: 21px;

padding: 20px 22px;
}


.sidebar-category {
font-size: 15px;

padding: 17px 22px;
}


.sidebar-box a {
font-size: 14px;

padding:
15px
22px
15px
30px;
}


.sidebar-box a:hover {
padding-left: 34px;
}
}


/* =========================================
SMALL MOBILE
380px and below
========================================= */

@media (max-width: 380px) {

.faq-page {
padding-left: 12px;
padding-right: 12px;
}


.faq-header h1 {
font-size: 28px;
}


.faq-section h2 {
font-size: 24px;
}


.faq-card {
padding: 24px 18px;
}


.faq-card h3 {
font-size: 19px;
}


.faq-card p,
.faq-card li {
font-size: 14px;
}


.sidebar-category {
font-size: 14px;
}


.sidebar-box a {
font-size: 13px;

padding-left: 24px;
}
}