@charset "utf-8";
/* CSS Document */
/*	General Styling
----------------------------------------------------------------------*/
@import url("bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&display=swap');

:root {
    --theme-color-primary: #000000;
    --theme-color-secondary: #ffffff;
    --theme-color-tertiary: #666666;
}

html, body {height: 100%;}
body {font-family: "Alexandria", sans-serif; font-weight: 300; color: #000000; margin: 0; background-color: #F3EFE7; padding: 0 !important;}
ul {list-style-type: none;}
.clear {clear: both; display: block; height: 0; overflow: hidden; visibility: hidden; width: 0;}
.extra-wrap {overflow: hidden;}
.block {display: block;}
.in-block {display: inline-block;}
.p-rel {position: relative;}
.wrapper {width: 100%; overflow: hidden;}
.super-container {margin: 0; padding: 0px; position: relative;}
.container {position: relative;}
img {vertical-align: middle; height: auto; max-width: 100%; border: 0;}
a {text-decoration: none; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

.font11 {font-size: 11px !important;}
.font12 {font-size: 12px !important;}
.font13 {font-size: 13px !important;}
.font14 {font-size: 14px !important;}
.font15 {font-size: 15px !important;}
.font18 {font-size: 18px !important;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}

.primary-color {color: var(--theme-color-primary);}

.theme-btn {
	background-color: #F3EFE7;
	color: var(--theme-color-primary);
	transition: 0.5s;
    font-size: 14px;
    border: 0;
	display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--theme-color-primary);
    text-transform: uppercase;
    border-radius: 6px;
}
.theme-btn:hover,
.theme-btn:focus {
	background-color: var(--theme-color-tertiary);
	color: var(--theme-color-secondary);
}
section .section-title {
    text-transform: uppercase;
    letter-spacing: 2px;
}
.theme-btn-trans {
	background-color: transparent;
	color: var(--theme-color-primary);
	transition: 0.5s;
    font-size: 14px;
    border: 0;
	display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--theme-color-primary);
    text-transform: uppercase;
    border-radius: 6px;
}
.theme-btn-trans:hover,
.theme-btn-trans:focus {
	background-color: var(--theme-color-primary);
	color: var(--theme-color-secondary);
}


/* header
----------------------------------------------------------------------*/
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #000000;
    z-index: 2;
}
#header .navbar-nav .nav-item .nav-link {
	font-weight: 300;
	color: var(--theme-color-secondary);
}
#header .navbar-nav .nav-item .nav-link:hover,
#header .navbar-nav .nav-item .nav-link.active {
	color: #666666;
}
#header .navbar {
	padding-top: 0;
	padding-bottom: 0;
}
#header .navbar .navbar-brand {
	padding-top: 1rem;
	padding-bottom: 1rem;
    margin-right: 0;
    display: inline-block;
}
#header .navbar .navbar-brand img {
	width: 275px;
}
.navbar-nav .nav-link.active {
	color: var(--theme-color-primary);
}
.offcanvas .offcanvas-header {
	border-bottom: 1px solid #666666;
}
.offcanvas-header .btn-close {
    width: auto;
    height: auto;
    font-size: 24px;
    color: #ffffff;
}
.offcanvas .offcanvas-header img {
	width: 200px;
}
.navbar-nav .nav-item {
	margin-left: 13px;
    padding-top: 20px;
	padding-bottom: 19px;
}
.navbar-toggler {
    border: 0;
}
.navbar-toggler svg {
    width: 26px;
    fill: #ffffff;
}
.navbar-toggler:hover,
.navbar-toggler:focus,
.navbar-toggler:active {
    background-color: transparent;
}


/* sliders-container
----------------------------------------------------------------------*/
#sliders-container .carousel-inner,
#sliders-container .carousel-item {
    height: 100%;
}
#sliders-container .carousel-inner .carousel-item {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 100%;
    overflow: hidden;
}
#sliders-container .carousel-inner .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.slide .active img {
    -webkit-animation: zoom 10s;
            animation: zoom 10s;
}
@-webkit-keyframes zoom {
    from {-webkit-transform: scale(1, 1);}
    to {-webkit-transform: scale(1.1, 1.1);}
  }
@keyframes zoom {
    from {transform: scale(1, 1);}
    to {transform: scale(1.1, 1.1);}
}

#sliders-container .carousel-caption {
    right: 2rem;
    left: 2rem;
    bottom: 6rem;
}


/* home-section
----------------------------------------------------------------------*/
.home-about-section {
    background-color: var(--theme-color-primary);
    color: var(--theme-color-secondary) ;
    padding: 100px 0;
    font-size: 18px;
}
.home-intro-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.home-intro-section.the-studio {
    background: url(../images/the-sanctuary-logo-icon.svg) no-repeat scroll -8% center transparent;
    background-size: 300px auto;
}
.home-intro-section .section-img {
    border-radius: 6px;
}
.home-image {
    text-align: center;
}
.home-intro-section .testimonials-wrapper {
    background-color: var(--theme-color-primary);
    padding: 1.5rem 1rem 3rem 1rem;
    border-radius: 10px;
    margin-bottom: 3rem;
}
.home-intro-section .testimonials-wrapper .section-title {
    color: var(--theme-color-secondary);
    padding-left: 3rem;
    margin-bottom: 30px;
}
.home-intro-section .testimonials-wrapper .quotes-icon {
    width: 90px;
}
.home-intro-section .testimonials-wrapper .carousel-inner {
    padding: 0 55px;
}
.home-intro-section .testimonials-wrapper .carousel-control-next,
.home-intro-section .testimonials-wrapper .carousel-control-prev {
    width: auto;
}
.home-intro-section .testimonials-wrapper .testimonial-content {
    color: var(--theme-color-secondary);
}
.home-intro-section .testimonials-wrapper .testimonials-img {
    position: relative;
    margin-bottom: 30px;
}
.home-intro-section .testimonials-wrapper .testimonials-img:after {
    content: "";
    position: absolute;
    left: 6px;
    right: 0;
    top: 6px;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-color: #333333;
    border-radius: 6px;
}


/* #footer
----------------------------------------------------------------------*/
#footer {
    background-color: var(--theme-color-secondary);
    color: var(--theme-color-primary);
    padding: 45px 12px;
}
#footer .footer-logo {
    width: 160px;
}
#footer .footer-links a {
    color: var(--theme-color-primary);
}
#footer .footer-links a:hover,
#footer .footer-links a:focus {
    color: var(--theme-color-tertiary)
}   
#footer .social-links a {
    color: var(--theme-color-primary);
    font-weight: 400;
    margin-right: 12px;
}
#footer .social-links a:hover,
#footer .social-links a:focus {
    color: var(--theme-color-tertiary)
}
#footer .copyright {
    font-size: 14px;
}

/* .studio-page
----------------------------------------------------------------------*/
.video-container {
    position: relative;
    background-color: var(--theme-color-primary);
}
.video-container .play-btn {
    display: flex;
    height: 100%;
    position: absolute;
    top: 0;
    align-items: center;
    width: 100%;
    justify-content: center;
    z-index: 1;
}
.video-container .play-btn .play-button {
    border: 0;
    background-color: transparent;
    font-size: 65px;
    color: var(--theme-color-secondary);
    opacity: 0.7;
}
.video-container .pause-btn {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    font-size: 35px;
    z-index: 1;
}
.video-container .pause-btn .pause-button {
    border: 0;
    background-color: transparent;
    color: var(--theme-color-secondary);
    opacity: 0.7;
}
.pause-button {
    display: none; /* Initially hidden */
}
.elVideo {
    width: 100%;
    display: block;
}
.studio-info-section .studio-description {
    padding: 4rem;
}
#studio-video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background-size: cover;
}
.studio-floor-plan {
    background-color: var(--theme-color-primary);
    color: var(--theme-color-secondary);
    padding: 3rem 0;
}
.studio-floor-plan .plan-info {
    padding: 4rem;
}
  
.studio-walkthrough {
    padding: 4rem 0;
}
.studio-walkthrough .section-title {
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 45px;
}
.studio-carousel .owl-dots {
    text-align: center;
    margin-top: 2rem;
}
.studio-carousel .owl-dots button {
    border: 1px solid #000000;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin: 0 5px;
}
.studio-carousel .owl-dots button.active {
    background-color: #000000;
}
.introduction {
    background-color: var(--theme-color-primary);
    color: var(--theme-color-secondary);
    padding: 3rem 0;
}
.our-engineers {
    background-color: var(--theme-color-secondary);
    color: var(--theme-color-primary);
    padding: 3rem 0;
}

.our-engineers .founders {
    text-align: center;
}
.our-engineers .founders img {
    max-width: 50%;
    margin: 0 auto;
}
.our-engineers .section-title {
    margin-bottom: 45px;
}
.our-engineers .card {
    border-radius: 0;
    border: 0;
    background-color: transparent;
}
.our-engineers .card .card-body {
    color: var(--theme-color-primary);
    padding-left: 0; 
    padding-right: 0;
}


/* equipment-list
----------------------------------------------------------------------*/
.equipment-list {
    padding: 3rem 0;
}
.equipment-list .col-spacing {
    --bs-gutter-x: 9rem;
}
.equipment-list .card {
    border:0;
    background-color: transparent;
    border-radius: 0;
}
.equipment-list .card .card-title {
    letter-spacing: 2px;
    margin-bottom: 1rem;
    font-style: 18px;
}
.equipment-list .card p {
    font-weight: 400;
    margin-bottom: 0.8rem;
}

/* services-list
----------------------------------------------------------------------*/
.services-list {
    padding: 3rem 2rem;
}


/* services-list
----------------------------------------------------------------------*/
.recent-projects {
    background-color: var(--theme-color-primary);
    color: var(--theme-color-secondary);
    padding: 3rem 0;
}
.recent-projects .section-title {
    margin-bottom: 45px;
}
.recent-projects .card {
    border-radius: 0;
    border: 0;
    background-color: transparent;
}
.recent-projects .card .card-body {
    color: var(--theme-color-secondary);
    padding-left: 0; 
    padding-right: 0;
}

/* testimonials-banner
----------------------------------------------------------------------*/
.testimonial-banner {
    padding: 3rem 0;
    background-color: var(--theme-color-primary);
    color: var(--theme-color-secondary);
}
.testimonial-banner .banner-title {
    margin-bottom: 2rem;
    font-weight: 400;
}
.testimonials-list {
    padding: 3rem 2rem;
}
.testimonials-list .col-spacing {
    --bs-gutter-x: 4rem;
}
.testimonials-list .card {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 8rem;
}
.testimonials-list .card .card-img-top {
    max-width: 200px;
    border-radius: 6px;
    position: relative;
    z-index: 1;
}
.testimonials-list .card .card-img {
    position: relative;
    margin-bottom: 1rem;
}
.testimonials-list .card .card-img > span {
    display: inline-block;
    position: relative;
}
.testimonials-list .card .card-img:after {
    content: "";
    position: absolute;
    left: 9px;
    right: 0;
    top: 9px;
    bottom: 0;
    height: 100%;
    width: 200px;
    background-color: #000000;
    border-radius: 6px;
}
.testimonials-list .card .card-img .testimonial-play-btn {
    border: 0;
    font-size: 30px;
    color: var(--theme-color-secondary);
    opacity: 0.7;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-15px, -15px);
    background-color: transparent;
    padding: 0;
    line-height: normal;
}
.testimonialModal .btn-close {
    color: #ffffff;
    position: absolute;
    top: -35px;
    right: 0px;
    background-color: #ffffff;
    opacity: 1;
    width: 25px;
    height: 25px;
    border-radius: 100%;
}


/* contact page
----------------------------------------------------------------------*/
.contact-banner {
    padding: 3rem 0;
    background-color: var(--theme-color-primary);
    color: var(--theme-color-secondary);
}
.contact-banner .banner-title {
    margin-bottom: 2rem;
    font-weight: 400;
}
.contact-info {
    padding: 3rem 0;
}
.google-map {
    padding-bottom: 50%;
    position: relative;
}
.google-map iframe {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
}
.contact-info .last-links {
    color: var(--theme-color-primary);
    font-weight: 400;
}
.contact-info .last-links:hover,
.contact-info .last-links:focus {
    color: var(--theme-color-tertiary);
}

.home-intro-section.fullwidth-section {
    background-color: var(--theme-color-primary);
    color: var(--theme-color-secondary);
    padding: 0;
}
.home-intro-section.fullwidth-section .section-description {
    padding: 4rem;
}





/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    #header .navbar .navbar-brand img {width: 180px;}
    #header .offcanvas {max-width: 290px; background-color: #000000;}
    .navbar-nav .nav-item {margin-left: 0; padding-top: 6px; padding-bottom: 6px;}

    #sliders-container .carousel-caption {bottom: 2rem; text-align: left;}

    .home-about-section {padding: 3rem 1rem;}

    .home-intro-section {padding: 0;}
    .home-intro-section .section-img {border-radius: 0px;}
    .home-intro-section.the-studio {padding-top: 0; background-position: -150% 75%;}
    .home-intro-section .section-content {padding: 3rem 1rem;}

    .home-intro-section .testimonials-wrapper {margin-top: 3rem;}
    .home-intro-section .testimonials-wrapper .section-title {padding-left: 0;}
    .home-intro-section .testimonials-wrapper .quotes-icon {width: 70px;}
    .home-intro-section .testimonials-wrapper .carousel-inner {padding: 0 45px;}

    .studio-info-section .studio-description {padding: 2rem;}
    .studio-floor-plan {padding: 1.5rem 0;}
    .studio-floor-plan .plan-info {padding: 2rem;}
      
    .studio-carousel .owl-dots button {width: 10px; height: 10px;}

    .our-engineers {padding-left: 1.5rem; padding-right: 1.5rem;}

    .equipment-list .col-spacing {--bs-gutter-x: 0;}
    .equipment-list {padding-left: 2rem; padding-right: 2rem;}

    .recent-projects {padding-left: 2rem; padding-right: 2rem;}

    .testimonial-banner {padding-left: 2rem; padding-right: 2rem;}
    .testimonial-banner .container {width: 100%;}
    .testimonials-list .card {padding: 0;}

    .contact-banner {padding-left: 2rem; padding-right: 2rem;}
    .contact-info {padding-left: 2rem; padding-right: 2rem;}

    #sliders-container .carousel,
	#sliders-container .inner-container {height: 450px !important;}
	#sliders-container .carousel .carousel-caption {display: none;}
    
    .home-intro-section.fullwidth-section .section-description {padding-left: 2rem; padding-right: 2rem;}

 }



/* `md` applies to small devices (landscape phones, less than 768px) */
@media (min-width: 576px) and (max-width: 767.98px) { 

    #header .offcanvas {max-width: 290px; background-color: #000000;}
    .navbar-nav .nav-item {margin-left: 0; padding-top: 6px; padding-bottom: 6px;}

    #sliders-container .carousel-caption {bottom: 2rem; text-align: left;}

    .home-intro-section {padding: 0;}
    .home-intro-section.the-studio {background-position: -20% center;}
    .home-intro-section .section-content {padding: 3rem 1rem;}
    .home-intro-section .section-img {border-radius: 0;}

    .home-intro-section .testimonials-wrapper {margin-top: 3rem;}
    .home-intro-section .testimonials-wrapper .section-title {padding-left: 0;}
    .home-intro-section .testimonials-wrapper .quotes-icon {width: 70px;}
    .home-intro-section .testimonials-wrapper .carousel-inner {padding: 0 45px;}

    .our-engineers {padding-left: 4rem; padding-right: 4rem;}

    .equipment-list .col-spacing {--bs-gutter-x: 4rem;}
    .equipment-list {padding-left: 2rem; padding-right: 2rem;}

    .recent-projects {padding-left: 2rem; padding-right: 2rem;}

    .testimonial-banner .container {width: 100%;}

    .home-intro-section.fullwidth-section .section-description {padding-left: 5rem; padding-right: 5rem;}

}


/* `lg` applies to medium devices (tablets, less than 992px) */
@media (min-width: 768px) and (max-width: 991.98px) {

    .container {max-width: 540px;}
    
    #header .container, 
    #footer .container {max-width: 720px;}
    #header .offcanvas {max-width: 290px; background-color: #000000;}
    .navbar-nav .nav-item {margin-left: 0; padding-top: 6px; padding-bottom: 6px;}

    #sliders-container .carousel-caption {bottom: 2rem; text-align: left;}

    .home-intro-section.the-studio {background-position: -30% center;}
    .home-intro-section .section-content {padding: 3rem 0;}

    .our-engineers {padding-left: 2rem; padding-right: 2rem;}

    .equipment-list .col-spacing {--bs-gutter-x: 1.5rem;}

    .recent-projects {padding-left: 2rem; padding-right: 2rem;}

    .testimonial-banner .container {width: 100%;}
    .testimonials-list .card {padding: 0;}

    .google-map {padding-bottom: 65%;}

    .home-intro-section.fullwidth-section .section-description {padding-left: 8rem; padding-right: 8rem;}

 }

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .home-intro-section.the-studio {background-position: -20% center;}

    .studio-info-section .studio-description {padding: 2rem;}

    .equipment-list .col-spacing {--bs-gutter-x: 4rem;}

    .testimonials-list .card {padding: 0;}

    .home-intro-section.fullwidth-section .section-description {padding-left: 3rem; padding-right: 3rem;}

 }


/* `xxl` applies to x-large devices (large desktops, less than 1400px) / 15" Notebook (1366x768) */
@media (min-width: 1200px) and (max-width: 1399.98px) { 


}


/* 19" Desktop (1400x900) */
@media (min-width: 1367px) and (max-width: 1440px) {}


/* 22" Desktop (1680x1050) / 20" Desktop (1600x900) */
@media (min-width: 1441px) and (max-width: 1680px) {}


/* 24" Desktop (1920x1200) / 23" Desktop (1920x1080) */
@media (min-width: 1681px) and (max-width: 1920px) {}