/* Pixel to REM COnverter -- https://nekocalc.com/px-to-rem-converter */
/* Anything body[data-theme="dark"] is for dark theme */

/* ---------------------- Color ---------------------- */
:root {
   --bgDark: #010101;
   --bgDarkAccent: #141414;
   --bgLight: #f9f5ed;
   --bgAccent: #e6ded0;
   --textDark: #fff;
   --textLight: #010101;
}

/* ---------------------- Reset ---------------------- */
* {
   box-sizing: border-box;
   scroll-behavior: smooth;
}

html {
   font-size: 62.5%; /* 1rem = 10px */
}

/* Scroll Bar */
html::-webkit-scrollbar {
   width: 2rem;
   background: var(--bgAccent);
}

html::-webkit-scrollbar-thumb {
   background: #c7a56bd3;
   border-radius: 0.5rem;
}

/* ---------------------- Animations ---------------------- */
@keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
}

@keyframes slideUp {
   from { 
      opacity: 0;
      transform: translateY(20px);
   }
   to { 
      opacity: 1;
      transform: translateY(0);
   }
}

.animate-fade-in {
   animation: fadeIn 1s ease-out forwards;
}

.animate-slide-up {
   opacity: 0;
   animation: slideUp 0.8s ease-out forwards;
   animation-delay: 0.3s;
}

.animate-slide-up:nth-child(2) { animation-delay: 0.4s; }
.animate-slide-up:nth-child(3) { animation-delay: 0.5s; }
.animate-slide-up:nth-child(4) { animation-delay: 0.6s; }
.animate-slide-up:nth-child(5) { animation-delay: 0.7s; }

/* ---------------------- General Styling ---------------------- */
body {
   font-family: "vigosamine", sans-serif;
   font-size: 1.6rem;
   font-weight: 400;
   line-height: 1.5;
   margin: 0;
   overflow-x: hidden;
}

/* Default Light theme */
body[data-theme="light"] {
   color: var(--textLight);
   background: var(--bgLight);
}

/* Dark theme */
body[data-theme="dark"] {
   background: var(--bgDark);
   color: var(--textDark);
}

a {
   text-decoration: none;
   cursor: pointer;
}

ul {
   margin: 0;
   padding: 0;
}

li {
   list-style: none;
}

p,
#address,
#collection,
#collection a {
   font-family: "Helvetica Neue", sans-serif;
   line-height: 1.5;
   font-weight: 400;
   color: inherit;
   text-decoration: none;
   transition: opacity 0.3s ease;
}

#collection a:hover {
   opacity: 0.7;
}

h1,
h2,
h3 {
   margin: 0;
}

/* ---------------------- Exhibition Gallery ---------------------- */
.gallery-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 2rem;
   margin: 4rem 0;
}

.gallery-item {
   position: relative;
   cursor: pointer;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   aspect-ratio: 1/1;
   overflow: hidden;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.05);
}

.gallery-item:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.gallery-image {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 2rem;
   box-sizing: border-box;
   color: var(--textLight);
   text-decoration: none;
   overflow: hidden;
}

.placeholder {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(45deg, #2a2a2a, #1a1a1a);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.8rem;
   color: #666;
   font-weight: 600;
   z-index: 1;
}

.gallery-item h3 {
   position: relative;
   z-index: 2;
   margin: 0;
   color: #fff;
   font-weight: 700;
   font-size: 1.3rem;
   letter-spacing: 0.5px;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   transition: all 0.3s ease;
}

.gallery-item:hover h3 {
   transform: scale(1.02);
   text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.gallery-item .year {
   position: relative;
   z-index: 2;
   margin: 0.5rem 0 0;
   font-size: 1.4rem;
   color: #bbb;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Modal Styles */
.modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.9);
   z-index: 1000;
   overflow-y: auto;
   padding: 2rem;
   box-sizing: border-box;
}

.modal-content {
   position: relative;
   max-width: 1200px;
   margin: 4rem auto;
   background: var(--bgLight);
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
   animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
   from { opacity: 0; transform: translateY(20px); }
   to { opacity: 1; transform: translateY(0); }
}

.close {
   position: absolute;
   top: 2rem;
   right: 2rem;
   color: #fff;
   font-size: 3rem;
   font-weight: 300;
   cursor: pointer;
   z-index: 10;
   transition: color 0.3s ease;
}

.close:hover {
   color: var(--primaryColor);
}

.modal-body {
   display: flex;
   flex-direction: column;
}

.modal-gallery {
   position: relative;
   width: 100%;
   background: #000;
}

.main-image {
   width: 100%;
   height: 60vh;
   overflow: hidden;
   position: relative;
   background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(2px);
   display: flex;
   align-items: center;
   justify-content: center;
}

.main-image img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

.thumbnail-container {
   display: flex;
   padding: 1.5rem;
   gap: 1rem;
   overflow-x: auto;
   background: #111;
}

.thumbnail {
   width: 80px;
   height: 80px;
   flex-shrink: 0;
   border: 2px solid transparent;
   border-radius: 4px;
   overflow: hidden;
   cursor: pointer;
   opacity: 0.7;
   transition: all 0.3s ease;
}

.thumbnail:hover, .thumbnail.active {
   opacity: 1;
   border-color: var(--primaryColor);
}

.thumbnail img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.modal-info {
   padding: 3rem;
   color: #333; /* Ensure dark text for better readability */
   background: #fff; /* White background for content area */
}

.modal-info h2 {
   font-size: 2.8rem;
   margin: 0 0 1.5rem;
   color: #222; /* Darker text for better contrast */
   font-weight: 600;
   line-height: 1.3;
}

.modal-location {
   font-size: 1.8rem;
   color: #555; /* Slightly darker for better visibility */
   margin: 0 0 2.5rem;
   font-style: normal;
   font-weight: 500;
   display: block;
   padding-bottom: 1.5rem;
   border-bottom: 1px solid #eee;
}

.modal-description {
   font-size: 1.7rem;
   line-height: 1.8;
   margin-bottom: 3rem;
   color: #333; /* Darker text for better readability */
}

.modal-description p {
   margin-bottom: 1.5rem;
   color: #333; /* Ensure paragraph text is visible */
}

.exhibition-details {
   background: #f9f9f9;
   padding: 2.5rem;
   border-radius: 8px;
   font-size: 1.6rem;
   border-left: 4px solid var(--primaryColor);
}

.exhibition-details p {
   margin: 1rem 0;
   color: #444; /* Slightly darker for better readability */
   line-height: 1.6;
}

.exhibition-details strong {
   color: #222; /* Darker for better contrast */
   font-weight: 600;
   min-width: 120px;
   display: inline-block;
}

/* Ensure text is visible in dark mode */
body[data-theme="dark"] .modal-info,
body[data-theme="dark"] .modal-info h2,
body[data-theme="dark"] .modal-description,
body[data-theme="dark"] .modal-description p {
   color: #eee !important;
}

body[data-theme="dark"] .modal-location {
   color: #bbb !important;
}

body[data-theme="dark"] .exhibition-details {
   background: #2a2a2a;
   border-left-color: var(--primaryColor);
}

body[data-theme="dark"] .exhibition-details p {
   color: #ddd !important;
}

body[data-theme="dark"] .exhibition-details strong {
   color: #fff !important;
}

/* ---------------------- Exhibition & CV Page Styles ---------------------- */
.exhibition-content, .cv-content {
   padding: 6rem 0;
   max-width: 1200px;
   margin: 0 auto;
   color: var(--textLight);
}

.exhibition-section, .awards-section, .publications-section {
   margin-bottom: 5rem;
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.exhibition-section.animate-slide-up,
.awards-section.animate-slide-up,
.publications-section.animate-slide-up {
   opacity: 1;
   transform: translateY(0);
}

.exhibition-section h2,
.awards-section h2,
.publications-section h2 {
   font-family: "Vigosamine", sans-serif;
   font-size: 2.4rem;
   margin-bottom: 2.5rem;
   position: relative;
   padding-bottom: 1rem;
   color: var(--textLight);
}

.exhibition-section h2::after,
.awards-section h2::after,
.publications-section h2::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 60px;
   height: 2px;
   background-color: var(--textLight);
}

.exhibition-item,
.award-item,
.publication-item {
   display: flex;
   margin-bottom: 2.5rem;
   padding-bottom: 2.5rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.exhibition-item:last-child,
.award-item:last-child,
.publication-item:last-child {
   border-bottom: none;
}

.exhibition-year,
.award-year,
.publication-year {
   flex: 0 0 120px;
   font-weight: 600;
   color: var(--textLight);
   opacity: 0.8;
   font-size: 1.8rem;
}

.exhibition-details,
.award-details,
.publication-details {
   flex: 1;
}

.exhibition-details h3,
.award-details h3,
.publication-details h3 {
   font-size: 2rem;
   margin: 0 0 0.8rem 0;
   color: var(--textLight);
   font-weight: 500;
}

.exhibition-details p,
.award-details p,
.publication-details p {
   margin: 0.5rem 0;
   line-height: 1.6;
   font-size: 1.8rem;
}

.location,
.organization,
.publication {
   font-style: italic;
   color: #bbb;
   margin-bottom: 0.5rem !important;
   display: block;
}

/* Animations */
.animate-fade-in {
   animation: fadeIn 1s ease-out forwards;
}

.animate-slide-up {
   animation: slideUp 0.8s ease-out forwards;
}

@keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
}

@keyframes slideUp {
   from { 
      opacity: 0;
      transform: translateY(20px);
   }
   to { 
      opacity: 1;
      transform: translateY(0);
   }
}

/* ---------------------- CV Page Styles ---------------------- */
.cv-content {
   padding: 6rem 0;
   max-width: 1200px;
   margin: 0 auto;
}

.cv-section {
   margin-bottom: 5rem;
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.cv-section.animate-slide-up {
   opacity: 1;
   transform: translateY(0);
}

.cv-section h2 {
   font-family: "Vigosamine", sans-serif;
   font-size: 2.4rem;
   margin-bottom: 2.5rem;
   position: relative;
   padding-bottom: 1rem;
   color: var(--textLight);
}

.cv-section h2::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 60px;
   height: 2px;
   background-color: var(--textLight);
}

.cv-item {
   display: flex;
   margin-bottom: 2.5rem;
   padding-bottom: 2.5rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cv-item:last-child {
   border-bottom: none;
}

.cv-year {
   flex: 0 0 120px;
   font-weight: 600;
   color: var(--textLight);
   opacity: 0.8;
}

.cv-details {
   flex: 1;
}

.cv-details p {
   margin: 0.5rem 0;
   line-height: 1.6;
}

.cv-details p:first-child {
   margin-top: 0;
}

/* ---------------------- Container ---------------------- */
.container {
   margin: auto;
   width: 90%;
}

.container2 {
   margin: auto;
   width: 53%;
}

.container3 {
   margin: auto;
   width: 85%;
}

/* ---------------------- Button ---------------------- */

/* ---------------------- Layout Styling ---------------------- */

/* ---------------------- Header ---------------------- */
header {
   padding: 3rem 0;
}

.headerContent ul {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

/* ---------------------- Logo ---------------------- */
#logo a {
   color: var(--textLight);
   font-size: 4rem;
   text-transform: uppercase;
}

body[data-theme="dark"] #logo a {
   color: var(--textDark);
}

/* ---------------------- Collection ---------------------- */
#collection,
#jstoggle,
.heroText,
.heroText2,
.lead,
.headingP,
.btn,
#footer {
   text-transform: uppercase;
}

/* ---------------------- light and dark theme toggle btn ---------------------- */
#jstoggle {
   display: flex;
   align-items: center;
}

.checkbox {
   opacity: 0;
   position: absolute;
}

.checkbox-label {
   margin-left: 1.5rem;
   background-color: var(--bgAccent);
   height: 4rem;
   width: 0.1rem;
   border-radius: 50px;
   position: relative;
   padding: 0.313rem;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.checkbox-label .ball {
   background: var(--textLight);
   width: 1.375rem;
   height: 1.375rem;
   position: absolute;
   right: -0.4rem;
   top: 0rem;
   border-radius: 50%;
   transition: transform 0.2s linear;
}

body[data-theme="dark"] .checkbox-label .ball {
   background: var(--textDark);
   transition: transform 0.2s linear;
}

.checkbox:checked + .checkbox-label .ball {
   transform: translateY(2.5rem);
}

/* ---------------------- Mobile nav ---------------------- */
.mobile {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.mobile-menu-icon {
   display: none;
   cursor: pointer;
   z-index: 2;
   transition: 0.4s;
}

.mobile #logo {
   display: none;
}

/* Hamburger menu */
.mobile-menu-icon div {
   display: block;
   background: var(--textLight);
   height: 0.1849rem;
   width: 1.4rem;
   margin-bottom: 0.2rem;
   border-radius: 0.5rem;
   transition: 0.4s all;
}

body[data-theme="dark"] .mobile-menu-icon div {
   background: var(--textDark);
}

/* Hamburger menu animation on click*/
.move .line1 {
   transform: rotate(-45deg) translate(-0.03rem, 0.5rem);
}

.move .line2 {
   opacity: 0;
}

.move .line3 {
   transform: rotate(45deg) translate(-0.03rem, -0.5rem);
}

/* ---------------------- Section: Hero Styling ---------------------- */
#hero {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   /* height: 100vh; */
   padding: 15rem 0;
}

.headerContent .contentTop {
   display: flex;
   justify-content: center;
   align-items: center;
   line-height: -1rem;
   text-align: center;
}

/* Hero text */
.heroText,
.heroText2 {
   text-align: center;
   font-size: 12.4rem;
   font-weight: 400;
   margin: 0;
   letter-spacing: -3%;
   word-spacing: -0.8rem;
}

/* Hero text behind */
/* .heroText {
   z-index: 1;
} */

/* Hero text top */
.heroText2 {
   display: block;
   z-index: 2;
   margin: -25rem 0 0 0;
}

/* Hero image */
.heroContent img {
   margin: -7.5rem auto 0 auto;
   display: block;
   width: 44rem;
   z-index: 1;
}

.heroContent .contentBottom p {
   text-align: center;
   font-weight: 500;
   padding: 8rem 6rem 0 6rem;
   line-height: 2.4rem;
}

/* ---------------------- Section: Image ---------------------- */
/* Large image after hero */
#image img {
   width: 100%;
}

/* ---------------------- Section: About ---------------------- */
#about {
   margin: 7rem 0;
}

.aboutContent,
.masterpieceContent,
.worhshopContent {
   display: flex;
   justify-content: space-between;
}

.aboutContent .contentTop,
.aboutContent .contentBottom,
.worhshopContent .contentTop {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.aboutContent .contentTop,
.masterpieceContent .contentTop,
.worhshopContent .contentTop {
   flex: 1.5;
}
.aboutContent .contentBottom,
.masterpieceContent .contentBottom,
.worhshopContent .contentBottom {
   flex: 1;
}

.lead {
   font-size: 9.6rem;
   letter-spacing: -3%;
   line-height: 9.6rem;
   font-weight: 400;
}

/* Content Bottem */
.headingP {
   font-weight: 500;
   line-height: 2rem;
   margin-bottom: 5rem;
}

.largeP {
   font-size: 3rem;
   line-height: 3.2rem;
   letter-spacing: 0.1rem;
   word-spacing: 0.9rem;
}

/* ---------------------- Section: Gallery Styling ---------------------- */
.galleryContent {
   display: flex;
   justify-content: center;
   margin: 0 0 0 10rem;
   /* gap: 1rem; */
}

.galleryContent .box {
   margin-bottom: 9.6rem;
}

.galleryContent h3 {
   line-height: 8rem;
   letter-spacing: -0.1rem;
}

/* left Images */
/* Gallery Content Top */
.galleryContent .contentTop,
.galleryContent .contentBottom {
   display: flex;
   align-items: center;
   flex-direction: column;
   flex: 1;
}

.galleryContent .contentTop .box:first-child,
.galleryContent .contentTop .box:nth-child(3) {
   width: 90%;
   position: relative;
}

/* .galleryContent .contentTop .box:first-child {
   margin: 0 0 14rem;
} */

.galleryContent .contentTop .box:nth-child(3) {
   margin-top: 9.6rem;
}

.galleryContent .contentTop .box:nth-child(2) {
   position: relative;
   width: 65rem;
   height: 41rem;
   margin: 4rem 0 5rem 5rem;
}

.galleryContent .contentTop .box:first-child h3 {
   position: absolute;
   bottom: -19%;
   left: 23%;
}

.galleryContent .contentTop .box:nth-child(3) h3 {
   position: absolute;
   bottom: -19%;
   left: 18%;
}

/* Gallery Content Bottom */
/* right Images */
.galleryContent .contentBottom {
   margin-top: 25rem;
}

.galleryContent .contentBottom .box:first-child,
.galleryContent .contentBottom .box:last-child {
   width: 70%;
   position: relative;
   /* width: 54.2rem; */
   /* height: 72.1rem; */
}

.galleryContent .contentBottom .box:last-child h3 {
   /* margin: -15.5rem 0 0 -4.6rem; */
   position: absolute;
   bottom: -12%;
   left: -10%;
}

.galleryContent .contentTop .box:nth-child(2) h3,
.galleryContent .contentBottom .box:first-child h3 {
   /* margin: -6rem 0 0 -4.6rem; */
   position: absolute;
   bottom: -11%;
   left: -8%;
}

.galleryContent img {
   width: 93%;
}

/* ---------------------- Section: Workshop ---------------------- */
/* Large image after hero */
#worhshop {
   background: url(../img/workshop.png) center center/cover no-repeat;
   width: 100%;
   color: var(--textDark);
   margin-top: 7rem;
}

.worhshopContent {
   padding: 9.6rem 0;
}

.worhshopContent .contentBottom {
   margin-top: 28rem;
}

/* ---------------------- Section: Celebrate ---------------------- */
#celebrate {
   margin: 7rem 0 4rem 0;
   text-align: center;
}

.celebrateContent .contentBottom {
   text-align: center;
   display: flex;
   justify-content: center;
   margin: 0 auto;
   gap: 4rem;
}

.celebrateContent .contentBottom .imgGallery .box {
   width: 45%;
   position: relative;
}

.celebrateContent .contentBottom .imgGallery2 .box {
   width: 50%;
   position: relative;
}

.celebrateContent .contentBottom .imgGallery .box img {
   width: 45.3rem;
   text-align: center;
}

.celebrateContent .contentBottom .imgGallery .box:first-child img {
   margin: 8rem 0 0 10rem;
   /* position: absolute;
   top: 4%; */
}

.celebrateContent .contentBottom .imgGallery .box:nth-child(2) img {
   margin: -19rem 0 0 32rem;
}

.celebrateContent .contentBottom .imgGallery .box:nth-child(3) img {
   margin: -12rem 0 0 0rem;
}

.celebrateContent .contentBottom .imgGallery .box:nth-child(4) img {
   margin: -18rem 0 0 25rem;
}

.celebrateContent .contentBottom .imgGallery2 .box:first-child img {
   margin: 4rem 0 3rem -13rem;
}

.celebrateContent .contentBottom .imgGallery2 .box:nth-child(2) img {
   margin: 0;
}

.celebrateContent .contentBottom .imgGallery2 .box img {
   width: 54.2rem;
}

/* ---------------------- Section: Visit Us ---------------------- */
#visitUs {
   margin: 7rem 0;
   text-align: center;
}

.visitUsContent .contentTop {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.visitUsContent p {
   margin: auto 39rem;
   font-size: 9.6rem;
   line-height: 9.6rem;
}

.visitUsContent p span {
   font-family: "vigosamine", sans-serif;
}

.visitUsContent .btn {
   font-family: "Helvetica Neue", sans-serif;
   font-weight: 400;
   color: var(--textLight);
   margin-top: 5.6rem;
   border: 0.1rem solid var(--textLight);
   border-radius: 5rem;
   padding: 2.6rem 4rem;
   font-size: 2.4rem;
   line-height: 2rem;
   transition: all 0.4s;
}

body[data-theme="dark"] .visitUsContent .btn {
   color: var(--textDark);
   border: 0.1rem solid var(--textDark);
}

/* ---------------------- Section: Footer ---------------------- */
#footer {
   margin-top: 7rem;
   text-align: center;
}

#footer .footerContent,
.subFooterContent {
   border-bottom: 0.1rem solid var(--textLight);
}

body[data-theme="dark"] #footer .footerContent,
body[data-theme="dark"] .subFooterContent {
   border-bottom: 0.1rem solid var(--textDark);
}

#footer h2 a {
   font-size: 25rem;
   word-spacing: 3rem;
   letter-spacing: 1rem;
   font-weight: 400;
   color: var(--textLight);
}

body[data-theme="dark"] #footer h2 a {
   color: var(--textDark);
}

/* ---------------------- Section: Sub Footer ---------------------- */
#subFooter,
#subFooter2 {
   margin: 1rem 0;
}

.subFooterContent,
.subFooter2Content .contentTop {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.subFooterContent .contentTop {
   flex: 3;
}

.subFooterContent .contentBottom {
   flex: 1;
   display: flex;
   justify-content: space-between;
}

.social {
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
   margin: 0;
   padding: 0;
   list-style: none;
}

.social li {
   margin: 0;
   padding: 0;
}

.social a {
   display: flex;
   align-items: center;
   gap: 0.8rem;
   color: var(--textLight);
   text-decoration: none;
   font-size: 1.4rem;
   transition: all 0.3s ease;
   padding: 0.8rem 1.2rem;
   border-radius: 4px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   font-family: "Helvetica Neue", sans-serif;
}

.social a:hover {
   color: var(--primaryColor);
   background: rgba(255, 255, 255, 0.1);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.social i {
   font-size: 1.6rem;
   width: 20px;
   text-align: center;
}

/* Adjust for dark theme */
body[data-theme="dark"] .social a {
   color: var(--textLight);
   background: rgba(255, 255, 255, 0.05);
   border-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="dark"] .social a:hover {
   background: rgba(255, 255, 255, 0.1);
}

/* ---------------------- Section: Sub Footer 2---------------------- */
.subFooter2Content .contentTop {
   margin: auto;
   width: 22%;
}

.subFooter2Content a {
   text-decoration: underline;
   color: var(--textLight);
}

body[data-theme="dark"] .subFooter2Content a {
   color: var(--textDark);
}

.subFooter2Content span {
   background: var(--textLight);
   height: 5rem;
   width: 0.1rem;
}

body[data-theme="dark"] .subFooter2Content span {
   background: var(--textDark);
}

/* ---------------------------------- Scroll to Top ---------------------------------- */
.scroll-top {
   position: fixed;
   bottom: -100rem;
   right: 3rem;
   z-index: 2;
   cursor: pointer;
   color: var(--textLight);
   transition: all 0.4s;
   font-size: 4rem;
}

body[data-theme="dark"] .scroll-top {
   color: var(--textDark);
}

.scroll-top:hover,
.visitUsContent .btn:hover {
   transform: translateY(-8px);
   transition: all 0.4s;
}

.scroll-active {
   bottom: 4rem;
   transition: 0.4s all ease-in-out;
}

/* hero waving hand */

/* Hero Big text */

/* Hero button */