@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body { margin: 0; padding: 0; font-family: "Poppins", sans-serif; overflow-x: hidden; color: #212121}
p, li {color: #4d4d4d; font-size: 15px; letter-spacing:.5px; line-height: 28px;font-weight: 400; margin: 0 0 12px 0;font-family: "Poppins", sans-serif;}
.main-table li {color: #4d4d4d; font-size: 15px; letter-spacing: .5px; line-height: 25px;margin: 0 0 10px 0;font-family: "Poppins", sans-serif;}
a { text-decoration: none !important; font-family: "Poppins", sans-serif;}
h1, h2, h3, h4, h5, h6 { font-family: "Poppins", sans-serif; color: #212121}

.main-table { text-align: left; padding: 5% 0;}

#widgetsControl_C, #widgetsControl{ height: auto !important;}
#zonediv1 .container-fluid { margin: 0; padding: 0;}

#MenuControl .nav-item { margin: 0}
#MenuControl .nav-item .nav-link {color: #fff;font-size: 16px;padding: 15px}
#MenuControl .nav-fill{ width:100%;}
#MenuControl .bg-light {background: #fff!important;height: 100%;padding: 0 2% 0 0;}

@media (min-width: 769px)  {
  #HeaderControl {position: absolute;left: 0;z-index: 9;text-align: center;width: 28%;}
  #MenuControl {position: absolute;right: 0;z-index: 8 !important;width: 72%;}
}

#HeaderControl.RadDock_Default .rdMiddle .rdCenter, #HeaderControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}
#MenuControl .bg-light { --bs-bg-opacity: 1; background-color: transparent !important; height: 100%;}
#MenuControl.RadDock_Default .rdMiddle .rdCenter, #MenuControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}
#zonediv #HeaderControl, #zonediv #MenuControl {position: relative;background: #5153ff; border-top: 1px solid #fff; top: 0; }
#zonediv #WidgetControl4 { margin: 0; padding: 0}
#zonediv #WidgetControl4 .top-header {background: #5153ff; position: relative; width: 100%; left: 0}
#HeaderControl, #MenuControl { height: 90px !important}

#zonediv #RadDockZone1.container{max-width: 100%; margin-top: 0 !important; padding: 0; overflow: hidden;}

#MenuControl, #MenuControl_C, #HeaderControl, #HeaderControl_C { height: 100px !important}

@media (min-width: 320px) and (max-width: 768px ){
  #MenuControl { height: 0 !important;}
  #MenuControl .bg-light { padding: 12% 0}
  #HeaderControl { position: absolute; z-index: 3;}
  #MenuControl .navbar-collapse { background: #5153ff !important}
  .navbar-toggler { margin-top: -30px; margin-right: 10px}
}

#OtherPageControl { margin: 0; padding: 0;}

.web-logo { padding: 15px}
.web-logo img { width: 140px}

.heading p { color: #8000e9; font-size: 18px; font-weight: 500; margin: 0 0 10px 0; padding: 0 0 0 20px; position: relative;}
.heading p::after { content: ''; position: absolute; width: 10px; height: 10px; background: #8000e9; border-radius: 50%; left: 0; top: 8px;}
.heading h2 { font-size: 32px; font-weight: 600; color: #5153ff; margin: 0 0 30px 0;}
.custom-btn {background: linear-gradient(90deg, #2667FF 20%, #6c19ef 100%);padding: 18px 30px;display: inline-block;color: #fff;border-radius: 30px;}
.custom-btn .link { height: 20px; overflow: hidden;}  
.custom-btn .link .read-more span {display: block;transition: all .4s ease-in-out;line-height: 1.3;font-size: 15px;letter-spacing: .5px;color: #fff}
.custom-btn .link:hover .read-more span { transform: translate(0, -20px); color: #212121; color: #fff}
.custom-btn .link .link-icon img {display: block;margin: 1px 0 0 3px;transition: all .5s ease-in-out;transform: translate(0, -15px);filter: invert(1);}
.custom-btn .link:hover .link-icon img { transform: translate(0, 0);}

.banner-section { background: linear-gradient(#2667FF 20%, #6c19ef 100%); position: relative; overflow: hidden;}
.banner-section::after {content: '';position: absolute;width: 680px;height: 680px;border-radius: 50%;border: 120px solid #c2df93;opacity: .12;top: -27%;left: -18%;}
.banner-section .left-text {padding: 12% 7% 7% 7%;position: relative;z-index: 2;}
.banner-section .left-text h1 { color: #fff; font-size: 52px; letter-spacing: .8px; margin: 0 0 18px 0;}
.banner-section .left-text p {color: #ffffff;font-size: 17px;margin: 0 0 20px 0;line-height: 1.7;}

/*--------------------------------------------------------------
# Banner_btm
--------------------------------------------------------------*/
.bnr_btm {position: relative; z-index: 1; padding: 5% 0 0 0}
.bnr_btm::after {position: absolute;left: 10%;right: 10%;bottom: 22%;border-bottom: 1px solid #e7e7e7;content: "";z-index: -1}
.bnr_btm_item .icon {height: 120px;width: 120px;display: inline-block;text-align: center;line-height: 120px;color: #fff;border-radius: 50%;font-size: 48px;margin-bottom: 30px;position: relative;padding: 27px;z-index: 1;transition: all .35s ease-in-out}
.bnr_btm_item .icon i {transition: all .15s ease-in-out;display: inline-block;padding: 35px;}
.bnr_btm_item .icon:before {background: linear-gradient(90deg, #2667FF 20%, #6c19ef 100%);transition: all .35s ease-in-out;position: absolute;left: 0;top: 0;content: "";height: 100%;width: 100%;border-radius: 50%;z-index: -1}
.bnr_btm_item:nth-child(2n) .icon:before {opacity: 0}
.bnr_btm_item:nth-child(2n) .icon {color: #2667FF;border: 2px solid #e7e7e7}
.bnr_btm_item:nth-child(2n):hover .icon {color: #2667FF}
.bnr_btm_item h4{font-size: 21px;color: #181818;margin: 0;font-weight: 600;}
.bnr_btm_item span {display: inline-block;margin-bottom: 15px;font-weight: 900;font-size: 60px;line-height: 1;margin-top: 40px;color: transparent;-webkit-text-stroke: 1px #dbdbdb;background: #fff;padding: 0 15px;position: relative}
.bnr_btm_item .icon:after {position: absolute;left: 50%;top: 50%;content: "";height: 16px;width: 16px;background: #fff;z-index: -1;border-radius: 50%;animation: spinnerRotate 10s linear infinite;margin-left: -8px;margin-top: -8px;border: 2px solid #2667FF;transition: all .35s ease-in-out}
.bnr_btm_item:nth-child(2n) .icon:after {opacity: 0}
.bnr_btm_item:nth-child(2n) .icon:hover:after {opacity: 1}
.bnr_btm_item span {display: inline-block;font-weight: 900;font-size: 60px;line-height: 1;margin-top: 0;color: transparent;-webkit-text-stroke: 1px #dbdbdb;background: #fff;padding: 0 0 0 15px;letter-spacing: .8px;position: relative;}


@keyframes spinnerRotate {
    0% {
        -webkit-transform: rotate(0deg) translateX(73px);
        transform: rotate(0) translate(60px);
    }

    to {
        -webkit-transform: rotate(360deg) translateX(73px);
        transform: rotate(360deg) translate(60px);
    }
}
@keyframes spinnerRotateone {
    0% {
        -webkit-transform: rotate(0deg) translateY(73px);
        transform: rotate(0) translateY(73px)
    }

    to {
        -webkit-transform: rotate(360deg) translateY(73px);
        transform: rotate(360deg) translateY(73px)
    }
}

.about-section {padding: 6% 0;background: #f1f0fe;}
.about-section .about-img { position: relative;}
.about-section .about-img .text { position: absolute; background: #fff; padding: 20px; border-radius: 10px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; top: 18%; left: -6%;}
.about-section .about-img .text h5 { color: #5153ff; font-size: 30px; font-weight: 600; margin: 0 0 5px 0;}
.about-section .about-img .text p { color: #8000e9; font-size: 15px; line-height: 1.3; margin: 0; font-weight: 500; letter-spacing: .8px;}
.about-section .about-img img { border-radius: 10px;}

.business-idea { padding: 6% 0;}
.business-idea .business-card { margin: 20px 0 0 0;}
.business-idea .business-card .pic { border-radius: 10px; overflow: hidden; margin: 0 0 15px 0;}
.business-idea .business-card .pic img { transition: all .4s ease-in-out; width: 100%; height: 300px; object-fit: cover;}
.business-idea .business-card .pic:hover img { transform: scale(1.1);}
.business-idea .business-card h3 { font-size: 22px; margin: 0;}

.calculators-section { padding: 5% 0; background: #f1f0fe;}
.calculators-section .calculator-card {padding: 60px 20px;margin: 18px 0;border: 1px solid #bfc8ccd2;border-radius: 15px;background: #fff;transition: all .4s ease-in-out;}
.calculators-section .calculator-card:hover { box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-color: #fff;}
.calculators-section .calculator-card .icon {background-image: linear-gradient(45deg, #2667ff36, #00000008);margin: 0 0 30px 0;display: inline-block;padding: 30px;border-radius: 10px}
.calculators-section .calculator-card .icon img {width: 90px; transition: all .3s ease-in-out;}
.calculators-section .calculator-card:hover img { transform: translate(0, -7px);}
.calculators-section .calculator-card h4 {color: #101010;font-size: 21px;margin: 0;}

.contact-section { padding: 6% 0;}
.contact-section .left-pic img { border-radius: 15px;}
.contact-section .contact-form .form-control { margin: 0 0 15px 0; padding: 13px;}
.contact-section input[type="button"] {background: linear-gradient(90deg, #2667FF 20%, #6c19ef 100%);color: #212121;border: 0;padding: 15px 34px;border-radius: 30px;color: #fff;}

.call-to-action {background: #5153ff;padding:60px 50px;border-radius: 10px;margin: 0 0 -6% 0;position: relative;z-index: 2;overflow: hidden}
.call-to-action::after {content: '';position: absolute;width: 220px;height: 220px;border-radius: 50%;border: 40px solid #fff;opacity: .16;top: -54%;left: -6%;}
/* .call-to-action::before {content: '';position: absolute;width: 260px;height: 260px;border-radius: 50%;border: 30px solid #fff;opacity: .1; bottom: -50%; right: -10%;} */
.call-to-action h4 { color: #fff; font-size: 27px; margin: 0; font-weight: 600; letter-spacing: .5px; position: relative; z-index: 3;}
.call-to-action .icon {display: block;width: 60px;height: 60px;margin: 0 10px 0 0;border-radius: 50%;background: #fff;text-align: center;color: #8000e9;font-size: 22px;padding: 18px 0;line-height: 2.7 !important;}
.call-to-action .text p { margin: 0; font-size: 18px; color: #fff; font-weight: 500;}
.call-to-action .text a { color: #eeeeee; font-size: 14px;}

footer {padding: 8% 0 0 0;background: #8000e9;}
footer h4 {color: #ffffff;font-size: 18px;text-transform: uppercase;font-weight: 500;margin: 0 0 12px 0;letter-spacing: .7px;}
footer p, footer p a {color: #efefef;font-size: 14px;margin: 0 0 8px 0;}
footer p a:hover {color: #ffffff;}
footer .footer-bottom {margin: 4% 0 0 0;border-top: 1px solid rgba(204, 204, 204, .4);padding: 15px 0;}
footer .footer-bottom p { margin: 0;}

.inner-banner {background: #5153ff;padding: 10% 0 8% 0;} 
.inner-banner .page-title h2 { color: #fff; font-size: 45px; font-weight: 600; margin: 0 0 5px 0;}
.inner-banner .page-title p, .inner-banner .page-title p a { color: #e2e2e2; margin: 0;}
.inner-banner p {color: #ffffff;margin: 0;}

.contact-page { background: #ecf8f8;}
.contact-page .contact-info { margin: 30px 0;}
.contact-page .contact-info .icon { width: 13%}
.contact-page .contact-info .icon i {display: inline-block; width: 50px; height: 50px; background: #5153ff; border-radius: 50%; text-align: center; color: #fff; font-size: 20px; line-height: 2.5;}
.contact-page .contact-info .text { width: 80%;}
.contact-page .contact-info h4 { color: #212121; font-size: 19px; margin: 0 0 3px 0; font-weight: 500;}
.contact-page .contact-info p, .contact-page .contact-info p a { color: #4d4d4d; margin: 0;}
.contact-page .contact-form { background-color: #fff; padding: 40px; border-radius: 20px;}
.contact-page .contact-form h3 { color: #5153ff; font-size: 28px; font-weight: 550; margin: 0 0 18px 0;}
.contact-page .contact-form .form-control { padding: 15px; margin: 0 0 25px 0;}
.contact-page .contact-form input[type="button"] { background: #8000e9; color: #ffffff; border: 0; padding: 14px 34px; border-radius: 30px;}

@media (min-width: 320px) and ( max-width: 768px) { 
  .main-table { padding: 6% 3%;}

  .web-logo { padding: 10px;}
  .web-logo img { width: 100px}

  .heading p { font-size: 16px; padding: 0 0 0 15px; margin: 0 0 5px 0;}
  .heading p::after { width: 8px; height: 8px;}
  .heading h2 { font-size: 25px; margin: 0 0 15px 0;}
  .custom-btn { padding: 12px 24px;}
  .custom-btn .link .read-more span { font-size: 14px;}

  .banner-section .left-text {padding: 25% 7% 7% 7%;}
  .banner-section .left-text h1 { font-size: 30px; margin: 0 0 12px 0;}
  .banner-section .left-text p { font-size: 15px;}

  .about-section { padding: 8% 0;}
  .about-section .about-img .text { padding: 12px; top: 70%; left: -2%;}
  .about-section .about-img .text h5 { font-size: 21px;}
  .about-section .about-img .text p { font-size: 13px;}

  .business-idea { padding: 8% 0;}
  .business-idea .business-card h3 { font-size: 20px; margin: 0;}

  .contact-section { padding: 0 0 8% 0;}
  .contact-section .contact-form .form-control {font-size: 14px;}
  .contact-section input[type="button"] { padding: 14px 30px; font-size: 14px;}

  .call-to-action { padding: 30px 20px;}
  .call-to-action::after { opacity: .1;}
  .call-to-action h4 { font-size: 20px; margin: 0 0 20px 0;}
  .call-to-action .icon { width: 40px; height: 40px; margin: 0 10px 0 0; font-size: 17px;}

  footer {padding: 12% 0 0 0;}
  footer h4 { font-size: 16px; margin: 15px 0 10px 0;}
  footer p, footer p a {color: #c7c7c7;font-size: 14px; margin: 0 0 5px 0;}

  .inner-banner { background: #5153ff; padding: 25% 0 8% 0;} 
  .inner-banner .page-title h2 { color: #fff; font-size: 27px;}
  .inner-banner .page-title p, .inner-banner .page-title p a { margin: 0 0 20px 0; font-size: 13px;}

  .contact-page { background: #ecf8f8;}
  .contact-page .contact-info { margin: 30px 0;}
  .contact-page .contact-info .icon i { width: 40px; height: 40px; font-size: 17px; line-height: 2.3;}
  .contact-page .contact-info h4 { font-size: 17px;}
  .contact-page .contact-form { padding: 30px;}
  .contact-page .contact-form h3 { font-size: 20px;}
  .contact-page .contact-form .form-control { padding: 14px; margin: 0 0 15px 0; font-size: 14px;}
  .contact-page .contact-form input[type="button"] { padding: 12px 30px; font-size: 14px;}

}