/*=========================================================
        PROTECH PREMIUM SECTION
        CSS PART 1
        GRID LAYOUT
=========================================================*/

.ps-section{
    position:relative;
    background:#fff;
    padding:120px 0 90px;
    overflow:hidden;
}

.ps-section .container{
    max-width:1420px;
}

/*=========================================================
GRID
=========================================================*/

.ps-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr 1.05fr;

    align-items:center;

    column-gap:70px;

    position:relative;

}

/*=========================================================
LEFT IMAGE
=========================================================*/

.ps-image-left{

    position:relative;

    display:flex;

    justify-content:flex-start;

}

.ps-image-card{

    overflow:hidden;

    border-radius:34px;

    box-shadow:0 30px 80px rgba(0,0,0,.12);

    position:relative;

}

.ps-image-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.8s ease;

}

.ps-image-card:hover img{

    transform:scale(1.08);

}

.ps-tall{

    width:100%;

    height:720px;

}

/*=========================================================
CONTENT
=========================================================*/

.ps-content{

    position:relative;

    z-index:5;

}

.ps-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 26px;

    border-radius:50px;

    border:1px solid rgba(200,39,39,.22);

    color:#c82727;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:30px;

}

.ps-title{

    font-size:clamp(52px,4vw,72px);

    line-height:1.03;

    font-weight:800;

    color:#181818;

    margin:0;

    letter-spacing:-2px;

}

.ps-title span{

    display:block;

    color:#c82727;

}

.ps-red-line{

    width:78px;

    height:4px;

    border-radius:40px;

    background:#c82727;

    margin:34px 0;

}

.ps-content p{

    font-size:18px;

    line-height:2;

    color:#666;

    margin-bottom:42px;

    max-width:480px;

}

/*=========================================================
BUTTON
=========================================================*/

.ps-btn{

    display:inline-flex;

    align-items:center;

    text-decoration:none;

    border-radius:60px;

    overflow:hidden;

    background:#c82727;

    transition:.35s;

}

.ps-btn:hover{

    text-decoration:none;

    transform:translateY(-5px);

    box-shadow:0 20px 50px rgba(200,39,39,.28);

}

.ps-btn-icon{

    width:74px;

    height:74px;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#c82727;

    font-size:22px;

}

.ps-btn-text{

    padding:0 34px;

    color:#fff;

    font-size:18px;

    font-weight:700;

}

/*=========================================================
        PROTECH PREMIUM SECTION
        CSS PART 2
        RIGHT IMAGE + STATS
=========================================================*/


/*=========================================================
RIGHT IMAGE
=========================================================*/

.ps-image-right{

    position:relative;

    display:flex;

    justify-content:flex-end;

    align-items:flex-start;

}

.ps-short{

    width:92%;

    height:520px;

    margin-top:-130px;

}

.ps-image-right .ps-image-card{

    transition:.45s ease;

}

.ps-image-left .ps-image-card{

    transition:.45s ease;

}

.ps-image-card:hover{

    transform:translateY(-10px);

    box-shadow:0 40px 90px rgba(0,0,0,.18);

}



/*=========================================================
STATISTICS
=========================================================*/

.ps-stats{

    margin-top:110px;

    display:grid;

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

    align-items:start;

}



/*=========================================================
STAT ITEM
=========================================================*/

.ps-stat{

    text-align:center;

    padding:0 30px;

    transition:.35s;

}

.ps-stat:hover{

    transform:translateY(-10px);

}



/*=========================================================
ICON
=========================================================*/

.ps-stat-icon{

    width:108px;

    height:108px;

    border-radius:50%;

    background:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 28px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    transition:.35s;

}

.ps-stat:hover .ps-stat-icon{

    background:#c82727;

    transform:rotate(8deg);

}

.ps-stat-icon i{

    color:#c82727;

    font-size:42px;

    transition:.35s;

}

.ps-stat:hover .ps-stat-icon i{

    color:#fff;

}



/*=========================================================
TITLE
=========================================================*/

.ps-stat h5{

    font-size:28px;

    color:#1f1f1f;

    font-weight:600;

    margin-bottom:18px;

}



/*=========================================================
RED LINE
=========================================================*/

.ps-stat-line{

    display:block;

    width:44px;

    height:3px;

    background:#c82727;

    border-radius:40px;

    margin:0 auto 24px;

}



/*=========================================================
NUMBER
=========================================================*/

.ps-stat h3{

    font-size:72px;

    line-height:1;

    font-weight:800;

    color:#c82727;

    margin-bottom:18px;

    letter-spacing:-2px;

}



/*=========================================================
DESCRIPTION
=========================================================*/

.ps-stat p{

    color:#666;

    font-size:19px;

    line-height:1.8;

    margin:0;

}



/*=========================================================
VERTICAL DIVIDER
=========================================================*/

.ps-stat-divider{

    width:1px;

    background:#ececec;

    height:240px;

    align-self:center;

}
/*=========================================================
        PROTECH PREMIUM SECTION
        CSS PART 3
        RESPONSIVE + ANIMATIONS
=========================================================*/


/*=========================================================
REVEAL ANIMATION
=========================================================*/

.ps-image-left,
.ps-content,
.ps-image-right,
.ps-stat{

    opacity:0;

    transform:translateY(70px);

    transition:all .9s cubic-bezier(.22,.61,.36,1);

}

.ps-show{

    opacity:1 !important;

    transform:translateY(0) !important;

}



/*=========================================================
BUTTON EFFECT
=========================================================*/

.ps-btn{

    position:relative;

}

.ps-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:rgba(255,255,255,.12);

    transition:.45s;

}

.ps-btn:hover::before{

    left:100%;

}



/*=========================================================
IMAGE OVERLAY
=========================================================*/

.ps-image-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.18),
        rgba(0,0,0,0)
    );

    opacity:0;

    transition:.45s;

}

.ps-image-card:hover::after{

    opacity:1;

}



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

@media(max-width:1400px){

.ps-grid{

    column-gap:50px;

}

.ps-title{

    font-size:58px;

}

.ps-tall{

    height:650px;

}

.ps-short{

    height:450px;

    margin-top:-110px;

}

.ps-stat h3{

    font-size:60px;

}

}



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

@media(max-width:1199px){

.ps-grid{

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

    column-gap:35px;

}

.ps-title{

    font-size:48px;

}

.ps-content p{

    font-size:16px;

    line-height:1.8;

}

.ps-tall{

    height:560px;

}

.ps-short{

    height:380px;

    margin-top:-80px;

}

.ps-stat{

    padding:0 18px;

}

.ps-stat h5{

    font-size:22px;

}

.ps-stat h3{

    font-size:52px;

}

.ps-stat p{

    font-size:16px;

}

.ps-stat-icon{

    width:90px;

    height:90px;

}

.ps-stat-icon i{

    font-size:34px;

}

}



/*=========================================================
TABLET
=========================================================*/

@media(max-width:991px){

.ps-grid{

    grid-template-columns:1fr;

    row-gap:45px;

}

.ps-content{

    text-align:center;

}

.ps-content p{

    margin:auto auto 35px;

}

.ps-red-line{

    margin:28px auto;

}

.ps-short{

    width:100%;

    margin-top:0;

    height:420px;

}

.ps-tall{

    height:520px;

}

.ps-stats{

    margin-top:70px;

    grid-template-columns:1fr;

    gap:50px;

}

.ps-stat-divider{

    display:none;

}

}



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

@media(max-width:767px){

.ps-section{

    padding:80px 0;

}

.ps-title{

    font-size:40px;

}

.ps-label{

    font-size:13px;

}

.ps-content p{

    font-size:15px;

}

.ps-tall{

    height:360px;

    border-radius:24px;

}

.ps-short{

    height:280px;

    border-radius:24px;

}

.ps-btn{

    transform:scale(.95);

}

.ps-btn-icon{

    width:60px;

    height:60px;

}

.ps-btn-text{

    padding:0 24px;

    font-size:16px;

}

.ps-stat-icon{

    width:80px;

    height:80px;

}

.ps-stat-icon i{

    font-size:30px;

}

.ps-stat h5{

    font-size:20px;

}

.ps-stat h3{

    font-size:44px;

}

.ps-stat p{

    font-size:15px;

}

}



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

@media(max-width:480px){

.ps-title{

    font-size:34px;

}

.ps-tall{

    height:300px;

}

.ps-short{

    height:220px;

}

.ps-btn{

    width:100%;

    justify-content:center;

}

.ps-btn-text{

    padding:0 20px;

}

}