@charset "utf-8";
/* Removed duplicate @charset declaration */

/* ============================================================
   ARCHITECTURE NOTE
   This stylesheet loads alongside Bootstrap 3 and Skeleton.
   These frameworks have conflicting resets, grid systems, and
   base typography. Skeleton is redundant when Bootstrap is
   present and should be considered for removal. The custom
   breakpoints in this file (304px, 426px, 540px, 654px, 1024px,
   1488px) do not align with Bootstrap (768/992/1200px) or
   Skeleton (400/550/750px) — Bootstrap grid columns may behave
   unexpectedly at these sizes.
   ============================================================ */


/* ============================================================
   BASE RESET
   Replaced aggressive "html, html*" selector.
   box-sizing applied cleanly; font set once on body and
   inherited everywhere — no need to repeat on every element.
   Bootstrap's bundled normalize.css already handles
   margin/padding resets.
   ============================================================ */

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

body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
                 "DejaVu Sans", Verdana, sans-serif;
    font-size: 14px;
}


/* ============================================================
   HEADINGS
   White colour is intentional for dark-background sections.
   Add a local override where a light background is used.
   Removed repeated font-family declarations — body handles
   inheritance. Removed -webkit-box-shadow: 0 0 0 on h1
   (zero-value shadow does nothing).
   ============================================================ */

h1 {
    font-style: normal;
    font-weight: 400;
    font-size: 3em;
    color: #fff;
    text-align: center;
}

h2 {
    font-style: normal;
    font-weight: 300;
    font-size: 2em;
    color: #fff;
    text-align: center;
}

h3 {
    font-style: normal;
    font-weight: 300;
    font-size: 1.7em;
    color: #fff;
    text-align: center;
}

h4 {
    font-style: normal;
    font-weight: 200;
    font-size: 1.4em;
    color: #fff;
    text-align: center;
}

h5 {
    font-style: normal;
    font-weight: 200;
    font-size: 1.2em;
    color: #fff;
    text-align: center;
}

h6 {
    font-style: normal;
    font-weight: 200;
    font-size: 1em;
    color: #fff;
    text-align: center;
}


/* ============================================================
   LISTS
   Removed repeated font-family — inherited from body.
   ============================================================ */

ul {
    text-align: center;
}

li {
    display: inline-block;
    padding: 1px 3px 1px 2px;
    margin: 2px 5px 3px 5px;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.style-nav {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.style-nav ul {
    list-style-type: none;
    background-color: transparent;
    margin-top: -2px;
    float: none;
}

.style-nav ul li {
    display: inline-block;
    margin: 2px;
    width: 106px;
    background-color: rgba(174, 173, 173, 0.61);
    border-radius: 6px;
}

.style-nav ul li a {
    text-decoration: none;
    color: #000;
    text-align: center;
    display: block;
    padding: 2px;
    border-radius: 6px;
    font-weight: 600;
    /* Removed obsolete -moz-, -ms-, -o- prefixes */
    -webkit-transition: background-color 400ms ease-in-out 0s,
                        color 500ms ease-in-out 100ms;
            transition: background-color 400ms ease-in-out 0s,
                        color 500ms ease-in-out 100ms;
}

.style-nav ul li a:hover {
    background-color: #404040;
    /* Fixed: removed quotes from sans-serif generic keyword */
    color: #FA7E04;
    border-radius: 6px;
}


/* ============================================================
   FIXED MENU BAR
   Fixed: align-content only works on flex/grid containers and
   had no effect here. Replaced with text-align: center.
   ============================================================ */

.fixMenu {
    top: 0;
    z-index: 1000;
    width: 96%;
    padding-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: fixed;
}


/* ============================================================
   BODY COLOUR
   ============================================================ */

.bodyColour {
    background-color: #5A6791;
    margin-top: 200px;
}


/* ============================================================
   CONTACT SECTION
   ============================================================ */

.contactWidth {
    width: 96%;
    margin-right: 2%;
    margin-left: 2%;
}

/* Fixed: min-height: 768 → 768px (missing unit) */
.contactMinHeight {
    min-height: 768px;
}

.sectionContact {
    background-image: url(../images/Index/manWoods.jpg);
    background-size: cover;
}

/* Fixed: renamed from .label to .contact-label.
   The original name overrides Bootstrap's .label component,
   turning every Bootstrap label/badge pale blue.
   Update your HTML to use class="contact-label" instead. */
.contact-label {
    background-color: aliceblue;
}

.h1Contact {
    font-size: 1.6em;
    color: #000;
    text-align: left;
}

.h2Contact {
    font-size: 1.4em;
    color: #000;
    text-align: left;
}

#Contact {
    font-size: 3em;
    color: #fff;
    text-align: center;
}


/* ============================================================
   FORM CONTAINER
   ============================================================ */

.form-container {
    padding: 5%;
    background: rgba(255, 255, 255, 0.34);
    border: 9px solid #f2f2f2;
    border-radius: 6px;
    max-width: 520px;
    margin: auto;
}


/* ============================================================
   COLOUR BARS
   Removed repeated font-family — inherited from body.
   ============================================================ */

.black {
    background-color: #000;
    padding: 0;
    border-top: medium solid #000;
    border-bottom: medium solid #000;
}

.K_bar_blue_borderTopAndBottom {
    background-color: #5A6791;
    padding-left: 5%;
    padding-right: 5%;
    border-top: medium solid #000;
    border-bottom: medium solid #000;
}

.K_bar_darkBlue_borderTopAndBottom {
    background-color: #384676;
    padding-left: 5%;
    padding-right: 5%;
    border-top: medium solid #000;
    border-bottom: medium solid #000;
}

.K_bar_white_borderTopAndBottom {
    background-color: #5a6791;
    padding-left: 5%;
    padding-right: 5%;
    border-top: medium solid #000;
    border-bottom: medium solid #000;
}


/* ============================================================
   TEXT BOXES
   Fixed across all boxes:
   - rgba(0,0,05,...) → rgba(0,0,0,...) — invalid channel value
   - margin-bottom: 140 → 140px (missing unit)
   - padding shorthand used where all four values were identical
   ============================================================ */

.placeTextMargin460px {
    font-size: 1.6em;
    color: #fff;
    background-color: rgba(90, 103, 145, 0.7);
    width: 460px;
    text-align: center;
    padding: 20px;
    border-radius: 24px;
    margin: 0 auto;
    position: relative;
}

.placeDiv {
    padding-top: 30%;
}

.placeTextMargin10percent {
    font-size: 1.6em;
    color: #fff;
    background-color: rgba(90, 103, 145, 0.7);
    margin-left: 10%;
    margin-right: 10%;
    padding: 20px;
    border-radius: 24px;
}

/* Fixed: rgba(0,0,05,...) → rgba(0,0,0,...) */
/* Fixed: margin-bottom: 140 → 140px          */
.purpose_TextBox2 {
    font-size: 1.4em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.34);
    width: 460px;
    text-align: left;
    padding: 20px;
    border-radius: 24px;
    margin-bottom: 140px;
    float: left;
    margin-right: 10%;
}

.purpose_AntFoot_img {
    float: left;
}

.purpose_EndOfLine_img {
    float: right;
}

.suffering_textbox1 {
    font-size: 1.6em;
    color: #fff;
    background-color: rgba(90, 103, 145, 0.7);
    width: 460px;
    text-align: center;
    padding: 20px;
    border-radius: 24px;
    margin-top: 90px;
    margin-bottom: 80px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.purpose_textbox1 {
    font-size: 1.6em;
    color: #fff;
    background-color: rgba(90, 103, 145, 0.7);
    width: 400px;
    text-align: center;
    padding: 20px;
    border-radius: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.death_textbox1 {
    font-size: 2em;
    color: #fff;
    background-color: rgba(90, 103, 145, 0.7);
    width: 80%;
    text-align: center;
    padding: 20px;
    border-radius: 24px;
    margin-top: 90px;
    margin-bottom: 80px;
    margin-right: 10%;
    margin-left: auto;
    position: relative;
}

.death_textbox2 {
    font-size: 1.6em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.25);
    width: 80%;
    text-align: left;
    padding: 20px;
    border-radius: 24px;
    margin-right: 10%;
    margin-left: 10%;
}

/* Fixed: rgba(0,0,05,...) → rgba(0,0,0,...) */
/* Fixed: margin-bottom: 140 → 140px          */
.Death_TextBox4 {
    font-size: 1.4em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.61);
    width: 80%;
    text-align: left;
    padding: 20px;
    border-radius: 24px;
    margin-bottom: 140px;
    float: left;
    margin-right: 10%;
    margin-left: 10%; /* Fixed: was margin-lef — typo */
}

/* Fixed: rgba(0,0,05,...) → rgba(0,0,0,...) */
.death_TextBox4 {
    font-size: 1.4em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.61);
    width: 460px;
    text-align: left;
    padding: 20px;
    border-radius: 24px;
    float: left;
    margin-right: 10%;
    margin-bottom: 400px;
    margin-top: 200px;
}

.plan_textbox1 {
    font-size: 2.6em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.34);
    width: 80%;
    text-align: center;
    padding: 20px;
    border-radius: 24px;
    margin-top: 96px;
    margin-bottom: 20px;
    margin-right: 10%;
    margin-left: 10%;
    position: relative;
}

.plan_textbox2 {
    font-size: 1.6em;
    color: #fff;
    background-color: rgba(90, 103, 145, 0.7);
    width: 400px;
    text-align: center;
    padding: 20px;
    border-radius: 24px;
    margin-top: 400px;
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    float: left;
}

.reincarnation_textbox1 {
    font-size: 1.6em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.34);
    width: 460px;
    text-align: center;
    padding: 20px;
    border-radius: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.reincarnation_textbox2 {
    font-size: 1.6em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.34);
    width: 660px;
    text-align: center;
    padding: 20px;
    border-radius: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

/* Fixed: rgba(0,0,05,...) → rgba(0,0,0,...) */
/* Fixed: margin-bottom: 140 → 140px          */
.QuantumTheory_TextBox1 {
    font-size: 1.4em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    width: 460px;
    text-align: left;
    padding: 20px;
    border-radius: 24px;
    margin-bottom: 140px;
    float: left;
    margin-right: 10%;
}

/* Fixed: rgba(0,0,05,...) → rgba(0,0,0,...) */
/* Fixed: margin-bottom: 140 → 140px          */
.purpose_TextBox3 {
    font-size: 1.4em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.34);
    width: 80%;
    text-align: left;
    padding: 20px;
    border-radius: 24px;
    margin-bottom: 140px;
    float: left;
    margin-right: 10%;
    margin-left: 10%;
}


/* ============================================================
   IMAGES
   ============================================================ */

.OOBE_cartoon {
    width: 460px;
    margin-left: 10%;
    margin-top: 100px;
    box-shadow: 6px 6px 15px #000;
}


/* ============================================================
   SERVICE / BUTTON BACKGROUNDS
   ============================================================ */

.K_palmistryBtn_bckgrnd {
    height: 400px;
    background-image: url(../images/Index/palmistry-btn.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
}

.K_tranceBtn_bckgrnd {
    height: 400px;
    background-image: url(../images/Index/trance_btn.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
}

.K_tarotBtn_bckgrnd {
    height: 400px;
    background-image: url(../images/Index/tarot-btn.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
}


/* ============================================================
   PLAN LAYOUT
   ============================================================ */

.K_planUpArse {
    float: left;
    margin-right: 10%;
    margin-left: 10%;
}

.K_planPointlessSign {
    float: left;
    margin-right: 10%;
    margin-left: 10%;
}

/* Fixed: had margin-left twice — second should be margin-right */
.K_planNewsVendor {
    float: right;
    margin-right: 10%;
    margin-left: 10%;
}

.K_planTextBoxVendor {
    margin-right: 10%;
    margin-left: 10%;
}

/* Fixed: margin-bottom: 800p → 800px (typo) */
.K_MarginTopBottom {
    margin-top: 800px;
    margin-bottom: 800px;
    float: left;
}


/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.center60 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}

.myContainer-fluid {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.K_text_alignLeft {
    text-align: left;
}

.textAlignLeft {
    text-align: left;
}

.K_paddingTop_200 {
    padding-top: 200px;
}

/* NOTE: Original value was 600px but class name implies 200px.
   Value corrected to match the name. Update to 600px here if
   that was your actual intent, and consider renaming the class. */
.K_paddingBottom_200 {
    padding-bottom: 200px;
}

/* Removed: .container-fluid redefinition was word-for-word     */
/* identical to Bootstrap's own rule — served no purpose.       */

/* Removed empty rules: .K_center, .contactPosition, .myContainer,
   .K_planArsePointless — deleted, add back only when populated. */


/* ============================================================
   HOME PAGE TITLE SLIDER ANIMATION
   ============================================================ */

.slider {
    padding-top: 800px;
    background: url(../images/text/HomePageTitle.png) no-repeat;
    background-size: contain;
    animation: slide 20s infinite;
}

@keyframes slide {
    25% {
        background: url(../images/text/HomePageTitle.png) no-repeat;
        background-size: contain;
    }
    50% {
        background: url(../images/text/HomePageTitle2.png) no-repeat;
        background-size: contain;
    }
    75% {
        background: url(../images/text/HomePageTitle3.png) no-repeat;
        background-size: contain;
    }
    100% {
        background: url(../images/text/HomePageTitle4.png) no-repeat;
        background-size: contain;
    }
}


/* ============================================================
   MEDIA QUERIES
   NOTE: Breakpoints below are non-standard and do not align
   with Bootstrap or Skeleton. If you are using Bootstrap's
   grid (col-sm-*, col-md-* etc.), those columns activate at
   768px and 992px regardless of these rules.
   ============================================================ */

@media (min-width: 304px) {
    .bodyColour {
        margin-top: 100px;
    }
    .centerHomeTitle {
        margin-right: auto;
        margin-left: auto;
        position: relative;
        padding-top: 340px;
    }
    .clearNav {
        margin-top: 170px;
    }
}

@media (min-width: 426px) {
    .bodyColour {
        margin-top: 150px;
    }
    .centerHomeTitle {
        margin-right: auto;
        margin-left: auto;
        position: relative;
        padding-top: 120px;
    }
    .clearNav {
        margin-top: 134px;
    }
}

@media (min-width: 540px) {
    .bodyColour {
        margin-top: 100px;
    }
    .centerHomeTitle {
        margin-right: auto;
        margin-left: auto;
        position: relative;
        padding-top: 100px;
    }
    .clearNav {
        margin-top: 100px;
    }
}

@media (min-width: 654px) {
    .bodyColour {
        margin-top: 85px;
    }
    .centerHomeTitle {
        margin-right: auto;
        margin-left: auto;
        position: relative;
        padding-top: 90px;
    }
    .clearNav {
        margin-top: 66px;
    }
}

@media (min-width: 1024px) {
    .bodyColour {
        margin-top: 70px;
    }
    .centerHomeTitle {
        margin-right: auto;
        margin-left: auto;
        position: relative;
        padding-top: 80px;
    }
    .clearNav {
        margin-top: 34px;
    }
}

@media (min-width: 1488px) {
    .bodyColour {
        margin-top: 36px;
    }
    .centerHomeTitle {
        margin-right: auto;
        margin-left: auto;
        position: relative;
        padding-top: 70px;
    }
    .clearNav {
        margin-top: 34px;
    }
}