@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&display=swap');





a {
    background-color: transparent
}

a:active,
a:hover {
    outline: 0
}

body {
    margin: 0;
    min-height: 100%;
    font-family: 'Chivo', sans-serif;
    background-color: #1a1a1a;
    font-size: 16px;
    color: #333
}

.navbar-container {
    display: -ms-grid;
    display: grid;
    max-width: 1300px;
    min-height: 80px;
    margin-right: 50px;
    margin-left: 40px;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    grid-auto-columns: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 16px;
    -ms-grid-columns: .3fr 1fr -webkit-max-content;
    -ms-grid-columns: .3fr 1fr max-content;
    grid-template-columns: .3fr 1fr -webkit-max-content;
    grid-template-columns: .3fr 1fr max-content;
    -ms-grid-rows: auto;
    grid-template-rows: auto
}

.navbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center; 
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 15px 10px;
    width: 100%;
    z-index: 999;
    top: 0;
}

.navbar.dropped{
    background: #1a1a1a;
    backdrop-filter: blur(6px);
    background-color: #1a1a1a14;
}

a.navbar-brand {
    font-size: 32px;
    font-weight: 500;
    color: #fff;
    margin-right: 40px;
    line-height: 32px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}


a.navbar-brand:hover {
    color: #fff
}

a.navbar-brand span {
    color: #185df2
}

.navbar-brand i {
    color: #185df2;
}

.nav-contents {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #252525;
    padding: 10px 12px 10px 20px;
    border-radius: 30px;
    backdrop-filter: blur(6px);
    background-color: #2525257d
}

.div-block {
    margin-right: -33px
}

section.home {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-top: 100px;
    padding-bottom: 80px;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    background: linear-gradient(180deg, #1a1a1a 14.48%, #fbfbfe00 45.21%);
}

section.home .hero-png {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url(../images/sys.png);
    filter: brightness(10) contrast(4.5);
    opacity: 0.75;
}

section.home .container {
    position: relative;
    z-index: 1;
}

.hero-container {
    max-width: 1295px;
    margin-right: 25px;
    margin-left: 50px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    grid-auto-columns: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 16px;
    -ms-grid-columns: 1fr -webkit-max-content;
    -ms-grid-columns: 1fr max-content;
    grid-template-columns: 1fr -webkit-max-content;
    grid-template-columns: 1fr max-content;
    -ms-grid-rows: auto;
    grid-template-rows: auto
}

.section-title h2 {
    margin-top: 0;
    margin-bottom: 0;
    color: #fff;
    font-size: 48px;
    line-height: 66px;
    font-weight: 700
}

.products-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap
}

.product-card {
    background: linear-gradient(120deg, #252525 0, #ffffff14 100%);
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 60px;
    margin: 40px 20px
}

.products-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5%
}

.product-card-footer .main-button {
    width: 100%;
    margin-top: 25px;
    padding-block: 5px
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")
}

.navbar-toggler:focus,
.navbar-toggler:focus-visible {
    outline: 0;
    border: none;
    box-shadow: none
}


.shine {
    background-color: #185df2 !important;
    background-repeat: no-repeat;
    animation: bg-move linear 5s infinite;
    transition: all .3s ease-in-out
}

.section-title {
    text-align: center;
    margin-bottom: 25px
}

.footer-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-block: 40px
}

footer {
    background: #252525;
    margin-top: 60px
}

.footer-link h4 {
    background: #1a1a1a;
    color: #fff;
    padding: 1px 10px;
    border-radius: 50px;
    font-size: 14px;
    width: fit-content
}

.footer-link ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px
}

.footer-link ul li {
    margin-bottom: 10px
}

.footer-link ul li a {
    color: #c4c4c4;
    text-decoration: none;
    font-size: 14px
}

.footer-link ul li a:hover {
    color: #185df2
}

.footer-logo p {
    max-width: 400px;
    color: #c4c4c4;
    margin-block: 8px
}

@media screen and (max-width:991px) {
    .footer-wrapper {
        flex-wrap: wrap
    }

    .footer-links {
        flex-direction: column;
        justify-content: center;
        width: 100%
    }
}

@-webkit-keyframes bg-move {
    0% {
        background-position: -500px 0
    }

    100% {
        background-position: 1000px 0
    }
}

@keyframes bg-move {
    0% {
        background-position: -500px 0
    }

    100% {
        background-position: 1000px 0
    }
}

.slider {
    width: 100%;
    margin: auto;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden
}

.slide-track {
    display: flex;
    width: calc(40rem * 13 * 2);
    animation: scroll 39s linear infinite
}

.slide-track:hover {
    animation-play-state: paused
}

@keyframes scroll {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(40rem * 13 * -1))
    }
}

.slide {
    width: 40rem;
    display: flex;
    align-items: center;
    padding: 1.5rem
}

.slide-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 40rem;
    padding: 20px;
    border-radius: 16px;
    transition: .3s;
    backdrop-filter: blur(15px);
    background-color: #2525257d;
    height: 100%;
    border: 1px solid #333;
    background: url(../images/bgs.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.slide-card:hover {
    transform: scale(1.03);
    border: 1px solid #185df2;
    box-shadow: 0 0 10px rgb(31 189 189)
}

.slide-card .top {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.slide-card .top .stars img {
    width: 20px;
    height: 20px;
    overflow: hidden;
    display: block;
    margin-bottom: 10px
}

.stars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px
}

.slide-card .date p {
    color: #fff;
    font-weight: 500;
    font-size: 1.6rem
}

.slide-card .review p {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 10px;
    text-align: left
}

.slide-card .verified {
    display: flex;
    flex-direction: row
}

.slide-card .verified p {
    color: #1dfdfe;
    font-weight: 700;
    font-size: 12px;
    margin: 0
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px
}

.footer p {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    margin: 0
}

.footer img.logo {
    width: auto;
    height: 30px
}

.footer-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px
}

.footer-links a {
    color: #185df2;
    text-decoration: none;
    transition: all .3s ease-in-out
}

.footer-links a:hover {
    filter: brightness(1.3)
}

.hero-image-wrapper video {
    width: 100%
}

@media (max-width:991px) {
    a.navbar-brand {
        width: 50%;
        margin-right: 0
    }

    .navbar-toggler {
        width: 50%;
        text-align: right
    }

    .nav-contents {
        flex-wrap: wrap
    }

    .buttons,
    a.nav-link {
        text-align: center
    }

    .contact-card::after {
        background-position: right top !important
    }

    .footer {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px
    }
}



.nav-link::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 131%;
    height: 114%;
    border-radius: 4px;
    top: -7%;
    left: -15%;
    background: #185df2;
    background: -o-linear-gradient(190deg, #2a1454 0%, #185df2 100%);
    background: linear-gradient(260deg, #185df2 0%, #185df2 100%);
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.nav-link:hover::before {
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

.navbar-expand-lg .navbar-nav .nav-item{
    padding: 0 15px;
}

.thumbnail-wrapper {
    position: relative;
    width: 80%;
    margin-bottom: 100px;
}

.thumbnail-wrapper img.profile-pic{
    width: 100%;
    transition: all 0.3s ease-in-out;
}


.thumbnail-wrapper img.border-pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    transition: all 0.3s ease-in-out;
    transform: translate(20px, 20px);
}

.thumbnail-wrapper:hover img.border-pic {
    transform: translate(0, 0) scale(0.96);
}

.thumbnail-wrapper:hover img.profile-pic {
    transform: scale(0.98);
    -webkit-filter: brightness(120%);
}


.pre-title {
    font-size: 14px;
    line-height: 12px;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
    text-decoration: none;
    width: fit-content;
    padding: 5px 15px;
    background: #141551;
    border-radius: 50px;
    display: inline-block;
    border: 1px solid #185df2;
}


.pre-title i{
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    margin-right: 8px;

}

.title {
    font-size: 70px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

span.highlight {
    position: relative;
    display: inline-block;
    background: linear-gradient(to right, #0b91f3 0%, #185df2 23%, #185df2 77%, #0093ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-inline: auto;
}




.hero-paragraph {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 50px;
}

.hero-tittle-wrapper {
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
}




section.testimonials {
    padding: 100px 0;
}

.testimonials .section-title {
    text-align: center;
    max-width: 800px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.testimonials .section-title .pre-section-title {
    font-size: 14px;
    line-height: 12px;
    color: #fff;
    margin-bottom: 0px;
    position: relative;
    text-decoration: none;
    width: fit-content;
    padding: 5px 15px;
    background: #141551;
    border-radius: 50px;
    display: inline-block;
    border: 1px solid #185df2;
}

.testimonials .section-title h2 {
    font-size: 70px;
    font-weight: 700;
    margin-bottom: 20px;
    background-color: #185df2;
    background-image: linear-gradient(to right, #028dfd 0%, #185df2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}















.testimonials {
    text-align: center;
    padding: 50px 0;
}

.slider {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 33.33%;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: transform 0.5s ease-in-out;
}

.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.navigation .dots {
    display: flex;
}

.navigation .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.navigation .dot.active {
    background-color: #717171;
}

button.owl-dot {
    width: 22px;
    height: 22px;
    display: inline-flex;
    border-radius: 50%;
    z-index: 9999;
    position: relative;
    background: none;
    justify-content: center;
    align-items: center;
    margin: 0 3px;
    border: none;
    padding: 0;
    cursor: pointer;
}

button.owl-dot span{
    width: 6px;
    height: 6px;
    background: #575757;
    border-radius: 50%;
    display: block;
}

button.owl-dot.active {
    /* background-image: linear-gradient(to right, #185df2 0%, #2b2b2b  100%) !important; */
    border: 1px solid #185df2;
}

button.owl-dot.active span{
    background: #185df2;
}

.owl-dots{
    margin-top: 20px;
}

/* Testimonial Cards */
.testimonial-card {
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    background: #1e1e1e;
    padding-top: 55px;
}

.testimonial-card .testimonial-stars{
    display: flex;
    gap: 3px;
    color: #185df2;
    font-size: 14px;
}
.top-right, .bottom-left{
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    opacity: 0.6;
    z-index: -999;
}

.top-right{
    right: 0;
    top: 0;
}

.top-right .border-x{
    width: 100%;
    height: 100%;
    background: #185df2;
    position: absolute;
    top: 0;
    right: 0;
}

.top-right .block{
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    position: absolute;
    top: 1px;
    right: 1px;
}


.bottom-left{
    left: 0;
    bottom: 0;
}

.bottom-left .border-x{
    width: 100%;
    height: 100%;
    background: #185df2;
    position: absolute;
    bottom: 0;
    left: 0;
}

.bottom-left .block{
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    position: absolute;
    bottom: 1px;
    left: 1px;
}


.testimonial-content {
    margin-bottom: 10px;
}

.testimonial-content h6 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #ffffff;
}

.testimonial-content p {
    font-size: 14px;
    line-height: 1.5;
    color: #b7b7b7;
    margin-bottom: 15px;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #2c2c2c;
    padding-top: 15px;
}

.testimonial-author h4 {
    font-size: 16px;
    font-weight: 400;
}

.testimonial-author p {
    font-size: 14px;
    color: #777;
    margin-bottom: 0;
}

.testimonial-author svg {
    position: absolute;
    right: 60px;
    bottom: 60px;
    z-index: -9;
    opacity: 0.03;
    scale: 1.4;
}


.sign-icon svg {
    width: 15px;
    height: 15px;
}

.sign-icon {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 35px;
    height: 35px;
    background: #185df2;
    border-bottom-right-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}





@media (max-width: 768px) {
    .thumbnail-wrapper{
        display: none;
    }
    section.home{
        padding: 50px 0;
    }

    a.service-card.aos-init.aos-animate {
        flex-direction: column;
        gap: 30px;
    }

    li.nav-item {
        width: fit-content;
        margin: 10px auto;
    }

    .navbar .buttons{
        margin-block: 10px;
    }
}



@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.logos {
    overflow: hidden;
    padding: 20px 0;
    white-space: nowrap;
    position: relative;
}

.logos:before,
.logos:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
}

/* 
.logos:hover .logos-slide {
    animation-play-state: paused;
} */

.logos-slide {
    display: inline-block;
    animation: 120s slide infinite linear;
}

.logos-slide img {
    height: 30px;
    margin: 0px 25px;
    filter: grayscale(1) contrast(0) brightness(1.5) opacity(0.5);
    aspect-ratio: 4;
}


.partners-title h2 {
    font-size: 24px;
    font-weight: 800;
    margin: auto;
    margin-bottom: 20px;
    background-color: #185df2;
    background-image: linear-gradient(to right, #028dfd 0%, #185df2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
    margin-top: 40px;
}


section.pricing {
    padding: 100px 0;
    background: url(../images/dots.jpeg);
    
}

section.pricing .container{
    position: relative;
    z-index: 2;
}

section.pricing .section-title {
    text-align: center;
    max-width: 800px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

section.pricing .section-title .pre-section-title {
    font-size: 14px;
    line-height: 12px;
    color: #fff;
    margin-bottom: 0px;
    position: relative;
    text-decoration: none;
    width: fit-content;
    padding: 5px 15px;
    background: #141551;
    border-radius: 50px;
    display: inline-block;
    border: 1px solid #185df2;
}

section.pricing .section-title h2 {
    font-size: 70px;
    font-weight: 700;
    margin-bottom: 40px;
    background-color: #185df2;
    background-image: linear-gradient(to right, #028dfd 0%, #185df2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section.pricing .pricing-card {
    background: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
    transition: all 0.3s;
    border: 1px solid #185df2;
    text-decoration: none;
}

section.pricing .pricing-card:hover {
    background: #185df21c;
}

section.pricing .pricing-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

section.pricing .pricing-card-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

section.pricing .pricing-card-price {
    font-size: 24px;
    font-weight: 700;
    color: #185df2;
}

section.pricing .pricing-card-price span {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

section.pricing .pricing-card-body {
    margin-bottom: 20px;
}

section.pricing .pricing-card-list {
    list-style: none;
    padding: 0;
}

section.pricing .pricing-card-list li {
    font-size: 16px;
    font-weight: 500;
    color: #b7b7b7;
    margin-bottom: 10px;
}

section.pricing .pricing-card-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

section.pricing .pricing-card-footer a {
    font-size: 16px;
    font-weight: 500;
    color: #185df2;
    background: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s;
}

section.pricing .pricing-card-footer a:hover {
    background: #185df2;
    color: #fff;
}


section.pricing .plans-filters {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

section.pricing .plans-filters button {
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    background: #1a1a1a;
    padding: 6px 20px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid #313131;
}

section.pricing .plans-filters button.active, section.pricing .plans-filters button:hover {
    background: #185df2;
    border: 1px solid #185df2;
}


section.pricing .card-content {
    width: 100%;
}

section.pricing .card-content h1 {
    margin-bottom: 1rem;
    background: linear-gradient(to right, #0b91f3 0%, #185df2 23%, #185df2 77%, #0093ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
    margin-inline: auto;
    font-weight: 700;
    font-size: 46px;
}


section.pricing .card-content .price-tag {
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    gap: 5px;
}

section.pricing .card-content .price-tag h2 {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
}

section.pricing .card-content .price-tag span {
    font-size: 14px;
    color: #c9c9c9;
    font-weight: 400;
}

section.pricing .card-content h4 {
    font-size: 16px;
    margin-bottom: 20px;
    color: #c9c9c9;
    font-weight: 600;
}

section.pricing .card-content h4 .discount {
    background-color: #222227;
    padding: 5px 15px;
    font-size: 14px;
    border-radius: 8px;
    color: #fff;
    margin-left: 1rem;
}

section.pricing .card-content .order {
    margin-top: 30px;
}

section.pricing .card-content .order a, section.pricing .card-content .order button {
    width: 100%;
    border-radius: 20px;
}

section.pricing .card-content .last-item {
    margin-top: 30px;
}

section.pricing .card-content .last-item h5 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #c9c9c9;

}

section.pricing .card-content .last-item ul.spList {
    list-style: none;
    padding: 0;
}

section.pricing .card-content .last-item ul.spList li {
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: #c9c9c9;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

section.pricing .card-content .last-item ul.spList li span strong {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

section.pricing .card-content .last-item ul.spList li i {
    font-size: 1rem;
    color: #c9c9c9;
}

.feature-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.feature-item i {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #141551;
    border-radius: 50px;
    border: 1px solid #185df2;
    color: #185df2;
    min-width: 50px;
    font-size: 20px;
}

.feature-text .feature-title {
    margin-bottom: 5px;
    font-size: 14px;
    color: #c1c1c1;
    font-weight: 700;
}

.feature-text .feature-paragraph{
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    margin-bottom: 0;
}

section.pricing .dsc{
    color: #c9c9c9;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
    text-align: center;
    max-width: 300px;
    margin-inline: auto;
}




section.features {
    padding: 100px 0;
    padding-bottom: 0px;
}

section.features .section-title {
    text-align: center;
    max-width: 800px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

section.features .section-title .pre-section-title {
    font-size: 14px;
    line-height: 12px;
    color: #fff;
    margin-bottom: 0px;
    position: relative;
    text-decoration: none;
    width: fit-content;
    padding: 5px 15px;
    background: #141551;
    border-radius: 50px;
    display: inline-block;
    border: 1px solid #185df2;
}

section.features .section-title h2 {
    font-size: 70px;
    font-weight: 700;
    margin-bottom: 20px;
    background-color: #185df2;
    background-image: linear-gradient(to right, #028dfd 0%, #185df2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section.features .feature-card {
    background: #1e1e1e;
    padding: 20px;
    border-radius: 10px;
    transition: all 0.3s;
    text-decoration: none;
}

section.features .feature-card:hover {
    background: #185df21c;
}

section.features .feature-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background: #141551;
    border-radius: 50px;
    border: 1px solid #185df2;
    color: #185df2;
    min-width: 50px;
    font-size: 20px;
    margin-bottom: 20px;
}

section.features .feature-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

section.features .feature-paragraph {
    font-size: 16px;
    color: #b7b7b7;
    font-weight: 400;
    margin-bottom: 0;
}

section.features .feature-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

section.features .feature-item i {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #141551;
    border-radius: 50px;
    border: 1px solid #185df2;
    color: #185df2;
    min-width: 50px;
    font-size: 20px;
}

section.features .feature-text .feature-title {
    margin-bottom: 5px;
    font-size: 14px;
    color: #c1c1c1;
    font-weight: 700;
}

section.features .feature-text .feature-paragraph {
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    margin-bottom: 0;
}


/* 


<section class="contact" id="contact">
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="contact-box">
                <div class="contactpbg"></div>
                <div class="contact-content">
                    <div class="section-title">
                        <p class="pre-section-title">Contact Us</p>
                        <h2 class="section-title">Get in Touch.</h2>
                    </div>
                    <p class="contact-paragraph">Have a question or need help with your order? Feel free to contact
                        us using the form below. Our support team is available 24/7 to assist you.</p>
                    <div class="buttons-group">
                        <a href="telegram.me/purepal" class="btn btn-primary">Telegram</a>
                        <a href="discord.gg/purepal" class="btn btn-secondary">Discord</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section> */


section.contact {
    padding: 100px 0;
    background: url(../images/dots.jpeg);
}

section.contact .container{
    position: relative;
    z-index: 2;
}

section.contact .section-title {
    text-align: center;
    max-width: 800px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

section.contact .section-title .pre-section-title {
    font-size: 14px;
    line-height: 12px;
    color: #fff;
    margin-bottom: 0px;
    position: relative;
    text-decoration: none;
    width: fit-content;
    padding: 5px 15px;
    background: #141551;
    border-radius: 50px;
    display: inline-block;
    border: 1px solid #185df2;
}

section.contact .section-title h2 {
    font-size: 70px;
    font-weight: 700;
    margin-bottom: 20px;
    background-color: #185df2;
    background-image: linear-gradient(to right, #028dfd 0%, #185df2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section.contact .contact-box {
    background: #1e1e1e;
    padding: 50px;
    border-radius: 10px;
    transition: all 0.3s;
    border: 1px solid #185df2;
    text-decoration: none;
    position: relative;
}

section.contact .contactpbg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: url(../images/cont.png);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    filter: brightness(2.5) contrast(1.5) hue-rotate(31deg) grayscale(0.2);
}
section.contact .contact-content {
    position: relative;
    z-index: 2;
}

section.contact .contact-content .section-title {
    text-align: center;
    max-width: 800px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}


section.contact .contact-content .contact-paragraph {
    font-size: 16px;
    color: #b7b7b7;
    font-weight: 400;
    max-width: 600px;
    margin: 20px auto;
    margin-bottom: 60px;
    text-align: center;
    line-height: 1.5;
}

section.contact .contact-content .buttons-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

@media (max-width: 768px) {
    nav{
        padding: 0 20px;
        background: #1a1a1a;
    }
}

/* 

<section class="faq">
<div class="container">
    <div class="row">
        <div class="col-12" data-aos="fade-up">
            <div class="section-title">
                <p class="pre-section-title">FAQ</p>
                <h2 class="section-title">Frequently Asked Questions.</h2>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12" data-aos="fade-up">
            <div class="accordion" id="faq-accordion">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            What is an RDP?
                        </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                        data-bs-parent="#faq-accordion">
                        <div class="accordion-body">
                            Remote Desktop Protocol (RDP) is a proprietary protocol developed by Microsoft, which
                            provides a user with a graphical interface to connect to another computer over a network
                            connection. With an RDP, you can access and control a remote computer as if you were
                            sitting in front of it.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            What are the benefits of using an RDP?
                        </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                        data-bs-parent="#faq-accordion">
                        <div class="accordion-body">
                            There are many benefits to using an RDP, including:
                            <ul>
                                <li>Access to a powerful server with high-speed internet connection</li>
                                <li>Ability to run resource-intensive applications and tasks</li>
                                <li>Secure access to your data and files from anywhere in the world</li>
                                <li>Ability to share files and collaborate with others in real-time</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section> */


section.faq {
    padding: 100px 0;
}

section.faq .container{
    position: relative;
    z-index: 2;
}

section.faq .section-title {
    text-align: center;
    max-width: 800px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

section.faq .section-title .pre-section-title {
    font-size: 14px;
    line-height: 12px;
    color: #fff;
    margin-bottom: 0px;
    position: relative;
    text-decoration: none;
    width: fit-content;
    padding: 5px 15px;
    background: #141551;
    border-radius: 50px;
    display: inline-block;
    border: 1px solid #185df2;
}

section.faq .section-title h2 {
    font-size: 70px;
    font-weight: 700;
    margin-bottom: 20px;
    background-color: #185df2;
    background-image: linear-gradient(to right, #028dfd 0%, #185df2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section.faq .accordion-item {
    margin-bottom: 20px;
}

section.faq .accordion-item .accordion-button {
    background: #1e1e1e;
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    font-size: 18px;
    font-weight: 700;
}

section.faq .accordion-item .accordion-button:hover {
    background: #185df2;
}

section.faq .accordion-item .accordion-button.collapsed {
    background: #1e1e1e;
}

section.faq .accordion-item .accordion-button.collapsed:hover {
    background: #185df2;
}

section.faq .accordion-item .accordion-body {
    color: #b7b7b7;
    border-radius: 10px;
    padding: 20px;
}

section.announcement {
    width: 100%;
    background: linear-gradient(to right, #185df2 0%, #2b2b2b 23%, #2b2b2b 77%, #185df2 100%);
    color: #fff;
}

section.announcement .container{
    position: relative;
    z-index: 2;
}

section.announcement .announcement-text{
    padding: 10px;
    text-align: center;
    margin:0;
    font-size: 14px;
}

.announcement-highlight{
    font-weight: 700;
}



/* 
<section class="tos">
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="tos-box">
                <div class="tos-content">
                    <div class="section-title">
                        <p class="pre-section-title">Privacy Policy</p>
                        <h2 class="section-title">Our Privacy Policy</h2>
                    </div>
                    <p class="tos-paragraph">This Privacy Policy describes how your personal information is
                        collected, used, and shared when you visit or make a purchase from
                        purepal.io (the “Site”).</p>
                    <h3 class="tos-subtitle">Personal Information We Collect</h3>
                    <p class="tos-paragraph">When you visit the Site, we automatically collect certain information
                        about your device, including information about your web browser, IP address, time zone,
                        and some of the cookies that are installed on your device. Additionally, as you browse the
                        Site, we collect information about the individual web pages or products that you view, what
                        websites or search terms referred you to the Site, and information about how you interact
                        with the Site. We refer to this automatically-collected information as “Device Information”.
                    </p>
                    <p class="tos-paragraph">We collect Device Information using the following technologies:</p>
                    <ul class="tos-list">
                        <li class="tos-list-item">- “Cookies” are data files that are placed on your device or computer
                            and often include an anonymous unique identifier. For more information about cookies,
                            and how to disable cookies, visit http://www.allaboutcookies.org.</li>
                        <li class="tos-list-item">- “Log files” track actions occurring on the Site, and collect data
                            including your IP address, browser type, Internet service provider, referring/exit
                            pages, and date/time stamps.</li>
                        <li class="tos-list-item">- “Web beacons”, “tags”, and “pixels” are electronic files used to
                            record information about how you browse the Site.</li>
                    </ul>
                    <p class="tos-paragraph">Additionally when you make a purchase or attempt to make a purchase
                        through the Site, we collect certain information from you, including your name, billing
                        address, shipping address, payment information (including credit card numbers, email
                        address, and phone number. We refer to this information as “Order Information”.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>


</section> */

section.tos {
    padding: 100px 0;
}

section.tos .container{
    position: relative;
    z-index: 2;
}

section.tos .tos-box {
    background: #1e1e1e;
    padding: 50px;
    border-radius: 10px;
    transition: all 0.3s;
    border: 1px solid #185df2;
    text-decoration: none;
    position: relative;
}

section.tos .tos-content {
    position: relative;
    z-index: 2;
}

section.tos .tos-content .section-title {
    text-align: center;
    max-width: 800px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
} 

section.tos .tos-content .section-title .pre-section-title {
    font-size: 14px;
    line-height: 12px;
    color: #fff;
    margin-bottom: 0px;
    position: relative;
    text-decoration: none;
    width: fit-content;
    padding: 5px 15px;
    background: #141551;
    border-radius: 50px;
    display: inline-block;
    border: 1px solid #185df2;
}

section.tos .tos-content .section-title h2 {
    font-size: 70px;
    font-weight: 700;
    margin-bottom: 20px;
    background-color: #185df2;
    background-image: linear-gradient(to right, #028dfd 0%, #185df2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section.tos .tos-content .tos-paragraph {
    font-size: 16px;
    color: #b7b7b7;
    font-weight: 400;
    margin-bottom: 20px;
}

section.tos .tos-content .tos-subtitle {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

section.tos .tos-content .tos-list {
    list-style: none;
    padding: 0;
}

section.tos .tos-content .tos-list li {
    font-size: 16px;
    font-weight: 500;
    color: #b7b7b7;
    margin-bottom: 10px;
}


section.tos .tos-content .tos-list li:last-child {
    margin-bottom: 0;
}

section.tos .tos-content .tos-list-item {
    font-size: 16px;
    font-weight: 500;
    color: #b7b7b7;
    margin-bottom: 10px;
}