.elementor-2080 .elementor-element.elementor-element-d691d31{--display:flex;}.elementor-2080 .elementor-element.elementor-element-cf1d00b{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2080 .elementor-element.elementor-element-265310b{width:100%;max-width:100%;box-shadow:0px 6px 15px -7px rgba(0,0,0,0.5);}.elementor-2080 .elementor-element.elementor-element-265310b > .elementor-widget-container{background-color:#FFFFFF;padding:20px 0px 0px 0px;}.elementor-2080 .elementor-element.elementor-element-265310b .stm-elementor-contact-form-seven .icon-title i{font-size:27px;}.elementor-2080 .elementor-element.elementor-element-265310b .stm-elementor-contact-form-seven .icon-title svg{width:27px;height:27px;}.elementor-2080 .elementor-element.elementor-element-265310b .stm-elementor-contact-form-seven .icon-title .title{color:#232628;}.elementor-2080 .elementor-element.elementor-element-04e145d{--display:flex;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-2080 .elementor-element.elementor-element-cf1d00b{--width:100%;}}@media(max-width:1024px){.elementor-2080 .elementor-element.elementor-element-265310b > .elementor-widget-container{padding:30px 20px 10px 20px;}}@media(max-width:767px){.elementor-2080 .elementor-element.elementor-element-265310b > .elementor-widget-container{padding:20px 20px 20px 20px;}}/* Start custom CSS *//* =========================================================
   CAR GUIDE SA — CONTACT PAGE BODY ONLY
   Current Contact page ID from supplied HTML: 2080.
   Paste into Elementor > Page Settings > Custom CSS.
   Header/footer are not targeted.
   ========================================================= */

body.page-id-2080 #main{
  --cg-blue:#0967E8;
  --cg-green:#059447;
  --cg-yellow:#F3C500;
  --cg-red:#F31019;
  --cg-black:#0A0D12;
  --cg-ink:#131820;
  --cg-muted:#667085;
  --cg-line:#E7EBF0;
  --cg-soft:#F5F7FA;
  --cg-shadow:0 18px 55px rgba(13,34,63,.10);
  --mvl-primary-color:var(--cg-blue);
  --mvl-secondary-color:var(--cg-green);
  --motors-accent-color:var(--cg-blue);
  background:#fff;
  color:var(--cg-ink);
}
body.page-id-2080 #main *,body.page-id-2080 #main *::before,body.page-id-2080 #main *::after{box-sizing:border-box}
body.page-id-2080 #main .cgsa-contact-section{position:relative;overflow:hidden;padding:82px 24px;background:#fff}
body.page-id-2080 #main .cgsa-contact-shell{width:min(1180px,100%);margin:0 auto}
body.page-id-2080 #main .cgsa-contact-section h1,
body.page-id-2080 #main .cgsa-contact-section h2,
body.page-id-2080 #main .cgsa-contact-section h3{margin:0;color:var(--cg-black);font-family:Inter,Arial,sans-serif;letter-spacing:-.035em;line-height:1.04}
body.page-id-2080 #main .cgsa-contact-section p{margin:0;color:var(--cg-muted);font:400 16px/1.76 Inter,Arial,sans-serif}
body.page-id-2080 #main .cgsa-contact-section a{text-decoration:none}
body.page-id-2080 #main .cgsa-contact-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;color:var(--cg-blue);font:800 12px/1 Inter,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
body.page-id-2080 #main .cgsa-contact-eyebrow::before{content:"";width:22px;height:3px;border-radius:99px;background:currentColor}
body.page-id-2080 #main .cgsa-contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
body.page-id-2080 #main .cgsa-contact-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 22px;border-radius:12px;font:800 14px/1 Inter,Arial,sans-serif;transition:.2s ease}
body.page-id-2080 #main .cgsa-contact-btn:hover{transform:translateY(-2px)}
body.page-id-2080 #main .cgsa-contact-btn-primary{background:var(--cg-blue);color:#fff;box-shadow:0 12px 28px rgba(9,103,232,.22)}
body.page-id-2080 #main .cgsa-contact-btn-secondary{background:#fff;color:var(--cg-ink);border:1px solid #D9E0E8}
body.page-id-2080 #main .cgsa-contact-heading{max-width:760px;margin:0 auto 34px;text-align:center}
body.page-id-2080 #main .cgsa-contact-heading h2{font-size:clamp(34px,4.4vw,54px)}

/* HERO */
body.page-id-2080 #main .cgsa-contact-hero{padding-top:94px;background:radial-gradient(circle at 12% 18%,rgba(9,103,232,.07),transparent 28%),linear-gradient(180deg,#fff,#FAFBFD)}
body.page-id-2080 #main .cgsa-contact-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--cg-blue) 0 25%,var(--cg-green) 25% 45%,var(--cg-yellow) 45% 65%,var(--cg-red) 65% 82%,var(--cg-black) 82% 100%)}
body.page-id-2080 #main .cgsa-contact-hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:58px;align-items:center}
body.page-id-2080 #main .cgsa-contact-hero h1{font-size:clamp(46px,5.4vw,74px)}
body.page-id-2080 #main .cgsa-contact-hero h1 span{color:var(--cg-red)}
body.page-id-2080 #main .cgsa-contact-hero p{max-width:650px;margin-top:24px;font-size:17px}
body.page-id-2080 #main .cgsa-contact-hero-image{position:relative;margin:0;min-height:420px;border-radius:28px;overflow:hidden;background:#EEF2F5;box-shadow:var(--cg-shadow)}
body.page-id-2080 #main .cgsa-contact-hero-image img{display:block;width:100%;height:100%;min-height:420px;object-fit:cover}
body.page-id-2080 #main .cgsa-contact-hero-image::after{content:"";position:absolute;right:-70px;top:36px;width:220px;height:74px;transform:rotate(-12deg);background:linear-gradient(180deg,var(--cg-red) 0 18%,var(--cg-black) 18% 35%,#fff 35% 47%,var(--cg-blue) 47% 64%,var(--cg-yellow) 64% 79%,var(--cg-green) 79% 100%);opacity:.88}

/* CONTACT PATHWAYS */
body.page-id-2080 #main .cgsa-contact-pathways{background:#F7F9FC}
body.page-id-2080 #main .cgsa-contact-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
body.page-id-2080 #main .cgsa-contact-card{display:flex;flex-direction:column;min-height:260px;padding:28px;border:1px solid var(--cg-line);border-radius:22px;background:#fff;box-shadow:0 12px 34px rgba(14,35,61,.06);transition:.2s ease;color:var(--cg-ink)}
body.page-id-2080 #main .cgsa-contact-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(14,35,61,.10)}
body.page-id-2080 #main .cgsa-contact-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:24px;border-radius:14px;background:#EAF2FF;color:var(--cg-blue);font:900 22px/1 Inter,Arial,sans-serif}
body.page-id-2080 #main .cgsa-contact-card-green .cgsa-contact-icon{background:#EAF8EF;color:var(--cg-green)}
body.page-id-2080 #main .cgsa-contact-card-red .cgsa-contact-icon{background:#FFF0F1;color:var(--cg-red)}
body.page-id-2080 #main .cgsa-contact-card strong{display:block;margin-bottom:12px;font:900 22px/1.15 Inter,Arial,sans-serif}
body.page-id-2080 #main .cgsa-contact-card p{font-size:14px;line-height:1.65;flex:1}
body.page-id-2080 #main .cgsa-contact-card em{margin-top:22px;color:var(--cg-blue);font:850 13px/1 Inter,Arial,sans-serif;font-style:normal}
body.page-id-2080 #main .cgsa-contact-card-green em{color:var(--cg-green)}
body.page-id-2080 #main .cgsa-contact-card-red em{color:var(--cg-red)}

/* EXISTING CONTACT FORM 7 / MOTORS WIDGET — styling only */
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven{position:relative!important;margin:0 auto!important;max-width:1180px!important;padding:68px 24px!important}
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven::before{content:"Send us a message";display:block;margin:0 0 24px;color:var(--cg-black);font:900 clamp(32px,4vw,50px)/1.06 Inter,Arial,sans-serif;letter-spacing:-.035em}
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven .stm-elementor-contact-form-seven{padding:34px!important;border:1px solid var(--cg-line)!important;border-radius:24px!important;background:linear-gradient(115deg,#fff 0 68%,#F3F7FF 100%)!important;box-shadow:var(--cg-shadow)!important}
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven .icon-title{margin-bottom:24px!important}
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven .icon-title h2{font-family:Inter,Arial,sans-serif!important;color:var(--cg-blue)!important;text-transform:none!important;letter-spacing:-.025em!important}
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven .contact-us-label{margin-bottom:8px!important;color:#344054!important;font:800 12px/1.25 Inter,Arial,sans-serif!important;text-transform:none!important}
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven input[type="text"],
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven input[type="email"],
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven input[type="tel"],
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven textarea{width:100%!important;border:1px solid #D7E0EA!important;border-radius:12px!important;background:#fff!important;color:#1F2937!important;box-shadow:none!important;outline:none!important;font-family:Inter,Arial,sans-serif!important;transition:border-color .2s ease,box-shadow .2s ease!important}
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven input[type="text"],
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven input[type="email"],
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven input[type="tel"]{height:52px!important;padding:0 15px!important}
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven textarea{min-height:190px!important;padding:15px!important;resize:vertical!important}
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven input:focus,
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven textarea:focus{border-color:var(--cg-blue)!important;box-shadow:0 0 0 4px rgba(9,103,232,.10)!important}
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven .contact-us-submit input[type="submit"],
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven input.wpcf7-submit{min-height:50px!important;padding:0 24px!important;border:0!important;border-radius:12px!important;background:var(--cg-green)!important;color:#fff!important;font:850 14px/1 Inter,Arial,sans-serif!important;text-transform:none!important;box-shadow:0 12px 28px rgba(5,148,71,.20)!important}
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven .wpcf7-list-item-label{color:#667085!important;font:600 12px/1.4 Inter,Arial,sans-serif!important}
body.page-id-2080 #main .elementor-widget-stm-contact-form-seven .wpcf7-response-output{border-radius:10px!important;font-family:Inter,Arial,sans-serif!important}

/* Hide stock Motors demo dealership/contact data until real SA details are supplied. */
body.page-id-2080 #main .elementor-widget-motors-contact-tabs,
body.page-id-2080 #main .elementor-widget-stm-google-map{display:none!important}

/* AI SUPPORT CTA */
body.page-id-2080 #main .cgsa-contact-ai{background:linear-gradient(180deg,#F7FAFF,#fff);padding-top:60px;padding-bottom:84px}
body.page-id-2080 #main .cgsa-contact-ai-inner{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:center;padding:38px;border:1px solid var(--cg-line);border-radius:26px;background:#fff;box-shadow:0 14px 44px rgba(14,35,61,.07)}
body.page-id-2080 #main .cgsa-contact-ai-image{min-height:270px;border-radius:20px;overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(9,103,232,.13),transparent 44%),#F7FAFF}
body.page-id-2080 #main .cgsa-contact-ai-image img{display:block;width:100%;height:270px;object-fit:contain}
body.page-id-2080 #main .cgsa-contact-ai h2{font-size:clamp(34px,4vw,50px);margin-bottom:15px}
body.page-id-2080 #main .cgsa-contact-ai p{margin-bottom:24px}

@media(max-width:1024px){
  body.page-id-2080 #main .cgsa-contact-section{padding:68px 22px}
  body.page-id-2080 #main .cgsa-contact-hero-grid{grid-template-columns:1fr;gap:34px}
  body.page-id-2080 #main .cgsa-contact-card-grid{grid-template-columns:1fr 1fr}
  body.page-id-2080 #main .cgsa-contact-ai-inner{grid-template-columns:1fr}
}

@media(max-width:767px){
  body.page-id-2080 #main .cgsa-contact-section{padding:54px 16px}
  body.page-id-2080 #main .cgsa-contact-hero{padding-top:58px}
  body.page-id-2080 #main .cgsa-contact-hero h1{font-size:43px}
  body.page-id-2080 #main .cgsa-contact-actions{display:grid;grid-template-columns:1fr;width:100%}
  body.page-id-2080 #main .cgsa-contact-btn{width:100%}
  body.page-id-2080 #main .cgsa-contact-hero-image,body.page-id-2080 #main .cgsa-contact-hero-image img{min-height:320px}
  body.page-id-2080 #main .cgsa-contact-card-grid{grid-template-columns:1fr}
  body.page-id-2080 #main .elementor-widget-stm-contact-form-seven{padding:48px 16px!important}
  body.page-id-2080 #main .elementor-widget-stm-contact-form-seven .stm-elementor-contact-form-seven{padding:24px 18px!important}
  body.page-id-2080 #main .cgsa-contact-ai-inner{padding:24px}
}

/* Generated imagery adds subtle automotive depth without becoming stock-photo heavy. */
body.page-id-2080 #main .cgsa-contact-pathways::before{content:"";position:absolute;right:-4%;top:0;width:38%;height:100%;background:url('https://carguidesa.co.za/wp-content/uploads/2026/08/cgsa-v3-contact-vehicle-detail.webp') center/cover no-repeat;opacity:.055;pointer-events:none}
body.page-id-2080 #main .cgsa-contact-pathways .cgsa-contact-shell{position:relative;z-index:1}

/* === 2026-08-23 COVER MODE UPDATE === */
body.page-id-2080 #main .cgsa-contact-section img{object-fit:cover!important;object-position:center!important}
body.page-id-2080 #main .cgsa-contact-hero-image img{width:100%!important;height:100%!important;min-height:420px;object-fit:cover!important;object-position:center!important}
body.page-id-2080 #main .cgsa-contact-ai-image img{width:100%!important;height:270px!important;object-fit:cover!important;object-position:center!important}

/* === V3 ELEMENTOR HTML WIDGET IMAGE FIXES === */
#main .cgsa-contact-section img{image-rendering:auto!important;filter:none!important}#main .cgsa-contact-hero-image,#main .cgsa-contact-ai-image{position:relative!important;overflow:hidden!important}#main .cgsa-contact-hero-image>img,#main .cgsa-contact-ai-image>img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center!important;display:block!important;filter:none!important}

/* ==========================================================
   CONTACT HERO — SQUARE IMAGE + TOP-ALIGNED TEXT
   Add this at the VERY END of your existing CSS
   ========================================================== */

/* Align text and image from the same top edge */
body.page-id-2080 #main .cgsa-contact-hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(380px,520px)!important;
  gap:58px!important;
  align-items:start!important;
}


/* Make sure the text column starts exactly where image starts */
body.page-id-2080 #main .cgsa-contact-hero-grid > :first-child{
  align-self:start!important;
  margin-top:0!important;
  padding-top:0!important;
}


/* Square hero image */
body.page-id-2080 #main .cgsa-contact-hero-image{
  position:relative!important;

  width:100%!important;
  max-width:520px!important;

  aspect-ratio:1 / 1!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin:0!important;

  justify-self:end!important;
  align-self:start!important;

  overflow:hidden!important;

  border-radius:28px!important;

  background:#EEF2F5!important;

  box-shadow:var(--cg-shadow)!important;
}


/* Force image to fill square container */
body.page-id-2080 #main .cgsa-contact-hero-image img,
body.page-id-2080 #main .cgsa-contact-hero-image > img{
  position:absolute!important;

  inset:0!important;

  display:block!important;

  width:100%!important;
  height:100%!important;

  min-width:100%!important;
  min-height:0!important;

  max-width:none!important;
  max-height:none!important;

  object-fit:cover!important;
  object-position:center!important;

  margin:0!important;
  padding:0!important;

  filter:none!important;
}


/* Keep decorative stripe inside square image */
body.page-id-2080 #main .cgsa-contact-hero-image::after{
  content:"";

  position:absolute;

  right:-70px;
  top:36px;

  width:220px;
  height:74px;

  transform:rotate(-12deg);

  background:linear-gradient(
    180deg,
    var(--cg-red) 0 18%,
    var(--cg-black) 18% 35%,
    #fff 35% 47%,
    var(--cg-blue) 47% 64%,
    var(--cg-yellow) 64% 79%,
    var(--cg-green) 79% 100%
  );

  opacity:.88;

  z-index:2;

  pointer-events:none;
}


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

@media(max-width:1024px){

  body.page-id-2080 #main .cgsa-contact-hero-grid{
    grid-template-columns:1fr!important;

    gap:34px!important;

    align-items:start!important;
  }


  body.page-id-2080 #main .cgsa-contact-hero-image{
    width:min(100%,560px)!important;

    max-width:560px!important;

    aspect-ratio:1 / 1!important;

    justify-self:start!important;
  }

}


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

@media(max-width:767px){

  body.page-id-2080 #main .cgsa-contact-hero-grid{
    gap:28px!important;
  }


  body.page-id-2080 #main .cgsa-contact-hero-image{
    width:100%!important;

    max-width:100%!important;

    aspect-ratio:1 / 1!important;

    height:auto!important;
    min-height:0!important;

    border-radius:20px!important;
  }


  body.page-id-2080 #main .cgsa-contact-hero-image img,
  body.page-id-2080 #main .cgsa-contact-hero-image > img{
    width:100%!important;
    height:100%!important;

    min-height:0!important;

    object-fit:cover!important;
    object-position:center!important;
  }

}/* End custom CSS */