.section.section-contact {
    background-image: none !important;
}
a{
    text-decoration: none;
    color:#67bcd1;
}
.sm-bottom20 {
    margin-bottom: 20px;
}

.modal-overlay {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
}

.activemodal {
    display: flex;
}

.login-box-header {
    background: #51459E;
    color: #fff;
    padding: 20px 30px;
}

.modal-box {
    width: 500px;
    background: #fff;
    min-height: 300px;
}

.login-box-body {
    padding: 30px;
    position: relative;
}

.login-box-footer {
    background: #F5F3FF;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
}

.login-box-footer a {
    text-decoration: none;
    font-size: 14px;
}

.opacity-10 {
    opacity: 0.1;
}

.opacity-20 {
    opacity: 0.2;
}

.opacity-30 {
    opacity: 0.3;
}

.opacity-40 {
    opacity: 0.4;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-60 {
    opacity: 0.6;
}

.opacity-70 {
    opacity: 0.8;
}

.opacity-80 {
    opacity: 0.8;
}

.opacity-90 {
    opacity: 0.9;
}

.opacity-100 {
    opacity: 1;
}

.form-control {
    width: 100%;
    display: block;
    border: 1px solid #C2C2C2;
    padding: 15px;
    border-radius: 5px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    font-size: 14px;
}

.btn.btn-primary {
    display: block;
    width: 100%;
    background: #51459E;
    padding: 15px;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

.row:after {
    content: '';
    display: block;
    clear: both;
}

.col-sm-6 {
    padding-left: 15px;
    padding-right: 15px;
    float: left;
    width: 50%;
}

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 160px;
    height: 160px;
}

.lds-ripple div {
    position: absolute;
    border: 4px solid #000;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes lds-ripple {
    0% {
        top: 72px;
        left: 72px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 144px;
        height: 144px;
        opacity: 0;
    }
}

.response {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    justify-content: center;
    align-items: center;
    background: #fff;
    z-index: 50;
}

.task-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.task-status {
    font-size: 12px;
    color: #56974B;
}

.task-status.task-pending {
    color: #E55656;
}

.task-status img {
    position: relative;
    top: -2px;
    left: -2px;
}

.task-item {
    display: flex;
    border: 1px solid #E8E8E8;
    padding-right: 0px;
    margin-bottom: 20px;
    background: #fbfbfb;
    border-radius: 5px;
}

.task-logo {
    flex-basis: 82px;
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 0px;
    padding: 10px;
}

.task-description h4 {
    font-size: 14px;
    margin: 0px;
    padding: 0px;
    color: #505050;
}

.task-description {
    flex: 1;
    padding: 10px;
}

.task-description a {
    color: #3B20ED;
    font-size: 14px;
}

.task-verification {
    flex-basis: 144px;
    flex-grow: 0;
    flex-shrink: 0;
    border-left: 1px solid #E8E8E8;
    padding: 5px 14px;
}

.task-verification p:first-child {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 10px;
}

.task-verification a {
    text-decoration: none;
    background: #51459E;
    color: #fff;
    display: block;
    padding: 2px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}

.task-description a {
    text-decoration: none;
    font-size: 14px;
    color: #3B20ED;
}

.remaining-task-description {
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 20px;
}

.remaining-task-wrap {
    padding: 30px;
}

.no-padding {
    padding: 0px !important;
}

.font-12 {
    font-size: 12px;
}

.verified_follower {
    padding-top: 15px;
}

.sp-30 {
    padding: 30px;
}

.btn-outline {
    background: #fff;
    border: 1px solid #000;
    color: #000;
}

.response hr {
    height: 1px;
    border: none;
    border-bottom: 1px solid #eaeaea;
    margin: 20px 0;
}

.response .long-error {
    padding: 50px;
    text-align: left;
}

.action-buttons {
    margin-top: 50px;
}

.response.error {
    position: static;
    text-align: left;
    display: block !important;
    background: #fff2f2;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 3px;
    border: 1px solid #ffbfbf;
    color: #bb3c3c;
    font-size: 14px;
}

/* pagination styling */
.pagination {
    height: 30px;
    font-size: 0.75em;
    margin: 30px auto;
    display: flex;
    margin-bottom: 40px;
    justify-content: center;
}

.pagination li {
    display: block;
    width: 40px;
    height: 40px;
    background: #fff;
    margin: 0 3px;
    border-radius: 3px;
    overflow: hidden;
}

.pagination li a {
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    line-height: 27px;
    text-decoration: none;
    display: block;
    text-align: center;
    color: #000;
    text-shadow: 1px 1px 0 #fff;
    margin-right: 3px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f1f1;
    border: 1px solid #dfdede;
}

.pagination li.disabled a {
    visibility: hidden;
}

.pagination li.copy a {}

.pagination li.previous a {
    position: relative;
}


.pagination ul li.previous a:hover {}

.pagination ul li.number a:hover {}

.pagination ul li.next a {}

.pagination ul li.next a:hover {}

.pagination li.copy.disabled a {
    cursor: default;
}

.pagination li.active a {
    color: #fff;
    cursor: default;
    text-shadow: 0 1px 0 #585858;
    background: #2c11c1;
    border-radius: 5px;
}

.pagination li.active a:hover {
    background-position: right 0;
}

.h-60 {
    height: 60px;
    overflow: hidden;
}

.h-100 {
    height: 100px;
    overflow: hidden;
}

.freebie-categories {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: left;
    flex-wrap: nowrap;
}

.freebie-categories li:first-child a {
    /* border-left: 1px solid #eaeaea; */
}

.freebie-categories li a {
    text-decoration: none;
    display: block;
    padding: 10px 20px;
    border: 1px solid #eaeaea;
    color: #5f5f5f;
    border-radius: 110px;
    margin-right: 10px;
}

.section-categories-wrap {
    background: #fff;
    /* border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea; */
    overflow: hidden;
    overflow-x: auto;
}

.section-for-follower-grid {
    padding-top: 20px !important;
}

.footer-categories-grid ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.freebie-categories li {
    flex-grow: 0;
    flex-shrink: 0;
}

.footer-categories-grid li a {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    opacity: .5;
    color: #fff;
    font-weight: 400;
    text-decoration: none
}

.footer-categories-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 70px;
    margin-top: 30px;
}

@media screen and (max-width: 768px) {
    .footer-categories-grid {
        grid-template-columns: 1fr;
    }
}

.project-tags {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: flex;
    flex-flow: wrap;
}

.project-tags li a {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    font-size: 14px;
    color: #777;
    border: 1px solid #ccc;
    line-height: 14px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-weight: 400;
}


.project-tags li a:hover {
    color: #f00;
}

.h2-heading {
    margin-top: 20px;
    margin-bottom: 10px;
}

.quote-header {
    width: 800px;
    margin: 0 auto;
}

.section-request-quote {
    background: #F8F8F8;
}

.section-request-quote .quote-form {
    width: 804px;
    background: #fff;
    border-radius: 10px;
    margin: 0 auto;
    position: relative;
    top: -60px;
    min-height: 600px;
}

.section-request-quote .quote-form {}

.quote-form .form-group {
    position: relative;
}

.quote-form label.inputlabel {
    position: absolute;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #D2D2D2;
    top: 15px;
    left: 20px;
    transition: all .2s;
}

.col-sm-12 {
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

/* Customize the label (the container) */
.cr_container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Hide the browser's default checkbox */
.cr_container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark_box {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border: 1px solid #dadada;
}

/* On mouse-over, add a grey background color */
.cr_container:hover input~.checkmark_box {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.cr_container input:checked~.checkmark_box {
    background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark_box:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.cr_container input:checked~.checkmark_box:after {
    display: block;
}

/* Style the checkmark/indicator */
.cr_container .checkmark_box:after {
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid #313bac;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}





.cr2_container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.cr2_container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom radio button */
.checkmark_radio {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
    border: 1px solid #000;
}

/* On mouse-over, add a grey background color */
.cr2_container:hover input~.checkmark_radio {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.cr2_container input:checked~.checkmark_radio {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark_radio:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.checkmark_radio input:checked~.checkmark_radio:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.cr2_container .checkmark_radio:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}


.radio_buttons_wrap {
    margin: 20px 0;
}

.radio_buttons_wrap {
    display: flex;
}

.radio_button_box {
    margin-right: 20px;
}

.header-our-work {
    min-height: 436px;
    background: #313BAC;
    color: #fff;
    padding-top: 150px;
}

.header-our-work h1 {
    margin-bottom: 40px;
}

.header-portfolio-item {
    min-height: 518px;
    background: #313BAC;
    color: #fff;
    padding-top: 150px;
}

.header-portfolio-item h1 {
    font-size: 40px;
    margin-bottom: 50px;
}

.portfolio-summary {
    display: flex;
}

.portfolio-summary-item {
    margin-right: 40px;
}

.portfolio-summary-item p {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}

.grid-portfolio-item {
    background: #fff;
    border: 1px solid #E9E9E9;
    padding: 26px;
}

.grid-portfolio-item a {
    text-decoration: none;
    color: #000;
}

.grid-portfolio-item .tag {
    font-size: 10px;
    line-height: 10px;
    padding: 8px 15px;
    background: #dccafc;
    color: #4b0ae5;
}

.grid-portfolio-item h3 {
    font-size: 20px;
    height: 36px;
    overflow: hidden;
    margin-bottom: 34px;
    margin-top: 16px;
}

.grid-portfolio-item .grid-portfolio-summary p {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.grid-portfolio-item .grid-portfolio-summary p strong {
    font-size: 16px;
    font-weight: bold;
}

.grid-portfolio-summary-wrap {
    display: flex;
    justify-content: space-around;
}

.grid-portfolio-summary {
    flex: 1;
}

.grid-portfolio-summary:nth-child(2) {
    border-left: 1px solid #d2d2d2;
    border-right: 1px solid #d2d2d2;
    padding-left: 30px;
}

.grid-portfolio-summary:last-child {
    padding-left: 30px;
}

.portfolio_preview_image {
    width: 100%;
    height: 780px;
    top: -70px;
    left: 0px;
    overflow: hidden;
    position: relative;
    background: url('../uploads/p2/full-preview-treaty-fruity-landing-page.png');
    z-index: 10;
    background-position: top left;
    box-shadow: 0px -44px 70px rgb(0 0 0 / 10%);
    transition: all .5s;
}

.fullViewPreview {
    height: auto;
}

.portfolio_preview_image.fullViewPreview .view_full_page {
    display: none;
}

.portfolio_preview_image:before {
    position: absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, rgba(248, 248, 248, 0) 0%, #F8F8F8 40%);
    z-index: 999;
    content: '';
    bottom: -100px;
    height: 310px;
}

.project_desc {
    width: 690px;
    margin: 0 auto;
    margin-bottom: 30px;
}

.project_desc h2 {
    margin-bottom: 20px;
}

.portfolio-item-image {
    top: auto;
}

.related-work-arrows-wrap {}

.view_full_page {
    position: absolute;
    width: 250px;
    background: #673ab7;
    border-radius: 20px;
    left: 50%;
    bottom: 100px;
    margin-left: -125px;
    z-index: 999;
    text-align: center;
    color: #fff;
    padding: 10px 30px;
}

.cta-wrap {
    min-height: 394px;
    background: url("../images/get-started.svg");
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 1160px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    padding-top: 130px;
}

.cta-wrap p {
    width: 680px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 27px;
    font-weight: normal;
    margin-top: 10px;
}

.cta-wrap .btn {
    height: 60px;
    font-size: 18px;
    font-weight: 400;
    padding-top: 17px;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 30px;
    background: #F9896B;
}

.related-work {
    background: #f8f8f8;
    padding-top: 0px;
}

.recent-work-heading-wrap {
    display: flex;
    justify-content: space-between;
}

.related-work-arrows-wrap {
    display: flex;
    justify-content: flex-end;
}

.related-work-navigation p {
    font-size: 12px;
    margin-top: 12px;
    opacity: 0.4;
}

.related-work-arrows-wrap a {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 155, 0.1);
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.recent-work-heading-wrap h1 {
    font-size: 40px;
    width: 700px;
    max-width: 100%;
    margin-bottom: 30px;
}

.project-desc-wrap {
    margin-top: -120px;
    z-index: 219;
    position: relative;
}

.related-work-tags-wrap {
    display: flex;
}

.related-work-tag {
    background: rgba(196, 196, 196, 0.1);
    margin-right: 10px;
    font-size: 14px;
    line-height: 14px;
    padding: 10px 20px;
    font-weight: normal;
    border-radius: 5px;
}

.recent-work-summary {
    display: flex;
    margin-top: 30px;
    color: rgba(255, 255, 255, 0.7)
}

.recent-work-summary .recent-work-summary-item {
    flex-basis: 165px;
    padding: 0 20px;
    position: relative;
}

.recent-work-summary .recent-work-summary-item:after {
    position: absolute;
    height: 50px;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
    content: '';
    right: 10px;
    top: 0px;
}

.recent-work-summary .recent-work-summary-item p {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}

.recent-work-summary-item:nth-child(1) {
    padding-left: 0px;
}

.recent-work-summary-item:last-child {
    flex: 1;
}

.recent-work-summary-item:last-child:after {
    opacity: 0;
}

.recent-work-summary .recent-work-summary-item p.work-testimonial {
    font-size: 12px;
    line-height: 18px;
    font-weight: 400 !important;
    text-transform: none;
}

.hide-full-preview-button .view_full_page,
.hide-full-preview-button.portfolio_preview_image:before {
    display: none;
}

.hide-full-preview-button {
    margin-bottom: 100px;
}

.related-work-tags-wrap a {
    color: #fff;
    text-decoration: none;
}

.recent-work-summary-item:last-child p {
    text-transform: none;
    line-height: 18px;
    font-weight: 400;
}

.form-input-groups {
    padding: 50px;
}

.form-input-groups:nth-child(even) {
    background: #eee;
}

.input-group-head {
    margin-bottom: 30px;
}

.form-input-groups h4 {
    text-transform: uppercase;
    font-size: 20px;
    color: #313bac;
}

.form-input-groups p.subtext {
    font-size: 14px;
}

.followersonlywrap p a {
    color: #fff;
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    .form-input-groups {
        padding: 20px;
    }

    .col-sm-6 {
        width: 100% !important;
        float: none;
    }

    .quote-header {
        width: 100%;
    }

    .section-request-quote .quote-form {
        width: 100%;
    }

    .quote-header h1 {
        font-size: 24px;
        line-height: 31px;
    }
}
















.filled-text label.inputlabel,
input:focus+label.inputlabel,
.filled-text label.inputlabel,
textarea:focus+label.inputlabel,
.filled-text label.inputlabel,
select:focus+label.inputlabel {
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    text-transform: uppercase;
    color: #A9A9A9;
    top: 12px;
    left: 15px;
}

.quote-form .form-control {
    padding-top: 26px;
}

.sm-top20 {
    margin-top: 20px;
}

.project-categories-head {
    display: flex;
    margin: 0px;
    padding: 0px;
    margin-top: 30px;
    justify-content: center;
    list-style: none;
}

.project-categories-head a {
    display: block;
    padding: 10px;
    color: #000;
    text-decoration: none;
}

.project-categories-head a:hover {
    color: #f00;
}

.section.section-work-header {
    min-height: 300px;
    padding-top: 140px;
    background-color: #eeeeee;
    color: #3b3b3b;
}

.section.section-work-header a {
    color: #fff;
}

.nav-white .top-nav a {
    color: #fff;
}

.nav-white .navactive a {
    color: #000;
}

.nav-white .logo-dark {
    display: none;
}

.nav-white .navactive .logo-white {
    display: none;
}

.nav-white .navactive .logo-dark {
    display: block;
}

.grid-portfolio-item-link {
    display: block;
}

.portfolio-image-thumb-wrap {
    height: 345px;
    border: 1px solid #d2d2d2;
    width: 100%;
    overflow: hidden;
}

.grid-portfolio-item .longThumb .portfolio-image-thumb {
    transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    transition: all 1s cubic-bezier(.17, .67, .83, .67);
}

.grid-portfolio-item:hover .longThumb .portfolio-image-thumb {
    transform: translate3d(0px, -85%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    transition: all 7s cubic-bezier(.17, .67, .83, .67);
}

.grid-portfolio-item .rectangleThumb .portfolio-image-thumb {
    transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(.17, .67, .83, .67);
}

.grid-portfolio-item:hover .rectangleThumb .portfolio-image-thumb {
    transform: translate3d(0px, 0%, 0px) scale3d(1.2, 1.2, 1.2) rotateX(0deg) rotateY(0deg) rotateZ(5deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    transition: all 1s cubic-bezier(.17, .67, .83, .67);
}

.section-description .portfolio-details {
    max-width: 780px;
    margin: 0 auto;
}

.section-description .portfolio-details p {
    margin-bottom: 20px;
}

#signupmodal .modal-box {
    width: 980px;
}

#signupmodal .modal-box .relative {
    display: grid;
    grid-template-columns: 400px 1fr;
    height: auto;
    grid-column-gap: 50px;
}

#signupmodal .modal-box .relative iframe {
    width: 100%;
    min-height: 350px;
}



body,
h1,
h2,
p,
label {
    font-family: Roboto !important;
}

.section.section-contact.contact-page {
    background: #fff;
    padding-top: 170px;
}

.top-nav.w-nav .container {
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 16px;
    padding-top: 16px;
}

.grid-1x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 36px;
    margin-bottom: 35px;
}

.grid-1x15 {
    display: grid;
    grid-template-columns: 2.15fr 1fr;
    grid-column-gap: 36px;
    margin-bottom: 35px;
}

.new-form-control,
.btn-submit {
    border: none;
    background: #FAFAFA;
    width: 100%;
    display: block;
    height: 52px;
    padding-left: 20px;
    border-radius: 0px;
    border: 1px solid #FAFAFA;
}

.input-controls label {
    font-size: 12px;
    color: #67bcd1;
    text-transform: uppercase;
    font-weight: 500;
}

.contact-form-wrap {
    position: relative;
    padding-left: 200px;
}

.contact-form-wrap h1 {
    margin-bottom: 90px;
    font-size: 35px;
    font-weight: 500;
    line-height: 1.3;
}

textarea.new-form-control {
    height: 153px;
    padding-top: 20px;
}

.new-form-control:active,
.new-form-control:focus {
    box-shadow: none;
    outline: none;
    border: 1px solid #000;
}

.btn-submit {
    background: #000;
    text-align: center;
    font-size: 14px;
    padding-top: 14px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

::-webkit-input-placeholder {
    /* Edge */
    color: #D3D3D3;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #D3D3D3;
}

::placeholder {
    color: #D3D3D3;
}

.faqs-section {
    padding-top: 100px;
}

.faqs-section h2 {
    margin-bottom: 46px;
}

.faq-question-2 p {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 22px;
}

.faq-item-2 {
    margin-bottom: 40px;
}

.faq-answer-2 {
    display: none;
}

.faq-answer-2 p {
    font-size: 14px;
    color: #565656;
    font-weight: 400;
}

.faq-answer-2 p {
    margin-bottom: 20px;
}

.connectoptions {
    display: none;
}

.required {
    color: #f00;
    position: relative;
    left: 3px;
    top: -0px;
    font-size: 18px;
}

.section.section-footer {
    background: #000;
}

.footer-cube-2 {
    display: none;
}

.my-form {
    position: relative;
}

.calendlyoverlayiframewrap iframe {
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

.calendlyoverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99999;
}

.closeOverlayBox {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    background: #000;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.alert {
    padding: 20px;
    margin-bottom: 30px;
}

.alert ol {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.alert-danger {
    background: #ffecef;
    border: 1px solid #ffabab;
    color: #a35858;
}

.alert-info {
    background: #e3f5ff;
    color: #09456f;
    border: 1px solid #4077a2;
}

.alert-success {
    background: #e3ffe5;
    color: #096f13;
    border: 1px solid #40a24a;
}

.faq-question-2 {
    cursor: pointer;
}

.portfolio-item-body {
    padding: 20px;
}

.card.no-shadow {
    border-radius: 0px;
}

.work-grid {
    display: -ms-grid;
    display: grid;
    grid-auto-columns: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
}

.portfolio-item-body {
    padding: 20px;
    border: 1px solid #dedede;
    border-top: 0px;
    background: #fafafa;
}

.portfolio-item-body .tag {
    display: none;
}

.big-heading {
    font-family: 'THICCCBOI';
    font-style: normal;
    font-weight: 700;
    font-size: 116px;
    line-height: 134px;
    /* identical to box height */
    color: #000000;
    margin-bottom: 100px;
    ;

}

.page-header-new {
    padding-top: 211px;
    padding-bottom: 70px;
    ;
}

.page-heading-desc {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-heading-desc-stats {
    display: flex;
}

.page-heading-desc-stats {
    display: flex;
}

.page-heading-desc-stats-number {
    font-size: 116px;
    font-weight: 300;
    ;
    margin-right: 20px;
    ;
}

.page-heading-desc-text {
    max-width: 370px;
}

.page-heading-desc-stats-item {
    display: flex;
    margin-left: 50px;
    align-items: center;
}

.page-heading-desc-stats-text {
    max-width: 100px;
}

.header-portfolio-item {
    background: #fff;
    color: #000;
}

.header-portfolio-item * {
    color: #000 !important;
}

.bg-white {
    background: #fff !important;
}

.big-heading-2 {
    font-size: 56px;
    line-height: 74px;
}

.freebie-header-inf-wrap h1 {
    margin-bottom: 0px;
    ;
}

.freebie-header-inf-wrap .project-categories-head {
    margin: 0px;
    padding: 0px;
    margin-bottom: 100px;
    justify-content: left;
}

.section.section-services {
    bottom: 0px;
}

.header-main-info h1 {
    margin: 0px;
}

.main-des-text {
    width: 492px;
    font-size: 20px;
    line-height: 1.4;
}

.header-main-info {
    margin-bottom: 160px;
}

.hello-im {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
}

.header-main-info .arshakir-image {
    width: 298px;
}

.header-main-info {
    display: flex;
    align-items: center;
}

.header-main-info-image {
    margin-right: 60px;
}

.btn {
    border-radius: 0px;
}

.btn-black {
    height: 52px;
    padding-top: 14px;
    padding-left: 40px;
    padding-right: 40px;
}

.btn-black img {
    margin-left: 10px;
    transition: all .1s;
}

.btn-black:hover img {
    transform: rotate(45deg);
}

.main-des-text {
    margin-bottom: 20px;
}

.tools-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tools-flex img {
    display: block;
    width: 140px;
}

.my-mission {
    width: 840px;
    position: relative;
    display: flex;
    justify-content: end;
}

.my-mission h2 {
    width: 476px;
    position: absolute;
    top: 140px;
    left: 40px;
    font-size: 44px;
}

.my-mission-wrap {
    display: flex;
    justify-content: end;
}

.my-technologies {
    display: grid;
    grid-template-columns: 2fr 3fr 3fr;
    grid-column-gap: 0px;
}

.my-technologies ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.tech-box {
    position: relative;
    margin-top: 100px;
}

.tech-box h2 {
    font-size: 44px;
    position: absolute;
    bottom: 40px;
    width: 480px;
    left: -300px;
}

.tech-desc p {
    font-size: 14px;
    font-weight: 700;
    max-width: 375px;
    padding-top: 300px;
    padding-left: 60px;
}

.section.about-shakir {
    background: none !important;
}

.achievement-box.acheivment-upwork {
    background-image: url("../images/dribbble.svg");
    color: #000;
    background-color: #FBFBFB;
    border-radius: 0px;
}

.achievement-box.achiement-two-comma {
    background-image: url("../images/twocoma.svg");
    background-color: transparent;
    border-radius: 0px;
}

.grid-about-shakir {
    display: grid;
}

body {
    background-image: url("../images/body-bg.svg");
    background-repeat: repeat-y;
    background-position: center;
}

.section {
    background: transparent;
}

.tech-box img,
.my-mission img {
    filter: grayscale(1);
    position: relative;
    z-index: -1;
}

@media screen and (max-width: 480px) {
    .contact-form-wrap {
        padding-left: 0px;
    }

    .grid-1x2 {
        grid-template-columns: 1fr;
        margin-bottom: 0px;
    }

    .input-controls {
        margin-bottom: 30px;
    }

    .input-controls input,
    .input-controls select,
    .input-controls textarea {
        border: 1px solid #dadada;
    }

    .contact-form-wrap h1 {
        line-height: 1.3;
        font-size: 23px;
        margin-bottom: 30px;
    }

    .page-heading-desc-stats-number {
        font-size: 80px;
        font-weight: 300;
        margin-right: 20px;
        line-height: 80px;
    }

    .page-heading-desc-stats-item {
        margin-left: 0px;
    }

    .page-heading-desc-stats,
    .page-heading-desc {
        display: block;
    }

    .big-heading-2 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 20px;
    }

    .work-grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .page-header-new {
        padding-top: 130px;
    }

    .page-heading-desc-stats {
        display: none;
    }

    .copy.previous.disabled {
        display: none;
    }

    .pagination {
        list-style: none;
    }

    .header-main-info {
        display: block;
    }

    h1.big-heading {
        font-size: 40px;
        line-height: 60px;
    }

    .header-main-info-image {
        background: #000;
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }

    .header-main-info .arshakir-image {
        width: 180px;
    }

    .page-index .header-main-info {
        margin-bottom: 50px;
    }

    .page-index .page-header-new {
        padding-bottom: 0px;
    }

    .my-mission {
        display: block;
        position: static;
        width: 100%;
    }

    .my-mission h2,
    .tech-box h2 {
        width: auto;
        position: static;
        top: 140px;
        left: 40px;
        font-size: 24px;
        line-height: 31px;
        margin-bottom: 20px;
    }

    .my-mission-wrap {
        display: block;
    }

    .project-categories-head {
        flex-wrap: wrap;
    }

    .freebie-header-inf-wrap .project-categories-head {
        margin-bottom: 0px;
    }

    .project-categories-head a {
        padding-lefT: 0px;
    }

    .page-project-single h1.big-heading {
        font-size: 30px;
        line-height: 40px;
    }

    .page-project-single .page-header-new {
        padding-bottom: 0px;
    }

    .page-project-single .image-thumb {
        width: 25%;
    }

    .my-technologies {
        display: block;
    }

    .tech-box img {
        display: none;
    }

    .tech-desc p {
        font-size: 14px;
        font-weight: 700;
        max-width: 100%;
        padding-top: 0;
        padding-left: 0;
    }

    .tools-flex {
        display: grid;
        align-items: center;
        justify-content: space-between;
        grid-template-columns: 1fr 1fr 1fr;
        grid-row-gap: 20px;
    }

    .tools-flex img {
        display: block;
        width: 80px;
    }

    .section-tools {
        padding: 40px 0;
    }

    .btn-black {
        display: block;
        text-align: center;
    }

    .my-technologies {
        padding-top: 40px;
    }

    .tech-box {
        margin-top: 40px;
    }

    .section.about-shakir {
        padding: 50px 0;
    }

    .stats-bio h3 {
        font-size: 20px;
        line-height: 26px;
    }

    .stats-bio h3 .spurr {
        margin-top: 20px;
    }

    .stats-bio {
        margin-bottom: 50px;
    }

    .about-shakir-image {
        display: none;
    }

    .grid-about-shakir {
        margin-top: 0px;
    }

    .section.section-work.overflow-hidden {
        padding-left: 0px;
    }

    .grid-portfolio {
        grid-template-columns: 1fr;
    }

    .main-des-text {
        width: 100%;
    }
}

.section-contact-new {
    background: #f2f2f2;
    padding: 100px 0px;
}

.section-contact-new .contact-form-wrap {
    padding-left: 0px;
    max-width: 980px;
    margin: 0 auto;
}

.grid-about-shakir {
    grid-column-gap: 40px;
    margin-top: 0px;
}

.project-header-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 40px;
}

.font-500 {
    font-weight: 500;
}

.project_category_tag {
    display: block;
    margin-right: 10px;

    margin-bottom: 10px;
}

.project_category_tags {
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
}

.project_category_tags a {
    text-decoration: none;
    font-size: 12px;
    color: #5abd7b;
    padding: 5px 10px;
    background-color: #181d29;
    border:1px solid #485572;
    display: block;
    border-radius: 50px;
}

.page-header-project {
    padding-top: 150px;
    padding-bottom: 70px;

}

.download_figma_freebie {
    display: inline-block;
    background: #000;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    font-weight: 500;
    text-transform: uppercase;
    margin-right: 10px;
}

.btn_other_software_template span,
.download_figma_freebie span {
    margin-left: 10px;
}

.btn_other_software_template {
    display: inline-block;
    background: #fff;
    color: #000;
    text-decoration: none;
    padding: 10px 14px;
    border: 1px solid #000;
    text-transform: uppercase;
    margin-right: 10px;
    font-size: 13px;
}

.buyFullTemplateWrap {
    padding: 20px;
    background: #fbfbfb;
    border: 1px dashed #dadada;
    margin-top: 30px;
}

.btn_other_software_template:hover {
    color: #fff;
    background: #000;
}

.sm-bottom30 {
    margin-bottom: 30px;
}

.sm-top30 {
    margin-top: 30px;
}

.buy-now-heading {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
}

/* Owl Carousel */

.owl-dot {
    width: 30px !important;
    height: 4px !important;
    background-color: #B3B3B3 !important;
    margin-right: 6px !important;
}

.owl-dot.active {
    background-color: #455AFB !important;
}

#owl-carousel {
    position: relative;
}

.owl-nav {
    position: absolute;
    top: 48%;
    width: 100%;
    transform: translateY(-50%);
}

.owl-dot:focus {}

.owl-prev,
.owl-next {
    background: transparent;
    font-size: 2em;
}

.owl-prev:focus,
.owl-next:focus {}

.owl-dot:focus-visible,
.owl-prev:focus-visible,
.owl-next:focus-visible {}

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

.owl-prev {
    margin-left: -54px !important;
}

.owl-next {
    margin-right: -52px !important;
    float: right;
}

.owl-prev:before {
    content: "<";
}

.owl-next:before {
    content: ">";
}

.owl-prev span,
.owl-next span {
    display: none;
}

.owl-item {
    box-shadow: 0 10px 20px -15px rgba(0, 0, 0, 0.20);
    transition: 200ms;
    text-align: center;
    background-color: #fff;
}

.owl-item.active {
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.25);
    transition: 200ms;
}

.owl-item {
    display: inline-block;
}

.templates-slider-mask.new {
    max-width: 900px;
    padding-bottom: 0;
}

.freebie-details-wrap {
    display: grid;
    grid-template-columns: 1fr 360px;
    grid-column-gap: 50px;
    margin-bottom: 70px;
}
.related_items{
    padding-bottom: 50px;
}
.related_items h2{
    margin-bottom: 30px;
    font-size: 30px;
}

.sp-top30 {
    padding-top: 30px;
}

.feature-collapisble-collapsed .feature-collapsible-body {
    display: none;
}

.feature-collapisble-header {
    padding: 18px 15px;
    position: relative;
    background: #0a0c14;
    font-size: 14px;
    font-weight: 600;
}

.feature-collapsible-body {
    padding: 0 15px;
    position: relative;
    background: #0a0c14;
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 18px;
    color: #888;
}

.features-collapisble-wrapper {
    margin-bottom: 5px;
    cursor: pointer;
}

.feature-collapisble-header img {
    position: absolute;
    right: 15px;
    top: 24px;
    transition: all .3s;
    transform: rotate(180deg);
}

.feature-collapisble-collapsed .feature-collapisble-header img {
    transform: rotate(0deg);
}

.tab-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    border-bottom: 1px solid #495572;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.tab-list li {
    padding-right: 30px;
}

.tab-list li a {
    opacity: 0.4;
    color: #67bcd1;
    font-size: 18px;
}

.tab-list li a.ativeDescTab {
    opacity: 1;
}

.tab-details {
    display: none;
    background: #0a0c14;
    padding:30px;
}

.btn_other_software_template .coming-soon {
    display: none;
}

.btn_other_software_template {
    position: relative;
}

.btn_other_software_template:hover .coming-soon {
    position: absolute;
    width: 110px;
    font-size: 12px;
    background: #000;
    color: #fff;
    padding: 5px 10px;
    top: -45px;
    display: block;
    left: 50%;
    margin-left: -55px;
}

.btn_other_software_template .coming-soon::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: #000;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
}

.freebie-details-wrap h3 {
    margin: 20px 0;
}

.freebie-details-text p {
    margin: 20px 0;
}

.freebie-details-text li p {
    margin: 0px;
}

.pp2 {
    display: flex;
    column-gap: 20px;
    justify-content: space-between;
}

.pp2 h4 {
    flex-basis: 55px;
    flex-grow: 0;
    flex-shrink: 0;
}

.feebies-page-heading {
    font-size: 76px;
}

.upload-component-modal-wrap {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999999;
    display: none;
}

.upload-component-modal-wrap.activeupload {
    display: flex;
    justify-content: center;
    align-items: center;
}

.upload-component-modal {
    width: 850px;
    background: #fff;
    padding: 50px;
}

.component-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(386px, 1fr)) !important;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
}

.component-section {
    padding-top: 95px;
    padding-bottom: 0px;
}

.justify-right {
    display: flex;
    justify-content: flex-end;
}

.grid-1x3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 36px;
    margin-bottom: 35px;
}

.page-components .new-form-control {
    border: 1px solid #e9e9e9
}

.top-nav.w-nav .container {
    max-width: 95%;
}

.page-for-followers .container,
.page-projects.page-index .container,
.page-figmacomponents.page-index .container,
.page-for-followers-2 .container,
.page-home .container,
.page-components .container,
.page-billing-and-invoices .container,
.page-profile .container {
    max-width: 95%;
}

.components-d {
    display: flex;
    column-gap: 30px;

}

.component-sidebar {
    flex-basis: 350px;
    width: 350px;
    background: #181d29;
    border-right: 1px solid #485572;
}

.component-thumbs-side {
    flex: 1;
    padding: 20px 0;
    padding-bottom: 100px;
}

.page-components {
    background: #181d29;
}

.component-grid-image-wrap {
    position: relative;
    min-height: 300px;
}

.component-grid-image-wrap .section-tag {
    background: #00000052;
    color: #fff;
    font-size: 8px;
    border-radius: 0;
    padding: 0px 10px;
    margin-right: 5px;
}

.component-grid-image-wrap .section-tag:last-child {
    margin-right: 0px;
}

.grid-item-meta {
    position: absolute;
    top: 0;
    display: flex;
    right: 0;
}

.component-sidebar {
    padding-right: 30px;
    padding-top: 30px;
}

.component-sidebar .grid-1x2 {
    column-gap: 10px;
}

.component-sidebar label {
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.component-sidebar h5 {
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.checkbox-container {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input~.checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked~.checkmark {
    background-color: #444;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
    left: 7px;
    top: 3px;
    width: 3px;
    height: 8px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.component-grid-image-wrap .quick-grid-actions-wrap {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 30px 50px;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s;
}

.component-grid-image-wrap:hover .quick-grid-actions-wrap {
    opacity: 1;

}

.quick-grid-actions-wrap a {
    display: block;
    padding: 15px;
    text-align: center;
    background: #fff;
    margin-bottom: 10px;
    color: #000;
    text-decoration: none;
    min-width: 200px;
}

.quick-grid-actions-wrap a:last-child {
    margin-bottom: 0px;
}

.light-version-button {}

a.dark-version-button {
    background: #1C1C24;
    color: #a1a2b2;
}

a.view-details-button {
    background: #1fc68b;
    color: #fff;
}

.component-details-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99999;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.component-details {
    width: 1200px;
    height: 800px;
    background: #fff;
    display: grid;
    grid-template-columns: 1fr 300px;
}

.component-detail-side {
    min-height: 800px;
    border-right: 1px solid #ddd;
    overflow-y: auto;
}

.component-detail-meta {
    padding: 25px;
}

.component-detail-meta .light-version-button {
    background: #eaeaea;
}

.related-component-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.templates-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input-controls {
    position: relative;
}

.FigmaComponentsInputOverlay {
    border: 1px solid #e9e9e9;
    background: #FAFAFA;
    width: 100%;
    position: absolute;
    height: 52px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
    display: none;
}

.FigmaComponentsInputOverlay a {
    background: #fafafb;
    border: 1px solid #e1e1e3;
    border-radius: 5px;
    padding: 5px 15px;
    text-decoration: none;
    color: #000;
}

.FigmaComponentsInputOverlay p {
    font-size: 14px;
    font-weight: 500;
}

.component-added .FigmaComponentsInputOverlay {
    display: flex;
}

.pricing-overlay-wrap {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.pricing-overlay-wrap.pricing-overlay-wrap-active {
    display: flex;
}

.pricing-overlay {
    width: 900px;
    min-height: 700px;
    background: #fff;
    padding: 50px;
    background-image: url('../images/pricing-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.pricing-overlay .pricing-grid-2 {
    display: grid;
    column-gap: 30px;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    margin-top: 70px;
}

.pricing-grid-item-header {
    margin-bottom: 40px;
}

.pricing-overlay ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    margin-bottom: 40px;
}

.pricing-overlay a.btn {
    display: block;
    width: 100%;
    text-align: center
}

.pricing-grid-item {
    border: 1px solid #eaeaea;
    padding: 30px;
    position: relative;
    background: rgba(255, 255, 255, 0.5);
}

.pricing-overlay-head {
    padding: 0 100px;
    text-align: center;
}

.most-common {
    position: absolute;
    top: -10px;
    background: #9e7aff;
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    width: 94px;
    text-align: center;
    left: 50%;
    margin-left: -47px;
    border-radius: 20px;
}

.pricing-grid-item h5 span {
    font-size: 12px;
}

.pricing-grid-item li {
    opacity: 0.5;
    margin-bottom: 7px;
}

.pricing-grid-item a.btn {
    background: #fff;
    color: #000;
    border: 1px solid #000;
}

.pricing-grid-item a.btn:hover {
    background: #000;
    color: #fff;
}

.payment-form-wrapper {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
    display: none;
}

#signupboxnew {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100001;
    display: none;
}

#signupboxnew.activesignupboxnew {
    display: flex;
}
#signinboxnew {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100001;
    display: none;
}

#signinboxnew.activesignupboxnew {
    display: flex;
}

.signupboxnew {
    width: 600px;
    min-height: 600px;
    background: #fff;
    padding: 30px;
}

.payment-form {
    width: 600px;
    height: 400px;
    background: #fff;
}

.payment-form-wrapper {
    display: flex;
}

.proUser {
    background: #2d27a1;
    color: #fff;
    font-size: 12px;
    padding: 0px 10px;
    margin-left: 5px;
    display: inline-block;
    border-radius: 30px;
}

.payment-form {
    padding: 50px;
}

.payment-form form {
    margin-top: 50px;
    padding: 20px;
    background: #d8f8f0;
}

.payment-form .btn {
    display: block;
    text-align: center;
    width: 100%;
    margin-top: 40px;
}

.usernav {
    position: relative;
}

.usernav>a {
    color: #67bcd1;
    text-decoration: none;

}

.usernav ul {
    position: absolute;
    padding: 0px;
    background: #fff;
    top: 50px;
    right: 20px;
    width: 200px;
    border: 1px solid #eaeaea;
    margin: 0px;
    list-style: none;
    display: none;
}

.usernav ul li a {
    display: block;
    padding: 10px 20px;
    color: #000;
    text-decoration: none;
}

.usernav ul li a:hover {
    background: #000;
    color: #fff;
}

.usernav:hover ul {
    display: block;
}

.profile-section-wrap {
    max-width: 600px;
    margin: 0 auto;
}

.profile-setting-box {
    background: #fcfcfc;
    border: 1px solid #eaeaea;
    min-height: 400px;
    margin-top: 50px;
}

.profile-box-body {
    padding: 50px;
}

.profile-box-title {
    padding: 20px 50px;
    border-bottom: 1px solid #eaeaea;
    font-size: 18px;
    font-weight: 700;
    background: #fff;
    text-transform: uppercase;
}

.profile-setting-box .new-form-control {
    background: #eee;
}

.downloadStatus {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 20px;
    background: #cce1ff;
    z-index: 99999;
    display: none;
    color: ##0d488d;
}

.downloadStatus.activeDownloadStatus {
    display: block;
}

.activeDownloadStatusErrorMessage {
    display: block;
    background: #ffdbdb;
    color: #4e0f0f;
}

.activeDownloadStatusSuccess {
    display: block;
    background: #E3FFF2;
    color: #186C44;
}

.download_credits {
    font-size: 12px;
    position: absolute;
    margin: 0px;
    padding: 0px;
    z-index: -1;
    background: #00dfff;
    padding: 0 10px;
    right: 18px;
    bottom: -12px;
    color: #000;
    width: 255px;
}

.download_credits span {
    font-weight: 700;
    padding-left: 10px;
    display: inline-block;
}

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

.modal-overlay.activemodal {
    z-index: 99999;
}

.box {
    display: block;
    padding: 40px;
    background: #fff;
    border: 1px solid #eee;
}

.invoice-box-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.invoice-box-flex a {
    text-decoration: none;
    font-size: 12px;
}

.cancelled-tag {
    font-size: 12px;
    color: #fff;
    background: #f00;
    padding: 2px 10px;
    text-align: center;
}

.active-tag {
    font-size: 12px;
    color: #fff;
    background: #0b8747;
    padding: 2px 10px;
    text-align: center;
}

.padding-10 {
    padding: 10px;
}

.padding-15 {
    padding: 15px;
}

.padding-20 {
    padding: 20px;
}

.padding-25 {
    padding: 25px;
}

.padding-30 {
    padding: 30px;
}

.padding-35 {
    padding: 35px;
}

.padding-40 {
    padding: 40px;
}

.margin-bottom-70 {
    margin-bottom: 70px;
}

.margin-bottom-80 {
    margin-bottom: 80px;
}

.margin-bottom-90 {
    margin-bottom: 90px;
}

.no-padding-bottom {
    padding-bottom: 0px;
}

.section-full-screen-blog-post {
    background: #eaeaea;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.section-blog-header {
    padding-top: 150px;
}

.header-blog-posts-wrap {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-column-gap: 40px;
}

.header-blog-sub {
    margin-bottom: 20px;
    height: 210px;
    background: #eaeaea;
    padding: 30px;
    display: flex;
    align-items: flex-end;
}

.header-blog-subs .header-blog-sub:last-child {
    margin-bottom: 0px;
}

.header-blog-main {
    height: 440px;
    background: #eaeaea;
    display: flex;
    align-items: flex-end;
    padding: 70px 70px;
    background-size: cover;
    background-position: center;
}

.blogThumb a {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.blogThumb img {
    display: none;
}

.bpgitem .blogThumb {
    transition: all .2s;
}

.blogThumb,
.header-blog-main,
.header-blog-sub {
    background-size: cover;
    background-position: center;
    position: relative;
    filter: brightness(100%);
    filter: sepia(0);
}

.bpgitem:hover .blogThumb {
    filter: brightness(90%);
    filter: sepia(20%);
}

.bpgitem:hover {
    color: #f00;
}

.simple-meta {
    font-size: 12px;
    font-weight: 600;
    color: #888888;
}

.simple-meta a {
    text-decoration: none;
    color: #313131;
}

.simple-meta.simple-meta-white {
    color: #fff;
}

.simple-meta.simple-meta-white a {
    border-bottom: 1px solid #fff;
    color: #fff;
}

.header-blog-sub h3 {
    font-size: 20px;
    line-height: 1.2;
}

.latest-blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 40px;
}

.latest-blog-grid-item-image {
    height: 200px;
    background-color: #eaeaea;
}

.latest-blog-grid-item-body h4 {
    font-size: 20px;
    line-height: 1.4;
}

.latest-blog-grid-item-body p {
    font-size: 14px;
}

.latest-blog-grid-desc {
    height: 100px;
    overflow: hidden;
}

.latest-blog-grid-item-body h4 {
    margin-bottom: 20px;
}

.section-new-blog-posts {
    background: #F7F7F7;
}

.blog-section-heading {
    font-size: 30px;
    position: relative;
}

.blog-section-heading span {
    position: relative;
    display: inline-block;
}

.blog-section-heading span:after {
    display: block;
    content: '';
    background: #f00;
    height: 2px;
    bottom: 0px;
    left: 0px;
}

.latest-reviews-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 40px;
}

.latest-reviews-grid-subs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.latest-reviews-grid-subs h4 {
    font-size: 18px;
    line-height: 1.5;
    height: 70px;
    margin-top: 10px;
    overflow: hidden;
}

.latest-reviews-grid-sub-image {
    height: 170px;
    background-color: #eaeaea;
}

.latest-reviews-grid-main-image {
    height: 300px;
    background-color: #eaeaea;
}

.latest-reviews-grid-main-body {
    padding-top: 20px;
}

.latest-reviews-grid-main-sub-text {
    height: 150px;
    overflow: hidden;
    margin-top: 10px;
}

.latest-articles-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-column-gap: 40px;

}

.latest-articles-list-item {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-column-gap: 40px;
    padding: 20px 0;
    border-top: 1px solid #eaeaea;
}

.latest-articles-list-item:last-child {
    border-bottom: 1px solid #eaeaea;
}

.latest-article-list-item-image {
    background-color: #eaeaea;
    height: 140px;
    width: 100%;
}

.latest-article-list-item-desc h4 {
    font-size: 20px;
}

.latest-article-list-item-subtext {
    height: 80px;
    padding-top: 10px;
    overflow: hidden;
}

.latest-article-right-big-image {
    height: 500px;
    background: #eaeaea;
}

.latest-articles-list {
    margin-bottom: 40px;
}

.top-post-main-image {
    height: 220px;
    background-color: #eaeaea;
}

.top-post-main-body h4 {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 40px;
    margin-top: 10px;
}

.top-post-list-item {
    margin-bottom: 20px;
}

.top-post-list-item-body h4 {
    font-size: 16px;
    line-height: 1.5;
}

.top-post-list-item-image {
    background-color: #eaeaea;
    height: 70px;
}

.top-post-list-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-column-gap: 20px;
}

.latest-stories-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 40px;
}

.latest-story-grid-item-image {
    height: 200px;
    background-color: #eaeaea;
}

.latest-story-grid-item-body h4 {
    font-size: 20px;
    line-height: 1.3;
    margin: 10px 0;
}

.latest-videos-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-column-gap: 0px;
}

.section-latest-videos {
    background: #393939;
    color: #fff;
}

.latest-video-grid-item {
    padding: 20px;
    border-bottom: 1px solid rgba(154, 154, 154, 0.20);
}

.latest-video-grid-item h4 {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.latest-video-grid-item .simple-meta {
    opacity: 0.5;
}

.lastest-videos-grid-thumbs {
    max-height: 500px;
    overflow-y: auto;
}

.latest-video-grid-main {
    background: #222;
}

.active-grid-item {
    background: #222;
}

.header-blog-main-content,
.header-blog-sub-content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.header-blog-main,
.header-blog-sub {
    position: relative;
}

.header-blog-main:after,
.header-blog-sub:after {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, rgba(64, 64, 64, 0) 0%, #404040 100%);
}

.blog-categories a {
    border: none !important;
}

.blog-categories {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
    justify-content: center;
}

.page-blog,
.page-blog-post {
    background: #fff;
}

.section-blog-post-header {
    height: 650px;
    background-color: #eaeaea;
    background-size: cover;
    background-position: center;
    position: relative;
}

.section-blog-post-header:after {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%);
}

.blog-post-contents-wrap {
    position: relative;
    top: -150px;
    background: #fff;
    width: 1170px;
    padding: 50px;
    margin: 0 auto;
}

.blog-post-contents-wrap {
    padding-bottom: 0px;
}

.blog-post-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    position: relative;
    grid-column-gap: 70px;
}

.padding-top-0,
.no-padding-top {
    padding-top: 0px;
}

.padding-bottom-0,
.no-padding-bottom {
    padding-bottom: 0px;
}

.section-blog-post-details {
    padding-bottom: 0px !important;
}

.post-desc p {
    margin-bottom: 20px;
}

.post-desc h2 {
    font-size: 24px;
}

.sticky-table-of-content {
    position: sticky;
    top: 130px;
}

.sticky-table-of-content ol {
    margin: 0px;
    padding: 0px;
}

.sticky-table-of-content li a {
    display: block;
    padding: 4px 0;
    text-decoration: none;
    color: #000;
}

.sticky-table-of-content h3 {
    font-size: 20px;
}

.header-blog-main-content a,
.header-blog-sub a {
    color: #fff;
    text-decoration: none;
}

h2 a,
h3 a,
h4 a,
p a {
    color: inherit;
    text-decoration: none;
}

.inviewport {
    color: #f00 !important;
}

.latest-articles-slider {
    width: 750px;
    overflow-x: hidden;
    overflow-y: auto;
}

.slider-post-wrap {
    height: 450px;
}

.slider-post-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
}

.slider-post-wrap h4 {
    display: block;
    color: #fff;
}

.slider-post-wrap a {
    color: #fff;
}

.slider-post-wrap .slider-content {
    position: relative;
    z-index: 9;
}

.slider-post-wrap.blogThumb a {
    position: static;
    display: inline-block;
    width: auto;
}

.slider-post-wrap.blogThumb {
    position: relative;
}

.slider-post-wrap.blogThumb::before {
    content: '';
    display: block;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
}

.slider-post-wrap .simple-meta {
    color: #fff;
}

.slide-number {
    font-size: 40px;
    font-weight: 700;
    opacity: 0.8;
    margin-bottom: 20px;
}

a.overlay-link {
    display: block !important;
    position: absolute !important;
    top: 0;
    left: 0px;
    width: 100% !important;
    height: 100%;
    z-index: 999;
}

.latest-blog-grid-item.bpgitem {
    background: #fff;
}

.page-page-blog-category {
    background: #fff;
}

.blog-category-header {
    padding-top: 150px;
    padding-bottom: 0px;
}

.category-page-wrap {
    display: grid;
    grid-template-columns: 1fr 350px;
    grid-column-gap: 80px;
}

.sidebar-category-list {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.sidebar-category-list li {}

.sidebar-category-list li a {
    display: block;
    position: relative;
    margin-bottom: 10px;
    padding: 10px;
    text-decoration: none;
    color: #000;
    padding-left: 60px;
    background: #fff;
    border: 1px solid #eaeaea;
}

.sidebar-category-list li a:before {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 20px;
    height: 2px;
    content: '';
    display: block;
    transition: all .3s;
    background: #000;
}

.sidebar-category-list li a:hover:before {
    left: 30px;
}

.section-full-screen-blog-post {
    position: relative;
    color: #fff;
}

.overlay {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.downloadStatus.activeDownloadStatus {
    display: flex !important;
    top: 0;
    right: 0;
    padding: 20px;
    z-index: 99999;
    color: #0d488d;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    height: 100% !important;
    background: none !important;
    position: fixed;
}

.inprogressmessage {
    width: 350px;
    height: 350px;
    background: #383552;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 10px;
    color: #fff;
    box-shadow: 0px 0px 280px rgba(0, 0, 0, 0.7);
    padding: 20px;
    line-height: 1.5;
    font-size: 20px;
}

.modal-content {
    position: relative;
}

.closeModalOverlay {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 9;
    /* padding: 10px; */
    background: #9e7aff;
    color: #fff;
    width: 30px;
    height: 30px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}

.tags-nav {
    border-bottom: 1px solid #485572;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 102.5%;
    background: #323b50;
}

.tags-nav ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-wrap: nowrap;
    column-gap: 20px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 15px 20px;
}

.tags-nav ul li a {
    display: block;
    text-decoration: none;
    padding: 10px 20px;
    border: 1px solid #485572;
    border-radius: 10px;
    background: #181d29;
    color: #5abd7b;
    font-size: 14px;
}

.components-d {
    display: block;
    padding-left: 320px;
}

.component-sidebar {
    width: 320px;
    position: absolute;
    height: 100%;
    overflow: scroll;
    left: 0px;
}

.page-for-followers-2 .top-nav,
.page-projects.page-index .top-nav,
.page-figmacomponents .top-nav,
.page-home .top-nav,
.page-for-followers .top-nav {
    position: fixed;
    width: 100%;
    background-color: transparent;
    padding-top: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #485572;
    background: #181d29;
    z-index: 99;
}


.top-nav.w-nav .container {
    border: none;
    padding: 0px;
}

.component-thumbs-side {
    padding-top: 0px;
}

.component-thumbs-side {
    padding-left: 30px;
    position: relative;
    padding-top: 90px;
}

.sm-bottom30 {
    margin-bottom: 30px !important;
}

.project-header-wrap {
    grid-template-columns: 2fr 1fr;
}

.project-header-wrap a.download_figma_freebie {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
}

.relatedItemsGrid.component-grid {
    grid-template-columns: repeat(auto-fill, minmax(366px, 1fr)) !important;
}

#supportbox,
#welcomebox,
#SignupCTABox {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;

}

.supportboxwrap,
.welcomeboxwrap {
    width: 600px;
    background: #fff;
    min-height: 300px;
    padding: 30px;
}

.sync-cycles-box-active,
.sync-cycles-box-date,
.sync-cycles-box-title,
.sync-cycles-box-item {
    font-feature-settings: "ss01" on, "cv10" on, "calt" off, "liga" off
}

.sync-cycles-box-title,
.sync-cycles-box-item {
    font-size: 14px;
    line-height: 20px
}

.sync-cycles-box-title {
    font-weight: 500
}

.sync-cycles-box-active,
.sync-cycles-box-date {
    font-size: 12px;
    line-height: 16px
}

.sync-cycles {
    height: 512px;
}

.sync-cycles-circles {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: .32;
    bottom: 465px;
}

.sync-cycles-circles div:before {
    background: rgba(226, 232, 255, .1);
    border-radius: inherit;
    content: "";
    inset: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    pointer-events: none;
    position: absolute
}

.sync-cycles-circles-gradient div:before {
    background: conic-gradient(rgba(109, 46, 255, 0) 6.7%, rgba(158, 122, 255, .35) 20.8%, rgba(254, 139, 187, .7) 34.9%, #FFBD7A 49.99%, rgba(255, 189, 122, 0) 50%)
}

.sync-cycles-circles div {
    position: absolute;
    border-radius: 50%
}

.sync-cycles-circles div:nth-child(1) {
    width: 396px;
    height: 396px;
    top: calc(50% - 198px);
    left: calc(50% - 198px);
    transform: rotate(0)
}

.sync-cycles-circles div:nth-child(2) {
    width: 428px;
    height: 428px;
    top: calc(50% - 214px);
    left: calc(50% - 214px);
    transform: rotate(-18deg)
}

.sync-cycles-circles div:nth-child(3) {
    width: 460px;
    height: 460px;
    top: calc(50% - 230px);
    left: calc(50% - 230px);
    transform: rotate(-35deg)
}

.sync-cycles-circles div:nth-child(4) {
    width: 492px;
    height: 492px;
    top: calc(50% - 246px);
    left: calc(50% - 246px);
    transform: rotate(-52deg)
}

.sync-cycles-circles div:nth-child(5) {
    width: 524px;
    height: 524px;
    top: calc(50% - 262px);
    left: calc(50% - 262px);
    transform: rotate(-68deg)
}

.sync-cycles-circles div:nth-child(6) {
    width: 556px;
    height: 556px;
    top: calc(50% - 278px);
    left: calc(50% - 278px);
    transform: rotate(-84deg)
}

.sync-cycles-circles div:nth-child(7) {
    width: 588px;
    height: 588px;
    top: calc(50% - 294px);
    left: calc(50% - 294px);
    transform: rotate(-99deg)
}

.sync-cycles-circles div:nth-child(8) {
    width: 620px;
    height: 620px;
    top: calc(50% - 310px);
    left: calc(50% - 310px);
    transform: rotate(-115deg)
}

.sync-cycles-circles div:nth-child(9) {
    width: 652px;
    height: 652px;
    top: calc(50% - 326px);
    left: calc(50% - 326px);
    transform: rotate(-131deg)
}

.sync-cycles-circles div:nth-child(10) {
    width: 684px;
    height: 684px;
    top: calc(50% - 342px);
    left: calc(50% - 342px);
    transform: rotate(-146deg)
}

.sync-cycles-circles div:nth-child(11) {
    width: 716px;
    height: 716px;
    top: calc(50% - 358px);
    left: calc(50% - 358px);
    transform: rotate(-161deg)
}

.sync-cycles-circles div:nth-child(12) {
    width: 748px;
    height: 748px;
    top: calc(50% - 374px);
    left: calc(50% - 374px);
    transform: rotate(-176deg)
}

.sync-cycles-circles div:nth-child(13) {
    width: 780px;
    height: 780px;
    top: calc(50% - 390px);
    left: calc(50% - 390px);
    transform: rotate(-191deg)
}

.sync-cycles-circles div:nth-child(14) {
    width: 812px;
    height: 812px;
    top: calc(50% - 406px);
    left: calc(50% - 406px);
    transform: rotate(-216deg)
}

.sync-cycles-box {
    padding: 16px 20px;
    position: absolute;
    border-radius: 10px;
    background: radial-gradient(120.05% 100% at 50% 0%, rgba(226, 232, 255, 0) 33.78%, rgba(226, 232, 255, .04) 100%), rgba(226, 232, 255, .01);
    box-shadow: 0 -28px 84px -24px #e2e8ff1f inset;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.sync-cycles-box:before {
    border: 1px solid rgba(226, 232, 255, .1);
    content: "";
    left: 0;
    top: 0;
    position: absolute;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: inherit;
    pointer-events: none
}


.sync-cycles-box-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px
}

.sync-cycles-box-title {
    color: #e2e8ff;
    flex: 1
}

.sync-cycles-box-date {
    color: #e2e8ffbf
}

.sync-cycles-box-active {
    color: #e2e8ff;
    border-radius: 4px;
    background: rgba(226, 232, 255, .08);
    padding: 2px 6px
}

.sync-cycles-box-item {
    padding: 12px 0;
    color: #e2e8ffbf;
    display: flex;
    gap: 8px
}

.sync-cycles-box-item:not(:last-child) {
    border-bottom: 1px solid rgba(226, 232, 255, .08)
}

.sync-cycles-box-item-label {
    flex: 1
}

.sync-cycles-box-item-detail {
    color: #e2e8ff8c
}

@keyframes sync-cycles-circles {
    0% {
        opacity: .32;
        transform: translateZ(0) rotate(0)
    }

    50% {
        opacity: 1;
        transform: translateZ(0) rotate(.5turn)
    }

    to {
        opacity: .32;
        transform: translateZ(0) rotate(1turn)
    }
}

@keyframes sync-cycles-brands {
    to {
        transform: translateZ(0) rotate(-1turn)
    }
}

@media (min-width: 900px) {
    .sync-cycles-circles-gradient {
        animation: sync-cycles-circles 10s linear infinite
    }
}


.relative {
    position: relative;
    height: auto;
}

.oh {
    overflow: hidden;
}

.supportboxwrap,
.welcomeboxwrap {
    background: #05051e;
}

.sync-cycles-boxes {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sync-cycles-box {
    position: static;
    height: auto;
    width: 100%;
    transform: none;
    display: block;
}

.sync-cycles-box-item {
    display: block;
}

#supportbox,
#welcomebox,
#SignupCTABox {
    z-index: 110;
    display: none;
}

#welcomebox,
#SignupCTABox {
    display: flex;
}

.pricing-overlay .pricing-grid-2 {}

#welcomebox .sync-cycles,
#SignupCTABox .sync-cycles {
    position: absolute;
    width: 600px;
    height: 600px;
    top: 1070px;
    left: 50%;
    margin-left: -300px;
}

.welcomeboxwrap {
    width: 900px;
    background-image: url('../images/welcomebg.png');
    background-size: contain;
    min-height: 600px;
    border-radius: 20px;
    background-color: #423f53;
}

.welcomecontent {
    width: 574px;
    margin: 0 auto;
    text-align: center;
    padding-top: 200px;
}

.welcome-cta-button {
    width: 260px;
    text-align: center;
}

.welcome-cta-button p {
    font-size: 14px;
    opacity: 0.5;
    line-height: 1.3;
}

.welcome-cta-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.welcome-cta-buttons a {
    display: block;
    margin-bottom: 10px;
}

.welcome-cta-buttons {
    width: 70%;
    margin: 0 auto;
    padding: 40px 0;
}

.skip-welcome {
    position: relative;
    z-index: 111;
}

.skip-welcome a {
    color: #F7C990;
}

.btn24 {
    background-image: linear-gradient(135deg, #28c9c4 0%, #367fc0 33.33%, #0b725d 66.67%, #0a886e 100%);
    box-shadow: -1px 11px 25px #02503d5e;
}

.bubbly-button {
    display: inline-block;
    font-size: 1em;
    padding: 1em 2em;
    -webkit-appearance: none;
    appearance: none;
    background-image: linear-gradient(135deg, #F7C990 0%, #9E7AFF 33.33%, #9E7AFF 66.67%, #9E7AFF 100%);

    color: #fff;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
    box-shadow: -1px 11px 25px #59139a5e;
    z-index: 99;
    text-decoration: none;
}

.bubbly-button:focus {
    outline: 0;
}

.bubbly-button:before,
.bubbly-button:after {
    position: absolute;
    content: "";
    display: block;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1000;
    transition: all ease-in-out 0.5s;
    background-repeat: no-repeat;
}

.bubbly-button:before {
    display: none;
    top: -75%;
    background-image: radial-gradient(circle, #F7C990 20%, transparent 20%), radial-gradient(circle, transparent 20%, #F7C990 20%, transparent 30%), radial-gradient(circle, #F7C990 20%, transparent 20%), radial-gradient(circle, #F7C990 20%, transparent 20%), radial-gradient(circle, transparent 10%, #F7C990 15%, transparent 20%), radial-gradient(circle, #F7C990 20%, transparent 20%), radial-gradient(circle, #9E7AFF 20%, transparent 20%), radial-gradient(circle, #9E7AFF 20%, transparent 20%), radial-gradient(circle, #9E7AFF 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}

.bubbly-button:after {
    display: none;
    bottom: -75%;
    background-image: radial-gradient(circle, #F7C990 20%, transparent 20%), radial-gradient(circle, #9E7AFF 20%, transparent 20%), radial-gradient(circle, transparent 10%, #9E7AFF 15%, transparent 20%), radial-gradient(circle, #9E7AFF 20%, transparent 20%), radial-gradient(circle, #9E7AFF 20%, transparent 20%), radial-gradient(circle, #9E7AFF 20%, transparent 20%), radial-gradient(circle, #9E7AFF 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}

.bubbly-button:active {
    transform: scale(0.9);
    background-color: #e60074;
    box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}

.bubbly-button.animate:before {
    display: block;
    animation: topBubbles ease-in-out 0.75s forwards;
}

.bubbly-button.animate:after {
    display: block;
    animation: bottomBubbles ease-in-out 0.75s forwards;
}

@keyframes topBubbles {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
    }

    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
    }

    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

@keyframes bottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }

    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
    }

    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

.quick-grid-actions-wrap .bubbly-button:after {
    background-image: radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%);
}

.quick-grid-actions-wrap .bubbly-button::before {
    background-image: radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%);
}

.quick-grid-actions-wrap .bubbly-button {
    box-shadow: -1px 11px 25px #ffffff5e;
}

.bubbly-button.btn24:after {
    background-image: radial-gradient(circle, #28c9c4 20%, transparent 20%), radial-gradient(circle, #28c9c4 20%, transparent 20%), radial-gradient(circle, transparent 10%, #28c9c4 15%, transparent 20%), radial-gradient(circle, #0b725d 20%, transparent 20%), radial-gradient(circle, #0a886e 20%, transparent 20%), radial-gradient(circle, #0a886e 20%, transparent 20%), radial-gradient(circle, #0a886e 20%, transparent 20%);
}

.bubbly-button.btn24::before {
    background-image: radial-gradient(circle, #28c9c4 20%, transparent 20%), radial-gradient(circle, transparent 20%, #28c9c4 20%, transparent 30%), radial-gradient(circle, #28c9c4 20%, transparent 20%), radial-gradient(circle, #28c9c4 20%, transparent 20%), radial-gradient(circle, transparent 10%, #28c9c4 15%, transparent 20%), radial-gradient(circle, #28c9c4 20%, transparent 20%), radial-gradient(circle, #367fc0 20%, transparent 20%), radial-gradient(circle, #0a886e 20%, transparent 20%), radial-gradient(circle, #0a886e 20%, transparent 20%);
}

.modal-content {
    background: #423f53;
    border-radius: 10px;
}

.modal-body {
    padding: 30px;
}

.modal-header {
    padding: 30px;
    background-image: linear-gradient(135deg, #31202f 0%, #261e38 33.33%, #291d49 66.67%, #180c3a 100%);
    height: 150px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    position: relative;
}

.modal-header .modal-header-content {
    position: relative;
    z-index: 20;
}

.modal-header::after {
    position: absolute;
    width: 150%;
    height: 200%;
    top: -60px;
    left: -40px;
    background: radial-gradient(120.05% 100% at 50% 0%, rgba(226, 232, 255, 0) 33.78%, rgba(226, 232, 255, .04) 100%), rgba(226, 232, 255, .01);
    box-shadow: 0 -28px 84px -24px #e2e8ff1f inset;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    content: '';
    z-index: 1;
}

.modal-header h3 {
    margin-bottom: 15px;
}

.modal-header p {
    color: rgba(255, 255, 255, 0.5);
}

.modal-header .sync-cycles {
    height: 512px;
    top: -20px;
    position: absolute;
    right: -80px;
}

.close-button {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    overflow: hidden;
    z-index: 99;
    top: 0px;
    right: 3px;
    transform: scale(0.5);
    opacity: 0.5;
}

.close-button>div {
    position: relative;
}

.close-button-block {
    width: 40px;
    height: 20px;
    position: relative;
    overflow: hidden;
}

.close-button-block:before,
.close-button-block:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(55% - 4px);
    display: block;
    width: 4px;
    height: 25px;
    transform-origin: bottom center;
    background: white;
    transition: all ease-out 280ms;
}

.close-button-block:last-of-type {
    transform: rotate(180deg);
}

.close-button .in .close-button-block:before {
    transition-delay: 280ms;
    transform: translateX(20px) translateY(-20px) rotate(45deg);
}

.close-button .in .close-button-block:after {
    transition-delay: 280ms;
    transform: translateX(-22px) translateY(-22px) rotate(-45deg);
}

.close-button .out {
    position: absolute;
    top: 0;
    left: 0;
}

.close-button .out .close-button-block:before {
    transform: translateX(-5px) translateY(5px) rotate(45deg);
}

.close-button .out .close-button-block:after {
    transform: translateX(5px) translateY(5px) rotate(-45deg);
}

.close-button:hover .in .close-button-block:before {
    transform: translateX(-5px) translateY(5px) rotate(45deg);
}

.close-button:hover .in .close-button-block:after {
    transform: translateX(5px) translateY(5px) rotate(-45deg);
}

.close-button:hover .out .close-button-block:before {
    transform: translateX(-20px) translateY(20px) rotate(45deg);
}

.close-button:hover .out .close-button-block:after {
    transform: translateX(20px) translateY(20px) rotate(-45deg);
}

.confettis {
    position: fixed;
    top: 83%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-180deg);
    perspective: 600px;
    transform-style: preserve-3d;
}

.confetti svg {
    position: fixed;
    fill: #fff;
    width: 10rem;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-99deg);
}

.confetti {
    pointer-events: none;
    position: absolute;
    transform: rotate(var(--rotation));
}

.confetti span {
    position: absolute;
    width: 0.2rem;
    height: 0.35rem;
    will-change: transform;
    background-color: var(--color);
    -webkit-animation: fliegen calc(5s * var(--rnd)) infinite cubic-bezier(0.2, 1, 0.2, 1);
    animation: fliegen calc(5s * var(--rnd)) infinite cubic-bezier(0.2, 1, 0.2, 1);
    -webkit-animation-delay: -10s;
    animation-delay: -10s;
}

@-webkit-keyframes fliegen {
    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(calc(30vh + 50vh * var(--rnd))) rotateY(calc(3000deg * var(--rnd))) rotateX(calc(2000deg * var(--rnd))) rotateZ(calc(1060deg * var(--rnd)));
    }
}

@keyframes fliegen {
    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(calc(30vh + 50vh * var(--rnd))) rotateY(calc(3000deg * var(--rnd))) rotateX(calc(2000deg * var(--rnd))) rotateZ(calc(1060deg * var(--rnd)));
    }
}

.custom-modal {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 150;
}

.custom-modal-wrapper {
    background: #211f30;
    border-radius: 10px;
}

.success-modal-content {
    background: #423f53;
    border-radius: 10px;
    height: 400px;
    width: 400px;
    padding: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.success-modal-content .confettis {
    position: absolute;
    bottom: 0px;
}

.sync-cylces-wrap-success {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    overflow: hidden;
}

.success-text-wrap {
    position: relative;
    z-index: 9;
}

.pricing-grid-item-header h5 {
    font-size: 30px;
}

.pricing-grid-item-header h5 span {
    font-size: 14px;
}

.saving {

    color: #7ee022;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 14px;
    position: relative;
    top: -3px;
}

@media screen and (max-width: 1200px) {
    .component-thumbs-side {
        height: 520px;
        overflow: scroll;
    }

    .component-sidebar {
        height: 515px;
        overflow: scroll;
    }

}

#welcomebox,
.details {
    color: rgba(255, 255, 255, 0.8);
}

.styledtext {
    font-weight: inherit;
    background-image: linear-gradient(135deg, #9E7AFF 0%, #FE8BBB 33.33%, #FFBD7A 66.67%, #F8EAC3 100%);
    background-image: linear-gradient(135deg, color(display-p3 .6196078431 .4784313725 1/1) 0%, color(display-p3 .9960784314 .5450980392 .7333333333/1) 33.33%, color(display-p3 1 .7411764706 .4784313725/1) 66.67%, color(display-p3 .9725490196 .9176470588 .7647058824/1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.important-color{
    font-weight: 700;    
    background-image: linear-gradient(135deg, color(display-p3 0.14 0.01 0.49) 0%, color(display-p3 0.89 0.2 0.48) 33.33%, color(display-p3 1 0.5 0) 66.67%, color(display-p3 1 0 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

}

.font-700 {
    font-weight: 700;
}
.block{
    display: block;
    width: 100%;
}
.signinboxmodal .modal-content{
    width: 470px;
}
.pricing-overlay {
    width: 630px;
    background: #423f53;
    padding: 50px;
    border-radius: 20px;
    margin-top: 0px;
    color:rgba(255, 255, 255, 0.8);
  }
  .pricing-overlay .sync-cycles{
    position: absolute;
  }
  .download_figma_freebie{
    position: relative;
  }
  .clipboard-desc{
    position: absolute;
    width: 100%;
    top: -160px;
    left: 0px;
    background: #4a6276;
    padding: 20px;
    font-size: 14px;
    text-transform: none;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0;
    transition: all .4s;
    visibility: hidden;
  }
  .clipboard-desc::after{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #4a6276;
    transform: rotate(45deg);
    bottom: -5px;
    left: 50%;
    margin-left: -10px;
  }
  .download_figma_freebie:hover .clipboard-desc{
    opacity: 1;
    visibility: visible;
  }
  .figma-btn{
    background: #0c6d47;
  }
  .xd-btn{
    background: #9c27b0;
  }
  .clipboard-btn{
    background: #4a6276;
  }
  .edit-btn{
    background: #de6508;
  }

.kbc-button {
    font-size: inherit;
    line-height: inherit;
    margin-bottom: 0.4375rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    margin-top: 0.25rem;
    padding: 10px 20px;
    box-shadow: 0 0 #000000, 0 0px #d9d9d9, 0 1px #3c3c3c, 0 2px #3c3c3c, 0 3px #3c3c3c, 0 4px #3c3c3c, 0 5px #000000, 2px 2.5px 4px #161616, 0 -1px 2.5px #050505;
    background-color: #211f30;
    border-color: #2c2a3b;
    color: #99b2cb;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 1px solid #393552;
    border-radius: 0.25rem;
    display: inline-block;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 400;
    text-align: left;
    transform: translate3d(0, 0, 5px);
    transform-style: preserve-3d;
    transition: all 0.25s cubic-bezier(0.2, 1, 0.2, 1);
    min-width: 50px;
    text-align: center;
    font-size: 14px;
  }
  .keyboard-button-guide{
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 18px;
  }
  
  /* line 60, src/scss/abstracts/_mixins.scss */
  .kbc-button::after {
    border-radius: 0.5rem;
    border-width: 0.125rem;
    bottom: -9px;
    left: -0.3125rem;
    right: -0.3125rem;
    top: -3px;
    transform: translate3d(0, 0, -3px);
  }
  
  /* line 239, src/scss/abstracts/_mixins.scss */
  .kbc-button::after {
    border-color: #cccccc;
  }
  
  .keyboard-btn {
    box-shadow: 0px 3px 3px rgba(0, 0, 0, .7);
    color: #71D4FE;
    padding: 15px;
    background: #2F3336;
    border-radius: 12px;
    text-shadow: 0px 0px 40px #71D4FE, 0px 0px 80px #71D4FE;
    text-align: center;
}

.sidenav{
    margin:0px;
    padding: 0px;
    list-style: none;
    white-space: nowrap;
}
.sidenav li a{
    color: #67bcd1;
    text-decoration: none;
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    padding: 7px 0;
    font-size: 14px;
}
.main-sidebar{
    list-style: none;
    margin:0px;
    padding:0px;
    padding-left: 3px;
}
.main-li{
    position: relative;
    padding-left: 15px;
    margin-bottom: 20px;
    border-left: 1px solid #67bcd1;
    padding-top: 30px;
}
.main-li h5{
    position: absolute;
    left: -1px;
    background: #67bcd1;
    top: 0px;
    padding-bottom: 10px;
}
.main-li li a{
    position: relative;
}
.main-li li a::after{
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    background: #67bcd1;
    border-radius: 10px;
    top: 16px;
    left: -18px;
    position: absolute;
}
.breadcrumbs{
    margin:0px;
    padding:0px;
    list-style: none;
    display: flex;
    margin-bottom: 10px;
}
.breadcrumbs li{
    display: block;
    padding:0 2px
}
.breadcrumbs li:first-child{
    padding-left: 0px;
}
.breadcrumbs li a{
    display: block;
    padding:0 2px;
}
.breadcrumbs li:first-child a{
    padding-left: 0px;
}
.upload-component-modal {
    width: 70%;
    background: #fff;
    padding: 50px;
    height: 1000px;
    overflow: scroll;
}
.meta-item-box{
    padding: 15px;
    position: relative;
    background: #090c14;
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 18px;
    color: #444;
    margin-bottom: 20px;
}
.meta-item-box h3{
    font-size: 18px;
    margin:0px;
}
.meta-item-box ul{
    margin:0px;
    padding:0px;
    list-style: none;
    margin-bottom: 20px;
}
.meta-item-box ul li a{
    color:#67bcd1;
    display: block;
    padding-left: 3px;
}
.templates-grid-header{
    margin:20px 0;
    margin-bottom: 40px;
}
.templates-grid-header h1{
    font-size: 26px;
    line-height: 1;
}

.prev-component,.next-component{
    padding:20px;
    display: block;
    color:#000;
}
.prev-component img,
.next-component img{
    width: 100%;
    padding:3px;
    width: 100px;
    background: #eaeaea;
}

.the-content {
    width: 100%; /* Ensure container is full width */
    position: relative;
  }
  .sticky-elements{
    position: sticky;
    top: 60%; /* Distance from the top */
    display: flex;
    align-content: center;
    justify-content: space-between;
  }
  .freebie-header-inf-wrap{
    margin-top: -100px;
  }
  .modal .new-form-control{
    border-color: #5e5b79;
    background: #45425a;
    color:#fff;
    font-size: 20px;
  }
  #success-updgrade{
    color:#fff;
  }
  #searchBox{
    border: 1px solid #485572;
    background: #323b50;
  }
  .grid-meta-items{
    grid-template-columns: repeat(auto-fill, minmax(266px, 1fr)) !important;
  }
  .grid-item-meta-item{
    position: relative;
    display: block;
    border: 1px solid #47577d;
    background: #000;
    padding: 50px;
    transition: all .3s;
    background: linear-gradient(47deg, #d0b7ff2b 0%, #d24ef35e 24.31%, #dc840128 70.27%, #ffce9330 100.22%);
    color: #fff;
    border-radius: 10px;
    transition: all .3s;
  }
  .grid-item-meta-item:hover{
    transform: scale(1.05) translateY(-10px);
    background: linear-gradient(137.68deg, #390897 0%, #620D77 24.31%, #DC8501 70.27%, #A25900 100.22%);
    color:#fff;
  }
  .grid-item-meta-item h3{
    font-size: 30px;
    min-height: 200px;
  }
  .overlaylink{
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: block;
  }
  .overlaylink span{
    opacity: 0;
  }
  .grid-item-meta-item h3 span{
    display: block;
    font-size: 16px;
  }
  .modal label{
    color:#fff !important
  }
  p.h3{
    margin-top: 0;
    margin-bottom: 0;
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
  }

  .slider-wrr{
    overflow-x: hidden; overflow-y:auto; padding-top:130px; padding-bottom:60px;
    min-height: 883px;
  }

  @media screen and (max-width: 767px)  {
    .component-sidebar{
        display: none;
    }
    .templates-grid-header{
        display: grid;
        gap: 30px;
    }
    .components-d{
        padding-left: 0px;;
    }
    .component-thumbs-side{
        height:100%;
        padding-left: 0px;;
    }
    .component-grid,.relatedItemsGrid.component-grid{
        grid-template-columns:1fr !important;
    }
    .slider-wrr{
        padding-bottom:140px;
        min-height: 540px;
    }
    .project-header-wrap{
        grid-template-columns: 1fr;
    }
    .tab-list{
        display: block;
    }
    .freebie-details-wrap{
        grid-template-columns: 1fr;
    }
    .sticky-elements{
        display: none;
    }
    .project-header-wrap .breadcrumbs{
        display: none;
    }
    .page-header-project{
        padding-bottom: 20px;;
    }
  }
.logo{
    padding-top:0px;
}
#component-content-section{
    overflow-y: scroll;
}
.component-grid-image-wrap img{
    height: auto !important;
}
.component-content-section{
    min-height: 1600px;
}
.componentdetails{
    position: absolute;
    top: 0px;
    right: 0;
    z-index: 100;
    background: #fff;
    padding: 30px;
}
.componentdetails ul{
    list-style: none;
    margin:0px;
    padding:0px;
}
.componentdetails ul a{
    color:#000;
    display: block;
    padding:10px;
}

.pricing-grid-item-header h5 span span {
    display: block;
    position: absolute;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
}
.site-banner{
    position: fixed;
    width: 100%;
    height: 80px;
    left: 0px;
    bottom: 0px;
    background-color: #000;
    padding-top: 5px;
    z-index: 999;
}
.site-banner-container{
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-banner p{
    font-size: 20px;
    color:#fff;
    padding-top: 14px;
}
.site-banner a{
    padding: 10px 35px !important;
    border-radius: 40px;
}
.offer-modal{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    top:0px;
    left: 0px;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.5);
}
.offer-modal img{
    width: 637px;
}
body{
    transition: all .5s;
}
.showingtopbanner{
    padding-top: 80px;
}
.showingtopbanner .site-banner{
    top:0px;
    bottom: auto;
}
.site-banner p span{
    font-size: 12px;
    display: block;
    opacity: 0.7;
}
.success-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-bottom: 100px;
}
.sidenav-heading{
    font-size: 18px;
    margin: 0px !important;
    padding: 0px !important;
    line-height: 18px;
    margin-bottom: 20px !important;
}
.component-grid-desc-wrap{
    padding:10px;
}
.component-grid-desc-wrap p {
    color: #00BCD4;
}