/* ==========================================
   TYD Cloud Portal
   Responsive.css
   Version 1.0
========================================== */

/* ==========================================
   Large Desktop
========================================== */

@media (max-width:1400px){

    .container{

        width:94%;

    }

}

/* ==========================================
   Desktop
========================================== */

@media (max-width:1200px){

    .container{

        width:95%;

    }

    header{

        margin-bottom:60px;

    }

    header h1{

        font-size:50px;

    }

    .tagline{

        font-size:19px;

    }

    header p{

        max-width:620px;

        font-size:17px;

    }

    .applications{

        grid-template-columns:1fr;

        gap:24px;

    }

    .card{

    display:flex;

    flex-direction:column;

}

    .card h2{

        font-size:28px;

    }

    .card p{

        font-size:15px;

    }

}

/* ==========================================
   Large Tablet
========================================== */

@media (max-width:992px){

    .container{

        width:94%;

        padding:50px 0;

    }

    .applications{

        grid-template-columns:1fr;

        gap:24px;

    }

    header{

        margin-bottom:50px;

    }

    header h1{

        font-size:44px;

    }

    .tagline{

        font-size:18px;

    }

    header p{

        font-size:16px;

    }

    .card{

        padding:30px;

    }

    .icon{

        width:68px;

        height:68px;

    }

    .icon img{

        width:68px;

        height:68px;

    }

}
/* ==========================================
   Tablet
========================================== */

@media (max-width:768px){

    body{

        overflow-x:hidden;

    }

    .container{

        width:92%;

        padding:40px 0;

    }

    header{

        margin-bottom:40px;

    }

    .logo{

        width:90px;

        height:90px;

    }

    .logo img{

        width:90px;

        height:90px;

    }

    header h1{

        font-size:36px;

    }

    .tagline{

        font-size:16px;

        line-height:1.8;

    }

    .tagline span{

        margin:0 8px;

    }

    header p{

        font-size:15px;

        line-height:1.8;

    }

    .card{

        padding:28px;

        border-radius:22px;

    }

    .icon{

        width:60px;

        height:60px;

        margin-bottom:20px;

    }

    .icon img{

        width:60px;

        height:60px;

    }

    .card h2{

        font-size:24px;

    }

    .card p{

        font-size:15px;

        line-height:1.7;

        min-height:auto;

    }

    .button{

    margin-top:auto;

}

    footer{

        margin-top:60px;

    }

    .footer-content{

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:12px;

    }

    .footer-left,

    .footer-right{

        text-align:center;

    }

}

/* ==========================================
   Mobile
========================================== */

@media (max-width:480px){

    .container{

        width:94%;

        padding:30px 0;

    }

    .logo{

        width:80px;

        height:80px;

    }

    .logo img{

        width:80px;

        height:80px;

    }

    header h1{

        font-size:30px;

    }

    .tagline{

        font-size:15px;

    }

    header p{

        font-size:14px;

    }

    .card{

        padding:24px;

        border-radius:20px;

    }

    .icon{

        width:56px;

        height:56px;

    }

    .icon img{

        width:56px;

        height:56px;

    }

    .card h2{

        font-size:22px;

    }

    .button{

        font-size:14px;

        padding:12px 18px;

    }

}
/* ==========================================
   Extra Small Devices
========================================== */

@media (max-width:360px){

    .container{

        width:95%;

        padding:25px 0;

    }

    .logo{

        width:70px;

        height:70px;

    }

    .logo img{

        width:70px;

        height:70px;

    }

    header h1{

        font-size:26px;

    }

    .tagline{

        font-size:14px;

    }

    .tagline span{

        margin:0 5px;

    }

    header p{

        font-size:13px;

    }

    .card{

        padding:20px;

        border-radius:18px;

    }

    .icon{

        width:52px;

        height:52px;

    }

    .icon img{

        width:52px;

        height:52px;

    }

    .card h2{

        font-size:20px;

    }

    .card p{

        font-size:14px;

    }

    .button{

        font-size:13px;

        padding:11px 16px;

    }

    footer{

        font-size:13px;

    }

}

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

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

    .container{

        padding:25px 0;

    }

    header{

        margin-bottom:30px;

    }

    .applications{

        gap:18px;

    }

}

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

@supports (padding:max(0px)){

    .container{

        padding-left:max(20px, env(safe-area-inset-left));

        padding-right:max(20px, env(safe-area-inset-right));

    }

}

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

@media print{

    body{

        background:#ffffff;

        color:#000000;

    }

    .background{

        display:none;

    }

    .card{

        box-shadow:none;

        border:1px solid #cccccc;

        background:#ffffff;

        color:#000000;

        break-inside:avoid;

    }

    .button{

        display:none;

    }

}

/* ==========================================
   End of File
========================================== */