/* =========================================
RESPONSIVE CSS
PREMUM WEBSITE
========================================= */

/* Large Devices */
@media (max-width:1200px){

.hero h1{
font-size:58px;
}

.section-heading h2{
font-size:46px;
}

.product-content h2{
font-size:42px;
}

.about-premum h2{
font-size:42px;
}

.hero-image img{
max-width:430px;
}

}

/* Tablets */

@media (max-width:992px){

section{
padding:80px 0;
}

.custom-navbar{
padding:12px 0;
}

.navbar-brand img{
height:60px;
}

.navbar-collapse{
background:#fff;
padding:20px;
margin-top:15px;
border-radius:15px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.nav-link{
margin:12px 0;
}

.hero{
text-align:center;
padding-top:140px;
padding-bottom:80px;
}

.hero h1{
font-size:48px;
}

.hero p{
margin:auto;
margin-top:25px;
}

.hero-buttons{
justify-content:center;
display:flex;
flex-wrap:wrap;
gap:15px;
}

.hero-features{
justify-content:center;
flex-wrap:wrap;
}

.hero-image{
margin-top:60px;
}

.hero-image img{
max-width:380px;
}

.floating-card{
display:none;
}

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

.product-row{
margin:70px 0;
}

.product-content{
margin-top:40px;
text-align:center;
}

.product-content ul{
text-align:left;
display:inline-block;
}

.price{
font-size:40px;
}

.about-image{
margin-bottom:50px;
}

.experience-box{
position:relative;
right:0;
bottom:0;
margin-top:20px;
display:inline-block;
}

.timeline::before{
display:none;
}

.timeline-item{
width:48%;
margin-bottom:40px;
}

.stat-box{
margin-bottom:25px;
}

.contact-form{
margin-top:40px;
}

.newsletter-form{
flex-direction:column;
align-items:center;
}

.newsletter-form input{
width:100%;
max-width:450px;
}

footer{
text-align:center;
}

.footer-social{
justify-content:center;
}

}

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

@media (max-width:768px){

body{
overflow-x:hidden;
}

section{
padding:60px 0;
}

.topbar{
text-align:center;
font-size:13px;
}

.topbar .text-end{
text-align:center !important;
margin-top:8px;
}

.hero{
min-height:auto;
padding:130px 0 70px;
}

.hero h1{
font-size:38px;
line-height:1.2;
}

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

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

.theme-btn,
.theme-btn-outline{
width:100%;
max-width:280px;
text-align:center;
margin:8px 0;
}

.hero-features{
flex-direction:column;
gap:12px;
align-items:center;
margin-top:30px;
}

.hero-image img{
max-width:280px;
margin:auto;
}

.section-heading{
margin-bottom:40px;
}

.section-heading h2{
font-size:34px;
}

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

.product-row{
margin:50px 0;
}

.product-image img{
max-width:280px;
}

.product-content h2{
font-size:34px;
}

.product-content p{
font-size:15px;
}

.price{
font-size:34px;
}

.about-premum h2{
font-size:34px;
}

.about-list div{
font-size:15px;
}

.timeline{
display:block;
}

.timeline-item{
width:100%;
margin-bottom:35px;
}

.timeline-icon{
width:90px;
height:90px;
font-size:34px;
}

.message-box{
padding:35px 20px;
}

.message-box h2{
font-size:32px;
}

.message-box p{
font-size:15px;
}

.testimonial-card{
margin-bottom:25px;
}

.gallery-img{
height:240px;
}

.contact-form{
padding:25px;
}

.contact-section h2{
font-size:34px;
}

.newsletter-box h2{
font-size:34px;
}

.newsletter-form input{
width:100%;
}

.footer-logo{
margin:auto;
margin-bottom:20px;
}

footer h4{
margin-top:30px;
}

.footer-social{
justify-content:center;
}

}

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

@media (max-width:576px){

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

.hero p{
font-size:15px;
}

.section-heading h2{
font-size:28px;
}

.product-content h2{
font-size:30px;
}

.about-premum h2{
font-size:30px;
}

.quote-section h2{
font-size:30px;
}

.message-box h2{
font-size:28px;
}

.newsletter-box h2{
font-size:28px;
}

.contact-section h2{
font-size:30px;
}

.price{
font-size:28px;
}

.theme-btn,
.theme-btn-outline{
padding:13px 25px;
font-size:14px;
}

.contact-info div{
font-size:15px;
}

.timeline-item h4{
font-size:24px;
}

.timeline-icon{
width:80px;
height:80px;
font-size:28px;
}

.gallery-img{
height:200px;
}

}

/* =========================================
EXTRA SMALL
========================================= */

@media (max-width:360px){

.hero h1{
font-size:26px;
}

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

.product-content h2{
font-size:26px;
}

.about-premum h2{
font-size:26px;
}

.message-box h2{
font-size:24px;
}

.newsletter-box h2{
font-size:24px;
}

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

}

/* =========================================
IMAGE FIX
========================================= */

img{
max-width:100%;
height:auto;
display:block;
}

/* =========================================
EMBEDS
========================================= */

iframe,
video{
max-width:100%;
}

/* =========================================
TABLE
========================================= */

table{
display:block;
overflow-x:auto;
white-space:nowrap;
}

/* =========================================
END
========================================= */