*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    list-style: none;
    font-family:'Poppins',sans-serif;
}

.active{
    color: white;
    background-color: #37fda7;
}
.more-btn{
    height: 55px;
    width: 140px;
    border-radius: 40px;
    border: 2px solid #0088ff;
    color: #0088ff;
    font-weight: bold;
    background-color: transparent;
    transition:all ease-in 2s;
   
}
.more-btn:hover{
    color: white;
    background-color: #0088ff;
    

}
.light-red-bg{
    background: #f1e5ee;
}
.light-green-bg{
    background-color: #ebf1f2;

}
.light-gray-bg{
    background-color: #f5f3f3;

}
.color-headline{
    color: #009dff;
    font-size:25px;
    font-weight:300;

}
.narrow-headline{
    font-size: 20px;
    font-weight: 400px;
    color: #02e1ce;
}
.headline{
    font-size: 50px;
    font-weight: bolder;
    margin:10px 0; 
    line-height: 50px;
}

.large-headline{
    font-size: 65px;
    font-weight: bolder;
    margin:10px 0; 
    line-height: 50px;
}
.medium-headline{
    font-size: 45px;
    font-weight:500;
    margin:0px; 
    line-height: 50px;

}
.semi-large-headline{
    font-size: 35px;
    font-weight: 400;
    margin: 0px;
}
.small-headline{
    font-size: 18px;
    font-weight: bolder;
}
.card-para{
    font-size: 14px;
}
.paragraph-text{
    margin:15px 0px;   
}
header{
    height:10vh;
    width: 100%;
    background-color:white;
    position: fixed;
    top: 0px;
    z-index:100;
}


.dropdown {
    position: relative;
    display: inline-block;
}
.dropbtn{
    border: none;
    font-weight:500;
    padding: 5px 8px;
    border-radius: 5px;
    color: #434343;
    background-color: transparent;
}
.dropbtn:hover{
    color: #ec6b85;
    background-color: #f4f6f6;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width:280px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    border-radius: 5px;
    z-index: 1;
}
.dropdown-content a{
    display: block;
    padding: 10px 0 10px 15px;
    border-radius: 5px;
    font-size:16px;
    color: #0458b2;
    text-decoration: none;
}
.dropdown-content a:hover{
    color: #006b96;
    background-color: #f8e9e9;
  
}

.dropdown:hover .dropdown-content {
    display: block;
}
    
   
   
.main{ 
    padding-top:10vh;
    background: rgb(218,236,242);
    background: linear-gradient(90deg, rgba(218,236,242,1) 0%, rgba(156,223,252,1) 100%);   
   
}
.page-main{
    margin-top: 10vh;
}
.main-content{
    height:90vh;
    width: 100%;
    display: flex;
    

}
.main-content-text{
    height: 100%;
    width: 50%;
    padding-left:120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    
   
}
.contact-btn{
    
    padding: 12px 45px;
    border: none;
    border-radius: 8px;
    font-size: 20px;
    font-weight:500;
    color: rgb(255, 255, 255);
    background-color: #0088ff;
}
.contact-btn:hover{
    background-color: #05698a;
}

.main-content-img{
    height: 100%;
    width: 50%;
    padding:120px 55px 50px 55px;
    
  
   
}
.ads-section{
    padding: 50px 100px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.card-section{
    
    width: 100%;
    padding-top: 50px;
   /* background-image: url(../images/body-background.png); 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; */
    background-color: rgb(242, 244, 244);
}

.card-section-inner{
   padding: 80px 50px;
    display: flex;
    align-items: center;
    justify-content:space-between;

}

.card-1,
.card-2,
.card-3,
.card-4{
    height: 70vh;
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card-img-box{
    height:220px;
    width:220px;
    border-radius:50%;
    background-color: rgb(245, 243, 243);
}
.card-text-box{
    height: 57%;
    width: 100%;
    padding-top: 30px;
    text-align: center;
}


.feature-section{
    
    padding: 100px 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(218, 232, 243);
   

}
.feature-section-inner{
    height:90vh;
    width: 100%; 
    display:flex;
   
   

}
.feature-section-inner-text{
    height: 100%;
    width: 60%;
   

}

span{
    
    color:  #0088ff;
}

.hover-box-section{
    width: 65%;
    padding-top: 20px;
}
.hover-box{
    padding: 10px;
    display: flex;
    align-items: center;
   
}
.hover-box h5{
    font-size: 18px;
    font-weight:bold;
    margin: 0px 15px;
}

.hover-box:hover{
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
   
}
.feature-section-inner-img{
    width: 40%;
    height: 100%;
    padding:100px 10px;
}
.benefit-section{
    padding: 50px 60px 0px 60px;
    background-color: rgb(242, 244, 244);
}
.benefit-stats-section{
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.stats-box{
    height: 150px;
    width: 250px;
    border-radius: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color:white;
   
}
.stats-box-data{
    display:flex ;
    align-items: center;
    justify-content: center;
}
.stats-box-data i{
    font-size: 50px;
    margin-right: 10px;
}
.stats-box-data span{
    font-size: 60px;
    color:black;
}
.benefit-section-bottom{
    height: 70vh;
    width: 100%;
    padding: 40px 50px;
    display: flex;
}
.benefit-section-bottom-text{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content:center;
}
.benefit-section-bottom-img{
    
    width: 50%;
    padding-left:10px;
}
.impact-section{
    display: flex;
}
.impact-section-text{
    height:550px;
    width: 100%;
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}







.footer{
    height:60vh;
    width: 100%;
   
    background-color:#0b49b4;
}
.footer-content-section{
    height:60vh;
    width: 100%;
    padding:30px 120px 30px 120px;
    display: flex;
    flex-direction: column;
    justify-content:space-between; 
}
.footer-content-section-top{
    width: 100%;
    padding-top: 50px;
    display: flex;
    justify-content:space-between;

}
.footer-content-section-top a{
    font-size: 14px;
    margin: 8px 0;
    text-decoration: none;
    color:white;

}
.footer-content-section-top a:hover{
    color:#fda1fa ;

}

.footer-content-section-title{
    width: 20%;
   
}

.footer-content-section-company,
.footer-content-section-service,
.footer-content-section-resources,
.footer-content-section-email{
    display: flex;
    flex-direction: column;
    color: #ffffff;
}

.footer-content-section-top h4{
    margin: 10px 0px;
    font-size: 20px;
    font-weight:600;
    color:white;
}
.footer-content-section-top p{
    font-size: 14px;
    margin: 0px;
    color:white;
}
.footer-content-section-bottom{
    width: 100%;
    padding-top: 25px;
    border-top: 1px solid rgb(255, 255, 255);
    display: flex;
}
.footer-content-section-bottom-left{
    width: 30%;
    font-size: 16px;
    
    color: #ffffff;
    display: flex;
    justify-content: space-between;
}
.footer-content-section-bottom-left  a{
    color:white;
    text-decoration: none;
}
.footer-content-section-bottom-left  a:hover{
    color:#fda1fa;

}
.footer-content-section-bottom-right{
    width: 70%;
    display: flex;
    justify-content: flex-end;
    gap: 50px;
    font-size: 35px;
    color:white;
}

.footer-content-section-bottom-right i:hover{
    color:#fda1fa;

}

.contact-box{
    height: 100vh;
    width: 100%; 
    display: flex; 
}
.contact-box-left{
    width: 50%;
    padding: 40px 10px 40px 120px ;
}
.contact-box-left h2{
    font-weight: 400;
    margin-bottom: 30px;
}
.contact-box-right{
    width: 50%;
    padding: 40px 50px;
}

.user-data-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 0px;
}
.table-section{
    height: 80vh;
    width: 80%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    
}
.custom-table{
    width:100%;
    border-collapse: collapse;
    border-spacing: 0px;
    
}
.custom-table thead{
    height: 7vh;
    color: #f5f5f5;
    background-color: rgb(147, 147, 240);
}
.custom-table thead tr th{
    padding: 5px 12px;
    text-align:center ;
}

.custom-table tbody tr:nth-child(even){
    height: 6vh;
    background-color: rgb(228, 241, 242);
}
.custom-table tbody tr:nth-child(odd){
    height: 6vh;
    background-color:white;
}
.custom-table tbody tr td{
   
    text-align: center; 
}

.login-box{
    height:100%;
    width: 60%;
    margin-left: 100px;
    border-radius: 10px;   
    display: flex;
    flex-direction: column;
    background-color: #FF9A8B;
    background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    
}

/*-------------------create bolg--------------------------*/

.blog-create-section{
   
    width: 100%;
    padding: 30px 80px 10px 80px;
    background-color: #f5f5f5;
}
/*-------------------create bolg--------------------------*/
/*-------------------view bolg--------------------------*/
.view-blog-section{
    padding:0px 200px;
    
}
.blog_list{
    padding:200px 150px 50px 150px;
}

.view-blog{
    padding: 80px 0px 20px 0px;
   
    background-color: white;  
    border-bottom: 1px solid rgb(221, 221, 221);
}
.view-blog-img-section{
    height: 60vh;
    width: 70%;
    border-radius: 10px;
   
    overflow: hidden;
}
.view-blog .divider{
    height: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*-------------------view bolg--------------------------*/
/*-------------------product page & feature page--------------------------*/
.products-page-main{
    
    width: 100%;
    
}
.product-overview,
.feature-overview{
    padding:50px 0px 50px 120px;
    background: rgb(235,228,234);
    background: linear-gradient(94deg, rgb(247, 245, 247) 100%, rgba(255,255,255,1) 100%);
}

.product-details,
.feature-details{
    padding:30px 120px;
}
.product-details-card
{
    height: 280px;
    width: 100%;
    padding: 20px 20px;
    background-color: #eef5f4;
   /* border-right: 8px solid #f1f1f1;
    border-bottom:8px solid #f1f1f1;*/
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.feature-details-card{
    height: 280px;
    width: 100%;
    padding: 20px 20px;
    background-color: #f5f1f2;
   /* border-right: 8px solid #f1f1f1;
    border-bottom:8px solid #f1f1f1;*/
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    

}
.feature-details-card:hover,
.product-details-card:hover{
   /* border-right: 8px solid #037ca4;
    border-bottom:8px solid #ec6b85;*/
    background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 3px, transparent 3px) 0% 0%/8px 8px no-repeat,
            radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 3px, transparent 3px) 100% 0%/8px 8px no-repeat,
            radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 3px, transparent 3px) 0% 100%/8px 8px no-repeat,
            radial-gradient(circle at 0 0, #ffffff 0, #ffffff 3px, transparent 3px) 100% 100%/8px 8px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat,
            linear-gradient(90deg, transparent 0%, #48abe0 100%);

box-sizing: border-box;
}


.product-details-card .img-section,
.feature-details-card .img-section{
    height:90px;
    width: 100%;

}

.feature-automated-report{
    background-color: #eef0f6;
    padding:50px 0px 50px 120px;
}
.feature-realtime{
    padding:100px 0px;
}
/*-------------------product page & feature page--------------------------*/
.industry-finacial-service{
    background-color: #eef0f6;
    padding: 150px 0px;

}
/*-----------------------about_us----------------------------------------*/

.work-together{
    padding-bottom:100px;

}
.about-us-card{
    height: 280px;
    width: 100%;
    padding: 20px 20px;
    background-color: #f5f1f2;
   /* border-right: 8px solid #f1f1f1;
    border-bottom:8px solid #f1f1f1;*/
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    

}
.about-us-card:hover{
    /* border-right: 8px solid #037ca4;
     border-bottom:8px solid #ec6b85;*/
         background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 3px, transparent 3px) 0% 0%/8px 8px no-repeat,
             radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 3px, transparent 3px) 100% 0%/8px 8px no-repeat,
             radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 3px, transparent 3px) 0% 100%/8px 8px no-repeat,
             radial-gradient(circle at 0 0, #ffffff 0, #ffffff 3px, transparent 3px) 100% 100%/8px 8px no-repeat,
             linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat,
             linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat,
             linear-gradient(90deg, transparent 0%, #48abe0 100%);
 
         box-sizing: border-box;
 }
/*-----------------------about_us--------------------------------------*/
/*-----------------------predirective dialer page---------------------*/

.predirective-details-card{
    height: 250px;
    width: 100%;
    padding:30px;
    border-radius: 8px;
    background-color:white;
  

}
.predirective-details-card:hover{
  
    background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 3px, transparent 3px) 0% 0%/8px 8px no-repeat,
            radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 3px, transparent 3px) 100% 0%/8px 8px no-repeat,
            radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 3px, transparent 3px) 0% 100%/8px 8px no-repeat,
            radial-gradient(circle at 0 0, #ffffff 0, #ffffff 3px, transparent 3px) 100% 100%/8px 8px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat,
            linear-gradient(90deg, transparent 0%, #48abe0 100%);

        box-sizing: border-box;
}


.ask-section{
    width: 100%;
    display: flex;
}
.ask-left{
    width: 50%;
}
.ask-right{
    width: 50%;
}

/*-----------------------predirective dialer page---------------------*/
/*-----------------------cloud phone----------------------------------*/

.cloud-phone-card
{
    height: 200px;
    width: 100%;
    padding:30px;
    border-radius: 8px;
    display: flex;
    background-color:#ffff;
 
   
}
.why-we-use-protalk-card{
    height: 230px;
    width: 100%;
    padding:40px 20px 0 20px;
    display: flex;
    background-color: white;
    border-radius:8px;

}


.cloud-phone-card:hover,
.why-we-use-protalk-card:hover{
  
    background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 3px, transparent 3px) 0% 0%/8px 8px no-repeat,
            radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 3px, transparent 3px) 100% 0%/8px 8px no-repeat,
            radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 3px, transparent 3px) 0% 100%/8px 8px no-repeat,
            radial-gradient(circle at 0 0, #ffffff 0, #ffffff 3px, transparent 3px) 100% 100%/8px 8px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat,
            linear-gradient(90deg, transparent 0%, #48abe0 100%);

}
/*-----------------------cloud phone---------------------*/
/*-----------------------call center solution---------------------*/

.callcenter-details-card{
    height:300px;
    width: 100%;
    padding:30px;
    border-radius: 8px;
    background-color:white;
   
    

}
.callcenter-details-card:hover{
   
    background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 3px, transparent 3px) 0% 0%/8px 8px no-repeat,
            radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 3px, transparent 3px) 100% 0%/8px 8px no-repeat,
            radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 3px, transparent 3px) 0% 100%/8px 8px no-repeat,
            radial-gradient(circle at 0 0, #ffffff 0, #ffffff 3px, transparent 3px) 100% 100%/8px 8px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat,
            linear-gradient(90deg, transparent 0%, #48abe0 100%);

        box-sizing: border-box;
}


/*-----------------------call center solution---------------------*/
/*-----------------------crm dialer intregration---------------------*/
.crm-integration-card{
    height:270px;
    width: 100%;
    padding:30px 10px 0px 30px;
    border-radius: 8px;
    background-color:white;
}
.crm-integration-card:hover{
   
    background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 3px, transparent 3px) 0% 0%/8px 8px no-repeat,
            radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 3px, transparent 3px) 100% 0%/8px 8px no-repeat,
            radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 3px, transparent 3px) 0% 100%/8px 8px no-repeat,
            radial-gradient(circle at 0 0, #ffffff 0, #ffffff 3px, transparent 3px) 100% 100%/8px 8px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat,
            linear-gradient(90deg, transparent 0%, #48abe0 100%);

        box-sizing: border-box;
}


/*-----------------------crm dialer intregration---------------------*/
/*-----------------------interactive voice response---------------------*/


/*-----------------------interactive voice response---------------------*/