@media screen and (max-width: 1100px) {
  .background {
    margin-bottom: 12vw !important;
  }
}
/* innovate styling */

@media screen and (max-width: 1035px) {
  .innovate_img img {
    width: 180px;
    max-width: 100%;
    aspect-ratio: 1/0.5 !important;
    object-fit: contain;
  }
  .innovate_content {
    padding: 20px 1.675vw 70px 1.675vw !important;
  }
}

@media screen and (max-width: 1009px) {
  .tribe_heading2 {
    font-size: 12px !important;
  }
  .tribe_discription2 {
    font-size: 12px !important;
  }
}


@media screen and (max-width: 768px) {
  .nav-list .current {
    color: black !important;
  }
}

@media screen and (max-width: 568px) {
  .big_logo {
    width: 22vw !important;
  }

  .linkedin {
    font-size: 10px !important;
  }

  .innovate_text {
    font-size: 12px !important;
    line-height: 18px !important;
  }
}

@media screen and (max-width: 444px) {
  .contact_dis2 {
    margin-top: 10px !important;
    margin-bottom: 0px !important;
  }
}


/* content below  */
/*==========================
      CONTACT SECTION
===========================*/

.contact-section{
    padding:80px 0;
    background:#fff;
}

.contact-wrapper{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:60px;
    align-items:center;
}

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

.eyebrow{
    display:inline-block;
    background:#3B8DBC !important;
    color:#fff;
    padding:8px 18px;
    border-radius:40px;
    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
    margin-bottom:20px;
}

.headline{
    font-size:48px;
    font-weight:700;
    color:#000;
    line-height:1.2;
    margin-bottom:20px;
}

.accent{
    color:#3B8DBC !important;
}

.hero-sub{
    color:#555;
    line-height:30px;
    font-size:17px;
    margin-bottom:35px;
}

/*==========================
        STATS
===========================*/

.stat-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-bottom:35px;
}

.stat{
    background:#fff;
    border-radius:15px;
    padding:22px;
    border:1px solid #eee;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    transition:.4s;
}

.stat:hover{
    transform:translateY(-6px);
}

.num{
    color:#3B8DBC !important;
    font-size:26px;
    font-weight:700;
}

.label{
    color:#444;
    margin-top:4px;
    font-size:15px;
}

/*==========================
      CONTACT CARD
===========================*/

.contact-cards{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.contact-card{
    display:flex;
    align-items:center;
    gap:20px;
    background:#fff;
    padding:18px 22px;
    border-radius:15px;
    border:1px solid #eee;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.4s;
}

.contact-card:hover{
    transform:translateX(8px);
}

.contact-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#3B8DBC !important;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:24px;
}

.clabel{
    font-size:14px;
    color:#666;
    margin-bottom:5px;
}

.cval{
    font-size:15px;
    font-weight:600;
    color:#000;
}

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

.form-panel{

    background:#fff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
    border:1px solid #eee;

}

.form-panel h2{

    color:#000;
    font-size:34px;
    font-weight:700;
    margin-bottom:10px;

}

.form-sub{

    color:#666;
    margin-bottom:30px;

}

.field{

    margin-bottom:12px;

}

.field-row{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;

}

.field label{

    display:block;
    margin-bottom:10px;
    font-weight:600;
    color:#111;
        font-size: 14px;


}

.req{

    color:#3B8DBC !important;

}

/*==========================
      INPUTS
===========================*/

.input-wrap{

    position:relative;

}

.input-wrap .icon{

    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:#3B8DBC !important;
    font-size:18px;

}

.input-wrap input{

    width:100%;
    height:58px;
    padding-left:55px;
    border-radius:12px;
    border:1px solid #ddd;
    outline:none;
    transition:.4s;
    font-size:15px;
    background:#fff;

}

.input-wrap select{

    width:100%;
    height:58px;
    border-radius:12px;
    border:1px solid #ddd;
    outline:none;
    padding:0 20px;
    background:#fff;
    transition:.4s;

}

textarea{

    width:100%;
    border:1px solid #ddd;
    border-radius:12px;
    padding:18px;
    resize:none;
    outline:none;
    background:#fff;
    transition:.4s;
    min-height:100px;

}

.input-wrap input:focus,
.input-wrap select:focus,
textarea:focus{

    border-color:#3B8DBC !important;
    box-shadow:0 0 0 4px rgba(59,141,188,.12);

}

/*==========================
      FILE
===========================*/

.upload-box{

    border:2px dashed #3B8DBC;
    border-radius:15px;
    text-align:center;
    padding:18px;
    background:#f8fcfe;

}

.upload-box input{

    display:none;

}

.upload-box label{

    cursor:pointer;
    color:#3B8DBC;
    font-weight:600;

}

#file-name-box{

    margin-top:10px;
    color:#555;

}




/*==========================
      AGREEMENT
===========================*/

.agree-row{

    display:flex;
    gap:10px;
 
    margin:13px 0;

}

.agree-row label{

    margin:0;
    color:#555;

}

.secure-note{

      color: #3B8DBC;
    font-size: 13px;
    margin-bottom: 14px;

}

/*==========================
        BUTTON
===========================*/

.btn-send{

    width:100%;
    height:60px;
    background:#3B8DBC !important;
    color:#fff;
    border:none;
    border-radius:12px;
    font-size:18px;
    font-weight:600;
    transition:.4s;

}

.btn-send:hover{

    background:#2d7ca8 !important;

}

.error{

    color:red;
    font-size:13px;
    margin-top:8px;

}

#word-count{

     margin-top: 0px;
    color: #777;
    font-size: 12px;

}


.brochure-btn{
    margin-top:30px;
}

.download-btn{

    width:100%;
    height:55px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    text-decoration:none;

    background:#3B8DBC !important;
    color:#fff !important;

    border-radius:12px;

    font-size:15px;
    font-weight:600;

    transition:.35s;

    box-shadow:0 10px 30px rgba(59,141,188,.18);

}

.download-btn:hover{

    background:#2e7ba5 !important;
    color:#fff;
    transform:translateY(-3px);

}

.download-btn i{

    font-size:17px;

}

.bottom-grid{
        background: #e9ebf3;
    padding: 34px 0;

}
 .foot-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }
  .foot-item{
    display:flex; align-items:center; gap:12px;
  }
  .foot-item .ficon{
    width:42px; height:42px; border-radius:50%;
    background:var(--bg-panel);
    border:1px solid #000;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; color:#7d9bff; font-size:17px;
  }
  .foot-item .ftitle{ font-weight:700; font-size:14px;}
  .foot-item .fsub{ font-size:12.5px; color: #000;}

 /* ---------- LOGOS STRIP ---------- */
  .logos{
    background:#e9ebf3;
    padding:34px 0;
  }
  .logos .container{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:22px;
  }
  .logos .eyebrow-dark{
    font-size:12px; font-weight:700; letter-spacing:0.1em;
    color:#7c8296;
  }
  .logo-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:48px;
    color:#4b5165;
    font-weight:700;
    font-size:19px;
  }
  .logo-grid span{ display:flex; align-items:center; gap:8px; opacity:0.75;}

/*==========================
      RESPONSIVE
===========================*/

@media(max-width:1200px){

.contact-wrapper{

grid-template-columns:1fr;
gap:40px;

}

}

@media(max-width:768px){

.field-row{

grid-template-columns:1fr;

}

.headline{

font-size:36px;

}

.form-panel{

padding:25px;

}

.contact-card{

padding:15px;

}

.contact-icon{

width:50px;
height:50px;
font-size:20px;

}

}

@media(max-width:576px){
 .foot-grid{     grid-template-columns: repeat(2, 1fr); }
.innovate_text p{
        padding: 10px 30px;

}

.innovate_content {
        padding: 20px 1.675vw 0px 1.675vw !important;
    }
    .oname {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}
.otitle {
    color: #6ea8ff;
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 4px;
}
.oloc {
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
    line-height: 22px;
    margin-bottom: 10px;
}

.headline{

font-size:30px;

}

.hero-sub{

font-size:15px;
line-height:28px;

}

.form-panel{

padding:20px;

}

}

/*==========================
        OUR OFFICES
==========================*/

.offices {
    padding: 70px 0;
    background: #fff;
}

.offices-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 40px;
    align-items: start;
}

/*==========================
        MAP
==========================*/

.map-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.08);
    min-height: 520px;
    background: #fff;
}

.map-card iframe {
    width: 100%;
    height: 100%;
    min-height: 520px;
    border: 0;
}



/*==========================
    RIGHT CONTENT
==========================*/

.offices-right h3 {
    font-size: 34px;
    color: #000;
    font-weight: 700;
    margin-bottom: 8px;
}

.offices-right .sub {
    color: #000;
    margin-bottom: 30px;
    font-size: 16px;
}

/*==========================
      OFFICE CARDS
==========================*/

.office-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.office-card {
    overflow: hidden;
    border-radius: 16px;
    background: #0d1326;
    border: 1px solid rgba(255,255,255,.08);
    transition: .35s;
}

.office-card:hover {
    transform: translateY(-8px);
    border-color: #3d6bff;
    box-shadow: 0 20px 40px rgba(0,0,0,.3);
}

.office-img {
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.office-body {
    padding: 20px;
}

.otitle {
    color: #6ea8ff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.oname {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.oloc {
    color: rgba(255,255,255,.65);
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 14px;
}

.odir {
    color: #6ea8ff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
}

.office-bottom {
    margin-top: 35px;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.office-bottom-box h5 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 10px;
}

.office-bottom-box p {
    color: rgba(255,255,255,.75);
    line-height: 28px;
    margin: 0;
}

/*==========================
      RESPONSIVE
==========================*/

@media(max-width:1200px){

    .offices-grid{
        grid-template-columns:1fr;
    }

    .map-card{
        min-height:450px;
    }

    .map-card iframe{
        min-height:450px;
    }

}

@media(max-width:768px){

    .offices{
        padding:60px 0;
    }

    .office-cards{
        grid-template-columns:1fr;
    }

    .offices-right h3{
        font-size:28px;
    }

    .map-card{
        min-height:350px;
    }

    .map-card iframe{
        min-height:350px;
    }

    .office-bottom{
        flex-direction:column;
        gap:20px;
    }

}

@media(max-width:576px){

    .map-pin-label{
        left:10px;
        top:10px;
        max-width:200px;
        font-size:12px;
        padding:10px;
    }

    .office-img{
        height:180px;
    }

    .office-body{
        padding:16px;
    }

}
/* tribe styling */

@media screen and (max-width: 568px) {
  .big_logo {
    width: 20vw !important;
  }
  .map_heading {
    font-size: 24px !important;
    line-height: 30px !important;
  }

  .map_discription {
    font-size: 18px !important;
    line-height: 18px !important;
    margin: 20px 0 !important;
  }

  .heading_one {
    font-size: 24px !important;
    line-height: 30px !important;
  }

  .tribe_btn {
    font-size: 10px !important;
  }
}

.tribe {
  padding: 6.702vw 1.675vw;
}

.linkedin {
  color: #058acc !important;
  font-size: 12px;
}
.country_svg {
  width: 30px;
}
.tribe_heading {
  color: #000;
  text-align: left;
 
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  text-transform: capitalize;
}

.tribe_heading2 {
  color: #000;
 
  font-size: 1.206vw;
  font-style: normal;
  font-weight: 600;
  text-transform: capitalize;
}

.tribe_discription2 {
  color: #000;
 
  text-transform: capitalize;
  font-size: 1.206vw;
  font-style: normal;
  font-weight: 600;
}

.tribe_discription {
  color: #000;
 
  text-transform: capitalize;
  font-size: 18px;
  text-align: left;
  font-style: normal;
  font-weight: 400;
  margin: 3.351vw 0px;
  line-height: 20px;
  text-transform: capitalize;
}

.tribe_flexbox {
  display: flex;
  flex-wrap: nowrap;
}

.tribe_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 380px;
      gap: 14px;
  padding: 20px 0px 20px 0px;
  text-align: left;
}

.tribe_div_img {
  object-fit: cover;
  object-position: top;
  aspect-ratio: 1/1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.tribe_btn {
  border-radius: 6px;
  background: #058acc;
  color: #fff;
 
  text-transform: capitalize;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  padding: 10px 16px;
  border: none;
  cursor: pointer;
}

/* innovate styling */
.innovate {
  padding: 0px 1.675vw 2.691vw 1.675vw;
}

.innovate_content {
  overflow: hidden;
  padding: 20px 1.675vw 5.702vw 1.675vw;
}

.innovate_grid {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: center;
}
.innovate_grid > a {
  display: flex;
  flex-direction: column;
  width: 25%;
  height: 270px;
  align-items: center;
  justify-content: start;
  text-align: center;
  padding: 0px 1.34vw 1.34vw 1.34vw;
  border-radius: 16px;
  background-color: #fff;
  text-decoration: none !important;
  box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.16);
}
@media (max-width: 991px) {
  .innovate_grid {
    margin-bottom: 45px !important;
    flex-wrap: wrap;
  }
  .innovate_grid > a {
    width: 43%;
    height: 200px;
  }
}
@media (max-width: 480px) {
  .innovate_grid > a {
    width: 100%;
    height: 170px;
  }
}

.innovate_img img {
  width: 180px;
  max-width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
}
.tribe_schdule {
  width: 110px !important;
}
.innovate_text p {
  color: #000;
  text-align: center;
 
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  text-transform: capitalize;
}

.heading_one {
  color: #252525;
  text-align: center;
  font-size: 2.5rem;
 
  font-style: normal;
  font-weight: 700;
  text-transform: capitalize;
}

@media screen and (max-width: 426px) {
  .cpylogo img {
    width: 20vw !important;
    height: 18vw;
    object-fit: contain;
    aspect-ratio: 4/2;
  }
  #cpylogo img:nth-child(4) {
    width: 24vw !important;
    height: 18vw;
    object-fit: contain;
    aspect-ratio: 4/2;
  }
}

/* map styling */

.map {
  padding: 2vw 9.675vw 0.702vw 10.675vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.map_left {
  width: 40%;
}

.map_right {
  display: grid;
  grid-template-columns: 50% 50%;
  width: 60%;
  gap: 1.34vw;
}

.map_div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}

.map_div img {
  aspect-ratio: 1/1;
  object-fit: contain;
  width: 3.351vw;
}

.map_text {
  color: #058acc;
 
  text-transform: capitalize;
  font-size: 18px;
  font-weight: 600;
  margin: 1.005vw 0px;
}

.map_dis {
  color: #000;
  text-align: center;
 
  text-transform: capitalize;
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
}

@media screen and (max-width: 568px) {
  .map {
    flex-direction: column !important;
    display: flex;
    gap: 20px !important;
    justify-content: center !important;
    align-items: center !important;
    padding:20px  !important
  }
  .map_div img {
    width: 25px !important;
  }
  .map_left {
    width: 100% !important;
    height: 300px !important;
  }
  .map_right {
    width: 100% !important;
  }

  .map_text {
    font-size: 14px !important;
  }

  .map_dis {
    font-size: 12px !important;
    line-height: 18px !important;
  }
}
