/* D2R Global Consulting - small additions on top of the Webteck theme */

/* Brand palette. The theme drives ~760 colour declarations off --theme-color
   and ~300 off --title-color, so overriding the variables re-skins everything. */
:root {
  --theme-color: #5c9bd6;
  --theme-color2: #5c9bd6;
  --title-color: #202c61;
}

/* The one heading colour the theme hardcodes instead of using the variable */
.checklist.style4 li {
  color: var(--title-color);
}

/* The theme lets .has-shadow sliders overflow so card shadows stay visible,
   which lets neighbouring testimonial slides bleed into the quote card */
.testi-block-slide {
  overflow: hidden;
}

/* Real D2R brand logo replaces the theme's masked SVG, so it needs its own
   sizing in the header, mobile drawer and footer */
.header-logo img,
.mobile-logo img,
.about-logo img {
  max-height: 70px;
  width: auto;
}

/* The real team and client portraits arrive at wildly different dimensions
   (LinkedIn crops, PNG cut-outs, 300x300 thumbs) - pin them to one shape */
.team-card2 .team-img img,
.team-details-img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
}

/* Real quotes differ in length; match the card heights so the row reads as
   one band instead of stepping */
#testi-sec .swiper-slide {
  height: auto;
}

#testi-sec .testi-grid {
  height: 100%;
}

/* Service cards sit in a grid rather than a slider, so let the description
   absorb the slack and keep every "Read More" on the same line */
#service-sec .service-3d {
    display: flex;
    flex-direction: column;
}

#service-sec .service-3d_content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

#service-sec .service-3d_text {
    flex: 1 1 auto;
}

/* the flex column would otherwise stretch the button to the card width */
#service-sec .service-3d_content .th-btn {
    align-self: center;
}

/* All seven custom service icons are edge-to-edge artwork on a 116px-tall
   canvas, so a shared height keeps them optically level with varying widths */
#service-sec .service-3d_icon img {
    height: 100px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
}

/* "Our Work" uses the numbered service-card from service.html; case-study
   titles run longer than the template's, so even out the card heights */
#project-sec .service-card {
    display: flex;
    flex-direction: column;
}

#project-sec .service-card_text {
    flex: 1 1 auto;
}

/* the flex column would otherwise stretch the button to the card width */
#project-sec .service-card .th-btn {
    align-self: flex-start;
}

/* two-line case-study titles otherwise run under the watermark number */
#project-sec .service-card .box-title {
    position: relative;
    padding-right: 30px;
}

/* Real client logos are cut-outs at wildly different aspect ratios (wide
   wordmarks next to square emblems), so cap both axes and centre them to
   keep every row on one optical line */
.brand-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
}

.brand-box img {
    max-height: 62px;
    max-width: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 35 logos laid out 5-up need a tile to sit in, or the rows read as drift;
   borrowed from the theme's own .brand-box1-1 treatment */
#faq-sec .brand-box {
    height: 100%;
    padding: 20px 16px;
    background-color: var(--white-color);
    border: 1px solid #edf0f4;
    border-radius: 20px;
    transition: 0.4s ease-in-out;
}

#faq-sec .brand-box img {
    transform: scale(0.92);
    transition: 0.4s ease-in-out;
}

#faq-sec .brand-box:hover {
    border-color: var(--theme-color);
    box-shadow: 0px 10px 30px rgba(8, 14, 28, 0.06);
}

#faq-sec .brand-box:hover img {
    transform: scale(1);
}

/* The regulatory marks (CDSCO 4:3, FDA 16:9, CE) drop into a round badge
   sized for the theme's square icons, so fit them inside rather than crop */
.feature-card .shape-icon img {
  max-width: 76px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* The design expects a square avatar; our headshots arrive at mixed
   dimensions so they need pinning to that shape */
.testi-grid_img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.testi-indicator .box-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.testi-box5_author img,
.testi-block_avater img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

/* .faq-area sits on the theme's dark panel but the heading keeps its default
   dark ink, leaving it nearly invisible */
.faq-area .sec-title {
  color: #fff;
}

/* Blog cards carry thumbnails of differing shape, so pin a common media
   ratio to keep the card rows aligned */
#blog-sec .blog-img img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

/* Listing grids stack cards of uneven copy length, so let them fill the
   row height */
#testi-sec .row > [class*="col-"] > .testi-box5 {
  height: 100%;
}

/* Post titles run to two or three lines, which would otherwise leave the
   author/Read More bar at a different height in each column */
#blog-sec .row > [class*="col-"] > .blog-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#blog-sec .blog-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

#blog-sec .blog-bottom {
  margin-top: auto;
}

/* About Us mirrors d2rgc.com, which builds both photo blocks from the theme's
   .img-box2 - a blob mask sized for landscape art, so square sources need
   cropping to fill it rather than letterboxing inside it */
.img-box2 .img1 img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: center;
}

/* Vision + Mission (and the four values) make a much taller column than a
   landscape photo, so the blob sat stranded in whitespace. Let the photo bleed
   past its column and take a squarer crop - going taller still crops both
   subjects out of a 2:1 source, so this is as far as it goes */
@media (min-width: 1200px) {
  .about-media-row .img-box2 .img1 img {
    aspect-ratio: 4 / 3;
    max-width: none;
  }

  .about-media-row > [class*="col-"]:first-child .img-box2 {
    margin-left: -70px;
    margin-right: 20px;
  }

  .about-media-row > [class*="col-"]:last-child .img-box2 {
    margin-left: 20px;
    margin-right: -70px;
  }
}

@media (min-width: 1400px) {
  .about-media-row > [class*="col-"]:first-child .img-box2 {
    margin-left: -110px;
  }

  .about-media-row > [class*="col-"]:last-child .img-box2 {
    margin-right: -110px;
  }
}

/* the closing line of Vision and of Mission is emphasised on the live page */
.about-lead {
  color: var(--title-color);
  font-weight: 600;
}

/* "Co-Founder - Head AI/ML & Engg." wraps to two lines, which would otherwise
   leave that card taller than the rest of its row */
#team-sec .row > [class*="col-"] > .th-team {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#team-sec .th-team .box-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* Long-form copy on the inner pages */
.page-content p:last-child {
  margin-bottom: 0;
}

.page-content ul.content-list {
  padding-left: 0;
  list-style: none;
}

.page-content ul.content-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
}

.page-content ul.content-list li:before {
  content: "\f058";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--theme-color);
}

/* WhatsApp floating action button: circle, expands to a pill on hover */
.wa-fab {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 10001;
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 14px;
  border-radius: 999px;
  background: #60d669;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  transition: box-shadow 0.3s ease;
}
.wa-fab:hover,
.wa-fab:focus-visible {
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.wa-fab__icon {
  flex: none;
  width: 32px;
  height: 32px;
}
.wa-fab__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 500;
  opacity: 0;
  transition: max-width 0.35s ease, margin 0.35s ease, opacity 0.2s ease;
}
@media (hover: hover) {
  .wa-fab:hover .wa-fab__label {
    max-width: 200px;
    margin: 0 18px 0 12px;
    opacity: 1;
  }
}
.wa-fab:focus-visible .wa-fab__label {
  max-width: 200px;
  margin: 0 18px 0 12px;
  opacity: 1;
}

/* Sit the theme's scroll-to-top button above the WhatsApp button */
.scroll-top {
  right: 35px;
  bottom: 106px;
}
@media (max-width: 575px) {
  .wa-fab {
    right: 16px;
    bottom: 16px;
    height: 54px;
    padding: 0 12px;
  }
  .wa-fab__icon {
    width: 30px;
    height: 30px;
  }
  .scroll-top {
    right: 18px;
    bottom: 84px;
  }
}