/*
Theme Name: Emzoom Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 4.27.4.1758445542
Updated: 2025-09-21 09:05:42

*/

/* FOOTER */
a.footer_links {
    color: #ffffff;
}

.legal_privacy a {
	color: #ffffff;
}

.legal_privacy {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.legal_privacy a {
    display: flex;
    justify-content: center;
    align-items: center;
}

select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required {
    -webkit-appearance: none;
    background-color: #fff;
    width: 100%;
    border-width: 0;
    border-radius: 0;
    color: #999;
    font-size: 14px;
    padding: 16px;
    border-bottom: 1px solid;
    border-color: #000000;
}

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    -webkit-appearance: none;
    background-color: #fff;
    width: 100%;
    border-width: 0;
    border-radius: 0;
    color: #999;
    font-size: 14px;
    padding: 16px;
    border-bottom: 1px solid;
    border-color: #000000;
}

#test_drive .wpcf7-form-control {
    margin-bottom: 15px;
}

span.red_txt {
    color: red;
}

input.wpcf7-form-control.wpcf7-submit.has-spinner {
    background-color: #fff;
    color: #eb0a1e;
    border-color: #eb0a1e;
    border-radius: 3.8rem;
    border-width: .1rem;
    padding: 1.2rem 5.2rem;
    align-items: center;
    background-color: #ffffff;
    border: none;
    border-radius: 3.8rem;
    box-shadow: inset 0 0 0 .1rem #eb0a1e;
    display: flex;
    gap: 0.8rem;
    outline: none;
    padding: 1.2rem 5.2rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: all .2s ease-in;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    opacity: 1 !important;
    padding: 1.2rem 4rem;
    font-weight: 400;
    justify-content: center;
}

input.wpcf7-form-control.wpcf7-submit:hover {
    box-shadow: rgb(235, 10, 30) 0px 0px 0px 1px inset;
    background-color: #b5102d;
    border-color: #b5102d;
    color: #ffffff;
}

.half_txt {
	margin-top: 15px;
	display: flex;
    justify-content: space-evenly;
    gap: 20px;
}


.half_txt p {
    width: 50%;
}

@media (max-width: 768px) {
  .half_txt {
    flex-direction: column; /* Stack items vertically */
    align-items: center;    /* Optional: center them horizontally */
  }

  .half_txt p {
    width: 100%;            /* Each paragraph takes full width */
    text-align: center;     /* Optional: center the text */
  }
}


/* END */

/* ACCENT */
.accent-colour {
	color: #EC091D !important;
}

/* END */

/* MENU */

.test-drive-btn a {
    background-color: #EC091D;
	font-weight: bold !important;
}

.et_header_style_left #et-top-navigation nav>ul>li>a {
    padding: 15px 10px 15px 10px;
}

.et_header_style_left #et-top-navigation {
    padding-top: 0px !important;
}

header#main-header {
    padding-top: 10px;
    padding-bottom: 10px;
}

    .et_header_style_left .et-fixed-header #et-top-navigation nav>ul>li>a {
        padding-bottom: 15px !important;
    }

/* PULSE */

.test-drive-btn {
  position: relative;
  color: #fff;
  border: none;
  border-radius: 16px !important;
  cursor: pointer;
  transition: background 0.3s ease;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(238, 51, 55, 0.6);
    transform: scale(1);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(238, 51, 55, 0);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(238, 51, 55, 0);
    transform: scale(1);
  }
}


/* END */


/* VARIATIONS */

.color-specs {
    display: flex;
    flex-direction: column;
    gap: 2.8rem;
    justify-content: center;
}

.spec-value {
    color: var(--type-clr);
    font-weight: var(--type-weight, 600);
    line-height: 120%;
    text-transform: var(--type-text-transform, );
    text-wrap: wrap;
    font-size: clamp(3.2rem, 3.0058252427rem + .5177993528vw, 4rem);
}

/* END */


/* ===== Desktop / tablet (default) ===== */
.color-picker{
  display:grid;
  grid-template-columns: 40% 60%;
  column-gap: 2.5rem;
  align-items: center;            /* center colours vs image vertically */
}

/* Center the whole colours block in its column */
.color-list {
    align-self: center;
    justify-self: center;
    text-align: center;
    background-color: #000000cf;
    padding: 50px 50px 60px 50px;
    border-radius: 50px;
}

/* Center the row of dots */
.color-dots{
  display: grid;
  grid-template-columns: repeat(5, 56px);
  column-gap: 28px;
  row-gap: 60px;
  justify-content: center;        /* horizontal centering */
}

/* Each colour cell: only the circle takes layout space */
.color-item{
  position:relative;     /* for absolute label */
  width:56px;
  height:56px;           /* just the dot */
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.color-item:focus-visible{outline:3px solid rgba(0,0,0,.2); outline-offset:2px;}

/* Circular dot */

.color-item:hover .dot{ transform:translateY(-1px); }

/* Dot container */
.dot{
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px #e3e3e3;
  transition: transform .15s ease, box-shadow .15s ease;
  display: grid;                 /* NEW: make the dot a grid */
  place-items: center;           /* center children (img + ::after) */
}

/* Image stays in the same grid cell, behind the tick */
.dot img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  grid-area: 1 / 1;              /* overlay with ::after */
}

/* Active ring */
.color-item.active .dot{
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px #cfd6e0;
}

/* Perfectly centered tick badge */
.color-item.active .dot::after{
  content: "✓";
  grid-area: 1 / 1;              /* sits on top of the image, centered */
  width: 26px; 
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;                /* avoid vertical bias */
  color: #ffffff;
  text-shadow: 0 0 3px rgba(0, 0, 0, .7);
}


/* Label: show only for active, never wrap, don’t affect layout */

h2.color-title {
    color: #ffffff;
    margin-bottom: 10px;
}
.color-name{
  display:none;
  position:absolute;
  top:66px; left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:14px;
  color:#ffffff;
  line-height:1.2;
  text-align:center;
  pointer-events:none;
}
.color-item.active .color-name{ display:block; }

/* ----- Middle column ----- */
.color-image{ display:grid; place-items:center; }
.color-image img{ width:100%; max-width:740px; height:auto; display:block; }

/* ----- Right column ----- */
.color-specs{ display:grid; gap:34px; }
.spec-value{ font-size:44px; font-weight:800; line-height:1; color:#ffffff }
.spec-label{ margin-top:8px; font-size:15px; color:#ffffff; }

/* Responsive stack only below 1024px */
@media (max-width:1024px){
  .color-picker{ grid-template-columns:1fr; column-gap:0; row-gap:2rem; }
  .color-dots{ grid-template-columns:repeat(4,56px); }
  .color-image img{ max-width:100%; }
	
	.color-list {
    align-self: center;
    justify-self: center;
    text-align: center;
    background-color: #000000cf;
    padding: 30px 30px 40px 30px;
    border-radius: 50px;
}
}
}