:root 
{
  --primary-color: #493083;
  --secondary-color: #E0BF49;
  --third-color: #A14E9D;
}
body
{
    font-size: 16px;
    color: #393939;
    background-color: #fff;
    font-family: century-gothic, sans-serif;
    box-sizing: border-box;
    overflow-x: hidden;
}
html
{
    overflow-x: hidden;
}

/* Page CSS */
.container-90
{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.container-80
{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.container-75
{
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}
.container-70
{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.navbar {
    background-color: #f8f9fa;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
}
.home-page .navbar {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px 20px;
  border-bottom: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;
}

.navbar-brand {
    padding: 0;
}

.navbar-logo {
    height: 50px; /* Adjust this as per your logo's size */
}

.navbar-nav .nav-link {
    color: #000;
    margin-left: 15px;
    font-weight: 700;
    text-transform: uppercase;
}
.home-page .navbar-nav .nav-link
{
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
}
.navbar-nav .nav-link:hover {
    color: var(--secondary-color);
}

.navbar-toggler {
    border-color: #ddd;
}

.navbar-toggler-icon {
    color: #fff;
}

/* Carousel */
.carousel-item {
    height: 100vh; /* Subtracting navbar height */
    position: relative;
  }
  .carousel-item .image-overlay {
    position: relative;
  }
  .carousel-item .image-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* The dark overlay */
    z-index: 1;
  }
  .home-page-slider .carousel-item img 
  {
    object-fit: cover;
    height: 100vh;
    width: 100%;
    animation: zoomIn 10s ease-in-out infinite; /* Animation for zoom-in effect */
  }
  .contact-life-YVA .carousel-item
  {
    height: 550px;
  }
  .contact-life-YVA .carousel-item img 
  {
    object-fit: contain;
    height: 550px;
  }
  .contact-life-YVA .carousel-control-prev-icon, .contact-life-YVA .carousel-control-next-icon
  {
    background-color: #442C70;
    border-radius: 50%;
    padding: 15px;
  }
  @keyframes zoomIn {
    0% {
      transform: scale(1); /* Initial scale */
    }
    50% {
      transform: scale(1.1); /* Zoom in at midpoint */
    }
    100% {
      transform: scale(1); /* Back to original scale */
    }
  }
  
  .carousel-caption {
    position: absolute;
    bottom: 10%;
    left: 5%;
    width: auto; /* Ensures it doesn't take too much width */
    padding: 10px;
    border-radius: 5px;
    text-align: left; /* Align text to the left */
    z-index: 2;
  }
  
  
  .carousel-caption h5 {
    font-size: 22px;
    font-weight: 500;
    margin: 0;
    color: #fff;
  }
  
  .carousel-caption p {
    font-size: 16px;
    margin: 5px 0 0;
    color: #fff;
  }
  
  @media (max-width: 768px) {
    .carousel-caption h5 {
      font-size: 20px;
    }
    .carousel-caption p {
      font-size: 12px;
    }
  }
/* contact page*/
.mar-10
{
    margin-right: 10px;
}
footer p
{
    text-align: center;
    background: var(--secondary-color);
    font-weight: 500;
    font-size: 14px;
    padding: 7px 0px;
    margin-bottom: 0;
}
.page-content
{
    margin-top: 50px;
}

/* contact page */
.contact-page .scroll-container 
{
  height: 100vh; /* Full page height */
  scroll-snap-type: y mandatory; /* Vertical scrolling */
  overflow-y: scroll; /* Enable scrolling */
  scroll-behavior: smooth; /* Smooth scrolling */
}
.contact-page .section 
{
  height: 100vh; /* Each section takes full viewport height */
  scroll-snap-align: start; /* Snap to start of the section */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}
.contact-page .section1 { background-color: #fff; }
.contact-page .section2 { background-color: #F8F9FA; }
.contact-page .section3 { background-color: #fff; }

/* Scoped to .contact-page */
.contact-row .left-content
{
  padding-top: 40px;
}
.contact-page .img-rounded {
  max-height: 80vh; /* Adjust image height */
  margin-top: 30px;
  margin-bottom: 75px;
  border-radius: 10px; /* Optional: adds rounded corners */
}
.contact-row .left-content h4
{
  font-size: 22px;
  color: var(--primary-color);
  font-weight: 700;
}
.contact-row .left-content p
{
  font-size: 16px;
  font-weight: 500;
  margin: 10px 0px;
}
.contact-row .left-content p a
{
  color: #393939;
  text-decoration: none;
}
.contact-row .left-content p a:hover
{
  color: var(--secondary-color);
}
.contact-page .social-icons
{
  margin-top: 30px;
}
.contact-page .social-icons a {
  font-size: 15px;
  background-color: gray;
  color: #fff;
  margin: 0 20px;
  transition: color 0.3s;
  padding: 4px 8px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-block;
  line-height: 34px;
  text-align: center;
}
.contact-page .social-icons a:hover {
  background-color: var(--secondary-color); /* Change color on hover */
}
.contact-page form .form-control {
  margin-bottom: 5px;
  border: 1px solid #adb5bd;
  font-size: 14px;
}
.right-form
{
  margin-top: 0px;
  width: 80%;
  background: rgba(255, 255, 255, 0.5);
  padding: 30px;
  border: 1px solid #fff;
}
.btn-primary
{
  background: rgb(73,48,131);
  background: linear-gradient(90deg, rgba(73,48,131,1) 35%, rgba(161,78,157,1) 100%);
  border: none;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 40px;
  transition: all ease 0.3s;
}
.btn-primary:hover
{
  background: var(--secondary-color);
}
.studio-practice-img, .team2-img
{
  width: 100%;
  height: auto;
}
.studio-practice-img
{
  height: 90vh;
  object-fit: cover;
}
.studio-practice-h2
{
  position: absolute;
  top: 50%; /* Vertically centers the text */
  left: 50%; /* Horizontally centers the text */
  transform: translate(-50%, -50%); /* Adjust to center the text based on its own dimensions */
  color: white; /* Change as needed to contrast with the image */
  font-size: 70px; /* Adjust font size as necessary */
  text-align: center; /* Ensures the text is centered */
  letter-spacing: 40px;
}
.studio-page-content
{
  /* background-color: #FBF5E9; */
}
.studio-page-content .container-content
{
  background-color: #fff;
  padding: 50px 40px;
}
.studio-page-content .container-content h2
{
  /* color: var(--primary-color); */
  font-size: 18px;
  font-weight: 900;
}
.studio-page-content .container-content .single-person h2
{
  color: var(--primary-color);
  text-transform: uppercase;
  font-size: 20px;
}
.studio-page-content .container-content p
{
  margin-bottom: 40px;
  text-align: justify;
}
.studio-page-content .container-content .clients-ul
{
  list-style-type: none;
  padding-left: 0px;
  margin-bottom: 40px;
}
.studio-page-content .container-content .clients-ul li
{
  display: inline;
}
.studio-page-content .container-content .clients-ul li::after
{
  content: "|";
  padding: 0px 5px;
}
.studio-page-content .container-content .clients-ul .last-li::after
{
  content: "";
}
.studio-page-content .container-content .box-div img, .news-page-content .box-div img
{
  width: 100%;
  height: 250px;
  object-fit: cover;
  margin-bottom: 10px;
}
.studio-page-content .container-content h4, .news-page-content .box-div h4
{
  font-size: 16px;
  margin: 5px 0px 0px 0px;
  font-weight: 500;
}
.studio-page-content .container-content .single-person h4
{
  border-bottom: 1px solid gray;
  width: 60%;
  padding-bottom: 10px;
  font-style: italic;
}
.studio-page-content .container-content .box-div h3, .news-page-content .box-div h3
{
  font-size: 17px;
  color: var(--primary-color);
  font-weight: 600;
}
.studio-page-content .container-content .btn-primary
{
  width: 200px;
  margin: 20px auto 40px auto;
  text-align: center;
  display: block;
}
.btn-link-a
{
  text-decoration: none;
}
.studio-page-content .container-content .single-person
{
  display: flex;
  align-items: center;
  margin: 50px 0px;
}
.studio-page-content .container-content .single-person img
{
  width: 100%;
  height: auto;
  border-radius: 40px;
}
.work-page .page-content .top-content h2
{
  text-align: center;
  margin-bottom: 30px;
  border-bottom: 1px solid gray;
  padding-bottom: 30px;
}
.work-page .page-content .top-content h3
{
  margin-bottom: 30px;
  min-height: 36px;
}
.work-page .page-content .top-content ul
{
  list-style-type: square;
  padding-left: 15px;
  font-size: 15px;
  margin-bottom: 50px;
  width: 85%;
}
.work-page .page-content .top-content ul li
{
  margin: 8px 0px;
}
.work-page .page-content .top-content ul a
{
  text-decoration: none;
  color: #393939;
}
.work-page .page-content .top-content ul a:hover
{
  color: var(--secondary-color);
}
.works-row {
  position: relative;
}

.works-row .overlay {
  position: relative;
  width: 100%;
  margin-top: 4px;
  margin-bottom: 4px;
}
.works-row .col-sm-6
{
  padding: 5px;
}
.works-row .overlay img {
  width: 100%;
  height: 600px;
  display: block;
  object-fit: cover;
}
.works-row .col-sm-6 .overlay img
{
  height: 500px;
}

.works-row .text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Initial red background with 50% opacity */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: background-color 0.3s ease; /* Smooth transition */
}

.works-row .text-overlay h2 {
  font-size: 2em;
  margin: 0;
  text-align: center;
  /* font-weight: 600; */
  text-transform: uppercase;
  padding: 0px 10px;
}
/* Hover effect for increasing opacity */
.works-row .overlay a:hover .text-overlay, 
.overlay:hover .text-overlay {
  background-color: rgba(0, 0, 0, 0.6); /* Increase red background opacity to 80% on hover */
}
.success-p 
{
  color: #000;
  font-weight: 600!important;
  text-align: center;
  padding: 10px 10px;
  margin-top: 20px!important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: var(--secondary-color);
  margin-bottom: -10px!important;
}
.news-page-content .row a
{
  text-decoration: none;
}
.news-page-content .row a .box-div
{
  border: 1px solid transparent;
  padding: 10px;
  transition: all 0.3s ease;
  margin-bottom: 30px!important;
}
.news-page-content .row a:hover .box-div
{
  border: 1px solid #ddd!important;
  box-shadow: 1px 1px 10px #ddd;
}
.news-page-content .box-div h4
{
  color: #393939!important;
  display: none;
}
.news-page-content .box-div h3
{
  color: var(--primary-color);
  /* font-size: 19px; */
  text-align: center;
  margin-top: 10px;
  text-transform: uppercase;
}
.news-page-content h2
{
  text-align: center;
  margin-bottom: 50px;
}
.news-page-content p a
{
  color: var(--primary-color);
  text-decoration: underline!important;
}
.news-page-content p a:hover
{
  color: var(--secondary-color);
}
.studio-page-content .container-content .modal .modal-body p
{
  margin-bottom: 15px;
}
.studio-page-content .container-content .read_more
{
  color: var(--primary-color);
  text-decoration: underline;
  cursor: pointer;
}
/* Style the button */
#moveToTopBtn {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99; /* Stay on top */
  font-size: 18px;
  border: none;
  outline: none;
  background-color: var(--secondary-color); /* Background color */
  color: white; /* Text color */
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 5px; /* Rounded edges */
  transition: all 0.3s ease;
}

#moveToTopBtn:hover {
  background-color: var(--primary-color); /* Hover color */
}
.navbar-toggler span
{
  color: #000;
  border: none;
  font-size: 24px;
}
.home-page .navbar-toggler span
{
  color: #fff;
}
.navbar-toggler 
{
  border: none!important;
}
.contact-slide1
{
  background-image: url("../media/img/contact-slide1.jpg");
  min-height: 90vh;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
.contact-slide1 .sub-menu .row
{
  border-top: 1px solid #bcbcbc;
  border-bottom: 1px solid #bcbcbc;
  padding: 15px 0px 0px 0px;
  /* margin-top: 10px; */
  position: relative;
  z-index: 999;
  transition: all 0.3s ease;
}
.contact-slide1 .sub-menu a
{
  text-align: center;
  color: #e9ecef;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 16px;
}
.contact-slide1 .sub-menu.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #315FB5;
  z-index: 999;
}
.contact-slide2 .text-part
{
  margin: 100px 50px 50px 50px;
  text-align: center;
}
.contact-slide2-side-bg
{
  background-image: url("../media/img/contact-slide2-side-bg.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.contact-slide3-side-bg
{
  background-image: url("../media/img/contact-slide3-side-bg.jpg");
  height: 100vh;
}
.contact-slide4-side-bg
{
  background-image: url("../media/img/contact-slide4-side-bg.jpg");
}
.contact-slide4-left-bg
{
  background-image: url("../media/img/contact-slide4-bg.jpg");
}
.contact-slide2 .text-part p
{
  font-size: 16px;
}
.contact-slide2 .text-part .contact-det
{
  margin: 40px 0px;
}
.contact-slide2 .text-part .contact-det h3
{
  text-transform: uppercase;
  font-size: 22px;
}
.contact-slide2 .text-part .contact-det p a
{
  font-size: 17px;
}
.contact-slide3 h4
{
  font-size: 18px;
  margin-bottom: 30px;
}
.contact-slide3 p
{
  font-style: 18px;
}
.contact-slide4 .text-part
{
  text-align: left;
}
.contact-slide4 .text-part p
{
  font-size: 18px;
}
.contact-slide3, .awards-list .row
{
  display: flex;              /* Enables Flexbox */
  align-items: center;
}
.contact-slide5 .text-part
{
  text-align: left;
}
.contact-slide5 .text-part ul
{
  /* padding-left: 20px; */
}
.contact-slide5 .text-part p
{
  margin-bottom: 50px;
}
.contact-slide5 .text-part ul li
{
  margin: 30px 0px;
}
.contact-slide5 .text-part ul li span
{
  font-weight: 800;
}
.contact-slide5 h4
{
  text-align: center;
  font-size: 22px;
  margin: 10px 0px 100px 0px;
}
.life-4row img
{
  width: 100%;
  margin-bottom: 30px;
}
.life-4row p
{
  text-align: center;
  font-size: 18px;
}
.life-4row h4
{
  text-align: center;
  font-size: 18px;
  margin-bottom: 50px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.projects-page .container-90
{
  margin: 75px auto;
}
.projects-page .container-90 .row img
{
  width: 100%;
  height: auto;
}
.projects-page .text-descp h2
{
  text-align: center;
  font-size: 22px;
  margin-bottom: 30px;
}
.projects-page .text-descp p
{
  text-align: center;
  width: 80%;
  margin: 0 auto 30px auto;
  font-size: 16px;
}
.projects-page .float-right-content
{
  float: right;
  margin: 20px 0px;
}
.projects-page .float-right-content h3, .toggle-content h3
{
  font-size: 18px;
}
.projects-page .float-right-content h4, .toggle-content h4
{
  font-size: 18px;
}
.projects-page p
{
  font-size: 18px;
}
.projects-page .float-right-content ul, .toggle-content ul
{
  font-size: 15px;
}
.projects-page .float-right-content ul li span, .toggle-content ul li span
{
  font-weight: 600;
  margin-right: 10px;
}
.projects-page .float-right-content ul li, .toggle-content ul li
{
  margin: 5px 0px;
}
.w75-float-left
{
  width: 65%!important;
}
.w75-float-right
{
  width: 65%!important;
  float: right;
}
.projects-page p.center
{
  text-align: center;
}
.projects-page p.right
{
  text-align: right;
}
[data-mt] {
  margin-top: var(--dynamic-mt, 0);
}

[data-mb] {
  margin-bottom: var(--dynamic-mb, 0);
}
.projects-page .toggle-content {
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

/* When expanded, the content's height and padding change */
.projects-page .toggle-content.open {
  max-height: 500px; /* Adjust based on the content's height */
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Styling the header */
.projects-page .toggle-header {
  cursor: pointer;
  text-align: center;
  /* display: flex; */
  align-items: center;
  gap: 8px;
  user-select: none; /* Prevent text selection on click */
}

/* Icon styling */
.projects-page .toggle-icon {
  font-weight: bold;
  font-size: 18px;
  transition: transform 0.3s ease;
  display: inline-block; /* Ensure it's treated as an inline element */
}

/* Default content (icon is +) */
.projects-page .toggle-icon:before {
  content: '+'; /* Add the + symbol */
}

/* When content is open, change icon to - and rotate */
.projects-page .toggle-header.open .toggle-icon:before {
  content: '-'; /* Change icon to - when open */
  transform: rotate(45deg); /* Rotate the icon */
}
.img-paste-project img
{
  width: 100%;
}
.studio-page-content .container-content .box-div h3
{
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  color: #212529;
}
.studio-page-content .container-content .box-div h3 a h3
{
  text-decoration: none;
}
.studio-page-content .box-div a
{
  text-decoration: none;
  color: #000;
}
.studio-page-content .box-div a:hover
{
  color: var(--primary-color);
}
.studio-page-content .counter-number
{
  text-align: center;
  margin-bottom: 75px;
}
.studio-page-content .counter-number h4
{
  font-size: 21px;
  font-weight: 500;
}
.studio-page-content .counter-number h3
{
  font-size: 44px;
  font-weight: bold;
  margin-top: 10px;
}
.awards-list .border-bottom
{
  border-bottom: 1px solid gray!important;
  padding: 25px 0px;
}
.awards-list .border-top
{
  border-top: 1px solid gray!important;
}
.awards-list .row h3
{
  font-size: 20px;
}
.awards-list .row a h3
{
  color: #000;
  text-decoration: underline;
}
.awards-list .row a h3:hover
{
  color: var(--primary-color);
}
.awards-list .row p
{
  font-size: 16px;
  margin: 0px;
}
.awards-list .row .col-sm-3
{
  text-align: right;
}
.awards-page-content h1
{
  text-align: right;
  font-weight: 900;
}

/* ========== Mobile CSS ========== */
@media only screen and (max-width: 600px)
{
  .scroll-container {
    overflow-y: auto; /* Enable vertical scroll */
    scroll-snap-type: none; /* Disable scroll snapping */
  }

  .scroll-container .section {
      height: auto; /* Let sections take up natural height */
      scroll-snap-align: none; /* Remove snapping */
  }
  .navbar .container-fluid
  {
    padding: 0px;
  }
  .navbar-nav
  {
    margin-top: 30px;
  }
  .carousel-caption p
  {
    font-size: 14px;
  }
  .contact-page .section3
  {
    margin-bottom: 130px;
  }
  .studio-page-content .container-70
  {
    width: 100%;
  }
  .studio-page-content .container-content
  {
    padding: 40px 20px;
  }
  .box-div
  {
    margin-bottom: 30px!important;
  }
  .work-page .page-content .top-content h3
  {
    min-height: auto;
  }
  .work-page .page-content .top-content div.col-12:nth-child(3) h3
  {
    display: none;
  }
  .work-page .page-content .top-content div.col-12:nth-child(2) ul
  {
    margin-bottom: 0px;
  }
  .works-row .overlay img
  {
    height: 400px;
  }
  .works-row .text-overlay h2
  {
    font-size: 22px;
    font-weight: 600;
  }
  .contact-page .social-icons a
  {
    margin: 0 10px;
  }
  .right-form, .life-4row h4
  {
    width: 100%;
  }
}