#toTop {
    position: fixed;
    right: 15px;
    bottom: 60px;
    cursor: pointer;
}

#toTop img {
    height: 35px;
    width: 35px;
}

body {
    font-family: 'Noto Sans Display', sans-serif;
}

.btn {
    font-weight: 700;
    color: #ffffff !important;
}

.title {
    font-family: 'Montserrat', sans-serif;
}

.btn {

    font-family: 'Montserrat', sans-serif;

}



.text-success {
    color: #2ad38b !important;
}

.bg-success {

    background-color: #2ad38b;
}

.btn-success {
    color: #fff;
    background-color: #2ad38b;
    border-color: #2ad38b;
}

.text-info {
    color: #00c3ff!important;
}

.text-white > * {
    color: #fff !important;
}


.btn-info,
.nav-pills .nav-link.active, 
.nav-pills .show>.nav-link {
    color: #fff !important;
    background-color: #00c3ff !important;
    border-color: #00c3ff !important;
}

.btn-info:hover {
    color: #fff;
    background-color: #00c3ff;
    border-color: #00c3ff;
}

.nav-pills .nav-link:not(.active):hover {
    color: #00c3ff;
}

.card {
    border: 0px !important;
    border-radius: .4rem !important;
    cursor: pointer !important;
}


a {
    color: inherit;
    text-decoration: none;
}

#websiteTemplate {
    padding: 80px 0;
    background-color: rgb(247 247 247)

}

.badge-new {
    position: absolute;
    background-color: red;
    color:white;
    padding: 5px 25px;
    border-radius: 0 5px 5px 0;
    margin-top: 20px;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    font-weight: bold;
}

#websiteFee {
    background-color: rgb(253 253 253);
    padding: 80px 0;
}

#wocCompany {
    padding: 100px 0;
    background: url(../images/bg-website.jpg);
    background-position: center;
    background-size: cover;
    color: white;
}


.icon-box {
    background-color: #00c3ff;
    padding: 10px;
    border-radius: 5px;
}

.btn {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.icon-plus {
    position: absolute;
    right: -1rem;
    top: 40%;
    font-size: 2rem;
    z-index: 2;
    color: #2ad38b;
}

#websiteWhy {
    padding: 120px 0;
    background-position: center;
    background: #222222;
}


#priceTable {
    padding: 120px 0;
}


#headeWebsite {
    background: rgb(0,195,255);
    background: linear-gradient(180deg, rgba(0,195,255,1) 0%, rgba(0,28,37,1) 100%);
    background-image: url(../images/header.jpg);
    background-size: cover;

}


#headerBanner {
    padding: 25px 0;
    background: #5454547a;
    border-radius: 10px;
    margin: 20px 0 0 0;
}

.nav-link {
    color: inherit !important;
    font-size: 0.8rem !important;
}


#testimonials {
    padding: 100px 0;
    background-color: #f7f7f7
}

.text-testimonials {
    font-family: 'Mr Dafoe', cursive;
}

#contactFooter {
    padding: 100px 0;
}


.image-banner {
    max-width: 100%;
}

.swiper-slide {
    opacity: 0.25;
}

.swiper-slide-active  {
    opacity: 1;
}


@media (max-width: 768px) { 


    .table-price th, td {
        padding: 8px 5px !important;
        font-size: 0.75rem;
    }

    .table-price h2  {
        font-size: 0.85rem !important;
    }

    .table-price h6  {
        font-size: 0.6rem !important;
    }

    .table-price b  {
        font-size: 0.6rem !important;
    }

    .table-price i {
        font-size: 0.7rem !important;
        color:#2ad38b
    }
    

    .best-offer {
        font-size: 0.45rem;
    
    }

    .table-price  h5 {
        font-size: 0.85rem !important;
    }
    

}



.first-column {
    width: 40%;
}

.one-year {
    background-color: #24abc1;
    background-image: linear-gradient(210deg, #1999af 0%, #58ceb5 74%);
    text-align: center;
    width: 15%;
    border-radius: 6px;
}

.two-year {
    background-color: #63a4ff;
    background-image: linear-gradient(315deg, #63a4ff 0%, #49999e 74%);
    text-align: center;
    width: 15%;
    border-radius: 6px;

}


.three-year {
    background-color: #f7b42c;
    background-image: linear-gradient(315deg, #f7b42c 0%, #ec6066 74%);
    text-align: center;
    color: white;
    width: 15%;
    border-radius: 6px;

}


.five-year {
    background-color: #f5f5f1;
    background-image: linear-gradient(19deg, #b9523b 0%, #73080d 74%);
    text-align: center;
    width: 15%;
    border-radius: 6px;

}

.text-price {
    font-weight: 700;
    margin-bottom: 0;
}

.text-year {
    margin-bottom: 0;
}

.table-price i {
    font-size: 0.85rem;
    color:#2ad38b
}

.table-price  td {
    text-align: center;
    vertical-align: middle;
}

.table-seo td, th {
    text-align: center;
    vertical-align: middle;
}

.table-seo i {
    font-size: 0.85rem;
    color:#2ad38b;
}

.table-seo p {
    margin-bottom: 0px;
}


.table-price  h5 {
    margin-bottom: 0px;
}


.table-price table, th, td {
    border-collapse: collapse !important;
    border-width: 2px !important;
    border-color: rgb(255, 255, 255) !important;
}

.best-offer {

    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    top: -27px;
    padding: 2px 0;
    border-radius: 8px 8px 0 0;
    background: rgb(255,106,0);
    background: linear-gradient(90deg, rgba(255,106,0,1) 0%, rgba(255,44,44,1) 100%);
}


#SocialMediaMarketing {

    color: white;
    border-radius: 10px;
    background: rgb(95,213,160);
    background: linear-gradient(90deg, rgba(95,213,160,1) 0%, rgba(54,186,127,1) 100%);
}

#FreeTimePOS {

    color: white;
    border-radius: 10px;
    background: rgb(0,164,255);
    background: linear-gradient(180deg, rgba(0,164,255,1) 0%, rgba(44,101,255,1) 100%);
}

.text-category {
    font-size: 0.8rem;
}

.template > div {
    display: none;
}


@media (max-width: 567px) { 


    #headerBanner {
        margin: 0;
    }

    #websiteFee {
        padding: 60px 0;
    }
    
    .icon-plus {
        top: auto;
        right: 50%;
        bottom: -10%;
        z-index: 999;
    }
    
    #priceTable {
        padding: 60px 0;
    }

    #websiteWhy {
        padding: 80px 0;
    }
    
    #contactFooter {
        padding: 80px 0;
    }
    
    #headeWebsite {
        padding: 20px 0 0 0;
    }

}



.bg-call {
    color:white;
    border-radius: 5px;
    background-color: #24abc1;
    background-image: linear-gradient(210deg, #1999af 0%, #58ceb5 74%);
}


.left-menu {
    position: fixed;   
    bottom: 80px;
    left: 15px;
    z-index: 99999;
}


.left-menu a.btn {
    color: white;
    height: 55px;
    width: 55px;
    display: block;
    background: #42275a;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #734b6d, #42275a);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #734b6d, #42275a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 50rem;
    margin-bottom: 6px;
    line-height: 2.5;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

.left-menu .bi {
    font-size: 18px;
}


.bg-gradinet-animation{
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 5s ease infinite;
	padding: 2rem;
	color: #fff;
	border-radius: 5px;
}

.bg-gradinet-animation button{
    background: #fff;
    font-size: 1rem;
    margin-top: 1rem;
    text-transform: uppercase;
}

@-webkit-keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}