@import url(theme-root.css);

/*
Developer:      Muhammad Salam, Muhammad Awais
Developer URL:  https://www.linkedin.com/in/salamaslamofficial/
Company:        ICTechnology, Australia
Company URL:    ictechnology.com.au
Description:    This file mostly contain the Template Styles, example Projects etc.
*/

.clearfix {
    height: 150px;
}

/* Footer Template */
footer {
    background: var(--primary-bg);
}
.footer-row {
    padding-top: 94px;
    padding-bottom: 94px;
}
.footer-item {
    color: var(--off-text);
    margin-top: 8px;
    margin-bottom: 8px;
}
.footer-logo {
    margin-bottom: 20px;
}
.ausrelief-about {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    align-self: stretch;
    color: #d1d1d1;
    margin-bottom: 16px;
}
.footer-social-item {
    margin-top: 16px;
}
.social-links {
    margin-right: 30px;
    text-decoration: none;
}
.quick-links {
    text-decoration: none;
    color: var(--off-text);
    cursor: pointer;
}
.quick-links:hover {
    color: var(--prominent-text);
}
.footer-item-first {
    margin-top: 0;
}
.newsletter-input-group {
    margin: 18px 0px;
}
.newsletter-input-group input {
    background: transparent !important;
    font-size: 18px !important;
    padding: 16px 26px !important;
    border-bottom-left-radius: 30px !important;
    border-top-left-radius: 30px !important;
    color: var(--off-text, #fff) !important;
    border-right: none !important;
}
.newsletter-input-group input:active,
.newsletter-input-group input:focus {
    border: 1px solid var(--off-text, #fff);
    box-shadow: none !important;
}
.newsletter-input-group button {
    padding: 17px 30px !important;
    border-radius: 80px !important;
    background: var(--prominent-text, #01f9c6);
    margin-left: -30px !important;
    border: 1px solid var(--off-bg);
}
.newsletter-input-group button:hover,
.newsletter-input-group button:active {
    background: var(--prominent-dark-bg);
    color: var(--prominent-text) !important;
}
.newsletter-info {
    margin-top: 20px;
    margin-bottom: 20px;
    color: #d1d1d1;
    font-size: 18px;
}
.newsletter-heading {
    font-size: 32px;
    font-weight: 500;
    line-height: 120%;
    color: var(--off-text);
    margin-bottom: 8px;
}
.theme-checkbox {
    background: transparent !important;
    border: 1px solid var(--Gray-200, #e4e7ec);
    width: 20px;
    height: 20px;
}
.theme-checkbox:checked {
    background: var(--prominent-text) !important;
}
.theme-checkbox:checked::after {
    position: absolute;
    content: "✔" !important;
    margin-left: 4px;
    margin-top: 2.5px;
    line-height: 100%;
    font-size: 14px !important;
    color: var(--normal-text) !important;
}
.footer-check-label {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    color: var(--Gray-300);
}

/* Project Template */
.video-play-button {
    background-color: transparent;
    border: none;
    outline: none;
}
.project-big-heading {
    font-size: 62px;
    font-weight: 400;
    line-height: 120%;
    margin-top: 24px;
    margin-bottom: 12px;
}
.short-label {
    margin-top: 60px;
}
.extra-details-row {
    margin: 40px 0;
}
.extra-details {
    margin: 12px 0;
}
.filter-buttons {
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    color: var(--primary-text);
    padding: 10px 18px;
    border-radius: 80px;
    border: 1.5px solid var(--prominent-text, #01f9c6);
    cursor: pointer; /* Add cursor pointer to indicate it's clickable */
}
.filter-buttons:hover {
    background-color: var(--prominent-bg);
}
.filter-radio:checked + .filter-buttons {
    background-color: var(
        --primary-bg
    ); /* Change the background color when selected */
    color: white; /* You may need to adjust the text color for visibility */
}
/* Hide the radio button visually */
.filter-radio {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
}
.catalog-heading {
    font-size: 62px !important;
    line-height: 120% !important;
    color: var(--primary-text) !important;
}
.projects-catalogs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin: 50px 0;
}
.project-catalog {
    position: relative;
    padding: 45px;
    height: 520px;
    border-radius: 12px;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    filter: grayscale(100%);
    transition: filter 0.4s ease-in-out;
}
.project-catalog:hover {
    filter: grayscale(0%);
}
.catalog-6 {
    grid-column: span 6;
    width: 100% !important;
}
.catalog-2 {
    grid-column: span 2;
}
.catalog-3 {
    grid-column: span 3;
    width: 100% !important;
}
.project-number {
    font-size: 88px;
    color: var(--off-text);
    line-height: 100%;
}
.cataglog-heading {
    position: absolute;
    bottom: 45px;
    font-size: 36px;
    line-height: 100%;
    color: var(--off-text);
    width: 88% !important;
}
.donation-impact-section {
    margin-top: 100px;
    height: 695px;
    background-image: url(../images/ausrelief1Asset3.webp),
        url(../images/Frame519.png);
    background-position: 90%, right;
    background-size: contain;
    background-repeat: no-repeat;
}
.impact-heading {
    font-size: 88px;
    font-weight: 400;
    line-height: 120%;
    color: var(--primary-text);
}

/* Project */
.project-title-section {
    color: var(--off-text);
    margin: 0 auto !important;
    width: 1300px;
    max-width: 1300px !important;
    padding-bottom: 80px;
}
.project-title-main {
    font-size: 62px !important;
    font-weight: 400 !important;
    line-height: 120%;
    margin-bottom: 20px !important;
}
.project-tagline {
    font-size: 24px;
    font-weight: 500;
    line-height: 120%;
}
.quick-donation-section {
    padding: 40px 0;
    background: var(--primary-bg);
}

.quick-donation-title {
    font-size: 24px;
    font-weight: 400;
    line-height: 120%;
    padding-bottom: 24px;
    color: var(--off-text);
}
.quick-donation-container {
    width: 950px;
    margin: 0 auto;
}
.quick-input {
    height: 60px;
    padding: 16px 20px 16px 20px;
    border-radius: 12px;
    border: 2px solid var(--Gray-200, #e5e5e5);
    font-size: 18px;
}
.project-qty {
    padding: 15px 10px 15px 20px !important;
    border-radius: 12px;
    border: 2px solid #e5e5e5;
    background-color: var(--off-bg);
}
.card-price {
    font-size: 40px;
    font-weight: 400;
    line-height: 48px;
    color: var(--primary-text);
    margin-bottom: 15px;
}
.donate-quantity {
    margin-top: 28px;
}
.quick-submit-button {
    padding: 17px 30px;
    border-radius: 80px;
    background: var(--prominent-bg, #01f9c6);
    font-size: 18px;
    font-weight: 400;
    line-height: 140%;
    color: var(--prominent-dark-bg);
}
.quick-submit-button:hover {
    background: var(--prominent-dark-bg);
    color: var(--off-text);
}
.card-catalog-title {
    font-size: 62px;
    font-weight: 400;
    line-height: 120%;
    color: var(--primary-text, #275a91);
}
.card-catalog {
    padding: 80px 0;
    padding-bottom: 32px;
}
.cards-section {
    padding: 32px 0;
    width: 100%;
    overflow-x: scroll;
}
.catalog-card {
    min-width: 413px;
    width: 413px;
}
.p-card-details {
    padding: 24px;
    background: var(--Background-Light-Grey, #f2f2f2);
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}
.card-thumbnail {
    height: 355px;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
.card-title {
    font-size: 32px;
    line-height: 120%;
}
.card-description {
    font-size: 18px;
    font-weight: 400;
}
.card-details .quick-input {
    margin-top: 24px;
}
.card-donate-button {
    margin-top: 24px;
    padding: 10px 18px;
    border-radius: 80px;
    border: 1.5px solid var(--prominent-bg, #01f9c6);
    font-size: 14px;
    color: var(--prominent-dark-bg);
}
.project-donate-btn {
    margin-top: 0px !important;
}
.card-donate-button:hover {
    background: var(--prominent-bg);
}
.descriptio-section {
    padding: 40px 0 80px 0;
}
.descriptio-section .card-catalog-title {
    padding-bottom: 12px;
}
.join-project {
    padding: 36.5px 40px;
    background: var(--primary-bg);
    border-radius: 12px;
    margin-bottom: 80px;
}
.small-text {
    color: var(--off-text);
    font-size: 14px;
    width: 518px;
}
.join-project-btn {
    padding: 17px 24px;
    border-radius: 80px;
    background: var(--prominent-bg, #01f9c6);
    color: var(--prominent-dark-bg);
    font-size: 18px;
    min-width: fit-content;
    margin-left: 10px;
}
.project-gallery {
    margin: 40px 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
}
.gallery-item {
    border-radius: 12px;
    height: 520px;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.gallery-item-4-col-2-row {
    grid-column: span 4;
    grid-row: span 2;
}
.gallery-item-6-col-1-row {
    grid-column: span 6;
}
.gallery-item-2-col-1-row {
    height: 249px;
    grid-column: span 2;
}
/*New Changes in Project Variations Card Design*/
.project-cards-section {
    padding-left: 65px;
}
.cards-container {
    overflow-x: scroll;
    overflow-y: hidden;
}
.cards-container::-webkit-scrollbar {
    width: 80% !important;
    height: 5px;
}
.cards-container::-webkit-scrollbar-thumb {
    background: #888;
}
.project-detail-card,
.project-card-description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.project-card-details {
    height: 340px;
    position: relative;
}
.project-card-donate-button,
.project-donate-quantity {
    position: absolute;
    bottom: 25px;
    width: 88% !important;
}
.project-donate-quantity {
    width: 100% !important;
    bottom: 20px;
}
.project-card-variation-button {
    width: 85% !important;
}
.carousel-item img {
    height: 100vh;
    object-fit: cover;
}
/* Media query for smaller screens (e.g., tablets) */
@media only screen and (max-width: 768px) {
    .footer-item-first {
        margin-top: 38px;
    }
    .footer-item {
        font-size: 16px !important;
    }
    .ausrelief-about {
        font-size: 14px;
    }
    .newsletter-heading {
        font-size: 28px;
    }
    .newsletter-info {
        font-size: 16px;
    }
    .copyright-section {
        position: unset !important;
        margin-top: 8px;
    }
    .footer-row {
        padding: 60px 20px;
    }
    .newsletter-input-group input {
        font-size: 16px !important;
        padding: 14px 24px !important;
    }
    .newsletter-input-group button {
        padding: 14px 30px !important;
        font-size: 16px !important;
    }

    /* Projects */
    .projects-catalogs {
        gap: 14px;
        margin-top: 26px;
    }
    .project-catalog {
        height: 300px;
        padding: 40px 30px;
    }
    .catalog-2 {
        grid-column: span 3;
        height: 280px;
    }
    .catalog-3 {
        height: 380px;
    }
    .our-projects-header {
        display: block !important;
    }
    .impact-heading {
        text-align: start !important;
    }
    .impact-svg {
        width: 420px !important;
    }
    .project-number {
        font-size: 62px;
    }
    .cataglog-heading {
        font-size: 28px;
        bottom: 25px;
        width: 89% !important;
    }
    .donation-impact-section {
        margin-top: 20px;
        height: 765px;
        background-image: url(../images/ausrelief1Asset3.webp),
            url(../images/Frame519.png);
        background-position: center bottom;
        background-size: contain, 100% 180px;
    }
    .donation-impact-section {
        display: block !important;
    }
    .short-label {
        font-size: 16px;
    }
    .project-big-heading {
        font-size: 24px;
        margin-top: 18px;
    }
    .project-ausrelief-logo {
        margin: 0px 0px 18px 0px;
    }
    .projects-details {
        font-size: 16px !important;
    }
    .catalog-heading {
        font-size: 38px !important;
        padding-bottom: 16px;
    }
    .project-filter {
        justify-content: start !important;
        flex-wrap: wrap;
    }
    .filter-buttons {
        padding: 10px 20px;
        margin-bottom: 12px;
    }
    .projects-container {
        padding: 0px 20px !important;
    }

    /* Project */
    .quick-donation-container,
    .project-title-section {
        width: auto !important;
    }
    .project-title-section {
        bottom: -35px !important;
    }
    .card-catalog-title {
        font-size: 38px !important;
    }
    .card-catalog {
        padding: 20px 0;
    }
    .project-description {
        font-size: 16px !important;
    }
    /*New Changes in Project Variations Card Design*/
    .project-cards-section {
        padding-left: 30px;
    }
    .qty .project-qty {
        width: 70px !important;
    }
}

/* Media query for even smaller screens (e.g., smartphones) */
@media only screen and (max-width: 480px) {
    .quick-donation-mobile-section {
        display: block;
        padding: 2rem 1rem;
        background: #eef7fe;
        color: #1f4f7c;
        /* margin: 1rem 0; */
    }
    .toggle-wrapper {
        position: relative;
        justify-content: center;
        width: 300px;
        height: 48px;
        border: 2px solid #1f4f7c;
        border-radius: 999px;
        display: flex;
        align-items: center;
        background: #fff;
        font-family: system-ui, sans-serif;
        overflow: hidden;
        width: 100%;
        margin: 10px 0;
    }

    .toggle-option {
        flex: 1;
        height: 100%;
        border: none;
        background: transparent;
        font-weight: 600;
        color: #1f4f7c;
        cursor: pointer;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: color 0.25s ease;
    }

    .toggle-option .check {
        font-size: 14px;
    }

    .toggle-option:not(.active) .check {
        display: none;
    }

    .toggle-option.active {
        color: #fff;
    }

    .toggle-slider {
        position: absolute;
        top: 4px;
        left: 4px;
        width: calc(50% - 8px);
        height: calc(100% - 8px);
        background: #1f4f7c;
        border-radius: 999px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
    }

    .toggle-wrapper.monthly .toggle-slider {
        transform: translateX(100%);
    }

    .select-wrapper {
        position: relative;
        width: 100%;
        font-family: system-ui, -apple-system, sans-serif;
    }

    .select-wrapper select {
        width: 100%;
        height: 44px;
        padding: 0 44px 0 16px;
        border-radius: 999px;
        border: 2px solid #1f4f7c;
        background: #fff;
        color: #6b7c93; /* placeholder-like */
        font-size: 14px;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .select-wrapper select:valid {
        color: #1f4f7c;
    }

    .select-wrapper select:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(31, 79, 124, 0.15);
    }

    .select-wrapper .chevron {
        position: absolute;
        right: 16px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid #1f4f7c;
        border-bottom: 2px solid #1f4f7c;
        transform: translateY(-50%) rotate(45deg);
        pointer-events: none;
    }

    .select-wrapper select:hover {
        border-color: #2e5e8a;
    }

    .amount-toggle {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 12px;
        font-family: system-ui, -apple-system, sans-serif;
    }

    .amount-toggle label {
        position: relative;
        cursor: pointer;
    }

    .amount-toggle input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .amount-toggle span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 64px;
        height: 36px;
        padding: 0 26px;
        border-radius: 999px;
        border: 2px solid #1f4f7c;
        color: #1f4f7c;
        font-size: 14px;
        font-weight: 600;
        background: #fff;
        transition: background-color 0.25s ease, color 0.25s ease,
            box-shadow 0.25s ease, transform 0.15s ease;
    }

    .amount-toggle input:checked + span {
        background: #1f4f7c;
        color: #fff;
        box-shadow: 0 4px 10px rgba(31, 79, 124, 0.25);
    }

    .amount-toggle span:hover {
        transform: translateY(-1px);
    }

    .amount-toggle input:focus-visible + span {
        box-shadow: 0 0 0 3px rgba(31, 79, 124, 0.25);
    }

    .custom-amount {
        position: relative;
        width: 260px;
    }

    .custom-amount .currency {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #1f4f7c;
        font-weight: 600;
    }

    .custom-amount input {
        width: 100%;
        height: 44px;
        padding: 0 16px 0 32px;
        border-radius: 999px;
        border: 2px solid #1f4f7c;
        font-size: 14px;
        color: #1f4f7c;
        outline: none;
        transition: box-shadow 0.2s ease;
    }

    .custom-amount input::placeholder {
        color: #6b7c93;
    }

    .custom-amount input:focus {
        box-shadow: 0 0 0 3px rgba(31, 79, 124, 0.15);
    }

    .donate-btn {
        margin-top: 32px;
        width: 100%;
        height: 48px;
        border-radius: 999px;
        border: none;
        background: #7cf2a4; /* hijau lembut */
        color: #1f4f7c; /* biru tua */
        font-family: system-ui, -apple-system, sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.5px;
        cursor: pointer;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        transition: transform 0.15s ease, box-shadow 0.2s ease,
            background-color 0.2s ease;
    }

    .donate-btn:hover {
        background: #6be89a;
        box-shadow: 0 6px 14px rgba(31, 79, 124, 0.25);
        transform: translateY(-1px);
    }

    .donate-btn:active {
        transform: translateY(0);
        box-shadow: 0 3px 8px rgba(31, 79, 124, 0.2);
    }

    .donate-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(31, 79, 124, 0.25);
    }

    .donate-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none;
    }

    .footer-item-first {
        margin-top: 26px;
    }
    .footer-item {
        font-size: 14px !important;
    }
    .ausrelief-about {
        font-size: 12px;
    }
    .newsletter-heading {
        font-size: 24px;
    }
    .newsletter-info {
        font-size: 14px;
    }
    .copyright-section {
        position: unset !important;
        margin-top: 8px;
    }
    .footer-row {
        padding: 40px 20px;
    }
    .footer-row .col-md-4 {
        padding-left: 0;
        padding-right: 0;
    }
    .footer-row .col-md-2 {
        padding-left: 0;
        padding-right: 0;
    }
    .newsletter-input-group input {
        font-size: 14px !important;
        padding: 12px 20px !important;
    }
    .newsletter-input-group button {
        padding: 10px 26px !important;
        font-size: 14px !important;
    }
    .project-qty {
        width: 65% !important;
    }
    .qty {
        margin-bottom: 20px;
    }

    /* Projects */
    .projects-catalogs {
        gap: 12px;
        margin-top: 23px;
    }
    .project-catalog {
        height: 200px;
        padding: 30px 20px;
    }
    .catalog-2 {
        grid-column: span 3;
        height: 280px;
    }
    .catalog-3 {
        height: 280px;
    }
    .our-projects-header {
        display: block !important;
    }
    .impact-heading {
        text-align: start !important;
    }
    .impact-svg {
        width: 270px !important;
        height: 230px;
    }
    .project-number {
        font-size: 62px;
    }
    .cataglog-heading {
        font-size: 24px;
        bottom: 25px;
    }
    .donation-impact-section {
        margin-top: 20px;
        height: 765px;
        background-image: url(../images/ausrelief1Asset3.webp),
            url(../images/Frame519.png);
        background-position: center bottom;
        background-size: contain, 100% 180px;
    }
    .donation-impact-section {
        display: block !important;
    }
    .short-label {
        font-size: 14px;
    }
    .project-big-heading {
        font-size: 20px;
        margin-top: 12px;
    }
    .project-ausrelief-logo {
        margin: 0px 0px 12px 0px;
    }
    .projects-details {
        font-size: 14px !important;
    }
    .catalog-heading {
        font-size: 32px !important;
        padding-bottom: 16px;
    }
    .project-filter {
        justify-content: start !important;
        flex-wrap: wrap;
    }
    .filter-buttons {
        padding: 10px 20px;
        margin-bottom: 12px;
    }
    .projects-container {
        padding: 0px 20px !important;
    }

    /* Project */
    .quick-donation-container {
        width: 100% !important;
    }
    .project-title-section {
        width: 90%;
        left: 30px;
        bottom: -50px !important;
    }
    .project-title-main {
        font-size: 28px !important;
        margin-bottom: 0 !important;
    }
    .project-tagline {
        font-size: 14px !important;
    }
    .quick-donation-title,
    .card-catalog-title {
        font-size: 20px;
    }
    .descriptio-section {
        padding: 0 20px;
    }
    .join-project {
        border-radius: 0;
        margin-bottom: 20px;
    }
    .gallery-container {
        padding: 0 20px !important;
    }
    .gallery-item-4-col-2-row {
        grid-column: span 6;
        grid-row: span 1;
    }
    .gallery-item-6-col-1-row {
        grid-column: span 6;
    }
    .gallery-item-2-col-1-row {
        grid-column: span 3;
    }
    .project-gallery {
        gap: 12px;
        margin: 24px 0;
    }
    .gallery-item {
        height: 200px;
    }
    .project-description {
        font-size: 14px !important;
    }
    .other-project {
        padding-top: 24px !important;
    }
    .join-project-description {
        display: unset !important;
    }
    .join-project-btn {
        margin-top: 24px;
        font-size: 14px !important;
        padding: 8px 12px;
        margin-left: 0px;
    }
    .descriptio-section .card-catalog-title {
        padding-bottom: 16px;
    }
    .card-catalog {
        padding: 40px 20px;
    }
    .card-catalog .container {
        padding: 0px !important;
    }
    .cards-section {
        margin: 24px 0 !important;
        display: unset !important;
    }
    .catalog-card {
        margin: 12px 0 !important;
        min-width: 320px !important;
        width: auto !important;
    }
    .card-title {
        font-size: 24px !important;
    }
    .card-description {
        font-size: 14px;
    }
    .card-details {
        padding: 20px !important;
    }
    .small-text {
        width: auto !important;
    }
    /*New Changes in Project Variations Card Design*/
    .project-cards-section {
        padding-left: 0px;
    }
    .qty .project-qty {
        width: 100px !important;
    }
    .project-donate-quantity {
        width: 86% !important;
    }
    .project-card-variation-button {
        width: 106% !important;
    }
    .project-card-donate-button,
    .project-donate-quantity {
        position: relative;
        bottom: 0px;
        width: 100% !important;
    }
    .project-card-details {
        height: 100%;
    }

    .carousel-item img {
        height: 100vh;
        object-fit: cover;
    }
    .carousel-control-next,
    .carousel-control-prev {
        display: none;
    }
    .profile-personal-info {
        width: 165px !important;
    }
}

/* Slider */
.inner-carousel {
    height: 100vh;
}

.text {
    position: absolute;
    /* top: 70%; */
    /* left: 5%; */
    bottom: 0px;
    margin-bottom: 158px;
}

.slider-title {
    font-size: 88px;
    font-weight: 400;
    line-height: 88px;
    color: var(--off-text);
    margin-bottom: 10px;
}

.silder-subtitle {
    font-size: 32px;
    font-weight: 400;
    line-height: 44.8px;
    color: var(--off-text);
    margin: 10px 0px 20px 0px;
}

.silder-btn {
    padding: 10px 20px;
    border-radius: 30px;
    background-color: var(--prominent-bg);
    color: var(--Primary-Navy);
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    border: none;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        354deg,
        rgba(0, 0, 0, 0.3) 36.85%,
        rgba(255, 255, 255, 0) 95.69%
    );
}

.carousel-indicators [data-bs-target] {
    width: 15px !important;
    height: 15px;
    border-radius: 50%;
}

@media only screen and (max-width: 768px) {
    .carousel-inner {
        height: 100%;
    }

    .slider-title {
        font-size: 50px;
        line-height: 50px;
    }

    .silder-subtitle {
        font-size: 25px;
        font-weight: 400;
        line-height: 24.8px;
    }
}
@media only screen and (max-width: 480px) {
    .slider-title {
        font-size: 30px;
        line-height: 30px;
    }
    .clearfix {
        height: 80px;
    }
    .profileclearfix {
        height: 120px;
    }

    .silder-subtitle {
        font-size: 18px;
        font-weight: 400;
        line-height: 18.8px;
    }
    .text {
        /* top: 30%; */
        /* left: 5%; */
        bottom: 0px;
        margin-bottom: 158px;
    }
    .silder-btn {
        padding: 12px 20px;
        font-size: 16px;
        font-weight: 400;
        line-height: 19.2px;
    }
    .project-catalog:nth-child(4) {
        grid-column: span 6;
    }
}