/* ============================================================
   WEBINAR SINGLE TEMPLATE � FULL PAGE CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

  :root{
    --pink:#eb3f65;
    --dark:#0e0e0e;
    --teal:#1a7f7a;
    --gray-bg:#eef0f2;
    --border-gray:#d5d5d5;
    --text-dark:#161616;
    --text-gray:#09000b;
    --font-main: 'Montserrat', sans-serif;
  }


  .webinar-tpl{
    font-family:var(--font-main);
    color:var(--text-dark);
    line-height:1.5;
  }
  .webinar-tpl *{ box-sizing:border-box; }
  .webinar-tpl a{ text-decoration:none; color:inherit; }
  .webinar-tpl .container{
    max-width:1800px;
    margin:0 auto;
    padding:0 40px;
  }

  /* ============================================================
    HERO SECTION
    ============================================================ */
    
  .webinar-tpl .hero{
    position:relative;
    background:url('https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=1600&q=80') center/cover no-repeat;
    padding:250px 0 100px; /* top padding badhaya - navbar se gap ke liye */
    color:#fff;
  }
  .webinar-tpl .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.80;
    background-color: var(--global-palette3, #1A202C);
}
  .webinar-tpl .hero .container{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:60px;
    flex-wrap:wrap;
  }
  .webinar-tpl .hero-left{
    flex:1 1 500px;      /* fixed 600px hataya, proportionally space lega, gap kam hoga */
    max-width:710px;
  }
  .webinar-tpl .eyebrow{
    color:var(--pink);
    font-weight:700;
    letter-spacing:1px;
    font-size:18px;
    margin-bottom:16px;
  }
  .webinar-tpl .hero-left h1{
    font-size:44px;
    line-height:1.15;
    font-weight:700;
    margin:0 0 20px;
    color:#ffffff !important;   /* force white, theme override na ho */
    position:relative;
    z-index:2;
  }
  .webinar-tpl .hero-left p.desc{
    font-size:22px;
    color:#ddd;
    margin:0 0 28px;
  }
  .webinar-tpl .meta-list{ list-style:none; padding:0; margin:0; }
  .webinar-tpl .meta-list li{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    font-size:18px;
    color:#eee;
  }
  .webinar-tpl .meta-list li svg{
    height : 1em;
    width : 1em;
  }

  /* Registration form card */
  .webinar-tpl .reg-card {
      width: 100%;
      max-width: 600px;
      margin: auto;
      background: rgba(242, 242, 242, .25);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 24px;
      padding: 32px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
      box-sizing: border-box;
  }

  .webinar-tpl .reg-card input{
    width:100%;
    padding:14px 16px;
    margin-bottom:14px;
    border:none;
    border-radius:4px;
    background:#e6e6e6;
    font-size:14px;
    color:#333;
  }
  .webinar-tpl .reg-card input::placeholder{ color:#666; }
  .webinar-tpl .reg-card button{
    width:100%;
    padding:16px;
    background:var(--pink);
    color:#fff;
    font-weight:700;
    letter-spacing:0.5px;
    border:none;
    border-radius:4px;
  cursor:pointer;
  font-size:14px;
  margin-top:6px;
}
.webinar-tpl .reg-card button:hover{ opacity:0.9; }

/* Recording video embed � 16:9 responsive, replaces the form
   once the event date has passed */
.webinar-tpl .video-embed-wrap{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  padding-bottom:56.25% !important;
  height:0 !important;
  overflow:hidden !important;
  border-radius:14px !important;
  box-sizing:border-box !important;
}
.webinar-tpl .video-embed-wrap iframe{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  border:none !important;
}

/* Theme ka default overlapping title hide karo */
.entry-header,
.entry-title,
.page-header,
.page-title,
h1.entry-title,
.kadence-page-title,
.wp-block-post-title{
  display:none !important;
}


#zmWebToEntityForm .form-group{
    margin-bottom:15px;
}

#zmWebToEntityForm {
  max-width: 100% !important;
}

#zoho-registration-form .form-group{
    margin-bottom:15px;
}

#zoho-registration-form input{
    width:100%;
    height:54px;
    padding:0 18px;

    background:rgba(255,255,255,.85);
    border:1px solid rgba(255,255,255,.5);
    border-radius:8px;

    color:#000;
    font-size:15px;
    box-sizing:border-box;
    transition:all .3s ease;
}

#zoho-registration-form input::placeholder{
    color:#666;
    opacity:1;
}

#zoho-registration-form input:focus{
    outline:none;
    border-color:#eb3f65;
    background:#fff;
}

#zoho-registration-form .field-error{
    display:none;
    color:#ff0519;
    font-size:13px;
    margin-top:6px;
    padding-left:4px;
}

#zoho-registration-form .input-error{
    border-color:#ff0519 !important;
    background:#fff7f7 !important;
}

#zmWebToEntityForm .submit-btn{
    width:100%;
    height:54px;

    background:#eb3f65;
    color:#fff;

    border:none;
    border-radius:8px;

    font-size:16px;
    font-weight:600;
    cursor:pointer;

    transition:.3s ease;
}

#zmWebToEntityForm .submit-btn:hover{
    opacity:.9;
    transform:translateY(-1px);
}

@media (max-width:767px){

    #zmWebToEntityForm{
        padding:24px;
        border-radius:18px;
    }

}
/* ============================================================
   WHY ATTEND SECTION (with vertical dividers)
   ============================================================ */
.webinar-tpl .why-attend{
  background:var(--gray-bg);
  padding:60px 0;
}
.webinar-tpl .why-attend .container{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  gap:0;
}
.webinar-tpl .why-attend h2{
  font-size:40px;
  font-weight:700;
  white-space:nowrap;
  margin:0;
  padding-right:40px;
  display:flex;
  align-items:center;
  flex:0 0 auto;
}
.webinar-tpl .why-items{
  display:flex;
  flex:1;
  min-width:0;
  flex-wrap:wrap;
  border-left:1px solid var(--border-gray);
}
.webinar-tpl .why-item{
  flex:1;
  min-width:220px;
  padding:0 30px;
  border-left:1px solid var(--border-gray);
  margin-left:-1px;
}
.webinar-tpl .why-item:first-child{
  border-left:none;
  margin-left:0;
}
.webinar-tpl .why-item .icon{
  color:var(--pink);
  font-size:24px;
}
.webinar-tpl .why-item .icon svg {
    height: 1em;
    width: 1em;
}
.webinar-tpl .why-item h4{
  font-size:16px;
}
.webinar-tpl .why-item p{
  font-size:16px;
  color:#09000b;
  margin:0;
}

/* ============================================================
   WALK AWAY WITH / PRESSURE-TEST SECTION
   ============================================================ */
.webinar-tpl .content-split{ padding:70px 0; }
.webinar-tpl .content-split .container{
  display:flex;
  gap:80px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.webinar-tpl .walk-away-box{
  background:var(--gray-bg);
  padding:36px;
  flex:0 0 421px;
}
.webinar-tpl .walk-away-box h3{
  font-size:1.75rem;
  font-weight:700;
  margin:0 0 20px;
}
.webinar-tpl .walk-away-box ul{
  list-style:none;
  margin:0 0 20px;
  padding:0;
}
.webinar-tpl .walk-away-box ul li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:16px;
  font-size:18px;
  color:#09000b;
}
.webinar-tpl .walk-away-box ul li i{
  flex-shrink:0;
  margin-top:6px;
  font-size:14px;
  line-height:1;
  color:#09000b;
}
.webinar-tpl .walk-away-box .register_here{
  color:var(--pink);
  font-size:18px;
  letter-spacing:0.5px;
  text-decoration:underline;
  text-align : center;
}


.webinar-tpl .pressure-test{ flex:1; min-width:300px; }
.webinar-tpl .pressure-test .eyebrow{ margin-bottom:14px; }
.webinar-tpl .pressure-test h2 {
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 35px;
    line-height: 1.25;
}
.webinar-tpl .concern{
  display:flex;
  gap:16px;
  margin-bottom:26px;
}
.webinar-tpl .concern:last-child{ margin-bottom:0; }

.webinar-tpl .concern h4{ font-size:18px; margin:0 0 6px; }
.webinar-tpl .concern p{
  font-size:18px;
  color:var(--text-gray);
  font-style:italic;
  margin:0;
}
.webinar-tpl .concern .icon svg{
    height : 1em;
    width : 1em;
}

/* ============================================================
   WHO'S ON STAGE (SPEAKERS / REPEATER SECTION)
   ============================================================ */
.webinar-tpl .speakers-section{
  padding:70px 0 90px;
  text-align:center;
}
.webinar-tpl .speakers-section h2{
  font-size:36px;
  font-weight:700;
  letter-spacing:0.5px;
  margin:0 0 10px;
}
.webinar-tpl .speakers-section .subhead {
    font-size: 22px;
    color: var(--text-gray);
    margin: 0 0 50px;
    line-height: 1.4;
    font-weight: bold;
}
.webinar-tpl .speakers-row{
  display:flex;
  gap:30px;
  justify-content:space-between;
  flex-wrap:wrap;
}
.webinar-tpl .speaker-card{
  flex:1 1 0;
  min-width:220px;
  max-width:none;
  text-align:left;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:10px;
  padding:24px;
  box-shadow:0 4px 14px rgba(0,0,0,0.04);
  transition:box-shadow 0.2s;
}
.webinar-tpl .speaker-card:hover{
  background : #fcf4f6;
}
.webinar-tpl .speaker-photo-wrap{
  
  border-radius:50%;
  /* border:2px solid var(--pink); */
  margin:0 auto 20px;
}
.webinar-tpl .speaker-photo-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
.webinar-tpl .speaker-card h4{
  font-size:22px;
  font-weight:700;
  margin:1.5em 0 .5em
}
.webinar-tpl .speaker-card .role{
  font-size:14.4px;
  font-weight:700;
  margin-bottom:12px;
  color:var(--text-dark);
}
.webinar-tpl .speaker-card .bio{
  font-size:18px;
  color:var(--text-gray);
  line-height:1.6;
  margin:0;
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.webinar-tpl .cta-banner{
  background:linear-gradient(90deg, var(--pink) 0%, var(--teal) 100%);
  color:#fff;
  padding:60px 0;
}
.webinar-tpl .cta-banner .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}
.webinar-tpl .cta-banner h3{
  font-size:49px;
  font-weight:100;
  max-width:350px;
  line-height:1.2;
  margin:0;
  color: #FFFFFF;
}
.webinar-tpl .cta-banner p{
  font-size:24px;
  max-width:690px;
  margin:0;
}
.webinar-tpl .cta-banner .btn {
    background: var(--pink);
    color: #fff;
    padding: 12px 32px 12px 32px;
    font-weight: 700;
    border-radius: 100px;
    width: 271px;
    text-align: center;
    font-size: 20px;
}

/* ============================================================
   RESPONSIVE � TABLET (=1024px)
   ============================================================ */
@media(max-width:1024px){
  .webinar-tpl .container{ padding:0 30px; }

  /* Hero */
  .webinar-tpl .hero{ padding:180px 0 80px; }
  .webinar-tpl .hero .container{ gap:40px; }
  .webinar-tpl .hero-left{ flex:1 1 100%; max-width:100%; }
  .webinar-tpl .hero-left h1{ font-size:38px; }
  .webinar-tpl .hero-left p.desc{ font-size:20px; }
  .webinar-tpl .reg-card{ max-width:100%; margin:0; }

  /* Why attend */
  .webinar-tpl .why-attend h2{ font-size:32px; white-space:normal; padding-right:24px; }
  .webinar-tpl .why-item{ min-width:180px; padding:0 20px; }

  /* Content split */
  .webinar-tpl .content-split .container{ gap:40px; }
  .webinar-tpl .walk-away-box{ flex:0 0 340px; padding:28px; }
  .webinar-tpl .pressure-test h2{ font-size:30px; }

  /* Speakers */
  .webinar-tpl .speakers-row{ gap:20px; }
  .webinar-tpl .speaker-card{ flex:1 1 45%; min-width:260px; }

  /* CTA banner */
  .webinar-tpl .cta-banner h3{ font-size:42px; max-width:280px; }
  .webinar-tpl .cta-banner p{ font-size:20px; }
}

/* ============================================================
   RESPONSIVE � TABLET PORTRAIT / SMALL TABLET (=900px)
   ============================================================ */
@media(max-width:900px){
  .webinar-tpl .why-attend .container{ flex-direction:column; }
  .webinar-tpl .why-attend h2{ padding:0 0 20px; }
  .webinar-tpl .why-items{ border-left:none; flex-direction:column; }
  .webinar-tpl .why-item{
    display:grid;
    grid-template-columns:44px 1fr;
    column-gap:16px;
    align-items:center;
    border-left:none;
    border-top:1px solid var(--border-gray);
    padding:20px 0 0;
    margin:20px 0 0;
  }
  .webinar-tpl .why-item:first-child{ border-top:none; margin-top:0; padding-top:0; }
  .webinar-tpl .why-item .icon{
    grid-column:1;
    grid-row:1 / 3;
    align-self:center;
    justify-self:center;
    margin-bottom:0;
  }
  .webinar-tpl .why-item h4{
    grid-column:2;
    grid-row:1;
    margin:0 0 4px;
  }
  .webinar-tpl .why-item p{
    grid-column:2;
    grid-row:2;
  }
}

/* ============================================================
   RESPONSIVE � MOBILE LANDSCAPE / LARGE PHONE (=768px)
   ============================================================ */
@media(max-width:768px){
  .webinar-tpl .container{ padding:0 20px; }

  /* Hero */
  .webinar-tpl .hero{ padding:150px 0 60px; }
  .webinar-tpl .hero-left h1{ font-size:32px; line-height:1.2; }
  .webinar-tpl .hero-left p.desc{ font-size:18px; margin-bottom:22px; }
  .webinar-tpl .eyebrow{ font-size:15px; }
  .webinar-tpl .meta-list li{ font-size:15px; }
  .webinar-tpl .reg-card{ padding:24px; border-radius:16px; }

  /* Content split */
  .webinar-tpl .content-split{ padding:50px 0; }
  .webinar-tpl .content-split .container{ flex-direction:column; gap:36px; }
  .webinar-tpl .walk-away-box{ flex:1 1 auto; width:100%; padding:24px; }
  .webinar-tpl .walk-away-box h3{ font-size:1.5rem; }
  .webinar-tpl .walk-away-box ul li{ font-size:16px; }
  .webinar-tpl .pressure-test h2{ font-size:26px; margin-bottom:26px; }
  .webinar-tpl .concern h4{ font-size:16px; }
  .webinar-tpl .concern p{ font-size:16px; }

  /* Speakers */
  .webinar-tpl .speakers-section{ padding:50px 0 60px; }
  .webinar-tpl .speakers-section h2{ font-size:28px; }
  .webinar-tpl .speakers-section .subhead{ font-size:18px; margin-bottom:32px; }
  .webinar-tpl .speakers-row{ flex-direction:column; gap:20px; }
  .webinar-tpl .speaker-card{ flex:1 1 100%; max-width:100%; }

  /* CTA banner */
  .webinar-tpl .cta-banner{ padding:40px 0; text-align:center; }
  .webinar-tpl .cta-banner .container{ flex-direction:column; text-align:center; gap:20px; }
  .webinar-tpl .cta-banner h3{ font-size:32px; max-width:100%; }
  .webinar-tpl .cta-banner p{ font-size:16px; max-width:100%; }
  .webinar-tpl .cta-banner .btn{ width:100%; max-width:280px; }
}

/* ============================================================
   RESPONSIVE � MOBILE (=480px)
   ============================================================ */
@media(max-width:480px){
  .webinar-tpl .container{ padding:0 16px; }

  /* Hero */
  .webinar-tpl .hero{ padding:130px 0 50px; }
  .webinar-tpl .hero-left h1{ font-size:26px; }
  .webinar-tpl .hero-left p.desc{ font-size:16px; }
  .webinar-tpl .eyebrow{ font-size:14px; letter-spacing:0.5px; }
  .webinar-tpl .meta-list li{ font-size:14px; gap:8px; }
  .webinar-tpl .reg-card{ padding:20px; border-radius:12px; }
  .webinar-tpl .reg-card input{ font-size:13px; padding:12px 14px; }
  .webinar-tpl .reg-card button{ font-size:13px; padding:14px; }

  /* Why attend */
  .webinar-tpl .why-attend{ padding:40px 0; }
  .webinar-tpl .why-attend h2{ font-size:26px; }
  .webinar-tpl .why-item h4{ font-size:15px; }
  .webinar-tpl .why-item p{ font-size:14px; }

  /* Content split */
  .webinar-tpl .walk-away-box h3{ font-size:1.3rem; }
  .webinar-tpl .walk-away-box ul li{ font-size:15px; }
  .webinar-tpl .walk-away-box .register_here{ font-size:15px; }
  .webinar-tpl .pressure-test h2{ font-size:22px; }
  .webinar-tpl .concern h4{ font-size:15px; }
  .webinar-tpl .concern p{ font-size:15px; }

  /* Speakers */
  .webinar-tpl .speakers-section h2{ font-size:24px; }
  .webinar-tpl .speakers-section .subhead{ font-size:16px; }
  .webinar-tpl .speaker-card{ padding:18px; }
  .webinar-tpl .speaker-card h4{ font-size:19px; }
  .webinar-tpl .speaker-card .bio{ font-size:15px; }

  /* CTA banner */
  .webinar-tpl .cta-banner h3{ font-size:26px; }
  .webinar-tpl .cta-banner p{ font-size:15px; }
  .webinar-tpl .cta-banner .btn{ font-size:16px; padding:12px 20px; }
}

/* ============================================================
   ZOHO REGISTRATION FORM � RAW TABLE MARKUP OVERRIDE
   ------------------------------------------------------------
   Zoho's embed (#zmWebToEntityForm) renders as an actual
   <table>/<tr>/<td> layout with inline styles. This section
   turns that markup into the same glass reg-card look used
   in the hero, without touching the embed code itself.
   ============================================================ */

#zmWebToEntityForm{
  width:100% !important;
  max-width:460px;
  margin:0 auto;
  background:rgba(242,242,242,.16);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  padding:32px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}

/* Kill the default white table background + heading row */
#zmWebToEntityForm table{
  width:100% !important;
  background:transparent !important;
  border-collapse:separate;
}

#zmWebToEntityForm table > tbody > tr:first-child{
  display:none; /* hides the plain "Registration Form" heading row */
}

/* Each field's row becomes a stacked block instead of a 2-column table row */
#zmWebToEntityForm tr{
  display:block;
  width:100%;
  margin-bottom:14px;
}

#zmWebToEntityForm td{
  display:block;
  width:100% !important;
  padding:0 !important;
}

/* Field label cell � shown as a small caption above the input,
   in the page's dark/eyebrow palette instead of Zoho's default black */
#zmWebToEntityForm td[style*="font-family:Arial"]{
  font-family:var(--font-main) !important;
  font-size:13px !important;
  font-weight:600;
  color:#f1f1f1 !important;
  margin-bottom:6px;
  letter-spacing:0.2px;
}

#zmWebToEntityForm td[style*="font-family:Arial"] span{
  color:var(--pink) !important;
}

/* Timezone dropdown */
#zmWebToEntityForm select#timezone{
  width:100% !important;
  height:52px;
  padding:0 16px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.5);
  border-radius:8px;
  color:#222;
  font-family:var(--font-main);
  font-size:14px;
  appearance:none;
  -webkit-appearance:none;
}

/* Text inputs: NAME, REGISTRATIONCF1, EMAIL */
#zmWebToEntityForm input[type="text"]{
  width:100% !important;
  height:52px;
  padding:0 16px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.5);
  border-radius:8px;
  color:#222;
  font-family:var(--font-main);
  font-size:14px;
  box-sizing:border-box;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

#zmWebToEntityForm input[type="text"]:focus{
  outline:none;
  border-color:var(--pink);
  background:#fff;
  box-shadow:0 0 0 3px rgba(235,63,101,.25);
}

#zmWebToEntityForm input.field-error,
#zmWebToEntityForm input.input-error{
  border-color:#ff0519 !important;
  background:#fff7f7 !important;
  box-shadow:0 0 0 3px rgba(255,5,25,.15);
}

@media (max-width:767px){
  #zmWebToEntityForm{
    padding:24px;
    border-radius:18px;
  }
}

/* ============================================================
   SUBMIT / RESET BUTTON FIX � Submit and Reset now live in two
   separate <tr> rows in the markup. These two rows are floated
   side by side (50/50) so the buttons sit on one line.
   ============================================================ */

#zmWebToEntityForm tr:nth-last-child(-n+2){
  display:block !important;
  float:left;
  width:calc(50% - 6px) !important;
  margin-bottom:0 !important;
}

#zmWebToEntityForm tr:nth-last-child(2){
  margin-right:12px !important;
}

#zmWebToEntityForm tr:nth-last-child(-n+2) td{
  width:100% !important;
}

/* clearfix so content after the buttons doesn't collapse */
#zmWebToEntityForm table::after{
  content:"";
  display:table;
  clear:both;
}

#zmWebToEntityForm input[type="submit"]{
  display:block !important;
  width:100% !important;
  height:52px !important;
  margin:0 !important;
  border:none !important;
  border-radius:8px;
  background:var(--pink);
  color:#fff;
  font-family:var(--font-main);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.3px;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease;
}

#zmWebToEntityForm input[type="submit"]:hover{
  opacity:.9;
  transform:translateY(-1px);
}

#zmWebToEntityForm input[type="reset"]{
  display:block !important;
  width:100% !important;
  height:52px !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.4) !important;
  border-radius:8px;
  background:transparent;
  color:#f1f1f1;
  font-family:var(--font-main);
  font-weight:600;
  font-size:15px;
  letter-spacing:0.3px;
  cursor:pointer;
  transition:background .2s ease;
}

#zmWebToEntityForm input[type="reset"]:hover{
  background:rgba(255,255,255,.08);
}

@media (max-width:480px){
  #zmWebToEntityForm tr:nth-last-child(-n+2){
    float:none;
    width:100% !important;
    margin-right:0 !important;
    margin-bottom:12px !important;
  }
}