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

*,
::after,
::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;

}

a {
    text-decoration: none;
}

:root {
    --primary-color: #072a40;
    --primary-font: "Roboto", sans-serif;
    font-size: 10px;
    scroll-behavior: smooth;
}

body {
    --primary-font: "Roboto", sans-serif;
    font-size: 1.6rem;
}

section p {
    line-height: 3rem;
    text-align: justify;
}


/* header style */
.navbar-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
}

.top-header {
    text-align: end;
    padding: 12px;
    padding-right: 4rem;
    border-bottom: 1px solid #ccc;
}

/* Submenu Styling */
.custom-dropdown .custom-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    padding: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    list-style: none;
}

.custom-dropdown:hover .custom-submenu {
    display: block;
}

.custom-submenu li {
    border-bottom: 1px solid #cccc;
}

.custom-submenu li a {
    display: block;
    padding: 1rem 2rem;
    color: #333;
    text-decoration: none;
    font-size: 1.4rem;
    text-transform: capitalize;
}

.custom-submenu li a:hover {
    background: #f8f9fa;
    color: #000;
}

/* Center Menu on Desktop */
.navbar-nav {
    align-items: center;
}

.navbar-collapse {
    flex-grow: 0;
    /* Prevent collapse section from growing too wide */
}

.navbar-nav .nav-link {
    padding: 1rem 1.5rem;
}

.navbar-nav .nav-link {
    text-transform: uppercase;
    color: var(--primary-color);
}

.social-icon-header {
    display: flex;
}

.social-icon-header a {
    display: inline-block;
    font-size: 2rem;
    border: 1px solid;
    width: 4rem;
    border-radius: 50%;
    height: 4rem;
    text-align: center;
    padding-top: 3px;
    background: var(--primary-color);
    color: white !important;
    transition: all .3s ease-in-out;
}

.social-icon-header a:hover {
    background-color: #009dffcc;
}

.video-div {
    position: relative;
    overflow: hidden;
}

.video-div::after {
    content: "";
    background: #00000059;
    position: absolute;
    top: -6px;
    width: 100%;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
}

.banner-section {
    position: relative;
    max-height: 650px;
    overflow: hidden;
}

.banner-content {
    position: absolute;
    top: 30%;
    z-index: 5;
    padding: 7rem;
    width: 100%;
}

.banner-content h1 span {
    font-size: 7rem;
    color: white;
    font-weight: 700;
    display: block;
}

.banner-content span {
    font-size: 2.5rem;
    font-weight: 600;
    color: white;
}


.content-slide span {
    position: absolute;
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 1s ease, transform 1s ease;
    visibility: hidden;
    top: 2rem;
}

.content-slide span.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}


.sec-title {
    font-size: 5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: capitalize;
}

.span-italic {
    font-weight: 400;
    font-style: italic;
    font-size: 2.4rem;
    color: var(--primary-color);
    margin: 1.5rem 0;
    display: inline-block;
}

.bring-your-sec {
    padding: 5rem 0;
}


a.default-btn {
    border: 1px solid;
    padding: 1rem 2rem;
    display: inline-block;
    margin: 2rem 0;
    color: #030303;
    transition: all .3s ease-in-out;
}


a.default-btn:hover {
    background: var(--primary-color);
    color: white;
}

.bring-your-content {
    padding: 3rem;
}

.eligance {
    background: url(../img/elegance.webp);
}

.luxury {
    background: url(../img/luxury.webp);
}

.eligance h3,
.luxury h3 {
    border: 1rem solid white;
    padding: 7rem;
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    z-index: 2;
    user-select: none;
}

.eligance,
.luxury {
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.eligance::after,
.luxury::after {
    content: "";
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #0000002b;
}

.interior-designer p {
    margin-bottom: 3rem;
}

.color-specialist-sec {
    background: url(../img/Color-Specialist.webp);
    color: white;
    padding: 4rem 0;
    background-repeat: no-repeat;
    width: 100%;
    background-attachment: fixed;
    background-size: cover;
    background-position: 50% 38.3783px;
}

.color-specialist-sec .sec-title {
    color: white;
}

.color-specilist-text {
    background-color: rgba(7, 42, 64, 0.5);
    padding: 5rem 4rem;
    text-align: justify;
}

.color-specialist-sec a.default-btn {
    color: #ffffff;
}

.color-specialist-sec a.default-btn:hover {
    border-color: var(--primary-color);
}

.thoughtful-styles p {
    line-height: 3rem;
    text-align: justify;
}

section.explore-client-result {
    padding: 6rem;
}

.were-up-challenge .bring-your-content p {
    line-height: 3rem;
    text-align: justify;
}

.explore-client-result {
    text-align: center;
}


.stop-dreaming-sec {
    position: relative;
    background: url(../img/Stop-Dreaming.webp);
    background-size: cover;
    padding: 4rem 0;
}

.stop-dreaming-sec::before {
    content: "";
    background: #00000047;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}


.color-specilist-service-sec {
    position: relative;
    background: url(../img/Color-Specialist-service.webp);
    background-size: cover;
    padding: 4rem 0;
}

.color-specilist-service-sec::before {
    content: "";
    background: #00000047;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.stop-dreaming-content {
    background: white;
    padding: 3rem;
    margin-right: 5rem;
    position: relative;
    z-index: 1;
}

.stop-dreaming-content p {
    line-height: 3rem;
    text-align: justify;
}

.video-sec {
    height: 100%;
    margin-left: 5rem;
}

.create-space .sec-title {
    font-size: 3.5rem;
}

.create-space p {
    line-height: 3rem;
}




.beauty {
    background: url(../img/beauty.webp);
}

.stunning {
    background: url(../img/stunning.webp);
}

.beauty h3,
.stunning h3 {
    border: 1rem solid white;
    padding: 7rem;
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    z-index: 2;
    user-select: none;
}

.beauty,
.stunning {
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.beauty::after,
.stunning::after {
    content: "";
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #0000002b;
}

.making-dreams {
    font-style: italic;
    padding-top: 3rem;
    padding-bottom: 10rem;
}

.making-dreams h5 {
    font-size: 2.5rem;
    color: var(--primary-color);
    padding-left: 4rem;
}

.making-dreams .sec-title {
    font-size: 3.5rem;
}

.contact-sec {
    background: url(../img/contact-bg.webp);
    background-size: cover;
    position: relative;
    background-position: center;
    background-attachment: fixed;
}

.contact-sec::before {
    content: "";
    background: #0000002b;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.contact-sec form label {
    display: block;
    /* margin: 10px 0; */
}

.contact-sec form input,
.contact-sec form textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--primary-color);
    /* resize: none; */
    min-height: 4rem;
    max-height: 75px;
}


.contact-sec input.wpcf7-form-control.wpcf7-submit.has-spinner {
    width: max-content;
    border: 1px solid;
    padding: 1rem 2rem;
    display: inline-block;
    margin: 2rem 0;
    color: #030303;
    transition: all .3s ease-in-out;
    margin-left: 10px;
    font-weight: 600;
}

.contact-sec input.wpcf7-form-control.wpcf7-submit.has-spinner :hover {
    background: var(--primary-color);
    color: white;
}

.contact-sec form {
    background: white;
    padding: 2rem;
    margin-right: 5rem;
    margin-top: -8rem;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    position: relative;
    z-index: 2;
    margin-bottom: 8rem;
}

/*  */

.accordion {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
}

.accordion-header {
    padding: 20px;
    cursor: pointer;
    font-weight: bold;
    color: var(--primary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-header:hover {
    background-color: #f1f1f1;
}

.accordion-content {
    padding: 15px;
    display: none;
    border-top: 1px solid #ddd;
}

.accordion-header::after {
    content: '\f107';
    font-size: 12px;
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}

.accordion-header.active::after {
    content: '\f106';
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}


footer {
    padding: 4rem;
    border-top: 5px solid var(--primary-color);
    padding-bottom: 0;
}

footer .social-icon-header {
    justify-content: center;

}

footer p {
    margin-top: 1rem;

}

.footer-content {
    text-align: center;
}


/* bring-service-page */
.bring-service-page {
    background: url(../img/bring-bg.webp);
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 8rem 0;
    text-align: center;
    color: white;
}

.bring-service-page .span-italic {
    color: white;
}

.bring-service-page .sec-title {
    text-align: center;
    color: white;
}


.bring-service-page a.default-btn {
    color: white;
}

.bring-service-page::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #00000066;
    top: 0;
    left: 0;
}

.bring-text-area {
    position: relative;
    z-index: 1;
}

.color-specilist-service {
    background: white;
    padding: 3rem;
    margin-left: 5rem;
    position: relative;
    z-index: 1;
}

.contact-page-section {
    background: url(../img/contact-page-bg.webp);
    background-size: cover;
    position: relative;
    text-align: center;
    padding: 12rem 0;
}

.contact-page-section::after {
    content: "";
    background: #0000008c;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.contact-page-section h1 {
    font-size: 5rem;
    color: white;
    font-weight: 700;
}

.contact-page-content {
    position: relative;
    z-index: 1;
}

.contact-main {
    padding: 5rem 2rem;
}

.content-left h3 {
    font-style: italic;
    font-size: 2.5rem;
    margin: 1rem 0;
    color: rgba(72, 72, 72, 1);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    margin: 1rem 0;
    padding: 1rem 0.5rem;
    outline: none;
    border: 1px solid #cccc;
}

button.contact-btns {
    width: max-content;
    padding: 1rem 4rem;
    display: inline-block;
    margin: 0 1rem;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    transition: all .3s ease-in-out;
}

button.contact-btns:hover {
    background: var(--primary-color);
    color: white;
}

.menu-item {
    position: relative;
}

.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 6px 8px;
    margin: 0;
    list-style: none;
}

.menu-item:hover>.sub-menu {
    display: block;
}

.menu-item-has-children:after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

ul#header-menu a {
    color: black;
    text-transform: uppercase;
    font-size: 16px;
}

.sub-menu li {
    position: relative;
}

.sub-menu a {
    display: block;
    padding: 10px;
    color: #000;
    text-decoration: none;
    background-color: #fff;
}



ul.sub-menu li {
    border-bottom: 1px solid var(--primary-color);
    font-size: 1.4rem;
}

ul.sub-menu li a {
    font-size: 1.4rem;
}

.sub-menu li a {
    display: block;
    color: rgb(51, 51, 51);
    font-size: 1.4rem !important;
    text-transform: capitalize;
    padding: 1rem 2rem;
    text-decoration: none;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    margin: 2rem 0;
}

.gallery-item-container {
    text-align: center;
    width: 100%;
}

.gallery-item {
    width: 100%;
    height: 300px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}



.preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.preview-overlay img {
    max-width: 90%;
    max-height: 90%;
}

.preview-overlay.visible {
    visibility: visible;
    opacity: 1;
    z-index: 99;
}

.close-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 3rem;
    color: #fff;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
}

.arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
}

.arrow-left {
    left: 2rem;
}

.arrow-right {
    right: 2rem;
}

.portfolio-main {
    padding: 3rem 0;
}

.renovation-sec h2,
.finished-sec h2 {
    color: var(--primary-color);
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.finished-sec {
    padding: 3rem 0;
}

#galleryContainer img {
    width: 100%;
}

.contact-sec form p br {
    display: none;
}

section.blog-card .card {
    height: 100%;
}


.contact-main .contact-form input,
.contact-main .contact-form textarea {
    margin: 0rem 0;
    max-height: 80px;
    padding: 5px 9px;
    border: none;
    background-color: rgba(243, 244, 246, 1);
}

.contact-main input.wpcf7-form-control.wpcf7-submit.has-spinner.contact-btns {
    max-width: fit-content;
    padding: .5rem 2rem;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    display: inline-block;
}


.contact-form ::placeholder {
    font-style: italic;
}

/* blog page */

.blog-section {
    padding: 2rem 0 !important;
}

.post-thumbnail {
    text-align: center;
}


.post-thumbnail img {
    max-width: 100%;
    height: auto;
}

.row.row-cols-1.row-cols-md-3.g-4 .card {
    height: 100%;
}


.row.row-cols-1.row-cols-md-3.g-4 {
    margin: 4rem 0;
}

main#primary {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 3rem;
    max-width: 1320px;
    margin: 0 auto;
}



div#comments label {
    display: block;
}

.modal-content label {
    width: max-content;
}

aside#secondary {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 3rem;
    max-width: 1320px;
    margin: 0 auto;
}

/*  */

.modal-header {
    justify-content: end;
}

.modal-header button.close {
    background: #0073aa;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
}

.modal .form-check {
    padding: 0;
}

.modal .wpcf7-list-item {
    display: block;
    margin: 1rem 0;
}

.modal textarea {
    width: 100%;
    max-height: 130px;
    padding: 1rem;
}

.modal .cf7mls-btns .cf7mls_next.action-button {
    padding: 7px 15px;
}

.multi-step-form input,
.multi-step-form select {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}


.modal form.cf7mls input.wpcf7-form-control.wpcf7-submit {
    padding: 10px 28px;
    font-weight: bold;
    background-color: #0073aa;
    color: #ffffff;
    margin: 0;
    position: absolute;
    width: max-content;
    bottom: 30px;
    right: 0;
    border: none;
}

.modal-body {
    padding: 18px !important;
}


/*  */
.card img {
    height: 300px;
    object-fit: cover;
}

a.btn.read-more {
    font-size: 1.6rem;
}

/* comments form */

div#comments {
    margin: 3rem 0;
}

h3#reply-title {
    font-size: 3rem;
    margin: 2rem 0;
}

div#comments input[type=text],
div#comments input[type=email],
div#comments input[type=url] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin: 1rem 0;
}

div#comments textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin: 1rem 0;
    height: 80px;
}

div#comments input#submit {
    border: 1px solid;
    padding: 1rem 2rem;
    display: inline-block;
    margin: 2rem 0;
    color: #030303;
    transition: all .3s ease-in-out;
}

div#comments input#submit:hover {
    background: var(--primary-color);
    color: white;
}

div#comments p.comment-form-cookies-consent {
    display: flex;
    gap: 1rem;
    align-items: center;
}

main#primary .nav-links {
    display: flex;
    justify-content: space-around;
}

main#primary span.cat-links {
    display: none;
}

main#primary .nav-links a {
    color: #030303;
    display: inline-block;
    padding: 1rem 1.5rem;
    border: 1px solid var(--primary-color);
    border-radius: 1px;
    transition: all .3s ease-in-out;
}

main#primary .nav-links a:hover {
    background: var(--primary-color);
    color: white;
}

div#galleryContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
    gap: 1rem;
}


div#galleryContainer a {
    display: block;
    overflow: hidden;
    position: relative;
}

div#galleryContainer img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.3s ease;
}


div#galleryContainer img:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.contact-sec input.wpcf7-form-control.wpcf7-submit.has-spinner:hover,
.contact-main input.wpcf7-form-control.wpcf7-submit.has-spinner.contact-btns:hover {
    background: var(--primary-color);
    color: white;
}

footer.entry-footer {
    border: none !important;
}

/* end */

/* responsive css start */

@media (min-width:991px) {
    .sub-menu li a {
        display: block;
        color: rgb(51, 51, 51);
        font-size: 1.4rem;
        text-transform: capitalize;
        padding: 1rem 2rem;
        text-decoration: none;
    }

    .sub-menu {
        max-height: 400px;
        overflow: scroll;
        width: max-content;
        overflow-x: hidden;
    }

    ul.navbar-nav li+li {
        margin-left: 5rem;
    }

    .custom-dropdown li {
        margin-left: 0 !important;
    }

    .navbar {
        padding: 0rem 2.3rem;
    }

    .color-specilist-text {
        margin-left: 8rem;
    }

    .thoughtful-styles .img-bring {
        margin-left: 8rem;
    }

    ul.sub-menu li+li {
        margin: 0;
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        max-height: 400px;
        overflow: scroll;
        width: max-content;
        overflow-x: hidden;
    }
}


@media (max-width:1100px) {
    .social-icon-header {
        display: none;
    }


}

@media (max-width: 991px) {
    .navbar-nav {
        align-items: flex-start;
    }

    .video-div img {
        height: 100%;
        object-fit: cover;
    }

    ul#header-menu li {
        margin: 10px 0;
        width: 100%;
    }

    ul.sub-menu {
        max-height: 300px;
        overflow-x: scroll;
    }


    .banner-content {
        top: 20%;
        padding: 6rem;
    }



    .beauty,
    .stunning {
        margin: .5rem 0;
    }

    .making-dreams .sec-title {
        margin: 14px 0;
        text-align: center;
    }

    .eligance,
    .luxury {
        margin: 0.5rem 0;
    }

    .banner-content h1 span {
        font-size: 6rem;
    }

    div#galleryContainer {
        grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
    }

}

@media (max-width: 767px) {
    .stop-dreaming-content {
        margin-right: 0;
    }

    .banner-content h1 span {
        font-size: 5rem;
    }


    .contact-sec form {
        margin-right: 0;
    }

    .video-div {
        height: 400px;
    }

    .video-div video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .color-specilist-text {
        padding: 4rem 3rem;
    }

    section.explore-client-result {
        padding: 1rem 0;
    }

    .bring-your-sec {
        padding: 1rem 0;
    }

    .sec-title {
        font-size: 4rem;
    }

    .video-sec {
        margin-left: 0;
    }

    .color-specilist-service {
        margin-left: 0rem;
    }

    .contact-page-section h1 {
        font-size: 3rem;
    }
}

@media (max-width: 600px) {
    .contact-main {
        padding: 2rem 2rem;
    }

    .banner-content {
        top: 50px;
        padding: 4rem;
    }

    .bring-your-sec {
        padding: 1rem 0;
    }

    .sec-title {
        font-size: 3rem;
    }

    .span-italic {
        font-size: 2rem;
    }

    .banner-content h1 span {
        font-size: 4rem;
    }

    .banner-content span {
        font-size: 1.5rem;
    }

}

@media (max-width: 480px) {
    div#galleryContainer {
        grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    }

    .banner-content {
        top: 30%;
        padding: 3rem;
    }

    .content-slide {
        margin: 2rem 0;
    }

    .banner-content h1 span {
        font-size: 3rem;
    }

    img.img-fluid.logo {
        max-width: 190px !important;
    }

}