figma css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');

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

* {
    margin: 0;
    box-sizing: border-box;
}

header {
    background: linear-gradient(180deg, #F6FAFD 0%, #FFFFFF 100%);
}
.pb-120{
    padding-bottom: 120px;
}
.pt-120{
    padding-top: 120px;
}
/* nav section */
.btn-demo {
    padding: 10px 25px;
    font-weight: 600;
    font-size: 18px;
    background: #FFFFFF;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.25);
    border-radius: 35px;
    border: 2px solid transparent;
    transition: .4s all ease;
}
a.btn-demo:hover{
    box-shadow: none;
    border: 2px solid #9C69E2;
}
li.active>a {
    color: #000000 !important;
}

a.nav-link {
    font-size: 18px;
    color: #575757 !important;
}
/* header content */
.header-content {
    padding-top: 120px;
}

.site-header {
    font-weight: 800;
    font-size: 70px;
    line-height: 90px;
    color: #212353;
}

.site-sub {
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 190%;
    color: #000000;
}

a.learn-more {
    font-weight: bold;
    font-size: 24px;
    color: #FFF;
    background: #9C69E2;
    border-radius: 38px;
    padding: 15px 50px;
    transition: .5s all ease;
    border: 2px solid transparent;
}
a.learn-more:hover {
    border: 2px solid #212353;
    color: #FFF;
}
.header-img img {
    bottom: 24px;
}
/* about section */
.about-content {
    background: rgba(240, 99, 184, 0.15);
    border-radius: 46px;
}

.about-title {
    font-weight: 800;
    font-size: 48px;
    line-height: 57px;
    color: #212353;
}

.about-des {
    font-size: 17px;
    line-height: 27px;
}
/* feature section */
.section-header h2 {
    font-weight: 800;
    font-size: 52px;
    color: #212353;
}

.section-header p {
    font-size: 20px;
    line-height: 38px;
    color: #000000;
}

.single-feature {
    border-radius: 25px;
}

.feature-1 {
    background: rgba(104, 201, 186, 0.1);
}

.feature-2 {
    background: rgba(156, 105, 226, 0.1);
}

.feature-3 {
    background: rgba(240, 99, 184, 0.1);
}

.feature-4 {
    background: rgba(45, 156, 219, 0.1);
}

.feature-text h3 {
    font-weight: 600;
    font-size: 25px;
    color: #212353;
}

.feature-text p {
    font-size: 17px;
    line-height: 27px;
    color: #575757;
}

.feature-text a {
    font-weight: 600;
    font-size: 16px;
    color: #000000 !important;
}

.single-feature img {
    max-width: 150px;
    height: auto;
    margin-right: 40px;
    margin-top: 60px;
}
/* testimonial section */
.testimonial-content {
    background: linear-gradient(106.14deg, #700CFA 6.01%, rgba(67, 0, 159, 0.56) 98.3%);
    border-radius: 40px;
    overflow: hidden;
}

.testimonail-header {
    font-weight: 800;
    font-size: 45px;
    color: #FFFFFF;
}

.testimonial-inner {
    background-color: #fff;
    border-radius: 8px;
}

.testimonial-inner img {
    width: 50px;
    height: 50px;
}
.testimonail-items{
    margin-right: -350px;
    /* position: relative; */
}
.slick-slide{
    margin-right: 25px;
}
.slick-dots li button:before{
    font-size: 35px;
    color: #FFF;
    opacity: 1;
}
.slick-dots{
    bottom: -50px; 
    width: auto;
     left: -11px;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #F063B8;
    font-size: 50px;
}
.testimonial{
    border-bottom: 2px solid rgba(33, 35, 83, 0.35);
}
/* footer widget */
a.learn-more-2{
    padding: 10px 25px;
    font-weight: 600;
    font-size: 18px;
    background: #F063B8;
    color: #FFF;
    border-radius: 35px;
    border: 2px solid transparent;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.25);
    transition: .4s all ease;
}
a.learn-more-2:hover{
    color: #fff;
    box-shadow: none;
}
a.btn-demo:hover{
    box-shadow: none;
    border: 2px solid #9C69E2;
}
.left-text > h3{
    font-size: 40px;
    color: #212353;
    font-weight: 800;
}
.left-text > p{
    font-size: 18px
}
h3.widget-title{
    font-weight: 600;
    font-size: 24px;
    line-height: 33px;
    color: #000000;
}
.widget .list-unstyled li{
    padding-bottom: 12px;
}
.widget .list-unstyled li a{
    color: #000;
}
.social li{
    padding-right: 25px;
    padding-left: 20px;
    position: relative;
    cursor: pointer;
    
}
.social li a{
    color: #FFF;
    
}
.social li::before{
    content: '';
    top: -11px;
    left: 4px;
    background: #C4C4C4;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    z-index: -1;
    position: absolute;
    transition: .3s all ease;
}
.social li:hover::before{
    background: #700CFA
}

footer{
    background: linear-gradient(#FFFFFF 100% , #F6FAFD 0%, );
}






Leave a Reply

Your email address will not be published. Required fields are marked *