/* ==========================================================
   Presentations.one
   responsive.css
   Part 1
==========================================================*/


/* ==========================================================
Large Desktop
1600px+
==========================================================*/

@media (min-width:1600px){

.container{

    max-width:1450px;

}

.hero{

    padding-top:200px;

}

.hero-grid{

    gap:120px;

}

.hero h1{

    font-size:72px;

}

.hero p{

    font-size:22px;

}

.dashboard{

    transform:scale(1.08);

}

.section-title h2{

    font-size:52px;

}

}


/* ==========================================================
Desktop
1400px
==========================================================*/

@media (max-width:1400px){

.container{

    width:92%;

}

.hero-grid{

    gap:70px;

}

.dashboard{

    transform:scale(.95);

}

}


/* ==========================================================
Laptop
1200px
==========================================================*/

@media (max-width:1200px){

.hero h1{

    font-size:54px;

}

.hero-grid{

    gap:50px;

}

.prompt-grid{

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

}

.feature-grid{

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

}

.tool-grid{

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

}

.footer-grid{

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

}

}


/* ==========================================================
Small Laptop
1100px
==========================================================*/

@media (max-width:1100px){

.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-stats{

    justify-content:center;

}

.dashboard{

    max-width:700px;

    margin:auto;

}

}


/* ==========================================================
Tablet Landscape
992px
==========================================================*/

@media (max-width:992px){

.header{

    padding:14px 0;

}

.logo{

    font-size:22px;

}

#menu-btn{

    display:flex;

}

nav{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    display:none;

    background:var(--surface);

    box-shadow:var(--shadow);

}

nav.active{

    display:block;

}

nav ul{

    flex-direction:column;

    align-items:flex-start;

    gap:0;

}

nav ul li{

    width:100%;

}

nav ul li a{

    display:block;

    padding:18px 25px;

}

.header-right .btn-primary{

    display:none;

}

.hero{

    padding-top:140px;

}

.hero h1{

    font-size:46px;

}

.hero p{

    font-size:17px;

}

.grid-2{

    grid-template-columns:1fr;

}

.prompt-grid{

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

}

.feature-grid{

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

}

.tool-grid{

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

}

.testimonial-grid{

    grid-template-columns:1fr;

}

.steps{

    grid-template-columns:1fr;

}

.step-arrow{

    transform:rotate(90deg);

}

.footer-grid{

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

}

.newsletter form{

    flex-direction:column;

    align-items:center;

}

.newsletter input{

    width:100%;

    max-width:550px;

}

.newsletter button{

    width:100%;

    max-width:550px;

}

}


/* ==========================================================
Tablet Portrait
768px
==========================================================*/

@media (max-width:768px){

section{

    padding:70px 0;

}

.hero{

    padding-top:120px;

}

.hero h1{

    font-size:38px;

}

.hero p{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

    gap:15px;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-secondary{

    width:100%;

}

.hero-stats{

    gap:25px;

}

.generator-box{

    padding:25px;

}

.output-header{

    flex-direction:column;

    align-items:flex-start;

    gap:15px;

}

.prompt-grid,

.feature-grid,

.tool-grid{

    grid-template-columns:1fr;

}

.cta-box{

    padding:45px 25px;

}

.cta-box h2{

    font-size:34px;

}

.newsletter-box{

    padding:40px 25px;

}

.footer-grid{

    grid-template-columns:1fr;

}

.social-links{

    justify-content:center;

}

.footer-bottom{

    text-align:center;

}

}


/* ==========================================================
Large Mobile
600px
==========================================================*/

@media (max-width:600px){

.container{

    width:94%;

}

.hero h1{

    font-size:34px;

}

.section-title h2{

    font-size:30px;

}

.section-title p{

    font-size:15px;

}

.btn-primary,

.btn-secondary,

.btn-outline{

    width:100%;

}

.prompt-card,

.feature-card,

.tool-card,

.testimonial-card{

    padding:25px;

}

.generator-box{

    padding:20px;

}

.output-box{

    margin-top:25px;

}

#generatedPrompt{

    font-size:14px;

    padding:20px;

}

}



/*==========================================================
Responsive.css
Part 2
==========================================================*/


/*==========================================================
480px
==========================================================*/

@media (max-width:480px){

html{

font-size:15px;

}

section{

padding:60px 0;

}

.hero{

padding-top:110px;

}

.hero h1{

font-size:32px;

line-height:1.2;

}

.hero p{

font-size:15px;

margin:20px 0 30px;

}

.badge{

font-size:13px;

padding:8px 16px;

}

.hero-stats{

flex-direction:column;

gap:18px;

align-items:center;

}

.dashboard{

padding:18px;

border-radius:20px;

}

.generator-box{

padding:18px;

}

.form-group input,

.form-group select,

.form-group textarea{

padding:14px;

font-size:15px;

}

.output-header{

padding:15px;

}

.copy-btn{

width:100%;

}

#generatedPrompt{

padding:18px;

font-size:13px;

}

.section-title{

margin-bottom:40px;

}

.section-title h2{

font-size:28px;

}

.cta-box{

padding:35px 20px;

}

.cta-box h2{

font-size:26px;

}

.newsletter-box{

padding:30px 18px;

}

.newsletter input{

padding:16px;

}

.footer{

text-align:center;

}

}


/*==========================================================
430px
==========================================================*/

@media (max-width:430px){

.logo{

font-size:20px;

}

.logo i{

font-size:24px;

}

.hero h1{

font-size:30px;

}

.hero-buttons{

gap:12px;

}

.prompt-card,

.feature-card,

.tool-card,

.testimonial-card{

padding:22px;

}

.avatar{

width:50px;

height:50px;

font-size:18px;

}

}


/*==========================================================
390px
==========================================================*/

@media (max-width:390px){

.hero h1{

font-size:28px;

}

.hero p{

font-size:14px;

}

.btn-primary,

.btn-secondary,

.btn-outline{

padding:14px 18px;

font-size:14px;

}

.step{

padding:22px;

}

.step-number{

width:55px;

height:55px;

font-size:20px;

}

}


/*==========================================================
375px
==========================================================*/

@media (max-width:375px){

.hero{

padding-top:100px;

}

.hero h1{

font-size:26px;

}

.section-title h2{

font-size:24px;

}

.hero-stats h3{

font-size:28px;

}

.hero-stats p{

font-size:13px;

}

.dashboard{

padding:15px;

}

.window-top span{

width:10px;

height:10px;

}

.generator-box{

padding:15px;

}

}


/*==========================================================
360px
==========================================================*/

@media (max-width:360px){

.container{

width:95%;

}

.hero h1{

font-size:24px;

}

.hero p{

font-size:13px;

}

.form-group label{

font-size:14px;

}

.prompt-card h3,

.feature-card h3,

.tool-card h3{

font-size:18px;

}

.footer-grid{

gap:25px;

}

}


/*==========================================================
320px
==========================================================*/

@media (max-width:320px){

html{

font-size:14px;

}

.hero{

padding-top:90px;

}

.hero h1{

font-size:22px;

}

.hero p{

font-size:12px;

}

.badge{

font-size:11px;

}

.btn-primary,

.btn-secondary,

.btn-outline{

font-size:13px;

padding:12px;

}

#backToTop{

right:12px;

bottom:12px;

width:42px;

height:42px;

}

}


/*==========================================================
Landscape Phones
==========================================================*/

@media (max-height:500px) and (orientation:landscape){

.hero{

padding-top:120px;

padding-bottom:60px;

}

.hero-grid{

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

gap:30px;

}

section{

padding:50px 0;

}

}


/*==========================================================
Foldable Devices
==========================================================*/

@media (max-width:720px){

.hero-grid{

grid-template-columns:1fr;

}

.dashboard{

max-width:100%;

}

}


/*==========================================================
Fluid Typography
==========================================================*/

h1{

font-size:clamp(2rem,5vw,4.5rem);

}

h2{

font-size:clamp(1.8rem,4vw,3rem);

}

h3{

font-size:clamp(1.1rem,2vw,1.5rem);

}

p{

font-size:clamp(.95rem,1.2vw,1rem);

}


/*==========================================================
Images
==========================================================*/

img{

max-width:100%;

height:auto;

display:block;

}


/*==========================================================
Touch Devices
==========================================================*/

button,

a,

input,

select,

textarea{

touch-action:manipulation;

}


/*==========================================================
Prevent Overflow
==========================================================*/

body{

overflow-x:hidden;

}

*{

max-width:100%;

word-wrap:break-word;

}


/*==========================================================
Safe Area
==========================================================*/

body{

padding-left:env(safe-area-inset-left);

padding-right:env(safe-area-inset-right);

padding-bottom:env(safe-area-inset-bottom);

}


/*==========================================================
Print
==========================================================*/

@media print{

.header,

footer,

.newsletter,

#backToTop,

#toast{

display:none !important;

}

body{

background:#fff;

color:#000;

}

}


/*==========================================================
End Responsive CSS
==========================================================*/