/* ========================================
   SCHNEIDER ELECTRIC LANDING PAGE STYLES
   ======================================== */

/*
   STYLESHEET ORGANIZATION:
   This CSS file is structured for maintainability and clarity.

   
   STRUCTURE:
   - Logical grouping by component/functionality
   - Clear section headers with consistent formatting
   - Comprehensive comments explaining purpose
   - Mobile-first responsive design approach
   
   SECTIONS:
   1. Variables & Reset
   2. Typography & Base Styles  
   3. Layout & Navigation
   4. Content Modules
   5. Interactive Elements
   6. Responsive Media Queries
   
   MAINTENANCE:
   - Use section headers to navigate quickly
   - Follow existing naming conventions
   - Test responsive behavior across breakpoints
   - Update comments when making changes
*/

/* ========================================
   CSS VARIABLES 
   ======================================== */
:root {
  --heading-color: #333;
  --primary-color: #3dcd58;
  --link-color: #42b4e6;
  --button-color:#008029;
  --button-hover-color: #005c1e;

}

/* ========================================
   RESET & BASE STYLES
   ======================================== */
body,
div,
h2,
h3,
html,
iframe,
p,
span {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

* {
  box-sizing: border-box;
}

/* ========================================
   FONT DECLARATIONS
   ======================================== */
@font-face {
  font-family: ArialRoundedSeBold;
  src: url("https://www.se.com/lv/shop-static/packages/@se/fonts/@1.2.3/fonts/ArialRoundedMTforSE-Bold_Latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: ArialRoundedSeRegular;
  src: url("https://www.se.com/assets-sdl/v2/shared/common/fonts/ArialRoundedMTforSE-Regular_Latin-d1c65f4c28d2bef20da2a6d6c1ad2ac9.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "ArialMTPro Bold";
  src: url("https://go.schneider-electric.com/rs/178-GYD-668/images/Arial-BoldMT.eot");
  src: url("https://go.schneider-electric.com/rs/178-GYD-668/images/Arial-BoldMT.eot?#iefix") format("embedded-opentype"),
       url("https://go.schneider-electric.com/rs/178-GYD-668/images/Arial-BoldMT.woff") format("woff2"),
       url("https://go.schneider-electric.com/rs/178-GYD-668/images/Arial-BoldMT.woff") format("woff"),
       url("https://go.schneider-electric.com/rs/178-GYD-668/images/Arial-BoldMT.ttf") format("truetype"),
       url("https://go.schneider-electric.com/rs/178-GYD-668/images/Arial-BoldMT.svg#Arial-BoldMT") format("svg");
  font-weight: 700;
  font-style: normal;
}









@font-face {
  font-family: "ArialMTPro Regular";
  src: url("https://go.schneider-electric.com/rs/178-GYD-668/images/ArialMTPro-Regular.otf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: Marydale;
  src: url("https://go.schneider-electric.com/rs/178-GYD-668/images/Marydale.woff2") format("woff2"),
       url("https://go.schneider-electric.com/rs/178-GYD-668/images/Marydale.woff") format("woff"),
       url("https://go.schneider-electric.com/rs/178-GYD-668/images/Marydale.eot") format("embedded-opentype"),
       url("https://go.schneider-electric.com/rs/178-GYD-668/images/Marydale.ttf") format("ttf");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ========================================
   BASE LAYOUT & HTML ELEMENTS
   ======================================== */
html {
  scroll-behavior: smooth;
}

body {
  height: 100vh;
  position: relative;
  padding-top: 85px;
  font-size: 15px;
  line-height: 1.2;
  color: var(--heading-color);
  font-family: 'ArialRoundedSeRegular', 'Arial Mt pro', Arial, sans-serif;
  max-width: 100% !important;
  width: 100%;
  margin: 0 auto;
}

body > .layout > div.container {
  overflow: hidden;
}

/* Submit overlay for forms */
#submit_overlay {
  display: none;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* ========================================
   TYPOGRAPHY SYSTEM
   ======================================== */

/* Headings */
h2,
h3 {
  line-height: 1.1;
  font-family: ArialRoundedSeBold, Arial, Helvetica Neue, Helvetica, sans-serif !important;
  color: var(--heading-color);
}

h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
}

h3 {
  font-size: 28px;
  font-weight: 700;
  padding-bottom: 10px;
}

/* Body text elements */
div,
p,
td {
  font-size: inherit;
  line-height: 24px;
  font-family: 'ArialRoundedSeRegular', 'Arial Mt pro', Arial, sans-serif;
}

span {
  font-size: inherit;
}

p {
  font-weight: 400;
  color: var(--heading-color);
}

/* highlighted headings */
span.colored{color:var(--button-color)}

/* Links */
a {
  outline: 0;
  transition: all .3s ease;
  color: #0075A3 !important;
/* Updated as part MMA-20846*/
  text-decoration: underline !important;
}

p a {
  font-weight:regular;
  text-decoration: underline !important;
}

a:hover {
  text-decoration: underline !important;
 color: #0a99ca !important;
}
.footer a:hover{
color:#fff !important;}
/* Images */
img {
  max-width: 100%;


}
/* ========================================
   LISTS
   ======================================== */
ol,
ul {
  margin-top: 20px;
}

ol {
  counter-reset: item;
  padding: 0;
  margin: 20px 0 0;
}

ol li {
  position: relative;
  list-style: none; 
  line-height: 24px;
  font-family: Arial Mt pro, Arial, sans-serif;
  font-weight: 400;
  display: flex;
padding:5px 0;
}

ol li::before {
  content: counter(item) "";
  counter-increment: item;
  background: var(--button-color);
  color: #fff;
  display: inline-block;
  border-radius: 50%;
  margin: 0 10px 0 0;
  width: 24px;
  height: 24px;
  text-align: center;
  vertical-align: middle;
  line-height: 24px;
  padding: 0;
  min-width: 24px;
}



ol li:before {
  top: -2px;
}

ul{margin:20px  0;padding:0 0  0 20px}
ul li::marker{color: var(--button-color)}
ul li { 
padding-left: 14px;
  line-height: 24px;
}
ol li.module_5_image_text * {
    display: inline !important; /* Ensure inline elements behave correctly in flex */
}
/* ========================================
   LAYOUT UTILITIES
   ======================================== */
.grid{max-width:1340px;margin-left:auto;margin-right:auto;}
.spacer.with-line {
  border-bottom: 2px solid #dadada;
}

.half-width {
  width: 50%;
  float: left;
}
/* ========================================
   CONTAINERS & LAYOUT
   ======================================== */
.columns.col1.container.bottom-slot > table:first-child {
  margin-top: 50px !important;
  padding-top: 50px !important;
  border-top: 2px solid #dadada !important;
}

/* ========================================
   NAVIGATION & HEADER SYSTEM
   ======================================== */

/* ========================================
   MAIN HEADER STYLES
   ======================================== */
/* Fixed header */
#myHeader {
  position: fixed;
}

/* Logo styling */
#logo-img {
  height: 75px !important;
  width: auto !important;
  transition: .4s;
}

/* Navigation header container */
.navHeader {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  top: 0;
  box-shadow: 0 0 2px 0 rgb(51 51 51 / 5%), 0 2px 10px 0 rgb(51 51 51 / 15%);
  z-index: 999;
}

/* Navigation content layout */
.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1340px;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  gap: 10px;
}

.nav-content .logo a {
  display: block;
}

/* Header link styling */
p.header-link {
  margin: 0 10px 0 0;
  line-height: 24px;
  color: #626269 !important;
}

/* ========================================
   BANNER & HERO SECTION
   ======================================== */

/* ========================================
   BANNER CONTAINER STYLES
   ======================================== */
/* Main banner container */
.banner-container {
  margin: 0 auto;
  max-width: 1340px;
  position: relative;
  height: auto;
  width: 100%;
  min-height: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center !important;
  padding-bottom: 60px;
}

.banner-container.full-width {
  max-width: 100% !important;
}

/* Banner overlay */
.banner-overlay {
  background: #000;
z-index:0;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
}

/* Banner overlay variant */
.bo-v1 {
  background-image: linear-gradient(to right, rgb(0 0 0 / 100%), rgb(0 0 0 / 1%));
  background-color: unset;
  width: 100%;
}

/* ========================================
   BANNER CONTENT ELEMENTS
   ======================================== */
/* Banner wrapper layout */
.banner-wrapper {
  
  align-items: center;
  flex-wrap: wrap;
  max-width: 1340px;
  margin: 0 auto;
}

/* Banner left part content */
.banner-lpart {
position:relative;
  padding: 30px;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  flex: 0 0 64%;
  width: 64%;
  z-index: 8;
}

.header .full-width .banner-lpart {
  padding: 30px 0;
}

/* Banner heading styling */
.banner-h1-white {
  padding-top: 20px;
  color: #fff;
  font-size: 46px;
}

/* ========================================
   FORMS SYSTEM
   ======================================== */

/* ========================================
   FORM BASE STYLES
   ======================================== */
/* Form container */
.sc-form {
  height: auto !important;
}

/* Form group layout */
.sc-form__group {
  display: block;
  align-items: baseline;
  justify-content: left;
  column-gap: 15px;
}

/* Form labels */
form .sc-form__group label.sc-form__label {
  display: block !important;
}

.sc-form__desc .sc-form__label {
  color: #333;
  display: inline-block !important;
}

/* Form submit button */
.sc-form__submit {
  background: var(--button-color) !important;
  color: #fff !important;
  font-family: ArialRoundedSeBold, Arial, Helvetica Neue, Helvetica, sans-serif !important;
}

/* Form info text */
.sc-form__info {
  color: unset !important;
}

/* ========================================
   FORM ERROR STYLES
   ======================================== */
/* Form error arrow */
.sc-form__error::before {
  margin-top: 4px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 10px solid transparent !important;
  border-right: 10px solid transparent !important;
  border-bottom: 10px solid #e51b00 !important;
  z-index: 0 !important;
  transform: none !important;
  background: 0 0 !important;
}

/* Form error message styling */
.sc-form__wrap .sc-form__error {
  margin-top: 7px;
  background-color: #e51b00;
  background-image: -webkit-linear-gradient(#e51b00 43%, #ba1600 100%);
  background-image: -moz-linear-gradient(#e51b00 43%, #ba1600 100%);
  background-image: linear-gradient(#e51b00 43%, #ba1600 100%);
  background-image: -ms-linear-gradient(#e51b00 43%, #ba1600 100%);
  border: 1px solid #9f1300;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: rgba(0, 0, 0, .65) 0 2px 7px, inset #ff3c3c 0 1px 0;
  box-shadow: rgba(0, 0, 0, .65) 0 2px 7px, inset #ff3c3c 0 1px 0;
  color: #f3f3f3 !important;
  line-height: 1.2em;
  max-width: 16em;
  padding: .4em .6em;
  text-shadow: #901100 0 -1px 0;
}

/* ========================================
   CONTENT MODULES SYSTEM
   ======================================== */

/* ========================================
   MODULE 4 - IMAGE WITH TEXT
   ======================================== */
/* Module 4 image styling */
.module_4_image_table img {
  border-radius: 10px;
  height: auto !important;
  min-width: 160px;
  max-width: 160px;
}

/* Module 4 text content padding */
.module_4_text {
  padding: 0 30px 0 0 !important;
}

/* ========================================
   MODULE 5 - IMAGE WITH TEXT LAYOUT
   ======================================== */
.grid ul li,
ul li.module_5_image_text,
ul li.module_6_video_text
{
  
    padding-left:15px !important;
}


/* Module 5 image styling */  
 .module_5_image img {
border-radius: 10px;
  height: auto !important;
}
.half-width .module_5_image img {

  min-width: 355px !important;


}
.bottom-slot .module_5_image img, .header .module_5_image img {
min-width: 450px;
max-width:450px !important;
}
/* Module 5 text content padding */
.module_5_image_text {
  padding: 0 0 0 30px !important;
}
ol li.module_5_image_text,
ol li.module_6_video_text{
  padding-bottom:10px !important;
}
ul li.module_5_image_text,
ul li.module_6_video_text{
  margin-left:30px !important;
}
/* ========================================
   MODULE 6 - VIDEO CONTENT
   ======================================== */
/* Module 6 text content padding */
.module_6_video_text {
  padding: 0 0 0 30px !important;
}

/* Video iframe styling */
iframe#video {
  border-radius: 10px;
}

/* Video module container */
div#module_6_video {
  width: 100%;
  padding-top: 60%;
  position: relative;
}

div#module_6_video iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

/* ========================================
   MODULE 8 - IMAGE ICONS SECTION
   ======================================== */
/* Module 8 container layout */
.module_8_image_icons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* Image icons styling */
.image_icons {
  max-width: 25%;
  word-break: break-all;
  text-align: center;
  padding: 0 10px;
}

.half-width.image_icons {
  max-width: 33%;
}

div.image_icons img {
  margin: 0 auto;
  width: auto;
  max-width: 100px;
  height: 100px;
  display: block;
  margin-top: 30px !important;
}

div.image_icons h3 {
  padding-top: 20px;
  font-size: 20px;
  text-align: center;
  word-break: break-word;
}

div.image_icons p {
  text-align: center;
  word-break: break-word;
}
/* ========================================
   ITEM WRAPPERS & CONTENT BLOCKS
   ======================================== */
/* Item wrapper base styling */
.item-wrapper {
  max-width: 23%;
  width: 100%;
}

.section .item-wrapper {
  max-width: 30%;
  width: 100%;
}

.item-wrapper:last-child {
  margin-right: 0;
}

/* Item wrapper content styling */


.item-wrapper h3 {
  
  font-size: 20px;
  word-break: break-word !important;
  color: var(--heading-color);
  float: left;
  margin: 20px 0 0 0;
  line-height: 1.2;
  width: 100%;
}

/* Item wrapper image styling */
.item-wrapper img {
  margin-top: 30px;
  width: 100%;
  max-width: 180px;
  height: auto;
}
div.icons .item-wrapper img {
  margin-top: 30px;
  width: 100%;
  max-width: 100px !important;
  height: auto;
}
/* Item wrapper table cell content */
.item-wrapper td p,
.item-wrapper td h3,.item-wrapper td ol {
  text-align: left !important;
  padding-left: 2.5vw;

word-break:break-word;
}
.item-wrapper td ul{
margin-left:2.5vw ;
}
/* ========================================
   IMAGE DETAILS CONTAINER
   ======================================== */
div.container.image_details {
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

/* ========================================
   TESTIMONIALS MODULE
   ======================================== */
/* Testimonial layout structure */
.testimonial_content,
.testimonial_image {
  float: left;
}

.testimonial_image {
  max-width: 25%;
}

.testimonial_content {
  max-width: 75%;
  padding-left: 20px !important;
}

/* Testimonial content styling */
.testimonial_content h3 {
  padding-top: 15px;
}

.testimonial_content p {
  margin-bottom: 15px !important;
}

/* Testimonial image styling */
.testimonial_image img {
  border-radius: 10px;
}

.testimonial_image_td img {
  max-width: 450px !important;
  border-radius: 10px;
  height: auto !important;
}

td.testimonial_image_td {
  padding: 0 0 0 20px;
}

/* Testimonial specific typography */
h3.testimonial-name {
  font-size: 22px;
  line-height: 25px;
}

/* Testimonial button styling */
.button.testimonial {
  padding-left: 29%;
  margin: 10px 0;
}
/* ========================================
   BUTTONS & INTERACTIVE ELEMENTS
   ======================================== */
.button {
  margin: 30px 0 0;
}

.buttonstyles {
  background: var(--button-color);
  color: #fff !important;
  padding: 11px 18px;
  text-align: center;
  font-size: 14px;
  margin: 4px 0;
  transition: all .15s ease;
  font-family: ArialRoundedSeBold, Arial, Helvetica Neue, Helvetica, sans-serif !important;
  text-decoration: none !important;
  display: inline-block;
  line-height: 14px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  width: fit-content;
}

.buttonstyles:hover,
.sc-form__submit:hover {
  background: var(--button-hover-color) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.navHeader .buttonstyles {
  padding: 10px 14px !important;
}

button.sc-form__submit:hover {
  opacity: .95;
}


/* ========================================
   BASE CONTAINER STYLES
   ======================================== */
/* Main container */
.container {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
}

/* Grid system */
.grid {
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
}

/* Form columns container */
.columns.col1.form-columns.container:not(.half-width) {
  padding-top: 40px;
}

/* Bottom slot container */
.columns.col1.container.bottom-slot > table:first-child {
  margin-top: 50px !important;
  padding-top: 50px !important;
  border-top: 2px solid #dadada !important;
}

/* Additional container styles */
.camarker-inner .container {
  max-width: 1340px;
}

/* ========================================
   LAYOUT COLUMNS SYSTEM
   ======================================== */
/* Content column (left side) */
div.col1.half-width,
div.half-width#content-column {
  width: 55%;
  max-width: 55%;
  float: left;
  padding-top: 30px;
}

/* Form column (right side) */
div.half-width#form-column {
  width: 45%;
  max-width: 45%;
  float: right;
  padding: 0 0 0 60px;
}

/* Half-width utility class */
.half-width {
  width: 50%;
  float: left;
}

/* ========================================
   LAYOUT UTILITIES
   ======================================== */
/* Spacer with line */
.spacer.with-line {
  border-bottom: 2px solid #dadada;
}

.spacer{
  max-width:1340px;
  margin:0 auto;
}
/* ========================================
   FOOTER SECTION
   ======================================== */
footer {
  margin-top: 80px;
  height: 40px;
  background-color: #333;
  color: #fff;
  padding: 10px 0 10px;
  display: block;
}

.footer {
  padding: 20px 0 16px;
  width: 100%;
  flex-shrink: 0;
  clear: both;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer ul li {
  margin: 0;
  display: inline-block;
  margin-right: 30px;
}

footer a {
  color: #fff !important;
  text-decoration: none !important;
}

footer a:hover,
.footer a:hover {
  text-decoration: underline;
}

.footer span {
  display: inline-block;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 17px;
  color: #fff;
}

.footer ul li a {
  font-size: 13px;
  line-height: 17px;
  color: #fff;
}

.footer a {
  color: #fff;
}

.footer-right {
  float: right;
}

.footer-left {
  float: left;
}
#footer-links {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}



/* ========================================
   SPECIAL TYPOGRAPHY & DECORATIVE ELEMENTS
   ======================================== */

/* ========================================
   CUSTOM TYPOGRAPHY CLASSES
   ======================================== */
/* Special typography class A1 */
.A1 {
  margin-bottom: 20px;
  font-family: Caveat, sans-serif !important;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
  line-height: 44px;
  color: var(--button-color);
  box-sizing: border-box;
  display: flex;
  position: relative;
  margin: 0;
}

.A1,
.A1 span {
padding:0 0 20px 0 !important;
  display: inline-block !important;
}

.A1 span:nth-child(2) {
  position: relative !important;
  top: 20px;
}

/* Special typography class B1 */
.B1 {
  font-weight: 400;
  left: 0;
  top: 10px;
  font-size: 50px !important;
}

/* ========================================
   SPECIAL IMAGE CLASSES
   ======================================== */
/* Rounded image styling */
.rounded-image img {
  border-radius: 100%;
}

/* ========================================
   OVERLAY & DECORATIVE ELEMENTS
   ======================================== */
/* New overlay element */
#new-overlay {
  font-size: 40px;
  line-height: 44px;
  color: #fff;
  box-sizing: border-box;
  width: 26px;
  height: 55px;
  filter: brightness(0) saturate(100%) invert(23%) sepia(100%) saturate(1801%) hue-rotate(130deg) brightness(95%) contrast(103%);
}





/* ========================================
   CARDS SYSTEM
   ======================================== */

/* ========================================
   CARD BASE STYLES
   ======================================== */
/* Big card layout */
.big-card {
  position: relative;
  min-height: 300px;
  overflow: hidden;
}

.big-card.card-1 {
  padding-right: 12px;
}

.big-card.card-2 {
  padding-left: 12px;
}

/* Small card layout */
.small-card.card-1 {
  padding-right: 15px;
}

.small-card.card-2 {
  padding-left: 15px;
}

.card.small-card.middle {
  padding: 0 8px !important;
}

/* ========================================
   CARD STRUCTURE & STYLING
   ======================================== */
/* Card container */
.card .content{ pointer-events: none;
    position:absolute;z-index:10;
 transition: all 1s; 
  bottom: -100%;
}

.card > div {
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}

/* Card overlay effect */
.card > div::before {
  pointer-events: none;
  content: '';
  border-radius: 15px;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 90%);
}

/* ========================================
   CARD IMAGES & HOVER EFFECTS
   ======================================== */
/* Card image hover effect */
.card:hover img {
  transform: scale(1.08);
}

/* Card image base styling */
.card img {
  transition: all 0.5s;
  margin: 0 auto;
  width: 100% !important;

  border-radius: 15px;
  height: 100% !important;
  min-height: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -330px;
  max-width: 1000px !important;
  overflow: hidden;
  width: auto !important;
  min-width: 660px;
}

/* Small card image dimensions */
.small-card img,
.card.small-card > div {
  max-width: 432px !important;
  overflow: hidden;
  min-height: 300px !important;
}

/* Big card image dimensions */
.big-card img,
.card.big-card > div {
  max-width: 768px !important;
  overflow: hidden;
  min-height: 300px !important;
}

/* ========================================
   CARD CONTENT & TEXT
   ======================================== */
/* Card content text */



.card .content p {
  padding: 0 20px 10px;
}

.card .content * {
  pointer-events: none;
  color: #fff !important;
}

/* Card content headings */
.card .content h3 {
  font-size: 24px;
  padding: 0 20px 20px;   
}

/* Card hover content positioning */
.card:hover .content {
 
  bottom: 1%
}



/*====================================
 11. COUNTDOWN MODULE
=====================================*/
.syotimer-cell__value {
    font-size: 38px;
    color: #626469;
    line-height: 1;
    margin: 0 0 5px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    width: 76px;
    padding-top: 4px;
    border-radius: 5px;
}

.syotimer-cell {
    display: inline-block;
    margin: 0 5px;
    width: auto;
    padding: 0 5px;
    text-align: center;
    color: #626469;
    position: relative;
}

.syotimer-cell:after {
    content: ":";
    position: absolute;
    right: -11px;
    top: 35px;
    font-size: 40px;
}

.syotimer-cell:last-of-type:after {
    display: none
}

.syotimer-cell.syotimer-cell_type_day {
    margin-left: 0;
    padding-left: 0;
}
    .syotimer-cell__value {
        font-size: 30px;
        line-height: 28px;
        height: 65px;
        width: 65px;
background:#bbb;
    }

    .syotimer-cell:after {
        content: ":";
        position: absolute;
        right: -11px;
        top: 15px;
        font-size: 36px;
    }


/*=====================================
    14. DARK MODULE
===================================*/
div#dark-module{
    background-blend-mode: hard-light;
    margin-top: 0px !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding-bottom: 60px;
}


div#dark-module h1{
   
    font-size:42px;

  }
div#dark-module h1, div#dark-module h2,div#dark-module p{
margin-bottom:20px;
}
div#dark-module h1, div#dark-module h2{
 line-height:1.2;
}
div#dark-module p{
 line-height:1.5;
}
  div#dark-module .content{
    max-width: 1370px;
    margin: 0 auto;
    padding:30px  20px;
    display:flex;
    flex-direction:row;
    gap: 60px;
  }
  .col50{
    width:50%;
  }
  div#dark-module .sc-form__info{
    color:#fff !important;
  }
div#dark-module .iti__country-list{
color:#333 !important;}
  .white, #dark-module {
    margin:0;
    color:#fff}
  #overlay-image{
    margin-top:40px;
  }
  div#dark-module .colored, #dark-module .A1, #dark-module ul li::marker{
    color: #3dcd58;
  }
  #dark-module .sc-form__submit, #dark-module ol li::before, #dark-module .buttonstyles{
    background:#3dcd58 !important;
  }

  #dark-module img#new-overlay{
    top:25px !important;
    position:relative;  
    max-width:30px !important;
    filter:none !important;
    margin:10px 0 0 10px;
  }

 .header:has(#dark-module) form{
 padding-bottom:0 !important;
     margin-bottom:0;
}
.header:has(#dark-module)+div .col1 ,  
.header:has(#dark-module)+div .form-on-top,
.header:has(#dark-module)+div .form-on-bottom{
     
     margin-top:0;
      border-top: none;
 }

#dark-module form label,
#dark-module form label *{
color:#fff !important;
}
/*=====================================
    15. LIGHT MODULE
===================================*/
#light-module form input[type="checkbox"],
#light-module form input[type="radio"]{
     border: 1px solid #9fa0a4  !important;
}
#light-module form input[type="checkbox"]:checked{
 border: 5px solid #3dcd58 !important;
}
 #light-module #columns{
      max-width:1340px;
      margin:0 auto;
      display:flex;
      flex-direction:row;
      gap:60px
}
 .header:has(#light-module) form{
 padding-bottom:0 !important;
     margin-bottom:0;
}
.header:has(#light-module)+div .col1 ,  
.header:has(#light-module)+div .form-on-top,
.header:has(#light-module)+div .form-on-bottom{
     padding-top:0 !important;
     margin-top:0;
      border-top: none;
 }
div#light-module h1{
   
    font-size:42px;

  }
div#light-module h1, div#light-module h2,div#light-module p{
margin-bottom:20px;
}
div#light-module h1, div#light-module h2{
 line-height:1.2;
}
div#light-module p{
 line-height:1.5;
}
  div#light-module .content{
    max-width: 1340px;
    margin: 0 auto;
    padding:30px  300px 30px 20px ;   
  }
  .col50{
    width:50%;
  }
  div#light-module .sc-form__info{
    color:#333 !important;
  }
div#light-module {
    margin:0;
    color:#000}
 div#light-module #overlay-image{
    margin-top:40px;
  }
  div#light-module .colored, #light-module .A1{
    color: var(--button-color)
  }
  #light-module .sc-form__submit{
    background:var(--button-color) !important;
  }
  div#light-module .banner{
  
    min-height:300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding-bottom: 60px;  
    background-blend-mode: hard-light;
    margin-top: 0px !important;
  }
  #light-module img#new-overlay{
    top:25px !important;
    position:relative;  
    max-width:30px !important;
  filter: brightness(0) saturate(100%) invert(17%) sepia(88%) saturate(5400%) hue-rotate(150deg) brightness(96%) contrast(102%);
    margin:10px 0 0 10px;
  }


/* ========================================
   LAYOUT CANVAS STYLES
   ======================================== */
/* Main layout canvas */
.layout-canvas-a {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  min-height: 100%;
  background-color: #fff;
  border: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  width: 100%;
}

.layout-canvas-a > .footer,
.layout-canvas-a > .header {
  position: relative;
  width: auto;
  word-wrap: break-word;
}

/* ========================================
   HEADER SPECIFIC STYLES
   ======================================== */
/* Header table adjustments */
.header table:nth-of-type(2) {
  margin: 0 !important;
}

.header td[align=center] img {
  width: 100% !important;
}

/* Optional button block */
.optnlBtnBlck,
.optnlBtnBlck a,
.optnlBtnBlck p {
  float: right;
}

.optnlBtnBlck a {
  margin-left: 30px;
}

/* ========================================
   FOOTER UTILITIES
   ======================================== */
/* Footer links list styling */
ul#footer-links li::before {
  display: none;
}




/* ========================================
   END OF DESKTOP STYLES
   ======================================== */

/* ========================================
   STYLESHEET STRUCTURE SUMMARY
   ======================================== */
/*
   This stylesheet is organized into the following logical sections:

   1. CSS VARIABLES - Custom properties for colors and theming
   2. RESET & BASE STYLES - CSS reset and box-sizing
   3. FONT DECLARATIONS - @font-face declarations for custom fonts
   4. BASE LAYOUT & HTML ELEMENTS - HTML, body, and basic element styles
   5. TYPOGRAPHY SYSTEM - Headings, paragraphs, links, and text styling
   6. LISTS - Ordered and unordered list styling with custom markers
   7. LAYOUT UTILITIES - Grid, spacers, and utility classes
   8. NAVIGATION & HEADER SYSTEM - Fixed header, logo, and navigation
   9. BANNER & HERO SECTION - Banner containers, overlays, and content
   10. FORMS SYSTEM - Form elements, groups, labels, and error states
   11. CONTENT MODULES SYSTEM - Modular content blocks (modules 4, 5, 6, 8)
   12. TESTIMONIALS MODULE - Testimonial layout and styling
   13. ITEM WRAPPERS & CONTENT BLOCKS - Reusable content containers
   14. CONTAINERS & LAYOUT SYSTEM - Main containers and column layouts
   15. FOOTER SECTION - Footer styling and layout
   16. BUTTONS & INTERACTIVE ELEMENTS - Button styles and hover states
   17. CARDS SYSTEM - Card components with hover effects and overlays
   18. SPECIAL TYPOGRAPHY & DECORATIVE ELEMENTS - Custom classes and overlays
   19. LAYOUT CANVAS SYSTEM - Main layout structure and header specifics
   20. MEDIA QUERIES - Responsive design for all screen sizes

   Each section is clearly marked with comment headers for easy navigation.
   Styles are grouped logically by component and functionality.
*/

/* ========================================
   MEDIA QUERIES - RESPONSIVE DESIGN
   ======================================== */

/* ========================================
   DESKTOP SMALL - MAX WIDTH 1400PX
   Large desktop screens and below
   ======================================== */
@media (max-width: 1400px) {
  /* Footer container padding */
  footer .container {
    padding: 0 100px !important;
  }

  /* Header banner full-width padding */
  .header .banner-container.full-width {
    padding: 0 100px;
  }

  /* Full-width elements */
  .full-width {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Grid header adjustments */
  .half-width .grid-header {
    max-width: 100%;
    width: 100%;
    margin: 0 auto !important;
  }

  /* Main container and banner adjustments */
  .grid-header,
  div.banner-container {
    max-width: calc(100% - 200px);
    width: calc(100% - 200px);
    margin: 0 auto !important;
  }

  /* Navigation and layout container padding */
  .nav-content,
  body > .layout > div.container {
    padding: 0 100px !important;
  }

  /* Header grid and spacer padding */
  div.header .grid {
    padding-left: 100px !important;
    padding-right: 100px !important;
  }
  
  div.header .spacer {
    margin-left: 100px !important;
    margin-right: 100px !important;
  }
.half-width .module_5_image img {
min-width:22vw !important;
}

/*===================================
   DARK & LIGHT MODULE
====================================*/
    div#dark-module .content,  div#light-module #columns{
      padding: 0 100px;
    }

 div#light-module .content{
 padding: 20px 100px;
}
}

/* ========================================
   TABLET LANDSCAPE - MAX WIDTH 1024PX
   Tablet landscape and smaller desktop
   ======================================== */
@media (max-width: 1024px) {
.half-width .module_5_image img {

  min-width: 25vw !important;


}

/*===================================
  LIGHT & DARK MODULE ADJUSTMENTS
====================================*/
  div#light-module #columns, div#light-module .content,div#dark-module .content{
      padding: 20px;
    }




  /* Header banner padding reduction */
  .header .banner-container.full-width {
    padding: 20px;
  }

  /* Header grid and spacer padding reduction */
  div.header .grid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  div.header .spacer {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  /* Card hover effects adjustment for smaller screens */
  

  /* Footer container padding */
  footer .container {
    padding: 0 20px !important;
  }

  /* Responsive table cell width */
  td.responsive-td:has(.module_4_image) {
    width: 31% !important;
  }

  /* Grid header and banner container adjustments */
  .grid-header,
  div.banner-container:not(.full-width) {
    max-width: calc(100% - 40px);
    width: calc(100% - 40px);
    margin: 0 auto !important;
  }

  /* Navigation and layout container padding */
  .nav-content,
  body > .layout > div.container {
    padding: 0 20px !important;
  }

  /* Typography adjustments */
  h2 {
    font-size: 30px;
  }

  /* Form group display adjustment */
  .sc-form__group {
    display: block !important;
  }
/* column cards */


}

/* ========================================
   TABLET PORTRAIT - MAX WIDTH 800PX
   Navigation specific adjustments
   ======================================== */
@media (max-width: 800px) {
  /* Navigation content padding reset */
  .nav-content {
    padding-left: 0px;
    padding-right: 0px;
  }

  div#light-module .content{   
    padding:30px  20px ;   
  }
}

/* ========================================
   MOBILE LARGE - MAX WIDTH 768PX
   Mobile and small tablet devices
   ======================================== */
@media (max-width: 768px) {
  /* ========================================
     VISIBILITY & LAYOUT UTILITIES
     ======================================== */
  /* Hide elements on mobile */
  .mobile-hidden {
    display: none !important;
  }

  /* Form positioning adjustments */
  .form-on-top {
    border-top: 1px solid #ababab;
    margin-top: 40px;
    padding-top: 40px !important;
  }

  .form-on-bottom {
    padding-bottom: 50px !important;
    border-bottom: 2px solid #ccc;
  }

  /* ========================================
     SECTION & ITEM WRAPPER ADJUSTMENTS
     ======================================== */
  /* Section item wrapper full width */
  .section .item-wrapper {
    max-width: 100%;
  }

  /* Item wrapper adjustments */
  .item-wrapper,
  .item-wrapper:last-child {
    margin: 0 auto;
    display: block;
    padding: 0 0 30px;
    text-align: left !important;
    max-width: 100%;
  }

  .item-wrapper img {
    min-width: 180px;
    margin: 0 auto;
  }
.icons .item-wrapper img {
    min-width: 100px;
    margin: 0 auto;
  }
  .item-wrapper h3 {
    font-size: 22px !important;
    margin-bottom: 10px;
  }

  .item-wrapper td p,
  .item-wrapper td h3 {    
    padding: 0 !important;
  }

  /* ========================================
     MODULE SPECIFIC ADJUSTMENTS
     ======================================== */
  /* Module 4 image adjustments */
  .module_4_image img {
    min-width: 160px;
  }

  h2.module_4_text {
    margin: 20px 0;
  }

  /* Module text padding reset */
  .module_4_text,
  .module_5_image_text,
  .module_6_video_text {
    padding: 0 !important;
  }

  /* Module button adjustments */
  .button.module_4_text,
  .button.module_5_image_text,
  .button.module_6_video_text {
    margin: 10px 0 0 !important;
  }

  /* Module 5 and 6 heading adjustments */
  h2.module_5_image_text,
  h2.module_6_video_text {
    margin: 20px 0 !important;
  }
/*===================================
   DARK MODULE
====================================*/

  div#dark-module .content{
      display:block;
      padding: 30px 20px;
    }
    .col50{
      width:100% !important;
    }

/*===================================
  LIGHT MODULE
====================================*/
   div#light-module .content{
        display:block !important;
      padding: 30px 20px !important;
    }
 div#light-module #columns{
       display:block !important;
      padding: 0 20px !important;
}

  /* ========================================
     TESTIMONIAL ADJUSTMENTS
     ======================================== */
  /* Testimonial button reset */
  .button.testimonial {
    padding: 0;
    margin: 0;
  }

  /* Testimonial image adjustments */
  .testimonial_image_td img {
    margin: 20px auto 0 !important;
  }

  /* Testimonial content and image layout */
  .testimonial_content,
  .testimonial_image {
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
  }

  .testimonial_image img {
    display: block !important;
    max-width: 200px !important;
    width: 75% !important;
    height: auto !important;
  }

  td.testimonial_image_td {
    padding: 0 !important;
  }

  h2.testimonial-title {
    margin-bottom: 20px;
  }

  /* ========================================
     CARD SYSTEM MOBILE ADJUSTMENTS
     ======================================== */
  /* Card spacing and padding reset */
  .card-1 {
    margin-bottom: 20px;
  }

  .card-1,
  .card-2 {
    padding: 0 !important;
  }

  .card {
    padding: 0 !important;
  }

  /* Card elements full width */
  .card::before,
  .card > div,
  .card > div img {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;

/* added */
      /*  left: 50% !important;
        margin-left: -350px
*/
  }
 .card > div img {
margin-left:calc(-50vw + 20px);
}
  /* Small card adjustments */
  .card.small-card.middle {
    margin-bottom: 20px;
  }

  .card.small-card,
  .card.small-card.middle,
  .card.small-card .content {
    padding: 0 !important;
  }

  .card .content p {
    padding: 0 20px !important;
  }

  /* Card image positioning */

  .card.small-card > div {
    padding: 0 !important;
    min-width: 100% !important;
    max-width: 1000px !important;
    overflow: hidden;
    min-height: 300px !important;
    width: 100% !important;
  }



  /* ========================================
     LAYOUT & CONTAINER ADJUSTMENTS
     ======================================== */
  /* Half-width elements become full width */
  div.half-width#content-column,
  div.half-width#form-column,
  div.half-width:first-child,
  div.half-width:last-child {
    padding: 0;
    max-width: 100%;
    width: 100%;
    clear: both;
    float: none;
  }

  /* Container adjustments */
  .container.image_details {
    width: auto;
    flex-direction: column;
    flex-flow: column wrap;
    display: block;
  }

  /* Grid header adjustments */
  .grid-header {
    padding: 0;
  }

  .grid-header img,
  div.banner-container {
    margin: 0 auto 30px !important;
  }

  /* ========================================
     IMAGE ICONS & MODULE 8 ADJUSTMENTS
     ======================================== */
  /* Module 8 image icons layout */
  .module_8_image_icons {
    display: block;
  }

  /* Image icons adjustments */
  .image_icons {
    text-align: center;
    max-width: 100%;
    width: 100%;
    float: none;
    padding: 0 10px;
    margin: 0 auto;
  }

  /* Module 5 image adjustments */
  .module_5_image img,
  .testimonial_image_td img {
    margin: 0 auto 0 0;
  }

  /* ========================================
     TYPOGRAPHY ADJUSTMENTS
     ======================================== */
  /* General typography reset */
  h2,
  p {
    padding: 0 !important;
  }

  h2 {
    margin-top: 0;
    margin-bottom: 20px;
  }

  p {
    margin: 10px 0 !important;
  }

  /* ========================================
     FORM ADJUSTMENTS
     ======================================== */
  /* Form group display */
  form .sc-form__group,
  .sc-form__group {
    display: block;
  }

  /* Form styling */
  .sc-form {  
   padding-bottom: 40px;
   max-width: 100% !important;
   height: auto !important;
  /* float: left; */
  }

  /* ========================================
     NAVIGATION ADJUSTMENTS
     ======================================== */
  /* Navigation content adjustments */
  .nav-content {
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0 20px !important;
    margin-right: auto !important;
    margin: 0 auto !important;
    align-items: normal;
  }

  /* Navigation header adjustments */
  .navHeader {
    padding: 0 0 5px 0 !important;
  }

  .navHeader .buttonstyles {
    padding: 10px 14px !important;
  }

  /* Header link hiding */
  .header-link {
    display: none !important;
  }

  /* Optional button block */
  .optnlBtnBlck {
    margin: 0 !important;
  }

  .optnlBtnBlck a {
    margin-left: 0;
  }

  /* ========================================
     FOOTER ADJUSTMENTS
     ======================================== */
  /* Footer list items */
  footer ul li {
    padding: 5px 0;
  }

  /* Footer container and elements */
  footer#footer,
  footer .container {
    min-height: 40px;
    margin: 40px 0 0 0;
    height: auto !important;
  }

  footer .container {
    margin: 0 !important;
  }

  footer div,
  footer li,
  footer ul {
    width: 100% !important;
    text-align: left !important;
    float: none !important;
  }

  #footer {
    padding: 20px 15px 20px 5px !important;
  }

  #footer-links {
    gap: 0 !important;
  }

  /* ========================================
     SPECIAL ELEMENTS ADJUSTMENTS
     ======================================== */
  /* Responsive table cells */
  td.responsive-td,
  td.stylingblock-content-wrapper {
    width: 100% !important;
    display: block !important;
  }

  /* Padding utilities */
  .plr0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* Special typography classes */
  .A1 {
    align-items: center;
    width: 100%;
    margin: 0 !important;
    float: left;
  }

  .A1 img {
    position: relative !important;
    left: inherit !important;
    top: inherit !important;
    margin-left: 30px;
  }

  .B1 {
    margin-bottom: 15px;
    margin-top: 15px;
    padding-top: 25px;
  }

  /* Overlay adjustments */
  img#new-overlay {
    top: 0 !important;
  }

  /* ========================================
     BANNER ADJUSTMENTS
     ======================================== */
  /* Banner container background */
  .banner-container {
    background-size: cover;
    background-color: #0000008f;
    background-blend-mode: hard-light;
  }

  /* Banner left part */
  .banner-lpart {
    width: 100%;
    padding: 30px 0 !important;
    z-index: 8;
  }
}

/* ========================================
   MOBILE MEDIUM - MAX WIDTH 480PX
   Small mobile devices
   ======================================== */
@media (max-width: 480px) {
  /* ========================================
     HEADER & LOGO ADJUSTMENTS
     ======================================== */
  /* Header height reduction */
  

  /* Body padding adjustment for smaller header */
  body {
    padding-top: 60px;
  }


 

* .module_5_image img{
min-width:100% !important;max-width:100% !important;}
  /* ========================================
     TYPOGRAPHY ADJUSTMENTS
     ======================================== */
  /* Heading size reduction */
  h2,
  h3 {
    font-size: 26px;
  }

  /* ========================================
     TESTIMONIAL ADJUSTMENTS
     ======================================== */
  /* Testimonial image minimum width */
  .testimonial_image img {
    min-width: 130px;
  }

  /* Testimonial content full width */
  .testimonial_content {
    max-width: 100%;
  }

  /* ========================================
     FOOTER ADJUSTMENTS
     ======================================== */
  /* Footer height auto */
  .footer,
  footer,
  footer .container {
    height: auto;
  }

  /* Footer layout adjustments */
  .footer-left,
  .footer-right {
    clear: both;
    float: none;
    display: block;
    width: 100%;
  }

  /* Footer padding reset */
  .footer {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ========================================
     NAVIGATION ADJUSTMENTS
     ======================================== */
  /* Navigation logo display */
  .nav-content .logo a {
    display: block;
  }

  /* ========================================
     RESPONSIVE TABLE ADJUSTMENTS
     ======================================== */
  /* Responsive table cells full width */
  .responsive-td {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
  }
}

/* ========================================
   MOBILE SMALL - MAX WIDTH 350PX
   Very small mobile devices
   ======================================== */
@media (max-width: 350px) {
  /* ========================================
     HEADER & NAVIGATION ADJUSTMENTS
     ======================================== */
  /* Body padding increase for navigation wrap */
  body {
    padding-top: 90px;
  }

  /* Navigation content padding adjustment */
  #myHeader .nav-content {
    padding: 0 10px 0 10px !important;

  }

  /* ========================================
     LOGO ADJUSTMENTS
     ======================================== */
  
}