/* =====================================================
   LARGE DESKTOPS (1600px+)
===================================================== */

@media (min-width:1600px){

.page{

    width:min(1400px,90%);

}

.hero h1{

    font-size:72px;

}

.hero h3{

    font-size:30px;

}

.hero p{

    font-size:22px;

}

.section-title{

    font-size:56px;

}

.service-grid{

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

}

.background{

    background-size:contain;

}

}

/* =====================================================
   DESKTOPS
===================================================== */

@media (max-width:1200px){

.page{

    width:92%;

}

.hero-content{

    width:700px;

}

.hero h1{

    font-size:56px;

}

}

/* =====================================================
   LAPTOPS
===================================================== */

@media (max-width:992px){

.hero{

    justify-content:center;

    text-align:center;

}

.hero-content{

    width:100%;

    max-width:760px;

}

.hero-buttons{

    justify-content:center;

}

.contact-boxes{

    flex-wrap:wrap;

}

.progress-modal{

    width:300px;

}

}

/* =====================================================
   TABLETS
===================================================== */

@media (max-width:768px){

body{

    font-size:16px;

}

.page{

    width:95%;

    padding-top:70px;

    padding-bottom:120px;

}

.hero{

    min-height:auto;

    padding:40px 0;

}

.hero-content{

    padding:30px;

}

.hero h1{

    font-size:42px;

}

.hero h3{

    font-size:22px;

}

.hero p{

    font-size:17px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.btn-primary,
.btn-secondary{

    width:260px;

    text-align:center;

}

.section-title{

    font-size:36px;

}

.service-grid{

    grid-template-columns:1fr;

}

.contact-boxes{

    flex-direction:column;

}

.contact-boxes div{

    width:100%;

}

.music-player{

    right:15px;

    top:15px;

    padding:12px 18px;

}

.music-player span{

    display:none;

}

.progress-modal{

    left:15px;

    bottom:15px;

    width:280px;

}

.background{

    background-size:contain;

}

}

/* =====================================================
   MOBILE PHONES
===================================================== */

@media (max-width:576px){

.page{

    width:95%;

}

.hero-content{

    padding:25px;

}

.hero-badge{

    font-size:14px;

}

.hero h1{

    font-size:34px;

}

.hero h3{

    font-size:18px;

}

.hero p{

    font-size:15px;

    line-height:1.8;

}

.section-title{

    font-size:30px;

}

.service-card{

    padding:25px;

}

.service-card h3{

    font-size:20px;

}

.service-card p{

    font-size:15px;

}

.contact h2{

    font-size:30px;

}

footer{

    font-size:14px;

}

.progress-modal{

    width:calc(100% - 20px);

    left:10px;

    right:10px;

    bottom:10px;

}

.music-player{

    width:52px;

    height:52px;

    justify-content:center;

    border-radius:50%;

}

.music-icon{

    margin:0;

}

.background{

    background-size:contain;

}

}

/* =====================================================
   VERY SMALL DEVICES
===================================================== */

@media (max-width:380px){

.hero h1{

    font-size:28px;

}

.hero h3{

    font-size:16px;

}

.hero p{

    font-size:14px;

}

.hero-content{

    padding:20px;

}

.btn-primary,
.btn-secondary{

    width:100%;

}

.section-title{

    font-size:26px;

}

.service-card{

    padding:20px;

}

.progress-modal{

    font-size:14px;

}

}

/* =====================================================
   SHORT SCREENS
===================================================== */

@media (max-height:700px){

.hero{

    min-height:auto;

    padding-top:50px;

    padding-bottom:50px;

}

.progress-modal{

    bottom:10px;

}

}

/* =====================================================
   LANDSCAPE PHONES
===================================================== */

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

.hero{

    min-height:auto;

}

.hero-content{

    padding:25px;

}

.hero h1{

    font-size:32px;

}

.progress-modal{

    transform:scale(.85);

    transform-origin:bottom left;

}

}

/* =====================================================
   HIGH DPI SCREENS
===================================================== */

@media (-webkit-min-device-pixel-ratio:2),
       (min-resolution:192dpi){

.background{

    image-rendering:auto;

}

}