/* General Styles */
body {
  background: #fff;
  color: #798a9a;
  line-height: 1.7;
  font-size: 16px;
  font-weight: 300;
}

html, body {
  min-width: 360px !important; /* Prevent the page from shrinking below 360px */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Gradient Backgrounds */
.p1-gradient-bg,
.thumb .overlay-bg,
.p1-gradient-color {
  background: linear-gradient(0deg, #8490ff 0%, #62bdfc 100%);
}

.p1-gradient-color {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Selection Styles */
::selection,
::-moz-selection {
  background: #000;
  color: #fff;
}

/* Headings */
h1,
h2,
h3,
h4,
h5 {
  color:  #2c3e50;
  font-weight: 50;
}

/* Links */
a {
  transition: .3s all;
  color: #2c3e50;
}

/* Ensure cursor is properly defined for all links */
a {
    cursor: pointer;
}

/* Specifically for the PDF links */
a[href$=".pdf"] {
    cursor: pointer;
    /* or another valid value like default */
}

/* Additional general hover style for anchor tags */
a:hover,
a:focus,
a:active {
    cursor: pointer;
}

a:hover,
a:focus,
a:active {
  color: #2c3e50;
  text-decoration: none;
}

/* Navbar */
.parent-nav-link-padding,
.site-navbar .navbar-nav>li>a {
  padding: 15px 20px !important;
}

.navbar-hidden {
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

.site-navbar {
    background: transparent; /* Ensure solid background for visibility */
    z-index: 1000; /* Ensure it stays above other content */
    position: fixed; /* Stick the navbar to the top */
    width: 100%; /* Full width */
    top: 0;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.site-navbar .navbar-brand {
  display: inline-block;
  border: 2px solid #fff;
  padding: 5px 20px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .2em;
}

.site-navbar .navbar-brand:hover {
  color: #fff;
}

.site-navbar.bg-light {
  background: transparent !important;
}

@media (max-width: 991px) {
  .site-navbar.bg-light {
    background: #fff !important;
    top: 0;
  }

  .site-navbar.bg-light .navbar-brand {
    display: inline-block;
    font-size: 18px;
    border: 2px solid #000;
    padding: 2px 10px !important;
    color: #000;
  }
}

.site-navbar .navbar-nav > li > a {
    padding: 15px 40px; /* Horizontal padding for spacing */
    margin-right: 20px; /* Add extra spacing between items */
    color: white !important; /* Ensure visible text color */
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
}

@media (max-width: 991px) {
  .site-navbar .navbar-nav>li>a {
    color: rgba(0, 0, 0, 0.7) !important;
  }
}

.site-navbar.scrolled {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff !important; /* Add a solid background on scroll */
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */
    z-index: 1000;
    transition: all 0.3s ease-in-out;
}

.site-navbar.scrolled .navbar-brand {
  display: inline-block;
  font-size: 18px;
  border: 2px solid #000;
  padding: 2px 10px !important;
  color: #000;
}

.site-navbar.scrolled .navbar-nav>li>a {
   color: rgba(0, 0, 0, 0.7) !important;
}

.site-navbar.scrolled .navbar-nav>li>a:hover,
.site-navbar.scrolled .navbar-nav>li>a.active {
  color: #7BD5BA !important;
}


/* New Navbar Styling */
#new-navbar {
  position: fixed; /* Fix the navbar to the top of the page */
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  z-index: 1050; /* Ensure it stays above other content */
  background-color: black; /* Light background color */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

#new-navbar .navbar-brand,
#new-navbar .navbar-nav > li > a {
  color: #000 !important; /* Set font color to black */
}

#new-navbar .navbar-nav > li > a:hover,
#new-navbar .navbar-nav > li > a:focus {
  color: #555 !important; /* Optional: Darker shade on hover */
}


.site-hero {
    padding-top: 20px; /* Add space for menubar */
    padding-bottom: 80px; /* Add space at the bottom */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    height: 100vh;
    text-align: center;
}

.site-hero img {
    max-width: 80%; /* Ensure the image is responsive */
    max-height: 40%; /* Maintain aspect ratio */
    margin: 20% auto; /* Center the image */
}

.site-hero:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
}

.site-hero h1,
.site-hero .lead {
  font-weight: 200;
  color: #fff;
  z-index: 2;
}

.site-hero h1 {
  margin-bottom: 10px;
}

.site-hero h1 strong {
  font-weight: 800;
}

@media (min-width: 768px) {
  .site-hero h1 {
    font-size: 70px;
    margin-top: 15%;
  }
}

@media (max-width: 991px) {
  .lead {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .site-hero img {
    display: none; /* Hide the image on smaller screens */
  }
}

@media (max-width: 768px) {
  .site-hero .row {
    text-align: center; /* Center the text */
    margin-top: 15%;
  }

  .site-hero .col-lg-6 {
    margin: 0 auto; /* Center the text column */
  }
}

.site-hero .lead {
  line-height: 2;
}

.site-hero .site-subheading {
  max-width: 640px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.5);
}

.site-section {
  padding: 5em 0;
}

.section-heading {
  margin-bottom: 30px;
  position: relative;
}

.section-heading h2 {
  position: relative;
  font-weight: 200;
  padding-top: 20px;
  font-size: 30px;
}

.section-heading h2 strong {
  font-weight: 800;
}

.section-heading h2:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 50px;
  background: #7BD5BA;
}

.section-heading.text-center h2:before {
  left: 50%;
  transform: translateX(-50%);
}


.section-heading h3 strong {
  font-weight: 800;
}

.section-heading h3:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 45%;
  height: 2px;
  width: 50px;
  background: #7BD5BA;
}

.section-heading.text-center h2:before {
  left: 50%;
  transform: translateX(-50%);
}

.lead {
  font-weight: 200;
  line-height: 1.5;
}

/* Adjust spacing for H3 and H2 headings */
.section-heading h3 {
  margin-bottom: -5%; /* Reduce the bottom margin of H3 */
}

.custom-img h2 {
  margin-top: 10px; /* Reduce the top margin of H2 */
}

.custom-img {
  max-width: 80%;
  margin: 10% auto;
}

.site-service-item .icon {
  display: block;
  margin: 0 auto 30px auto;
  background: #7BD5BA;
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
}


/* Horizontal container for side-by-side sections */
.horizontal-container {
  display: flex;
  flex-direction: row; /* Align sections side by side */
  width: 200%; /* Double the width to fit both sections */
  overflow-x: hidden; /* Enable horizontal scrolling */
  scroll-behavior: auto; /* Disable smooth scrolling animation */
}

.horizontal-container > .site-section { 
  flex: 0 0 50%; /* Each section takes 50% of the width */
  height: 100vh; /* Ensure full height */
  display: flex; /* Use Flexbox for alignment */
  align-items: center; /* Vertically center content */
  justify-content: center; /* Keep content centered */
  position: relative; /* Allow positioning of the button */
}
@media (max-width: 768px) {
  .horizontal-container > .site-section {
    height: auto; /* Adjust height to fit content */
    padding: 20px 0; /* Add padding for spacing */
    height: 90vh; /* Ensure full height */
  }
}

/* Style for the Left Arrow Button */
.prev-page-btn {
  position: absolute; /* Position relative to the section */
  left: 20px; /* Position it 20px from the left */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust for perfect vertical centering */
  z-index: 900; /* Ensure it stays above other content */
  padding: 10px 20px; /* Add padding for better appearance */
  font-size: 16px; /* Adjust font size */
  text-align: center;
  background-color: #007bff; /* Bootstrap primary button color */
  color: #fff; /* White text */
  border: none; /* Remove border */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  transition: none; /*Smooth hover effect all 0.3s ease-in-out;*/
}

/* Hover effect for the Left Arrow Button 
.prev-page-btn:hover {
  background-color: #0056b3; Darker blue on hover 
  color: #fff;  Keep text white 
  transform: translateY(-50%) scale(1.1);  Slightly enlarge on hover 
}*/

/* Style for the Right Arrow Button */
.next-page-btn {
  position: absolute; /* Position relative to the section */
  right: 20px; /* Position it 20px from the right */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust for perfect vertical centering */
  z-index: 900; /* Ensure it stays above other content */
  padding: 10px 20px; /* Add padding for better appearance */
  font-size: 16px; /* Adjust font size */
  text-align: center;
  background-color: #007bff; /* Bootstrap primary button color */
  color: #fff; /* White text */
  border: none; /* Remove border */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  transition: none; /*Smooth hover effect all 0.3s ease-in-out;*/
}

/* Hover effect for the Right Arrow Button 
.next-page-btn:hover {
  background-color: #0056b3; Darker blue on hover 
  color: #fff; /* Keep text white 
  transform: translateY(-50%) scale(1.1); /* Slightly enlarge on hover 
} */


/* Bottom Button Styling */
.bottom-btn {
  position: absolute; /* Position relative to the section */
  bottom: 20px; /* Position 20px from the bottom */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Adjust for perfect horizontal centering */
  padding: 10px 20px; /* Add padding for better appearance */
  font-size: 16px; /* Adjust font size */
  text-align: center;
  background-color: #007bff; /* Bootstrap primary button color */
  color: #fff; /* White text */
  border: none; /* Remove border */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  transition: none; /*Smooth hover effect all 0.3s ease-in-out;*/
  z-index: 900; /* Ensure it stays above other content */
}

/* Hover effect for the Bottom Button 
.bottom-btn:hover {
  background-color: #0056b3; /* Darker blue on hover 
  color: #fff; /* Keep text white 
  transform: translateX(-50%) scale(1.1); /* Slightly enlarge on hover 
}*/

/* Adjust "Previous Experience" button for screens smaller than 768px */
@media (max-width: 575px) {
  .bottom-btn {
    position: absolute; /* Fix the button to the bottom */
    bottom: 20px; /* Position it 20px from the bottom */
    left: 10px; /* Align it to the left */
    transform: none; /* Remove centering transform */
    width: auto; /* Adjust width */
    text-align: left; /* Align text to the left */
  }
}

/* Adjust "More" button for screens smaller than 768px */
@media (max-width: 600px) {
  .next-page-btn {
    position: absolute; /* Fix the button to the bottom */
    bottom: 20px;
    top: auto;
    right: 10px; /* Align it to the right */
    transform: none; /* Remove centering transform */
    width: auto; /* Adjust width */
    text-align: right; /* Align text to the right */
  }
}

/* Adjust "More" button for screens smaller than 768px */
@media (max-width: 600px) {
  .prev-page-btn {
    position: absolute; /* Fix the button to the bottom */
    bottom: 20px;
    top: auto;
    left: 10px; /* Align it to the right */
    transform: none; /* Remove centering transform */
    width: auto; /* Adjust width */
    text-align: right; /* Align text to the right */
  }
}


.section-heading h2 {
  position: relative; /* Ensure the pseudo-element is positioned relative to the text */
  display: inline-block; /* Keep the text and line together */
  text-align: center; /* Center-align the text */
}

.site-service-item .icon span {
  font-size: 40px;
  color: #080b0e;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.site-service-item h3 {
  font-size: 20px;
  font-weight: 200;
}

.site-link {
  position: relative;
}

/* Fix for H3 and H4 alignment and spacing */
.section-heading h3 {
  display: block; /* Ensure H3 is a block element */
  margin: 0; /* Reset default margins */
  font-size: 24px; /* Adjust font size if needed */
  font-weight: bold; /* Ensure bold text */
}

.section-heading h4 {
  display: block; /* Ensure H4 is a block element */
  margin: 10px 0 20px 0; /* Add spacing above and below H4 */
  font-size: 18px; /* Adjust font size if needed */
  font-weight: normal; /* Ensure normal weight for contrast */
  text-transform: uppercase; /* Optional: Make text uppercase */
  letter-spacing: 1px; /* Optional: Add letter spacing */
  text-align: center; /* Center-align the text */
}

.site-link i {
  position: relative;
  top: 2px;
  transition: .3s all ease;
}

.site-link:hover i {
  margin-left: 20px;
}

.site-list {
  padding: 0;
  margin: 0;
}

.site-list li {
  margin: 0 0 10px 0;
  padding: 0;
  position: relative;
  list-style: none;
}

.site-list li:before {
  font-family: 'icomoon';
  position: absolute;
  top: .1em;
  left: 0;
}

.site-list li.site-check {
  padding-left: 30px;
}

.site-list li.site-check:before {
  color: #7BD5BA;
  font-size: 16px;
  content: "\ebd3";
}

.btn {
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: .3s all ease;
}

.btn:active,
.btn:focus {
  outline: none;
  box-shadow: none !important;
}

.btn.btn-primary {
  color: #fff;
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus {
  background: #7BD5BA;
}

.btn-primary,
.btn-secondary {
  background-color: #7BD5BA;
  border-color: #7BD5BA;
}

.progress {
  margin-bottom: 26px;
  height: 4px;
}

.progress .progress-bar {
  background-color: #7BD5BA;
  position: relative;
  border-radius: 4px;
}

.progress .progress-bar span {
  background-color: #7BD5BA;
  position: absolute;
  bottom: -20px;
  font-size: 10px;
  line-height: 10px;
  padding: 2px 3px 2px 4px;
  right: -1.4em;
  border-radius: 2px;
}

.progress .progress-bar span:after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  height: 0;
  width: 0;
  border-bottom-color: #7BD5BA;
  border-width: 5px;
  margin-left: -5px;
}

.skill h3 {
  font-size: 18px;
}

.filters {
  text-align: center;
}

.filters ul {
  padding: 0;
  margin: 0 0 30px 0;
}

.filters ul li {
  display: inline-block;
  cursor: pointer;
  padding: 20px;
  transition: .3s all ease;
  font-size: 25px;
}

.filters ul li:hover,
.filters ul li.active {
  color: #7BD5BA;
}

/* General Styles for .single-portfolio */
.single-portfolio {
  margin-bottom: 50px;
  display: block;
  border-radius: 5px;
  text-align: center; /* Center all text inside */
}

.single-portfolio .relative {
  margin-bottom: 20px;
}

.single-portfolio .p-inner {
  text-align: center; /* Center the text below the image or embed */
}

.single-portfolio .p-inner h4 {
  font-size: 20px;
}

.single-portfolio .p-inner .cat {
  font-size: 12px;
  text-transform: uppercase;
  color: #353535a4;
}

.single-portfolio .thumb img,
.single-portfolio .youtube-embed iframe {
  display: block; /* Treat images and iframes as block elements */
  margin: 0 auto; /* Center them horizontally */
}

.thumb img {
  min-height: 173px;
}

@media (max-width: 1200px) {
  .thumb img {
    min-height: 144px;
  }
}
@media (max-width: 768px) {
  .thumb img {
    min-height: 100px;
  }
}
@media (max-width: 575px) {
  .thumb img {
    min-height: 200px;
  }
}

.single-portfolio:hover .thumb .overlay-bg {
  opacity: 0.85;
}

.single-portfolio:hover .middle {
  opacity: 1;
}

/* Media Query for Screens Less Than 768px */
@media (max-width: 768px) {
  .single-portfolio .thumb {
    text-align: center; /* Center the image and YouTube embed container */
  }

  .single-portfolio .thumb img,
  .single-portfolio .youtube-embed iframe {
    margin: 0 auto; /* Center them horizontally */
  }

  .single-portfolio .p-inner {
    text-align: center; /* Center the text below the image or embed */
  }
}

/* Portfolio Area */
.portfolio-area .primary-btn {
  color: #fff;
  background-color: #7BD5BA;
  margin-left: auto;
  margin-right: auto;
}

.portfolio-area .filters {
  text-align: center;
}

.portfolio-area .filters ul {
  padding: 0;
}

.portfolio-area .filters ul li {
  list-style: none;
  display: inline-block;
  padding: 18px 15px;
  cursor: pointer;
  position: relative;
  text-transform: uppercase;
  color: #000;
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 736px) {
  .portfolio-area .filters ul li {
    padding: 6px 6px !important;
  }
}

.portfolio-area .filters ul li:after {
  content: "";
  display: block;
  width: 0%;
  position: absolute;
  height: 2px;
  background: #333;
  transition: width 350ms ease-out;
}

.portfolio-area .filters ul li:hover:after {
  width: 100%;
  transition: width 350ms ease-out;
}

.portfolio-area .filters ul li.active {
  color: #90F6D7;
}

.portfolio-area .filters-content {
  margin-top: 50px;
}

.portfolio-area .filters-content .show {
  opacity: 1;
  visibility: visible;
  transition: all 350ms;
}

.portfolio-area .filters-content .hide {
  opacity: 0;
  visibility: hidden;
  transition: all 350ms;
}

.portfolio-area .filters-content .item {
  text-align: center;
  cursor: pointer;
  margin-bottom: 30px;
}

.portfolio-area .filters-content .item img {
  border-radius: 10px;
  width: 100%;
}

.portfolio-area .filters-content .p-inner {
  padding: 20px 0px;
  text-align: center;
}

.portfolio-area .filters-content .item .p-inner .cat {
  font-size: 13px;
}

/* Images */
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  backface-visibility: hidden;
}

.img-fluid {
  max-width: 70%;
  height: auto;
}

@media (max-width: 268px) {
  .img-fluid {
    max-width: 80%;
  }
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.text {
  color: white;
  font-size: 25px;
  padding: 16px 32px;
}

.thumb .overlay-bg {
  opacity: 0;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}

@media screen and (prefers-reduced-motion: reduce) {
  .thumb .overlay-bg {
    transition: none;
  }
}

/* Resume */
.resume-item {
  padding: 40px;
  background: #fff;
  transition: .3s all ease;
  border: 4px solid transparent;
}

.resume-item:hover,
.resume-item:focus {
  border: 4px solid #7BD5BA;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.1);
}

.resume-item .date {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: .1em;
  color: #b3bdc6;
  text-transform: uppercase;
}

.resume-item .school {
  display: block;
  font-size: 20px;
  color: #2c3e50;
}

.resume-item h3,
.resume-item .school {
  color: #2c3e50;
}

/* Blog Entry */
.blog-entry {
  transition: .3s all ease;
  position: relative;
  top: 0;
  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1);
}

.blog-entry:hover,
.blog-entry:active,
.blog-entry:focus {
  box-shadow: 0 5px 50px -10px rgba(0, 0, 0, 0.1);
  top: -2px;
}

.blog-entry .blog-entry-text {
  border-top: none;
  padding: 30px;
}

.blog-entry .blog-entry-text h3 {
  font-size: 20px;
  margin-bottom: 10px;
  line-height: 1.5;
}

.blog-entry .blog-entry-text h3 a {
  color: #2c3e50;
}

.blog-entry .blog-entry-text h3 a:hover {
  color: #7BD5BA;
}

.blog-entry .meta {
  font-size: 14px;
}

.blog-entry .meta a {
  display: inline-block;
  margin-right: 10px;
  color: #96a3b0;
}

.blog-entry .meta a:hover {
  color: #7BD5BA;
}

/* Forms */
.form-control {
  border: none !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) !important;
}

.site-form .form-control {
  border: 1px solid #b3bdc6;
}

/* Contact Details */
.site-contact-details,
.site-contact-details li {
  padding: 0;
  margin: 0;
}

.site-contact-details li {
  list-style: none;
  margin-bottom: 20px;
}

.site-contact-details li>span {
  color: #2c3e50;
  letter-spacing: .1em;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
}

/* Footer */
.site-footer {
  padding: 3em 0;
}

.site-footer p:last-child {
  margin-bottom: 0;
}

.site-footer .social-item {
  display: inline-block;
  width: 60px;
  height: 60px;
  border: 1px solid #b3bdc6;
  position: relative;
  border-radius: 50%;
  font-size: 22px;
  margin: 0 10px;
}

.site-footer .social-item>span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Block 47 */
.block-47 .block-47-image {
  flex: 0 0 70px;
  display: block;
}

.block-47 .block-47-image img {
  border: 5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.2);
}

.block-47 .block-47-quote {
  margin-left: 40px;
  padding: 30px;
  background: #fff;
  border-radius: 7px;
  position: relative;
  box-shadow: 0 2px 30px -2px rgba(0, 0, 0, 0.1);
}

.block-47 .block-47-quote:before {
  content: "";
  position: absolute;
  left: -15px;
  border-width: 0 20px 20px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}

.block-47 .block-47-quote .block-47-quote-author {
  font-size: 14px;
  color: #666666;
}


/* Modal Custom Styles */
.custom-modal-body {
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.custom-modal-close {
  position: absolute;
  top: 10px;
  right: -20%;
  z-index: 1050;
  font-size: 2rem;
  color: black;
  border: none;
  background: none;
  cursor: pointer;
}

.custom-modal-image {
  max-width: 150%;
  max-height: 150%;
  object-fit: contain;
}

/* Disable modal pop-up for screens smaller than 768px */
@media (max-width: 768px) {
  .modal-trigger {
    pointer-events: none !important; /* Force disable click events */
    cursor: default !important; /* Force change cursor to default */
  }

  .modal-trigger[data-toggle="modal"] {
    pointer-events: none !important;
  }
}

/* Hide preview button for screens smaller than 768px */
@media (max-width: 768px) {
  .modal-trigger .middle {
    display: none !important; /* Hide the preview button */
  }
}

/* Normal screen styles for #ux-landing */
#ux-landing .custom-img {
  text-align: center; /* Center-align the content */
  margin-top: 20px; /* Add spacing above the section */
}

#ux-landing .custom-img h2 {
  font-size: 28px; /* Adjust font size for the heading */
  margin-bottom: 20px; /* Add spacing below the heading */
}

#ux-landing .custom-img img {
  max-width: 85%; /* Ensure the image is responsive */
  height: auto; /* Maintain aspect ratio */
  margin: 0 auto; /* Center-align the image */
  border-radius: 10px; /* Add rounded corners to the image */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

@media (max-width: 768px) {
  /* Responsive styles for #ux-landing */
  #ux-landing .custom-img h2 {
    font-size: 24px; /* Reduce font size for smaller screens */
    margin-bottom: 15px; /* Adjust spacing below the heading */
  }

  #ux-landing .custom-img img {
    max-width: 100%; /* Ensure the image fits within the container */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center-align the image */
  }
}


/* Normal screen styles for #sa_vw */
#sa_vw .custom-img {
  text-align: center; /* Center-align the content */
  margin-top: 20px; /* Add spacing above the section */
}

#sa_vw .custom-img img {
  max-width: 80%; /* Ensure the image is responsive */
  height: auto; /* Maintain aspect ratio */
  margin-bottom: 40px; /* Add spacing below the image */
  border-radius: 10px; /* Add rounded corners to the image */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

#sa_vw .custom-img p {
  font-size: 16px; /* Adjust font size for the text */
  line-height: 1.5; /* Improve readability */
  margin: 0 auto; /* Center-align the text */
  max-width: 100%; /* Limit the width of the text */
}

@media (max-width: 768px) {
  /* Responsive styles for #sa_vw */
  #sa_vw .custom-img img {
    max-width: 100%; /* Ensure the image fits within the container */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 25px; /* Adjust spacing below the image */
  }

  #sa_vw .custom-img p {
    font-size: 14px; /* Reduce font size for smaller screens */
    line-height: 1.4; /* Adjust line height for readability */
    max-width: 100%; /* Allow the text to take full width */
  }
}

/* Enlarge the right image in Discover & Define section */
#discover-define .col-md-6:nth-child(2) img {
  max-width: 83%; /* Increase the size of the image */
}


/* Fixed layout for Discover & Define section */
@media (max-width: 768px) {
#discover-define .container {
  width: 90%; /* Fixed width for the container */
  max-width: 100%; /* Prevent resizing */
}

#discover-define .row {
  display: flex; /* Ensure consistent row layout */
  flex-wrap: nowrap; /* Prevent wrapping of columns */
}

#discover-define .col-md-6 {
  flex: 0 0 50%; /* Ensure each column takes up 50% of the width */
  max-width: 50%; /* Prevent resizing */
}

#discover-define img {
  max-width: 100%; /* Ensure images fit within their columns */
  height: auto; /* Maintain aspect ratio */
}

#discover-define p {
  font-size: 16px; /* Fixed font size */
  line-height: 1.5; /* Consistent line height */
}
}

@media (max-width: 768px) {
  /* Enlarge the right image in Discover & Define section */
  #discover-define .col-md-6:nth-child(2) img {
    max-width: 115%; /* Increase the size of the image */
  }
}

/* Ensure images and text are aligned in the same row */
.row.align-items-center {
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Align items vertically */
  justify-content: space-between; /* Add space between the two columns */
}

.row.align-items-center .col-md-6 {
  display: flex; /* Use flexbox for each column */
  flex-direction: column; /* Stack image and text vertically */
  align-items: center; /* Center-align content */
  text-align: center; /* Center-align text */
}


/* Responsive styles for #discover-define2 */
@media (max-width: 768px) {
  /* Center the heading */
  #discover-define2 .section-heading h3 {
    text-align: center;
    font-size: 20px; /* Adjust font size for smaller screens */
    margin-bottom: -20px;
  }

  /* Stack logo and text vertically */
  #discover-define2 .row.align-items-center {
    flex-direction: column; /* Stack elements vertically */
    text-align: center; /* Center-align content */
    margin-bottom: -10% !important; /* Add spacing below the row */
  }

  #discover-define2 .row.align-items-center .col-md-4,
  #discover-define2 .row.align-items-center .col-md-8 {
    width: 90%; /* Make columns take full width */
    margin-bottom: 20px; /* Add spacing between stacked elements */
  }

  #discover-define2 .row.align-items-center .col-md-4 img {
    max-width: 20%; /* Adjust logo size */
    margin: 0 auto; /* Center-align logo */
  }

  /* Center the three images */
  #discover-define2 .row.text-center {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for images */
    justify-content: center; /* Center-align images */
    gap: -5px; /* Add spacing between images */
  }

  #discover-define2 .row.text-center img {
    max-width: 100%; /* Ensure images are responsive */
    margin: 0 auto; /* Center-align images */
  }

  #discover-define2 .row.text-center .col-md-4 {
    width: 30%; /* Make each image take full width */
      }
}



/* Center Figma logo and text in the same row */
#ideas-plan .row.align-items-center {
  display: flex; /* Enable Flexbox */
  flex-direction: row; /* Align logo and text in the same row */
  align-items: center; /* Vertically align logo and text */
  justify-content: center; /* Center-align horizontally */
  text-align: center; /* Center-align text */
  margin-bottom: 20px; /* Add spacing below the row */
}

#ideas-plan .row.align-items-center img {
  max-width: 50%; /* Adjust logo size */
  margin-right: -150%; /* Add spacing between logo and text */
}

#ideas-plan .row.align-items-center h4 {
  font-size: 20px; /* Adjust font size for the text */
  margin: 0; /* Remove default margins */
  line-height: 1.2; /* Adjust line height for better alignment */
  margin-left: 25%; /* Add spacing above the image */
}

#ideas-plan .row.justify-content-center {
  display: flex; /* Enable Flexbox */
  justify-content: center; /* Center-align the image */
  text-align: center; /* Center-align text */
}

#ideas-plan .row.justify-content-center img {
  max-width: 90%; /* Ensure the image is responsive */
  height: auto; /* Maintain aspect ratio */
  margin: 0 auto; /* Center-align the image */
}

@media (max-width: 768px) {
  /* Center Figma logo and text in the same row */
  #ideas-plan .row.align-items-center {
    display: flex; /* Enable Flexbox */
    flex-direction: row; /* Align logo and text in the same row */
    align-items: center; /* Vertically align logo and text */
    justify-content: center; /* Center-align horizontally */
    text-align: center; /* Center-align text */
    margin-bottom: 20px; /* Add spacing below the row */
  }

  #ideas-plan .row.align-items-center img {
    max-width: 30%; /* Adjust logo size */
    margin-right: 5%; /* Add spacing between logo and text */
  }

  #ideas-plan .row.align-items-center h4 {
    font-size: 20px; /* Adjust font size for the text */
    margin: 0; /* Remove default margins */
    line-height: 1.2; /* Adjust line height for better alignment */
    margin-left: 15%; /* Add spacing above the image */
  }

  #ideas-plan .row.justify-content-center {
    display: flex; /* Enable Flexbox */
    justify-content: center; /* Center-align the image */
    text-align: center; /* Center-align text */
  }

  #ideas-plan .row.justify-content-center img {
    max-width: 90%; /* Ensure the image is responsive */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center-align the image */
  }
}


/* Normal screen styles for #ideas-plan2 */
#ideas-plan2 .row.text-center {
  display: flex; /* Enable Flexbox */
  flex-wrap: wrap; /* Allow wrapping for rows */
  justify-content: space-between; /* Distribute columns evenly */
  gap: 5%; /* Add spacing between columns */
  margin-left: -10%;
}

#ideas-plan2 .row.text-center .col-md-4 {
  flex: 0 0 50%; /* Set each column to 30% width */
  max-width: 30%; /* Ensure consistent column width */
  text-align: center; /* Center-align text below images */
}

#ideas-plan2 .row.text-center img {
  max-width: 120%; /* Ensure images are responsive */
  height: auto; /* Maintain aspect ratio */
  margin-bottom: 10px; /* Add spacing below images */
}

#ideas-plan2 .row.text-center p {
  font-size: 16px; /* Adjust font size for text */
  line-height: 1.5; /* Improve readability */
}

@media (max-width: 768px) {
  /* Responsive styles for #ideas-plan2 */
  #ideas-plan2 .row.text-center {
    display: flex; /* Enable Flexbox */
    flex-wrap: wrap; /* Allow wrapping for rows */
    justify-content: center; /* Center-align columns */
    gap: 5px; /* Reduce spacing between columns */
    margin-left: -30px;
  }

  #ideas-plan2 .row.text-center .col-md-4 {
    flex: 0 0 60%; /* Make each column take 45% of the width */
    max-width: 45%; /* Ensure consistent column width */
    margin-bottom: -15px !important; /* Reduce spacing between rows */
    text-align: center; /* Center-align text below images */
  }

  #ideas-plan2 .row.text-center img {
    max-width: 110%; /* Ensure images fit within their columns */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center-align images */
  }

  #ideas-plan2 .row.text-center p {
    font-size: 12px; /* Adjust font size for text */
    line-height: 1.2; /* Improve readability */
    max-width: auto;
  }
}

/* Center AutoCAD logo and text in the same row */
#design-protoype .row.align-items-center {
  display: flex; /* Enable Flexbox */
  flex-direction: row; /* Align logo and text in the same row */
  align-items: center; /* Vertically align logo and text */
  justify-content: center; /* Center-align horizontally */
  text-align: center; /* Center-align text */
  margin-bottom: 20px; /* Add spacing below the row */
}

#design-protoype .row.align-items-center img {
  max-width: 70%; /* Adjust logo size */
  margin-right: -120%; /* Add spacing between logo and text */
}

#design-protoype .row.align-items-center h4 {
  font-size: 20px; /* Adjust font size for the text */
  margin: 0; /* Remove default margins */
  line-height: 1.2; /* Adjust line height for better alignment */
  margin-left: 25% !important; /* Add spacing above the image */
}

#design-protoype .row.justify-content-center {
  display: flex; /* Enable Flexbox */
  justify-content: center; /* Center-align the image */
  text-align: center; /* Center-align text */
}

#design-protoype .row.justify-content-center img {
  max-width: 100%; /* Ensure the image is responsive */
  height: auto; /* Maintain aspect ratio */
  margin: 0 auto; /* Center-align the image */
}

@media (max-width: 768px) {
  /* Center AutoCAD logo and text in the same row */
  #design-protoype .row.align-items-center {
    display: flex; /* Enable Flexbox */
    flex-direction: row; /* Align logo and text in the same row */
    align-items: center; /* Vertically align logo and text */
    justify-content: center; /* Center-align horizontally */
    text-align: center; /* Center-align text */
    margin-bottom: 20px; /* Add spacing below the row */
  }

  #design-protoype .row.align-items-center img {
    max-width: 40%; /* Adjust logo size */
    margin-right: 0%; /* Add spacing between logo and text */
  }

  #design-protoype .row.align-items-center h4 {
    font-size: 20px; /* Adjust font size for the text */
    margin: 0; /* Remove default margins */
    line-height: 1.2; /* Adjust line height for better alignment */
    margin-left: 20%; /* Add spacing above the image */
  }

  #design-protoype .row.justify-content-center {
    display: flex; /* Enable Flexbox */
    justify-content: center; /* Center-align the image */
    text-align: center; /* Center-align text */
  }

  #design-protoype .row.justify-content-center img {
    max-width: 90%; /* Ensure the image is responsive */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center-align the image */
  }
}

/* Normal screen styles for #design-protoype2 */
#design-protoype2 .row.text-center {
  display: flex; /* Enable Flexbox */
  flex-wrap: wrap; /* Allow wrapping for rows */
  justify-content: space-between; /* Distribute columns evenly */
  gap: 5%; /* Add spacing between columns */
  margin-left: -10%;
}

#design-protoype2 .row.text-center .col-md-4 {
  flex: 0 0 30%; /* Set each column to 30% width */
  max-width: 30%; /* Ensure consistent column width */
  text-align: center; /* Center-align text below images */
}

#design-protoype2 .row.text-center img {
  max-width: 120%; /* Ensure images are responsive */
  height: auto; /* Maintain aspect ratio */
  margin-bottom: 10px; /* Add spacing below images */
}

#design-protoype2 .row.text-center p {
  font-size: 16px; /* Adjust font size for text */
  line-height: 1.5; /* Improve readability */
}

@media (max-width: 768px) {
  /* Responsive styles for #design-protoype2 */
  #design-protoype2 .row.text-center {
    display: flex; /* Enable Flexbox */
    flex-wrap: wrap; /* Allow wrapping for rows */
    justify-content: center; /* Center-align columns */
    gap: 15px; /* Add spacing between columns */
    margin: 0px 0px 0px -30px;
  }

  #design-protoype2 .row.text-center .col-md-4 {
    flex: 0 0 45%; /* Make each column take 45% of the width */
    max-width: 45%; /* Ensure consistent column width */
    margin-bottom: 20px; /* Add spacing between rows */
    text-align: center; /* Center-align text below images */
  }

  #design-protoype2 .row.text-center img {
    max-width: 120%; /* Ensure images fit within their columns */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center-align images */
  }

  #design-protoype2 .row.text-center p {
    font-size: 14px; /* Adjust font size for text */
    line-height: 1.4; /* Improve readability */
  }
}


/* Normal screen styles for #final-product */
#final-product .section-heading {
  text-align: center; /* Center-align the heading */
  margin-bottom: 20px; /* Add spacing below the heading */
}

#final-product .custom-img {
  text-align: center; /* Center-align the content */
  margin-top: 20px; /* Add spacing above the section */
}

#final-product .custom-img h1 {
  font-size: 24px; /* Adjust font size for the heading */
  margin-bottom: 20px; /* Add spacing below the heading */
}

#final-product .custom-img img {
  max-width: 110%; /* Ensure the image is responsive */
  height: auto; /* Maintain aspect ratio */
  margin: 0 auto; /* Center-align the image */
  border-radius: 10px; /* Add rounded corners to the image */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

#final-product .custom-img p {
  font-size: 16px; /* Adjust font size for the text */
  line-height: 1.5; /* Improve readability */
  margin: 0 auto; /* Center-align the text */
  max-width: 100%; /* Limit the width of the text */
}

@media (max-width: 768px) {
  /* Responsive styles for #final-product */
  #final-product .custom-img h1 {
    font-size: 20px; /* Reduce font size for smaller screens */
    margin-bottom: 15px; /* Adjust spacing below the heading */
  }

  #final-product .custom-img img {
    max-width: 100%; /* Ensure the image fits within the container */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 15px; /* Add spacing below the image */
  }

  #final-product .custom-img p {
    font-size: 14px; /* Reduce font size for smaller screens */
    line-height: 1.4; /* Adjust line height for readability */
    max-width: 100%; /* Allow the text to take full width */
  }
}

/* Normal screen styles for #sources */
#sources .section-heading {
  text-align: center; /* Center-align the heading */
  margin-bottom: 20px; /* Add spacing below the heading */
}

#sources .links {
  text-align: center; /* Align links to the left */
  margin: 0 auto; /* Center the links container */
  max-width: 90%; /* Limit the width of the links section */
}

#sources .links p {
  font-size: 25px; /* Adjust font size for the links */
  line-height: 2; /* Improve readability */
  margin-bottom: 10px; /* Add spacing between links */
}

#sources .links a {
  text-decoration: none; /* Remove underline from links */
}

#sources .links a:hover {
  text-decoration: underline; /* Add underline on hover */
}

@media (max-width: 768px) {
  /* Responsive styles for #sources */
  #sources .section-heading {
    font-size: 18px; /* Reduce font size for the heading */
    margin-bottom: 15px; /* Adjust spacing below the heading */
  }

  #sources .links {
    text-align: center; /* Center-align links for smaller screens */
    max-width: 95%; /* Allow links to take full width */
  }

  #sources .links p {
    font-size: 14px; /* Reduce font size for the links */
    line-height: 1.5; /* Adjust line height for readability */
    margin-bottom: 15px; /* Adjust spacing between links */
  }

  #sources .links a {
    word-wrap: break-word; /* Allow long links to wrap */
  }
}

/* Fix password field and button alignment */
.form-group .input-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 300px;
  margin: 0 auto;
}

.form-group .input-group .form-control {
  flex: 1 1 auto;
  margin-right: 8px;
}

.form-group .input-group .input-group-append {
  flex: 0 0 auto;
  margin: 0;
}

.form-group .input-group .btn {
  margin: 0;
  position: static;
  top: auto;
  right: auto;
  transform: none;
  box-shadow: none;
}

/* Change password field background color */
#experience-password {
  background-color: #f0f1f1; /* Example: light blue */
}

/* Center the BACK TO MAIN button only for password_sice_experience.html */
body.password-sice-experience .bottom-btn {
  position: static;
  display: block;
  margin: 40px auto 0 auto;
  left: unset;
  bottom: unset;
  transform: none;
  width: 200px; /* Set a fixed width for the button */
  text-align: center;
}