html,body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  padding-top: 10px;
  /* padding-top: 20px; */
}

body {
  background-color: #1A1D25 !important;
}

html {
  scroll-behavior: smooth;
}

/* Back to top */

#Top {
   height: 50px;
   padding: 20px 0px;
}

.backtotop {
  z-index: 3;
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 0px 15px 35px 0px;
  width: 40px;
  height: 40px;
}


/* Table of Contents */

.info-banner {
  font-size: 16px;
  font-family: 'Nunito', sans-serif;
  color: white;
  background-color: #2755D0;
  padding: 16px;
  border-radius: 0px 16px 0px 16px; 
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin: 8px 0px;
}



.yellow-link { 
              color: #F4D4A9;
              font-family: 'Nunito', sans-serif;
              font-size: 20px;
              font-style: normal;
              font-weight: 400;
              height: 40px;
              line-height: 175%;
              text-decoration:underline; }



.yellow-link:hover { 
              color: #D3AE7A;}


.youtube { 
display: flex;
justify-content: center;
width: 40% }


.content {
font-family: 'Nunito', sans-serif;
  font-size: 100%;
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

#Intro, #ProblemStatement, #Features, #Personas, #Competitor, #Experience, #PaperPrototype, #Screens, #Tabs, #UserTesting, #Summary,
#Bodhran, #Sketches {
   height: 50px;
   padding: 20px 0px;
}

 #Responsibilities, #Reception, #ProjectOverview, #Research, #DesignSystem, #PrototypesandTesting, #Handoff, 
 #MobTesting, #Release, #BrandActivation, #LogoIterations, #CrossplatformVisualisation, 
 #Design{
  scroll-margin-top: 15rem;
} 


.background {
    height: 100vh;
    z-index: -1;
    background-position:left top, right top;
    background-repeat:repeat-y, repeat-y;
    position: fixed;
    background-size: 15%;
    width: 100%;
}


.navbar {
 width: 100%;
 padding: 0px 8px 0px 24px !important;
 margin: 0% auto;
 background-color: #1A1D25;
}

.add-shadow {
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px
}


.navbar-brand {
  color: #F4D4A9;
font-family: 'Literata', serif;
font-size: 18px !important;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 27px */
padding: 16px 0px !important;
}

.navbar-brand:hover, .nav-link:hover {
  color: #D3AE7A;
}

.nav-link:hover {
  text-decoration: underline !important;
}

.product-designer {
  color: #FFF; 
font-family: 'Nunito', sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;"
}


#logo {
  width: 80px;
  height: auto;
  -webkit-transition: all 500ms; /* For Safari 3.1 to 6.0 */
transition: all 500ms;
}

.nav-link {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  color: #F4D4A9;
}

.nav-tabs .nav-link {
    border: 0px solid transparent !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.nav-tabs a.nav-link:hover {
    border: 0px solid transparent !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}




.navbar-toggler-icon {
background-image: url('../images/hamburger.svg');
}

.navbar-toggler {
 width: 55px !important;
 padding: 0px !important;
}

.navbar-nav { text-align: center;}

.dropdown-item {
  font-size: 80% !important;
  font-family: 'Inter' !important;
  padding: 10px !important;
  width: 100% !important;
  border-bottom: solid 2px white !important;
  }

  .dropdown-item:hover {
    background-color: white !important;
    width: 140% !important;
    border-bottom: solid 2px #4dc1b9 !important;
    }

.dropdown-menu {
  border: none !important;
  width: 100% !important;
}


      .progress-container {
        width: 100%;
        height: 8px;
        background: none;
      }

      .progress-bar {
        height: 4px;
        background-color: #4dc1b9 !important;
        width: 0%;
      }

      .header {
        position: fixed;
        top: 91px;
        z-index: 4000;
        width: 100%;
        background-color: none !important;
      }

.container {
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 150%;
  text-align: left;
  color: #fff;
  width: 100% !important;
  /* background-color: red; */
}

.page {
  display: flex;
  max-width: 1024px !important;
  width: 100%;
  padding: 120px 24px !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 64px;
  align-self: stretch;
  margin: 0 auto;
}

.page img {
  max-width: 100%;
}

.intro {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: 24px;
align-self: stretch;
padding-bottom: 80px;
}

.cats {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 32px;
align-self: stretch;
}

.photos {

  display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
gap: 12px;
align-self: stretch;
padding-top: 24px;

}

.photos img {
  width: 30%;
}

.article-half-column {

  display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 24px;
padding-top: 24px;

}

.article-half-column img {
  width: 40%;
}

 .article {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 120px;
align-self: stretch;
}

.article a, .info-banner a { 
  color: #F4D4A9;
  text-decoration: underline;
}

.article a:hover {
  color: #D3AE7A;
}

.info-banner a:hover {
  color: #D3AE7A;
}

.article-name {
  align-self: stretch;
  color: #F4D4A9;
  text-align: left;
  font-family: 'Literata', serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 150%; /* 96px */
}

.article-h1 {
  align-self: stretch;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 32px;
  
  font-weight: 700;
  line-height: 125%; /* 40px */
}

.article-h2, .article-paragraph {
  align-self: stretch;
  color: #ECF1E9;
  text-align: left;
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 170%;
}

.article-h2 a { 
  color: #F4D4A9;
  text-decoration: underline;
}

.article-h2 a:hover {
  color: #D3AE7A;
}

.article-h3 {
  align-self: stretch;
  color: #F4D4A9;
  font-family: 'Nunito', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 150%; /* 40px */
}

.article-spacing {
   display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

ul {
  color: #ECF1E9;
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  line-height: 150%;
  padding: 0px 16px;
}


ul li 
{ padding: 8px 0px; }

.faq-drawer__content-wrapper a {
  color: #F4D4A9;
  text-decoration: underline;
}

.faq-drawer__content-wrapper a:hover {
  color: #D3AE7A;
  width: 100%;
}


.intro-name {
  align-self: stretch;
  color: #F4D4A9;
  font-family: Nunito, sans-serif;
font-weight: 200;
font-size: 56px;
line-height: 120%;
letter-spacing: 0%;
}

.intro-bold { 
  font-family: 'Literata', serif;
  font-weight: 800;
}

.literata-bold {
  font-family: 'Literata', serif;
  
  font-weight: 700;
}

.intro-description {
  mamax-width: 880px;
  align-self: stretch;

  color: #ECF1E9;
  text-align: left;
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  
  font-weight: 400;
  line-height: 150%;
}

.intro-description a {
  color: #F4D4A9;
}

.intro-description a:hover {
  color: #D3AE7A;
}


.cards {
 display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
align-self: stretch;
margin: 0 auto;
}

.card-container {
 display: flex;
padding: 24px;
align-items: flex-start;
gap: 24px;
align-self: stretch;
border-radius: 0px 16px;
background: #F2F1EE;
margin: 0 auto;
cursor: pointer;
}

.card-img-article {
  width: 363px !important;
  height: 262px;
  border-radius: 0px 25px 0px 25px !important;
}

.img-article {
  width: 100% !important;
  height: auto;
  border-radius: 0px 25px 0px 25px !important;
}



.card-content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
gap: 24px;
}

.card-tags {
  align-self: stretch;
  color: #1A1D25;
font-family: 'Nunito', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 150%; /* 18px */
letter-spacing: 1px;

}

.article-tags {
  align-self: stretch;
  color: #fff;
font-family: 'Nunito', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 150%; /* 18px */
letter-spacing: 1px;

}


.card-title-and-subtitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.card-title {
  align-self: stretch;
  color: #0B0E15;
  font-family: 'Literata', serif;
  font-size: 32px;
  
  font-weight: 700;
  line-height: 125%; /* 40px */
}

.card-subtitle {
  align-self: stretch;
  color: #465064;
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  
  font-weight: 400;
  line-height: 150%; /* 27px */

}



    .container h3 {
      text-align: left;
      font-family: 'latobold';
      font-size: 150%;
      line-height: 120%;
      color: #4dc1b9;}

      .container h4 {
        text-align: left;
        font-family: 'latobold';
        font-size: 100%;
        color: #595959;
        padding-top: 20px;}


          .container h5 {
            font-family: 'latobold';
            color: #fff;
            font-size: 150%;
            margin-bottom: 30px;
            text-transform: uppercase;}

                .container h6 {
                font-family: 'latobold';
                color: #000;
                font-size: 120%;}

  .container p, .container ul {
    margin: 30px 0px;
    font-family: 'Literata', serif;
    font-size: 120% !important;
    line-height: 160%;
  }

  .spacing-48 {
     margin-bottom: 48px
  }

.container a {
  color: #4dc1b9;
}


.container a:hover {
  color: #ff6600;
  text-decoration: none;
}



.bold {
    font-family: 'latobold';}

.competitor {
      margin: 10px;
      border-radius: 10px;
      padding: 10px;}



.white-text {
  font-family: 'southbank_ltregular' !important;
  font-weight: normal;
  
}

footer {
background-color: none;
color: #232323;
position: relative;
bottom: 0;
text-align: center;
width: 80%;
margin: 10px 10%;
height: 60px;
line-height: 60px;
font-size: 50%;
float: left;
}

.copyright {
  background-color: none;
  text-align: left;
  float: left;
  width: 60%;
}

.socialmedia {
  float: right;
  width: 40%;
  text-align: right;
}

a svg:hover #linkedin,
a svg:hover #instagram {
  fill: #111;
}

a svg #linkedin,
a svg #instagram {
  transition: 200ms;
  transition-timing-function: ease-in-out;
  -webkit-transition: 200ms;
  -webkit-transition-timing-function: ease-in-out;
}


button {
  display: flex;
width: 200px;
padding: 16px 0px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 0px 16px !important;
background: #1A1D25;
color: #FFF;
text-align: center;
font-family: 'Nunito', sans-serif !important;
font-size: 16px;
font-weight: 700;
line-height: 16px !important;
border-style: none;
cursor: pointer;

}


/* Custom CSS for the content tabs */

 .nav {
      flex-wrap: nowrap !important;
       padding-bottom: 8px;
       display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
 }

.nav-tabs {
    border-bottom: 2px solid #fff !important;
 }

 .nav-link {
    display: block;
    padding: 0.5rem 1rem !important;

    -webkit-flex: 1 1 15em; /* this */
    flex: 1;
}

.content-tabs {
  white-space: nowrap; /* Prevent the tabs from wrapping */
  overflow-x: auto; /* Enable horizontal scrolling */
  background-color: #fff; /* Optional: Set the background color for the tabs */
}

.content-tabs .nav-item {
  display: inline-block; /* Display the tabs in a row */
  margin-right: 16px; /* Optional: Add some spacing between the tabs */
}

.content-tabs .nav-link {
  color: #595959;
  font-family: 'latoregular';
  font-size: 90%;
}

.content-tabs .nav-link.active {
  font-family: 'latobold';
}

.nav-link:hover {
    border: 0px !important;
}

.content-tabs::-webkit-scrollbar-thumb {
  background-color: #a3e0d2;
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
    border-radius: 100px;
}

/* Custom scrollbar style */
.content-tabs::-webkit-scrollbar {
      background: #f4f4f4;
       border-top: 6px solid #fff;
    border-bottom: 6px solid #fff;
}

.content-tabs::-webkit-scrollbar:horizontal {
  height: 12px;
}

.content-tabs::-webkit-scrollbar,
.content-tabs::-webkit-scrollbar-track {
  display: block !important;
   background: #f4f4f4;
       border: 4px solid white;
   height: 6px;
}


::selection {
   color: #000;
   background-color: #a3e0d2;
} 


.footer {
font-size: 16px;
font-family: 'Nunito', sans-serif;
color: #ACACAC;
width: 100%;
text-align: center;
}

.footer a {
  color: #F4D4A9;
}

.footer a:hover {
  color: #D3AE7A;
}


/* ------------ Accordion component ------------ */

.faq-drawer {
  margin-bottom: 0px;
}

.faq-drawer__content-wrapper {
  max-height: 0px;
  overflow: hidden;
  transition: 0.25s ease-in-out;
}

.faq-drawer__title {
  border-top: #4F5873 2px solid;
  cursor: pointer;
  display: block;
  font-family: 'Nunito', sans-serif;
  color: white;
  font-weight: 400;
  padding: 8px 0 8px 0;
  margin-bottom: 0;
  transition: all 0.25s ease-out;
}

.faq-drawer__title::after {
  border-style: solid;
  border-width: 1px 1px 0 0;
  content: " ";
  display: inline-block;
  float: right;
  height: 10px;
  left: 2px;
  position: relative;
  right: 20px;
  top: -8px;
  transform: rotate(135deg);
  transition: 0.35s ease-in-out;
  vertical-align: top;
  width: 10px;
}

.faq-drawer__title_img {
  border-top: #4F5873 2px solid;
  cursor: pointer;
  display: block;
  font-family: 'Nunito', sans-serif;
  color: white;
  font-weight: 400;
  padding: 8px 0 8px 0;
  margin-bottom: 0;
  transition: all 0.25s ease-out;
}

.faq-drawer__title_img::after {
  border-style: solid;
  border-width: 1px 1px 0 0;
  content: " ";
  display: inline-block;
  float: right;
  height: 10px;
  left: 2px;
  position: relative;
  right: 20px;
  top: 24px;
  transform: rotate(135deg);
  transition: 0.35s ease-in-out;
  vertical-align: top;
  width: 10px;
}


/* OPTIONAL HOVER STATE */
.faq-drawer__title:hover { 
  color: #F4D4A9  ;
}

.faq-drawer__title_img:hover { 
  color: #F4D4A9  ;
}

.faq-drawer__trigger:checked
  + .faq-drawer__title
  + .faq-drawer__content-wrapper {
  max-height: 1200px;
}

.faq-drawer__trigger:checked
  + .faq-drawer__title_img
  + .faq-drawer__content-wrapper {
  max-height: 1200px;
}

.faq-drawer__trigger:checked + .faq-drawer__title::after {
  transform: rotate(-45deg);
  transition: 0.25s ease-in-out;
}

.faq-drawer__trigger:checked + .faq-drawer__title_img::after {
  transform: rotate(-45deg);
  transition: 0.25s ease-in-out;
}

input[type="checkbox"] {
  display: none;
}


/* ------------ My expertise component --------- */

.my-expertise{
  display: flex;
  padding: 0px;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 40px;
  align-self: stretch;
  flex-wrap: wrap;
  flex-direction: row;
} 


/* ------------ Icon Container component --------- */

.icon-container {
  border-bottom: #4F5873 2px solid;
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  line-height: 300%;
  color: white;
  font-weight: 400;
  padding: 0px 0px;
  text-align: center;
}


.icon-container svg:hover {
  fill: #F4D4A9;
}


@media (max-width: 900px) {


.article-half-column {

  display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
padding-top: 24px;

}

.article-half-column img {
  max-width: 450px;
  width: 100%;
}

  .youtube { 
width: 100% }

  .cards {
display: flex;
padding: 0px 24px;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
gap: 32px;
align-self: stretch;
flex-wrap: wrap;
flex-direction: row;
  }

  .card-container {
   display: flex;
min-width: 264px;
max-width: 410px;
padding: 24px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
flex: 1 0 0;
  }

  .card-title {
    font-size: 24px;
  }

.card-img-article {
  width: 100% !important;
  height: auto;

}


}

@media (max-width: 660px) {



  .cards {
display: flex;
max-width: 948px;
padding: 0px 0px;
flex-direction: column;
align-items: center;
gap: 32px;
align-self: stretch;
  }

  .card-container {
display: flex;
padding: 24px;
    min-width: 100%;
    max-width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 24px;
align-self: stretch;
  
}

.my-expertise{
  display: flex;
  flex-direction: column;
     align-content: center;
     align-items: center;
} 


}


@media (max-width: 767px) {


   .nav-link {
    display: block;
    padding: 0.5rem 0.5rem !important;
}

.intro{
  flex-direction: column;
}

button {
width: 100%; 
}

}