.elementor-9808 .elementor-element.elementor-element-e0f2077{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9808 .elementor-element.elementor-element-e0f2077 .elementor-background-slideshow__slide__image{background-size:contain;background-position:top center;}.elementor-9808 .elementor-element.elementor-element-540f2d9 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-9808 .elementor-element.elementor-element-540f2d9 .hero-section-content p{color:#000000 !important;}.elementor-9808 .elementor-element.elementor-element-6b99a2d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:1;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9808 .elementor-element.elementor-element-6b99a2d::before, .elementor-9808 .elementor-element.elementor-element-6b99a2d > .elementor-background-video-container::before, .elementor-9808 .elementor-element.elementor-element-6b99a2d > .e-con-inner > .elementor-background-video-container::before, .elementor-9808 .elementor-element.elementor-element-6b99a2d > .elementor-background-slideshow::before, .elementor-9808 .elementor-element.elementor-element-6b99a2d > .e-con-inner > .elementor-background-slideshow::before, .elementor-9808 .elementor-element.elementor-element-6b99a2d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-9808 .elementor-element.elementor-element-66b0390 > .elementor-widget-container{margin:0px 0px -60px 0px;padding:0px 0px 0px 0px;}.elementor-9808 .elementor-element.elementor-element-66b0390 .section-header p{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-9808 .elementor-element.elementor-element-66b0390  .service-card h4 a{color:var( --e-global-color-secondary );}.elementor-9808 .elementor-element.elementor-element-d336b08{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-9808 .elementor-element.elementor-element-3b64dac{--display:flex;--justify-content:center;}.elementor-9808 .elementor-element.elementor-element-1016922{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-9808 .elementor-element.elementor-element-840c8fc .elementor-heading-title{color:#000000;}.elementor-9808 .elementor-element.elementor-element-bf38ace{width:100%;max-width:100%;}.elementor-9808 .elementor-element.elementor-element-8784cea{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--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-9808 .elementor-element.elementor-element-b790602{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9808 .elementor-element.elementor-element-bc427df > .elementor-widget-container{margin:-30px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-9808 .elementor-element.elementor-element-47633f3 > .elementor-widget-container{margin:-115px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-9808 .elementor-element.elementor-element-47633f3.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:1;}.elementor-9808 .elementor-element.elementor-element-47633f3 .contact-area .contact-form-wrap .contact-form-body .section-subtitle{padding:0px 0px 0px 0px;}.elementor-9808 .elementor-element.elementor-element-47633f3 .contact-area .contact-form-wrap .contact-form-body .section-title{margin:0px 0px 0px 0px;}.elementor-9808 .elementor-element.elementor-element-f4a45a7 > .elementor-widget-container{margin:0px 0px -50px 0px;padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-9808 .elementor-element.elementor-element-bc427df > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-9808 .elementor-element.elementor-element-47633f3 .contact-area .contact-form-wrap .contact-form-body .section-subtitle{margin:7px 7px 7px 7px;}.elementor-9808 .elementor-element.elementor-element-f4a45a7 > .elementor-widget-container{padding:0px 0px 0px 0px;}}@media(max-width:767px){.elementor-9808 .elementor-element.elementor-element-bc427df > .elementor-widget-container{margin:-20px 0px -30px 0px;padding:0px 0px 0px 0px;}.elementor-9808 .elementor-element.elementor-element-47633f3 > .elementor-widget-container{padding:14px 14px 14px 14px;}.elementor-9808 .elementor-element.elementor-element-47633f3.elementor-element{--align-self:center;}.elementor-9808 .elementor-element.elementor-element-47633f3 .contact-area .contact-form-wrap .contact-form-body .section-subtitle{margin:3px 3px 3px 3px;}.elementor-9808 .elementor-element.elementor-element-f4a45a7 > .elementor-widget-container{margin:-42px 0px 0px 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for synckpageshero, class: .elementor-element-540f2d9 *//*Start from here: This code will change the larger herosection height to smaller one */


body:not(.home) .hero-section-wrap {
    padding-bottom: 20px !important;
}

body:not(.home) .hero-section-wrap .hero-section-content-wrap {
    padding-top: 20px !important;
    padding-bottom: 40px !important;
}

body:not(.home) .hero-section-wrap .hero-section-content-wrap .hero-section-content {
    margin-bottom: 10px !important;
}

body:not(.home) .hero-section-wrap .hero-section-content-wrap .hero-section-content h2 {
    line-height: 1.05 !important;
    margin-bottom: 16px !important;
}

body:not(.home) .hero-section-wrap .hero-section-content-wrap .hero-section-content p {
    font-size: 18px !important;
    line-height: 1.45 !important;
    margin-bottom: 20px !important;
}

/*End from here: This code will change the larger herosection height to smaller one */



/* Basically the service section and other pages have title and description shown in one line or row below the code change them from single row to two rows one for title and second for description
Stack section headers and hero content site-wide (including home) */
.service-section-header.section-header,
.section-header.d-flex,
.hero-section-wrap .hero-section-content-wrap .hero-section-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

.service-section-header.section-header .left,
.service-section-header.section-header p,
.section-header .left,
.section-header p {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}


/*------------------------------*/
/*Start: The cards inside the service section donot have shadow the below code will give shadows to each cards*/

.services-list .service-card,
.service-card.simple-shadow,
.service-card.pop-in {
  padding-top: 52px !important;
  padding-bottom: 40px !important;
  box-shadow: 0 2px 15px rgba(123, 141, 139, 0.72) !important;
}
/*End: The cards inside the service section donot have shadow the below code will give shadows to each cards*/

/*------------------------------*//* End custom CSS */
/* Start custom CSS for synckhomev1service, class: .elementor-element-66b0390 */.services-list .service-card {
    padding: 26px 10px 26px 10px;
}

.section-header p {
  margin: 0px !important;
}

/* Responsive service grid fix */
/* Default: 3 cards per row */
.services-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
}


.service-card img {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
    width: 47px;
  }

@media (max-width: 1920px) {
  .service-card img {
    max-width: 100% !important;
    max-height: 60px !important;
    object-fit: contain !important;
  }
}

/* Tablet: 2 cards */
@media (max-width: 1024px) {
  .services-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  
  
}

/* Mobile: 1 card */
@media (max-width: 768px) {
  .services-list {
    grid-template-columns: 1fr !important;
  }
  
   .service-card img {
    height: 36px !important;
    margin-bottom: 25px !important;
  }
  
}

.services-list .service-card {
  flex: 1;
  align-items: flex-start !important;
  text-align: left !important;
}



.service-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}/* End custom CSS */
/* Start custom CSS for synckhomev1contact, class: .elementor-element-47633f3 *//* =========================================================
   Cyber Castellum — Contact Page Responsive Fix (v3)
   Tablet block rebuilt to match the working mobile logic:
   - resets absolute-positioned label/input transforms
     (this was the main bug — mobile does this, tablet didn't)
   - gives cards the same visual treatment as mobile
   - drops the cramped 2-col grid inside a 60%-width column
   ========================================================= */

/* ---------- TABLET (≤1024px) ---------- */
@media (max-width: 1024px) {

  /* --- HARD RESET: outer layout offsets --- */
  .contact-area,
  .custom-container,
  .custom-row,
  .contact-form-wrap,
  .contact-form-body,
  .contact-form,
  .wpcf7,
  .wpcf7 form,
  .input-row,
  .input-group,
  .contact-experience,
  .contact-infos {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .contact-area {
    overflow-x: hidden !important;
  }

  .custom-container {
    padding-left: 28px !important;
    padding-right: 28px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .custom-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Form takes full width on its own row */
  .contact-form-wrap {
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 24px !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.06) !important;
  }

  /* Experience list + Contact Info side by side, roughly even split
     (previous 60/35 split was too tight for a 2-col grid inside it) */
  .contact-experience {
    flex: 1 1 55% !important;
    width: auto !important;
    padding: 24px !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.06) !important;
    box-sizing: border-box !important;
  }

  .contact-infos {
    flex: 1 1 38% !important;
    width: auto !important;
    padding: 24px !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.06) !important;
    box-sizing: border-box !important;
  }

  /* Single-column list at tablet width — a 2-col grid inside a
     55%-wide column was too cramped and caused overlap/wrap issues */
  .contact-experience ul {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .contact-experience ul li {
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  }

  /* ---- FORM FIELDS: this was the actual bug.
     Desktop uses position:absolute + transform on labels/inputs
     for a floating-label effect. Mobile resets it; tablet never did,
     so on tablet labels/inputs stayed absolutely positioned and could
     overlap or sit off-place. ---- */
  .input-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
  }

  .input-group {
    flex: 1 1 220px !important;
    min-width: 0 !important;
  }

  .input-group p { margin: 0 !important; }

  .input-group label {
    font-size: 13px !important;
    display: block !important;
    margin: 0 0 4px !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
  }

  .wpcf7-form-control {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    padding: 12px 14px !important;
    min-height: 46px !important;
    margin: 0 !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
  }

  textarea.wpcf7-form-control {
    min-height: 110px !important;
  }

  .input-group.input-checkbox .wpcf7-list-item-label {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .input-group.input-checkbox label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .theme-btn {
    width: 100% !important;
    padding: 15px 20px !important;
    font-size: 16px !important;
  }

  /* ---- Contact Info: compact block, same pattern as mobile ---- */
  .contact-infos-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .contact-info img {
    width: 34px !important;
    height: 34px !important;
  }

  .contact-info h6 a,
  .contact-info h4 {
    font-size: 15px !important;
  }

  .contact-social-links {
    display: flex !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 6px 0 0 !important;
    list-style: none !important;
  }
}

/* ---------- SMALL TABLET / LARGE PHONE (≤900px) ----------
   At this width, contact-experience + contact-infos side-by-side
   gets too tight even at 1-column list — stack them like mobile. */
@media (max-width: 900px) {

  .custom-row {
    flex-direction: column !important;
  }

  .contact-experience,
  .contact-infos {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  .contact-experience ul {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ---------- MOBILE (≤767px) ---------- */
@media (max-width: 767px) {

  .custom-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    margin-top:40px;
  }

  .custom-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    margin: 0 !important;
  }

  .contact-form-wrap,
  .contact-experience,
  .contact-infos {
    flex: 0 0 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.06) !important;
  }

  .contact-form-body {
    padding: 4px !important;
  }

  .contact-form-body .section-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .input-row {
    display: flex !important;
    gap: 14px !important;
    margin-bottom: 12px !important;
  }

  .input-group {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .input-group p { margin: 0 !important; }

  .input-group label {
    font-size: 12px !important;
    display: block !important;
    margin: 0 0 4px !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
  }

  .wpcf7-form-control {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    padding: 11px 12px !important;
    min-height: 44px !important;
    margin: 0 !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
  }

  textarea.wpcf7-form-control {
    min-height: 90px !important;
  }

  .input-group.input-checkbox .wpcf7-list-item-label {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
  .input-group.input-checkbox label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .theme-btn {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
  }

  .contact-experience ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .contact-experience ul li {
    padding: 14px !important;
    margin: 0 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  .contact-experience ul li h2 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }

  .contact-experience ul li p {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  .contact-infos-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-left: 55px;
  }

  .contact-info img {
    width: 32px !important;
    height: 32px !important;
    margin-left: 50px;
  }

  .contact-info h6 a,
  .contact-info h4 {
    font-size: 14px !important;
    margin-left: 2px;
  }
  .contact-info h4{
      margin-left: 30px;
  }

  .contact-social-links {
    display: flex !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 6px 0 0 !important;
    list-style: none !important;
    margin-left: 5px;
  }
}

/* ---------- SMALL PHONES (≤400px) ---------- */
@media (max-width: 400px) {

  .custom-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .contact-form-wrap,
  .contact-experience,
  .contact-infos {
    padding: 16px !important;
  }

  .contact-experience ul {
    gap: 12px !important;
  }

  .contact-experience ul li {
    padding: 12px !important;
  }

  .input-row {
    flex-wrap: wrap !important;
  }

  .input-group {
    flex: 1 1 100% !important;
  }

  .contact-experience ul li h2 {
    font-size: 15px !important;
  }
}/* End custom CSS */