:root {
    --primary-color: #fff;
    /* try #212121 also for dark mode */
    --background-color: #212121;
    --font: sans-serif;
}


@font-face {
    font-family: Sora;
    src: url(/assets/font/sora/Sora-Bold.ttf);
}

@font-face {
    font-family: Sora-regular;
    src: url(/assets/font/sora/Sora-Regular.ttf);
}

@font-face {
    font-family: Inter;
    src: url(/assets/font/inter/Inter-Regular.otf);
}
.sora{
    font-family: Sora;
}
.container {
    max-width: 1440px;
    padding-left: 113px;
    padding-right: 113px;
}
.custom-toggler .navbar-toggler-icon {
    background-color: white;
}
/*Hero section*/
.landing-hero-section {
    background-image: url(/assets/images/hero-background.png);
    background-size: cover;
    background-position: center;
}
.navbar-platform{
    padding-top:20px
}
.nav-menus {
    display: flex;
    align-items: center;
    margin-right: 42px;
}
.login-wrapper {
    display: flex;
    align-items: center;
}
.margin-right-4{
    margin-right: 4px;
}
.hero-section {
    padding: 115px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hero-section-text {
    color:  #FFF;
    font-family: Sora;
    font-size: 52px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    margin-bottom: 32px;
}
.hero-section-text-sub {
    color: #FFF;
    font-family: Sora;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    margin-bottom: 32px;
}
.hero-section-button {
    border-radius: 4px;
    background: #D9F200;
    padding: 16px 32px;
    color: #000;
    text-align: center;
    font-family: Sora;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: #D9F200;
}
.we-offer {
    border-left: 2px solid #7D55E5;
    padding-left: 12px;
}
.landing-content {
    padding: 115px;
}
.what-we-offer-text {
    color: #000;
    font-family: Sora;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.78px;
}
.section-main-text {
    color: #1A1A1A;
    font-family: Sora;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: -1.6px;
    margin-bottom: 16px;
}
.section-main-text-sub {
    color: #747474;
    font-family: Sora;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 16px;
    letter-spacing: -0.64px;
}
.offers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.offer-item {
    width: 49%;
    border-radius:  8px;
    background: #F8F8F8;
    box-shadow: 0px 4px 4px 0px rgb(0 0 0 / 5%);
    padding: 24px 38px;
}
.offer-title {
    color: #000;
    font-family: Sora;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 14px;
    margin-bottom: 14px;
}
.offer-description {
    color: #747474;
    font-family: Sora;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.64px;
    margin-bottom: 14px;
}
.learn-more-text {
    color: #191919;
    font-family: Sora;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 0;
}
.learn-more {
    display: flex;
    align-items: center;
}
.bg-dark-platform {
    background-color: #171717;
    display: flex;
    align-items: center;
}
.why-ceda-section {
    color: #FFF;
    font-family: Sora;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: -1.6px;
}
.why-ceda-section-sub {
    color: #838383;
    font-family: Sora;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.64px;
    margin-bottom: 77px;
}
.etu-content {
    width: 49%;
}

.etu-title {
    color: #FFF;
    font-family: Sora;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 8px;
}

.etu-text {
    color: #838383;
    font-family: Sora;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.52px;
}
.p-0{
    padding: 0;
}
.why-ceda {
    color: #FFF;
    font-family: Sora;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.78px;
    margin-bottom: 20px;
}
.easy-to-use-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.why-ceda-wrapper {
    border-left: 2px solid #fff;
    padding-left: 12px;
}
.long-section-offer {
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.long-section-offer {
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    border-radius:16px;
    background: #F8F8F8;
    padding: 34px;
}
.left-part-long-section {
    width: 50%;
}
.right-part-long-section {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.long-section-title {
    color: #1A1A1A;
    font-family: Sora;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: -1.2px;
    margin-bottom: 16px;
}
.long-section-title-sub {
    color: #747474;
    font-family: Sora;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.64px;
    margin-bottom: 30px;
}
.bg-F8F8F8{
    background-color: #F8F8F8;
}
.blogs-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.blog-item {
    width: 32%;
    border-radius: 7.129px;
    border: 1px solid #EFEFEF;
    background: #FFF;
}
.blog-img-wrapper {
    width: 100%;
}
.blog-content {
    padding: 41px 20px 20px 20px;
}
.blog-title {
    color: #161616;
    font-family: 'Sora';
    font-size: 16.208px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
}
.blog-sub {
    font-family: 'Sora';
    font-size: 12.428px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}
.blog-section-title {
    color: #1A1A1A;
    font-family: Sora;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: -1.6px;
    margin-bottom: 40px;
}
.see-all {
    margin-top: 40px;
    text-align: center;
}
.section-title-ff {
    color: #fff;
    text-align: center;
    font-family: Sora;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: -1.6px;
    margin-bottom: 35px;
}
.feel-free-wrapper {
    border-radius: 16px;
    background: #171717;
    text-align: center;
    padding: 74px 0;
}
.section-img {
    display: flex;
    width: 50%;
    align-items: flex-end;
    justify-content: flex-end;
}
.container-dashboard {
    padding-left: 113px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.dashboard-content-container {
    padding-left: 30px;
}
footer {
}

footer img {
    margin-bottom: 40px;
}

.flex {
    display: flex;
}

.items-end {
    align-items: flex-end;
}

.sm\:items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.w-full {
    width: 100%;
    margin-bottom: 50px;
}

footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.sm\:flex-row {
    flex-direction: row;
}

.gap-6 {
    gap: 1.5rem; /* Equivalent to 6 in tailwind, adjust as needed */
}

.sm\:gap-14 {
    gap: 3.5rem; /* Equivalent to 14 in tailwind, adjust as needed */
}

.text-16 {
    font-size: 16px;
}

.text-left {
    text-align: left;
}

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

/* Add hover styles if needed */
footer a:hover {
    text-decoration: underline;
}

.text-16 {
    font-size: 16px;
}

/* Add additional styling for the paragraph */
footer p {
    font-size: 16px;
}

/* Add this at the end of your existing CSS */
@media (max-width: 1200px) {
    .hero-section {
        padding: 115px 30px;
    }
    .landing-content {
        padding: 115px 30px;
    }
    .dashboard-content-container {
        padding-left: 30px;
    }
}
@media (max-width: 1000px) {
    .nav-menus {
        justify-content: center;
    }
    .login-wrapper {
        justify-content: center;
    }
    .long-section-offer {
        display: block;
    }
    .left-part-long-section {
        width: 100%;
    }
    .right-part-long-section {
        width: 100%;
        justify-content: center;
        margin-top: 20px;
    }
    /*.dash-img{*/
    /*    width: 100%;*/
    /*}*/
    /*.bg-dark-platform{*/
    /*    display: block;*/
    /*}*/
}
@media (max-width: 800px) {
    .flex {
        flex-direction: column;
    }
    footer {
        text-align: center;
    }
}
@media (max-width: 768px) {
    .navbar-nav {
        flex-direction: column;
        text-align: center;
    }

    .navbar-toggler {
        display: block;
    }
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .hero-section {
        padding: 80px 15px;
        flex-direction: column;
    }

    .col-md-6 {
        text-align: center;
    }

    .long-section-offer {
        flex-direction: column;
        text-align: center;
    }

    .left-part-long-section,
    .right-part-long-section {
        width: 100%;
    }

    .blogs-wrapper {
        flex-wrap: wrap;
    }

    .blog-item {
        width: 100%;
        margin-bottom: 20px;
    }
    .hero-img{
        width: 100%;
    }
    .landing-content {
        padding: 115px 40px;
    }
    .hero-img-wrapper{
        margin-top:30px;
    }
    .offers {
        display: block;
    }
    .offer-item {
        width: 100%;
        margin-top: 20px;
    }
}