@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,75..125,100..900;1,75..125,100..900&family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap');


:root {
  --context-heading: #7FD0C4;
  --ethics-heading: #FFA237;
  --lead-heading: #451BDD;
  --context-light-green: #E3FFFC;
  --ethics-light-orange: #FEEAD2;
  --lead-light-blue: #E5F4FD;
}

.container{
  width: 60% !important;
  margin: auto !important; 
}


body {
  /* color: #222; */
  color:#000;
  margin-top: 0;
  background: #fff;
}

h1, h2, h3, h4, h5, h6, p{
    margin: 0; 
}


a{
  font-weight: normal !important;
}

.tile-image, .section-video-image {
  /* box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease; */
}

/* Font Preset Classes */
.ft-theme-title {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 125; 
  /* font-weight: 300; */
  font-weight: 600;
  font-size: 50px !important;
  letter-spacing: 0.1em; /* 10% spacing */
  text-align: center;
  margin: 50px 0 !important;
}

.ft-intro-title {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 125;
  font-weight: 100;
  font-size: 32px !important;
}

.ft-anchor-text {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 125;
  font-weight: 800; 
  font-size: 22px !important;
}

.ft-standfirst-desktop {
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  line-height: 35px !important;
  margin: 10px 0 !important;
}

.ft-standfirst-desktop-large {
  font-family: 'Open Sans', sans-serif;
  font-size: 28px;
  line-height: 40px !important;
  margin: 10px 0 !important;
}

.ft-header-desktop {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 125;
  font-weight: 700;
  font-size: 32px !important;
  margin: 10px 0 !important;
  color: #000 !important;
}

.ft-header-2-desktop {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 125;
  font-weight: 700;
  font-size: 24px !important;
  margin: 10px 0 !important;
  color: #000 !important;
}

.ft-quote {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 125;
  font-weight: 300;
  font-size: 24px;
  font-style: italic;
  line-height: 45px !important;
}

.ft-read-more {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 20px !important;
  margin: 30px 0 0 0;
  color: #000 !important;
}

.tile-image, .section-video-image {
  width: 100% !important;
}

.section-video-image{
  margin-bottom: 10px;
}

.tile-text-bg-context-light-green {
  background: var(--context-light-green);
}

.tile-text-bg-ethics-light-orange {
  background: var(--ethics-light-orange);
}
.tile-text-bg-lead-light-blue {
  background: var(--lead-light-blue);
}


#contextualise-section, #ethics-section, #lead-section{
  border-top: 1px solid #D9D9D9;
  margin-bottom: 30px !important; 
}


/*----HERO SECTION (refactored) -----*/
.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* min-height: 90vh; */
  padding: 0;
  color: #fff;
  /* background:
    linear-gradient(90deg, #05262f 0%, #05262f 45%, #41001d 100%),
    url('/cisiweb2/image/forward_thinking/David_Vintiner_SUNDAY_15505.jpg') center/cover no-repeat; */
  overflow: hidden;
  height: 75vh;
  margin-top: 150px;
}

.hero-video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  opacity: .35;
  /* background: radial-gradient(circle at 70% 30%, rgba(255,0,120,.4), transparent 60%); */
  z-index: 1;
}

.hero-section .row {
  position: relative;
  z-index: 2;
}

.hero-title, .hero-sub-title {
  margin: 0 0 10px 0;
  /* line-height: 1.05; */
  text-align: center; 
  color: #fff !important;
}

.hero-title {
  opacity: 0;
}

.hero-sub-title {
  opacity: 0;
  transform: translateY(30px);
}

.hero-title{
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 125;
  font-weight: 700;
  font-size: 75px !important;
  margin-bottom: 20px !important;
}

.hero-title-thin{
  font-weight: 200;
}

.hero-sub-title{
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 125;
  font-weight: 300;
  font-size: 30px !important;
}

/*-----INTRO SECTION-----*/
.IS1-title{
  color: #000;
  text-align: center;
  /* line-height: normal !important; */
  margin: 40px 0 20px 0 !important;
}

#intro-section{
  margin: 0 0 50px 0;
}

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-container iframe {
  width: 100%;
  height: 100%;
}

.circle-1, .circle-2, .circle-3 {
  /* Slightly reduced width to create larger visual gaps between circles */
  width: 100%;
  aspect-ratio: 1 / 1;      /* keep perfect square so border-radius makes a circle */
  border-radius: 50%;
  background: var(--clr-context, #7FD0C4); /* base colour; override individually below */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin: 0 auto 30px;      /* center within column + vertical spacing under row */
  transition: filter .25s ease, transform .25s ease;
}

/* Provide distinct theme colours (adjust as needed) */
.circle-1 { background: var(--context-heading); }
.circle-2 { background: var(--ethics-heading); }
.circle-3 { background: var(--lead-heading); }

/* Optional hover feedback */
.circle-1:hover, .circle-2:hover, .circle-3:hover { filter: brightness(1.1); }

.circle-text{
  color: #fff;
  text-align: center;
}

.IS2-circle-wrapper{
  margin: 50px 0 !important;
}


/*-----CONTEXTUALISE AND TRANSLATE SECTION-----*/

.contextualise-title {
  color: var(--context-heading);
}

.CS4-row{
  margin-top: 30px;
}
.CS4-image-wrapper {
  padding-right: 0;
}

.CS4-mobile-image {
  display: none;
}

.CS4-text-container{
  padding-left: 0;
}

.CS4-text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 20px;
  padding-left: 0;
  color: #000;
  /* padding-right: 30%; */
}

.CS4-text {
  /* padding-left: 20px; */
  padding: 10% 20% 10% 20px;
}

.CS5-image-wrapper{
  padding: 0;
  margin-top: 20px;
}

.CS5-text-wrapper {
  /* width: 100%; */
  padding: 10px 15px !important;
  color:#000 !important;
}

/*-----ETHICS SECTION-----*/

.ethics-title {
  color: var(--ethics-heading);
}

.ES4-row{
  margin-top: 30px;
}

.ES4-image-wrapper {
  padding-right: 0;
}

.ES4-mobile-image {
  display: none;
}

.ES4-text-container{
  padding-left: 0;
}

.ES4-text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 20px;
  padding-left: 0;
  color: #000;
}

.ES4-text {
  /* padding-left: 20px; */
  padding: 10% 20% 10% 20px;
}

.ES5-image-wrapper {
  padding: 0;
  margin-top: 20px;
  /* margin-bottom: 10px; */
}

.ES5-text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
  /* height: 100%; */
  color: #000;
}

.ES5-text-wrapper p {
  margin-bottom: 10px;
  /* line-height: 1.4; */
}



/*-----CONTEXTUALISE AND TRANSLATE SECTION-----*/

.lead-title {
  color: var(--lead-heading);
}

.LS4-row{
  margin-top: 30px;
}

.LS4-image-wrapper {
  padding-right: 0;
}

.LS4-mobile-image {
  display: none;
}

.LS4-text-container{
  padding-left: 0;
}

.LS4-text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 20px;
  padding-left: 0;
  color: #000;
}

.LS4-text {
  /* padding-left: 20px; */
  padding: 10% 20% 10% 20px;
}

.LS5-image-wrapper{
  padding: 0;
  margin-top: 20px;
}

.LS5-text-wrapper {
  /* width: 100%; */
  padding: 10px 15px !important;
  color:#000 !important;
}

/*Further Resources Section*/
.FR1-text-wrapper {
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.FR1-text-image-wrapper{
  margin: 20px 0;
}

.FR1-image {
  width: 100% !important;
}

.FR1-text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.FR1-text-image-wrapper{
  margin: 20px 0;
}

.ft-fr-title{
    font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 125; 
  font-weight: 700;
  margin: 40px 0 20px 0 !important;
  color: #000 !important;
  text-align: center;
  letter-spacing: 5px;
  position: relative;
  display: inline-block;
  width: 100%;
  background: #fff;
  padding: 0 20px;
  z-index: 1;
  font-size: 42px !important;
}

.ft-fr-title::before,
.ft-fr-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 20%;
  height: 1px;
  background-color: #000;
}

.ft-fr-title::before {
  left: 0;
}

.ft-fr-title::after {
  right: 0;
}


/*-----FR2 SECTION-----*/

.FR2-row{
  margin-top: 30px;
}

.FR2-column {
  display: flex;
  flex-direction: column;
}

.FR2-column a {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.FR2-image-wrapper {
  padding: 0;
  margin-top: 20px;
}

.FR2-text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
  flex: 1;
  color: #000;
}

.FR2-text-wrapper p {
  margin-bottom: 10px;
  /* line-height: 1.4; */
} 




@media(min-width: 1600px){
  .container{
    width: 60% !important;
  }
  .ft-standfirst-desktop {
    font-size: 24px;
    line-height: 35px !important;
  }
  .circle-1, .circle-2, .circle-3 {
    width: 70%;
  }
}

@media(min-width: 2000px){
  .ft-fr-title::before,
  .ft-fr-title::after {
    width: 30%;
  }
  .ft-standfirst-desktop-large {
    font-size: 30px;
    line-height: 40px !important;
  }
}

@media(max-width: 1599px){
.hero-section {
  margin-top: 140px;
}
  .container{
    width: 60% !important;
  }
  .circle-1, .circle-2, .circle-3 {
    width: 90%;
  }
  
  .ft-theme-title {
    font-size: 45px !important;
  }
  
  .ft-intro-title {
    font-size: 30px !important;
  }
  
  .ft-header-desktop {
    font-size: 30px !important;
  }
  
  .ft-header-2-desktop {
    font-size: 22px !important;
  }
  
  .ft-standfirst-desktop {
    font-size: 22px;
  }
  
  .ft-standfirst-desktop-large {
    font-size: 20px;
    line-height: 30px !important;
  }
  
  .ft-quote {
    font-size: 22px;
    line-height: 42px !important;
  }
  
  .hero-title {
    font-size: 70px !important;
  }
  
  .hero-sub-title {
    font-size: 28px !important;
  }
  
  .ft-fr-title {
    font-size: 38px !important;
  }
}


/* col-lg  */
@media(max-width: 1199px){

  .hero-section {
    margin-top: 70px;
  }

  .container{
    width: 80% !important;
  }

  .circle-1, .circle-2, .circle-3 {
    width: 90%;
  }

  .ft-theme-title {
    font-size: 42px !important;
  }
  
  .ft-intro-title {
    font-size: 28px !important;
  }
  
  .ft-header-desktop {
    font-size: 28px !important;
  }
  
  .ft-header-2-desktop {
    font-size: 22px !important;
  }
  
  .ft-standfirst-desktop {
    font-size: 22px;
    line-height: 32px !important;
  }
  
  .ft-standfirst-desktop-large {
    font-size: 19px;
    line-height: 29px !important;
  }
  
  .ft-quote {
    font-size: 22px;
    line-height: 40px !important;
  }
  
  .hero-title {
    font-size: 65px !important;
  }
  
  .hero-sub-title {
    font-size: 28px !important;
  }
  
  .ft-fr-title {
    font-size: 36px !important;
  }
}

/* col-md */
@media(max-width: 991px){
  .circle-1, .circle-2, .circle-3 {
    width: 50%;
  }
  .ft-theme-title {
    font-size: 40px !important;
  }
  
  .ft-intro-title {
    font-size: 28px !important;
  }
  
  .ft-anchor-text {
    font-size: 20px !important;
  }
  
  .ft-standfirst-desktop {
    font-size: 20px;
    line-height: 30px !important;
  }
  
  .ft-standfirst-desktop-large {
    font-size: 22px;
    line-height: 33px !important;
  }
  
  .ft-header-desktop {
    font-size: 28px !important;
  }
  
  .ft-header-2-desktop {
    font-size: 22px !important;
  }
  
  .ft-quote {
    font-size: 22px;
    line-height: 38px !important;
  }
  
  .ft-read-more {
    font-size: 18px !important;
  }
  
  .hero-title {
    font-size: 60px !important;
  }
  
  .hero-sub-title {
    font-size: 26px !important;
  }
  
  .ft-fr-title {
    font-size: 36px !important;
  }
  .ft-fr-title::before,
  .ft-fr-title::after {
    width: 10%;
  }
}

/* col-sm */
@media(max-width: 767px){

  .ft-theme-title {
    font-size: 32px !important;
  }
  
  .ft-intro-title {
    font-size: 24px !important;
  }
  
  .ft-anchor-text {
    font-size: 18px !important;
  }
  
  .ft-standfirst-desktop {
    font-size: 18px;
    line-height: 28px !important;
  }
  
  .ft-standfirst-desktop-large {
    font-size: 17px;
    line-height: 27px !important;
  }
  
  .ft-header-desktop {
    font-size: 24px !important;
  }
  
  .ft-header-2-desktop {
    font-size: 20px !important;
  }
  
  .ft-quote {
    font-size: 20px;
    line-height: 34px !important;
  }
  
  .ft-read-more {
    font-size: 16px !important;
  }
  
  .hero-title {
    font-size: 48px !important;
  }
  
  .hero-sub-title {
    font-size: 22px !important;
  }
  
  .ft-fr-title {
    font-size: 28px !important;
    letter-spacing: 3px;
  }
  
  .CS4-desktop-image {
    display: none;
  }
  
  .CS4-mobile-image {
    display: block;
  }
  
  .ES4-desktop-image {
    display: none;
  }
  
  .ES4-mobile-image {
    display: block;
  }
  
  .LS4-desktop-image {
    display: none;
  }
  
  .LS4-mobile-image {
    display: block;
  }
  
  .CS4-image-wrapper, .ES4-image-wrapper, .LS4-image-wrapper {
    padding-right: 15px;
  }

  .CS4-text-wrapper{
    margin-right: 0px;
    margin-right: 15px;

  }
  .ES4-text-wrapper, .LS4-text-wrapper{
    margin-left: 15px;
    margin-right: 0px;
  }
  
  .CS4-text-container {
    padding-left: 15px;
    padding-right: 0;
  }

  .IS2-text{
    margin-top: 10px;
  }

  .ft-fr-title::before,
  .ft-fr-title::after {
    width: 0;
  }
  
}

@media(max-width: 575px){
  .ft-anchor-text{
    font-size: 16px !important;
  }
    .circle-1, .circle-2, .circle-3 {
    width: 100%;
  }
}