@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');
:root{
    --green: #0ca72d;
    --green2: #f6f6f6;
    --white: #ffffff;
    --black: #242423;
    --violet: #6d02c0;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", serif;
    scroll-behavior: smooth;
}

/********* Back To Top Button Start *********/

#top{
    display: inline-block;
    background-color: var(--violet);
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 50%;
    position: fixed;
    bottom: 20px;
    right: 20px;
    transition: background-color .3s, 
      opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    text-decoration: none;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.6);
  }
  #top::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2.4em;
    line-height: 50px;
    color: #fff;
  }
  #top:hover {
    cursor: pointer;
    background-color: var(--black);
  }
  #top:active {
    background-color: var(--black);
  }
  #top.show {
    opacity: 1;
    visibility: visible;
  }

/********* Back To Top Button End *********/

/********* Header Section Start *********/

.navbar .navbar-brand img{
    width: 120px;
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(1%) hue-rotate(330deg) brightness(94%) contrast(100%);
}
.navbar a{
    color: var(--black);
    text-decoration: none;
    font-weight: 600;
}
.navbar ul{
    list-style: none;
    display: flex;
}
.navbar ul li a{
    padding: 10px 20px;
    transition: .3s ease-in-out;
}
.navbar ul li a:hover{
    color: var(--violet);
}
.navbar ul li{
    margin: 0 5px;
}
.logo-white{
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(1%) hue-rotate(330deg) brightness(94%) contrast(100%);
} 
.menu-color ul li a{
    color: var(--black) !important;
}
.menu-color ul li a:hover{
    color: var(--green) !important;
}
.navbar{
    position: fixed;
    /* background-color: rgba(0, 0, 0, 0.4); */
    /* background-color: rgba(255, 255, 255, 0.6); */
    z-index: 99999999;
    /* transition: .4s ease-in-out; */
}
.header-shadow{
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6);
}
.navbar .sign{
    /* background-color: var(--green); */
    background-color: #6d02c0;
    padding: 10px 30px !important;
    color: var(--white);
    font-weight: 600;
    border-radius: 50px;
    transition: .3s ease-in-out;
}
.navbar .sign:hover{
    background-color: var(--black);
    color: #fff;
}
.offcanvas {
    width: 220px !important; /* Change to desired width */
}
.offcanvas-backdrop.show{
    opacity: .7;
}
.custom-toggler {
    border: none;
    background: transparent;
    padding: 10px;
}
.custom-toggler:focus{
    box-shadow: none;
}

.hamburger {
    width: 30px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.hamburger span {
    width: 30px;
    height: 4px;
    background: var(--violet);
    border-radius: 2px;
    transition: all 0.4s ease-in-out;
}

/* Animation */
.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(2) {
    opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}
.custom-close-btn {
    background: red; /* Change color */
    color: white; /* Change text color */
    font-size: 20px; /* Adjust size */
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}

.custom-close-btn:hover {
    background: darkred;
}

/********* Header Section End *********/

/********* Banner Section Start *********/

.asset-1 img{
    width: 80px;
}
.asset-1{
    position: absolute;
    bottom: 400px;
    left: 120px;
    animation: link 45s infinite ease-in-out;
    opacity: 0.7;
}
.asset-2 img{
    width: 60px;
}
.asset-2{
    position: absolute;
    top: 150px;
    left: 150px;
    animation: profile 10s infinite ease-in-out;
    opacity: 0.7;
}
.asset-3 img{
    width: 40px;
}
.asset-3{
    position: absolute;
    bottom: 100px;
    right: 300px;
    animation: scale 5s infinite ease-in-out;
    opacity: 1;
}
.asset-4 img{
    width: 25px;
}
.asset-4{
    position: absolute;
    top: 200px;
    right: 140px;
    animation: profile-angle 12s infinite ease-in-out;
    opacity: 0.7;
}
.asset-5 img{
    width: 80px;
    transform: rotate(-90deg);
}
.asset-5{
    position: absolute;
    bottom: 430px;
    right: 260px;
    animation: profile-up 10s infinite ease-in-out;
    opacity: 0.7;
}
.rocket img{
    width: 70px;
    transform: rotate(15deg);
}
.rocket{
    position: absolute;
    top: 250px;
    right: 780px;
    animation: rocket infinite;
    animation-direction: alternate;
    animation-duration: 250ms;
    opacity: 0.9;
}
.share img{
    width: 150px;
}
.share{
    position: absolute;
    bottom: 170px;
    right: 180px;
    animation: share 5s infinite ease-in-out;
    opacity: 0.9;
}
.arrows img{
    width: 240px;
    transform: rotate(40deg);
}
.arrows{
    position: absolute;
    top: 450px;
    right: 605px;
    opacity: .4;
}
.line img{
    width: 681px;
}
.line{
    position: absolute;
    bottom: 115px;
    right: 780px;
    opacity: 1;
}
.profile{
    position: absolute;
    top: 180px;
    right: 270px;
    animation: profile 10s infinite ease-in-out;
}
.link{
    position: absolute;
    bottom: 180px;
    right: 270px;
    animation: link 30s linear infinite both;
}
.link img{
    width: 170px;
}
.profile img{
    width: 120px;
}
@keyframes profile {
    0% { transform: translateX(0); }
    50% { transform: translateX(50px); }
    100% { transform: translateX(0); }
}
@keyframes profile-up {
    0% { transform: translateY(0); }
    50% { transform: translateY(50px); }
    100% { transform: translateY(0); }
}
@keyframes profile-angle {
    0% {  transform: translate(0, 0); }
    50% {  transform: translate(30px, 70px); }
    100% {  transform: translate(0, 0); }
}
@keyframes scale {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
@keyframes link {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}
@keyframes rocket {
    100% {transform: translateY(0px);}
   0% {transform: translateY(2px);}
}
@keyframes share {
    0% { transform: rotate(0deg);}
    50% { transform: rotate(30deg);}
    100% { transform: rotate(0deg);}
}
#banner{
    background-image: url(./img/banner-bg-2.png);
    background-size: cover;
    height: 1020px;
    background-repeat: no-repeat;
    background-position: bottom;
}
#banner form input{
    border-radius: 50px;
    padding: 15px;
    /* border: 2px solid var(--green); */
    border: 2px solid #6d02c0;
}
#banner .input-group-text{
    border-radius: 50px 0 0 50px;
    /* border: 2px solid var(--green); */
    border: 2px solid #6d02c0;
    border-right: none;
    background-color: #fff;
    /* color: #8920a0; */
    /* color: var(--green); */
    color: #6d02c0;
    font-weight: 700;
}
#banner form input[type=text]{
    border-radius:0 50px 50px 0;
    border-left: none;
    padding-left: 0px;
}
#banner form input[type=submit]{
    border: none;
    padding: 17px;
}
#banner .underline{
    background-color: var(--green);
    width: 380px;
    height: 10px;
    background-size: cover;
    margin-top: -20px;
    border-radius: 20px;
    transform: rotate(-2deg);
}
#banner .banner-img{
    box-shadow: none;
}
input:focus{
    outline: none !important;
    box-shadow: none !important;
  }
#banner .top-form{
    position: relative;
}
#banner .lab{
    position: absolute;
    top: -10px;
    left: 45px;
    z-index: 10;
    font-size: 12px;
    background-color: var(--white);
    padding: 0 8px;
    font-weight: 600;
}
#banner ul{
    list-style: none;
    display: flex;
}
#banner ul li{
    padding: 10px;
}
#banner ul li a{
    color: #000;
    font-size: 30px;
}
#banner ul li a:hover{
    color: #6d02c0;
}
.social{
    position: absolute;
    right: 150px;
    bottom: 90px;
    z-index: 99999;
}
.submit input{
    background-color: #6d02c0;
    color: #ffffff;
    transition: .3s;
}
.submit input:hover{
    background-color: var(--black);
    border-color: var(--black) !important;
}
#banner .banner-img{
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6);
}
#banner h1{
    font-weight: 600;
    font-size: 68px;
    margin-bottom: 20px;
    line-height: 80px;
}
#banner h1 b{font-weight: 600; font-style:normal !important;}
#banner h1 b i{font-style:normal !important;}
#banner .ban{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    border-radius: 30px;
}
#banner h6{
    color: #585858;
    font-size: 16px;
    line-height: 27px;
}
#banner .ban-text{
    padding: 250px 0 !important;
    z-index: 100;
}
#banner .ban-text .rank{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 25px;
    color: var(--white);
    font-weight: 500;
    border-radius: 50px;
    background-image: linear-gradient(to right, #a238bb, #e64671);
    background-size: cover;
    margin-right: 20px;
    font-size: 16px;
}
#banner .ban-text .rank-text{
    font-weight: 500;
    font-size: 17px;
}
#banner .ban-text h1 span{
    color: #fc346a;
}
#banner .banner-sub-1 img{
    width: 160px;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.3));
}
#banner .banner-sub-1{
    position: absolute;
    top: 150px;
    right: 360px;
    z-index: 9999;
}
#banner .banner-sub-2 img{
    width: 120px;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.3));
}
#banner .banner-sub-2{
    position: absolute;
    top: 210px;
    right: 730px;
    z-index: 9999;
}
#banner .banner-img img{
    width: 700px;
}
#banner .banner-sub-3 img{
    width: 100px;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.3));
}
#banner .banner-sub-3{
    position: absolute;
    bottom: 200px;
    right: 730px;
    z-index: 9999;
}
#banner .banner-sub-4 img{
    width: 180px;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.3));
}
#banner .banner-sub-4{
    position: absolute;
    bottom: 250px;
    right: 340px;
    z-index: 9999;
}

.pos-fixed{
    background-color: var(--white) !important;
}

/********* Banner Section End *********/

/********* About Section Start *********/

#about .about-inner{
    background-color: var(--white);
    border-radius: 30px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    height: 100%;
}
#about h1{
    font-weight: 700;
}
#about h2{
    font-weight: 600;
    text-transform: capitalize;
	font-size:28px;
}
#about h5{
    font-weight: 400;
    line-height: 25px;
    color: #585858;
    font-size: 16px;
}

/********* Blocks Section Start *********/

#block1 h1{
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 25px;
}
#block1 h4{
    font-size: 17px;
    line-height: 32px;
    font-weight: 400;
    margin-bottom: 30px;
}
#block1 ul li i{
    margin-top: 2px;
    font-size: 25px; margin-right: 10px;
    color: var(--green);
}
#block1 a{
    font-size: 19px;
    font-weight: 700;
    color: var(--green);
    text-decoration: none;
    transition: .3s ease-in-out;
}
#block1 a:hover{
    color: var(--black);
}
.block{
    background-color: var(--green2);
}
.block-icon{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--violet);
    padding: 8px;
    border-radius: 50%;
    margin-right:8px;
	position:relative;
	top:-6px;
}
.block-icon svg{
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(73deg) brightness(103%) contrast(103%);
	width:30px;
}
.block-icon i{color:#FFF;}
#block1 h5{
    margin-bottom: 0;
    font-weight: 600;
    font-size: 16px;
	cursor:pointer;
}
.cuopclose{position:relative; width:100%; padding-top:20px; padding-bottom: 10px; border-top:1px solid #ddd;}
.cuopclose:last-child{border-bottom:1px solid #ddd;}
.textcontnt{font-weight:300; padding-bottom:15px;}
.cuopclose i{position:absolute;top:20px;right:5px; cursor:pointer;}
.blockclas{background-color:#f0f8fa !important;}
.blockclas h4{margin-bottom:20px;}
.blockclas h1{margin-bottom:15px !important;}

.nncuopclose .block-icon{position:relative; top:1px;}
#block1 .block-btn{
    background-color: var(--violet);
    color: var(--white);
    font-weight: 500;
    padding: 12px 22px;
    font-size: 14px;
    border-radius: 50px;
}
#block1 .block-btn i{
    color: var(--white);
}
#block1 .block-btn:hover{
    background-color: var(--black);
    color: var(--white);
}
#block1 p{
    font-size: 17px;
    font-weight: 600;
    color: var(--violet);
    margin-bottom: 5px;
}

/********* Blocks Section End *********/

/********* Pro Section Start *********/

.profes{
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--white);
}
#pro .slick-prev,
#pro .slick-next{
    bottom: 0;
    font-size: 30px;
    color: var(--black);
}
.slick-prev:before{
    content: '';
}
.slick-next:before{
    content: '';
}
.slick-dots li button:before{
    font-size: 11px;
}
.slick-active button:before{
    color: var(--violet) !important;
}
.slick-dots li{
    margin: 0;
}
.slick-prev:before, .slick-next:before{
    pointer-events: none !important; 
}
.slick-prev,
.slick-next {
  position: absolute;
  bottom: -40px;
  top: auto;
  transform: none;
}

.slick-prev {
  left: 80px;
}
.slick-next {
  right: 80px;
}
#pro .pro-title h4{
    font-weight: 300;
}
#pro{padding:80px 0;}
#pro h1{
    font-weight: 700;
	font-size:30px;
	margin-bottom:35px;
}
#pro .slick-dots{bottom:-55px;}
.profes img{
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/********* Pro Section End *********/

/********* Features Section Start *********/

#features{
    background-color: var(--green2);
}
#features .f-icon i{
    font-size: 32px;
    color: var(--violet);
    padding: 20px 0;
    transition: .6s ease-in-out;
}
#features h1{
    font-weight: 700;
}

#features h1 span{display:inline-block; position:relative; transform:rotate(2.02deg);background:#6d02c0; color:#FFF; border-radius:25px; border:5px solid #FFF; box-shadow: 0 3px 25px rgba(0, 0, 0, 0.3);
    font-size: 35px;
    padding: 8px 20px;}



#features h4{
    font-weight: 700;
    font-size: 20px;
    transition: .3s ease-in-out;
}
#features h6{
    color: #585858;
    transition: .3s ease-in-out;
    font-size: 16px;
}
#features .f-inner{
    border-radius: 20px;
    height: 100% !important;
    transition: .3s ease-in-out;
}
#features .f-inner:hover{
    background-color: var(--violet);
}
#features .f-inner:hover h4,
#features .f-inner:hover h6,
#features .f-inner:hover i{
    color: #FFF;
}
#features .f-inner:hover i{
    transform: rotate3d(0, 1, 0, 360deg);
}
#features .f-marg{
    margin-left: -80px;
    padding-right: 80px;
}
#features .f-marg2{
    margin-right: -80px;
    padding-left: 80px;
}
#features .f-top h6{
    color: var(--violet);
    font-weight: 600;
    font-size: 18px;
}

/********* Features Section End *********/

/********* Plans Section Start *********/

#plans .plan{
    position: relative;
    padding: 10px;
    border-radius: 30px;
    background-color: #fff;
    border: 1px solid #ddd;
    transition: .3s ease-in-out;
}
#plans .popular{
    position: absolute;
    top: -18px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
#plans .popular p{
    padding: 10px 20px;
    border-radius: 10px;
    background-color: #ffde21;
    color: var(--violet);
    font-weight: 700;
    text-transform: uppercase;
}
#plans .p-active{
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
}
#plans .plan:hover{
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
}
#plans .plan .plan-text{
    border-radius: 30px;
    background-color: #ebebeb;
}
#plans .p-active .plan-text{
    background-color: var(--violet);
}
#plans{
    background-color: var(--green2);
}
#plans .nav-tabs{
    justify-content: center;
}
#plans h1{
    font-weight: 700;
}
#plans .accordion-button:not(.collapsed)::after{
    display: none;
}
#plans .accordion-button{
    justify-content: center;
    pointer-events: none;
    background-color: var(--white);
}
#plans h2{
    font-size: 35px;
    font-weight: 700;
    color: var(--violet);
}
#plans .p-active h2{
    color: #fff;
}
#plans h4{
    font-size: 25px;
    font-weight: 700;
    color: #000;
}
#plans .p-active h4{
    color: #fff;
}
#plans h4 span{
    font-size: 17px;
    color: #585858;
    text-decoration: line-through var(--violet);
}
#plans .p-active h4 span{
    color: #d4d4d4;
    text-decoration: line-through #fff;
} 
#plans h6{
    color: #585858;
    font-weight: 500;
}
#plans .p-active h6{
    color: #fff;
}
#plans ul{
    list-style: none;
    text-align: center;
    padding: 20px 0 20px 0;
}
#plans ul li{
    margin: 10px 0;
    font-weight: 600;
}
#plans ul li i{
    color: var(--violet);
    margin-right: 5px;
}
#plans .get-started{
    padding: 0 0 0 0;
    text-align: center;
    width: 100%;
    margin-bottom: 30px;
}
#plans .get-started a{
    background-color: var(--violet);
    padding: 15px 25px;
    border-radius: 50px;
    color: var(--white);
    text-decoration: none;
    transition: .3s ease-in-out;
}
#plans .get-started a:hover{
    background-color: var(--black);
}
#plans .nav-link{
    color: var(--black);
    padding: 12px 40px;
    font-weight: 400;
}
#plans .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    font-weight: 700 !important;
}

/********* Plans Section End *********/

/********* Faq Section Start *********/

#faq h1{
    font-weight: 700;
	font-size:30px;
}
#faq .accordion-button{
    background-color: #FFF;
    color: var(--black);
    font-weight:600;
    font-size:16px;
	padding:25px 0 20px;
	background:#FFF;
}
#faq .accordion-button:focus{outline:none !important;}
#faq .accordion-body{padding:20px 0 20px; font-weight:300;}
#faq  .accordion-item{border:none; border-top:1px solid #ddd;}
#faq  .accordion-item:last-child{border-bottom:1px solid #ddd;}
/********* Faq Section End *********/

/********* Gallery Section Start *********/

#gallery .no{
    color: var(--violet);
}
#gallery .g-head{
    font-weight:500;
    font-size: 20px;
    color: var(--black);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    border-bottom: 5px solid var(--violet);
}
#myTab {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -moz-overflow-scrolling: touch;
}

#myTab::-webkit-scrollbar {
    display: none; /* Hide scrollbar on WebKit browsers */
}
#gallery .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
}
#gallery img{
    border-radius: 30px;
}

/********* Gallery Section End *********/

/********* Subscribe Section Start *********/

#foot{
    background-color: var(--green2);
}
#foot h1{
    font-weight: 700;
    margin-bottom: 20px;
}
#foot h5{
    margin-bottom: 30px;
}
#foot input{
    padding: 15px;
    border-radius: 50px;
}

/********* Subscribe Section End *********/

/********* Footer Section Start *********/

#footer{
    background-color: var(--violet);
}
#footer h5{
    font-weight: 700;
    text-transform: uppercase;
    color: var(--white);
}
#footer ul{
    list-style: none;
}
#footer ul li{
    margin: 5px 0;
}
#footer ul li a{
    margin: 5px 0;
    color: #e9e9e9;
    text-decoration: none;
}
#footer ul li a:hover{
    color: var(--white);
    text-decoration: underline;
}
#footer .f-icon i{
    margin: 0 5px;
    font-size: 25px;
    color: #e9e9e9;
}
#footer .copy{
    color: var(--white);
}

.logoh img{width:120px;filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(1%) hue-rotate(330deg) brightness(94%) contrast(100%);}

.whiisfor p{font-size:17px;font-weight:600;color:#6d02c0;}
.whiisfor h1{font-size:48px;font-weight:700;margin-bottom: 25px;}
.whiisfor h4{font-size:17px;font-weight:400;}
.whiisfor .f-inner h5{font-weight:700;font-size:20px;}
.whiisfor h6{color: #585858;transition: .3s ease-in-out;font-size: 16px;}
.whiisfor .f-icon i{font-size:32px; color:#6d02c0;}


.whiisbg {padding:80px 0 0;}
.whiisbg [class^="col-"]{margin-bottom:35px;}
.whiisbg [class^="col-"] p{font-weight:300;}
.whiisbg [class^="col-"] .firstcoltext span{font-size:17px;font-weight:600;color: var(--violet);margin-bottom:5px;}
.whiisbg [class^="col-"] .firstcoltext h3{font-size:30px; font-weight:700;}
.whiisbg [class^="col-"] .innerwhhsc{box-shadow:0 3px 15px rgba(0,0,0,0.15); padding:35px; border-radius:15px; position:relative; top:0; transition:0.5s all;}
.whiisbg [class^="col-"] .innerwhhsc:hover{top:-10px;}
.whiisbg [class^="col-"] .innerwhhsc i{width:50px; height:50px; line-height:50px; text-align:center; background:var(--violet); color:#FFF; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,0.25); opacity:0.8;}
.whiisbg [class^="col-"] .innerwhhsc h5{margin-top:20px; margin-bottom:10px;font-weight:500;}


.faqayra{}

.sharearea{padding:80px 0;  position:relative;}
.sharearea:before{content:''; position:absolute; width:100%; height:100%; right:0; top:0;background:url('img/connect.svg') no-repeat; background-position:right center; background-size:20%;}
.sharearea p{font-size:17px;font-weight:600;color:var(--violet);margin-bottom:15px;}
.sharearea h3{font-size:30px;font-weight:700;margin-bottom:10px;}
.sharearea h5{font-size:17px;line-height:32px;font-weight:400;margin-bottom:30px;}
.sharearea [class^="col-"]{margin-top:20px;}
.sharearea [class^="col-"] div i{font-size:35px; margin-bottom:15px;color:var(--violet);}
.sharearea [class^="col-"] div h5{margin-bottom:0;font-weight:600;font-size:16px;}


.nextlevelfeature{padding:80px 0;}
.nextlevelfeature span{font-size:17px;font-weight:600;color:var(--violet);margin-bottom:15px;}
.nextlevelfeature h3{font-size:30px;font-weight:700;margin-bottom:30px;}
.nextlevelfeature [class^="col-"] .innercol{background:#f4f4f4; border-radius:20px; padding:45px 45px 45px;height:100% !important;} 
.nextlevelfeature [class^="col-"] .innercol h5{font-weight:600;}
.nextlevelfeature [class^="col-"] .innercol .owl-carousel .owl-item img{width:85%; display:block; margin:0 auto;}
.nextlevelfeature [class^="col-"] .innercol .owl-theme .owl-nav.disabled+.owl-dots{margin-top:0px;}

.indexfourcol{padding:80px 0 20px;}
.indexfourcol [class^="col-"] div img{display:block; margin-bottom:15px;}
.indexfourcol [class^="col-"] div h5{font-weight:500; margin-bottom:15px;}
.indexfourcol [class^="col-"] div p{font-weight:400; font-size:15px;}

#gallery .container{background:#d4c2ff; border-radius:20px; padding:35px;}
#gallery .nav-tabs .nav-link.active{background-color:transparent; border-top:0; border-left:0; border-right:0;}



.footupos {background-color:#f6f3f8 !important;}
.footertop h2{font-weight: 700; margin-bottom: 25px;}
.footertop p{}
.footertop img{padding: 35px 25px;border-radius: 50px;}
.footertop .buttonarea{display:flex; margin-top:25px;}
.footertop .buttonarea a{display:block;margin-right:15px;padding:10px 20px;font-weight: 600; border-radius: 5px; color: #6d02c0;} 
.footertop .buttonarea a:first-child{ background:#6d02c0;text-decoration: none;color:#FFF;}
.footertop .buttonarea a:first-child:hover{background:#000;}  
.footertop .buttonarea a:last-child:hover{text-decoration:none;}  


/********* Footer Section End *********/

/********* Responsive Section Start *********/

@media (max-width: 1850px){
    #banner .banner-sub-1{
        right: 300px;
    }
    #banner .banner-sub-2{
        right: 670px;
    }
    #banner .banner-sub-3{
        right: 690px;
    }
    #banner .banner-sub-4{
        right: 290px;
    }
}
@media (max-width: 1800px){
    #banner .banner-sub-1{
        right: 300px;
    }
    #banner .banner-sub-2{
        right: 650px;
    }
    #banner .banner-sub-3{
        right: 670px;
    }
    #banner .banner-sub-4{
        right: 270px;
    }
}
@media (max-width: 1750px){
    #banner .banner-sub-1{
        right: 270px;
    }
    #banner .banner-sub-2{
        right: 650px;
    }
    #banner .banner-sub-3{
        right: 670px;
    }
    #banner .banner-sub-4{
        right: 270px;
    }
}
@media (max-width: 1700px){
    #banner .banner-sub-1{
        right: 250px;
    }
    #banner .banner-sub-2{
        right: 620px;
    }
    #banner .banner-sub-3{
        right: 620px;
    }
    #banner .banner-sub-4{
        right: 230px;
    }
}
@media (max-width: 1650px){
    #banner .banner-sub-1{
        right: 220px;
    }
    #banner .banner-sub-2{
        right: 570px;
    }
    #banner .banner-sub-3{
        right: 590px;
    }
    #banner .banner-sub-4{
        right: 200px;
    }
}
@media (max-width: 1600px){
    #banner .banner-sub-1{
        right: 200px;
    }
    #banner .banner-sub-2{
        right: 580px;
    }
    #banner .banner-sub-3{
        right: 590px;
    }
    #banner .banner-sub-4{
        right: 180px;
    }
}
@media (max-width: 1550px){
    #banner .banner-sub-1{
        right: 170px;
    }
    #banner .banner-sub-2{
        right: 540px;
    }
    #banner .banner-sub-3{
        right: 550px;
    }
    #banner .banner-sub-4{
        right: 150px;
    }
}
@media (max-width: 1450px){
    #banner .banner-sub-1{
        right: 130px;
    }
    #banner .banner-sub-2{
        right: 500px;
    }
    #banner .banner-sub-3{
        right: 500px;
    }
    #banner .banner-sub-4{
        right: 110px;
    }
}
@media (max-width: 1400px){
    #banner .banner-sub-1{
        top: 250px;
        right: 140px;
    }
    #banner .banner-sub-2{
        right: 500px;
    }
    #banner .banner-sub-3{
        right: 500px;
    }
    #banner .banner-sub-4{
        right: 120px;
    }
}
@media (max-width: 1380px){
    #banner .banner-sub-1{
        top: 250px;
        right: 130px;
    }
    #banner .banner-sub-2{
        right: 500px;
    }
    #banner .banner-sub-3{
        right: 500px;
    }
    #banner .banner-sub-4{
        bottom: 200px;
        right: 110px;
    }
}
@media (max-width: 1320px){
    #banner .banner-sub-1{
        right: 110px;
    }
    #banner .banner-sub-2{
        right: 450px;
    }
    #banner .banner-sub-3{
        right: 470px;
    }
    #banner .banner-sub-4{
        right: 100px;
    }
}
@media (max-width: 1250px){
    #banner .banner-sub-1{
        right: 70px;
    }
    #banner .banner-sub-2{
        right: 400px;
    }
    #banner .banner-sub-3{
        right: 420px;
    }
    #banner .banner-sub-4{
        right: 60px;
    }
}
@media (max-width: 1200px){
    #banner .banner-sub-1{
        display: none;
    }
    #banner .banner-sub-2{
        display: none;
    }
    #banner .banner-sub-3{
        display: none;
    }
    #banner .banner-sub-4{
        display: none;
    }
}
@media (max-width: 768px) {
    #banner .ban-text{
        padding: 120px 0 40px 0 !important;
    }
    #banner{
        height: auto;
        background-position: top;
    }
    #banner .banner-img{
        box-shadow: none;
    }
    #banner .rank-item{
        justify-content: center;
    }
    #banner .ban-text .rank{
        margin-right: 10px;
        padding: 4px 15px;
    }
    #banner h1{
        text-align: center;
        font-size: 50px;
        line-height: 55px;
    }
    #banner h6{
        text-align: center;
        margin-bottom: 20px !important;
    }
    .asset-1,
    .asset-3,
    .asset-4{
        opacity: 0.3;
    }
    .asset-1{
        left: 50px;
        top: 50px;
    }
    .asset-4{
        right: 50px;
        top: 300px;
    }
    .asset-3{
        bottom: 200px;
        right: 200px;
    }
    #block1 h1{
        font-size: 40px;
    }
    #block1 h4{
        margin-bottom: 20px;
    }
    .phone{
        text-align: center;
    }
    .phone iframe{
        width: 100%;
        height: 550px;
    }
    .slick-dots{
        margin-left: 0;
    }
    #plans .nav-link{
        padding: 12px 30px;
    }
    #plans ul{
        padding: 0;
        padding: 10px 0;
    }
    #gallery img{
        border-radius: 20px;
    }
    #faq .accordion-button{
        font-size: 17px;
    }
    #faq .accordion-body{
        font-size: 15px;
    }
}

@media (max-width:1650px) {
	.asset-1{left:30px;}
	.asset-1 img{width:60px;}
	.line{bottom:-5%;right:38%;}
	.line img{width:480px;}
}
@media (max-width:1400px) {
	#banner h1{font-size:60px;}
	.line{bottom:0%;}
}

@media (max-width:820px) {
	#banner h1{font-size:50px; line-height:60px;}
	.asset-1{bottom:75%; top:auto;}
	#banner{height:auto;}
	#banner .ban-text{padding:120px 0 40px 0 !important;}
	#banner .rank-item{justify-content: center;}
	#banner h1, #banner h6{text-align:center;}
	#about{margin-top:35px;}
	.phone iframe{margin:0 auto; display:block;}
}


@media (max-width:575px) {
	.asset-1{left:20px;}
	.asset-1 img{width:40px;}
	#banner h1{font-size:30px; line-height:45px; margin-bottom:10px;}
	#banner h1 br{display:none;}
	#banner h6{margin-bottom:30px !important;}
	#about h1, #about h2{font-weight:600;}
	#block1 h1{font-weight:600; font-size:25px;}
	#features h1{font-weight:600;}
	#features h4{font-weight:600; font-size:18px;}
	#pro h1{font-size:25px; font-weight:600;}
	#plans h1{font-weight:600;}
	#plans h5{font-weight:400;}
	#plans h2{font-weight:600; font-size:30px;}
	#plans h4{font-weight:600;}
	#plans .popular p{font-weight:600; padding:8px 16px;}
	#gallery .g-head{font-size:18px; font-weight:600;}
	#faq h1{font-weight:600;}
	#faq .accordion-button{font-size:16px;font-weight:600;line-height:26px;}
	#foot h1{font-weight:600;font-size:25px;}
	#foot h5{font-size: 16px;font-weight: 400;line-height: 26px;}
	#footer h5{margin-top:25px;}
	#footer .logo{margin-top:35px;}
	.whiisfor h1{font-size:25px; font-weight:600;}
}
/********* Responsive Section End *********/