new.anwisystems.com/styles/pages/_allInOne.scss

.clipPathSectionCol{
   

    position: relative;

    .innerClipPathImg{
        position: absolute;
        top: 12%;
        left: 9%;
        width: 81%;
    }

    .innerClipPathImgFirstThree{
        position: absolute;
        top: 12%;
        left:5%;
        width: 81%;
    }

    .innerClipPathImgFirstFour{
      
    
        position: absolute;
        top: 12%;
        left:5%;
        width: 81%;
        >img{
            transform: scale(0.7);
        }
    }

    .innerClipPathImgSectionTwo{
        position: absolute;
       
        top: 50%;
        left: 28%;
        transform: translateY(-50%);
        width: 81%;
    }

    .innerClipPathImgSectionThree{
        position: absolute;
       
        top: 50%;
        left:17%;
        transform: translateY(-50%);
        width: 81%;
       
    }
    .innerClipPathImgSectionFour{
        position: absolute;
       
        top: 50%;
        left: 17%;
        transform: translateY(-50%);
        width: 81%;
        // >img{
        //     transform: scale(0.7);
        // }
        
    }

    
}
.allinoneLanding{
    // background-image: url("./../../dist/assets/imgs/allinone/allinonebg.png");
    // background-color: white;
    // background-size: cover;
    // background-repeat: no-repeat;
    // background-position: center;

    position: relative;

    // width: 100vw;
    // height: 100vh;
    #navbar-head *{
        color: white;
    }

    .headingAllinOne{
        position: absolute;
        bottom: 10%;
        left: 0;
    }
}

.sectionTwoImgAllInone{
    transform: scale(1.4);
}

.allinoneDualMarginTop{
    margin-top: 100px;
}

.sectionfiveAllinOne{
    .infoContainer{
        position: relative;
        .infoContainerOneText{
            position: absolute;
            top: 20%;
       
            left: 50%;
  transform: translateX(-50%);
            >h1{
                font-size: 1.7rem;
            }
        }
        // width: 100%;
        // max-height: 500px;
    }
}

.infoContainerYellow{
    background-color: #FFB518;
    
}
.infoContainerOrange{
    background-color: #E05E00;
    color: white;
}
.infoContainerBlue{
    background-color: #461DCF;
    color: white;
}

.infoContainer_des{
    font-size: 0.8rem;
}

.supportBoxCircle{
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 50%;
}

// carouselLanding

.carouselLanding{
    overflow-x: auto;
    display: flex;
    gap: 50px;
    margin-bottom:4rem;
    .carouselLandingItem{
        width: 300px;
        >div{
            border-radius: 25px;
            overflow: hidden;
        }

        .carouselLandingItemInner{
            position: relative;
            .carouselLandingItemInnerOverlay{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(0, 0, 0, 0.453);
            }
        }
    }
}

// owl-nav
.allinoneslider{
    .carouselLanding {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .owl-nav{
        bottom: 0;
        position: absolute;
        display: none;
        right: 15%;
        border: 1px solid;
        padding: 0.5rem 1.3rem;
        border-radius: 70px;
        span{
            font-size: 2rem;
            text-align: center;
        }
    }
    
    .owl-stage{
        width: 100% !important;
    }
}

@media (max-width:1400px) {
    .allinoneslider{
       
        
        .owl-stage{
            width: max-content !important;
        }
    }
}


@media (max-width:1300px) {
   .laptopsSection .headinglaptop{
        font-size: 5rem;
   }

   .headinglaptopSub{
    font-size: 1.2rem;
   }
}


@media (max-width:1000px) {
    .laptopsSection .headinglaptop{
         font-size: 3rem;
    }
 
    .headinglaptopSub{
     font-size: 1.2rem;
    }

    // allinoneDual

    .allinoneDualMarginTop {
        .allinoneDualMarginTop_desContainer {
            padding: 2rem;
            h1{
                font-size: 2rem;
            }

            .allinoneDualMarginTop_p{
                font-size: 1rem;
            }
        }
    }

    .allinoneDualMarginTop{
        margin-top: 100px;
    }
 }

 @media (tab-port) {
    .laptopsSection .headinglaptop{
         font-size: 2rem;
    }

  
 
    .headinglaptopSub{
     font-size: 1rem;
    }
 }

@include respond(phone) {
    .headingAllinOne > h1{
        font-size: 2rem;
    }
}

@media (max-width:600px) {

    
    .supTitleSection{
        text-align: center;
        font-size: 1rem;
    }

    .allinoneDualMarginTop .clipPathSectionCol{
        padding-right: 0 !important;
    }
    .headingAllinOne{
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        > h1{
            font-size: 2rem;
          
        }
    }

    .laptopSectionDesP{
        padding: 1rem;
        width: 100%;
        align-items: center;
    }

   

    .allinoneDualMarginTop {
        .clipPathSectionCol{
            padding-left: 0 !important;
        }
    }


    .clipPathSectionCol{
        //padding-left: 1rem !important;
        .allinoneDualMarginTop_pContainer{
            padding: 2rem;
            align-items: center;
        }
        .innerClipPathImgSectionThree{
            top: 30%;
        }

        .innerClipPathImgSectionFour{
            top: 30%;
        }

       

    }

    .supportBoxParent{
        padding: 2rem;
        gap: 1.5rem;
    }

    .allinoneDualMarginTop_p{
        text-align: center;
        font-size: 1rem;
    }

    .insightsAdvHeading{
        margin-top: 2rem;
    }
    .insightsAdv{
        width: 100vw;
        padding: 1rem;
        >ul{
            overflow-x: auto;
        }
    }

    .carouselLanding{
        overflow-x: auto;
        display: block;
        gap:0;
        margin-bottom:1rem;
        .carouselLandingItem{
            width: 100%;
            >div{
                border-radius: 25px;
                overflow: hidden;
            }
    
            .carouselLandingItemInner{
                position: relative;
                .carouselLandingItemInnerOverlay{
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background: rgba(0, 0, 0, 0.453);
                }
            }
        }

        .mt-5C{
            margin-top: 0;
        }
    }



    
 }

 @media (max-width:576px){
    .allinInMargintop{
        margin-top: 100px;
    }
    .content-main-allinone{
        padding: 1rem;
    }
    .scaleSmallAllinone{
        scale: 0.9;
    }
    .allinoneslider{
       
        
        .owl-stage{
            width: max-content !important;
        }
    }
 }


 @media (max-width:320px) {
    
   
    .laptopsSection {
        .headinglaptopSub{
            text-align: center;
            font-size: 1rem;
            
        }
        
        .laptopSectionDesP {
            gap: 2rem !important;
        }
    }
    

    .allinoneDualMarginTop {
        .allinoneDualMarginTop_p{
            text-align: center;
            font-size: 1rem;
        }

        .allinoneDualMarginTop_pContainer {
            width: 100%;
        }

        .clipPathSectionCol{
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }
   
    .clipPathSectionCol {
        
        .innerClipPathImgSectionThree{
            top: 22%;
        }
    
        .innerClipPathImgSectionFour{
            top: 22%;
        }
        .innerClipPathImgFirstFour{
            top: 0;
        }
    }

    .allinoneDualMarginTop {
        margin-top: 100px;
        .innerClipPathImgFirstThree{
            top:0;
        }
    }
 }

.animateHeadingLeft,.dualLaptopSlideLeftone{
    transform: translateX(1000%);
    transition: $animation-timer ease;
}

.addTextanimationLeft{
    transform: translateX(0);
}

.animateHeadingRight,.dualLaptopSlideone{
    transform: translateX(-1000%);
    transition: $animation-timer ease;
}

.addTextanimationRight{
    transform: translateX(0);
}

// laptop 1
.laptoponanimation,.allinOnepc{
    opacity: 0;
    transition: $animation-timer ease;
}

.addOpacity{
    opacity: 1;
}



.clipPathSectionCol {
    .dualLaptopSlideLeftone{
        transform: translate(1000%,-50%);
        transition: $animation-timer ease;
    }
    
    .dualLaptopSlideLeftoneLeft{
        transform: translate(0,-50%);
    }

   
}

.cpuSlideLeftone{
    transform: translateX(-1000%);
    transition: $animation-timer ease;
}
.controllerEight{
    transform: translateX(1000%);
}
.traslateZero{
    transform: translateX(0);
}

.clipPathSectionCol .innerClipPathImgSectionFour.controllerEight{
    transform: translate(1000%,-50%);
    transition: $animation-timer ease;
}

.clipPathSectionCol .innerClipPathImgSectionFour.traslateZero{
    transform: translate(0,-50%);
}