html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Overlay covering the entire viewport */
.age-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 8, 25, 0.88); /* Deep dark purple backdrop */
  backdrop-filter: blur(6px); /* Smooth background blur */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

/* Modal Popup Box matching PihuHub theme */
.age-modal-card {
  background-color: #1a0826; /* Dark purple container */
  border: 1px solid #3b1652;  /* Subtle purple border accent */
  border-radius: 14px;
  padding: 32px 28px;
  max-width: 460px;
  width: 90%;
  text-align: center;
  box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.85);
  font-family: Arial, sans-serif;
  color: #ffffff;
}

/* Heading */
.age-modal-heading {
  color: #ffcc00; /* Vibrant yellow heading */
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-top: 0;
  margin-bottom: 16px;
  text-transform: uppercase;
}

/* Paragraph Text */
.age-modal-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: #e2d9f3; /* Light lavender tint for readability */
  margin-bottom: 16px;
}

/* Subtext */
.age-modal-subtext {
  font-size: 12px;
  line-height: 1.4;
  color: #bfaedc;
  margin-bottom: 24px;
}

/* Button Container */
.age-modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

/* PihuHub Pink Primary Button */
.btn-enter {
  flex: 1;
  background-color: #e91e63; /* Signature PihuHub vibrant pink */
  color: #ffffff;
  border: none;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-enter:hover {
  background-color: #d81b60;
  transform: translateY(-1px);
}

/* Dark Outline Exit Button */
.btn-exit {
  flex: 1;
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #e91e63; /* Pink outline accent */
  padding: 12px 16px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-exit:hover {
  background-color: #e91e63;
  color: #ffffff;
}

/* Prevents background scrolling when modal is open */
body.modal-open {
  overflow: hidden;
  height: 100vh;
}

button.send {
    background-color: #075E36 !important;
    color: #FFFFFF !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    border: 1px solid #075E36;
    opacity: 1;
}

button.send span,
button.send svg {
    color: #FFFFFF !important;
    fill: currentColor;
}

button.send:hover {
    background-color: #064B2C !important;
}

button.send:focus-visible {
    outline: 3px solid #111111;
    outline-offset: 3px;
}
 
/* ACCESSIBILITY FIX: WHATSAPP BUTTONS */
a.whatsapp-cta,
a.cta-whatsapp,
a[href*="wa.me/"],
a[href*="api.whatsapp.com/"] {
    background-color: #075E36 !important;
    color: #FFFFFF !important;
    border: 1px solid #075E36 !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

/* Keep WhatsApp text and icons readable */
a.whatsapp-cta span,
a.cta-whatsapp span,
a[href*="wa.me/"] span,
a[href*="api.whatsapp.com/"] span {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* ACCESSIBILITY FIX: CALL BUTTONS */
a[href^="tel:"] {
    background-color: #0757C8 !important;
    color: #FFFFFF !important;
    border-color: #0757C8 !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

/* Keep Call button labels readable */
a[href^="tel:"] span {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* Accessible hover states */
a.whatsapp-cta:hover,
a.cta-whatsapp:hover,
a[href*="wa.me/"]:hover,
a[href*="api.whatsapp.com/"]:hover {
    background-color: #064B2C !important;
    color: #FFFFFF !important;
}

a[href^="tel:"]:hover {
    background-color: #003F99 !important;
    color: #FFFFFF !important;
}

/* Preserve readable text on all action buttons */
.profile-card .button-area a.action-btn {
    font-weight: 600;
    text-decoration: none;
}

.profile-card .button-area a.action-btn span {
    opacity: 1 !important;
}


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

/* Main page containers */
.container,
.wrapper,
.main,
.content,
.page,
section {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:#d71945;
  --red2:#a90832;
  --pink:#fff0f4;
  --soft:#fff8fa;
  --dark:#292936;
  --green:#16b957;
  --blue:#183a9e;
}
body{font-family:Arial,Helvetica,sans-serif;color:#292936;background:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1100px,92%);margin:auto}


/* ===== 3D HEADER ===== */
.site-header{
  background:linear-gradient(145deg,#c20f3d 0%,#e21d4d 48%,#a90732 100%);
  color:#fff;position:sticky;top:0;z-index:50;
  box-shadow:0 5px 0 #8b062a,0 11px 28px #6d062844;
}
.site-header:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,#fff8,#ffd8e2,transparent);
}
.nav{
  min-height:68px;display:flex;align-items:center;justify-content:space-between;
  gap:18px;position:relative;
}
.brand{display:flex;align-items:center;gap:10px;min-width:205px}
.logo-slot{
  width:60px;height:60px;flex:0 0 60px;border-radius:13px;
  display:grid;place-items:center;overflow:hidden;background:transparent;
  border:0;
  box-shadow:none;
}
.logo-slot img{width:100%;height:100%;object-fit:contain;background:transparent}
.logo-fallback{
  display:none;width:100%;height:100%;place-items:center;
  color:#fff;font-size:15px;font-weight:900;
  background:transparent;
}
.brand-name{
  font-size:20px;line-height:1;font-weight:900;letter-spacing:-.5px;
  text-shadow:0 2px 2px #72052666;
}
.brand-name span{color:#ffe5ec}
.brand-name small{font-size:11px;margin-left:1px;color:#fff}
.nav-links{
  display:flex;align-items:center;justify-content:flex-end;gap:5px;
  font-size:12px;font-weight:800;
}
.nav-links a{
  padding:9px 11px;border-radius:9px;border:1px solid transparent;
  transition:.2s ease;text-shadow:0 1px 1px #76052855;
}
.nav-whatsapp{display:grid !important;place-items:center;width:36px;height:36px;margin-left:4px;padding:0 !important;border-radius:50% !important;background:#20c768 !important;color:#fff !important;border:2px solid #fff !important;box-shadow:0 3px 8px #0004,inset 0 1px 0 #fff7 !important;}
.nav-whatsapp svg{width:21px;height:21px;fill:currentColor;}
.nav-whatsapp:hover{background:#16a34a !important;transform:translateY(-1px) scale(1.04);}

.nav-links a:hover{
  background:#ffffff18;border-color:#ffffff45;
  box-shadow:inset 0 1px 0 #fff4,0 3px 9px #71052b44;
  transform:translateY(-1px);
}
.menu{
  display:none;background:#ffffff16;border:1px solid #ffffff55;color:#fff;
  font-size:25px;border-radius:10px;padding:3px 10px;
  box-shadow:inset 0 1px 0 #fff4,0 4px 12px #71052b44;
}

/* ===== REAL-LOOKING INLINE CONTACT ICONS ===== */
.icon-btn{
  width:38px;height:38px;border:2px solid #fff;border-radius:50%;
  display:grid;place-items:center;color:#fff;cursor:pointer;padding:0;
  box-shadow:0 4px 9px #0005,inset 0 1px 0 #fff8;
  transition:.2s ease;
}
.icon-btn svg{width:20px;height:20px;fill:currentColor}
.icon-btn:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 7px 14px #0006}
.wa{background:linear-gradient(145deg,#25d366,#0b9f47)}
.call{background:linear-gradient(145deg,#ff496f,#cf153f)}

.float-btn{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:23px;border:2px solid #fff;
  box-shadow:0 7px 18px #0005,inset 0 2px 0 #fff9;
  transition:.2s ease;
}
.float-btn svg{width:28px;height:28px;fill:currentColor}
.float-btn:hover{transform:scale(1.07) translateY(-2px)}


/* HERO */
.hero{background:linear-gradient(135deg,#ffeaf1,#fff 58%,#ffe7ee);padding:35px 0 28px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.hero h1,.section-title{font-size:27px;line-height:1.18;color:#8e1640;text-transform:uppercase}
.hero p{font-size:14px;margin-top:13px}
.hero-image{border:4px solid var(--red);padding:3px;background:#fff;box-shadow:0 8px 25px #a9083233}
.hero-image img{width:100%;height:270px;object-fit:cover}
.hero-button{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:#20c768;color:#fff;padding:11px 20px;border-radius:25px;font-weight:800;font-size:13px;box-shadow:0 4px 0 #0a8f43,0 7px 15px #0002}
.hero-button svg,.cta-whatsapp svg{width:21px;height:21px;fill:currentColor}.hero-button:hover,.cta-whatsapp:hover{transform:translateY(-2px)}
.cta-whatsapp{display:inline-flex;align-items:center;gap:8px;margin-top:13px;background:#20c768 !important;color:#fff !important;padding:10px 20px !important;border-radius:24px;font-weight:800;box-shadow:0 4px 0 #0a8f43}

/* CTA */
.cta{background:var(--red);color:#fff;text-align:center;padding:24px 15px}
.cta h2{font-size:16px;text-transform:uppercase}
.cta a{display:inline-block;margin-top:13px;background:#fff;color:var(--red2);padding:10px 28px;border-radius:24px;font-weight:800}

/* GALLERY */
.gallery-section{background:#fff7fa;padding:36px 0}
.center{text-align:center}
.sub{font-size:13px;margin:6px 0 20px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{position:relative;border-radius:9px;overflow:hidden;border:2px solid #f18ba5;background:#fff;min-height:330px;box-shadow:0 5px 16px #0001}
.card img{width:100%;height:330px;object-fit:cover}
.card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(transparent,#000c)}
.card-info{position:absolute;z-index:2;bottom:13px;left:12px;right:12px;color:#fff;text-align:center}
.card-name{font-size:17px;font-weight:800}
.card-meta{font-size:11px;margin:2px 0 9px}
.card-actions{display:flex;justify-content:center;gap:9px}
.icon-btn{width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:16px;cursor:pointer}
.wa{background:var(--green)}
.call{background:#ef3b67}

/* CONTENT */
.content{background:#f2f8ff;padding:35px 0}
.content h2{font-size:22px;color:#8e1640;margin:16px 0 8px}
.content p{font-size:13px;margin:8px 0}
.info-table{width:100%;border-collapse:collapse;margin:18px 0;background:#fff;font-size:12px}
.info-table th{background:var(--red);color:#fff;padding:11px}
.info-table td{padding:10px;text-align:center;border:1px solid #f2cbd5}
.info-table tr:nth-child(even){background:#fff5f7}

/* PLANS */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:25px}
.plan{background:#fff;border:1px solid #ed8aa3;border-radius:15px;padding:23px;text-align:center;box-shadow:0 6px 18px #0000000c}
.plan.featured{border:3px solid var(--red);transform:translateY(-5px)}
.plan h3{font-size:17px}.price{font-size:24px;color:#8e1640;font-weight:800;margin:5px}
.plan ul{list-style:none;text-align:left;font-size:12px;margin:14px 0}
.plan li{margin:8px 0}.plan li:before{content:"";color:#13aa4d;font-weight:900;margin-right:7px}
.plan button{border:0;background:var(--red);color:#fff;border-radius:22px;padding:10px 20px;font-weight:800;cursor:pointer;width:100%}

/* BENEFITS */
.benefits-section{background:linear-gradient(135deg,#ffe5ed,#f4dfff);padding:35px 0}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.benefit{background:linear-gradient(135deg,#a708c7,var(--red2));color:#fff;padding:18px;border-radius:10px}
.benefit strong{display:block;font-size:13px}.benefit span{font-size:11px;opacity:.9}

/* CONTACT */
.contact-section{background:#fff1f6;padding:35px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.map{height:300px;border-radius:10px;overflow:hidden;background:#d8edf3;position:relative}
.map iframe{width:100%;height:100%;border:0}
.form-box{background:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 18px #0001}
input,textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:9px;margin-bottom:10px;font:inherit}
textarea{height:90px;resize:vertical}
.send{width:100%;padding:12px;border:0;border-radius:8px;background:var(--red);color:#fff;font-weight:800}.contact-icon{width:18px;height:18px;fill:currentColor;vertical-align:middle}

/* LOCATIONS */
.locations{background:linear-gradient(135deg,#f6d7ff,#ffddea);padding:35px 0}
.location-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:20px}
.location{background:var(--red2);color:#fff;text-align:center;padding:9px 5px;border-radius:7px;font-size:11px;font-weight:700}

/* TAGS */
.tags-section{position:relative;background:#242c3c;color:#fff;padding:40px 0}
.tags-section:before{content:"";position:absolute;inset:0;background:linear-gradient(#182234cc,#182234ee),url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1600&q=70") center/cover;opacity:.55}
.tags-inner{position:relative}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.tag{border:1px solid #ffb3c7;border-radius:20px;padding:5px 10px;font-size:10px}

/* FOOTER */
footer{background:var(--red);color:#fff;padding:30px 0 78px;text-align:center}
.footer-links{display:flex;justify-content:center;gap:22px;font-size:12px;font-weight:700}
footer p{font-size:11px;margin-top:16px}

/* FLOATING CONTACT */
.floating{position:fixed;right:16px;bottom:72px;z-index:100;display:flex;flex-direction:column;gap:10px}
.float-btn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:23px;box-shadow:0 7px 18px #0004}
.float-btn.wa{background:#20c768}.float-btn.call{background:#e93462}

/* BOTTOM BAR */
.bottom-bar{position:fixed;bottom:0;left:0;right:0;height:46px;z-index:101;display:grid;grid-template-columns:1fr 1fr;color:#fff;font-weight:800;font-size:12px}
.bottom-bar a{display:flex;align-items:center;justify-content:center;gap:8px}.bottom-bar svg{width:18px;height:18px;fill:currentColor}
.bottom-call{background:#162a92}.bottom-wa{background:#0a9c39}

/* RESPONSIVE */
@media(max-width:800px){
 .nav{min-height:64px}
 .brand{min-width:0}.brand-name{font-size:18px}
 .logo-slot{width:52px;height:52px;flex-basis:52px}
 .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:linear-gradient(145deg,#c20f3d,#a90732);padding:12px;flex-direction:column;gap:0;box-shadow:0 10px 18px #0003}
 .nav-links.open{display:flex}.nav-links a{padding:9px}.menu{display:block}
 .hero-grid,.contact-grid{grid-template-columns:1fr}
 .hero-image img{height:230px}
 .gallery{grid-template-columns:repeat(2,1fr)}
 .plans{grid-template-columns:1fr}
 .benefits{grid-template-columns:repeat(2,1fr)}
 .location-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:500px){
 .container{width:92%}
 .hero h1,.section-title{font-size:22px}
 .gallery{gap:9px}.card,.card img{min-height:260px;height:260px}
 .card-name{font-size:14px}.card-meta{font-size:9px}
 .benefits{grid-template-columns:1fr 1fr}
 .location{font-size:10px}
 .floating{display:none}
}
/* =========================
   LONG CARD
========================= */

.profile-card{
    width:100%;
    max-width:1100px;
    min-height:165px;
    margin:0 auto 20px auto;

    display:flex;
    align-items:center;
    gap:18px;

    padding:12px;

    background:#ffffff;

    border:2px solid #c90000;
    border-radius:14px;

    box-shadow:
        0 6px 0 #900000,
        0 12px 25px rgba(150,0,0,.22);

    transition:.25s ease;
}

.profile-card:hover{
    transform:translateY(-3px);

    box-shadow:
        0 9px 0 #900000,
        0 16px 30px rgba(150,0,0,.25);
}


/* =========================
   PHOTO
========================= */

.photo-box{
    width:125px;
    height:140px;
    min-width:125px;

    border:2px solid #c90000;
    border-radius:10px;

    overflow:hidden;
    background:#ffffff;

    box-shadow:
        0 4px 0 #a00000;
}

.photo-box img{
    width:100%;
    height:100%;

    object-fit:cover;
    display:block;
}


/* =========================
   CONTENT
========================= */

.card-content{
    flex:1;
    min-width:0;
}

.card-heading{
    color:#000000;

    font-size:22px;
    font-weight:800;

    margin-bottom:7px;
}

.description{
    color:#000000;

    font-size:14px;
    line-height:1.5;

    max-width:700px;
}


/* =========================
   BUTTON AREA
========================= */

.button-area{
    display:flex;
    flex-direction:column;
    gap:9px;

    min-width:130px;
}


/* =========================
   GREEN BUTTONS
========================= */

.action-btn{
    display:flex;align-items:center;justify-content:center;gap:7px;

    padding:9px 14px;

    background:#16a34a;
    color:#ffffff;

    border:2px solid #087f36;
    border-radius:7px;

    text-align:center;
    text-decoration:none;

    font-size:13px;
    font-weight:700;

    box-shadow:
        0 4px 0 #075c29;

    transition:.2s ease;
}

.action-btn svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}

.action-btn:hover{
    background:#087f36;

    transform:translateY(-2px);

    box-shadow:
        0 6px 0 #064d22;
}

.action-btn:active{
    transform:translateY(2px);

    box-shadow:
        0 2px 0 #064d22;
}


/* =========================
   TABLET
========================= */

@media(max-width:750px){

    .profile-card{
        gap:13px;
        padding:10px;
    }

    .photo-box{
        width:105px;
        height:120px;
        min-width:105px;
    }

    .card-heading{
        font-size:15px;
    }

    .description{
        font-size:13px;
    }

    .button-area{
        min-width:110px;
    }

    .action-btn{
        font-size:12px;
        padding:8px 9px;
    }
}


/* =========================
   MOBILE
========================= */

@media(max-width:550px){

    .profile-card{
        gap:11px;
        padding:9px;
    }

    .photo-box{
        width:85px;
        height:105px;
        min-width:85px;
    }

    .card-heading{
        font-size:13px;
    }

    .description{
        font-size:12px;
        line-height:1.45;
    }

    .button-area{
        min-width:92px;
    }

    .action-btn{
        font-size:11px;
        padding:7px 5px;
    }
}


/* =========================
   VERY SMALL SCREEN
========================= */

@media(max-width:400px){

    .profile-card{
        flex-wrap:wrap;
    }

    .photo-box{
        width:78px;
        height:98px;
        min-width:78px;
    }

    .card-content{
        flex:1;
    }

    .button-area{
        width:100%;
        flex-direction:row;
    }

    .action-btn{
        flex:1;
    }
}

/* =========================================
   PIHUB PREMIUM FAQ
   RED + WHITE
   ========================================= */

.ph-faq {
  --red: #e50914;
  --red-dark: #c90712;
  --red-soft: rgba(229, 9, 20, 0.08);
  --black: #151515;
  --gray: #666;
  --border: #eeeeee;

  width: 100%;
  padding: 100px 20px;

  background: #ffffff;

  box-sizing: border-box;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

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


.ph-faq-container {
  width: min(900px, 100%);
  margin: 0 auto;
}


/* =========================================
   HEADER
   ========================================= */

.ph-faq-header {
  max-width: 700px;
  margin: 0 auto 55px;
  text-align: center;
}

.ph-faq-label {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 18px;

  color: var(--red);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.ph-faq-label::before,
.ph-faq-label::after {
  content: "";

  width: 24px;
  height: 2px;

  background: var(--red);
}


.ph-faq-header h2 {
  margin: 0;

  color: var(--black);

  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 750;
}

.ph-faq-header h2 span {
  color: var(--red);
}


.ph-faq-header p {
  max-width: 600px;

  margin: 22px auto 0;

  color: var(--gray);

  font-size: 15px;
  line-height: 1.75;
}


/* =========================================
   FAQ LIST
   ========================================= */

.ph-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* =========================================
   FAQ ITEM
   ========================================= */

.ph-faq-item {
  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 16px;

  background: #fff;

  box-shadow:
    0 3px 18px rgba(0, 0, 0, 0.035);

  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}

.ph-faq-item:hover {
  border-color: rgba(229, 9, 20, .20);

  box-shadow:
    0 10px 35px rgba(0, 0, 0, .07);

  transform: translateY(-1px);
}


.ph-faq-item.active {
  border-color: rgba(229, 9, 20, .35);

  box-shadow:
    0 12px 40px rgba(229, 9, 20, .07);
}


/* =========================================
   QUESTION
   ========================================= */

.ph-faq-question {
  position: relative;

  display: grid;
  grid-template-columns: 55px 1fr 44px;
  align-items: center;

  width: 100%;
  min-height: 78px;

  padding: 0 22px;

  border: 0;
  outline: none;

  background: transparent;

  color: var(--black);

  cursor: pointer;

  text-align: left;
}


.ph-faq-number {
  color: var(--red);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}


.ph-faq-title {
  padding-right: 20px;

  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;

  transition: color .25s ease;
}

.ph-faq-item:hover .ph-faq-title {
  color: var(--red);
}


/* =========================================
   PLUS BUTTON
   ========================================= */

.ph-faq-plus {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  border-radius: 50%;

  background: var(--red-soft);

  transition:
    background .3s ease,
    transform .35s ease;
}

.ph-faq-plus i {
  position: absolute;

  display: block;

  width: 12px;
  height: 2px;

  border-radius: 2px;

  background: var(--red);

  transition:
    transform .35s ease;
}

.ph-faq-plus i:last-child {
  transform: rotate(90deg);
}


.ph-faq-item.active .ph-faq-plus {
  background: var(--red);

  transform: rotate(45deg);
}

.ph-faq-item.active .ph-faq-plus i {
  background: #fff;
}


/* =========================================
   ANSWER
   ========================================= */

.ph-faq-answer {
  display: grid;

  grid-template-rows: 0fr;

  transition:
    grid-template-rows .4s cubic-bezier(.4, 0, .2, 1);
}

.ph-faq-answer > div {
  overflow: hidden;
}


.ph-faq-item.active .ph-faq-answer {
  grid-template-rows: 1fr;
}


.ph-faq-answer p {
  max-width: 720px;

  margin: 0;

  padding:
    0
    80px
    28px
    77px;

  color: var(--gray);

  font-size: 14px;
  line-height: 1.8;
}


/* =========================================
   RED LEFT ACCENT
   ========================================= */

.ph-faq-item.active::before {
  content: "";

  position: absolute;
}

.ph-faq-item.active {
  position: relative;
}

.ph-faq-item.active::after {
  content: "";

  position: absolute;

  top: 18px;
  bottom: 18px;
  left: 0;

  width: 3px;

  border-radius: 0 4px 4px 0;

  background: var(--red);
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 650px) {

  .ph-faq {
    padding: 70px 15px;
  }

  .ph-faq-header {
    margin-bottom: 38px;
  }

  .ph-faq-header h2 {
    font-size: 40px;
  }

  .ph-faq-header p {
    font-size: 14px;
  }

  .ph-faq-question {
    grid-template-columns: 34px 1fr 38px;

    min-height: 70px;

    padding: 0 15px;
  }

  .ph-faq-number {
    font-size: 9px;
  }

  .ph-faq-title {
    font-size: 14px;
  }

  .ph-faq-plus {
    width: 32px;
    height: 32px;
  }

  .ph-faq-answer p {
    padding:
      0
      20px
      25px
      49px;

    font-size: 13px;
  }

}

.description{
    color:#000000;
    font-size:14px;
    line-height:1.5;
    max-width:700px;

    position:relative;
    overflow:hidden;

    /* EXACTLY 2 LINES */
    max-height:42px;

    padding-right:0;
    margin:0;
}

/* Read More */
.description .read-more{
    position:absolute;
    right:0;
    bottom:0;

    padding-left:5px;

    background:#ffffff;

    color:#e50914;
    font-weight:700;
    font-size:14px;

    line-height:1.5;

    cursor:pointer;
    white-space:nowrap;

    z-index:5;
}

/* small fade before "... more" */
.description .read-more::before{
    content:"";
    position:absolute;
    right:100%;
    top:0;
    width:28px;
    height:100%;

    background:linear-gradient(
        to right,
        rgba(255,255,255,0),
        #ffffff
    );
}

/* Expanded */
.description.expanded{
    max-height:none;
    overflow:visible;
    padding-right:0;
}

.description.expanded .read-more{
    position:static;
    display:inline;
    padding-left:4px;

    background:transparent;
}

.description.expanded .read-more::before{
    display:none;
}