/* <========== landing page start ==========> */

a{text-decoration: none;}
.landing-block .top-bar{background-color: #fff; padding: 15px;}
.landing-block .logo-bar img{width: 130px;}

.landing-block .banner-content{width: 100%; height: calc(100vh - 72px); overflow-y: auto; background-color: #000; background-image: url(../img/landing-banner.jpg); background-size: cover; background-repeat: no-repeat; background-position: right -100px;}
.landing-block h6{font-family: 'Roboto'; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: #e50019; font-size: 12px;}
.landing-block h1{font-family: 'Roboto'; font-weight: bold; letter-spacing: 1px; color: #fff; font-size: 55px;}
.landing-block .banner-caption p{font-family: 'Roboto'; font-weight: 500;  color: #fff; font-size: 16px; line-height: 28px;}
.landing-block .banner-caption p span{font-weight: normal;}
a.build-btn{font-family: 'Roboto'; font-weight: 500; transition: 0.3s ease-in-out; color: #fff; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; padding: 15px 35px; line-height: 14px; background-color: #e50019; width: max-content;}
a.build-btn i{font-size: 18px;}
.landing-block .step-title-bar p{font-family: 'Roboto'; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: #fff; line-height: 20px; font-size: 12px;}
.landing-block .step-listing-box p{ font-family: 'Roboto'; cursor: pointer; font-weight: 500; letter-spacing: 3px; transition:0.2s ease-in-out ; text-transform: uppercase; color: #fff; line-height: 14px; font-size: 10px; -webkit-transition:0.2s ease-in-out ; -moz-transition:0.2s ease-in-out ; -ms-transition:0.2s ease-in-out ; -o-transition:0.2s ease-in-out ; }
.landing-block .step-listing-box p:hover{color: #e50019;}
span.line-shape{height: 70px; width: 1px; margin: 18px auto; background-color: #414141;}
.landing-block .banner-caption{column-gap: 65px;}
.landing-block .step-cap{border-right: 1px solid #414141; padding-right: 50px; height: calc(100vh - 72px);}
.brand-slider-block{width: 1000px;}
.brand-slider-block .item-box{width: 100%; height: 80px; background-color: #fff; display: flex; justify-content: center; align-items: center;}
.brand-slider-block .item-box img{width: 55%; object-fit: contain;}
.back-cpu-img, .slider-title{display: none;}
.step-title-bar{ position: absolute; top: 0px; width: 130px; left: 50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); }
.step-listing{position: relative;}
.default-text p{font-size: 12px !important; line-height: 20px !important; font-weight: 500; letter-spacing: 3px !important; text-transform: uppercase; font-family: 'Roboto';}
.step-title-bar p{ opacity: 0; visibility: hidden; transition: 0.3s ease-in-out; font-size: 12px !important; line-height: 20px !important; letter-spacing: 2px !important; transform:scale(0.5) ; -webkit-transform:scale(0.5) ; -moz-transform:scale(0.5) ; -ms-transform:scale(0.5) ; -o-transform:scale(0.5) ; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; }
.default-text-cap.active{opacity: 0;}
.step-listing-box:hover .step-title-bar p{ opacity: 1; visibility: visible; transform:scale(1) ; -webkit-transform:scale(1) ; -moz-transform:scale(1) ; -ms-transform:scale(1) ; -o-transform:scale(1) ;}
.style-step-box{margin-top: 30px;}


@media (max-width: 1500px){
    .landing-block .banner-content{background-size: contain; background-position: center !important;}
}

@media (max-width: 1200px){
    .brand-slider-block {width: 700px;}
}

@media (max-width: 1300px){
    .landing-block .step-cap{padding-right: 25px}
    .landing-block .banner-caption{column-gap: 30px;}
    .landing-block h1{font-size: 40px;}
    /* .landing-block .banner-content{background-position: bottom !important; background-size: cover;} */
    span.line-shape{height: 25px; margin: 15px auto}
    .landing-block .step-title-bar p{font-size: 10px; line-height: 12px;}
    .landing-block .step-listing-box p{font-size: 8px;}
}

@media (max-width: 992px){
    .landing-block h1{font-size: 25px; margin: 10px 0 !important;}
    .landing-block h6{font-size: 8px;}
    .landing-block .banner-caption{column-gap: 15px;}
    .landing-block .step-cap{padding-right: 15px;}
    .landing-block .banner-des p{margin: 10px 0 !important;}
    .landing-block .banner-caption p{font-size: 12px; line-height: 20px;}
    a.build-btn{padding: 10px 20px;}
    .brand-slider-block{width: 100%; position: fixed; bottom: 0px; left: 0;}
}

@media (max-width: 768px){

    .landing-block .container{max-width: 100% !important;}

}



@media (min-width: 576px){
    .howitwork-slider-block, .footer-link, .footer-des{display: none;}
}

@media (max-width: 576px){
    .landing-block .step-title-bar p{font-size: 8px; line-height: 14px;}
    .step-listing-box p{font-size: 8px !important;}
    .landing-block h1{text-align: left;}
    a.build-btn{font-size: 15px; text-align: left; width: 100%; justify-content: center; line-height: 20px; padding: 15px;}
    a.build-btn i{font-size: 14px;}
    .landing-block .logo-bar img{width: 100px;}
    .brand-slider-block .item-box img{width: 50%;}
    .brand-slider-block .item-box{height: 65px;}
    .back-cpu-img{display: block;}
    .back-cpu-img img{width: 250px;}
    .landing-block .banner-content{background-image: none; height: 100%; padding: 15px 0 0 0;}

    .desktop-block{display: none;}
    .banner-caption{justify-content: center; text-align: center; width: 100%;}
    .text-cap{width: 100%; text-align: center; justify-content: center;}
    .banner-des{align-items: center; width: 100%; gap: 20px;}
    .landing-block h6{font-size: 14px;}
    .landing-block h1{font-size: 35px;}
    .banner-des h6{order: 1; margin: 0 !important;}
    .banner-des h1{order: 2; margin: 0 !important;}
    .banner-des .back-cpu-img{order: 3;}
    .banner-des .text-cap{order: 4;}
    .banner-des a.build-btn{order: 5;}
    .banner-des .brand-slider-block{order: 6;}
    .banner-des .howitwork-slider-block{order: 7;}
    .banner-des .footer-link{order: 8;}
    .banner-des .footer-des{order: 9;}
    .landing-block .banner-caption p{font-size: 18px; line-height: 28px;}
    .landing-block .banner-des p{margin: 0 !important;}
    .landing-block .top-bar{padding: 10px 15px;}
    .brand-slider-block{position: relative;}
    .slider-title{display: block; font-size: 18px; font-weight: normal; color: #fff; margin-bottom: 5px; font-family: 'Roboto';}
    .owl-stage{padding-left: 0 !important; padding-right: 0 !important;}
    .banner-des .howitwork-slider-block{width: 100%;}
    .howitwork-slider-block .item-box-caption span{font-size: 12px; font-weight: bold; letter-spacing: 1px; font-family: 'Roboto'; color: #e50019; text-transform: uppercase;}
    .howitwork-slider-block .item-box-caption p{font-size: 13px; font-weight: normal; font-family: 'Roboto'; color: #fff; width: 120px; line-height: 17px; margin: 0 auto !important;}
    button.owl-prev{
        position: absolute;
        left: 0%;
        top: 50%;
        transform: translateY(-50%);
    }
    button.owl-next{
        position: absolute;
        right: 0%;
        top: 50%;
        transform: translateY(-50%);
    }
    .owl-nav i{
        font-size: 25px;
        color: #fff;
    }
    .owl-theme .owl-nav [class*=owl-]:hover{
        background-color: transparent !important;
    }
    .footer-link ul{
       grid-template-columns: repeat(2, 1fr);
       row-gap: 0px;
       column-gap: 10px;
       text-align: left;
       /* width: 100%; */
       width: 80%;
       margin: 0 auto;
    }
    .footer-link li a{
        font-size: 12px;
        letter-spacing: 1px;
        font-weight: normal;
        color: #000;
        font-family: 'Roboto';
        text-transform: uppercase;
    }
    /* .footer-des{width: 100%; background-color: #575b5c; padding: 10px 5px;} */
    .footer-des{width: 100%; background-color: #575b5c; padding: 10px 0px;}
    .footer-link{width: 100%; background-color: #fff; padding: 10px 5px;}
    .footer-des p{font-size: 11px !important; color: #fff; text-align: center; font-family: 'Roboto'; font-weight: normal; line-height: 16px !important; text-transform: uppercase; letter-spacing: 1px;}
    .banner-content{flex-direction: column;}
    .container {
        max-width: 95% !important;
    }
}

@media (max-width: 420px){
    /* .landing-block h1{font-size: 18px;} */
    .landing-block .step-cap{justify-content: flex-start !important;}
    /* .landing-block .banner-content{padding-top: 30px;} */
    .landing-block .step-cap{border: none;}
    .landing-block .banner-caption{align-items: flex-start !important; column-gap: 5px;}
    /* .landing-block .banner-des{padding-top: 20px; padding-left: 10px;}  */
    .landing-block .step-title-bar p{line-height: 11px; letter-spacing: 2px;}
    .step-listing-box p{letter-spacing: 2px !important; line-height: 10px !important;}
}

/* <========== landing page end ==========> */