/* Basic reset & typography */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Poppins',system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial}
.site-header{background:#fff;position:sticky;top:0;z-index:50;border-bottom:0}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo-placeholder{width:64px;height:64px;border:2px dashed #ccc;display:flex;align-items:center;justify-content:center;font-weight:600}
.company-name{font-weight:700;font-size:1.1rem}
.nav-toggle{display:none;background:none;border:0;font-size:1.25rem}
.primary-nav ul{display:flex;gap:14px;list-style:none;padding:0;margin:0}
.primary-nav a{text-decoration:none;color:#111;padding:8px 6px}
.socials{display:flex;gap:8px}
.header-bar{height:6px;background:linear-gradient(90deg,#007bff, #ff0033);width:100%}


/* Hero */
.hero{padding:18px 0}
.hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center;padding:0 18px}
.hero-text .intro{max-width:380px}
.slider{position:relative;overflow:hidden;border-radius:6px}
.slides{position:relative;height:320px}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:translateX(20px);transition:opacity 900ms cubic-bezier(.2,.9,.2,1),transform 900ms cubic-bezier(.2,.9,.2,1)}
.slide.active{opacity:1;transform:none}
.indicators{display:flex;gap:8px;justify-content:center;padding:12px}
.indicator{width:18px;height:18px;border-radius:50%;border:0;outline:0}

/* gradient indicators */
.indicator:nth-child(1){background:#007bff}
.indicator:nth-child(2){background:#4aa3ff}
.indicator:nth-child(3){background:#ffd100}
.indicator:nth-child(4){background:#ff7a00}
.indicator:nth-child(5){background:#ff0033}
.indicator.active{box-shadow:0 0 0 3px rgba(0,0,0,0.08)}


/* Savoir-faire */
.savoir-faire{padding:36px 0;background:#fafafa}
.savoir-inner{max-width:1100px;margin:0 auto;text-align:center;padding:0 18px}
.company-sub{margin:0;font-weight:600}
.big-title{font-size:2.25rem;margin:8px 0 12px;font-weight:800}
.big-text{max-width:800px;margin:0 auto}


/* Footer */
.site-footer{background:#fff;padding:18px;border-top:1px solid #eee;text-align:center}


/* Cookie banner */
.cookie-banner{position:fixed;left:12px;right:12px;bottom:12px;background:#fff;padding:14px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.12);display:flex;align-items:center;justify-content:space-between;gap:12px}
.cookie-banner p{margin:0;padding-right:12px}
.cookie-actions button{margin-left:6px}
.cookie-modal{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:none;align-items:center;justify-content:center}
.cookie-modal[aria-hidden="false"]{display:flex}
.cookie-modal-inner{background:#fff;padding:18px;border-radius:8px;max-width:520px;width:100%}


/* Responsive */
@media (max-width:900px){
.hero-inner{grid-template-columns:1fr}
.slides{height:220px}
}
@media (max-width:700px){
.nav-toggle{display:block}
.primary-nav{display:none}
.primary-nav.open{display:block;position:absolute;top:80px;left:0;right:0;background:#fff;padding:12px}
}


/* Utility */
.container{max-width:1100px;margin:0 auto;padding:18px}


/* ---------------------------
   Layout utils (container/grid)
   --------------------------- */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

/* Grilles réutilisables */
.grid {
  display: grid;
  gap: 20px;
}

/* ---------------------------
   EXPERTISES
   --------------------------- */
.expertises {
  padding: 40px 0;
  background: #ffffff;
}

/* GRILLE EXPERTISES (CORRIGÉ !) */
.expertises-grid {
  display: grid;  /* OBLIGATOIRE */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* carte d'expertise */
.expertise-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  background: #fff;
}

/* image expertise */
.expertise-card .card-media {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 450ms ease;
}

/* caption */
.card-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(0,123,255,0.95), rgba(255,0,51,0.95));
  color: #fff;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 520ms cubic-bezier(.2,.9,.2,1), opacity 520ms ease;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;text-align:center;
}

.expertise-card.in-view .card-caption {
  transform: translateY(0);
  opacity: 1;
}

.caption-title { font-size: 1.05rem; letter-spacing: 0.3px; }


/* ---------------------------
   SERVICES
   --------------------------- */
.services {
  padding: 46px 0;
  background: #fbfbfb;
}

/* GRILLE SERVICES (CORRIGÉ !) */
.services-grid {
  display: grid; /* OBLIGATOIRE */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  align-items: start;
}

/* carte service */
.service-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  text-align: center;
  padding-bottom: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* image */
.service-card .card-media {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

/* titre */
.service-title {
  margin-top: 10px;
  font-weight: 700;
  padding: 8px 12px;
}

/* info cachée */
.service-info {
  position: absolute;
  inset: 0;
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  background: rgba(0,0,0,0.6);
  color:#fff;text-align:center;
  opacity:0;
  transform:translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
  pointer-events:none;
}

/* hover */
.service-card:hover .service-info,
.service-card:focus-within .service-info {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.service-card:focus-within {
  outline: 3px solid rgba(0,123,255,0.14);
}


/* ---------------------------
   Responsive tweaks
   --------------------------- */
@media (max-width: 900px) {
  .expertise-card .card-media,
  .service-card .card-media {
    height: 180px;
  }
}

@media (max-width: 600px) {
  .expertise-card .card-media,
  .service-card .card-media {
    height: 160px;
  }
  .card-caption { padding: 10px; font-size: 0.98rem; }
}

/* ===========================
   Equipments (Équipements pris en charge)
   =========================== */
.equipments { padding: 48px 0; background: #fff; }
.equipments-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
}

/* carte équipement */
.equipment-card {
  text-align: center;
  overflow: hidden;
  border-radius: 10px;
  transition: transform 420ms ease, box-shadow 420ms ease;
  background: #fff;
  padding-bottom: 12px;
}

/* image */
.equipment-media {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 700ms cubic-bezier(.2,.9,.2,1), opacity 700ms ease;
}

/* titre sous l'image */
.equipment-title {
  margin: 14px 10px 18px;
  font-weight: 700;
  font-size: 1.05rem;
}

/* quand la carte entre dans la fenêtre on la révèle */
.equipment-card.in-view .equipment-media {
  transform: translateY(0);
  opacity: 1;
}

/* léger survol desktop */
.equipment-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }

/* ===========================
   PARTNERS (carrousel logos)
   - utilisation d'une piste animée (track) qui translate en X.
   - les logos sont dupliqués dans HTML pour boucle continue.
   =========================== */
.partners { padding: 32px 0; background: #fafafa; }
.partners-wrapper { overflow: hidden; }
.partners-viewport { overflow: hidden; position: relative; }

/* track : conteneur horizontal aligné en flex */
.partners-track {
  display: flex;
  gap: 28px;
  align-items: center;
  /* l'animation translate la piste vers la gauche */
  animation: partners-scroll 20s linear infinite;
  will-change: transform;
  padding: 12px 0;
}

/* chaque logo */
.partner { flex: 0 0 auto; display:flex; align-items:center; justify-content:center; width:150px; height:70px; }
.partner img { max-width:100%; max-height:100%; object-fit:contain; display:block; }

/* vitesse et direction du défilement */
@keyframes partners-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* -50% parce que l'on a dupliqué la série pour boucle */
}

/* si l'utilisateur veut ralentir au survol (desktop) */
.partners-viewport:hover .partners-track { animation-play-state: paused; }

/* ===========================
   VALUES (Valeurs)
   =========================== */
.values { padding: 42px 0; background: #fff; }
.values-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: center;
  text-align: center;
}

/* cercle décoratif */
.value-card { display:flex;flex-direction:column;align-items:center;gap:12px; }
.value-circle {
  width:110px;height:110px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(180deg, rgba(0,123,255,0.06), rgba(255,0,51,0.04));
  border: 2px solid rgba(0,0,0,0.04);
  overflow:hidden;
}

/* texte à l'intérieur quand il y en a */
.value-inn { font-weight:700; color:#0b3a66; padding:6px; }

/* image inside circle */
.value-circle img { width:64px; height:64px; object-fit:contain; }

/* label sous le cercle */
.value-label { margin:0;font-weight:600;color:#222; }

/* ===========================
   Responsive tweaks
   =========================== */
@media (max-width: 900px) {
  .equipment-media { height:180px; }
  .partner { width:120px; height:60px; }
  .value-circle { width:90px;height:90px; }
}

@media (max-width: 600px) {
  .equipment-media { height:160px; }
  .partners-track { gap:14px; }
  .partner { width:100px;height:50px; }
  .values-grid { gap:18px; }
}

/* ============================
   MAP & CONTACT FOOTER STYLES
   ============================ */

.map-section { padding: 36px 0 8px; background: linear-gradient(180deg, rgba(0,123,255,0.03), rgba(255,0,51,0.02)); }
.map-title { text-align:center; font-size:1.6rem; margin: 6px 0 14px; font-weight:700; }
.map-intro { max-width:900px; margin: 0 auto 12px; text-align:center; color:#333; }
.btn-primary { display:inline-block; background:linear-gradient(90deg,#007bff,#ff0033); color:#fff; border:0; padding:10px 16px; border-radius:8px; cursor:pointer; font-weight:600; text-decoration:none; }
.btn-primary:focus { outline:3px solid rgba(0,123,255,0.12); }

.map-canvas {
  width:100%;
  height:420px;
  max-width:1200px;
  margin: 12px auto 8px;
  border-radius:10px;
  overflow:hidden;
  background: #f0f0f0; /* placeholder gris tant que la carte n'est pas chargée */
  display:block;
}

/* attribution text */
.map-attrib { font-size:0.85rem; color:#666; text-align:center; margin-top:8px; }

/* CONTACT FOOTER */
.contact-footer { padding: 28px 0 16px; background: #fff; border-top:1px solid rgba(0,0,0,0.04); }
.contact-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:18px; align-items:start; }
.contact-col h3 { margin:0 0 8px; font-size:1rem; color:#111; }
.contact-col p, .contact-col li { color:#333; margin:0 0 6px; line-height:1.4; }
.hours-list { list-style:none; padding:0; margin:0; }

/* actions & logo */
.contact-right .contact-actions { display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-bottom:8px; }
.btn-secondary { background:#fff; border:1px solid #007bff; color:#007bff; padding:8px 12px; border-radius:8px; text-decoration:none; font-weight:600; }
.btn-ghost { background:transparent; border:1px dashed #999; color:#333; padding:8px 12px; border-radius:8px; text-decoration:none; }

.footer-logo { margin-top:6px; text-align:right; }

/* small print */
.smallprint { margin-top:12px; color:#777; font-size:0.85rem; text-align:center; }

/* Responsive tweaks */
@media (max-width: 900px) {
  .map-canvas { height:320px; }
  .contact-right .contact-actions { justify-content:flex-start; }
}
@media (max-width: 600px) {
  .map-canvas { height:260px; }
  .contact-grid { gap:14px; }
  .footer-logo { text-align:left; }
}






/* -----------------------
   OVERRIDE MINIMAL (safe)
   - centre les titres importants
   - footer : dégradé frigoriste
   - slider indicators centrés + dégradé
   - n'affecte rien d'autre
   ----------------------- */

/* Centre les titres de section et titres internes */
.company-sub,
.big-title,
.service-title,
.equipment-title,
.map-title,
.value-title,
.section-title,
.savoir-inner h2,
.expertises > .big-title,
.services > .big-title,
.values > .big-title {
  text-align: center !important;
}

/* Si certains titres ont padding/margins asymétriques, on les normalise légèrement */
.big-title {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Slider indicators — centrer et style frigoriste */
.indicators, .slider-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 12px !important;
  padding: 6px 0 !important;
}

.indicator,
.slider-dots button {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: linear-gradient(90deg, #007bff, #4aa3ff, #ffd100, #ff7a00, #ff0033) !important;
  opacity: 0.9 !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
  cursor: pointer !important;
}

.indicator.active,
.slider-dots button.active {
  transform: scale(1.25) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
}

/* Footer / contact-footer background dégradé frigoriste (safe override) */
.contact-footer,
.site-footer,
footer.contact-footer,
footer.site-footer {
  background: linear-gradient(135deg, #e8f8ff 0%, #dff6ff 25%, #7dd6ff 60%, #0b8bd4 100%) !important;
  color: #05344d !important;
}

/* Si tu veux le texte blanc dans le footer, décommente la règle suivante */
/* .contact-footer, .site-footer { color: #fff !important; } */

/* Petite amélioration responsive pour titre */
@media (max-width: 600px) {
  .big-title { font-size: 1.6rem !important; }
  .service-title, .equipment-title, .map-title { font-size: 1.05rem !important; }
}

/* FIN OVERRIDE */


.socials {
    display: flex;
    gap: 10px;
}

.social img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    transition: transform .2s ease;
}

.social:hover img {
    transform: scale(1.12);
}




/* ====== Styles spécifiques pour frigoriste.php ====== */
.frigo-hero { padding:48px 0 28px; background: linear-gradient(180deg, rgba(0,123,255,0.03), rgba(255,0,51,0.02)); }
.frigo-title { text-align:center; font-size:2.5rem; letter-spacing:1px; margin-bottom:14px; }
.frigo-intro { max-width:900px; margin:0 auto; color:#222; text-align:center; font-size:1.05rem; }

.frigo-section { padding:36px 0; }
.frigo-grid { display:grid; grid-template-columns: 1fr 480px; gap:28px; align-items:center; }
.frigo-text { font-size:1rem; color:#333; line-height:1.6; }
.frigo-illustration img { width:100%; height:auto; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.06); }

/* skills */
.skills-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; align-items:start; }
.skill-card { background:#fff; border-radius:10px; padding:18px; box-shadow:0 8px 20px rgba(0,0,0,0.04); text-align:left; }
.skill-media img { width:300px; height:300px; object-fit:contain; margin-bottom:10px; display:block; }
.skill-card h3 { margin:8px 0; font-size:1.05rem; }
.skill-card p { margin:0;color:#444; font-size:0.95rem; }

/* CTA */
.frigo-cta { padding:28px 0 48px; background: linear-gradient(90deg,#007bff,#ff0033); color:#fff; }
.frigo-cta .btn-primary { background:#fff; color:#111; padding:10px 16px; border-radius:8px; display:inline-block; }

/* Responsive */
@media (max-width: 1000px) {
  .frigo-grid { grid-template-columns: 1fr; }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .skills-grid { grid-template-columns: 1fr; }
  .frigo-title { font-size:1.9rem; }
  .frigo-hero { padding:28px 0; }
}

/* Gros titre centré */
.frigo-title {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* Dégradé froid vers le bas */
.frigo-gradient {
    background: linear-gradient(to bottom, #ffffff 0%, #e5f4ff 40%, #b4e0ff 100%);
    padding: 50px 0;
}

/* Section en deux colonnes inversées */
.frigo-container {
    display: flex;
    flex-direction: row-reverse; /* inversé comme demandé */
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 1200px;
    margin: auto;
    padding: 40px 20px;
}

/* Texte */
.frigo-text {
    flex: 1;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Zone schéma */
.frigo-schema {
    width: 100%;
    max-width: 520px;
    height: 300px;
    background: linear-gradient(135deg, #d9ecf7, #ffffff);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 63, 127, 0.12);
}

/* Image intégrée */
.frigo-schema img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* IMPORTANT pour un schéma */
    padding: 20px;
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .frigo-container {
        flex-direction: column; /* redevient vertical */
    }

    .frigo-schema {
        height: 220px;
        max-width: 100%;
    }
}

/* Responsive */
@media (max-width: 900px) {
    .frigo-container {
        flex-direction: column;
        text-align: center;
    }
}

/* --- PAGE QUI JE SUIS --- */

.qui-header {
    text-align: center;
    padding: 80px 20px 40px;
    background: linear-gradient(to bottom, #e7f5ff 0%, #ffffff 100%);
}

.qui-header h1 {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #003f7f;
}

/* Sections */
.qui-section {
    padding: 80px 20px;
    background: #ffffff;
}

.qui-section.alt {
    background: linear-gradient(to bottom, rgba(0, 122, 204, 0.05), rgba(0, 180, 255, 0.1));
}

.qui-content {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 50px;
}

/* TEXTE */
.qui-text h2 {
    font-size: 32px;
    margin-bottom: 15px;
    color: #003f7f;
}

.qui-text p {
    font-size: 18px;
    line-height: 1.7;
    color: #333;
}

/* IMAGES (placeholder élégant) */
.img-placeholder {
    width: 100%;
    max-width: 520px;              /* largeur maîtrisée */
    height: 300px;
    background: linear-gradient(135deg, #d9ecf7, #ffffff);
    border: 2px dashed #7fbce6;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;              /* important */
}

/* Image intégrée */
.img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;             /* image bien cadrée */
    border-radius: 12px;
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .img-placeholder {
        height: 220px;
        max-width: 100%;
    }
}

.qui-image {
    flex: 1;
}

.qui-text {
    flex: 1.2;
}

.qui-image.left { order: 1; }
.qui-text       { order: 2; }

.alt .qui-text { order: 1; }
.alt .qui-image.right { order: 2; }

/* --- RESPONSIVE --- */
@media (max-width: 900px) {

    .qui-content {
        flex-direction: column;
        text-align: center;
    }

    .qui-image.left,
    .qui-image.right,
    .alt .qui-image.right {
        order: unset;
    }

    .qui-text {
        order: unset;
    }

    .img-placeholder {
        height: 200px;
    }

    .qui-header h1 {
        font-size: 32px;
    }
}




/* ========== Rendez-vous form styles ========== */
.rendezvous-section { padding: 36px 0; }
.rendezvous-form { max-width:1100px; margin:0 auto; }
.rendezvous-grid { display:grid; grid-template-columns: 1fr 420px; gap:22px; align-items:start; }
.rendezvous-grid .col-left, .rendezvous-grid .col-right { background:#fff; padding:18px; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.04); }

.rendezvous-form label { display:block; margin-bottom:12px; font-weight:500; color:#222; }
.rendezvous-form input[type="text"],
.rendezvous-form input[type="email"],
.rendezvous-form input[type="tel"],
.rendezvous-form select,
.rendezvous-form textarea,
.rendezvous-form input[type="date"] {
  width:100%; padding:10px 12px; border:1px solid #e6e6e6; border-radius:8px; font-size:1rem;
  box-shadow:none; outline:none;
}
.rendezvous-form textarea { resize:vertical; min-height:120px; }

.inline-row { display:flex; gap:12px; }
.inline-row label { flex:1; margin-bottom:0; }

.rgpd-box { margin-top:10px; font-size:0.95rem; }
.rgpd-box label { display:block; margin-bottom:6px; }

.form-actions { margin-top:12px; display:flex; gap:8px; align-items:center; }
.btn-primary { background: linear-gradient(90deg,#007bff,#ff0033); color:#fff; border:0; padding:10px 16px; border-radius:8px; cursor:pointer; font-weight:700; }
.btn-ghost { background:transparent; border:1px solid #ccc; padding:10px 14px; border-radius:8px; cursor:pointer; }

.notice { max-width:1100px; margin:14px auto; padding:12px 16px; border-radius:8px; }
.notice.success { background:#e6ffef; color:#0b6b3a; border:1px solid rgba(0,140,80,0.08); }
.notice.error { background:#ffecec; color:#7a1b1b; border:1px solid rgba(220,0,0,0.06); }

.required { color:#d00; margin-left:4px; font-weight:700; }

/* Responsive */
@media (max-width: 1000px) {
  .rendezvous-grid { grid-template-columns: 1fr; }
  .rendezvous-grid .col-right { order: -1; } /* calendar upper on mobile */
  .inline-row { flex-direction:column; }
}

.form-group input[type="file"] {
    padding: 8px;
    background: #f8f8f8;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.form-group small {
    color: #666;
    font-size: 0.8rem;
}

.rendezvous-info {
    text-align: center;
    font-size: 1.1rem;
    margin-top: -10px;
    margin-bottom: 25px;
    color: #333;
}

.rendezvous-info a {
    color: #0066cc;
    text-decoration: none;
    font-weight: bold;
}

.rendezvous-info a:hover {
    text-decoration: underline;
}

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

.form-group label {
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.form-group input[type="text"] {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

.required {
    color: red;
    font-weight: bold;
}