:root {
    --army-green: #5f7a50; 
    --afc-yellow: #ffd530; 
    --aal-red: #E61E26;
    --dark-grey: #333333;
    --light-grey: #B8B8B8;
}

.bkg-green{background-color: var(--army-green); height: 100%;}/*height for 2 column content boxes*/
.text-underline {text-decoration: underline;}
 @media screen and (min-width: 600px)  {
        .mobile-break { display: none; }
    } 
.devx-help-link a {color:var(--army-green);}
.devx-help-link a:hover {color:var(--aal-red) !important;}

.devx {background-image: url('../img/campaigns/devx-autonomy/devx-logo-lg.png'); background-size: contain; background-position: 50% 200%; }
@media (min-width: 768px) {.devx {background-image: url('../img/campaigns/devx-autonomy/hero-devx-md.jpg'); background-repeat: no-repeat; background-size: auto 100%;  background-position: 8% 0%;}}
@media (min-width: 1200px) {.devx {background-image: url('../img/campaigns/devx-autonomy/hero-devx.jpg');  background-position: 0% 0%; background-size:cover; }}    

.green-landscape {background: url('../img/campaigns/devx-autonomy/green-background.jpg'); background-size: auto 100%; }
@media (min-width: 768px) {.green-landscape {background-image: url('../img/campaigns/devx-autonomy/green-background.jpg'); background-position: 10% 0;} }
@media (min-width: 1200px) {.green-landscape {background-image: url('../img/campaigns/devx-autonomy/green-background.jpg'); background-position: 10% 0;} }

.bkg-blueprint {background: url('../img/campaigns/devx-autonomy/blueprint-background.png'); background-color:#000000; }
@media (min-width: 768px) {.bkg-blueprint {background-image: url('../img/campaigns/devx-autonomy/blueprint-background.png'); } }
@media (min-width: 1200px) {.bkg-blueprint {background-image: url('../img/campaigns/devx-autonomy/blueprint-background.png'); background-position: 35% 2%;} }

.content-section {
  padding-top: 3.75rem !important; /* extra space above for overlap */
  padding-bottom: 8rem !important;
}

.content-section .container {
  position: relative;
  z-index: 2; /* ensures text and image appear above overlay */
}

/* Overlapping image styling */
.overlap-img {
  bottom: -128px; /* anchor below bottom edge of content section */
   right: -200px;
  width: 800px;
  max-width: 80%;
  z-index: 3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .overlap-img {
    width: 600px;
    right: -180px;
    bottom: -128px;
  }
}


/* Green transparent full-width rectangle */
.bg-overlay {
  position: absolute;
  top: 0px;          /* pulls it upward to overlap the hero section */
  right: 0px;       /* shifts it rightward for asymmetry */
  width: 100%;          /* covers only part of the width */
  height: 100%;        /* extends below the section */
  /*background: rgba(95, 122, 80, 0.25);*/
  background: #5F7A50;
background: linear-gradient(180deg,rgba(95, 122, 80, 1) 0%, rgba(95, 122, 80, 1) 10%, rgba(95, 122, 80, 0.25) 25%, rgba(95, 122, 80, 0.25) 100%);
  z-index: 1;          /* behind text and image */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (min-width: 768px){
    .bg-overlay {
  position: absolute;
  top: -30px;          /* pulls it upward to overlap the hero section */
  right: -30px;       /* shifts it rightward for asymmetry */
  width: 95%;          /* covers only part of the width */
  height: 95%;        /* extends below the section */
  /*background: rgba(95, 122, 80, 0.25);*/
  background: #5F7A50;
background: linear-gradient(180deg,rgba(95, 122, 80, 1) 0%, rgba(95, 122, 80, 1) 10%, rgba(95, 122, 80, 0.25) 25%, rgba(95, 122, 80, 0.25) 100%);
  z-index: 1;          /* behind text and image */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
}

@media (min-width: 1200px){
    .bg-overlay {
  position: absolute;
  top: -30px;          /* pulls it upward to overlap the hero section */
  right: -30px;       /* shifts it rightward for asymmetry */
  width: 95%;          /* covers only part of the width */
  height: 95%;        /* extends below the section */
  /*background: rgba(95, 122, 80, 0.25);*/
  background: #5F7A50;
background: linear-gradient(180deg,rgba(95, 122, 80, 1) 0%, rgba(95, 122, 80, 1) 10%, rgba(95, 122, 80, 0.25) 25%, rgba(95, 122, 80, 0.25) 100%);
  z-index: 1;          /* behind text and image */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
}

@media (min-width: 1200px){
  .focus-area-lg-icon {
  width: 115px;
  height: 115px;
  object-fit: contain;
  flex-shrink: 0;
}
}


.focus-area-card {background-color: #c2c4c9; color: black; border: 1px black;}
.focus-area-card-body {max-width: 90%;}
.focus-area-lg-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  flex-shrink: 0;
}
.focus-area-smaller-title{
    font-family: 'Bebas Neue';
    font-size: clamp(0.9rem, 2.5vw, 1.9rem); 
  white-space: nowrap; 
}

.min-w-0 {
  min-width: 0 !important;
}

.card-title {
  white-space: normal;
  overflow: visible;
}


.f-card {
  background-color: #c2c4c9;
  color: black;
  border: 1px solid black;
  overflow: visible; /* allow image to break top */
}

.f-card-body {
  max-width: 90%;
}

.lg-icon {
  width: 130px;
  height: 130px;
  object-fit: contain;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  display: block;
}

.list-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* === FAQs ACCORDION === */
#Devx-FAQs .accordion-item {background-color: #f1f1f1 !important; color: black !important; margin: 12px 0 !important; border-radius:0 !important; border:1px solid var(--aal-red) !important;}
#Devx-FAQs .accordion-body a {color: var(--aal-red); font-weight:500; text-decoration:none;}
#Devx-FAQs .accordion-body a:hover {text-decoration:underline;}
#Devx-FAQs .accordion-body a.main-link {font-size: 1.125rem;}
#Devx-FAQs .accordion-button { font-family: 'Roboto Mono'; text-transform:  uppercase; font-weight:500; font-size: 1.125rem; background:none; box-shadow: none;}
#Devx-FAQs .accordion-button:after {content: "\f063"; transform: none; padding:4px 10px; width:auto; height:auto; color: var(--aal-red);  font-family: "Font Awesome 5 Free"; font-weight: 900; background-image: none;}
#Devx-FAQs .accordion-button:not(.collapsed) {color:#000000; font-weight:500; }
#Devx-FAQs .accordion-button:not(.collapsed)::after {content: "\f062"; }