/*==========================================
    LARGE LAPTOP (1400px)
===========================================*/

@media (max-width:1400px){

    .container{
        max-width:1140px;
    }

    .tab-navigation{
        gap:15px;
    }

    .tab-item{
        min-width:160px;
        padding:22px 15px;
    }

    .content-item{
        gap:50px;
    }

}


/*==========================================
    LAPTOP (1200px)
===========================================*/

@media (max-width:1200px){

    .section-title{
        font-size:36px;
    }

    .tab-navigation{

        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:20px;

    }

    .tab-item{

        width:100%;

    }

    .content-item{

        gap:40px;

    }

    .content-left h2{

        font-size:32px;

    }

}


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

@media (max-width:992px){

    .sitelock-wrapper{

        padding:70px 0;

    }

    .section-title{

        font-size:34px;

        margin-bottom:40px;

    }

    .content-item{

        flex-direction:column-reverse;

        text-align:center;

        padding:40px;

    }

    .content-right{

        text-align:center;

    }

    .content-right img{

        max-width:420px;

    }

    .content-left{

        width:100%;

    }

    .content-left p{

        font-size:16px;

        line-height:30px;

    }

    .btn-read{

        justify-content:center;

    }

}


/*==========================================
    MOBILE TAB SLIDER
===========================================*/

@media (max-width:768px){

    .container{

        width:94%;

    }

    .section-title{

        font-size:28px;

    }

    .tab-navigation{

        display:flex;

        overflow-x:auto;

        flex-wrap:nowrap;

        justify-content:flex-start;

        gap:15px;

        padding-bottom:15px;

        scrollbar-width:none;

    }

    .tab-navigation::-webkit-scrollbar{

        display:none;

    }

    .tab-item{

        flex:0 0 240px;

        min-width:240px;

    }

    .content-item{

        padding:35px;

    }

    .content-left h2{

        font-size:28px;

    }

    .content-left p{

        font-size:15px;

        line-height:28px;

    }

}


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

@media (max-width:576px){

    .section-title{

        font-size:24px;

    }

    .tab-item{

        min-width:210px;

        padding:20px 15px;

    }

    .tab-item img{

        width:45px;

        height:45px;

    }

    .tab-item h4{

        font-size:13px;

    }

    .content-item{

        padding:25px;

        border-radius:15px;

    }

    .content-left h2{

        font-size:24px;

    }

    .content-left p{

        font-size:15px;

        line-height:26px;

    }

    .content-right img{

        max-width:100%;

    }

    .btn-read{

        width:100%;

        justify-content:center;

        font-size:15px;

        padding:15px 20px;

    }

}


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

@media (max-width:400px){

    .section-title{

        font-size:22px;

    }

    .tab-item{

        min-width:190px;

    }

    .content-left h2{

        font-size:21px;

    }

}


/*==========================================
    HOVER EFFECTS
===========================================*/

.tab-item::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:4px;

    background:#00a4ef;

    transition:.35s;

}

.tab-item:hover::before{

    width:100%;

}

.tab-item.active::before{

    width:100%;

}


/*==========================================
    IMAGE ANIMATION
===========================================*/

.content-right img{

    animation:floatImage 4s ease-in-out infinite;

}

@keyframes floatImage{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}


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

.btn-read{

    position:relative;

    overflow:hidden;

}

.btn-read::after{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

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

    transition:.5s;

}

.btn-read:hover::after{

    left:100%;

}


/*==========================================
    SMOOTH TRANSITION
===========================================*/

.tab-item,
.content-item,
.content-right img,
.btn-read{

    transition:all .35s ease;

}


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

.content-item{

    opacity:0;

    visibility:hidden;

    position:absolute;

    width:100%;

    left:0;

    top:0;

}

.content-item.active{

    position:relative;

    opacity:1;

    visibility:visible;

}