/* Fonts */
@font-face {
  font-family: CalSans; 
  src: url(../font/CalSans-Regular.ttf); 
}

@font-face {
  font-family: RobotoItalic;
  src: url(../font/Roboto-Italic-Variable.ttf); 
}

@font-face {
  font-family: Roboto; 
  src: url(../font/Roboto-Variable.ttf); 
}



/* Presets */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  box-sizing: border-box;
  font-size: 1.6rem;
  overflow-x: hidden;
}

a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
	color: inherit;
	text-decoration: none;
	border-bottom: none;
	outline: none;
	box-shadow: none;
}



/* Utility Classes */
.no-select {
  user-select: none;
}




/* Margins */
.mt-1 {
  margin-top: 1rem;
}

.mt-1-5 {
  margin-top: 1.5rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mt-2-5 {
  margin-top: 2.5rem;
}

.mt-3 {
  margin-top: 3rem  ;
}

.mt-4 {
  margin-top: 4rem;
}

.mt-5 {
  margin-top: 5rem;
}

.mt-6 {
  margin-top: 6rem;
}

.mt-6-5 {
  margin-top: 6.5rem;
}

.mt-7 {
  margin-top: 7rem;
}

.mt-8 {
  margin-top: 8rem;
}

.mt-9 {
  margin-top: 9rem;
}

.mt-10 {
  margin-top: 10rem;
}

.mt-13 {
  margin-top: 13rem;
}

.mt-15 {
  margin-top: 15rem;
}


.pt-4 {
  padding-top: 4rem;
}

.pb-4 {
  padding-top: 4rem;
}

.no-bottom-margin {
  margin-bottom: 0rem!important;
}




/* Font Colours */
.color-red {
  color: #b52026!important; 
}

.color-pink {
  color: #fedcdc!important;
}

.color-beige {
  color: #f1dab0!important;
}

.color-ivory {
  color: #fcf8ef!important;
}

.color-charcoal {
  color: #030504!important;
}

.color-white {
  color: #ffffff!important;
}



/* Background Colours */
.bg-beige {
  background-color: #f1dab0;
}

.bg-red {
  background-color: #b52026; 
}

.bg-none {
  background-color: transparent;
}



/* Hover Background Colours */
.hover-bg-red:hover {
  background-color: #b52026; 
}

.hover-bg-pink:hover {
  background-color: #fedcdc; 
}

.hover-bg-charcoal:hover {
  background-color: #030504; 
}


/* Hover Font Colours */
.hover-text-white:hover {
  color: #ffffff!important;
}

.hover-text-red:hover {
  color: #b52026; 
}

.hover-text-charcoal:hover {
  color: #030504!important; 
}

.hover-text-pink:hover {
  color: #fedcdc!important; 
}




/* Border Colours */
.outline-white {
  border: 1px solid #ffffff!important;
}

.outline-black {
  border: 2px solid #000000!important;
}

.border-bottom-white {
    border-bottom: 2px solid #FFFFFF!important;
}


/* Font Sizes */
.font-3 {
  font-size: 3rem;
}



/* Buttons */
.btn {
  display: inline-block;
  font-family: CalSans;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 2.4rem;
  font-weight: 400;
  border-radius: 32px;
  transition: background-color 0.5s ease, color 0.5s ease;
  min-width: 188px;
}


/* Navigation Bar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 40px 30px 40px;
  height: 100px;
  background-color: #ffffff;
  font-family: Roboto;

  position: sticky;
  top: 0;
  z-index: 1000;

  transition:
    width 1s ease,
    height 0.35s ease,
    padding 0.35s ease,
    top 0.35s ease,
    border-radius 2s ease,
    box-shadow 0.35s ease;
  
  }

.navbar.is-scrolled {
  width: 55vw;
  height: 75px;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 999px;
  top: 1rem;

  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px) saturate(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%);

  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 25px 40px rgba(3, 5, 4, 0.22);
}



.nav-logo {
  font-size: 4.5rem;
  letter-spacing: 0px;
  font-family: CalSans;
}

.nav-links {
  display: flex;
  gap: 5rem;
  margin-left: auto;
  list-style: none;
  margin-right: 5rem;
  font-weight: 500;
  font-size: 2.4rem;
}



/* Navbar Mobile */

.hamburger {
  width: 28px;
  height: 25px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 5px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
}


.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 9998;
}

.mobile-menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 82vw;
  min-width: 280px;
  max-width: 340px;
  height: 100vh;
  background: #fff;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.25s ease;
  z-index: 9999;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 20px 0 50px rgba(3, 5, 4, 0.25);
}

.mobile-menu-panel a {
  color: #111;
  text-decoration: none;
  font-size: 18px;
}

.mobile-menu-close {
  align-self: flex-end;
  border: 0;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

body.mobile-menu-open .mobile-menu-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.mobile-menu-open .mobile-menu-panel,
.mobile-menu-panel.is-open {
  transform: translateX(0) !important;
  visibility: visible;
}

.mobile-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.mobile-menu-open {
  overflow: hidden;
}




/* Hero Section */
.hero {
  display: flex;
  justify-content: left;
  align-items: flex-start;
  height: 555px;
  min-height: 555px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  margin-left: 40px;
  padding-top: 40px;
}

.hero-text {
  font-family: CalSans;
  font-size: 28rem;
  line-height: 0.9;
  letter-spacing: -2%;
}



/* Sub Navigation */
.sub-nav {
  padding: 0px;
}

.sub-nav-content {
  display: flex;
  width: 100%;
  padding: 0px 6px 0px 60px;
}

.sub-nav-item {
  display: flex;
  flex: 0 0 25%;
  min-width: 0;
  flex-direction: column;
  padding-bottom: 12px;
}



.sub-nav-header {
  font-family: Roboto;
  font-weight: 300;
  font-size: 2rem;
}

.sub-nav-text {
  font-family: CalSans;
  font-size: 3rem;
  font-weight: 400;
}

.sub-nav-top-border {
  position: relative;
  padding-top: 12px;
}

.sub-nav-top-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 2rem;
  height: 2px;
  background-color: #030504;
}


.link-arrow {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 2rem;
  box-sizing: border-box;
}

.link-arrow::after {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;

  background-color: #030504;

  mask-image: url("../icon/right-arrow.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-image: url("../icon/right-arrow.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  transform: rotate(-45deg);
  transition: background-color 0.4s ease, transform 0.35s ease;
 
}

.link-arrow:hover::after {
  background-color: #b52026;
  transform: rotate(0deg); 
}


/* Ticker */
.ticker {
  background-color: #030504;
  overflow: hidden;
  white-space: nowrap;
  height: 100px;
  display: flex;
  align-items: center;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 18s linear infinite;
}

.ticker-content {

  display: inline-flex;
  align-items: center;
  gap: 4rem;
  padding-right: 4rem;
  flex-shrink: 0;

}

.ticker-text {
  font-family: CalSans;
  font-weight: 400;
  font-size: 3rem;
  flex: 0 0 auto;
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


/* Sub Header */
.sub-header {
  margin-left: 4rem;
}

.sub-header-text {
  font-family: CalSans;
  font-weight: 400;
  font-size: 8rem;
  line-height: 1;
}



/* Work Section */
.work {
  padding: 4rem;
}

.section-title {
  font-family: CalSans;
  font-size: 5.5rem;
  font-weight: 400;

}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2rem;
  row-gap: 4rem;
}

.work-item {
  position: relative;
  height: 716px;
  max-height: 716px;
}

.work-item-full {
  grid-column: 1 / -1;
}

.work-image-wrap {
  width: 100%;
  height: 600px;
  overflow: hidden;
  border-radius: 10px;
}

.work-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  transition: none;
  cursor: pointer;
}

.work-item:hover .work-image {
  transform: scale(1.26);
  transition: transform 1s ease;
}

.work-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.work-left{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.work-right {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.work-title {
  font-family: CalSans;
  font-size: 3rem;
  font-weight: 400;
  cursor: pointer;
}

.work-tags {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.work-tag {
  border: 1px solid #030504;
  border-radius: 100px;
  height: 37px;
  width: 132px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Roboto;
  font-size: 1.4rem;
  font-weight: 500;
  cursor: pointer;

}

.work-client {
  font-family: Roboto;
  font-size: 2rem;
  font-weight: 300;
}

.work-year {
  font-family: Roboto;
  font-size: 2rem;
  font-weight: 300;
}

.load-more {
  display: flex;
  justify-content: center;
  margin-bottom: 10rem;
}



/* About Accordion Section */

.about-accordion {
  padding-left: 4rem;
  padding-right: 4rem;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.about-title {
  font-family: CalSans;
  font-size: 8rem;
  font-weight: 400;
}

.about-description-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
}

.about-description {
  font-family: Roboto;
  font-size: 2rem;
  font-weight: 300;
  width: 1000px;
}

.accordion-container {

  margin-top: 7rem;

}

.accordion-item { 
  margin-top: 2rem;
  border-bottom: 2px solid #FFFFFF;

}

.accordion-header {

  font-family: CalSans;
  font-size: 5.5rem;
  font-weight: 400;

}

.accordion-content {
  font-family: CalSans;
  font-size: 2.7rem;
  font-weight: 300;
  padding-top: 1.2rem;
  padding-bottom: 0.8rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;

}

.accordion-content.is-open {
  max-height: 300px;
  opacity: 1;
  padding-top: 1.2rem;
  padding-bottom: 3.8rem;
}





.link-arrow-accordion {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 2rem;
  box-sizing: border-box;
}

.link-arrow-accordion::after {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  background-color: #fedcdc;

  mask-image: url("../icon/right-arrow.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-image: url("../icon/right-arrow.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  transform: rotate(-45deg);
  transition: background-color 0.2s ease, transform 0.2s ease;

}

.link-arrow-accordion.is-open::after {
  transform: rotate(90deg);
}


/* Clients Section */
.clients {
  background-color: #fcf8ef;
  padding: 4rem;
}


.clients-title {
  font-family: CalSans;
  font-weight: 400;
  font-size: 5.5rem;
  width: 100%;
  text-align: center;
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 4rem;
  row-gap: 3rem;
  margin-left: 10rem;
  margin-right: 10rem;
  margin-bottom: 6rem;
}

.client-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}


/* Footer Section */

.footer {
  background-color: #030504;
}
.footer-content {
  display: flex;
  flex-direction: column;
  gap: 0rem;
  padding: 6.5rem 4rem 0rem 4rem;
}
.footer-heading {
  font-family: CalSans;
  font-size: 3rem;
  font-weight: 400;
  color: #ffffff;
}

.footer-sub-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.5rem;
}

.footer-email {
  font-family: CalSans;
  font-size: 5.5rem;
  font-weight: 400;
  color: #fedcdc;
  transition: color 0.5s ease, color 0.5s ease;
}

.footer-content-divider {

  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

}

.footer-left-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 8rem;
  margin-bottom: 4rem;
}

.footer-right-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-social-icon {
  min-width: 48px;
  min-height: 48px;
}

.footer-social-icon:hover {
  background-color: #fedcdc; 
}


.footer-content-link {
  font-family: CalSans;
  font-size: 3rem;
  font-weight: 400;
  color: #ffffff;
}

.footer-content-link a {
  display: inline-block;
  transition: transform 0.35s ease;
}

.footer-content-link:hover a {
  transform: translateX(2rem);
}

.footer-logo-text {
  font-family: CalSans;
  font-size: 28rem;
  font-weight: 400;
  color: #ffffff;
  line-height: 1;
  margin-left: -1rem;

}

.footer-sub-content {
  background-color: #fedcdc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 2rem 4rem 2rem 4rem;
  height: 64px;
}

.footer-text {
  font-family: Roboto;
  font-size: 1.8rem;
  font-weight: 300;
  color: #030504;
}

.footer-link {
  font-family: Roboto;
  font-size: 1.8rem;
  font-weight: 500;
  color: #030504;
  cursor: pointer;
}

.footer-link::after {
  content: "|";
  margin-left: 0.8rem;
  margin-right: 0.8rem;
  color: #030504;
}

.footer-link:last-child::after {
  content: "";
  margin: 0;
}





/* Icons */
.icon-insta {
  width: 32px;
  height: 32px;
  background-color: #ffffff;
  mask-image: url("../icon/instagram.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-image: url("../icon/instagram.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}


.icon-linkedin {
  width: 32px;
  height: 32px;
  background-color: #ffffff;
  mask-image: url("../icon/linkedin.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-image: url("../icon/linkedin.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;  
}


/* Contact Section */
.contact {
  padding: 4rem;
}

.contact-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
}

.contact-title-text {
  font-family: CalSans;
  font-size: 15rem;
  font-weight: 400;
  line-height: 0.7;
}

.contact-description {
  font-family: Roboto;
  font-size: 2rem;
  font-weight: 300;
  max-width: 550px;
  text-align: right;
}

.contact-form-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8rem;
}

.contact-form-left {
  width: 55%;
}

.contact-form-right {
  width: 40%;
  margin-top: 2rem;
}

.input-row {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.input-label {
  font-family: Roboto;
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 0.3em;
}

.input-field {
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  font-family: Roboto;
  font-size: 1.8rem;
  font-weight: 300;
  background-color: #F7F7F7;
  width: 100%;
  box-sizing: border-box;
}

.full-width {
  flex: 1;
  width: 100%!important;
}

.input-field-textarea {
  display: block;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  font-family: Roboto;
  font-size: 1.8rem;
  font-weight: 300;
  background-color: #F7F7F7;
  width: 100%;
  box-sizing: border-box;
}


.contact-hero-image-wrap {
  width: 100%;
  height: 699px;
  overflow: hidden;
  border-radius: 10px;
}


.contact-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;  
}

.contact-form-result-message {

  font-family: CalSans;
  font-size: 5.5rem;
  font-weight: 400;
  text-align: center;
  line-height: 1;

}


/* Text Section */

.text-section {
  padding: 5rem 10rem 5rem 10rem;
  margin: 0rem 10rem 5rem 10rem;
}

.text-heading {
  font-family: CalSans;
  font-size: 8rem;
  font-weight: 400;
}

.text {
  font-family: Roboto;
  font-size: 2rem;
  font-weight: 300;
}

.text-sub-heading {
  font-family: CalSans;
  font-size: 3rem;
  font-weight: 400;
  margin-top: 5rem;
  margin-bottom: 2rem;
}

/* About Section */


.about-hero {
  padding: 4rem;
}

.about-hero-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4rem;
}

.content-left {
  width: 65%;
  padding-right: 4em;
}

.content-right {
  width: 35%;
}

.about-hero-heading {
  font-family: CalSans;
  font-size: 8rem;
  font-weight: 400;
  line-height: 1;
}

.about-hero-description {
  font-family: Roboto;
  font-size: 2rem;
  font-weight: 300;
  margin-top: 4rem;
}


.about-hero-image-wrap {
  width: 100%;
  height: 640px;
  overflow: hidden;
  border-radius: 10px;
}

.about-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;  
}

/* News Section */

.news-section {
  padding: 4rem 4rem 4rem 4rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 6rem;
}

.news-content-left {
  width: 400px;
}

.news-content-right {
  width: 60%
}

.news-header {
  font-family: CalSans;
  font-weight: 400;
  font-size: 5.5rem;
  line-height: 1;
}


.article-container {
  padding: 0rem 2rem;
}

.article {
  padding: 2rem 0rem;
  border-bottom: 2px solid #030504;
  cursor: pointer;
}

.article-date {
  font-family: Roboto;
  font-weight: 300;
  font-size: 2rem;
  margin-bottom: 1rem;

}

.article-title {
  font-family: CalSans;
  font-weight: 400;
  font-size: 3rem;

}


.blog-post {
  padding: 6rem 12rem 6rem 12rem;
  margin: 0rem 6rem 0rem 6rem;
}

.blog-date {
  font-family: Roboto;
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 2rem;
}

.blog-header {
  font-family: CalSans;
  font-size: 5.5rem;
  font-weight: 400;
  line-height: 1;
}

.blog-text {
  font-family: Roboto;
  font-size: 2rem;
  font-weight: 300;
  margin: 3rem 0rem;

}

.blog-image-full-width {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 5rem;
  margin-bottom: 5rem;
  height: 600px;
  overflow: hidden;
  padding: 0rem 4rem 0rem 4rem;
}

.blog-image-full-width img {
  width: 100%;
  display: block;
  height: 600px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}

.blog-quote {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6rem;
  margin-top: 6rem;
  width: 750px;
  text-align: center;
}

.quote-text {
  font-family: CalSans;
  font-size: 3rem;
  font-weight: 400;
}

.quote-author {
  font-family: Roboto;
  font-size: 2rem;
  font-weight: 300;
  text-transform: uppercase;
  margin-top: 2rem;
}

.quote-author::before {
  content: "—";
  margin-right: 0.5rem;
}

.blog-image-duo {

  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2rem;
  row-gap: 2rem;
  margin: 6rem 0rem;

}

.blog-small-image {
  width: 500px;
  height: 500px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}

.article-mini > .article {
  border-bottom: none!important;
}

.article-mini > .article:not(:last-child) {
  border-bottom: 2px solid white!important;
}




/* <!-- Blog Post Section -->
    <section class="blog-post">



        <div class="blog-image-duo">
            <img src="./assets/image/blog-small.jpg" class="blog-small-image" alt="Blog Image"/>
            <img src="./assets/image/blog-small.jpg" class="blog-small-image" alt="Blog Image"/>
        </div>

        <p class="blog-text">Lorem ipsum dolor sit amet consectetur. Praesent tellus id molestie cursus ultricies varius. Interdum eget augue dolor dui egestas maecenas sit. Neque sodales sociis tortor metus gravida sed id. Cursus sed a commodo nunc vitae purus. Metus at orci eget natoque imperdiet. Neque quam eu sagittis laoreet. Nunc nam egestas dolor non feugiat. Egestas non id vitae pellentesque vel sed tincidunt a nulla. </br></br>Eu consequat diam consectetur dignissim tincidunt. Faucibus diam tincidunt id in sem. Amet orci egestas orci donec habitasse at posuere tellus egestas. Felis ac elementum morbi adipiscing nunc in. Magna sed eget viverra nisl quis pretium aenean egestas. Id faucibus purus faucibus eget cum ut. Nibh ut vel nec at. Quam suspendisse vehicula vel egestas lorem est aliquet a non. </br></br>Amet cras vulputate feugiat fames amet tincidunt cras. Amet hendrerit pretium a massa hendrerit. A eget gravida commodo et accumsan at viverra lectus.</p>

        
    </section>
    <!-- End Blog Post Section-->



    */






/* Responsive Utility Classes */

@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }

  .navbar {
    padding: 2rem!important;
  }
  .nav-logo {
    padding: 0px!important;
  }

  .hero {
    padding: 4rem 1rem 1rem 1rem;
    height: auto;
    min-height: auto;
  }

  .hero-content {
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    text-align: center;
  }

  .hero-text {
    font-size: 11rem;
    text-align: center;
    letter-spacing: -2%;
  }

  .sub-nav {
    padding: 0px;
  }

  .sub-nav-content {
    flex-direction: column;
    align-items: stretch;
    padding: 2rem;
  }

  .sub-nav-item {
    margin-top: 2rem;
    width: 100%;
    border-bottom: 2px solid #030504;
  }

  .sub-nav-header {
    font-size: 1.6rem;
  }

  .sub-nav-text {
    margin-top: 0.5rem;
    font-size: 2.4rem;
  }

  .ticker {
    margin-top: 3rem;
    height: 80px;
  }

  .ticker-text {
    font-size: 2.4rem;
  }

  .sub-header {
    padding: 0rem 1rem 0rem 1rem;
    margin-left: 0rem;
    margin-top: 5rem;
  }

  .sub-header-text {
    font-size: 4.5rem;
    text-align: center;
    margin-bottom: 3rem;
  }

  .sub-header {
    align-items: center;
    text-align: center;
  }

  .work {
    padding: 2rem;
  }

  .section-title{
    width: 100%;
    text-align: center;
    font-size: 3.5rem;
  }

  .work-grid {
    grid-template-columns: 1fr;
    row-gap: 4rem;
  }

  .work-item {
    height: auto;
    max-height: auto;
  }
  
  .work-image-wrap {
    height: 337px;
    width: 100%;
  }

  .work-title {
    font-size: 2.4rem;
  }

  .work-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .work-tag {
    flex: 0 0 auto;
    overflow-wrap: anywhere;
  }

  .work-client {
    font-size: 1.6rem;
  }

  .work-year {
    font-size: 1.6rem;
  }


  .about-accordion {
    padding: 6rem 2rem 6rem 2rem;
  }

  .about-title {
    font-size: 5rem;
    text-align: center;
  }

  .about-description {
    font-size: 1.6rem;
    text-align: center;
    width: 100%;
  }

  .accordion-header {
    font-size: 3.5rem;
  }

  .accordion-content {
    font-size: 1.8rem;
  }

  .link-arrow-accordion::after {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }

  .clients {
    padding: 2rem;
  }

  .clients-title {
    font-size: 3.5rem;
  }

  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    row-gap: 2rem;
    margin-top: 4rem;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 4rem;
  }

  .footer {
    padding: 0rem;
  }

  .footer-content {
    padding: 2rem 2rem 2rem 2rem;
  }

  .footer-heading {
    font-size: 2.4rem;
  }

  .footer-sub-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .footer-email {
    font-size: 3.5rem;
    margin-top: 0rem;
    padding-top: 0rem;
    margin-bottom: 2rem;
  }

  .center-horizontal-mobile {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  } 

  .footer-content-link {
    font-size: 2.4rem;
  }
  
  .footer-logo-text {
    font-size: 12rem;
    margin-left: 0.1rem;
  }

  .footer-right-links {
    margin-top: -5rem;
  }

  .footer-sub-content {
    flex-direction: column-reverse;
    align-items: center;
    gap: 1.5rem;
    height: auto;
  }

  .footer-link {
    font-size: 1.4rem;
  }

  .footer-text {
    font-size: 1.4rem;
  }

  .contact {
    padding: 2rem;
    margin-bottom: 4rem;
  }

  .contact-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .contact-title-text {
    font-size: 7rem;
    text-align: center;
  }

  .contact-description {
    text-align: center;
    font-size: 1.6rem;
  }

  .contact-form-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .contact-form-left {
    width: 100%;
    margin-bottom: 3rem;
  }

  .input-row {
    flex-direction: column;
    gap: 1.5rem;
  }

   .contact-form-right {
    width: 100%;
    margin-top: 0rem;
  }

  .contact-hero-image-wrap {
    height: 337px;
    width: 100%;
  }

  .btn-mobile-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4rem;
  }

  .input-container {
    margin-top: 1rem;

  }

  .input-label {
    margin-bottom: 1rem;
  }

  .contact-form-result-message {
    font-size: 3.5rem;
  }

  .load-more {
    margin-bottom: 6rem;
  }

  .text-section {
    padding: 3rem 2rem 3rem 2rem;
    margin: 0rem 0rem 7rem 0rem;
  }

  .text-heading {
    font-family: CalSans;
    font-size: 5rem;
    font-weight: 400;
  }

  .text {
    font-family: Roboto;
    font-size: 1.6rem;
    font-weight: 300;
  }

  .text-sub-heading {
    font-family: CalSans;
    font-size: 2.4rem;
    font-weight: 400;
    margin-top: 5rem;
    margin-bottom: 2rem;
  }

  .about-hero {
    padding: 2rem;
  }

  .about-hero-content {
    flex-direction: column;
  }

  .content-left {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 0rem;
    align-items: center;
  }

  .content-right {
    width: 100%;
    margin-top: 4rem;
  }

  .about-hero-heading {
    font-family: CalSans;
    font-size: 5rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
  }

  .about-hero-description {
    font-family: Roboto;
    font-size: 1.6rem;
    font-weight: 300;
    margin-top: 4rem;
    text-align: center;
  }

  .news-section {
    padding: 2rem;
    flex-direction: column;
  }

  .news-content-left {
    width: 100%;
  }

  .news-content-right {
    width: 100%;
    margin-top: 3rem;
  }

  .news-header {
    font-size: 3.5rem;
  }

  .article-container {
    padding: 0rem;
  }

  .blog-post {
    padding: 2rem;
    text-align: center;
  }

  .blog-date {
    font-size: 1.6rem;
  }

  .blog-header {
    font-size: 3.5rem;
  }


  

}



/* 

<section class="blog-post">


        <div class="blog-date">12th April 2026</div>
        <div class="blog-header">Lorem ipsum dolor sit amet consectetur. Aliquet mauris nulla scelerisque eget viverra enim leo eu.</div>
        <p class="blog-text">Lorem ipsum dolor sit amet consectetur. Aenean hac orci eu eu felis. Nisi nunc mauris rutrum nullam. Non morbi eu sagittis molestie sollicitudin sed mi quis. Sagittis nulla arcu sit odio gravida hac molestie iaculis elit. Amet non mattis quis augue cursus. Tellus et in risus facilisis euismod sem sed pellentesque lobortis. Non tempor sodales erat donec mauris.</p>
  
        <div class="blog-image-full-width">
            <img src="./assets/image/blog.jpg" alt="Blog Image"/>
        </div>

        <p class="blog-text">Lorem ipsum dolor sit amet consectetur. Praesent tellus id molestie cursus ultricies varius. Interdum eget augue dolor dui egestas maecenas sit. Neque sodales sociis tortor metus gravida sed id. Cursus sed a commodo nunc vitae purus. Metus at orci eget natoque imperdiet. Neque quam eu sagittis laoreet. Nunc nam egestas dolor non feugiat. Egestas non id vitae pellentesque vel sed tincidunt a nulla.</br></br>Eu consequat diam consectetur dignissim tincidunt. Faucibus diam tincidunt id in sem. Amet orci egestas orci donec habitasse at posuere tellus egestas. Felis ac elementum morbi adipiscing nunc in. Magna sed eget viverra nisl quis pretium aenean egestas. Id faucibus purus faucibus eget cum ut. Nibh ut vel nec at. Quam suspendisse vehicula vel egestas lorem est aliquet a non.</br></br>Amet cras vulputate feugiat fames amet tincidunt cras. Amet hendrerit pretium a massa hendrerit. A eget gravida commodo et accumsan at viverra lectus.</p>

        <div class="blog-quote">
            <div class="quote-text">“Lorem ipsum dolor sit amet consectetur. Dignissim consectetur sit molestie nibh faucibus. Mauris imperdiet egestas hendrerit gravida sit orci pretium. Laoreet ante rhoncus leo convallis eget.”</div>
            <div class="quote-author">lorem ipsum</div>
        </div>

        <p class="blog-text">Lorem ipsum dolor sit amet consectetur. Aenean hac orci eu eu felis. Nisi nunc mauris rutrum nullam. Non morbi eu sagittis molestie sollicitudin sed mi quis. Sagittis nulla arcu sit odio gravida hac molestie iaculis elit. Amet non mattis quis augue cursus. Tellus et in risus facilisis euismod sem sed pellentesque lobortis. Non tempor sodales erat donec mauris.</p>

        <div class="blog-image-duo">
            <img src="./assets/image/blog.jpg" class="blog-small-image" alt="Blog Image"/>
            <img src="./assets/image/blog.jpg" class="blog-small-image" alt="Blog Image"/>
        </div>

        <p class="blog-text">Lorem ipsum dolor sit amet consectetur. Praesent tellus id molestie cursus ultricies varius. Interdum eget augue dolor dui egestas maecenas sit. Neque sodales sociis tortor metus gravida sed id. Cursus sed a commodo nunc vitae purus. Metus at orci eget natoque imperdiet. Neque quam eu sagittis laoreet. Nunc nam egestas dolor non feugiat. Egestas non id vitae pellentesque vel sed tincidunt a nulla. </br></br>Eu consequat diam consectetur dignissim tincidunt. Faucibus diam tincidunt id in sem. Amet orci egestas orci donec habitasse at posuere tellus egestas. Felis ac elementum morbi adipiscing nunc in. Magna sed eget viverra nisl quis pretium aenean egestas. Id faucibus purus faucibus eget cum ut. Nibh ut vel nec at. Quam suspendisse vehicula vel egestas lorem est aliquet a non. </br></br>Amet cras vulputate feugiat fames amet tincidunt cras. Amet hendrerit pretium a massa hendrerit. A eget gravida commodo et accumsan at viverra lectus.</p>

        
    </section>

    */





@media (min-width: 768px) {
  .hide-desktop {
    display: none!important;
  }
}