/* =========================
RESPONSIVE.CSS
CISO Aid Enterprise Responsive Layout
========================= */

/* =========================
LARGE DEVICES
========================= */

@media (max-width: 1200px){

.container{
width:92%;
}

.hero-content h1,
.page-hero-content h1{
font-size:56px;
}

.section-title h2{
font-size:42px;
}

.about-content h2,
.platform-content h2,
.featured-content h2{
font-size:42px;
}

.footer-grid{
grid-template-columns:1fr 1fr;
gap:40px;
}

}

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

@media (max-width: 992px){

/* NAVIGATION */

.nav-container{
flex-wrap:wrap;
gap:20px;
}

.navbar{
width:100%;
}

.navbar .nav-links{
justify-content:center;
flex-wrap:wrap;
gap:20px;
}

/* GRID */

.hero-grid,
.about-grid,
.platform-grid,
.featured-grid,
.contact-grid{
grid-template-columns:1fr;
gap:50px;
}

.services-grid,
.solutions-grid,
.industries-grid,
.blog-grid,
.benefits-grid,
.jobs-grid,
.process-grid{
grid-template-columns:1fr 1fr;
}

/* HERO */

.hero-content{
text-align:center;
}

.hero-buttons{
justify-content:center;
}

.hero-stats{
justify-content:center;
}

.hero-image{
text-align:center;
}

/* TEXT */

.hero-content h1,
.page-hero-content h1{
font-size:50px;
}

.section-title h2{
font-size:38px;
}

.about-content h2,
.platform-content h2,
.featured-content h2{
font-size:38px;
}

.cta-container h2{
font-size:42px;
}

}

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

@media (max-width: 768px){

/* HEADER */

.header{
padding:10px 0;
}

.logo img{
height:50px;
}

.navbar{
display:none;
}

.nav-buttons{
width:100%;
justify-content:center;
}

/* HERO */

.hero-section,
.page-hero{
padding:90px 0;
}

.hero-content h1,
.page-hero-content h1{
font-size:40px;
line-height:1.2;
}

.hero-content p,
.page-hero-content p{
font-size:16px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.hero-buttons a{
width:100%;
text-align:center;
}

.hero-stats{
flex-direction:column;
align-items:center;
}

.stat-box{
width:100%;
max-width:300px;
text-align:center;
}

/* GRID */

.services-grid,
.solutions-grid,
.industries-grid,
.blog-grid,
.benefits-grid,
.jobs-grid,
.process-grid,
.footer-grid{
grid-template-columns:1fr;
}

/* SECTION */

.services-section,
.services-page,
.solutions-section,
.industries-section,
.blog-section,
.benefits-section,
.jobs-section,
.policy-section,
.contact-section,
.about-section,
.platform-section,
.featured-section{
padding:80px 0;
}

/* TITLES */

.section-title h2,
.about-content h2,
.platform-content h2,
.featured-content h2{
font-size:32px;
line-height:1.3;
}

.section-title p{
font-size:15px;
}

/* CARDS */

.service-card,
.solution-card,
.industry-card,
.blog-card,
.benefit-card,
.job-card,
.process-card,
.contact-form-box{
padding:28px;
}

/* CTA */

.cta-section{
padding:90px 0;
}

.cta-container h2{
font-size:34px;
line-height:1.3;
}

.cta-container p{
font-size:16px;
}

/* FOOTER */

.footer{
padding-top:70px;
}

.footer-grid{
gap:30px;
}

.footer-brand img{
height:50px;
}

/* FORMS */

.form-group input,
.form-group textarea{
font-size:15px;
padding:14px;
}

}

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

@media (max-width: 480px){

.container{
width:94%;
}

/* HERO */

.hero-content h1,
.page-hero-content h1{
font-size:34px;
}

.hero-tag,
.page-hero-content span,
.section-title span{
font-size:12px;
padding:6px 14px;
}

/* TITLES */

.section-title h2,
.about-content h2,
.platform-content h2,
.featured-content h2{
font-size:28px;
}

.cta-container h2{
font-size:30px;
}

/* BUTTONS */

.btn-primary,
.btn-secondary,
.btn-outline{
width:100%;
text-align:center;
padding:14px 20px;
}

/* CARDS */

.service-card,
.solution-card,
.industry-card,
.blog-card,
.benefit-card,
.job-card,
.process-card{
padding:24px;
border-radius:18px;
}

.service-card h3,
.solution-card h3,
.industry-card h3,
.blog-card h3,
.benefit-card h3,
.job-card h3{
font-size:22px;
}

/* POLICY */

.policy-content h2{
font-size:24px;
}

/* MAP */

.map-section iframe{
height:350px;
}

}

/* =========================
ULTRA SMALL DEVICES
========================= */

@media (max-width: 360px){

.hero-content h1,
.page-hero-content h1{
font-size:30px;
}

.section-title h2{
font-size:26px;
}

.cta-container h2{
font-size:26px;
}

.service-card,
.solution-card,
.industry-card,
.blog-card,
.benefit-card,
.job-card,
.process-card,
.contact-form-box{
padding:20px;
}

}