/*!
Theme Name: PsychicNewZealand-2025
Version: 1.0
Author: absolutesoulsecrets
Author URI: https://www.absolutesoulsecrets.com/
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url('https://db.onlinewebfonts.com/c/5819d38b6bfeaeecad004205258bde1f?family=Papyrus+LET+Bold'); 
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Gotu&family=Hind+Madurai:wght@300;400;500;600;700&family=Lora:ital,wght@0,400..700;1,400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


:root {
    --priFont: "Papyrus LET Bold";
    --secFont: "Open Sans", sans-serif;

    /* Color */
    --priColor: #3232A8;
    --secColor: #D4AF37;
    --textColor: #4B5563;
    --whiteColor: #fff;
    --btnColor: linear-gradient(40deg,rgba(254, 243, 199, 1) 0%, rgba(253, 230, 138, 1) 100%);
    --bgColor2: linear-gradient(30deg,rgba(244, 232, 208, 1) 0%, rgba(237, 224, 200, 1) 25%, rgba(240, 229, 204, 1) 50%, rgba(232, 220, 194, 1) 75%, rgba(242, 231, 207, 1) 98%);
    --bgColor: #FFFDEE;

    /* Others */
    --lHeight: 1.5;
    --fSize: 1.2rem;
    --radious: 1rem;
}


/* CSS RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
.subtitle { font-size: clamp(1.2rem, 1.1368rem + 0.2807vw, 1.4rem); margin: 0 0 3rem;}
.subtitle span { font-size: clamp(2.3rem, 2.1421rem + 0.7018vw, 2.8rem);color: var(--priColor);}
strong { font-weight: 600; }

body { line-height: 1.5;  -webkit-font-smoothing: antialiased; font-family: var(--priFont); color: var(--thirdColor);width: 1920px;margin: 0 auto;position: relative;padding: 0;overflow-x: hidden; max-width: 100%;}
.wrapper {width: 1400px; max-width: 100%; position: relative; margin: 0 auto;}
ol, ul { list-style: none; }
li { color: var(--textColor); font-size: 1.2rem; }
.bullet { margin: 0 0 1.2rem; }
.bullet li { list-style: disc; margin: 0 sss0 0 3rem; line-height: 1.8rem; font-family: var(--secFont); }
a {text-decoration: none; cursor: pointer;}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; color: var(--whiteColor); font-weight: 600;}
h1 {font-size: clamp(2.4rem, 2.2737rem + 0.5614vw, 2.8rem); margin: 0 0 3rem;}
h2 {font-size: clamp(2rem, 2.1421rem + 0.7018vw, 2.5rem); margin: 0 0 2rem;}
h3 { font-size: clamp(1.3rem, 1.1875rem + 0.5vw, 1.5rem); margin: 0 0 1.5rem;}
h4 { font-size: clamp(1.15rem, 1.1026rem + 0.2105vw, 1.3rem); margin: 0 0 1.5rem;}
h5 { font-size: 1.05rem; margin: 0 0 1.5rem;}
span { display: block; font-family: var(--secFont);}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; font-family: var(--priFont);}
p { font-family: var(--secFont); color: var(--textColor); font-size: 1.2rem;font-weight: 300;line-height: 1.5;padding: 0 0 1.2rem;}
.button:hover { background: var(--priColor); color: #fff; }
.button { background: var(--btnColor); padding: 1rem 2.5rem; cursor: pointer; border: unset; color: var(--textColor); font-size: 1.2rem; clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); margin: 2rem 0 0; display: inline-block;}
.ftr-top-gallery img { filter: drop-shadow(5px 5px 10px #000000); }
.newsletter-signup .button:hover { background: var(--priColor); color: var(--whiteColor); }
.newsletter-signup .button { background: var(--bgColor);display: block; margin: 0 auto;}

/* Header */
header {padding: .8rem;background: var(--priColor);}
.main-logo { width: 17%; display: block; position: absolute; z-index: 999; top: -27%; overflow: hidden; }
.main-logo::after { content: ''; position: absolute; bottom: 10px; left: 0; width: 100%; height: 21%; background: var(--bgColor); z-index: -1; }
.location { display: flex; align-items: center; gap: .9rem;padding: 0 0 0 15rem;}
.location a { color: var(--whiteColor); font-size: .8rem;position: relative; padding: 0 0 0 2.2rem;}
.location a::after { content: url('images/icon/location.webp'); position: absolute; left: 0; top: 0;}
.main-logo figure img{ outline: 6px solid var(--whiteColor);border-radius: 50%;}
.header-info { display: flex;  align-items: center;gap: 4rem;justify-content: space-between;width: 100%;}
.header-info .social-media{display: flex;gap: 1rem;}


header .contact-info { display: inline-flex;gap: 1.5rem; margin: 0 5rem 0 0;}
header .contact-info li { position: relative; padding: 0 0 0 2rem; color: var(--whiteColor); font-size: 1rem; font-weight: 600; }
.header-info ul li a { color: var(--whiteColor); }
header .contact-info li::after{ content: url('images/icon/phone-call.webp');position: absolute;left: 0; top: 0;}
header .contact-info li:nth-child(3)::after{ content: url('images/icon/contact-mail.webp');position: absolute;left: 0;}


/* Navigation  */
nav {line-height: 5rem;}
.nav-con { display: flex; justify-content: space-between; align-items: center;width: 100%;margin: 0 0 0 auto;}
#hamburger{ width: 50px; height: 45px; position: relative; margin: 50px auto; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; caret-color: transparent; position: relative; top: 1em;  z-index: 1001;display: none;}
#hamburger span { display: block; position: absolute; height: 4px; width: 67%; background: var(--whiteColor); border-radius: 9px; opacity: 1; right: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
#hamburger span:nth-child(1) { top: 0px; }
#hamburger span:nth-child(2),#hamburger span:nth-child(3) { top: 11px; width: 40%; right: 0; text-align: right; margin: 0 0 0 auto;}
#hamburger span:nth-child(4) { top: 23px; }
#hamburger.open span:nth-child(1) { top: 18px; width: 0%; left: 50%; }
#hamburger.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 67%; }
#hamburger.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); width: 67%; }
#hamburger.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; }
#nav-menu { display: flex; justify-content: center; gap: 1.5rem; margin: 0 0 0 auto;}
#nav-menu li{ position: relative;}
#nav-menu li a{ font-weight: 600;color: var(--whiteColor); }
#nav-menu .active a { color: var(--secColor); }
/* ----------- Desktop dropdown ----------- */
#nav-menu { position: relative; }
.sub-menu li { line-height: 3; padding: 0 1rem; }

#nav-menu li { position: relative; }

#nav-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--whiteColor, #fff); padding: 0.5rem 0; z-index: 999; box-shadow: 0 4px 6px rgba(0,0,0,0.1); list-style: none; }

/* Desktop hover behavior */
@media (min-width: 769px) {
  #nav-menu .menu-item-has-children:hover > .sub-menu {
    display: block;
  }
  
  .submenu-toggle {
    display: none !important;
  }
}

/* Mobile styles */
@media (max-width: 768px) {


  #nav-menu > li {
    margin-right: 0;
    width: 100%;
    border-bottom: 1px solid #ddd;
  }

  /* Menu items with submenus */
  #nav-menu .menu-item-has-children {
    position: relative;
  }

  /* Parent menu link - make room for toggle button */
  #nav-menu .menu-item-has-children > a {
  
  }

  /* Toggle button styles - positioned absolutely */
  .submenu-toggle {
    display: block !important;
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.5rem;
    color: var(--whiteColor);
    width: 50px;
    transition: transform 0.3s ease;
    z-index: 10;
  }

  .sub-menu li { margin: 0 !important; }
  .submenu-toggle:hover {
    background: rgba(0,0,0,0.1);
  }


  /* Rotate arrow when open */
  #nav-menu .menu-item-has-children.mobile-menu-open .submenu-toggle {
    transform: rotate(180deg);
  }

  /* Mobile submenu styles */
  #nav-menu .sub-menu {
    display: none;
    position: static;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    background: #f8f8f8;
    border-top: 1px solid #ddd;
    border-bottom-left-radius: var(--radious);
    overflow: hidden;
    border-bottom-right-radius: var(--radious);
  }

  #nav-menu .menu-item-has-children.mobile-menu-open > .sub-menu {
    display: block;
  }

  .sub-menu .menu-item a {
    color: var(--headingColor) !important;
    padding-left: 2rem;
    padding-right: 1rem;
    background: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
  }

  .sub-menu .menu-item a:hover {
    background: #e8e8e8;
  }
}



.search-container { position: relative; display: flex; align-items: center; background: white; border-radius: 50px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); overflow: hidden; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.search-container.collapsed {  height: 60px; width: 6%; background: transparent; box-shadow: none;position: absolute; right: 0; }
.search-container.expanded { width: 80%; height: 45px; position: absolute; right: 0; }
.search-btn { /*! width: 60px; */ /*! height: 60px; */ border: none; /*! background: transparent; */ border-radius: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; transition: all 0.3s ease; flex-shrink: 0; background: transparent;}
.search-btn:hover { transform: scale(1.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
.search-btn:active { transform: scale(0.95); }
.search-icon { width: 35px; height: 35px; fill: var(--whiteColor);; transition: transform 0.3s ease; }
.expanded .search-icon { fill: var(--thirdColor); }
.search-container.expanded .search-icon { transform: rotate(90deg); }
.search-input { width: 100%; height: 46px; border: none; outline: none; font-size: 16px; padding: 0 20px; background: transparent; color: #333; opacity: 0; transform: translateX(-20px); transition: all 0.3s ease 0.1s; }
.search-container.expanded .search-input { opacity: 1; transform: translateX(0); }
.search-input::placeholder { color: #999; }
.search-form { display: flex; align-items: center; width: 100%; height: 100%; padding: 0;height: auto;}
.close-btn { position: absolute; right: 48px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 24px; color: #999; cursor: pointer; opacity: 0; transition: all 0.3s ease; z-index: 3; }
.search-container.expanded .close-btn { opacity: 1; }
.close-btn:hover { color: #333; transform: translateY(-50%) scale(1.2); }
.demo-info { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); text-align: center; color: white; font-size: 18px; opacity: 0.9; }
.demo-info h2 { margin-bottom: 10px; font-size: 24px; }
.demo-info p { font-size: 16px; opacity: 0.8; }

        

/* Banner */
#banner {height: auto; overflow: hidden; position: relative; padding: 7rem 0 8rem; background-repeat: no-repeat; background-size: cover;}
#banner::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3);  }
.bnr-info { position: relative; width: 60%;z-index: 1;margin: 3rem auto 0;} 
.bnr-info p {  font-size: 1.3rem; font-weight: 500; color: var(--whiteColor); }
.bnr-info h2 { font-size: clamp(2.3rem, 1.8895rem + 1.8246vw, 3.6rem); margin: 0 0 3rem;font-weight: 300;}
.bnr-info h2 span { font-size: clamp(2.3rem, 1.8895rem + 1.8246vw, 3.6rem); font-weight: 600; color: var(--secColor); font-family: var(--priFont);}
.bnr-btn .button { background: var(--whiteColor); color: var(--priColor); }
.bnr-info h3 {font-size: 1.7rem;}
.slider { width: 1920px; position: absolute; left: 50%; transform: translateX(-50%); top: 0; z-index: -1; }
.rslides { }
.rslides li { } 
.rslides li img { object-position: 0 4rem; }
.bnr-btn { display: flex; justify-content: center; gap: 2rem; }
.bnr-info-con { display: flex; justify-content: space-between; align-items: center; }
.bnr-con {display: flex;align-items: center; position: relative; z-index: 1;}

.sidebar-img { width: 50%; }
.sidebar-img figure { width: 81%; margin: 0 0 0 auto; clip-path: polygon(15% 0, 100% 0, 100% 20%, 100% 85%, 86% 100%, 20% 100%, 0 100%, 0 15%); overflow: hidden; }


/* middle */
#middle {padding: 6rem 0; background: var(--bgColor); overflow-x: hidden ;}
.middle-con .services { display: flex; justify-content: space-between; gap: 2rem;}
.middle-con h2 { text-align: center; color: var(--priColor); margin: 0 0 .5rem;}
.middle-sub-info { margin: 2rem auto 4rem; width: 75%; }
.middle-heading-info p { text-align: center; font-weight: 600;}
.middle-sub-info h3 { color: var(--textColor); text-align: center; }
.middle-sub-info p {text-align: center; font-weight: 600;}
.middle-con .services .service-item { background: var(--btnColor); clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); text-align: center; padding: 2rem; }
.middle-con .services img { margin: 0 auto; border-radius: 50%; overflow: hidden;width: 55%; }
.middle-con .services h4 { color: var(--textColor); margin: 2rem 0 1.5rem; }
.middle-con .services p { color: var(--textColor);  } 
.middle-con .services .button:hover { background: var(--priColor); }
.middle-con .services .button { background: var(--bgColor); padding : 1rem 1.2rem; border-radius: 50px; }

.services .slick-slide { margin: 0 10px !important; }
.slick-dots li { padding: 0 !important; }

/* Main Area */
main {position: relative; background-size: cover;}
main::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); }
.main-con { padding: 6rem 0; position: relative; z-index: 1;}
.main-info {display: flex;align-items: center;gap: 5rem;flex-wrap: wrap;justify-content: center;}
.main-con .sidebar { width: 40%; position: relative; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(7, 3vw); grid-gap: 15px; clip-path: polygon(15% 0, 100% 0, 100% 20%, 100% 85%, 86% 100%, 20% 100%, 0 100%, 0 15%); }
.main-con .sidebar figure { grid-column-start: 1; grid-column-end: 6; grid-row-start: 1; grid-row-end: 5;; }
.main-con .sidebar figure:nth-child(2) { grid-column-start: 6; grid-column-end: 9; grid-row-start: 1; grid-row-end: 5; }
.main-con .sidebar figure:nth-child(3) { grid-column-start: 1; grid-column-end: 5; grid-row-start: 5; grid-row-end: 8; }
.main-con .sidebar figure:nth-child(4) { grid-column-start: 5; grid-column-end: 9; grid-row-start: 5; grid-row-end: 8; }
.main-content li { list-style: inside; color: var(--bgColor); font-family: var(--secFont); margin: 1rem 0 0; font-weight: 400;}
.main-content p {font-weight: 400;}
.main-content ul { margin: 2rem 0 1rem; }
.main-content { width: 49%; }


.main-btm {width: 100%; display: flex; justify-content: space-between;margin: 5rem 0 3rem;}
.main-btm li {position: relative;}
.main-btm li::after { content: ''; position: absolute; top: 0; right: -7rem; width: 1px; height: 100%; background: #413d3d5e; }
.main-btm li:last-child::after {all: unset;}



.main-btm h2 { text-align: center;color: var(--priColor);background: linear-gradient(to top left, #0000FFC7 3%, #800080bf 71%);background-clip: border-box;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.main-btm span { color: var(--priColor); background: linear-gradient(to top left, #0000FFC7 3%, #800080bf 71%); background-clip: border-box; background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center;}

.main-con .sidebar figure{ }
.main-con .sidebar img { width: 100%; height: 100%; object-fit: cover; }
.main-content { width: 49%;}
.main-content h1{ font-size: 3.6rem; text-wrap: auto; width: 80%;}
.main-content h1 span{ font-size: clamp(2.7rem, 2.25rem + 2vw, 3.5rem);line-height: 1.2;}
.main-content p{ margin: 0 0; color: var(--whiteColor);}
.main-content p:last-of-type { margin: 0 0 2rem; }


/* Buttom */
#bottom {background: linear-gradient(178deg,rgba(239, 246, 246, 1) 0%, rgba(255, 255, 255, 1) 100%);}
#bottom { background: var(--bgColor); }
.btm-con { padding: 6rem 0; }
.heading-con { background: var(--btnColor); padding: 1.5rem;clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);  text-align: center;}
.heading-con h2 { color: var(--priColor); margin: 0; }
.heading-con p { color: var(--textColor); padding: 0; }
.btm-info p { margin: 0 0 2rem;}
.btm-info h2, .btm-info p { color: var(--textColor); }
.btm-content { display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: center; padding: 2rem 0;}
.btm-info {width: 50%;}
.btm-image {width: 50%;}
.btm-image img { clip-path: polygon(15% 0, 100% 0, 100% 20%, 100% 85%, 86% 100%, 20% 100%, 0 100%, 0 15%); }
.share-btn { position: relative;}
.share-btn .button { display: inline-flex;gap: 1rem;}


/* footer */
#footer-top {  position: relative; overflow: hidden; background: var(--bgColor);}
#footer-top::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); }
.ftr-top-gallery { position: relative; width: 40%;}
.ftr-top-gallery figure:nth-child(2) { position: absolute; right: 0; top: 37%; }

.ftr-top-con { display: flex; align-items: center; gap: 5rem; padding: 6rem 0; justify-content: space-between; position: relative; z-index: 1; }
.ftr-top-content { width: 45%; }
.ftr-top-form { background: #f9f9f9; padding: 25px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin: 0 auto; width: 50%; }
.newsletter-signup .form-group { margin-bottom: 15px; }
.newsletter-signup input[type="text"],
.newsletter-signup input[type="email"],
.newsletter-signup input[type="tel"] { width: 100%; padding: 12px 15px; border: 1px solid #ccc; border-radius: 4px; font-size: 15px; transition: border-color 0.3s; border: unset; clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 80%, 100% 98%, 10% 99%, 0 90%, 0% 20%);}
.newsletter-signup input:focus { border-color: #6a1b9a; outline: none; }
.ftr-top-gallery figure { width: 60%; }


.ftr-top-content h2 { color: var(--whiteColor) }
.form-con { background: var(--btnColor); padding: 2rem 5rem;clip-path: polygon(0 0, 85% 0, 100% 13%, 100% 80%, 100% 98%, 14% 100%, 0 85%, 0% 20%); }
.form-con h3 { color: var(--textColor); }


/* Footer Bottom */
#footer-btm { background: #111827; background-size: cover; position: relative;}
#footer-btm::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #111827eb; }
.footer-menu ul li a { color: #9CA3AF; }
.social-media li { border-bottom: unset !important; }


/*  */
.ftr-btm-con { padding: 5rem 0 2rem;z-index: 1; position: relative;  }
.footer-menu { display: flex; flex-wrap: wrap; justify-content: space-between;}
.footer-menu section { width: 16%; }
.footer-logo { width: 20% !important; display: flex; align-items: center;}
.footer-menu ul li { line-height: 2rem; text-align: center; }
.footer-menu section:nth-of-type(2) h4 { text-align: center; }
.footer-menu h4 { color: var(--whiteColor);  text-align: center;}
.ftr-contact-info p {color: var(--whiteColor);}
#footer-btm nav { line-height: inherit; }
.footer-menu section:last-child { width: 14%; }

.ftr-contact-info a { display: block; margin: .5rem 0 0; color: var(--secColor); }
.ftr-contact-info li:first-child { font-size: 1.35rem; font-weight: 600; font-family: var(--secFont); }
.social-media img { width: auto ; outline: unset ; }
.footer-logo p { margin: 2rem 0 1rem; }
.social-media { display: flex; gap: 1rem; }
.social-media h4 {text-align: left;}

.footer-logo p { color: #9CA3AF; }
.copyright { position: relative; }
.copyright p { display: flex; justify-content: center; gap: .5rem; }
.copyright::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #A8A7A7BA; }
.copyright p { text-align: center; padding: 2rem 0 0; margin: 2rem 0 0; color: var(--whiteColor);}
.copyright p span {font-family: Poppins, sans-serif;}

/* Modal  */

      .demo-container {
            text-align: center;
        }

.open-modal-btn { color: var(--textColor); border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; letter-spacing: 1px; font-weight: 600; background: unset;display: block; margin: 1rem 0 0; }

  

        .open-modal-btn:active {
            transform: translateY(-1px);
        }

        /* Modal Styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

.modal { background: white; border-radius: 20px; padding:0  ; max-width: 1400px; width: 90%; max-height: 80vh; overflow-y: auto; position: relative; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); transform: scale(0.7) translateY(50px); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

        .modal-overlay.active .modal {
            transform: scale(1) translateY(0);
        }
        .modal-info {padding: 0 2rem; width: 50%;}
        .modal-content-wrapper figure { width: 50%; float: right; }

        .modal-close { position: absolute; top: 20px; right: 20px; background: #f1f3f4; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 20px; color: #666; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; z-index: 99; }

        .modal-close:hover { background: #e8eaed; color: #333; transform: rotate(90deg); }

        .modal-header { margin-bottom: 25px; }

        .modal-title { font-size: 28px; font-weight: 700; color: #333; margin-bottom: 10px; background: linear-gradient(45deg, #667eea, #764ba2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

        .modal-subtitle {
            color: #666;
            font-size: 16px;
            line-height: 1.5;
        }

        .modal-content {
            color: #555;
            line-height: 1.7;
            margin-bottom: 30px;
        }

        .modal-content p {
            margin-bottom: 15px;
        }



        /* Animation for content */
        .modal-content-wrapper { opacity: 0; transform: translateY(20px); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; display: flex; align-items: center; }

        .modal-overlay.active .modal-content-wrapper {
            opacity: 1;
            transform: translateY(0);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .modal {
                padding: 30px 20px;
                margin: 20px;
            }

            .modal-title {
                font-size: 24px;
            }
        }

        /* Scroll lock when modal is open */
        body.modal-open {
            overflow: hidden;
        }


/* Admin */
.display-name { display: contents; }
#wpadminbar { position: fixed !important; }


.dcv-vibe-image { flex: 0 0 400px;}
.dcv-vibe-content {gap: 4rem;}


/* Nonhome  */
#nonhome { background: var(--bgColor);}
#nonhome::after {all: unset;}
#breadcrumbs { border-bottom: 1px dotted var(--headingColor); }
#breadcrumbs span { display: flex; }
#nonhome .main-content p { color: var(--textColor);}



/* Nonhome Banner */
.nh-main-con { padding: 3rem 0; }
#nh-bnr::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); }
.nh-bnr-con { position: relative; z-index: 1;}
#nh-bnr { background-repeat: no-repeat; background-size: cover; position: relative; height: 23rem; }
#nh-bnr h1 { text-align: center; color: var(--whiteColor); margin: 0; padding: 8.5rem 0; font-size: clamp(3.4rem, 3.1rem + 0.96vw, 4rem);}

/* Nonhome Main  */
.nh-main-con .main-content {width: 100%;}
#nonhome h2 { font-size: clamp(2rem, 1.9053rem + 0.4211vw, 2.3rem); }
#nonhome h3 { margin: .5rem 0 .8rem; }
.nh-main-con .main-content { margin: 3rem 0; }
.empty-content {padding: 2rem 0;}
#nonhome .main-content img { }
/* #nonhome .main-content li{margin: 0 0 2rem;} */
#nonhome .main-content h4 { margin: 1rem 0 1.5rem; }
#nonhome ul { list-style: initial; margin: 0 0 1.2rem; padding: 0 0 0 3rem; }

#nonhome ul li ul { margin: 0 0 0 1rem; }
#nonhome ul li ul li { list-style: circle; }
/* Personality Modal (shared styles) */
.personality-modal { position: fixed; z-index: 9999; inset: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease; }
.personality-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.personality-modal .modal-content { background: #fff; margin: 5% auto; padding: 28px; width: 92%; max-width: 720px; border-radius: 10px; position: relative; box-shadow: 0 10px 24px rgba(0,0,0,0.18); transform: translateY(16px) scale(0.98); opacity: 0; transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease; will-change: transform, opacity; }
.personality-modal.is-open .modal-content { transform: translateY(0) scale(1); opacity: 1; }
.personality-modal .close-modal { position: absolute; top: 10px; right: 14px; font-size: 28px; font-weight: bold; color: #333; cursor: pointer; }
.personality-modal .close-modal:hover { color: #000; }
/* Modal actions and close button */
.personality-modal .close-modal-btn { position: absolute; top: 10px; right: 14px; background: transparent; border: none; color: #333; font-weight: 700; font-size: 18px; cursor: pointer; }
.personality-modal .close-modal-btn:hover { color: #000; }

/* Left quote decoration for subcontent */
.quote-left { border-left: 6px solid #d84b4b; border-radius: 0 12px 12px 0; padding: 16px 18px; background: linear-gradient(90deg, rgba(216,75,75,0.08), rgba(216,75,75,0.02)); box-shadow: 0 1px 2px rgba(0,0,0,0.06); color: #8b2d2d; font-style: italic; }