.elementor-594 .elementor-element.elementor-element-7edcf71{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-594 .elementor-element.elementor-element-2267679{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-594 .elementor-element.elementor-element-16310bc{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-ae2c81f *//* =========================================
   BARANGONLINE.COM — CONTACT US
   WHITE + NAVY + BLUE + ORANGE
========================================= */

.bo-contact{
  --bo-navy:#102a5c;
  --bo-blue:#164aa3;
  --bo-blue-light:#2f6fd0;
  --bo-orange:#f5a623;
  --bo-orange-dark:#d98b08;

  --bo-text:#334155;
  --bo-muted:#6b7280;
  --bo-line:rgba(16,42,92,.10);
  --bo-bg:#f7f9fc;
  --bo-white:#ffffff;

  width:100%;

  color:var(--bo-text);

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8faff 100%
    );

  font-family:'Poppins',Arial,sans-serif;

  overflow:hidden;
}

.bo-contact *{
  box-sizing:border-box;
}

.bo-contact__container{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
}


/* =========================================
   HERO
========================================= */

.bo-contact__hero{
  position:relative;

  padding:110px 0 85px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(47,111,208,.15),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(245,166,35,.10),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #f8faff 0%,
      #ffffff 45%,
      #f7f9fc 100%
    );

  border-bottom:
    1px solid var(--bo-line);
}

.bo-contact__hero::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:.26;

  background-image:
    linear-gradient(
      rgba(22,74,163,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(22,74,163,.025) 1px,
      transparent 1px
    );

  background-size:60px 60px;
}

.bo-contact__hero-glow{
  position:absolute;

  border-radius:50%;

  pointer-events:none;

  filter:blur(2px);
}

.bo-contact__hero-glow--one{
  width:350px;
  height:350px;

  left:-180px;
  top:-170px;

  background:
    radial-gradient(
      circle,
      rgba(47,111,208,.15),
      transparent 68%
    );
}

.bo-contact__hero-glow--two{
  width:300px;
  height:300px;

  right:-120px;
  bottom:-170px;

  background:
    radial-gradient(
      circle,
      rgba(245,166,35,.15),
      transparent 68%
    );
}

.bo-contact__hero-content{
  position:relative;

  z-index:2;

  max-width:820px;

  margin:0 auto;

  text-align:center;
}

.bo-contact__eyebrow{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  margin-bottom:22px;

  padding:9px 16px;

  border:
    1px solid rgba(22,74,163,.16);

  border-radius:999px;

  background:
    rgba(47,111,208,.07);

  color:var(--bo-blue);

  font-size:11px;

  font-weight:800;

  letter-spacing:1.8px;

  text-transform:uppercase;
}

.bo-contact__hero h1{
  margin:0;

  color:var(--bo-navy);

  font-size:
    clamp(48px,7vw,82px);

  line-height:.98;

  font-weight:800;

  letter-spacing:-3px;
}

.bo-contact__hero p{
  max-width:700px;

  margin:24px auto 0;

  color:#5c687a;

  font-size:16px;

  line-height:1.85;
}


/* =========================================
   CONTACT INFO CARDS
========================================= */

.bo-contact__info-section{
  position:relative;

  z-index:3;

  margin-top:-38px;

  padding-bottom:80px;
}

.bo-contact__info-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:18px;
}

.bo-contact__info-card{
  min-height:210px;

  padding:28px;

  display:flex;

  align-items:flex-start;

  gap:18px;

  border:
    1px solid var(--bo-line);

  border-radius:22px;

  background:
    rgba(255,255,255,.96);

  color:inherit;

  text-decoration:none;

  box-shadow:
    0 18px 45px rgba(16,42,92,.07);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.bo-contact__info-card:hover{
  transform:
    translateY(-5px);

  border-color:
    rgba(22,74,163,.20);

  box-shadow:
    0 24px 60px rgba(16,42,92,.11);
}

.bo-contact__info-icon{
  flex:0 0 54px;

  width:54px;
  height:54px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:17px;

  color:#ffffff;

  background:
    linear-gradient(
      135deg,
      var(--bo-navy),
      var(--bo-blue)
    );

  box-shadow:
    0 10px 25px rgba(22,74,163,.18);
}

.bo-contact__info-card:nth-child(2)
.bo-contact__info-icon{
  background:
    linear-gradient(
      135deg,
      var(--bo-blue),
      var(--bo-blue-light)
    );
}

.bo-contact__info-card:nth-child(3)
.bo-contact__info-icon{
  background:
    linear-gradient(
      135deg,
      var(--bo-orange-dark),
      var(--bo-orange)
    );
}

.bo-contact__info-icon svg{
  width:23px;
  height:23px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;
}

.bo-contact__info-card span{
  display:block;

  margin-bottom:6px;

  color:var(--bo-orange-dark);

  font-size:10px;

  font-weight:800;

  letter-spacing:1.2px;

  text-transform:uppercase;
}

.bo-contact__info-card strong{
  display:block;

  margin-bottom:8px;

  color:var(--bo-navy);

  font-size:16px;

  font-weight:800;

  line-height:1.45;

  word-break:break-word;
}

.bo-contact__info-card p{
  margin:0;

  color:var(--bo-muted);

  font-size:12px;

  line-height:1.75;
}


/* =========================================
   MAIN CONTENT
========================================= */

.bo-contact__main{
  padding:20px 0 90px;
}

.bo-contact__main-grid{
  display:grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:70px;

  align-items:start;
}


/* =========================================
   LEFT CONTENT
========================================= */

.bo-contact__content{
  position:sticky;

  top:150px;
}

.bo-contact__label{
  display:inline-flex;

  margin-bottom:15px;

  color:var(--bo-blue);

  font-size:11px;

  font-weight:800;

  letter-spacing:1.7px;

  text-transform:uppercase;
}

.bo-contact__content h2,
.bo-contact__location-head h2{
  margin:0;

  color:var(--bo-navy);

  font-size:
    clamp(36px,4vw,54px);

  line-height:1.05;

  font-weight:800;

  letter-spacing:-2px;
}

.bo-contact__content > p{
  max-width:520px;

  margin:20px 0 30px;

  color:#5d6878;

  font-size:15px;

  line-height:1.85;
}


/* =========================================
   HELP LIST
========================================= */

.bo-contact__help-list{
  display:flex;

  flex-direction:column;

  gap:12px;
}

.bo-contact__help-item{
  display:grid;

  grid-template-columns:52px 1fr;

  gap:15px;

  align-items:center;

  padding:17px 18px;

  border:
    1px solid var(--bo-line);

  border-radius:16px;

  background:#ffffff;

  box-shadow:
    0 8px 24px rgba(16,42,92,.035);
}

.bo-contact__help-item > span{
  width:42px;
  height:42px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:13px;

  background:
    rgba(22,74,163,.07);

  color:var(--bo-blue);

  font-size:12px;

  font-weight:900;
}

.bo-contact__help-item strong{
  display:block;

  margin-bottom:3px;

  color:var(--bo-navy);

  font-size:14px;

  font-weight:800;
}

.bo-contact__help-item p{
  margin:0;

  color:var(--bo-muted);

  font-size:12px;

  line-height:1.55;
}


/* =========================================
   FORM CARD
========================================= */

.bo-contact__form-card{
  position:relative;

  padding:38px;

  border:
    1px solid var(--bo-line);

  border-radius:26px;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfcff 100%
    );

  box-shadow:
    0 22px 70px rgba(16,42,92,.09);

  overflow:hidden;
}

.bo-contact__form-card::before{
  content:"";

  position:absolute;

  width:200px;
  height:200px;

  right:-90px;
  top:-100px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(47,111,208,.10),
      transparent 68%
    );

  pointer-events:none;
}

.bo-contact__form-heading{
  position:relative;

  z-index:2;

  margin-bottom:28px;
}

.bo-contact__form-heading > span{
  display:block;

  margin-bottom:8px;

  color:var(--bo-orange-dark);

  font-size:10px;

  font-weight:800;

  letter-spacing:1.6px;

  text-transform:uppercase;
}

.bo-contact__form-heading h3{
  margin:0 0 8px;

  color:var(--bo-navy);

  font-size:30px;

  line-height:1.2;

  font-weight:800;

  letter-spacing:-1px;
}

.bo-contact__form-heading p{
  margin:0;

  color:var(--bo-muted);

  font-size:13px;

  line-height:1.7;
}


/* =========================================
   FORM
========================================= */

.bo-contact__form{
  position:relative;

  z-index:2;
}

.bo-contact__field-row{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:14px;
}

.bo-contact__field{
  margin-bottom:16px;
}

.bo-contact__field label{
  display:block;

  margin-bottom:8px;

  color:var(--bo-navy);

  font-size:11px;

  font-weight:800;
}

.bo-contact__field input,
.bo-contact__field select,
.bo-contact__field textarea{
  width:100%;

  border:
    1px solid rgba(16,42,92,.11);

  border-radius:13px;

  outline:none;

  background:#f9fbff;

  color:#334155;

  font-family:inherit;

  font-size:13px;

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.bo-contact__field input,
.bo-contact__field select{
  height:52px;

  padding:0 16px;
}

.bo-contact__field textarea{
  min-height:150px;

  padding:15px 16px;

  resize:vertical;
}

.bo-contact__field input::placeholder,
.bo-contact__field textarea::placeholder{
  color:#9aa4b2;
}

.bo-contact__field input:focus,
.bo-contact__field select:focus,
.bo-contact__field textarea:focus{
  border-color:
    rgba(22,74,163,.45);

  background:#ffffff;

  box-shadow:
    0 0 0 4px rgba(22,74,163,.07);
}


/* =========================================
   SUBMIT
========================================= */

.bo-contact__submit{
  width:100%;

  min-height:54px;

  border:0;

  border-radius:999px;

  display:flex;

  align-items:center;
  justify-content:center;

  gap:10px;

  cursor:pointer;

  background:
    linear-gradient(
      135deg,
      var(--bo-navy),
      var(--bo-blue)
    );

  color:#ffffff;

  font-family:inherit;

  font-size:14px;

  font-weight:900;

  box-shadow:
    0 15px 32px rgba(22,74,163,.22);

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.bo-contact__submit:hover{
  transform:
    translateY(-2px);

  box-shadow:
    0 19px 42px rgba(22,74,163,.30);
}

.bo-contact__submit svg{
  width:20px;
  height:20px;

  fill:none;
  stroke:currentColor;

  stroke-width:2;

  stroke-linecap:round;
  stroke-linejoin:round;
}

.bo-contact__form-note{
  margin:13px 0 0;

  color:#8a94a3;

  font-size:10px;

  line-height:1.6;

  text-align:center;
}


/* =========================================
   QUICK CONTACT CTA
========================================= */

.bo-contact__quick{
  padding:0 0 90px;
}

.bo-contact__quick-card{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:40px;

  padding:42px;

  border-radius:26px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 95% 20%,
      rgba(47,111,208,.32),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #102a5c 0%,
      #164aa3 100%
    );

  box-shadow:
    0 24px 65px rgba(16,42,92,.18);
}

.bo-contact__quick-card > div:first-child{
  max-width:650px;
}

.bo-contact__quick-card span{
  display:block;

  margin-bottom:9px;

  color:#ffc65b;

  font-size:10px;

  font-weight:800;

  letter-spacing:1.6px;

  text-transform:uppercase;
}

.bo-contact__quick-card h2{
  margin:0;

  color:#ffffff;

  font-size:
    clamp(30px,4vw,45px);

  line-height:1.08;

  font-weight:800;

  letter-spacing:-1.5px;
}

.bo-contact__quick-card p{
  max-width:600px;

  margin:14px 0 0;

  color:rgba(255,255,255,.68);

  font-size:13px;

  line-height:1.75;
}

.bo-contact__quick-actions{
  flex-shrink:0;

  display:flex;

  gap:10px;

  flex-wrap:wrap;
}

.bo-contact__quick-btn{
  min-height:50px;

  padding:0 20px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  border-radius:999px;

  text-decoration:none;

  font-size:12px;

  font-weight:900;

  transition:
    transform .2s ease,
    background .2s ease;
}

.bo-contact__quick-btn:hover{
  transform:
    translateY(-2px);
}

.bo-contact__quick-btn--primary{
  color:var(--bo-navy);

  background:
    linear-gradient(
      135deg,
      var(--bo-orange),
      #ffd16d
    );
}

.bo-contact__quick-btn--outline{
  color:#ffffff;

  border:
    1px solid rgba(255,255,255,.20);

  background:
    rgba(255,255,255,.08);
}


/* =========================================
   LOCATION
========================================= */

.bo-contact__location{
  padding:0 0 100px;
}

.bo-contact__location-head{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:35px;

  margin-bottom:30px;
}

.bo-contact__location-head > div{
  max-width:600px;
}

.bo-contact__location-head > p{
  max-width:380px;

  margin:0;

  color:var(--bo-muted);

  font-size:13px;

  line-height:1.75;
}

.bo-contact__map{
  width:100%;

  height:450px;

  border:
    1px solid var(--bo-line);

  border-radius:24px;

  overflow:hidden;

  background:#eef3fa;

  box-shadow:
    0 18px 50px rgba(16,42,92,.07);
}

.bo-contact__map iframe{
  display:block;

  width:100%;
  height:100%;

  border:0;

  filter:
    saturate(.85)
    contrast(.96);
}


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

@media(max-width:950px){

  .bo-contact__hero{
    padding:90px 0 75px;
  }

  .bo-contact__info-grid{
    grid-template-columns:1fr;
  }

  .bo-contact__info-card{
    min-height:auto;
  }

  .bo-contact__main-grid{
    grid-template-columns:1fr;

    gap:45px;
  }

  .bo-contact__content{
    position:relative;

    top:auto;
  }

  .bo-contact__help-list{
    display:grid;

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .bo-contact__quick-card{
    flex-direction:column;

    align-items:flex-start;
  }

  .bo-contact__location-head{
    align-items:flex-start;

    flex-direction:column;
  }

}


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

@media(max-width:600px){

  .bo-contact__container{
    width:
      min(100% - 28px,1180px);
  }

  .bo-contact__hero{
    padding:70px 0 62px;
  }

  .bo-contact__eyebrow{
    font-size:9px;

    padding:8px 13px;

    margin-bottom:18px;
  }

  .bo-contact__hero h1{
    font-size:46px;

    letter-spacing:-2px;
  }

  .bo-contact__hero p{
    margin-top:18px;

    font-size:14px;

    line-height:1.75;
  }

  .bo-contact__info-section{
    margin-top:-25px;

    padding-bottom:60px;
  }

  .bo-contact__info-grid{
    gap:12px;
  }

  .bo-contact__info-card{
    padding:20px;

    border-radius:18px;

    gap:14px;
  }

  .bo-contact__info-icon{
    width:46px;
    height:46px;

    flex-basis:46px;

    border-radius:14px;
  }

  .bo-contact__info-icon svg{
    width:20px;
    height:20px;
  }

  .bo-contact__info-card strong{
    font-size:14px;
  }

  .bo-contact__main{
    padding:5px 0 65px;
  }

  .bo-contact__content h2,
  .bo-contact__location-head h2{
    font-size:36px;

    letter-spacing:-1.4px;
  }

  .bo-contact__help-list{
    grid-template-columns:1fr;
  }

  .bo-contact__help-item{
    grid-template-columns:45px 1fr;

    padding:15px;
  }

  .bo-contact__help-item > span{
    width:38px;
    height:38px;
  }

  .bo-contact__form-card{
    padding:24px 18px;

    border-radius:20px;
  }

  .bo-contact__form-heading h3{
    font-size:25px;
  }

  .bo-contact__field-row{
    grid-template-columns:1fr;

    gap:0;
  }

  .bo-contact__field input,
  .bo-contact__field select{
    height:50px;
  }

  .bo-contact__quick{
    padding-bottom:65px;
  }

  .bo-contact__quick-card{
    padding:26px 20px;

    border-radius:20px;

    gap:25px;
  }

  .bo-contact__quick-card h2{
    font-size:32px;
  }

  .bo-contact__quick-actions{
    width:100%;

    display:grid;

    grid-template-columns:1fr;
  }

  .bo-contact__quick-btn{
    width:100%;
  }

  .bo-contact__location{
    padding-bottom:70px;
  }

  .bo-contact__location-head{
    margin-bottom:22px;
  }

  .bo-contact__map{
    height:350px;

    border-radius:18px;
  }

}/* End custom CSS */