body {
  background: linear-gradient(180deg, var(--SME-purple, #7E57C5) 3.99%, rgba(190, 157, 250, 0.40) 44.21%, #FFF 92.98%) no-repeat !Important;
}


.text-wrapper-5 {
  font-family: var(--h6-font-family);
  font-weight: var(--h6-font-weight);
  color: #ffffff;
  font-size: var(--h6-font-size);
  letter-spacing: var(--h6-letter-spacing);
  line-height: var(--h6-line-height);
  font-style: var(--h6-font-style);
  padding-top: 32px;
}

.text-wrapper-6 {
  font-family: var(--h3-font-family);
  font-weight: var(--h3-font-weight);
  color: var(--system-colors-miscellaneous-sidebar-fill-selected);
  font-size: var(--h3-font-size);
  letter-spacing: var(--h3-letter-spacing);
  line-height: var(--h3-line-height);
  font-style: var(--h3-font-style);
}


.purple-bgrd {
  top: 0;
  left: 2px;
  border-radius: 25px;
  background: linear-gradient(
    90deg,
    rgba(102, 36, 128, 1) 0%,
    rgba(128, 83, 193, 1) 100%
  );
}

.red-bgrd {
  top: 0;
  left: 2px;
  border-radius: 25px;
  background: linear-gradient(180deg, rgba(232, 80, 91, 1) 47%, rgba(128, 83, 193, 1) 100%);
}
.how-resilient-is {
  font-family: "Lato", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 44px;
  line-height: normal;
}

.text-wrapper-7 {
  letter-spacing: 0;
  line-height: 44px;
  font-family: "Lato", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 44px;
  line-height: normal;
}

.text-wrapper-9 {
  font-size: 20px;
  letter-spacing: normal;
  line-height: var(--h6-line-height);
  font-family: var(--h6-font-family);
  font-style: var(--h6-font-style);
  font-weight: var(--h6-font-weight);
  color: #ffffff;
}


.NCSC-BUTTON-2 {
  width: 383px;
  height: 51px;
  background: linear-gradient(
    270deg,
    rgba(0, 11, 140, 1) 0%,
    rgba(126, 87, 197, 1) 99%
  );
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 28px;
}
.hero-pic {
  width: 100%;
  object-fit: cover;
  position: relative;
}

.text-wrapper-10 {
  font-family: var(--h6-font-family);
  font-weight: var(--h6-font-weight);
  color: var(--variable-collection-core-dk-blue);
  font-size: var(--h6-font-size);
  letter-spacing: var(--h6-letter-spacing);
  line-height: var(--h6-line-height);
  font-style: var(--h6-font-style);
  margin: 0 26px 0 0;
  margin-bottom: 1rem;
}

.text-wrapper-11 {
  font-family: var(--h1-font-family);
  font-weight: var(--h1-font-weight);
  color: var(--variable-collection-core-dk-blue);
  font-size: var(--h1-font-size);
  letter-spacing: var(--h1-letter-spacing);
  line-height: var(--h1-line-height);
  font-style: var(--h1-font-style);
}


.element-HOME-BODY .CLICK-HERE-4 {
  margin-top: -6.50px;
  margin-bottom: -4.50px;
  margin-left: -1.50px;
  margin-right: -1.50px;
  color: #ffffff;
  position: relative;
  width: fit-content;
  font-family: "Lato", Helvetica;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 22px;
  white-space: nowrap;
}

.rectangle-9 {
  background-color: #ffffff;
  border-radius: 22px;
  border: 2px solid;
  border-color: #f2ebfe;
  padding: 24px 24px 42px 24px;
  position: relative;
}
.img-set {
	margin-top: -32px;
}


.text-wrapper-13 {
  align-self: stretch;
  font-family: var(--h6-font-family);
  font-weight: var(--h6-font-weight);
  color: #683EB6;
  font-size: var(--h6-font-size);
  letter-spacing: var(--h6-letter-spacing);
  line-height: var(--h6-line-height);
  font-style: var(--h6-font-style);
  border-bottom: 1px solid #7E57C5;
  padding: 12px 0;
  margin-bottom: 16px;
}

.text-wrapper-14 {
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--variable-collection-core-dk-blue);
  font-size: var(--body-font-size);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  font-style: var(--body-font-style);
  min-height: 100px;
}
.secure {
height: 59px;
}

.cyber-security-is {
  font-family: var(--h6-font-family);
  font-weight: var(--h6-font-weight);
  color: var(--variable-collection-core-dk-blue);
  font-size: var(--h6-font-size);
  letter-spacing: var(--h6-letter-spacing);
  line-height: var(--h6-line-height);
  font-style: var(--h6-font-style);
}

.text-wrapper-15 {
  font-family: var(--h3-font-family);
  font-weight: var(--h3-font-weight);
  color: var(--variable-collection-SME-purple);
  font-size: var(--h3-font-size);
  letter-spacing: var(--h3-letter-spacing);
  line-height: var(--h3-line-height);
  font-style: var(--h3-font-style);
}

.section-paragraph {
  position: absolute;
  width: 456px;
  left: 0;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--variable-collection-core-dk-blue);
  font-size: var(--body-font-size);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  font-style: var(--body-font-style);
}

p {
margin-bottom: 1rem !important;
}

/* Custom CSS */
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1140px!important;
    }
	.overlap-9 {
		 width: 90%;
	}
}
.button {
    justify-content: center;
    background: linear-gradient(90deg, rgba(102, 36, 128, 1) 0%, rgba(128, 83, 193, 1) 100%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 28px;
	color: #ffffff;
    text-decoration: none;
	font-weight: 700;
	border: 0px;
	width: max-content;
font-family: var(--h6-font-family);
}
a.button:hover {
	color: #ffffff;
  text-decoration: underline!important;
}
.button1 {
    /* background: linear-gradient(270deg, rgba(0, 11, 140, 1) 0%, rgba(126, 87, 197, 1) 99%); */
  background: #595959;
  display: flex;
  align-items: center;
  padding: 6px 28px;
  border-radius: 28px;
	color: #ffffff;
  text-decoration: none;
	font-weight: 600;
	border: 0px;
	width: max-content;
  font-family: var(--h6-font-family);
}

a.button1:hover {
  cursor: default;
  background: #595959;
  text-decoration: none!important;
}
.button2 {
    background: #683EB6;
    display: flex;
    align-items: center;
    padding: 12px 28px;
    border-radius: 28px;
	  color: #ffffff;
    text-decoration: none;
	  font-weight: 600;
	  border: 0px;
	  width: max-content;
    font-family: var(--h6-font-family);
}
a.button2:hover {
  background: #683EB6;
  text-decoration: underline!important;
}
.button3 {
    background: linear-gradient(270deg, rgba(0, 11, 140, 1) 0%, rgba(126, 87, 197, 1) 99%);
    display: flex;
    align-items: center;
    padding: 12px 28px;
    border-radius: 28px;
	  color: #ffffff;
    text-decoration: none;
	  font-weight: 600;
	  border: 0px;
	  width: max-content;
    font-family: var(--h6-font-family);
}
a.button3:hover {
	color: #ffffff;
  text-decoration: underline!important;
}
.m-b-2 {
	margin-bottom: 2rem!important;
}
.m-b-4 {
	margin-bottom: 4rem;
}
.mt-5 {
	margin-top: 1rem;
}
.margin-3 {
	margin: 2.5rem 2.5rem 1.5rem 2.5rem;
}
a .icon {
	margin: 0 24px
}
.circuit-overlap {
    position: absolute;
    width: 797px;
    background-size: 100% 100%;
    background-image: url(/img/circuit-2.svg);
    right: 0px;
    height: 715px;
}
@media (min-width: 768px) {
	.pl-0 {
		padding-left: 0;
	}
}

@media (max-width: 767px) {
	.purple-bgrd {
		padding: 2rem;
	}
	.red-bgrd-pd {
		padding: 2rem;
	}
	.margin-3 {
		margin: 0rem;
		padding-top: 26px;
	}
	.text-wrapper-11 {
		font-size: 45px;
		line-height: normal;
	}
	.text-wrapper-6 {		
		font-size: var(--h4-font-size);
		line-height: var(--h4-line-height);
	}
	.image-sec {
        position: relative;
    }
    .image-sec img {
        position: absolute;
        top: -110px;
        right: 0px;
        width: 22%;
    }
	.text-wrapper-9 {
		width: 90%;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.text-wrapper-7 {
		letter-spacing: 0;
		line-height: 34px;
		font-family: "Lato", Helvetica;
		font-weight: 400;
		color: #ffffff;
		font-size: 32px;
		line-height: normal;
	}
	.text-wrapper-9 {
		font-size: 16px;	
        line-height: 20px;		
	}
	.margin-3 {
		margin: 1em 1em 0em 1em;
	}
	.text-wrapper-11 {
		font-size: 32px;        
		line-height: 36px;
	}
	.text-wrapper-10 {
		font-size: 20px;        
		line-height: 24px;		
	}
	.alert-img {
		position: absolute;
        left: 219px;
        width: 30%;
        bottom: 0px;
	}
	.image-sec {
		position: relative;
	}
	.text-wrapper-6 {
		font-size: var(--h4-font-size);
	}
}
@media (min-width: 992px) and (max-width: 1279px) {
	.text-wrapper-11 {
		font-size: var(--h-mobile-font-size);
		line-height: var(--h-mobile-line-height);
		width: 80%;
	}
	.text-wrapper-10 {
		font-size: var(--h6-mobile-font-size);
		line-height: var(--h6-mobile-line-height);
		width: 70%;
	}
	.alert-img {
		padding-bottom: 0px;
		width: 30%
	}
}

@media (min-width: 1200px) {
	.text-wrapper-9 {
		width: 75%;
	}
	.alert-img {
		padding-top: 24px;
	}
}
@media (max-width: 1200px) {
	.overlap-group-7  {
		padding-bottom: 32px;
	}
}

: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);
}