/*
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

COLORS
#133466
#4d5c8b
#2F2F2F
#494949
#5E5E5E
#3083FF
#4891ff
#E2EBFF
#f2f6ff
#FFF

SHADOWS

BORDER RADIUS

WHITE SPACE

*/

/***************************/
/*GENERAL*/
/***************************/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: poppins, sans-serif;
  color: #2f2f2f;
  line-height: 1;
  font-weight: normal;
}

.index-body {
  background-image: url(../assets/gradient-5.png);
  background-size: contain;
  background-repeat: no-repeat;
  overflow-x: hidden;
}

/* html {
  background: url(assets/footer-gradient.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
} */

h2 {
  color: #133466;
  font-size: 4rem;
  font-weight: 600;
}
.subpage-padding {
  margin-top: 8rem;
}
.section-title-main {
  padding-left: 1.4rem;
  border-left: 9px solid #3083ff;
}

.container {
  max-width: 124.8rem;
  margin: 0 auto;
}

.btn:link,
.btn:visited {
  border-radius: 1rem;
  text-decoration: none;
  font-size: 1.4rem;
  margin-right: 1.6rem;
  padding: 1rem 2rem;
  background: #3083ff;
  color: #fff;
  cursor: pointer;
  transition: background-color 300ms;
  font-weight: 500;
  line-height: 1.4rem;
}

.btn:hover,
.btn:active {
  border-radius: 1rem;
  text-decoration: none;
  font-size: 1.4rem;
  margin-right: 1.6rem;
  padding: 1rem 2rem;
  background: #3083ff;
  color: #fff;
  cursor: pointer;
  line-height: 1.4rem;
}

.btn.btn-1 {
  box-shadow: 0px 5px 14.1px 0px rgba(48, 131, 255, 0.4);
  color: #fff;
}
.btn.btn-1:hover,
.btn.btn-1:focus {
  box-shadow: 0px 5px 14.1px 0px rgba(48, 131, 255, 0.4);
  background: #1f79ff;
}

.btn.btn-2 {
  color: #3083ff;
  background: #e2ebff;
  border: 1px solid #3083ff;
}
.btn.btn-2:hover,
.btn.btn-2:active {
  box-shadow: 0px 5px 14.1px 0px rgba(48, 131, 255, 0.103);
  background: #d8e5ff;
}

/* .cursor-glow {
  position: fixed;
  width: 50rem;
  height: 50rem;
  background: radial-gradient(
    circle,
    rgba(48, 131, 255, 1) 0%,
    transparent 30%
  );
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: overlay;  Optional for a glowing effect over content 
  z-index: 9999; 
} */

/***************************/
/*MOBILE*/
/***************************/
.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
  width: 4.8rem;
  height: 4.8rem;
}
.icon-mobile-nav {
  color: #133466;
  width: 4.8rem;
  height: 4.8rem;
}

.icon-mobile-nav[name="close-outline"] {
  display: none;
}

/***************************/
/*STICKY*/
/***************************/
.sticky {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 124.8rem;
  max-height: 6.6rem;

  z-index: 99999;
}

/***************************/
/*NAVIGATION*/
/***************************/

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 6.6rem;
  padding: 1.6rem 3.2rem;
  margin-top: 3.2rem;
  margin-right: 2.4rem;
  margin-left: 2.4rem;
  border-radius: 1rem;
  border: 1px solid #b1caff;
  background: rgba(240, 245, 255, 0.6);
  backdrop-filter: blur(12px);
  align-content: center;
  flex: 0 0;
  /* margin-bottom: 8rem; */
}
.logo {
  max-width: 16rem;
}

.nav-main {
  display: flex;
  align-items: center;
  gap: 3.2rem;
}
.nav-sub {
  display: flex;
  align-items: center;
  gap: 3.2rem;
}
.nav-ctrl:link,
.nav-ctrl:visited {
  color: #133466;
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 300ms;
  line-height: 1.4rem;
}
.nav-ctrl:hover,
.nav-ctrl:active {
  color: #3083ff;
  font-size: 1.4rem;
  text-decoration: none;
}

.nav-ctrl.btn.btn-1 {
  color: #fff;
  margin-right: 0;
}

.nav-line {
  width: 0.1rem;
  height: 3.2rem;
  background: #b1caff;
}

/* .main-container { */
/* background-color: #eef3ff; */
/* background-image: url(assets/Gradient.png); */
/* } */

/***************************/
/*HERO*/
/***************************/
.section-hero {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  justify-content: space-between;
  gap: 12rem;
  padding: 14.4rem 2.4rem;
  /* margin-bottom: 14.4rem; */
}
.section-hero-left {
  margin-top: -3.2rem;
}
.hero-heading {
  color: #133466;
  font-size: 6.4rem;
  letter-spacing: -0.2rem;
  line-height: 1.05;
  font-weight: 600;
  margin-bottom: 3.2rem;
}
.hero-heading span {
  color: #3083ff;
}
.hero-subheading {
  color: #4d5c8b;
  font-size: 2rem;
  font-style: normal;
  line-height: normal;
  margin-bottom: 4.8rem;
  font-weight: 420;
}
.hero-img {
  max-width: 100%;
}

/***************************/
/*SERVICES*/
/***************************/

.section {
  padding: 6.4rem 2.4rem;
}
#services {
  scroll-margin-top: 130px;
}
.service-grid-1 {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 2rem;
  justify-content: space-between;
  position: relative;
}
.service-grid-2 {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 4.8fr 5.8fr;
  gap: 2rem;
  justify-content: space-between;
}

.service-grid-item-1 {
  border-radius: 1rem;
  border: 0.1rem solid #e2ebff;
  min-height: 350px;
  box-shadow: 0px 5px 14.1px 0px rgba(48, 131, 255, 0.05);
}
.service-grid-item-2 {
  align-content: center;
  border-radius: 10px;
  border: 0.1rem solid #e2ebff;
  box-shadow: 0px 5px 14.1px 0px rgba(48, 131, 255, 0.05);
  min-height: 305px;
}

.service-1 {
  position: relative;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 50.03%,
      rgba(255, 255, 255, 0.9) 75.03%,
      #fff 85.07%
    ),
    url(../assets/bento/1.png) rgb(255, 255, 255) 40% 70%/ 130% no-repeat;
  background-color: rgba(255, 255, 255, 0.35);
}
.service-2 {
  position: relative;

  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 50.03%,
      rgba(255, 255, 255, 0.9) 75.03%,
      #fff 85.07%
    ),
    url(../assets/bento/2.png) lightgray 50% 70% / 115% no-repeat;
  background-color: rgba(255, 255, 255, 0.35);
}
.service-3 {
  position: relative;

  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 50.03%,
      rgba(255, 255, 255, 0.9) 75.03%,
      #fff 90.07%
    ),
    url(../assets/bento/3.png) lightgray 70% 40% / 115% no-repeat;
  background-color: rgba(255, 255, 255, 0.35);
}
.service-4 {
  position: relative;

  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 50.03%,
      rgba(255, 255, 255, 0.9) 75.03%,
      #fff 85.07%
    ),
    url(../assets/bento/4.png) lightgray 50% 40% / 110% no-repeat;
  background-color: rgba(255, 255, 255, 0.35);
}
.service-text {
  position: absolute;
  bottom: 2rem;
  left: 2.8rem;
}
.section-title {
  color: #3083ff;
  font-family: Poppins;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 127.087%; /* 30.501px */
}
.section-subtitle {
  color: #4d5c8b;
  font-family: Poppins;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.8;
}
/***************************/
/*PORTFOLIO*/
/***************************/

.base-grid {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  justify-content: space-between;
}

.base-grid-item {
  border-radius: 1rem;
  border: 0.1rem solid #e2ebff;
  /* min-height: 400px; */
  aspect-ratio: 590 / 400;
  position: relative;
}
.portfolio-text {
  position: absolute;
  text-align: center;
  bottom: 3rem;
  left: 2rem;
  right: 2rem;
}
.see-detail {
  color: #3083ff;
  /* color: #133466; */
  text-align: center;
  font-family: Poppins;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 127.087%; /* 20.334px */
}

#portfolio {
  scroll-margin-top: 130px;
}
.portfolio-title {
  /* color: #3083ff; */
  color: #133466;
  padding-bottom: 0.6rem;
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 127.087%;
}
.title-rectangle {
  width: 3.2rem;
  height: 0.4rem;
  background: #3083ff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.portfolio-1:link,
.portfolio-1:visited {
  position: relative;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 50%,

      rgba(255, 255, 255, 0.6) 63%,
      rgba(255, 255, 255, 0.8) 80%,
      rgba(255, 255, 255, 1) 100%
    ),
    url(../assets/portfolio/1.png) rgb(255, 255, 255) 50% 25%/ 125% no-repeat;
  background-color: #fff;
  transition: background-color 300ms, background 300ms, box-shadow 300ms,
    opacity 1000ms ease, transform 1000ms ease;
}
.portfolio-2:link,
.portfolio-2:visited {
  position: relative;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 50%,

      rgba(255, 255, 255, 0.6) 63%,
      rgba(255, 255, 255, 0.8) 80%,

      rgba(255, 255, 255, 1) 100%
    ),
    url(../assets/portfolio/2.png) rgb(255, 255, 255) 35% 25%/ 120% no-repeat;
  background-color: #fff;
  transition: background-color 300ms, background 300ms, box-shadow 300ms,
    opacity 1000ms ease, transform 1000ms ease;
}
.portfolio-3:link,
.portfolio-3:visited {
  position: relative;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 50%,

      rgba(255, 255, 255, 0.6) 63%,
      rgba(255, 255, 255, 0.8) 80%,

      rgba(255, 255, 255, 1) 100%
    ),
    url(../assets/portfolio/3.png) rgb(255, 255, 255) 50% 50%/ 130% no-repeat;
  background-color: #fff;
  transition: background-color 300ms, background 300ms, box-shadow 300ms,
    opacity 1000ms ease, transform 1000ms ease;
}
.portfolio-4:link,
.portfolio-4:visited {
  position: relative;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 50%,

      rgba(255, 255, 255, 0.6) 63%,
      rgba(255, 255, 255, 0.8) 80%,

      rgba(255, 255, 255, 1) 100%
    ),
    url(../assets/portfolio/4.png) rgb(255, 255, 255) 30% 30%/ 140% no-repeat;
  background-color: #fff;
  transition: background-color 300ms, background 300ms, box-shadow 300ms,
    opacity 1000ms ease, transform 1000ms ease;
}

.portfolio-1:hover,
.portfolio-1:active {
  position: relative;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 50%,

      rgba(255, 255, 255, 0.6) 63%,
      rgba(255, 255, 255, 0.8) 80%,
      rgba(255, 255, 255, 1) 100%
    ),
    url(../assets/portfolio/1.png) rgb(255, 255, 255) 50% 25%/ 115% no-repeat;
  background-color: #f2f6ff;
  box-shadow: 0px 0px 31.9px 0px #fff inset,
    0px 0px 10px 0px rgba(48, 131, 255, 0.15);
}
.portfolio-2:hover,
.portfolio-2:active {
  position: relative;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 50%,

      rgba(255, 255, 255, 0.6) 63%,
      rgba(255, 255, 255, 0.8) 80%,

      rgba(255, 255, 255, 1) 100%
    ),
    url(../assets/portfolio/2.png) rgb(255, 255, 255) 35% 25%/ 110% no-repeat;
  background-color: #f2f6ff;
  box-shadow: 0px 0px 31.9px 0px #fff inset,
    0px 0px 10px 0px rgba(48, 131, 255, 0.15);
}
.portfolio-3:hover,
.portfolio-3:active {
  position: relative;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 50%,

      rgba(255, 255, 255, 0.6) 63%,
      rgba(255, 255, 255, 0.8) 80%,

      rgba(255, 255, 255, 1) 100%
    ),
    url(../assets/portfolio/3.png) rgb(255, 255, 255) 50% 50%/ 120% no-repeat;
  background-color: #f2f6ff;
  box-shadow: 0px 0px 31.9px 0px #fff inset,
    0px 0px 10px 0px rgba(48, 131, 255, 0.15);
}
.portfolio-4:hover,
.portfolio-4:active {
  position: relative;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 50%,

      rgba(255, 255, 255, 0.6) 63%,
      rgba(255, 255, 255, 0.8) 80%,

      rgba(255, 255, 255, 1) 100%
    ),
    url(../assets/portfolio/4.png) rgb(255, 255, 255) 30% 30%/ 130% no-repeat;
  background-color: #f2f6ff;
  box-shadow: 0px 0px 31.9px 0px #fff inset,
    0px 0px 10px 0px rgba(48, 131, 255, 0.15);
}

/***************************/
/*CONTACT*/
/***************************/

.section-contact {
  margin: 6.4rem auto 14.4rem auto;
}
.contact-1 {
  margin-top: 6.4rem;
  color: #133466;
  text-align: center;
  font-family: Poppins;
  font-size: 4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 127.087%; /* 50.835px */
}
.contact-2 {
  color: #3083ff;
  font-family: Poppins;
  font-size: 4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 127.087%;
  text-align: center;
}
.contact-3 {
  text-align: center;
}
.contact-3 a:link,
a:visited {
  color: #4d5c8b;
  text-decoration: none;
  font-family: Poppins;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 127.087%;
  padding-bottom: -1rem;
  transition: all 300ms;
}
.contact-3 a:hover,
a:active {
  color: #3083ff;
  text-decoration: none;
  font-family: Poppins;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 127.087%;
  padding-bottom: -1rem;
}
.contact-rectangle {
  margin: -1rem auto 0 auto;
  width: 27rem;
  height: 0.4rem;
  background-color: #d8e5ff;
}

/***************************/
/*FOOTER*/
/***************************/

.footer-bg {
  background-color: #3083ff;
  position: relative;
}

.footer-gradient {
  position: absolute;
  /* background-color: #3083ff; */
  overflow: hidden;
  width: 100%;
  /* background: radial-gradient(#3083ff, #fff); */
}

.section-footer {
  padding: 2.4rem 2.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-text {
  color: #fff;
  font-size: 1.4rem;
}

.section-footer div svg {
  color: #1f79ff;
}

.logos {
  display: flex;
  align-items: center;
  gap: 3.2rem;
}

/***************************/
/*SUBPORTFOLIOS*/
/***************************/
.base-grid-item {
  position: relative;
}
.sub-portfolio-text {
  position: absolute;
  text-align: left;
  bottom: 3rem;
  left: 3rem;
}

.sub-portfolio-title {
  /* color: #3083ff; */
  color: #133466;
  padding-bottom: 0.6rem;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 127.087%;
}
.sub-see-detail {
  color: #3083ff;
  position: absolute;
  bottom: 4rem;
  left: 0.1rem;
  /* color: #133466; */
  text-align: left;
  font-family: Poppins;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 127.087%; /* 20.334px */
}

.sub-portfolio-rectangle {
  width: 8rem;
  height: 0.4rem;
  background: #3083ff;
  position: absolute;
  left: 4.2rem;
  transform: translate(-50%, -50%);
}

.sub-grid-item {
  pointer-events: none;
}

.light {
  color: #fff;
}
.b1 {
  background: url(../assets/portfolio-images/b1.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.b2 {
  background: url(../assets/portfolio-images/b2.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.b3 {
  background: url(../assets/portfolio-images/b3.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.b4 {
  background: url(../assets/portfolio-images/b4.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.b5 {
  background: url(../assets/portfolio-images/b5.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.b6 {
  background: url(../assets/portfolio-images/b6.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.b7 {
  background: url(../assets/portfolio-images/b7.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.b8 {
  background: url(../assets/portfolio-images/b8.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.b9 {
  background: url(../assets/portfolio-images/b9.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.l1 {
  background: url(../assets/portfolio-images/l1.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.l2 {
  background: url(../assets/portfolio-images/l2.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.l3 {
  background: url(../assets/portfolio-images/l3.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.l4 {
  background: url(../assets/portfolio-images/l4.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.l5 {
  background: url(../assets/portfolio-images/l5.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.l6 {
  background: url(../assets/portfolio-images/l6.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}

.s1 {
  background: url(../assets/portfolio-images/s1.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.s2 {
  background: url(../assets/portfolio-images/s2.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.s3 {
  background: url(../assets/portfolio-images/s3.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.s4 {
  background: url(../assets/portfolio-images/s4.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}

.u1 {
  background: url(../assets/portfolio-images/u1.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.u2 {
  background: url(../assets/portfolio-images/u2.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.u3 {
  background: url(../assets/portfolio-images/u3.jpg) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}

.u4 {
  background-color: #eff4ff;
}
.u4 .sub-portfolio-rectangle {
  display: none;
}
.u4 .sub-portfolio-text {
  text-align: center;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.u4 .sub-portfolio-title {
  text-align: center;
  color: #3083ff;
  font-size: 2.4rem;
}
/* .sub-grid-item:last-child {
  margin-bottom: 4.8rem;
} */
.sub-btn {
  margin-top: 3.2rem;
  display: inline-block;
}

.ri1 {
  background: url(../assets/portfolio-images/ri1.png) rgb(255, 255, 255)
    center/cover no-repeat;
  pointer-events: none;
}
.u4.r0 {
  aspect-ratio: 3/1;
}

.book-title {
  color: #444 !important;
}

.ri2 {
  background: url(../assets/portfolio-images/ri2.png) rgb(255, 255, 255)
    center/cover no-repeat;
  pointer-events: none;
}

.ri3 {
  background: url(../assets/portfolio-images/ri3.png) rgb(255, 255, 255)
    center/cover no-repeat;
  position: relative;
}

.ri4 {
  background: url(../assets/portfolio-images/ri4.png) rgb(255, 255, 255)
    center/cover no-repeat;
}

.ri5 {
  background: url(../assets/portfolio-images/ri5.png) rgb(255, 255, 255)
    center/cover no-repeat;
  pointer-events: all;
  position: relative;
}

.ri6 {
  background: url(../assets/portfolio-images/ri6.png) rgb(255, 255, 255)
    center/cover no-repeat;
  position: relative;
}

.ri7 {
  background: url(../assets/portfolio-images/ri7.png) rgb(255, 255, 255)
    center/cover no-repeat;
  position: relative;
}

.coming-soon {
  background: rgba(255, 255, 255, 0.267);
  backdrop-filter: blur(0.5rem);
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  border-radius: 1rem;
  z-index: 99999999;
}
.available-soon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40rem;
  transform: translate(-50%, -120%);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.2;
  background-color: #ffffff57;
  padding: 1.6rem 2rem;
  border-radius: 1rem;
  border: 0.1rem solid #cacaca;
  backdrop-filter: blur(2rem);
  color: #444;
  text-align: center;
  box-shadow: 0 0.4rem 1.6rem #44444415;
  /* box-shadow: 0 0.4rem 10rem #ffffffc7; */
  /* font-size: 1.8rem; */
  font-weight: 500;
  z-index: 999999999;

  /* box-shadow: inset 2px 4px 10px #ffffff; */
}
.available-soon-2 {
  transform: translate(-50%, 0%);
  width: 24rem;
  padding: 1rem 2rem;
  font-size: 1.8rem;
}

.book-header {
  max-width: 80%;
  display: flex;
  justify-self: center;
  margin: -4rem 0 -8rem 0;
}
.product-subtitle-1 {
  font-size: 3.2rem;
  text-align: center;
  font-weight: 600;
  color: #444;
  line-height: 1.8;
}
.product-subtitle-2 {
  font-size: 1.8rem;
  text-align: center;
  line-height: 1.2;
  font-weight: 400;
  margin: 0 12rem;
  color: #6d6d6d;

  /* margin-top: -8rem; */
}
.product-subtitle-3 {
  font-size: 1.4rem;
  text-align: center;
  font-weight: 600;
  color: #444;
  line-height: 1.8;
  margin-top: 4rem;
  margin-bottom: 1.8rem;
}

.book-grid-item {
  border: 0.1rem solid #dddddd;
}
.psych {
  margin: 0;
  position: absolute;
  background: rgba(255, 255, 255, 0.467);
  border: solid 0.1rem #ffffff;
  box-shadow: 0 0.4rem 1rem #44444415;

  backdrop-filter: blur(0.5rem);
  top: 2.4rem;
  left: 3.2rem;
  display: inline-block;
  border-radius: 1rem;
  text-decoration: none;
  font-size: 1.4rem;
  padding: 1rem 2rem;
}
.the-stopper {
  margin: 0;
  position: absolute;

  top: 2.4rem;
  left: 3.2rem;
  display: inline-block;
  z-index: 9999;
  padding: 1rem 2rem;
  pointer-events: none;
}
/* .dropdown {
  backdrop-filter: blur(0.5rem);
  width: 3rem;
  height: 3rem;
  position: absolute;
  background: rgba(255, 255, 255, 0.267);

  top: 2.4rem;
  left: 3.2rem;
  width: 3rem;
  color: #525252;
  border: solid 0.2rem #525252;
  border-radius: 1rem;
  display: inline-block;
}
.dropdown-arrow {
}
.dropdown-arrow:hover,
.dropdown-arrow:active {
}

.dropdown-content {
  display: none;
  align-content: center;
  justify-items: center;
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(0.5rem);
  width: 16rem;
  height: 5rem;

  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover a {
  display: block;
} */

/* .base-grid-item .product-subtitle-3 {
  margin: 0;
} */

.new-grid {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  gap: 2rem;
}

.new-grid-item {
  border-radius: 1rem;
  border: 0.1rem solid #dddddd;
  /* aspect-ratio: 530 / 450; */
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 5px 14.1px 0px rgba(173, 173, 173, 0.1);
  opacity: 0;
  transition-delay: all 2s;
  transition: all 1000ms ease;
  transform: translateY(10rem);
  background: rgb(246, 246, 246);
}

.new-grid-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.new-grid-image {
  position: relative;
  aspect-ratio: 530 / 360;
  border-radius: 1rem 1rem 0 0;
  overflow: hidden;
  z-index: 1;
}

/* Overlaying the new image */
.new-grid-image::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 500ms ease;
  z-index: 2;
}
.new-grid-image.ri4::before {
  background: url(../assets/portfolio-images/ri4.2.png) center/cover no-repeat;
}
.new-grid-image.ri1::before {
  background: url(../assets/portfolio-images/ri1.2.png) center/cover no-repeat;
}
.new-grid-image.ri2::before {
  background: url(../assets/portfolio-images/ri2.2.png) center/cover no-repeat;
}
.new-grid-image.ri3::before {
  background: url(../assets/portfolio-images/ri3.2.png) center/cover no-repeat;
}
.new-grid-image.ri5::before {
  background: url(../assets/portfolio-images/ri5.2.png) center/cover no-repeat;
}
.new-grid-image.ri6::before {
  background: url(../assets/portfolio-images/ri6.2.png) center/cover no-repeat;
}
.new-grid-image.ri7::before {
  background: url(../assets/portfolio-images/ri7.2.png) center/cover no-repeat;
}

.new-grid-image.hover-animation::before {
  clip-path: inset(0 0 0 0);
}

.new-grid-bottom {
  /* aspect-ratio: 530 / 90; */
  border-top: 0.1rem solid #dddddd;
  display: flex;
  justify-content: space-between;
  padding: 2.4rem 3rem;
  align-items: center;
  gap: 1rem;
  transition: all 300ms ease;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  background: rgb(246, 246, 246);
}

.new-grid-title {
  color: #2f2f2f;
  font-family: Poppins;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}

.new-grid-subtitle {
  color: #7c7c7c;
  font-family: Poppins;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  margin-top: 0.5rem;
}
.new-grid-button {
  transition: 300ms ease;
  background: #3b3b3b;
}

.new-grid-button path {
  fill: white;
}

.new-grid-button:link,
.new-grid-button:visited {
  min-width: none;
  width: 4rem;
  height: 4rem;
  aspect-ratio: 1 / 1;
  border: 0.1rem solid #3b3b3b;
  border-radius: 100%;
  box-shadow: 0px 5px 14.1px 0px rgba(0, 0, 0, 0.1);
}
.new-grid-button:hover,
.new-grid-button:active {
  border: 0.1rem solid #5e5e5e;
  background: #5e5e5e;
}

.new-grid-button-base {
  transition: 300ms ease;
  background: #3b3b3b;
}

.new-grid-button-base path {
  fill: white;
}

.new-grid-button-base:link,
.new-grid-button-base:visited {
  min-width: none;
  width: 4rem;
  height: 4rem;
  aspect-ratio: 1 / 1;
  border: 0.1rem solid #3b3b3b;
  border-radius: 100%;
  box-shadow: 0px 5px 14.1px 0px rgba(0, 0, 0, 0.1);
}
.new-grid-button-base:hover,
.new-grid-button-base:active {
  border: 0.1rem solid #5e5e5e;
  background: #5e5e5e;
}

/* .new-grid-button:hover path,
.new-grid-button:active path {
  border: 0.1rem solid #3083ff;
  fill: #3083ff;
  transition: 300ms ease;
} */

.new-grid-bottom.active {
  background: rgb(255, 255, 255);
}
.new-grid-item.active {
  background: rgb(255, 255, 255);
}

.animated {
  opacity: 0;
  transition-delay: all 2s;
  transition: opacity 1000ms ease, transform 1000ms ease;
  transform: translateY(10rem);
}

.animated.visible {
  opacity: 1;
  transform: translateY(0);
}

.resource-grid {
  grid-template-columns: 1fr;
}

.resource-grid-item {
  aspect-ratio: 3 / 1;
}

.resource-grid-title {
  font-size: 2.8rem;
}
.r1 {
  background: url(../assets/portfolio-images/r1.png) rgb(255, 255, 255) 50% 50%/
    100% no-repeat;
}
.resource-grid-item {
  pointer-events: all;
}
.r0 {
  pointer-events: none;
}

/* POPUPS */
.popup {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  width: 60rem;
  max-width: 90vw;
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(3rem);
  border-radius: 1rem;
  border: 0.1rem solid #ffffff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  justify-content: center;
  padding: 5rem;
  padding-top: 4rem;
  z-index: 9999909;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 5px 14.1px 0px rgba(0, 0, 0, 0.04);
  transition: opacity 300ms ease;
}

.popup-subtitle {
  font-size: 1.6rem;
}

.popup-btn-1 {
  background-color: #3b3b3b !important;
  box-shadow: 0px 5px 14.1px 0px rgba(0, 0, 0, 0.2) !important;
}

.popup-btn-1:hover,
.popup-btn-1:active {
  background-color: #5e5e5e !important;
  box-shadow: 0px 5px 14.1px 0px rgba(0, 0, 0, 0.1) !important;
}

.popup-btn-2 {
  background-color: #fcfcfc !important;
  color: #3b3b3b !important;
  border: none !important;
  box-shadow: 0px 5px 14.1px 0px rgba(0, 0, 0, 0.02) !important;
}

.popup-btn-2:hover,
.popup-btn-2:active {
  background-color: #eeeeee !important;
  box-shadow: 0px 5px 14.1px 0px rgba(0, 0, 0, 0.02) !important;
}

.blur {
  width: 100%;
  height: 140vh;
  transform: translateY(-10%);
  z-index: 999999;
  position: fixed;
  backdrop-filter: blur(1rem);
  background-color: rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.active-popup {
  opacity: 1;
  pointer-events: all;
  transition-delay: 1000ms;
}

/* .disable-scroll {
  overflow: hidden;
  height: 100vh;
} */
#smooth-content {
  padding-top: 1px;
  margin-top: -1px;
}

/* PORTFOLIO TEMPLATE */
.portfolio-image-container {
  /* max-width: min(100vw, 2800px);
  height: auto; */
  display: flex;
  flex-direction: column;
}

.b2-1 {
  max-width: 100vw;
  height: auto;
  /* padding: 0 5vw; */
}

.collapsible {
  padding: 1.6rem 2.4rem 1.6rem 2.4rem;
  width: 100%;
  margin-top: 2.4rem;
  border-radius: 1rem;
  border: 0.1rem solid #dddddd;
  box-shadow: 0px 5px 14.1px 0px rgba(173, 173, 173, 0.1);
  background: rgb(246, 246, 246);
  text-align: left;
  pointer-events: all;
  cursor: pointer;
  transition: all 300ms ease;
  font-size: 1.4rem;
  font-family: poppins;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.active-.collapsible,
.collapsible:hover,
.collapsible:active {
  background: #eee;
}

.collapsible:after {
  content: url("data:image/svg+xml,<svg width='1rem' viewBox='0 0 24 18' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke-width='3' stroke='black' class='size-6' stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/></svg>");
  font-size: 13px;
  float: right;
  margin-left: 5px;
}

.active-collapsible:after {
  content: url("data:image/svg+xml,<svg width='1rem' viewBox='0 0 24 20' xmlns='http://www.w3.org/2000/svg'><path fill='none' stroke-width='3' stroke='black' class='size-6' stroke-linecap='round' stroke-linejoin='round' d='m4.5 15.75 7.5-7.5 7.5 7.5'/></svg>"); /* Unicode character for "minus" sign (-) */
}

.collapsible-content {
  display: none;
  font-size: 1.2rem;
  line-height: 1.6rem;
  width: 100%;
  background: rgb(248, 248, 248);
  margin: 1rem 2.4rem 1rem 0rem;
  padding: 2.4rem 2.4rem;
  border-radius: 1rem;
  box-shadow: 0px 5px 14.1px 0px rgba(173, 173, 173, 0.1);
  box-sizing: border-box;
  transition: all 300ms ease;
}

.project-container {
  padding-bottom: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.project-container img {
  max-width: 100%;
  height: auto;
  display: block;
  backface-visibility: hidden;
}

.project-container img + img {
  margin-top: -1px;
}

.center-button {
  margin-left: 50vw;
  transform: translateX(-50%);
}

.project-container {
  opacity: 0;
  transition-delay: all 2s;
  transition: opacity 1000ms ease, transform 1000ms ease;
  transform: translateY(-10rem);
}

.project-container.visible {
  opacity: 1;
  transform: translateY(0);
}