/* Container styling */
.top-box {
    margin: 9% 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5%;
    overflow: visible; /* Contain the sliding animation */
}

/* Image container */
.top-box-image {
    position: relative;
}

.top-box-image img {
    height: auto;
    max-width: 100%;
    border-radius: 10px;
    margin-left: -34%; /* Start off-screen from LEFT */
    transition: all 1s ease-in-out;
}

/* Content styling */
.top-box-content {
    z-index: 2;
}

/* Animation keyframes for LEFT side */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-20%);
        border-radius: 10px;
        margin-left: -150%;
    }
    100% {
        transform: translateX(0);
        border-radius: 0 10px 10px 0;
    }
}

@keyframes slideOutToLeft {
    0% {
        transform: translateX(0);
        border-radius: 0 10px 10px 0;
    }
    100% {
        transform: translateX(-20%);
        border-radius: 10px;
        margin-left: 0%;
    }
}

/* Apply hover animation */
.top-box:hover .top-box-image img {
    animation: slideInFromLeft 1s ease-in-out forwards;
}

.top-box:not(:hover) .top-box-image img {
    animation: slideOutToLeft 1s ease-in-out forwards;
}



/*------------------------*/



.topwhyimg{
    font-weight: 500;
    font-size: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4%;
}
    .proximaimg{
        height:8vh ;
        width: 30vw ;
        
    }

    .under-titile{
        margin: 0 15%;
        font-weight: lighter;
        font-size: 40px;
        font-family: proxima-nova, sans-serif;
    }

   .servicelist{
       display: grid;
       grid-template-columns: repeat(3, 1fr);
   }
   .tick{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
   }



   .iconText{
    display: flex;
    gap: 5%;
    align-items: center;
   }
   .tickitem{
    padding-bottom: 5%;
   }
 
   .ImageDiv img{
    height: 400px;
    width: 500px;
}


   
   .startingDiv{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 40px 10px;
   }





.salesDiv{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5%;
    margin-bottom: 58px;
}

.crmDiv{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5%;
    margin-bottom: 58px;
}



   
   .POS{
        margin-bottom: 5%;
   }

   .paragrapgPOS{
        margin-bottom: 5%;
   }

   .iconText {
   font-weight: lighter; 
   }

    .followDivHead{
        margin-bottom: 2.5%;
    }

   .followDiv{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin: 8% 14%;
    }

   .followtick{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
   }

   .followContent{
        text-align: start;
   }

   .followContent h3{
        margin-bottom: 5%;
   }

   .followContent p{
        margin-bottom: 5%;
   }
   .androidBtn, .iosBtn {
    width: 30%;
    /* height: 6vh; */
    /* background: linear-gradient(90deg, #243B55, #141E30); */
    background-color: #082248;
    color: white;
    border: none;
    font-size: 16px;
    border-radius: 20px;
    cursor: pointer;
    padding: 10px 20px;
}

.androidBtn i, .iosBtn i{
    margin-right: 5px;
    font-size: 16px;
}

.androidBtn:hover, .iosBtn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

.followButtons{
    display: flex;
    gap:5%;
}
.followtick{
    margin-bottom: 5%;
}


.whyText h3{
    font-weight: lighter;
    font-size: 28px;
    text-align: start;
}

.whychoosediv{
    display: grid;
    grid-template-columns: 20% 80%;
    gap: 10px;
    background-color: #012B64;
    color: #ffffff;
    padding: 50px 0;
    align-items: center;
    margin: 8% 14%;
}

.whyContent{
    display: flex;
    align-items: center;
    justify-content: center;
    padding:20px 80px 20px 20px;
    text-align: justify;
    font-size: 16px;
}
.whyText{
    display: flex;
    gap: 10px;
    align-items: center;
    padding:20px 20px 20px 30px;
}
.whyline{
    height: 5px;
    width: 60px;
    background-color: #F3C008;
    display: flex;

}


.followImage img{
    height: 300px;
    width: 450px;
}
.next-gen h3{
    display: flex;
    justify-content: center;
    align-items: center;
}
.contentDiv{
    text-align: start;
}
.followDivHead{
    text-align: start;

}

.essential-sub{
    margin-top: 52%;
}

/*-----------------------------------*/

/* Container styling */
.inventorydiv {
    margin: 10% 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5%;
    overflow: visible; /* Contain the sliding animation */
}

.inventoryImage{
    align-content: center;
}


.inventoryImage img {
    height: auto;
    max-width: 100%;
    border-radius: 10px;
    margin-right: -15%; /* Start off-screen from RIGHT */
    transition: all 1s ease-in-out;
}

/* Content styling */
.inventoryContent {
    z-index: 2;
}

/* Animation keyframes for RIGHT side */
@keyframes slideInFromRight {
    0% {
        transform: translateX(20%);
        border-radius: 10px;
        margin-right: -60%;
    }
    100% {
        transform: translateX(0);
        border-radius: 10px 0 0 10px;
    }
}

@keyframes slideOutToRight {
    0% {
        transform: translateX(0);
        border-radius: 10px 0 0 10px;
    }
    100% {
        transform: translateX(9%);
        border-radius: 10px;
        margin-right: 0%;
    }
}

/* Apply hover animation */
.inventorydiv:hover .inventoryImage img {
    animation: slideInFromRight 1s ease-in-out forwards;
}

.inventorydiv:not(:hover) .inventoryImage img {
    animation: slideOutToRight 1s ease-in-out forwards;
}









/* Mediaquerry */

@media only screen and (min-width:2304px) {
    .topwhyimg{
        font-size: 8.5rem;
    }

    .proximaimg {
        height: 11vh;
        width: 30vw;
    }

    .contentP{
        font-size: 36px;
    }

    .POS {
        margin-bottom: 2%;
    }


    .followDivHead{
        margin: 0%;
    }

    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
        margin-top: 0;
        margin-bottom: 0;
        font-weight: 500;
        line-height: 1.2;
        color: var(--bs-heading-color);
    }

    .whychoosediv {
        display: grid;
        grid-template-columns: 20% 80%;
        gap: 10px;
        background-color: #012B64;
        color: #ffffff;
        padding: 50px 0;
        align-items: center;
    }

    .switchContent h3 img {
        height: 75px;
        width: 295px;
    }

    .switch-to {
        margin: 10% 0% 0%; 
    }

     
    }


@media only screen and (max-width:2303px) {
    .topwhyimg{
        font-size: 6.5rem;
    }

    .proximaimg{
        height:9vh ;
        width: 30vw ;    
    }

    .contentP{
        font-size: 30px;
        text-align: justify;
        padding: 0% 10%;
    }

    .startingDiv {
        margin:10% 0%;
    } 
       
    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
        margin-top: 0;
        margin-bottom: 0;
        font-weight: 500;
        line-height: 1.2;
        color: var(--bs-heading-color);
    }


    .whychoosediv {
        display: grid;
        grid-template-columns: 20% 80%;
        gap: 10px;
        background-color: #012B64;
        color: #ffffff;
        padding: 50px 0;
        align-items: center;
        margin: 10% 0;
    }

        
    .followDivHead{
        margin: 0%;
    }

    .switchContent h3 img {
        height: 47px;
        width: 285px;
    }


    .POS, .followDivHead h3{
        font-size:38px;
    }

    .paragrapgPOS, .followContent p{
        font-size: 22px;
    }

    .iconText i{
        font-size: 22px;
    }

    .iconText span{
        font-size: 22px;
    }

    .ImageDiv img, .inventoryImage img{
        height: 450px;
        width: 550px;
    }

    .switch-to {
         margin: 10% 0% 0%; 
    }
    }


@media only screen and (max-width:1900px) {
    .topwhyimg{
        font-size: 5rem;
    }

    .proximaimg{
        height:7vh ;
        width: 24vw ;     
    }

    .contentP{
        font-size: 26px;
    }

    .POS, .followDivHead h3{
        font-size:34px;
    }

    .paragrapgPOS, .followContent p{
        font-size: 20px;
    }

    .iconText i{
        font-size: 20px;
    }

    .iconText span{
        font-size: 20px;
    }

    .ImageDiv img, .inventoryImage img{
        height: 400px;
        width: 500px;
    }

    .switch-to {
         margin: 10% 0% 0%; 
    }
    }

@media only screen and (max-width:1700px) {
    .topwhyimg{
        font-size: 5.5rem;
    }

    .proximaimg{
        height:6.7vh ;
        width: 25vw ;    
    }

    .contentP{
        font-size: 24px;
    }

    .switchContent h3 img {
        height: 40px;
        width: 250px;
    }


    .POS, .followDivHead h3{
        font-size:32px;
    }

    .paragrapgPOS, .followContent p{
        font-size: 18px;
    }

    .iconText i{
    font-size: 18px;
    }

    .iconText span{
        font-size: 18px;
    }

    .ImageDiv img{
        height: 400px;
        width: 500px;
    }

    .followImage img{
        height: 400px;
        width: 600px;
    }

    .androidBtn, .iosBtn {
        width: 40%;
        padding: 10px 20px;
        font-size: 18px;
    }

    .androidBtn i, .iosBtn i{
        margin-right: 5px;
        font-size: 18px;
    }


    .whyText h3{
        font-weight: lighter;
        font-size: 32px;
    }

    .whychoosediv{
        display: grid;
        grid-template-columns: 25% 75%;
        gap: 10px;
        padding: 50px 0;
        align-items: center;
    }

    .whyContent{
        padding:20px 80px 20px 20px;
        font-size: 18px;
    }
    
    .whyText{
        gap: 10px;
        padding:20px 20px 20px 30px;
    }

    .whyline{
        height: 5px;
        width: 60px;

    }

    .switch-to {
        margin: 10% 0% 0%; 
    }

}
@media only screen and (max-width:1440px) {

    .under-titile{
        margin: 0 15%;
        font-weight: lighter;
        font-size: 30px;
        font-family: proxima-nova, sans-serif;
    }

    .topwhyimg{
        font-size: 4rem;
    }

    .proximaimg {
        height: 6.2vh;
        width: 15vw;
    }

    .contentP{
        font-size: 18px;
        text-align: justify;
        padding: 0% 13%;
    }

    .startingDiv {
        margin: 8% 14%;
    } 



    .POS, .followDivHead h3{
        font-size:28px;
    }

    .paragrapgPOS, .followContent p{
        font-size: 16px;
    }

    .iconText i{
    font-size: 16px;
    }

    .iconText span{
        font-size: 16px;
    }

    .ImageDiv img{
        height: 350px;
        width: 450px;
    }


    .followImage img{
        height: 300px;
        width: 450px;
    }

    .androidBtn, .iosBtn {
        width: 30%;
        padding: 10px 20px;
        font-size: 16px;
    }

    .androidBtn i, .iosBtn i{
        margin-right: 5px;
        font-size: 16px;
    }
        

    .whyText h3{
        font-weight: lighter;
        font-size: 28px;
    }

    .whychoosediv{
        display: grid;
        grid-template-columns: 20% 80%;
        gap: 10px;
        background-color: #012B64;
        color: #ffffff;
        padding: 50px 0;
        align-items: center;
        margin: 57px 0px 130px 0px;
    }

    .whyContent{
        display: flex;
        align-items: center;
        justify-content: center;
        padding:20px 80px 20px 20px;
        text-align: justify;
        font-size: 16px;
    }

    .whyText{
        display: flex;
        gap: 10px;
        align-items: center;
        padding:20px 20px 20px 30px;
    }

    .whyline{
        height: 5px;
        width: 60px;
        background-color: #F3C008;
        display: flex;
    }

    .topwhyimg {
        font-size: 3rem;
    }

    .switch-to {
        margin: 7% 0% 0%; 
    }

}

@media only screen and (max-width:1200px){
    .proximaimg {
        height: 7vh;
        width: 15vw;
    }

    .androidBtn, .iosBtn {
        width: 32%;
        padding: 10px 10px;
        font-size: 16px;
    }

    .under-titile{
        margin: 0 15%;
        font-weight: lighter;
        font-size: 25px;
        font-family: proxima-nova, sans-serif;
    }
}

@media only screen and (max-width:1024px) {

    .proximaimg {
        height: 8vh;
        width: 21vw;
    }

    .topwhyimg{
        font-size: 3.5rem;
    }

    .contentP{
        font-size: 18px;
    }

    .POS, .followDivHead h3{
        font-size:24px;
    }

    .paragrapgPOS, .followContent p{
        font-size: 14px;
    }

    .iconText i{
    font-size: 14px;
    }

    .iconText span{
        font-size: 14px;
    }

    .ImageDiv img{
        height: 300px;
        width: 400px;
    }

    .followImage img{
        height: 280px;
        width: 400px;
    }

    .androidBtn, .iosBtn {
        width: 35%;
        padding: 10px 20px;
        font-size: 14px;
    }

    .androidBtn i, .iosBtn i{
        margin-right: 5px;
        font-size: 14px;
    }


.whyText h3{
    font-weight: lighter;
    font-size: 28px;
}
.whychoosediv{
    display: grid;
    grid-template-columns: 25% 75%;
    gap: 10px;
    padding: 50px 0;
    margin: 5% 0;
}
.whyContent{
    padding:20px 80px 20px 20px;
    font-size: 14px;
}
.whyText{
    display: flex;
    gap: 10px;
    align-items: center;
    padding:20px 20px 20px 30px;
}
.whyline{
    height: 5px;
    width: 60px;

}


.switchContent h3 img {
    height: 60px;
    width: 265px;
}

}

@media only screen and (max-width:991px){
    .proximaimg {
        height: 4.5vh;
        width: 30vw;
    }

    .androidBtn, .iosBtn {
        width: 38%;
        padding: 10px 10px;
        font-size: 12px;
    }

    .switchContent h3 img {
        height: 55px;
        width: 243px;
    }

    .buttonswitch {
        border-radius: 20px;
        padding: 20px 60px;
        font-size: 19px;
    }

}

@media only screen and (max-width: 820px) {
        .proximaimg {
        height: 4.2vh;
        width: 27vw;
    }
}


@media only screen and (max-width:768px) {

    .under-titile{
        margin: 0 15%;
        font-weight: lighter;
        font-size: 23px;
        font-family: proxima-nova, sans-serif;
    }

    .top-box, .crmDiv, .salesDiv {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 5%;
        margin-bottom: 15%;
    }

        .topwhyimg {
            font-size: 3.2rem;
        }

        .proximaimg {
            height: 4.5vh;
            width: 30vw;
        }

        .contentP{
            font-size: 16px;
            margin: 5% 10% 0 10%;
            text-align: center;
            padding: 0%;
        }

    
    
    .POS, .followDivHead h3{
        font-size:22px;
    }
    .paragrapgPOS, .followContent p{
        font-size: 12px;
    }
    .iconText i{
    font-size: 12px;
    }
    .iconText span{
        font-size: 12px;
    }
    .ImageDiv img{
        height: 200px;
        width: 250px;
    }
    .startingDiv{
        padding: 40px 0;
        gap: 5%;
    }
    
    
.followDivHead{
    margin-bottom: 0;
}
    .followDiv{
        gap: 5%;
        padding: 10px 0;
    }
    .followImage img{
        height: 180px;
        width: 220px;
    }
    .androidBtn, .iosBtn {
        width: 45%;
        padding: 5px 10px;
        font-size: 11px;
    
    }
    .androidBtn i, .iosBtn i{
        margin-right: 5px;
        font-size: 14px;
    }
    
    
    .whyText h3{
        font-weight: lighter;
        font-size: 28px;
    }
    .whychoosediv{
        display: grid;
        grid-template-columns: 30% 70%;
        gap: 5px;
        padding: 10px 0;
    }


    .whyContent{
        padding:10px 11px 10px 10px;
        font-size: 12px;
        text-align: start;
    }
    .whyText{
        display: flex;
        gap: 5px;
        align-items: center;
        padding:10px 10px 10px 20px;
    }
    .whyline{
        height: 5px;
        width: 60px;
    
    }

    .switch-to {
        padding: 5vh 10vh 10vh 10vh;
        margin: 10% 0% 0%;
        height: 25vh;
        justify-content: start;
    }


    .switchContent h3 img {
        height: 30px;
        width: 200px;
    }

    .buttonswitch {
        border-radius: 20px;
        padding: 18px 50px;
        font-size: 18px;
    }
    

    .top-box-image img{
        left: 0%;
    }

    .ImageDiv, .followImage{
        right: 0%;
    }


    .followDiv {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .followContent{
        order: 2;
    }

    .inventoryImage img{
        right: 0%;
    }

    /* animation */
    .top-box-content{
        margin-left: 0%;
    }

    .top-box-image img {
        margin-left: -5%;
    }

    .inventoryImage img{
        margin-left: -15%;
    }

}


    
    @media only screen and (max-width:576px) {
    
            .startingDiv{
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                gap: 10%;
                padding: 40px 10px;
                margin-bottom: 10%;
               }
               .contentDiv, .followContent{
                padding: 0 5%;
               }


               .topwhyimg{
                font-size: 2.8rem;
            }

            .proximaimg {
                height: 6.5vh;
                width: 43vw;
            }

            .contentP{
                font-size: 15px;
                margin: 5% 10% 0 10%;
            }
        
        
            
            
            .POS, .followDivHead h3{
                font-size:24px;
            }
            .paragrapgPOS, .followContent p{
                font-size: 16px;
                text-align: justify;
            }
            .iconText i{
            font-size: 14px;
            }
            .iconText span{
                font-size: 14px;
            }
          
        
        .followDivHead h3{
           margin-bottom: 0;
        padding: 0 5%;
       }
       .followImage img{
        height: 200px;
        width: 280px;
        }

        .followDiv{
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 5%;
            margin-bottom:15%;
        }
            .androidBtn i, .iosBtn i{
                margin-right: 5px;
                font-size: 14px;
            }
            .followImage {
                order: -1; /* This moves the image to the top */
            }
            
            .followContent {
                order: 1; /* This ensures the content appears below the image */
            }

            
            
            .whyText h3{
                font-weight: lighter;
                font-size: 28px;
            }
            .whychoosediv{
                display: grid;
                grid-template-columns: 35% 65%;
                gap: 5px;
                padding: 10px 0;
                margin: 2% 0%;
            }
            .whyContent{
                padding:10px 11px 10px 10px;
                font-size: 12px;
            }
            .whyText{
                display: flex;
                gap: 5px;
                align-items: center;
                padding:10px 10px 10px 20px;
            }
            .whyline{
                height: 5px;
                width: 60px;
            
            }

            .androidBtn, .iosBtn {
                width: 28%;
                padding: 7px;
                font-size: 14px;
            }
    
        }






    @media only screen and (max-width:480px) {
            
    .proximaimg {
        height: 4.4vh;
        width: 43vw;
    }


    .under-titile{
        margin: 0 15%;
        font-weight: lighter;
        font-size: 18px;
        font-family: proxima-nova, sans-serif;
    }

    .contentDiv, .followContent{
        padding: 0 5%;
    }


    .topwhyimg{
        font-size: 2.5rem;
    }



    .contentP{
        font-size: 14px;
        margin: 5% 10% 0 10%;
    }
                 
    .POS, .followDivHead h3{
        font-size:24px;
    }

    .paragrapgPOS, .followContent p{
        font-size: 14px;
        text-align: justify;
    }

    .iconText i{
        font-size: 12px;
    }

    .iconText span{
        font-size: 12px;
    }
          
    .followDivHead h3{
        margin-bottom: 0;
        padding: 0 5%;
    }

    .followImage img{
        height: 190px;
        width: 280px;
    }
            /* .followDiv{
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                gap: 10%;
                margin-bottom:15%;
                } */

    .androidBtn i, .iosBtn i{
        margin-right: 5px;
        font-size: 14px;
    }

    .followImage {
        order: -1; /* This moves the image to the top */
    }
            
    .followContent {
        order: 1; /* This ensures the content appears below the image */
    }  
            
    .whyText h3{
        font-weight: lighter;
        font-size: 19px;
    }

    .whychoosediv{
        display: grid;
        grid-template-columns: 40% 60%;
        gap: 5px;
        padding: 10px 0;
        margin: 20% 0 0 0;
    }

    .whyContent{
        padding:10px 11px 10px 10px;
        font-size: 12px;
    }

    .whyText{
        display: flex;
        gap: 5px;
        align-items: center;
        padding:10px 10px 10px 20px;
    }

    .whyline{
        height: 5px;
        width: 55px; 
    }

    .androidBtn, .iosBtn{
        width: 50%;
        padding: 8px;
        font-size: 12px;
    }


    .switch-to {
        padding: 5vh 11vh;
        margin: 6% 0% 0%;
        height: 30vh;
        justify-content: start;
    }

    .switchContent h3 img {
        height: 19px;
        width: 120px;
    }

    .buttonswitch {
        border-radius: 17px;
        padding: 15px 45px;
        font-size: 14px;
    }

    .pricing-section .pricing h2 {
        font-size: 2rem;
    }
    
}

 @media only screen and (max-width:320px) {
    .proximaimg {
        height: 7.5vh;
        width: 50vw;
    }

    .tick {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .switchContent h3 {
        font-size: 11px;
        font-weight: bold;
    }

    .switchContent h3 img {
        height: 11px;
        width: 70px;
    }
 }