/* ----------------------------------------
General & Utility
---------------------------------------- */

/* ----------------------------------------
Homepage
---------------------------------------- */
.devfest-2025-hero-row {
  background-color: #57caff;
  padding: 0;
}

.devfest-2025-hero-row .devsite-landing-row-inner {
  max-width: 1520px;
  padding: 0;
}

.hero-section {
  align-items: center;
  display: flex;
  gap: 40px;
  justify-content: space-between;
  padding: 60px 40px;
}

.hero-gdg-logo {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-gdg-logo img {
  height: 72px;
  width: auto;
}

.hero-gdg-logo p {
  color: var(--devsite-ref-palette--grey900);
  font: 400 24px/28px Google Sans;
  margin: 0;
}

.hero-text-content h1 {
  margin: 0;
}

.hero-text-content h1 span {
  text-decoration: none !important;
}

.devfest-title {
  display: block;
  font: 700 120px/100px Google Sans;
}

.wrapped-subtitle {
  display: block;
  font: 400 56px/60px Google Sans;
}

.hero-text-content p {
  font: 400 32px/32px Google Sans;
  margin: 16px 0 0;
}

.hero-bracket {
  height: 240px;
  width: auto;
}

.hero-middle-decor {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-squiggle {
  width: 140px;
}

.hero-arrow {
  width: 140px;
}

.hero-slants {
  height: 180px;
}

.devfest-map-section {
  background: var(--devsite-ref-palette--grey100);
  padding-block: 48px;

  .color-scheme--dark & {
    background: var(--devsite-ref-palette--grey700);
  }
}

.devfest-map-section h2 {
  background: url(/community/devfest/images/2025/globe.gif) no-repeat left center;
  background-size: 57px;
  font: 400 64px / 72px 'Google Sans';
  letter-spacing: -0.5px;
  padding-left: 80px;
  width: fit-content;
}

.devfest-map-section h2 + div {
  max-width: 100%;
  width: 100%;
}

.about-row h2 {
  font: 400 64px / 72px Google Sans;
  letter-spacing: -.5px;
}

.about-row img {
  margin-top: 16px;
  max-height: 268px;
}

.gdg-badge .devsite-landing-row-item-description {
  margin-block: auto !important;
}

.gdg-badge h3,
.gdg-badge h3 a {
  color: var(--devsite-ref-palette--black) !important;
  font: 400 32px / 32px 'Google Sans';
  padding-top: 24px;

  .color-scheme--dark & {
    color: var(--devsite-ref-palette--grey200) !important;
  }
}

.gdg-badge .devsite-landing-row-item-description-content {
  font: 400 20px / 24px Google Sans;
  max-width: 708px;
}

.gdg-badge .devsite-landing-row-item-buttons {
  margin: auto;
}

.gdg-badge figure a {
  background: white;
}

.devsite-landing-row-item.gdg-badge {
  width: 100%;
}

.devfest-carousel {
  --devfest-carousel-padding-block: 40px;
  background: #5cdb6d;
  margin: auto;
  padding-block: var(--devfest-carousel-padding-block);
  padding-inline: 8px;
}

devsite-carousel, devsite-carousel * {
  text-decoration: none !important;
}

.devfest-carousel li > div {
  border: 3px solid #1e1e1e;
  border-radius: 24px;
  gap: 32px;
  height: 100%;
  padding: 64px;
}

.devfest-carousel h3 {
  display: flex;
  flex-direction: column;
  font: 700 48px / 56px Google Sans !important;
}

.devfest-carousel h3 a {
  color: var(--tenant-primary-text-color);
}

.devfest-carousel .devsite-landing-row-item-description-content {
  font: 400 16px / 24px Google Sans;
}

.devfest-carousel .devsite-landing-row-item-labels span {
  background: none;
  font: 700 14px / 20px 'Google Sans';
  letter-spacing: .2px;
  margin: 0 24px 24px 0;
  padding: 0;
  text-transform: uppercase;
}

.devfest-carousel .impact-number {
  font: 700 112px / 108px Google Sans;
  padding-left: 110px;
  width: fit-content;
}

.devfest-carousel .impact-number.developers {
  background: url(/community/devfest/images/2025/bracket.svg) no-repeat left center;
  background-size: 94px;
}

.devfest-carousel .impact-number.events {
  background: url(/community/devfest/images/2025/at.svg) no-repeat left center;
  background-size: 72px;
}

.devfest-carousel .impact-number.countries {
  background: url(/community/devfest/images/2025/globe.svg) no-repeat left center;
  background-size: 94px;
}

.devfest-carousel .impact-label {
  padding-left: 110px;
  width: fit-content;
}

.devfest-carousel-image {
  border-radius: 17px;
}

.devfest-carousel-slide {
  --devfest-carousel-slide-flex-direction: row;
  --devfest-carousel-slide-gap: 70px;
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
}

.devfest-carousel-slide > div {
  --border: 1px solid #dadce0;
  --devfest-carousel-slide-display: grid;
  align-items: center;
  border: var(--border);
  display: var(--devfest-carousel-slide-display);
  flex-direction: var(--devfest-carousel-slide-flex-direction);
  gap: var(--devfest-carousel-slide-gap);
  grid: auto-flow / 2fr 3fr;
  width: 100%;
}

.devfest-carousel.devsite-landing-row-1-up .devsite-landing-row-item-media,
.devfest-carousel.devsite-landing-row-1-up .devsite-landing-row-item-description {
  grid-column: unset;
}

.gdg-row {
  background: var(--devsite-ref-palette--grey100);

  .color-scheme--dark & {
    background: var(--devsite-ref-palette--grey800);
  }
}

.gdg-row h3 {
  font: 400 64px/72px 'Google Sans';
  margin-bottom: 40px;
}

.gdg-row .devsite-landing-row-item-description-content {
  font: 400 24px/32px 'Google Sans';
}

.gdg-about .devsite-landing-row-item-body {
  background: url(/community/devfest/images/2025/squiggly-bracket.svg) no-repeat right top 40px;
  background-size: 60px;
  padding-right: 116px;
}

.gdg-animation,
.gdg-cta {
  background: var(--devsite-ref-palette--grey100);

  .color-scheme--dark & {
    background: var(--devsite-ref-palette--grey700);
  }
}

.gdg-animation img {
  display: block;
  margin: auto;
}

.gdg-cta {
  padding-top: 0;
}

.gdg-cta .button {
  align-items: center;
  border: 2.25px solid black !important;
  border-radius: 36px;
  display: flex;
  font: 400 28px / 28px Google Sans;
  justify-content: center;
  margin: auto;
  padding: 32px;
  width: 380px;
}

.devfest-stay-connected-row {
  background: #57caff;
  padding: 40px 0 0 !important;
}

.devfest-stay-connected-row .devsite-landing-row-header-text {
  margin: auto;
  max-width: 640px;
  width: 100%;
}

.devfest-stay-connected-row h2 {
  font: 400 64px / 72px Google Sans;
  margin-top: 28px;
}

.devfest-stay-connected-row .devsite-landing-row-description {
  font: 400 18px/30px 'Google Sans';
  margin-top: 8px;
}

.devfest-stay-connected-row img {
  margin: 24px 8px 60px;
  vertical-align: middle;
  width: 40px;
}

.color-scheme--dark .devfest-stay-connected-row img {
  filter: invert(.8);
}

.devfest-stay-connected-row a {
  background: none !important;
  text-decoration: none !important;
}

/* ----------------------------------------
FAQ Page
---------------------------------------- */
.devfest-faq-label {
  padding-block: 80px 0;
}

.devfest-faq-label,
.devfest-faq-label-mobile {
  background: var(--devsite-ref-palette--grey100);
  padding-bottom: 0;

  .color-scheme--dark & {
    background: var(--devsite-ref-palette--grey800);
  }
}

.devsite-landing-row.devfest-faq-label .devsite-landing-row-inner {
  .color-scheme--dark & {
    background-color: var(--devsite-ref-palette--grey800);
  }
}

.devfest-faq-label .devsite-landing-row-item {
  display: block !important;
}

.devsite-landing-row.devfest-faq-label h3,
.devfest-faq-label-mobile h3 {
  font: 500 72px/70px 'Google Sans';
  margin-bottom: 0;
}

.devsite-landing-row.devfest-faq-label h3 {
  background: url(/community/devfest/images/2025/asterisk.gif) no-repeat left center, url(/community/devfest/images/2025/asterisk.gif) no-repeat right center;
  background-size: 49px;
  letter-spacing: -2.5px;
  margin: auto;
  padding-inline: 80px;
  width: fit-content;
}

.devfest-faq-label-mobile {
  display: none;
}

.devfest-faq {
  background: var(--devsite-ref-palette--grey100);
  padding: 40px 24px;

  .color-scheme--dark & {
    background: var(--devsite-ref-palette--grey800);
  }
}

.devfest-faq .devsite-landing-row-inner {
  .color-scheme--dark & {
    border-color: var(--devsite-ref-palette--grey400);
  }
}

.devfest-faq devsite-expandable:not(.devfest-faq
devsite-expandable:last-of-type) {
  border-bottom: 2px solid var(--devsite-ref-palette--black);
  padding-bottom: 35px;

  .color-scheme--dark & {
    border-color: var(--devsite-ref-palette--grey400);
  }
}

.devfest-faq devsite-expandable a.exw-control:active,
.devfest-faq devsite-expandable a.exw-control:focus,
.devfest-faq devsite-expandable a.exw-control:hover {
  color: var(--devsite-ref-palette--black);
}

.devfest-faq h3 {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0 !important;
}

.devfest-faq h3::before {
  content: none !important;
}

.devfest-faq h3::after {
  content: 'expand_more';
  font: 400 48px 'Material Icons';
}

.devfest-faq devsite-expandable[expanded] h3::after {
  content: 'expand_less';
}

.devfest-faq devsite-expandable div {
  margin-top: 16px;
  padding: 24px;

  .color-scheme--dark & {
    border-color: var(--devsite-ref-palette--grey400);
  }
}

.devfest-faq p {
  margin-bottom: 0;
}

.devsite-landing-row.devfest-faq-bottom {
  background: var(--devsite-ref-palette--grey100);
  padding-top: 0;

  .color-scheme--dark & {
    background: var(--devsite-ref-palette--grey800);
  }
}

.devsite-landing-row.devfest-faq-bottom .devsite-landing-row-inner {
  background: url(/community/devfest/images/faq-bottom.png) no-repeat center,
  var(--devsite-ref-palette--grey100);
  height: 66px;

  .color-scheme--dark & {
    background-color: var(--devsite-ref-palette--grey800);
  }
}

/* ----------------------------------------
DevFest 2025 Wrap Up
---------------------------------------- */
.devfest-video-row {
  align-items: center;
  padding-block: 60px;
}

.devfest-video-row devsite-video {
  border: 3px solid black;
  border-radius: 24px;
}

.devfest-video-row .devsite-landing-row-item-description h3 {
  font: 400 36px 'Google Sans';
  margin-bottom: 24px;
}
.devfest-video-row .devsite-landing-row-item-description p {
  font: 400 18px 'Google Sans';
  margin-bottom: 24px;
}
.devfest-video-row devsite-youtube-video {
  border-radius: 24px;
  overflow: hidden;
  width: 100%;
}

.devfest-stats-row {
  padding-block: 40px 0;
  background: var(--tenant-background-2);

}

.devfest-stats-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.devfest-stats-blue {
  background-color: #c1eaf4;
  border: 3px solid #1e1e1e;
  border-radius: 24px;
  min-height: 480px;
  padding: 48px;
  position: relative;
  overflow: hidden;
}

.devfest-stats-blue-left {
  position: relative;
  z-index: 2;
}

.devfest-stats-blue h3 {
  align-items: center;
  background: url(/community/devfest/images/devfest-map-arrow.png) left center / 112px no-repeat;
  display: flex;
  font: 700 100px/80px 'Google Sans';
  gap: 24px;
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 140px;
}

.devfest-stats-label {
  font: 400 48px/56px 'Google Sans';
  align-self: flex-end;
}

.stats-squiggle {
  height: auto;
  width: auto;
}

.devfest-stats-content {
  align-items: center;
  display: flex;
  gap: 32px;
  margin-top: 48px;
}

.devfest-stats-list {
  list-style: none;
  margin-top: 0;
  max-width: 50%;
  padding: 0;
  position: relative;
  z-index: 1;
}

.devfest-stats-list li {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  font: 500 32px/32px Google Sans;
  gap: 0;
  margin-block: 60px;
}

.devfest-stats-list li strong {
  font: 700 72px/1 Google Sans;
}

.devfest-stats-map {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 60%;
  z-index: 1;
}

.map-image {
  display: block;
  width: 100%;
}

.map-marker {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  position: absolute;
  width: max-content;
  z-index: 2;
}

.map-marker strong {
  color: #1e1e1e;
  font: 700 24px/24px Google Sans;
}

.map-marker span {
  color: #1e1e1e;
  font: 500 14px/20px Google Sans;
}

.marker-nantes {
  right: 38%;
  top: 29.5%;
}

.marker-villahermosa {
  right: 64.5%;
  top: 43.5%;
}

.marker-lagos {
  right: 37.5%;
  top: 49.5%;

}

.marker-chennai {
  right: 15%;
  top: 45%;
}

@media screen and (max-width: 1300px) {
  .map-marker strong {
    font-size: 100%;
    line-height: 100%;
  }

  .map-marker span {
    font-size: 70%;
    line-height: 100%;
  }

  .marker-villahermosa {
    right: 64.5%;
  }
}

@media screen and (max-width: 960px) {
  .map-marker {
    transform: scale(0.7);
    transform-origin: center right;
  }

  .map-marker strong {
    font-size: 180%;
    line-height: 100%;
  }

  .map-marker span {
    font-size: 120%;
    line-height: 100%;
  }

  .marker-nantes {
    right: 38%;
    top: 28.5%;
  }

  .marker-villahermosa {
    right: 64.5%;
    top: 42.5%;
  }

  .marker-lagos {
    right: 37.5%;
    top: 48.5%;
  }

  .marker-chennai {
    right: 15%;
    top: 44%;
  }
}

.devfest-stats-bottom-row {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 24px;
}

.devfest-stats-green {
  align-items: flex-start;
  background: url(/community/devfest/images/professional-developers.png) 24px 24px / calc(100% - 48px) no-repeat,
              url(/community/devfest/images/professional-developers-arrow.png) right 24px bottom 24px / auto no-repeat #ccf6cf;
  border: 3px solid #1e1e1e;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: flex-start;
  padding: 360px 48px 48px 48px;
  position: relative;
}

.devfest-stat-item-green {
  text-align: left;
}
.devfest-stat-item-green strong {
  display: block;
  font: 700 80px/80px Google Sans;
  margin-bottom: 16px;
}
.devfest-stat-item-green span {
  font: 400 24px/32px Google Sans;
}

.devfest-impact-card {
  border: 3px solid #1e1e1e;
  border-radius: 24px;
  padding: 48px;
}

.devfest-impact-card h3 {
  font: 400 48px/56px Google Sans;
  margin-bottom: 32px;
  margin-top: 0;
}

.devfest-impact-card.yellow {
  background: url(/community/devfest/images/survey-responses-no-arrow.png) bottom 24px center / 80% no-repeat,
              url(/community/devfest/images/survey-responses-arrow-semicolon.png) right 48px top 48px / auto no-repeat #ffe7a5;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  padding: 48px 48px 240px 48px;
}

.devfest-impact-card.yellow h3 {
  margin-bottom: 0;
  margin-top: 0;
}

@media screen and (max-width: 800px) {
  .devfest-stats-blue h3 {
    background: url(/community/devfest/images/devfest-map-arrow.png) no-repeat left top / 112px;
    display: block;
  }

  .map-marker {
    align-items: center;
    padding-top: 6px;
  }

  .map-marker strong {
    font-size: 150%;
    line-height: 100%;
  }

  .map-marker span {
    display: none;
  }

  .marker-villahermosa {
    right: 66%;
  }
}

@media screen and (max-width: 600px) {
  .map-marker strong {
    font-size: 100%;
    line-height: 100%;
  }
}

@media screen and (max-width: 1090px) {
  .devfest-stats-bottom-row {
    grid-template-columns: 1fr;
  }

  .devfest-stats-green {
    flex-direction: column;
    gap: 32px;
    align-items: center;
    background:
      url(/community/devfest/images/professional-developers.png) center 24px / min(500px, 80%) no-repeat,
      url(/community/devfest/images/professional-developers-arrow.png) right 24px bottom 24px / auto no-repeat #ccf6cf;
  }
}

/* Responsive */
@media screen and (max-width: 1440px) {
  .devfest-faq .devsite-landing-row-inner {
    padding: 1vw 4vw 4vw;
  }
}

@media screen and (max-width: 1200px) {
  .devsite-landing-row.devfest-faq-bottom .devsite-landing-row-inner {
    background-position: left;
    margin-left: 24px;
  }

  .hero-middle-decor,
  .hero-bracket {
    display: none;
  }
}

@media screen and (max-width: 960px) {
  .devfest-carousel-slide {
    --devfest-carousel-slide-flex-direction: column-reverse;
    --devfest-carousel-slide-gap: 20px;
  }

  .devfest-carousel-slide > div {
    --border: none;
    --devfest-carousel-slide-display: flex;
  }

  .gdg-row .devsite-landing-row-group {
    grid: auto-flow/repeat(1,1fr)
  }

  .gdg-about .devsite-landing-row-item-body {
    background: unset;
    padding-right: 24px;
  }

  .devfest-stats-blue {
    flex-direction: column;
    padding: 32px;
  }
  .devfest-stats-list {
    max-width: 100%;
  }
  .devfest-stats-map {
    height: auto;
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
  }

  .devfest-impact-card.yellow {
    background: url(/community/devfest/images/survey-responses-no-arrow.png) bottom 24px center / 80% no-repeat,
                url(/community/devfest/images/survey-responses-arrow-semicolon.png) no-repeat top 120px center / 100px auto #ffe7a5;
    padding-bottom: calc(16vw + 12px);
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .devfest-impact-card.yellow img {
    display: none;
  }

  .devfest-impact-card.yellow h3 {
    position: relative;
    width: 100%;
    top: 0;
    padding-bottom: 100px;
  }

  .devfest-stat-item-green {
    text-align: center;
  }

  .devfest-stat-item-green strong {
    font: 700 48px/56px Google Sans;
  }

  .devfest-stat-item-green span {
    font: 400 20px/28px Google Sans;
  }

  .devfest-impact-card {
      padding: 32px;
  }

  .hero-section {
    justify-content: center;
    gap: 32px;
    padding: 40px 24px;
  }

  .hero-gdg-logo img {
    height: 48px;
  }

  .hero-gdg-logo p {
    font-size: 18px;
    line-height: 22px;
  }

  .devfest-title {
    font-size: 60px;
    line-height: 60px;
  }

  .wrapped-subtitle {
    font-size: 30px;
    line-height: 36px;
  }

  .hero-text-content p {
    font-size: 18px;
    line-height: 24px;
  }

  .hero-bracket,
  .hero-middle-decor,
  .hero-slants {
    display: none;
  }
}

@media screen and (max-width: 840px) {
  .gdg-badge figure a {
    height: 34vw;
  }
  .devfest-map-section {
    margin-bottom: 0;
    padding-block: 40px;
  }

  .devsite-landing-row.devfest-faq-label .devsite-landing-row-inner {
    .color-scheme--dark & {
      background-color: var(--devsite-ref-palette--grey800);
    }
  }

  .devfest-faq .devsite-landing-row-inner {
    padding: 16px 24px 44px;
  }
}

@media screen and (max-width: 600px) {
  .devsite-landing-row, [class*=devsite-landing-row-padding-] {
    --devsite-landing-group-padding: 0 16px;
    --devsite-landing-row-padding: 24px 0;
  }

  .hero-section {
    flex-direction: row-reverse;
  }

  .hero-section h1 br {
    display: none;
  }

  .devfest-map-section h2,
  .about-row h2,
  .devfest-stay-connected-row h2 {
    font: 400 40px / 48px Google Sans;
  }

  .about-row .devsite-landing-row-header {
    text-align: left !important;
  }

  .gdg-badge figure a {
    height: 76vw;
  }

  .devfest-stats-list li strong {
    font-size: 48px;
  }

  .devfest-carousel {
    overflow: hidden;
    padding: 8px 20px 24px;
  }

  .devfest-carousel li > div {
    border: none;
    padding: 24px 0 16px;
  }

  .devfest-carousel-slide {
    --devfest-carousel-slide-gap: 0;
  }

  .devfest-carousel h3 {
    align-items: center;
    flex-direction: row;
    font: 700 7.5vw / 8.5vw Google Sans !important;
    gap: 8px;
  }

  .devfest-carousel .impact-number.developers,
  .devfest-carousel .impact-number.events,
  .devfest-carousel .impact-number.countries {
    background-size: 9.5vw;
    font: 700 7.5vw / 8.5vw Google Sans !important;
    padding-left: 12.5vw;
  }

  .devfest-carousel .impact-label {
    padding-left: 0;
  }

  .devfest-carousel .devsite-landing-row-item-description {
    margin: 0 !important;
    width: 100%;
  }

  .gdg-about .devsite-landing-row-item-body {
    background: unset;
    padding-right: 16px;
  }

  .devfest-stay-connected-row {
    padding: 24px 0 0 !important;
  }

  .devfest-stay-connected-row h2 {
    margin-top: 0;
  }

  .devfest-stay-connected-row .devsite-landing-row-header-text {
    background: unset;
  }

  .devsite-landing-row.devfest-faq-label .devsite-landing-row-inner {
    background: url(/community/devfest/images/faq-top.png) no-repeat 16px 88px,
    var(--devsite-ref-palette--grey100);
    height: 152px;

    .color-scheme--dark & {
      background-color: var(--devsite-ref-palette--grey800);
    }
  }

  .devfest-faq-label {
    display: none;
  }

  .devfest-faq-label-mobile {
    display: block;
  }

  .devsite-landing-row.devfest-faq-label-mobile h3 {
    background: url(/community/devfest/images/2025/asterisk.gif) no-repeat left center;
    background-size: 49px;
    letter-spacing: -2.5px;
    padding-inline: 60px;
    width: fit-content;
  }

  .devfest-faq {
    padding: 24px 16px;
  }

  .devfest-faq .devsite-landing-row-inner {
    padding: 0;
  }

  .devsite-landing-row.devfest-faq-bottom .devsite-landing-row-inner {
    background-position: -256px;
    margin-bottom: 24px;
  }
}

@media screen and (max-width: 530px) {
  .devfest-impact-card.yellow {
    background: url(/community/devfest/images/survey-responses-no-arrow.png) bottom 24px center / 80% no-repeat,
                url(/community/devfest/images/survey-responses-arrow-semicolon.png) no-repeat top 180px center / 100px auto #ffe7a5;
  }
}


@media screen and (max-width: 400px) {
  .devfest-stats-blue h3 {
    background: none;
    padding-left: 0;
  }
}