.elementor-1599 .elementor-element.elementor-element-7712d36{--display:flex;}.elementor-1599 .elementor-element.elementor-element-15b56a1{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-b4ee802 *//* === SHIFT HERO IMAGE LEFT (safe on all breakpoints) === */

/* desktop */
@media (min-width:1025px){
  .ci-about .hero-img-wrap{
    margin-left: -14px;                 /* move image column left */
    margin-right: 20px !important;   /* keeps overall width balanced */
  }
  .ci-about .hero-img{
    width: calc(100% + 24px);           /* keep right edge aligned */
  }
}

/* tablet */
@media (min-width:641px) and (max-width:1024px){
  .ci-about .hero-img-wrap{ margin-left: -18px; 
   margin-left: -4px !important;
   margin-right: 4px !important;   /* keeps overall width balanced */
   overflow: visible !important;       /* prevent clipping */
  }
  .ci-about .hero-img{ width: calc(100% + 18px); }
}

/* mobile */
@media (max-width:640px){
   .ci-about .hero-img-wrap{ margin-left: -18px; 
    margin-left: -14px !important;
    margin-right: 4px !important;   /* keeps overall width balanced */
   
  }
  .ci-about .hero-img{
    width: calc(100% + 12px) !important;
    height: auto !important;
    object-fit: contain !important;     /* no crop on phones */
    object-position: center !important;
    display: block !important;
  }
}


/* Desktop: tighten gap, nudge text left, push button right */
@media (min-width:1025px){
  .ci-about .hero-grid{ gap:24px; }                         /* was 40px */
  .ci-about .hero-grid > div:nth-child(2){
    margin-left:-12px;                                      /* text a bit left */
    display:flex; flex-direction:column;                    /* so button can align right */
  }
  .ci-about .btn--hero{
    align-self:flex-end;                                    /* move button to right edge */
    margin-top:32px;                                        /* keep breathing room */
  }
}

/* Tablet: same idea, slightly softer nudge */
@media (min-width:641px) and (max-width:1024px){
  .ci-about .hero-grid{ gap:24px; }
  .ci-about .hero-grid > div:nth-child(2){
    margin-left:-14px;
    display:flex; flex-direction:column;
  }
  .ci-about .btn--hero{ align-self:flex-end; }
}

/* Smaller Contact Us button */
.ci-about .btn.btn--hero{
  font-size:24px !important;     /* was 28px */
  padding:18px 24px !important;  /* was 26px 32px */
  border-radius:18px;            /* optional: slightly tighter corners */
  line-height:1.2;               /* keeps text nicely centered */
}

/* Optional: scale down a touch more on tablet & mobile */
@media (max-width:1024px){
  .ci-about .btn.btn--hero{ font-size:18px !important; padding:12px 18px !important; }
}
@media (max-width:640px){
  .ci-about .btn.btn--hero{ font-size:16px !important; padding:10px 16px !important; }
}


/* Contact Us: inset from the right a bit (desktop & tablet) */
@media (min-width:1025px){
  .ci-about .hero-grid > div:nth-child(2){ display:flex; flex-direction:column; }
  .ci-about .btn--hero{
    align-self:auto !important;   /* undo flex-end */
    margin-left:auto;             /* push to the right */
    margin-right:100px;            /* <-- adjust this inset */
    margin-top:32px;
  }
}
@media (min-width:641px) and (max-width:1024px){
  .ci-about .hero-grid > div:nth-child(2){ display:flex; flex-direction:column; }
  .ci-about .btn--hero{
    align-self:auto !important;
    margin-left:auto;
    margin-right:16px;            /* slightly smaller inset on tablet */
    margin-top:28px;
  }
}

/*-------------------------------------------------*/
/* Hide the full-width HR */
.ci-about .eyebrow-line{ display:none !important; }

.ci-about .eyebrow .blue::before,
.ci-about .eyebrow .blue::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 4px;                  /* line thickness */
  background: #FFD700;
  border-radius: 3px;
}
/* top line offset = thickness(4) + gap(6) */
.ci-about .eyebrow .blue::before{ bottom: 10px; }
/* bottom line */
.ci-about .eyebrow .blue::after{ bottom: 0; }

/* Slightly lighter on small screens */
@media (max-width:640px){
  .ci-about .eyebrow .blue{
    padding-bottom: 11px;       /* 3 + 5 + 3 */
  }
  .ci-about .eyebrow .blue::before,
  .ci-about .eyebrow .blue::after{
    height: 3px;                /* thinner lines on mobile */
  }
  .ci-about .eyebrow .blue::before{ bottom: 8px; }  /* 3 + 5 */
}
.ci-about .eyebrow .blue{ padding-bottom: 8px !important; }
.ci-about .eyebrow .blue::before{ bottom: 6px !important; } /* 4 + 1 */

/*-------------------------------------------------*/

/* Thin double gold line */
.ci-about .eyebrow .blue{
  position: relative;
  
  padding-bottom: 6px !important;          /* 2 + 3 + 2 */   /* 4 (top) + 6 (gap) + 4 (bottom) */
}
.ci-about .eyebrow .blue::before,
.ci-about .eyebrow .blue::after{
  height: 2px !important;                  /* line thickness */
  background: #FFD700 !important;
  border-radius: 2px !important;
}


/* Tablet-only: put "CHIPINTELLECT Technologies" on the next line */
@media (min-width:641px) and (max-width:1024px){
  .ci-about .eyebrow{ white-space:normal !important; }
  .ci-about .eyebrow .about{ display:block !important; margin-bottom:5px; }
  .ci-about .eyebrow .blue{ display:block !important; }  /* ensures a clean second line */
}


/* Tablet & Mobile: make underline match the exact text width */
@media (max-width:1024px){
  .ci-about .eyebrow .about{ display:block !important; }          /* keeps ABOUT on its own line */
  .ci-about .eyebrow .blue{
    display:inline-block !important;                               /* key: shrink to text width */
    position:relative;
  }
  .ci-about .eyebrow .blue::before,
  .ci-about .eyebrow .blue::after{
    left:0 !important; right:auto !important;                      /* no full-row stretch */
    width:100% !important;                                         /* exactly the span width */
    transform:none !important;                                     /* cancel any earlier scaleX */
  }
}

/* Reduce space between the last paragraph and the Contact Us button */
.ci-about .hero-grid > div > p:last-of-type{
  margin-bottom: 6px !important;   /* was 16px */
}

/* Make the button sit closer to the text */
@media (min-width:1025px){
  .ci-about .btn--hero{ margin-top: 10px !important; }  /* was ~32–60px */
}
@media (min-width:641px) and (max-width:1024px){
  .ci-about .btn--hero{ margin-top: 8px !important; }
}
@media (max-width:640px){
  .ci-about .btn--hero{ margin-top: 8px !important; }
}


/* Tighten space between "Contact Us" and the gradient band */

/* Desktop */
@media (min-width:1025px){
  .ci-about .hero{ padding-block: 40px 20px !important; }   /* was 40px 60px */
  .ci-about .hero .container{ padding-bottom: 8px !important; }
  .ci-about .band{ margin-top: -8px !important; }           /* pull band up slightly */
}

/* Tablet */
@media (min-width:641px) and (max-width:1024px){
  .ci-about .hero{ padding-block: 32px 16px !important; }
  .ci-about .hero .container{ padding-bottom: 6px !important; }
  .ci-about .band{ margin-top: -6px !important; }
}

/* Mobile */
@media (max-width:640px){
  .ci-about .hero{ padding-block: 28px 14px !important; }
  .ci-about .hero .container{ padding-bottom: 4px !important; }
  .ci-about .band{ margin-top: -4px !important; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cc86e85 *//* === SHIFT HERO IMAGE LEFT (safe on all breakpoints) === */

/* desktop */
@media (min-width:1025px){
  .ci-about .hero-img-wrap{
    margin-left: -14px;                 /* move image column left */
    margin-right: 20px !important;   /* keeps overall width balanced */
  }
  .ci-about .hero-img{
    width: calc(100% + 24px);           /* keep right edge aligned */
  }
}

/* tablet */
@media (min-width:641px) and (max-width:1024px){
  .ci-about .hero-img-wrap{ margin-left: -18px; 
   margin-left: -4px !important;
   margin-right: 4px !important;   /* keeps overall width balanced */
   overflow: visible !important;       /* prevent clipping */
  }
  .ci-about .hero-img{ width: calc(100% + 18px); }
}

/* mobile */
@media (max-width:640px){
   .ci-about .hero-img-wrap{ margin-left: -18px; 
    margin-left: -14px !important;
    margin-right: 4px !important;   /* keeps overall width balanced */
   
  }
  .ci-about .hero-img{
    width: calc(100% + 12px) !important;
    height: auto !important;
    object-fit: contain !important;     /* no crop on phones */
    object-position: center !important;
    display: block !important;
  }
}


/* Desktop: tighten gap, nudge text left, push button right */
@media (min-width:1025px){
  .ci-about .hero-grid{ gap:24px; }                         /* was 40px */
  .ci-about .hero-grid > div:nth-child(2){
    margin-left:-12px;                                      /* text a bit left */
    display:flex; flex-direction:column;                    /* so button can align right */
  }
  .ci-about .btn--hero{
    align-self:flex-end;                                    /* move button to right edge */
    margin-top:32px;                                        /* keep breathing room */
  }
}

/* Tablet: same idea, slightly softer nudge */
@media (min-width:641px) and (max-width:1024px){
  .ci-about .hero-grid{ gap:24px; }
  .ci-about .hero-grid > div:nth-child(2){
    margin-left:-14px;
    display:flex; flex-direction:column;
  }
  .ci-about .btn--hero{ align-self:flex-end; }
}

/* Smaller Contact Us button */
.ci-about .btn.btn--hero{
  font-size:24px !important;     /* was 28px */
  padding:18px 24px !important;  /* was 26px 32px */
  border-radius:18px;            /* optional: slightly tighter corners */
  line-height:1.2;               /* keeps text nicely centered */
}

/* Optional: scale down a touch more on tablet & mobile */
@media (max-width:1024px){
  .ci-about .btn.btn--hero{ font-size:18px !important; padding:12px 18px !important; }
}
@media (max-width:640px){
  .ci-about .btn.btn--hero{ font-size:16px !important; padding:10px 16px !important; }
}


/* Contact Us: inset from the right a bit (desktop & tablet) */
@media (min-width:1025px){
  .ci-about .hero-grid > div:nth-child(2){ display:flex; flex-direction:column; }
  .ci-about .btn--hero{
    align-self:auto !important;   /* undo flex-end */
    margin-left:auto;             /* push to the right */
    margin-right:100px;            /* <-- adjust this inset */
    margin-top:32px;
  }
}
@media (min-width:641px) and (max-width:1024px){
  .ci-about .hero-grid > div:nth-child(2){ display:flex; flex-direction:column; }
  .ci-about .btn--hero{
    align-self:auto !important;
    margin-left:auto;
    margin-right:16px;            /* slightly smaller inset on tablet */
    margin-top:28px;
  }
}

/*-------------------------------------------------*/
/* Hide the full-width HR */
.ci-about .eyebrow-line{ display:none !important; }

.ci-about .eyebrow .blue::before,
.ci-about .eyebrow .blue::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 4px;                  /* line thickness */
  background: #FFD700;
  border-radius: 3px;
}
/* top line offset = thickness(4) + gap(6) */
.ci-about .eyebrow .blue::before{ bottom: 10px; }
/* bottom line */
.ci-about .eyebrow .blue::after{ bottom: 0; }

/* Slightly lighter on small screens */
@media (max-width:640px){
  .ci-about .eyebrow .blue{
    padding-bottom: 11px;       /* 3 + 5 + 3 */
  }
  .ci-about .eyebrow .blue::before,
  .ci-about .eyebrow .blue::after{
    height: 3px;                /* thinner lines on mobile */
  }
  .ci-about .eyebrow .blue::before{ bottom: 8px; }  /* 3 + 5 */
}
.ci-about .eyebrow .blue{ padding-bottom: 8px !important; }
.ci-about .eyebrow .blue::before{ bottom: 6px !important; } /* 4 + 1 */

/*-------------------------------------------------*/

/* Thin double gold line */
.ci-about .eyebrow .blue{
  position: relative;
  
  padding-bottom: 6px !important;          /* 2 + 3 + 2 */   /* 4 (top) + 6 (gap) + 4 (bottom) */
}
.ci-about .eyebrow .blue::before,
.ci-about .eyebrow .blue::after{
  height: 2px !important;                  /* line thickness */
  background: #FFD700 !important;
  border-radius: 2px !important;
}


/* Tablet-only: put "CHIPINTELLECT Technologies" on the next line */
@media (min-width:641px) and (max-width:1024px){
  .ci-about .eyebrow{ white-space:normal !important; }
  .ci-about .eyebrow .about{ display:block !important; margin-bottom:5px; }
  .ci-about .eyebrow .blue{ display:block !important; }  /* ensures a clean second line */
}


/* Tablet & Mobile: make underline match the exact text width */
@media (max-width:1024px){
  .ci-about .eyebrow .about{ display:block !important; }          /* keeps ABOUT on its own line */
  .ci-about .eyebrow .blue{
    display:inline-block !important;                               /* key: shrink to text width */
    position:relative;
  }
  .ci-about .eyebrow .blue::before,
  .ci-about .eyebrow .blue::after{
    left:0 !important; right:auto !important;                      /* no full-row stretch */
    width:100% !important;                                         /* exactly the span width */
    transform:none !important;                                     /* cancel any earlier scaleX */
  }
}

/* Reduce space between the last paragraph and the Contact Us button */
.ci-about .hero-grid > div > p:last-of-type{
  margin-bottom: 6px !important;   /* was 16px */
}

/* Make the button sit closer to the text */
@media (min-width:1025px){
  .ci-about .btn--hero{ margin-top: 10px !important; }  /* was ~32–60px */
}
@media (min-width:641px) and (max-width:1024px){
  .ci-about .btn--hero{ margin-top: 8px !important; }
}
@media (max-width:640px){
  .ci-about .btn--hero{ margin-top: 8px !important; }
}


/* Tighten space between "Contact Us" and the gradient band */

/* Desktop */
@media (min-width:1025px){
  .ci-about .hero{ padding-block: 40px 20px !important; }   /* was 40px 60px */
  .ci-about .hero .container{ padding-bottom: 8px !important; }
  .ci-about .band{ margin-top: -8px !important; }           /* pull band up slightly */
}

/* Tablet */
@media (min-width:641px) and (max-width:1024px){
  .ci-about .hero{ padding-block: 32px 16px !important; }
  .ci-about .hero .container{ padding-bottom: 6px !important; }
  .ci-about .band{ margin-top: -6px !important; }
}

/* Mobile */
@media (max-width:640px){
  .ci-about .hero{ padding-block: 28px 14px !important; }
  .ci-about .hero .container{ padding-bottom: 4px !important; }
  .ci-about .band{ margin-top: -4px !important; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-15b56a1 *//* ===== Base Layout (Desktop & Tablet) ===== */
.ci-about .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

.ci-about .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.ci-about .hero-img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.ci-about .eyebrow {
  font-size: 22px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ci-about .eyebrow .blue { color: #1e73be; }

.ci-about .eyebrow-line {
  width: 100px;
  height: 6px;
  background: linear-gradient(#FFD700, #FFD700);
  border: 0;
  margin: 8px 0 20px;
}

.ci-about h1 {
  font-size: 32px;
  margin-bottom: 16px;
  color: #0a2a4a;
}

.ci-about .intro-text {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.ci-about .btn {
  display: inline-block;
  padding: 14px 24px;
  background: #1e73be;
  color: #fff;
  font-size: 18px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(30,115,190,.3);
}

.ci-about .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.ci-about .card {
  background: #f9f9f9;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.05);
}

.ci-about .card h3 {
  font-size: 22px;
  margin-bottom: 12px;
}

.ci-about .card ul {
  padding-left: 18px;
  margin: 0;
}
.ci-about .card li {
  font-size: 16px;
  margin-bottom: 8px;
}

/* ===== Mobile Overrides (max-width: 640px) ===== */
@media (max-width: 640px) {
  .ci-about .container { padding: 30px 16px; }

  .ci-about .hero-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .ci-about .hero-img {
    max-width: 480px;
    margin: 0 auto;
    border-radius: 12px;
  }

  .ci-about .eyebrow { font-size: 18px; }
  .ci-about .eyebrow .about { display: block; font-size: 20px; }
  .ci-about .eyebrow .blue { display: block; margin-top: 4px; font-size: 16px; }

  .ci-about .eyebrow-line {
    width: 50%;
    margin: 10px auto;
  }

  .ci-about h1 {
    font-size: 22px;
    line-height: 1.3;
  }

  .ci-about .intro-text {
    font-size: 15px;
    line-height: 1.6;
  }

  .ci-about .btn {
    font-size: 16px;
    padding: 12px 18px;
    margin: 0 auto;
  }

  .ci-about .cards {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ci-about .card {
    text-align: center;
    padding: 20px;
  }

  .ci-about .card ul {
    list-style-position: inside;
    padding-left: 0;
    text-align: left;
    display: inline-block;
  }

  .ci-about .card li {
    font-size: 14px;
  }
}/* End custom CSS */