/*==================================================
DAYAL PARADISE V2
Responsive Styles
==================================================*/

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

@media (max-width:1400px){

.hero h1{

    font-size:64px;

}

.section-heading h2,
.intro h2,
.showcase h2,
.contact h2,
.cta h2{

    font-size:48px;

}

.phone-frame{

    width:320px;

}

.floating-card{

    width:280px;

}

}

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

@media (max-width:1200px){

.hero-grid{

    gap:50px;

}

.hero h1{

    font-size:56px;

}

.feature-grid{

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

}

.gallery-grid{

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

}

.contact-grid{

    grid-template-columns:1fr;

}

.showcase-grid{

    gap:45px;

}

}

/*==================================
992px
==================================*/

@media (max-width:992px){

.section{

    padding:90px 0;

}

.desktop-menu{

    display:none;

}

.menu-toggle{

    display:block;

}

.hero{

    padding-top:120px;
    min-height:auto;

}

.hero-grid{

    grid-template-columns:1fr;
    text-align:center;

}

.hero-content{

    order:2;

}

.hero-preview{

    order:1;
    position:relative;
    margin-bottom:20px;

}

.hero p{

    margin-left:auto;
    margin-right:auto;

}

.hero-buttons{

    justify-content:center;

}

.phone-frame{

    width:310px;

}

.floating-card{

    position:relative;
    width:100%;
    max-width:360px;
    margin:30px auto 0;
    right:auto;
    bottom:auto;

}

.section-grid{

    grid-template-columns:1fr;
    gap:35px;

}

.showcase-grid{

    grid-template-columns:1fr;

}

.showcase-image{

    order:1;

}

.showcase-content{

    order:2;

}

}

/*==================================
768px
==================================*/

@media (max-width:768px){

.container{

    width:92%;

}

.hero h1{

    font-size:46px;
    line-height:1.1;

}

.hero p{

    font-size:16px;

}

.section-heading h2,
.intro h2,
.showcase h2,
.contact h2,
.cta h2{

    font-size:38px;

}

.feature-grid{

    grid-template-columns:1fr;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.gallery-grid img{

    height:260px;

}

.hero-buttons{

    flex-direction:column;

}

.btn{

    width:100%;

}

.cta-box{

    padding:60px 30px;

}

.contact-form input{

    padding:16px;

}

}

/*==================================
576px
==================================*/

@media (max-width:576px){

.header .container{

    height:74px;

}

.logo img{

    height:42px;

}

.mobile-menu{

    top:74px;
    width:100%;

}

.hero{

    padding-top:100px;

}

.hero h1{

    font-size:38px;

}

.phone-frame{

    width:260px;
    border-width:8px;

}

.eyebrow,
.section-tag{

    font-size:12px;
    letter-spacing:2px;

}

.section-heading{

    margin-bottom:45px;

}

.section-heading h2,
.intro h2,
.showcase h2,
.contact h2,
.cta h2{

    font-size:32px;

}

.feature-card{

    padding:30px;

}

.icon{

    font-size:34px;

}

.floating-card{

    padding:22px;

}

.floating-card h3{

    font-size:20px;

}

.cta-box{

    padding:50px 24px;

}

.scroll-top{

    width:46px;
    height:46px;
    right:18px;
    bottom:18px;

}

.footer{

    font-size:14px;

}

}

/*==================================
400px
==================================*/

@media (max-width:400px){

.hero h1{

    font-size:34px;

}

.section-heading h2,
.intro h2,
.showcase h2,
.contact h2,
.cta h2{

    font-size:28px;

}

.phone-frame{

    width:220px;

}

.feature-card{

    padding:24px;

}

.gallery-grid img{

    height:220px;

}

}