.topwhyimg{
    font-weight: 500;
    font-size: 4rem;
    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;
}
.ImageDiv, .followImage{
    display: flex;
    align-items: center;
    justify-content: center;
   }
   
   .startingDiv{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 40px 10px;
   }

   
   .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;
    }
   .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;
}
.whychoosediv{
    display: grid;
    grid-template-columns: 20% 80%;
    gap: 10px;
    background-color: #012B64;
    color: #ffffff;
    padding: 50px 0;
    align-items: center;
    margin: 5% 0;
}
.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%;
}





/* Mediaquerry */

@media only screen and (min-width:2304px) {
    .topwhyimg{
        font-size: 9rem;
    }
        .proximaimg{
            height:12vh ;
            width: 40vw ;
            
        }
        .contentP{
            font-size: 36px;
        }

        .POS {
            margin-bottom: 2%;
        }

         .startingDiv {
        margin: 10% 0%;
        } 

        .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;
            margin-top: 10%;
        }

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

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

     
    }


@media only screen and (max-width:2303px) {
    .topwhyimg{
        font-size: 8.5rem;
    }
        .proximaimg{
            height:10vh ;
            width: 35vw ;
            
        }
        .contentP{
            font-size: 34px;
        }

        .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: 75px;
                    width: 295px;
                }


        .POS, .followDivHead h3{
            font-size:38px;
        }
        .paragrapgPOS, .followContent p{
            font-size: 22px;
        }
        .iconText i{
        font-size: 22px;
        }
        .iconText span{
            font-size: 22px;
        }
        .ImageDiv img{
            height: 450px;
            width: 550px;
        }

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


@media only screen and (max-width:1900px) {
    .topwhyimg{
        font-size: 6.5rem;
    }
        .proximaimg{
            height:11vh ;
            width: 35vw ;
            
        }
        .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{
            height: 400px;
            width: 500px;
        }

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

@media only screen and (max-width:1700px) {
    .topwhyimg{
        font-size: 5.5rem;
    }
        .proximaimg{
            height:10vh ;
            width: 30vw ;
            
        }
        .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;
margin: 10% 0;
}
.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%; 
   }

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


}
@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:9vh ;
            width: 30vw ;
            
        }
        .contentP{
            font-size: 18px;
        }



.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: 10% 0;
}
.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: 4.3rem;
}

.proximaimg {
    height: 10vh;
    width: 27vw;
}

}

@media only screen and (max-width:1200px){
    .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) {

.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;

}

.proximaimg {
    height: 10vh;
    width: 29vw;
}

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

}

@media only screen and (max-width:991px){
    .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:768px) {

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

        .topwhyimg {
            font-size: 3.2rem;
        }

        .proximaimg{
            height:9vh ;
            width: 35vw ;
            
        }
        .contentP{
            font-size: 16px;
            margin: 5% 10% 0 10%;
            text-align: center;
        }

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


    
    
    .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;
    margin: 10% 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;
    }
    
    }


    
    @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:8vh ;
                    width: 34vw ;
                    
                }
                .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: 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: 28px;
            }
            .whychoosediv{
                display: grid;
                grid-template-columns: 35% 65%;
                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: 60px;
            
            }

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






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


    .under-titile{
        margin: 0 15%;
        font-weight: lighter;
        font-size: 18px;
        font-family: proxima-nova, sans-serif;
    }
    
            /* .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.5rem;
            }
                .proximaimg{
                    height:5.5vh ;
                    width: 34vw ;
                    
                }
                .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: 7vh 11vh;
                margin: 20% 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;
            }
    
        }