* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    letter-spacing: 1.1px;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
}
html{overflow-x: hidden;}
a {
    text-decoration: none;
    color: inherit;
}
button{
    background-image: url("./images/test.png");
    background-size: cover;
    border: none;
    border-radius: 20px;
    padding: 15px 30px;
    cursor: pointer;
    color: white;
    position: relative;
}
#categorySelect{
    border: none;
    background: transparent;
}
li{
    list-style: none;
}

:root {
    --primary-blue: #e7e8e6;  /* Deep Navy Blue - Trust & Professionalism */
    --accent-brown: #76716a;  /* Muted Olive Green - Balance & Security */
    --accent-gold: #ab9c8f;   /* Soft Gold/Beige - Warmth & Elegance */
    --neutral-light: #F5F5F5; /* Warm Light Gray - Background */
    --neutral-dark: #403a30;  /* Dark Charcoal - Text & Contrast */
}
/* Text Colors */
.c-w{color: white;}
.c-pb { color: var(--primary-blue); }   /* Deep Navy Blue */
.c-ab { color: var(--accent-brown); }   /* Muted Olive Green */
.c-agd { color: var(--accent-gold); }   /* Soft Gold/Beige */
.c-nl { color: var(--neutral-light); }  /* Warm Light Gray */
.c-nd { color: var(--neutral-dark); }   /* Dark Charcoal */

/* Background Colors */
.bg-pb { background-color: var(--primary-blue); }
.bg-ab { background-color: var(--accent-brown); }
.bg-agd { background-color: var(--accent-gold); }
.bg-nl { background-color: var(--neutral-light); }
.bg-nd { background-color: var(--neutral-dark); }
.bg-i{background-size: cover; background-position: center;}
.bg-i-1{background-image: url("./images/brickwall.jpeg");}

/* Border Colors */
.b-pb { border-color: var(--primary-blue); }
.b-at { border-color: var(--accent-teal); }
.b-ag { border-color: var(--accent-green); }
.b-agd { border-color: var(--accent-gold); }
.b-nl { border-color: var(--neutral-light); }
.b-nd { border-color: var(--neutral-dark); }
.bb-1{border-bottom: 1px solid var(--accent-gold);}

/*==== CUSTOM STYLES ====*/
/* A */
.ai-c {align-items: center;}

/* B */
.bt-1s{border-top: 1px solid var(--accent-gold);}
.bg-ds{background-color: black; opacity: 0.3;}
.br-50{border-radius: 50%;}
.b-20p{bottom: 20px;}

/* D */
.dn{display: none;}
.db{display: block;}

/* F */
.flex {display: flex;}
.flex-1{flex: 1;}
.flex-2{flex: 2;}
.flex-col{display: flex; flex-direction: column;}
.flex-cent{align-items: center; justify-content: center;}
.flex-wrap{flex-wrap: wrap;}
.flex-se{justify-content: space-evenly;}
.fs-wh{width: 100%; height: 100%;}
.fr, p, h3 {
    font-family: "M PLUS Rounded 1c", serif;
    font-weight: 400;
    font-style: normal;
}
.f-rdr {
    font-family: "Rubik Dirt", system-ui;
    font-weight: 400;
    font-style: normal;
  }
  .fs-10{font-size: 10rem; font-weight: 900;}
  .fs-3{font-size:3rem;}
  .fs-1_6{font-size: 1.6rem;}
  .fs-1_3{font-size: 1.3rem;}

/* G */
.g-10{gap: 10px;}

/* H */
.h-20{height: 20px;}
.h-50{height: 50px;}
.h-100{height: 100px;}
.h-200{height: 200px;}
.h-300{height: 300px;}
.h-500{height: 500px;}
.h-80vh{height: 80vh;}
.h-100vh{height: 100vh;}
.h-5{height: 5%;}
.h-80p{height: 80%;}
.h-100p{height: 100%;}

/*J*/
.jc-sb{justify-content: space-between;}

/* M */
.m-a{margin: auto;}
.m-5{margin: 5px;}
.m-20{margin: 20px;}
.m-50{margin: 50px;}
.m-100{margin: 100px;}
.m-200{margin: 200px;}
.mt-10{margin-top: 10px;}
.mt-50{margin-top: 50px;}
.mt-100{margin-top: 100px;}
.mb-100{margin-bottom: 100px;}
.mr-5{margin-right: 5px;}
.mr-100{margin-right: 100px;}
.mr-200{margin-right: 200px;}

/* N */
.nw{white-space: nowrap;}

/* O */
.ofx-h{overflow-x: hidden;}

/* P */
.p-5{padding: 5px;}
.p-10{padding: 10px;}
.p-20{padding:20px;}
.p-50{padding: 50px;}
.pt-100{padding-top: 100px;}
.pos-r{position: relative;}
.pos-a{position: absolute;}

/* R */
.r-10{right: 10%;}
.rn-50{right: -50%;}

/* T */
.tac{text-align: center;}
.tal{text-align: left;}

/* W */
.w-100p{width: 100px;}
.w-300p{width: 300px;}
.w-500p{width: 500px;}
.w-5{width: 5%;}
.w-40{width: 40%;}
.w-50{width: 50%;}
.w-80{width: 80%;}
.w-100{width: 100%;}
.wi-100{width: 100px;}

/* Z */
.zi-5{z-index: 5;}
.zi-10{z-index: 10;}
.zi-15{z-index: 15;}

/*==== SECTION STYLES ====*/
header{overflow: hidden;}

.hero {
    position: relative;
    width: 100%;
    text-align: center;
    justify-content: center;
    height: 50vh;
    margin-top: 100px;
    top:-100px
}
nav{
    position: fixed;
    top:0;
    bottom: 0;
    z-index: 2000;
}
.carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hides scrollbar (Firefox) */
    -ms-overflow-style: none; /* Hides scrollbar (IE/Edge) */
    height: 50vh;
}
.mainbg {
    background-image: url("./images/Construction/cf6.jpg");
    background-position: center;
    background-size: cover;
}
.secondarybg{
    background-image: url("./images/Construction/cf7.jpg");
    background-position: center;
    background-size: cover;
}
.test{
    background-color: black;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.3;
}

#startdate{
    text-transform: uppercase;
    font-family: verdana;
    font-weight: 700;
    color: transparent;
    background-image: url("./images/Construction/cf7.jpg");
    background-clip: text;
    background-size:  cover;
    -webkit-background-clip: text;
}

/* Hides scrollbar (Chrome, Safari) */
.carousel::-webkit-scrollbar {
    display: none;
}

.card {
    min-width: 250px;
    max-width: 300px;
    scroll-snap-align: center;
    background-color: var(--neutral-light);
    text-align: center;
    flex-shrink: 0;
    overflow-y: hidden;
}
.widget {
    position: fixed;
    right: 40px;
    bottom: 150px;
    z-index: 200;
    
}
.widget img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.widget-btn {
    width: 55px;
    height: 60px;
    border-radius: 50%;
    z-index: 5;
    background-color: black;
}

/* Rotate the button */
.rotateWidget {
    transform: rotate(360deg);
    transition: transform 0.5s ease-in-out;
}

/* Move Facebook (Up) */
.moveUp {
    transform: translate(-100px, -60px);
    transition: transform 0.4s ease-in-out;
}

/* Move Instagram (Left) */
.moveLeft {
    transform: translateX(-100px);
    transition: transform 0.4s ease-in-out;
}

/* Move WhatsApp (Down) */
.moveDown {
    transform: translate(-100px, 60px);
    transition: transform 0.4s ease-in-out;
}

/* Breadcrumbs styling */
.breadcrumbs {
    font-size: 0.9rem;
    color: #666;
    padding: 10px 0;
}

.breadcrumbs a {
    color: #111;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumbs a:hover {
    color: #D3A24A;
    text-decoration: underline;
}

/*==== MOBILE FRIENDLY ====*/
@media only screen and (max-width: 800px) {

    button{width: max-content; font-size: 11px; white-space: nowrap;}
    .flex {flex-direction: column;}
    .fs-3{font-size:1.1rem; z-index: 10; text-align: center; font-weight: 600;}
    .fs-10{font-size: 8rem;}
    .h-50{height: auto;}
    .h-200{height: 150px;}
    .mr-100 { margin-right: 0;}
    .mb-100{margin-bottom: 60px;}
    .mt-100{margin-top: 50px;}
    .m-50{margin: 30px;}
    .p-50{padding: 25px;}
    .r-10 {right: 0;}
    .navicons img{width: 30px;}

    /* MOBILE ONLY DESIGNS */
    .mob-flex{flex-direction: row;}
    .mob-flex-cent{align-items: center; justify-content: center;}
    .mob-dn{display: none;}
    .mob-w-90{width: 90%;}
    .mob-w-100{width: 100% !important;}
    .mob-mt-10{margin-top: 10px;}
    .mob-mt-30{margin-top: 30px;}
    .mob-h-100{height: 100vh;}
    .mob-h-mc{height: max-content;}
    .mob-of-v{overflow: visible;}
    .mob-pos-r{position: relative;}
    .mob-m-20{margin: 20px;}
    .mob-h-150{height: 150px;}
}

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

}