/* PK BEAUTY SALON - CONTACT PAGE - Corrected Responsive CSS */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&family=Philosopher:wght@400;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root{--font-primary:'Poppins',sans-serif;--font-heading:'Philosopher',sans-serif;--font-secondary:'Montserrat',sans-serif;--font-body:'Open Sans',sans-serif;--color-primary:#e41345;--color-primary-dark:#c80f3c;--color-pink:#f70077;--color-dark:#1a1a1a;--color-text:#3e4359;--color-white:#fff;--color-light:#f7f7f7;--color-soft-pink:#fff5f8;--color-border:#eadfe4;--shadow-small:0 8px 25px rgba(0,0,0,.07);--shadow-medium:0 15px 40px rgba(0,0,0,.10);--shadow-large:0 25px 60px rgba(0,0,0,.14);--radius-small:8px;--radius-medium:16px;--radius-large:24px;--transition:all .35s ease}
*,:before,:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;padding:0;font-family:var(--font-primary);color:var(--color-text);background:var(--color-white);line-height:1.7;overflow-x:hidden}body.menu-open{overflow:hidden}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,select,textarea{font-family:inherit}ul{list-style:none}address{font-style:normal}

/* HEADER */
header{position:fixed;top:0;left:0;width:100%;min-height:78px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.05);z-index:9999;transition:background .3s ease,box-shadow .3s ease,min-height .3s ease}
header.scrolled{min-height:68px;background:rgba(255,255,255,.98);box-shadow:0 6px 25px rgba(0,0,0,.08)}
header .logo{font-family:var(--font-heading);font-size:2rem;font-weight:700;color:var(--color-primary);white-space:nowrap;transition:var(--transition)}header .logo:hover{color:var(--color-pink);transform:translateY(-2px)}
header nav{display:flex;align-items:center}header nav ul{display:flex;align-items:center;gap:2rem}header nav ul li{position:relative}header nav ul li a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:45px;font-family:var(--font-secondary);font-size:.84rem;font-weight:600;color:var(--color-dark);transition:var(--transition)}header nav ul li a:after{content:"";position:absolute;left:0;bottom:3px;width:0;height:2px;background:var(--color-primary);transition:width .3s ease}header nav ul li a:hover,header nav ul li a.active{color:var(--color-primary)}header nav ul li a:hover:after,header nav ul li a.active:after{width:100%}
#NavNum{padding:10px 19px;min-height:auto;border-radius:50px;color:var(--color-white)!important;background:linear-gradient(135deg,var(--color-primary),var(--color-pink));box-shadow:0 8px 20px rgba(228,19,69,.2)}#NavNum:after{display:none}#NavNum:hover{color:var(--color-white)!important;transform:translateY(-3px);box-shadow:0 12px 28px rgba(228,19,69,.3)}

/* MOBILE MENU */
.menuToggle{display:none;flex-shrink:0;width:44px;height:44px;position:relative;cursor:pointer;border-radius:8px;z-index:10001}.menuToggle:before,.menuToggle:after{content:"";position:absolute;left:10px;width:24px;height:2px;background:var(--color-dark);transition:all .3s ease}.menuToggle:before{top:16px}.menuToggle:after{top:26px}header.active .menuToggle:before{top:21px;transform:rotate(45deg)}header.active .menuToggle:after{top:21px;transform:rotate(-45deg)}

/* HERO */
.sectionFirst {
    position: relative;
    min-height: 440px;
    padding: 145px 5% 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    isolation: isolate;
    overflow: hidden;
}

.page-hero-content {
    position: relative;
    z-index: 3;
    width: min(850px, 100%);
    padding: 24px 30px;
    border-radius: 18px;
    background: rgba(255, 248, 251, .58);
    box-shadow: 0 12px 35px rgba(92, 35, 54, .08);
}

.sectionFirst h1 {
    margin-bottom: 20px;
    color: #24151b;
    font-family: var(--font-heading);
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: 1.05;
    text-shadow: 0 2px 4px rgba(255, 255, 255, .9);
}

.page-hero-content p {
    color: #3c2830;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.8;
}

.sectionFirst:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 210, 227, 0.32),
        rgba(255, 255, 255, 0.08)
    ), url("../img/contactBackGround.jpg") center/cover no-repeat;
    opacity: .98;
    z-index: -2;
}

.sectionFirst:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.18),
        rgba(255, 255, 255, 0.08)
    );
    z-index: -1;
}@keyframes heroUp{from{opacity:0;transform:translateY(45px)}to{opacity:1;transform:translateY(0)}}@keyframes floatingShape{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* FORM + MAP */

    /* Keep hero copy readable over the brighter image. */
    .page-hero-content {
        padding: 24px 30px;
        border-radius: 18px;
        background: rgba(255, 248, 251, .58);
        box-shadow: 0 12px 35px rgba(92, 35, 54, .08);
    }

    .sectionFirst h1 {
        color: #24151b;
        text-shadow: 0 2px 4px rgba(255, 255, 255, .9);
    }

    .page-hero-content p {
        color: #3c2830;
        font-weight: 600;
    }
.FormMap{width:min(1200px,calc(100% - 60px));margin:0 auto;padding:95px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:35px;align-items:stretch}.FormMap .form{position:relative;padding:45px;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-large);box-shadow:var(--shadow-medium);overflow:hidden;opacity:1;transition:transform .4s ease,box-shadow .4s ease}.FormMap .form:before{content:"";position:absolute;top:0;left:40px;width:80px;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-pink));border-radius:0 0 10px 10px}.FormMap .form:hover{transform:translateY(-6px);box-shadow:var(--shadow-large)}
.FormMap .f-head{max-width:520px;margin-bottom:15px;font-family:var(--font-heading);font-size:clamp(2.2rem,4vw,3.2rem);line-height:1.15;color:var(--color-dark)}.FormMap .f-para{margin-bottom:30px;font-family:var(--font-body);font-size:.9rem;line-height:1.8;color:var(--color-text)}.FormMap .form form{display:flex;flex-direction:column;gap:18px}.form-group{display:flex;flex-direction:column;gap:7px}.form-group label{font-family:var(--font-secondary);font-size:.78rem;font-weight:600;color:var(--color-dark)}
.FormMap .form form input,.FormMap .form form select,.FormMap .form form textarea{width:100%;border:1px solid #dedede;outline:none;background:#fafafa;color:var(--color-dark);font-size:.88rem;border-radius:9px;transition:border-color .3s ease,background .3s ease,box-shadow .3s ease,transform .3s ease}.FormMap .form form input,.FormMap .form form select{min-height:50px;padding:0 15px}.FormMap .form form textarea{min-height:145px;padding:13px 15px;resize:vertical}.FormMap .form form input::placeholder,.FormMap .form form textarea::placeholder{color:#9b9b9b}.FormMap .form form input:focus,.FormMap .form form select:focus,.FormMap .form form textarea:focus{border-color:var(--color-primary);background:var(--color-white);box-shadow:0 0 0 4px rgba(228,19,69,.08);transform:translateY(-1px)}
.FormMap .form form button{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 25px;border:none;border-radius:50px;background:linear-gradient(135deg,var(--color-primary),var(--color-pink));color:var(--color-white);font-family:var(--font-secondary);font-size:.82rem;font-weight:600;cursor:pointer;box-shadow:0 10px 25px rgba(228,19,69,.2);transition:var(--transition)}.FormMap .form form button:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(228,19,69,.3)}.FormMap .form form button:active{transform:translateY(-1px) scale(.98)}

/* MAP */
.FormMap .map{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-large);background:var(--color-white);box-shadow:var(--shadow-medium);transition:transform .4s ease,box-shadow .4s ease}.FormMap .map:hover{transform:translateY(-6px);box-shadow:var(--shadow-large)}.map-content{padding:35px 35px 25px}.map-content h2{margin-bottom:10px;font-family:var(--font-heading);font-size:clamp(2rem,3vw,2.8rem);line-height:1.15;color:var(--color-dark)}.map-content p{max-width:520px;font-family:var(--font-body);font-size:.88rem;line-height:1.75;color:var(--color-text)}.FormMap .map iframe{display:block;width:100%;height:100%;min-height:450px;border:0}

/* CONTACT CARDS */
.contact-info-section{width:min(1200px,calc(100% - 60px));margin:0 auto;padding:0 0 100px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.contact-info-card{position:relative;min-height:125px;padding:25px;display:flex;align-items:center;gap:18px;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-medium);box-shadow:var(--shadow-small);overflow:hidden;opacity:1;transform:translateY(0);transition:transform .45s ease,box-shadow .45s ease,border-color .45s ease}.contact-info-card:before{content:"";position:absolute;left:0;top:0;width:4px;height:0;background:linear-gradient(to bottom,var(--color-primary),var(--color-pink));transition:height .4s ease}.contact-info-card:hover{transform:translateY(-8px);border-color:rgba(228,19,69,.18);box-shadow:var(--shadow-medium)}.contact-info-card:hover:before{height:100%}.contact-icon{flex:0 0 58px;width:58px;height:58px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-soft-pink);color:var(--color-primary);font-size:1.2rem;transition:var(--transition)}.contact-info-card:hover .contact-icon{color:var(--color-white);background:linear-gradient(135deg,var(--color-primary),var(--color-pink));transform:rotate(5deg) scale(1.06)}.contact-info-card h3{margin-bottom:4px;font-family:var(--font-heading);font-size:1.35rem;line-height:1.2;color:var(--color-dark)}.contact-info-card p{font-family:var(--font-body);font-size:.82rem;line-height:1.65;color:var(--color-text);overflow-wrap:anywhere}.contact-info-card a{transition:color .25s ease}.contact-info-card a:hover{color:var(--color-primary)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(45px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal-visible{opacity:1;transform:translateY(0)}.contact-info-card:nth-child(1){transition-delay:0ms}.contact-info-card:nth-child(2){transition-delay:100ms}.contact-info-card:nth-child(3){transition-delay:200ms}

/* TABLET */
@media (max-width:1100px){header{padding-left:4%;padding-right:4%}header nav ul{gap:1rem}.FormMap{width:min(calc(100% - 50px),1000px);gap:25px}.FormMap .form{padding:35px}.contact-info-section{width:min(calc(100% - 50px),1000px)}}

/* MOBILE / TABLET NAVIGATION */
@media (max-width:900px){header{min-height:74px;padding-left:25px;padding-right:20px}.menuToggle{display:block}header nav{position:fixed;top:0;right:-100%;width:min(340px,86vw);height:100vh;padding:100px 25px 35px;display:block;background:rgba(255,255,255,.99);box-shadow:-15px 0 40px rgba(0,0,0,.15);transition:right .4s cubic-bezier(.2,.7,.2,1);overflow-y:auto;z-index:10000}header.active nav{right:0}header nav ul{display:flex;flex-direction:column;align-items:stretch;gap:5px}header nav ul li a{justify-content:flex-start;width:100%;padding:14px 12px;font-size:.9rem}header nav ul li a:after{display:none}#NavNum{display:flex;justify-content:center;width:100%;margin-top:10px}.sectionFirst{min-height:390px;padding:125px 25px 70px}.sectionFirst h1{font-size:clamp(2.8rem,8vw,4.5rem)}.transform-img{width:190px;right:-20px;bottom:-25px}.FormMap{width:min(calc(100% - 40px),700px);padding:75px 0;grid-template-columns:1fr;gap:25px}.FormMap .form{padding:35px 30px}.FormMap .map iframe{min-height:400px}.contact-info-section{width:min(calc(100% - 40px),700px);grid-template-columns:1fr;padding-bottom:75px;gap:18px}}

/* MOBILE */
@media (max-width:600px){header{min-height:70px;padding-left:20px;padding-right:15px}header.scrolled{min-height:64px}header .logo{font-size:1.55rem}.menuToggle{width:42px;height:42px}.sectionFirst{min-height:350px;padding:115px 20px 60px}.hero-small-title{font-size:.65rem;letter-spacing:.16em}.sectionFirst h1{margin-bottom:12px;font-size:clamp(2.5rem,13vw,3.5rem)}.page-hero-content p{font-size:.82rem;line-height:1.7}.transform-img{width:140px;right:-25px;bottom:-20px;opacity:.18}.FormMap{width:calc(100% - 30px);padding:55px 0;grid-template-columns:1fr;gap:20px}.FormMap .form{padding:30px 20px;border-radius:18px}.FormMap .form:before{left:25px;width:65px}.FormMap .f-head{font-size:2.2rem}.FormMap .f-para{font-size:.82rem;margin-bottom:24px}.FormMap .form form{gap:15px}.FormMap .form form input,.FormMap .form form select{min-height:48px;padding:0 13px}.FormMap .form form textarea{min-height:125px;padding:12px 13px}.FormMap .form form button{width:100%}.FormMap .map{border-radius:18px}.map-content{padding:25px 20px 20px}.map-content h2{font-size:2rem}.map-content p{font-size:.8rem}.FormMap .map iframe{min-height:340px}.contact-info-section{width:calc(100% - 30px);grid-template-columns:1fr;padding-bottom:60px;gap:15px}.contact-info-card{min-height:110px;padding:20px;gap:14px}.contact-icon{flex:0 0 50px;width:50px;height:50px;font-size:1rem}.contact-info-card h3{font-size:1.2rem}.contact-info-card p{font-size:.76rem}}

/* SMALL MOBILE */
@media (max-width:380px){header{padding-left:15px;padding-right:10px}header .logo{font-size:1.4rem}.sectionFirst{padding-left:16px;padding-right:16px}.sectionFirst h1{font-size:2.35rem}.FormMap{width:calc(100% - 24px)}.FormMap .form{padding:27px 17px}.contact-info-section{width:calc(100% - 24px)}.contact-info-card{padding:17px}}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

/* Keep navbar labels stable on hover and active states. */
header nav ul li a,
header nav ul li a:hover,
header nav ul li a:focus,
header nav ul li a.active,
header nav ul li a[aria-current="page"] {
    font-size: .84rem;
    transform: none;
}