/*Theme Name: Personal BlogAuthor: Dev BroVersion: 1.0*/
/* Fonts */

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 1000;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('assets/fonts/Roboto_Condensed/RobotoCondensed-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 1000;
    font-style: normal;
}



/* End of Fonts */
:root {
    --gold: #DFBD69;
    --text-brown: #59421C;
    --gradient-gold: linear-gradient(252deg, rgba(64, 10, 10, 1) 0%, rgba(148, 136, 30, 1) 79%, rgba(156, 161, 63, 1) 100%);
}

img {
    max-width: 100%;
}

.fw-540 {
    font-weight: 400;
}

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

.fw-600 {
    font-weight: 600;
}

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

.fw-800 {
    font-weight: 800;
}

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

.fs-14 {
    font-size: 14px;
}

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

.fs-18 {
    font-size: 18px;
}

.fs-20 {
    font-size: 20px;
}

.fs-22 {
    font-size: 22px;
}

.g-16 {
    gap: 16px;
}

.g-24 {
    gap: 24px !important;
}

.g-40 {
    gap: 40px !important;
}

.g-60 {
    gap: 60px !important;
}

.g-100 {
    gap: 100px !important
}

.pt-12 {
    padding-top: 16px !important;
}

.mb-24 {
    margin-bottom: 24px;
}

.mb-40 {
    margin-bottom: 40px;
}

.pb-24 {
    padding-bottom: 24px;
}

.pr-24 {
    padding-right: 60px;
}

.pr-40 {
    padding-right: 40px;
}

.p-40 {
    padding: 40px !important;
}

.me-12 {
    margin-left: 12px;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.mt-16 {
    margin-top: 16px !important;
}

.mt-24 {
    margin-top: 24px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-100 {
    margin-bottom: 100px !important;
}

.wspace-nowrap {
    white-space: nowrap;
}

.text-brown-gold {
    color: var(--Brown, #432C07) !important;
}

.bg-brown-gold {
    background-color: var(--Brown, #432C07) !important;
}

.bg-bright-gold {
    background: var(--Gold-1, linear-gradient(90deg, #AE8625 0%, #F7EF8A 25%, #D2AC47 75%, #EDC967 100%)) !important;
    backdrop-filter: blur(10px);
}

.dotted-hr {
    opacity: 1;
    margin: auto 0.5rem;
    border: 0px;
    width: auto;
    height: 12px;
    flex: 1 0 0;
    border-bottom: 1px dashed var(--Text-Color, #64635D);
}


section p {
    color: var(--Brown, #64635D);
    font-family: "Montserrat";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 162.5% */
}

section p:last-of-type{
    margin-bottom: 0;
}

section h1 {
    align-self: stretch;
    color: #FFF;
    text-align: center;
    font-family: 'Roboto Condensed';
    font-size: 72px;
    font-style: normal;
    font-weight: 800;
    line-height: 113.889%;
    /* 113.889% */
    text-transform: uppercase;
    margin: 0;
}

section .wrapper {
    max-width: calc(1256px + 24px);
    margin: 0 auto;
    width: 100%;
}

h2 {
    color: #432C07;
    /* H2 */
    margin: 0;
    font-family: 'Roboto Condensed';
    font-size: 38px;
    font-style: normal;
    font-weight: 800;
    line-height: 50px;
    /* 131.579% */
    text-transform: uppercase;
}

h3 {
    margin: 0;
    color: var(--Brown, #432C07);
    font-family: "Roboto Condensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 36px;
    /* 180% */
    text-transform: uppercase;
}

h4 {
    margin: 0;
    color: var(--Blck, #141311);
    /* H4 */
    font-family: 'Roboto Condensed';
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 28px;
    /* 155.556% */
    text-transform: uppercase;
}

li {
    color: #FFF;
    font-family: "Montserrat";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 162.5% */
}

body {
    background-color: #f0f0f0;
    font-family: 'Roboto Condensed', serif;
}


section {
    position: relative;
    padding: 100px 15px;
}

ul {
    margin: 0;
}

.row {
    --bs-gutter-y: 1.5rem;
}

.fit-content {
    width: fit-content !important;
}


.navbar-custom {
    max-width: 1576px;
    width: calc(100% - 30px);
    margin: 0 auto;
    padding: 0px 28px;
    border: 1px solid var(--gold);
    border-radius: 12px;
    border: 1px solid var(--Gold-2, #DFBD69);
    background: rgba(0, 0, 0, 0.60) !important;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 16px 16px 0px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(10px);
    z-index: 2000;
}

.navbar li a.link__styles {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.navbar li a.link__styles:hover {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: inherit;
    /* fallback */
}

.navbar li a.link__styles:hover svg path {
    fill: #59421C;
    /* solid color for the SVG only */
}

.navbar-nav {
    gap: 30px;
}

li.nav-item.custom-dropdown {
    padding-block: 14px;
}

.custom-dropdown .custom-dropdown-menu {
    display: none;
    top: 90%;
    max-width: 1576px;
    width: 100%;
    position: absolute;
    /* background-color: #905e5e; */
    left: 0;
    /* padding: 24px 32px; */
    overflow: hidden;
    /* box-shadow: 10px 10px 10px #747d8c; */
    border-top: 20px solid transparent;
}

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

.dropdown-toggle::after {
    display: none !important;
}

.dropdown-inner {
    background-color: white;
    padding: 24px 40px;
    border-radius: 12px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 16px 16px 0px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(10px);
}

.dropdown-item {
    padding: 0px;
    color: #333;
    text-decoration: none;
    display: block;
    transition: background-color 0.2s;
}

.dropdown-item:hover {
    background-color: #e6e6e6;
}

.about__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 16px 24px 24px;
    max-height: 352px;
    height: 100vw;
    max-width: 520px;
    border-radius: 12px;
    transition: all 1s ease;
}

.about__content:hover {
    border-radius: 12px;
    border: 1px solid var(--Gold-2, #DFBD69);
    background: #FEFAED;
}

.township__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 16px 24px 0px;
    max-height: 352px;
    height: 100vw;
    max-width: 520px;
    width: 100vw;
    border-radius: 12px;
    transition: all 1s ease;
    gap: 8px;
}

.township__content .a__township {
    padding: 12px 24px 12px 24px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 12px;
}

.township__content .a__township p {
    margin: 0;
    padding: 0;
}

.township__content .a__township:hover {
    border-radius: 12px;
    border: 1px solid var(--Gold-2, #DFBD69);
    background: #FEFAED
}

div#pre_content.township__content {
    max-width: 824px !important;
    padding: 0;
    flex-wrap: wrap;
    max-height: 349px;
}

a#pre_a.a__township {
    padding: 24px;
    max-width: 406px !important;
}

div#ready_content.township__content {
    display: flex;
    width: 996px;
    height: 349px;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

a#ready_a.a__township {
    padding: 24px 12px;
    max-width: 472px !important;
}

div.ready-container {
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 12px;
}

div.ready-container a {
    text-decoration: none;
}

div.ready-container:hover {
    border-radius: 12px;
    border: 1px solid var(--Gold-2, #DFBD69);
    background: #FEFAED
}

div.ready-container p {
    margin: 0;
}

/* .row .a__content {  transition: all 1s ease;}.row .a__content:hover {  border-radius: 8px;  border: 1px solid var(--Gold-2, #DFBD69);  background: #FEFAED;} */
nav .about__images {
    display: flex;
    padding: 0px 40px;
    justify-self: flex-start;
    gap: 24px;
}

nav .about__images>div {
    flex: 1;

}

nav .about__images img {
    border-radius: 8px;
}


.custom-dropdown-menu p {
    color: var(--Text-Color, #64635D);
    font-family: Montserrat;
    padding-bottom: 8px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 185.714% */
}

.custom-dropdown-menu .link-header {
    color: var(--Blck, #141311);
    /* CTA */
    font-family: 'Roboto Condensed';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
    /* 166.667% */
}

.cta_btn {
    position: relative;
    z-index: 1;
    text-decoration: none;
    width: 100%;
    color: #59421C;
    text-align: center;
    font-family: "Roboto Condensed";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: 25px;
    /* 178.571% */
    display: flex;
    padding: 11.5px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    border: transparent;
    background: var(--Gold-1, linear-gradient(90deg, #AE8625 0%, #F7EF8A 25%, #D2AC47 75%, #EDC967 100%));
    transition: all 1s ease;
}

.cta_btn:hover {
    border-radius: 8px;
    transition: all 1s ease;
}


.cta_btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid var(--Gold-1, #AE8625);
    background: var(--Gold-2, linear-gradient(90deg, #DFBD69 0%, #E0AA3E 50%, #926F34 100%));
    border-radius: 8px;
    opacity: 0;
    transition: all 1s ease;
    z-index: -1;

}

.cta_btn:hover::after {
    opacity: 1;
    transition: all 1s ease;
}

.cta_view_layout {
    position: relative;
    z-index: 1;
    text-decoration: none;
    width: 100%;
    color: #59421C;
    text-align: center;
    font-family: "Roboto Condensed";
    font-size: 14px;
    font-weight: 800;
    line-height: 25px;
    display: flex;
    padding: 11.5px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;

    /* Use ONE gradient only */
    background-image: linear-gradient(90deg, #DFBD69 0%, #E0AA3E 50%, #926F34 75%, #563e08 100%);
    background-size: 200% 100%;
    background-position: left center;

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    border: 2px solid var(--Gold-1, #AE8625);

    /* Animate only interpolatable props */
    transition:
        background-position 0.8s ease,
        border-color 0.6s ease,
        border-width 0.6s ease;
    /* optional if you change width */
}

.cta_view_layout:hover {
    /* Move the SAME gradient */
    background-position: right center;

    /* Don’t use border shorthand; animate the parts */
    border-color: var(--Gold-2, #926F34);
    /* border-width: 2px;  // uncomment if you change width from 1px -> 2px */
}

section span,
footer span {
    font-family: "Montserrat";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
    /* 208.333% */
    text-transform: uppercase;
    background: var(--Gold-2, linear-gradient(90deg, #DFBD69 0%, #E0AA3E 50%, #926F34 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section .wpcf7-form-control-wrap {
    -webkit-text-fill-color: var(--Text-Color, #64635D) !important;
}

section .contact-form {
    background-color: #fff;
    display: flex;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    border-radius: 12px;
    border: 2px solid var(--Gold-2, #DFBD69);
}

section .contact-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    grid-template-areas:
        "fname lname"
        "code phone"
        "project project"
        "unit unit"
        "message message"
        "submit submit";
}

.screen-reader-response {
    display: none !important;
}

.message-area,
.cta_btn {
    grid-column: span 2;
}

.form-grid .wpcf7-form-control-wrap[data-name="your-message"] {
    grid-column: span 2;
}

.first-name {
    grid-area: fname;
}

.last-name {
    grid-area: lname;
}

.country-code {
    grid-area: code;
}

.mobile-number {
    grid-area: phone;
}

.project-inquiry {
    grid-area: project;
}

.unit-type {
    grid-area: unit;
}

.message {
    grid-area: message;
}

.submit-button {
    grid-area: submit;
}

section .contact-form .form-grid textarea {
    grid-column: span 2;
}

section .contact-form input:not([type="submit"]),
section .contact-form textarea,
section .contact-form select {
    width: 100%;
    padding: 11.5px 12px;
    border-radius: 8px;
    border: 1px solid var(--Gold-2, #DFBD69);
    background: #FFF;
    color: var(--Text-Color, #64635D);
    font-family: "Montserrat";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    /* 162.5% */
}


/* Mostly Used Components like Buttons, HR and etc */

section .substracted-image {
    width: 100%;
    border-radius: 12px;
    height: 100%;
    object-fit: cover;
}

section .play-video {
    font-weight: 800 !important;
    position: absolute;
    top: calc(50% - 80px);
    left: calc(50% - 80px);
    z-index: 2;
    width: 160px;
    padding: 40px;
    border-radius: 3647.059px;
    border: 2px solid var(--Gold-1, #AE8625);
    background: rgba(67, 44, 7, 0.20);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 16px 16px 0px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(15px);
    text-align: center;
    font-family: 'Roboto Condensed';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 36px;
    /* 163.636% */
    text-transform: uppercase;
    background: var(--Gold-1, linear-gradient(90deg, #AE8625 0%, #F7EF8A 25%, #D2AC47 75%, #EDC967 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: bounceMove 15s infinite ease-in-out;
}

section .play-video-2 {
    position: absolute;
    display: flex;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    z-index: 2;
    width: 60px;
    padding: 16px 16px 16px 20px;
    border-radius: 3647.059px;
    border: 2px solid var(--Gold-1, #AE8625);
    background: rgba(67, 44, 7, 0.20);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 16px 16px 0px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(15px);
    justify-content: center;
    align-items: center;
    background: var(--Gold-1, linear-gradient(90deg, #AE8625 0%, #F7EF8A 25%, #D2AC47 75%, #EDC967 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



.hr-1 {
    width: 100%;
    margin: 0;
    border: 0 !important;
    opacity: 100;
    height: 1px;
    align-self: stretch;
    background: linear-gradient(90deg, rgba(174, 134, 37, 0.60) 0%, rgba(247, 239, 138, 0.60) 25%, rgba(210, 172, 71, 0.60) 75%, rgba(237, 201, 103, 0.60) 100%);
    margin-bottom: 36px;
}

.hr-2 {
    width: 100%;
    margin: 0;
    border: 0 !important;
    opacity: 100;
    height: 1px;
    align-self: stretch;
    background: var(--Gold-2, linear-gradient(90deg, #DFBD69 0%, #E0AA3E 50%, #926F34 100%));
}

.card-bottom .number-link {
    text-decoration: none;
    color: #FFF;
    font-family: "Roboto Condensed";
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 36px;
    /* 200% */
    text-transform: uppercase;
}

/* Unit Section Modal */

.modal-xxl {
    --bs-modal-width: 100%;
    max-width: 1556px;
}

/* Custom styles for the modal content */
.custom-modal-style {
    padding: 40px;
    /* 40px padding minus the default 12px Bootstrap might have */
    border-radius: 12px;
    border: 1px solid #EAEAEA;
    /* A light grey border, change as needed */
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* This creates the cool blurry background effect from your design */
    backdrop-filter: blur(10px);
}

.modal-header {
    padding: 0;
    border: 0px;
}

.modal-body {
    padding: 0;
}

/* Style for the flex container holding the images */
.image-layout-container {
    display: flex;
    justify-content: center;
    /* Centers the images if they don't fill the space */
    align-items: center;
    /* Aligns them vertically */
    gap: 40px;
    /* This creates the 40px space between the images */
}

/* Make images responsive within the container */
.image-layout-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Optional: Removing default padding from modal body if needed */
.modal-body {
    padding: 0;
}

/* Unit Section Modal End */

/* Pagination */


/* End of Pagination */
@keyframes bounceMove {
    0% {
        transform: translateY(20%);
    }

    10% {
        transform: translateY(-20%);
    }

    20% {
        transform: translateY(20%);

    }

    30% {
        transform: translateY(-20%);
    }

    40% {
        transform: translateY(20%);
    }

    50% {
        transform: translateY(-20%);
    }

    60% {
        transform: translateY(20%);
    }

    70% {
        transform: translateY(-20%);
    }

    80% {
        transform: translateY(20%);
    }

    90% {
        transform: translateY(-20%);
    }

    100% {
        transform: translateY(20%);
    }
}


/* End of used */
@media (max-width: 1400px) {

    .custom-dropdown,
    .custom-dropdown-menu {
        display: none !important;
    }

    .navbar-nav .dropdown {
        display: block;
    }

    .navbar-custom {
        padding: 14px 12px;
    }

    .dropdown .nav-link {
        font-size: 18px !important;
        font-weight: 600 !important;
    }
}

.dropdown-menu {
    display: none;
    background-color: transparent;
    border: none;
    padding: 0px 0px 0px 12px;
    margin: 0;
}

.dropdown-menu.show {
    display: block !important;
}

.plan-prev {
    padding: 12px 16px;
    border-radius: 8px;
    border: 2px solid #797979;
    background: rgba(255, 255, 255, 0.06);
}

.plan-next {
    padding: 12px 16px;
    border-radius: 8px;
    border: 2px solid #797979;
    background: rgba(255, 255, 255, 0.06);
}

@media only screen and (min-width: 1200px) {}

@media only screen and (max-width: 1199px) {
    section {
        padding: 70px 30px !important;
    }

    h1 {
        font-size: 45px !important;
    }
}

@media only screen and (max-width: 992px) {


    section.unit-section .row-container .row,
    section.unit-section .row-second-container .row {
        flex-direction: column-reverse !important;
    }

    section.first-banner,
    section.first-section {
        padding-top: 150px !important;
    }
}

@media only screen and (max-width: 768px) {

    .modal-header {
        display: none;
    }

    .custom-modal-style {
        margin: 50px
    }

    .table-viewer {
        overflow-y: hidden;
    }

    section {
        padding: 50px 10px !important;
    }
}

@media only screen and (max-width: 575px) {
    .custom-modal-style{
        margin: 10px;
    }
    .form-grid .wpcf7-form-control-wrap {
        grid-column: span 2;
    }

    .navbar-brand {
        width: 50%;
    }

    section.first-banner,
    section.first-section {
        padding-top: 125px !important;
    }
}