.element-HOME {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.element-HOME .div-footer {
  background-color: #ffffff;
 /* overflow: hidden; */
  width: -webkit-fill-available;
 /* height: 3669px; */
  position: relative;
  background: transparent;
}

.element-HOME .overlap-footer {
  position: absolute;
  width: -webkit-fill-available;
  /* top:-80px; */
  /* height: 1839px;
  top: 2228px;
  left: -300px; */
}

a.disabled {
    pointer-events: none;
    cursor: default;
    color:#adadad;
}

.element-HOME .FOOTER {
  
  width: -webkit-fill-available;
  
  /*left: 0; */
  background-color: transparent;
}
.footer-nav {
	list-style: none;
}

.footer-nav li{
	padding-bottom: 6px;
}

/*
.element-HOME .overlap-group {
  position: relative;
  width: -webkit-fill-available;

} */
@media (min-width: 1920px) {	
.element-HOME .overlap-group {
	position: relative;
	width: -webkit-fill-available;
	height: 680px;
	background-image: url(/img/diagonals.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
	display: flex;
	justify-content: center;
	align-items: end;
	box-sizing: border-box;
	right: 0px;
}
}
@media (max-width: 1919px) {	
.element-HOME .overlap-group {
	position: relative;
	width: -webkit-fill-available;
	height: 490px;
	background-image: url(/img/diagonals.png);
	background-repeat: no-repeat;
	background-position: bottom;
	display: flex;
	justify-content: center;
	align-items: end;
	box-sizing: border-box;
	right: 0px;
}
}
@media (max-width: 767px) {	
.FOOTER-mobilenav .overlap-group {
	position: relative;
	width: -webkit-fill-available;
	background-image: url(/img/diagonals.png);
	background-repeat: no-repeat;
	background-size: cover;
	justify-content: center;
    height: calc(100vw / (812 / 296));
}
}
.footer-bg {
	background: #0a2240;
}
.element-HOME .diagonals {
  position: absolute;
  width: -webkit-fill-available;

  /*
  top: -200px;
  left: 0; */
}

.element-HOME .overlap-group-2 {
  /* position: relative;
  width: -webkit-fill-available;
  height: 1077px;
  left: 300px; */

  position: absolute;
    width: -webkit-fill-available;
    height: max-content;
    /*top: 352px; */
    align-items: center;
} 






.element-HOME .vector {
  position: absolute;
  width: -webkit-fill-available;
  /*height: 666px; */
  top: 271px;
  left: 0;
}

.element-HOME .img {
  position: absolute;
  width: -webkit-fill-available;
  /* height: 826px; */
  top: 0;
  left: 0;
}

.element-HOME .vector-2 {
  position: absolute;
  width: -webkit-fill-available;
  /* height: 934px; */
  top: 143px;
  left: 0;
}

.element-HOME .footer-details {
    position: relative;
    text-align: left;
    padding: 1rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 1000px;
    /* font-size: 1.8rem; */
}

.element-HOME .EU-funding {
  /*position: absolute;*/
  width: -webkit-fill-available;
  height: 169px;
  top: 376px;
  left: 0;
}


.element-HOME .text-wrapper {
 /* position: absolute;
   border: 1px solid; 
  width: 50%;
  top: 39px;
   left: 250px; */
  right: 30px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--system-colors-miscellaneous-sidebar-fill-selected);
  font-size: var(--body-font-size);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  font-style: var(--body-font-style);
  word-wrap: break-word;
}

.element-HOME .line {
  position: absolute;
  /* width: 1127px; */
  top: -1px;
  /* left: 0; */
  height: 1.5px;
  object-fit: cover;
}
.m-b-1 {
    margin-bottom: 1rem !important;
}
.element-HOME .logos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding-top: 80px;
  /*width: 30%;
  top: 221px;
  right: 150px;
  position: absolute;*/
}

.element-HOME .DOJ-LOGO-REV {
  position: relative;
  width: 50%;
}

.element-HOME .NCSC-LOGO-REV {
  position: relative;
  width: 50%;
}

.element-HOME .email-telephone {
  padding-top:26px;
  /*position: absolute;
   top: 100px; 
  left: 386px; 
   padding-right: 10px; */
}

.element-HOME .frame {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* position: absolute; */
  top: 1px;
  left: 0;
}

.element-HOME .call-icon {
  position: relative;
  width: 20.12px;
  height: 21px;
}

.element-HOME .overlap-group-3 {
  position: relative;
  width: 20px;
  height: 21px;
}

.element-HOME .vector-3 {
  position: absolute;
  width: 18px;
  height: 19px;
  top: 2px;
  left: 0;
}

.element-HOME .vector-4 {
  position: absolute;
  width: 6px;
  height: 6px;
  top: 4px;
  left: 10px;
}

.element-HOME .vector-5 {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0;
  left: 10px;
}

.element-HOME .text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--NCSC-body-font-family);
  font-weight: var(--NCSC-body-font-weight);
  color: #ffffff;
  font-size: var(--NCSC-body-font-size);
  letter-spacing: var(--NCSC-body-letter-spacing);
  line-height: var(--NCSC-body-line-height);
  white-space: nowrap;
  font-style: var(--NCSC-body-font-style);
}

.element-HOME .frame-2 {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  /* padding-left:16px; */
}
.contact-nu {
	padding-bottom: 12px;
}

.element-HOME .email-icon {
  position: relative;
  width: 33.55px;
  height: 22px;
}

.element-HOME .overlap-group-4 {
  position: relative;
  width: 34px;
  height: 22px;
}

.element-HOME .vector-6 {
  position: absolute;
  width: 8px;
  height: 8px;
  top: 4px;
  left: 18px;
}

.element-HOME .vector-7 {
  position: absolute;
  width: 34px;
  height: 22px;
  top: 0;
  left: 0;
}

.element-HOME .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--NCSC-body-font-family);
  font-weight: var(--NCSC-body-font-weight);
  color: #ffffff;
  font-size: var(--NCSC-body-font-size);
  letter-spacing: var(--NCSC-body-letter-spacing);
  line-height: var(--NCSC-body-line-height);
  text-decoration: none;
  white-space: nowrap;
  font-style: var(--NCSC-body-font-style);
}

.element-HOME .p {
  /*position: absolute;
   width: 577px; */
  top: 0;
  left: 250px;
  right: 40px;
  font-family: var(--NCSC-body-font-family);
  font-weight: var(--NCSC-body-font-weight);
  color: #ffffff;
  font-size: var(--NCSC-body-font-size);
  letter-spacing: var(--NCSC-body-letter-spacing);
  line-height: var(--NCSC-body-line-height);
  font-style: var(--NCSC-body-font-style);
}

.element-HOME .home-cyber-risk {
 /* position: absolute;
  width: 200px;*/
  top: 0;
  left: 20px;
  font-family: var(--NCSC-body-font-family);
  font-weight: var(--NCSC-body-font-weight);
  color: var(--variable-collection-LILAC);
  font-size: var(--NCSC-body-font-size);
  letter-spacing: var(--NCSC-body-letter-spacing);
  line-height: var(--NCSC-body-line-height);
  font-style: var(--NCSC-body-font-style);
}

.element-HOME .span {
  font-family: var(--NCSC-body-font-family);
  font-weight: var(--NCSC-body-font-weight);
  color: #c2a3fb;
  font-size: var(--NCSC-body-font-size);
  letter-spacing: var(--NCSC-body-letter-spacing);
  line-height: var(--NCSC-body-line-height);
  font-style: var(--NCSC-body-font-style);
}

a{
  color: #c2a3fb;
}

a:hover { 
color: white; 
}

a:focus { 
color: #c2a3fb; 
}

.copyright {
  font-style: italic;
  padding-top: 32px;
  color: #c2a3fb;
  font-family: var(--NCSC-body-font-family);
  font-weight: var(--NCSC-body-font-weight);
  letter-spacing: var(--NCSC-body-letter-spacing);
  line-height: var(--NCSC-body-line-height);
  font-size: var(--NCSC-body-font-size);
}

.footer-placement {
	position: relative;
    top: -80px;
}

/*  Mobile Footer CSS Styles */

.FOOTER-mobilenav {
    /* width: fit-content; */
    height: fit-content;
	overflow-x:hidden;
    /* align-items: center; */
}

.FOOTER-mobilenav .overlap80 {
    position: relative;
    width: -webkit-fill-available;
}

.FOOTER-mobilenav .diagonals80 {
    position: relative;
    width: -webkit-fill-available;
    height: 1521px;
    top: 0;
    /* left: 0; */
}

.FOOTER-mobilenav .overlap-group80 {
    position: relative;
    width: -webkit-fill-available;
    height: 1521px;
    /* left: 260px; */
    background: url(./img/footer1.png);
}

.FOOTER-mobilenav .vector {
    position: absolute;
    width: -webkit-fill-available;
    height: 1521px;
    top: -73px;
    left: 0;
}

.FOOTER-mobilenav .img {
  position: absolute;
  width: 390px;
  height: 369px;
  top: 0;
  left: 0;
}

.FOOTER-mobilenav .vector-2 {
  position: absolute;
  width: 390px;
  height: 628px;
  top: 115px;
  left: 0;
}

.FOOTER-mobilenav .vector-3 {
  position: absolute;
  width: 390px;
  height: 1188px;
  top: 333px;
  left: 0;
}
.hr-color {
	color: #C3A3FB;
}
.FOOTER-mobilenav .details80 {
    /*position: absolute;
    top: 288px;
    left: 19px;
    height: 1153px;*/
	background: #0a2240;
    width: -webkit-fill-available;
	Padding: 40px 24px;
}


.FOOTER-mobilenav .cofunded80 {
  width: 357px;
  height: 95px;
}

.FOOTER-mobilenav .line80 {
  position: absolute;
  width: 333px;
  height: 1.5px;
  top: -1px;
  left: 0;
  object-fit: cover;
}

.FOOTER-mobilenav .text-wrapper80 {
  width: 85%;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--system-colors-miscellaneous-sidebar-fill-selected);
  font-size: var(--body-font-size);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  font-style: var(--body-font-style);
}

.FOOTER-mobilenav .home-cyber-risk80 {
  position: absolute;
  width: 175px;
  top: 567px;
  left: 0;
  font-family: var(--NCSC-body-font-family);
  font-weight: var(--NCSC-body-font-weight);
  color: var(--variable-collection-LILAC);
  font-size: var(--NCSC-body-font-size);
  letter-spacing: var(--NCSC-body-letter-spacing);
  line-height: var(--NCSC-body-line-height);
  font-style: var(--NCSC-body-font-style);
}

.FOOTER-mobilenav .span80 {
  font-family: var(--NCSC-body-font-family);
  font-weight: var(--NCSC-body-font-weight);
  color: #c2a3fb;
  font-size: var(--NCSC-body-font-size);
  letter-spacing: var(--NCSC-body-letter-spacing);
  line-height: var(--NCSC-body-line-height);
  font-style: var(--NCSC-body-font-style);
  Padding-top: 100px;
}

.FOOTER-mobilenav .text-wrapper-280 {
  font-style: var(--NCSC-body-font-style);
  font-family: var(--NCSC-body-font-family);
  font-weight: var(--NCSC-body-font-weight);
  letter-spacing: var(--NCSC-body-letter-spacing);
  line-height: var(--NCSC-body-line-height);
  font-size: var(--NCSC-body-font-size);
}

.FOOTER-mobilenav .logos80 {
  Padding-top: 40px;
}

.FOOTER-mobilenav .email81 {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
}

.FOOTER-mobilenav .email-icon80 {
  position: relative;
  width: 33.55px;
  height: 22px;
}

.FOOTER-mobilenav .div82 {
  position: relative;
  width: 34px;
  height: 22px;
}

.FOOTER-mobilenav .vector-480 {
  position: absolute;
  width: 8px;
  height: 8px;
  top: 4px;
  left: 18px;
}

.FOOTER-mobilenav .vector-580 {
  position: absolute;
  width: 34px;
  height: 22px;
  top: 0;
  left: 0;
}

.FOOTER-mobilenav .ncsc-gov80 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--NCSC-body-font-family);
  font-weight: var(--NCSC-body-font-weight);
  color: #ffffff;
  font-size: var(--NCSC-body-font-size);
  letter-spacing: var(--NCSC-body-letter-spacing);
  line-height: var(--NCSC-body-line-height);
  text-decoration: none;
  white-space: nowrap;
  font-style: var(--NCSC-body-font-style);
  background: transparent;
  border: none;
  padding: 0;
}

.FOOTER-mobilenav .tel80 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.FOOTER-mobilenav .call-icon80 {
  position: relative;
  width: 20.12px;
  height: 21px;
}

.FOOTER-mobilenav .overlap-group-282 {
  position: relative;
  width: 20px;
  height: 21px;
}

.FOOTER-mobilenav .vector-683 {
  position: absolute;
  width: 18px;
  height: 19px;
  top: 2px;
  left: 0;
}

.FOOTER-mobilenav .vector-784 {
  position: absolute;
  width: 6px;
  height: 6px;
  top: 4px;
  left: 10px;
}

.FOOTER-mobilenav .vector-885 {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0;
  left: 10px;
}

.FOOTER-mobilenav .text-wrapper-386 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--NCSC-body-font-family);
  font-weight: var(--NCSC-body-font-weight);
  color: #ffffff;
  font-size: var(--NCSC-body-font-size);
  letter-spacing: var(--NCSC-body-letter-spacing);
  line-height: var(--NCSC-body-line-height);
  white-space: nowrap;
  font-style: var(--NCSC-body-font-style);
}

.FOOTER-mobilenav .footer-address {
  width: 85%;
  font-family: var(--NCSC-body-font-family);
  font-weight: var(--NCSC-body-font-weight);
  color: #ffffff;
  font-size: var(--NCSC-body-font-size);
  letter-spacing: var(--NCSC-body-letter-spacing);
  line-height: var(--NCSC-body-line-height);
  font-style: var(--NCSC-body-font-style);
  padding: 24px 0;
}



/*Media Queries*/

/* Default styles for desktop (above 430px) */

.element-HOME {
  /*display: block; */
}

.FOOTER-mobilenav {
  display: none;
}

/* Mobile styles for screens up to 430px */
@media (max-width: 767px) {
.element-HOME {
    display: none;
  }

  .FOOTER-mobilenav {
    display: block;
  }
}


/*Style guide Mobile footer*/

:root {
  --h1-font-family: "Lato", Helvetica;
  --h1-font-weight: 700;
  --h1-font-size: 64px;
  --h1-letter-spacing: -1.28px;
  --h1-line-height: 74px;
  --h1-font-style: normal;
  --body-font-family: "Lato", Helvetica;
  --body-font-weight: 400;
  --body-font-size: 16px;
  --body-letter-spacing: 0.5px;
  --body-line-height: 24px;
  --body-font-style: normal;
  --h2-font-family: "Lato", Helvetica;
  --h2-font-weight: 700;
  --h2-font-size: 54px;
  --h2-letter-spacing: 0px;
  --h2-line-height: 62px;
  --h2-font-style: normal;
  --h3-font-family: "Lato", Helvetica;
  --h3-font-weight: 700;
  --h3-font-size: 44px;
  --h3-letter-spacing: 0px;
  --h3-line-height: 50px;
  --h3-font-style: normal;
  --h4-font-family: "Lato", Helvetica;
  --h4-font-weight: 700;
  --h4-font-size: 34px;
  --h4-letter-spacing: 0px;
  --h4-line-height: 40px;
  --h4-font-style: normal;
  --h5-font-family: "Lato", Helvetica;
  --h5-font-weight: 700;
  --h5-font-size: 24px;
  --h5-letter-spacing: 0px;
  --h5-line-height: 30px;
  --h5-font-style: normal;
  --h6-font-family: "Lato", Helvetica;
  --h6-font-weight: 400;
  --h6-font-size: 22px;
  --h6-letter-spacing: 0.5px;
  --h6-line-height: 28px;
  --h6-font-style: normal;
  --h-mobile-font-family: "Lato", Helvetica;
  --h-mobile-font-weight: 700;
  --h-mobile-font-size: 45px;
  --h-mobile-letter-spacing: 0px;
  --h-mobile-line-height: 52px;
  --h-mobile-font-style: normal;
  --h6-mobile-font-family: "Lato", Helvetica;
  --h6-mobile-font-weight: 400;
  --h6-mobile-font-size: 20px;
  --h6-mobile-letter-spacing: 0.5px;
  --h6-mobile-line-height: 28px;
  --h6-mobile-font-style: normal;
  --h4-mobile-font-family: "Lato", Helvetica;
  --h4-mobile-font-weight: 400;
  --h4-mobile-font-size: 34px;
  --h4-mobile-letter-spacing: 0px;
  --h4-mobile-line-height: 40px;
  --h4-mobile-font-style: normal;
  --h3-mobile-font-family: "Lato", Helvetica;
  --h3-mobile-font-weight: 700;
  --h3-mobile-font-size: 34px;
  --h3-mobile-letter-spacing: 0px;
  --h3-mobile-line-height: 40px;
  --h3-mobile-font-style: normal;
  --NCSC-body-font-family: "Lato", Helvetica;
  --NCSC-body-font-weight: 400;
  --NCSC-body-font-size: 16px;
  --NCSC-body-letter-spacing: 0px;
  --NCSC-body-line-height: 30px;
  --NCSC-body-font-style: normal;
  --variable-collection-maroon: rgba(102, 36, 128, 1);
  --variable-collection-SME-purple: rgba(126, 87, 197, 1);
  --variable-collection-purple: rgba(100, 87, 197, 1);
  --variable-collection-core-dk-blue: rgba(0, 11, 140, 1);
  --variable-collection-EU-blue: rgba(40, 83, 213, 1);
  --variable-collection-NCSC-navy: rgba(10, 34, 64, 1);
  --variable-collection-grey-navy: rgba(81, 93, 117, 1);
  --variable-collection-LILAC: rgba(195, 163, 251, 1);
  --variable-collection-color: rgba(5, 162, 130, 1);
  --variable-collection-WHITE: rgba(255, 255, 255, 1);
  --variable-collection-RED: rgba(232, 80, 91, 1);
  --variable-collection-GREY: rgba(223, 223, 223, 1);
  --system-colors-miscellaneous-sidebar-fill-selected: rgba(255, 255, 255, 1);
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-system-colors-mode="light">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-system-colors-mode="light"] {
  --system-colors-miscellaneous-sidebar-fill-selected: rgba(255, 255, 255, 1);
}

[data-system-colors-mode="dark"] {
  --system-colors-miscellaneous-sidebar-fill-selected: rgba(142, 142, 147, 0.25);
}

[data-system-colors-mode="dark-elevated"] {
  --system-colors-miscellaneous-sidebar-fill-selected: rgba(142, 142, 147, 0.25);
}

[data-system-colors-mode="IC-light"] {
  --system-colors-miscellaneous-sidebar-fill-selected: rgba(255, 255, 255, 1);
}

[data-system-colors-mode="IC-dark"] {
  --system-colors-miscellaneous-sidebar-fill-selected: rgba(144, 144, 153, 0.3);
}

[data-system-colors-mode="IC-dark-elevated"] {
  --system-colors-miscellaneous-sidebar-fill-selected: rgba(144, 144, 153, 0.3);
}

/* === Footer Landscape Padding Fix ======== */
/*
  This CSS ONLY affects the .footer-details section when the device is in landscape mode
  (i.e., width > height, and for typical landscape breakpoints 600px - 1024px, e.g. iPad/tablet/mobile landscape).
  It adds side padding and/or max-width so that content does not touch the edges of the viewport.
  No changes are made for desktop or for mobile portrait.
*/

@media (orientation: landscape) and (max-width: 1024px) {
  .footer-details {
    /* Add horizontal padding to prevent content touching screen edges */
    padding-left: 5vw;
    padding-right: 5vw;
    /* Add a max-width so contents don't get too stretched on wider landscape tablets */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  /* Optional: Make sure inner paragraphs and links don't overflow if content is long */
  .footer-details .p,
  .footer-details .home-cyber-risk {
    word-break: break-word;
    text-align: center;
  }
}

/* 
  For slightly smaller landscape screens (e.g., mobile landscape), increase padding further if needed
  to ensure spacing remains comfortable even on 932x430px and similar.
*/
@media (orientation: landscape) and (max-width: 950px) {
  .footer-details {
    padding-left: 6vw;
    padding-right: 6vw;
    max-width: 98vw;
  }
  .element-HOME .logos {
    width: 200px;
    
  }
  .element-HOME .text-wrapper {
    width: 400px;
    right: 10px;
  }

  .element-HOME .email-telephone {
    /* left: 250px; */
  }
  .element-HOME .p {
    left: 250px;
  }
}

/*
  If you want even more breathing room on very small landscape screens, you can tweak the padding below:
*/
@media (orientation: landscape) and (max-width: 700px) {
  .footer-details {
    padding-left: 8vw;
    padding-right: 8vw;
    max-width: 100vw;
  }
}

/* ======== End Footer Landscape Padding Fix ===