:root{
    --ld-white: #F8F9FA;
    --ld-white-2: #E9ECEF;
    --ld-lgray: #DEE2E6;
    --ld-lgray-2: #CED4DA;
    --ld-gray: #ADB5BD;
    --ld-dgray: #6C757D;
    --ld-dgray-2: #495057;
    --ld-dgray-3: #343A40;
    --ld-black: #212529;
}

/* Hide Elements Until Loading Finished */
[v-cloak] {
  display: none;
}

html{ 
  scrollbar-color: black var(--ld-white);
  scrollbar-width: thin;
}

main {
    font-family: "El Messiri", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

hr {
  color: black !important;
}

.el-messiri-normal {
  font-family: "El Messiri", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.el-messiri-bold {
  font-family: "El Messiri", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
}

.ld-btn{
  border: none;
  background-color: var(--ld-black);
  color: var(--ld-white);
  padding-top: 3px; /* For the Font to look centered */

  transition: background-color .3s;
  transition: color .3s;
}
.ld-btn:hover{
  background-color: var(--ld-lgray);
  color: var(--ld-black);
  border: none;
}
.ld-btn:active{
  border: 1px solid var(--ld-black);
}

.hr-under-title{
  width: 100px;
  margin: auto;
  margin-bottom: 30px;
}

.go-to-top-arrow {
  z-index: 10;
  position: fixed;
  font-size: 2rem;
  right: 3rem;
  bottom: 3rem;

  color: var(--ld-black);
  transition: transform 0.2s ease-out;
}

.go-to-top-arrow.transparent {
  display: none;
}

.mb-p-0{
  margin-bottom: 0 !important;
}
.mt-hr-0{
  margin-top: 0 !important;
}
.g-6-rem{
  gap: 6rem !important;
}

.link-text:hover{
  cursor: pointer;
  color: var(--ld-gray);
}

/* GLOBAL Animation Styles */

.transition-font-size {
  transition: font-size 0.8s;
}

.scale-on-hover-icon:hover {
  transition: font-size 0.8s;
  font-size: 2.8rem !important;
}

.scale-on-hover:hover{
    transform: scale(1.15);
}
@media (max-width: 1000px) {
  .scale-on-hover:hover {
    transform: scale(1) !important;
  }
}
.text-shadow-glow{
  text-shadow: var(--ld-black) 1px 0 10px;
}

/* Navbar */
.no-border, .no-border:hover, .no-border:focus, .no-border:active {
  border: none !important;
}

.header-ld{
    z-index: 1 !important;
    background: var(--ld-white) !important;
    transition: transform .2s;
    transition: background .3s;

    top: 0;
    right: 0;
    left: 0;
    position: fixed !important;
}
.header-ld.white{
  background: var(--ld-black) !important;
}
.header-ld.transparent{
  position: relative !important;
  background: rgb(255 255 255 / 50%) !important;
/*  background: transparent !important;*/
}

.header-ld a{
    color: var(--ld-black) !important;
}
.header-ld a:hover{
    color: var(--ld-dgray-2) !important;
}

.header-ld.white a{
    color: var(--ld-white) !important;
}
.header-ld.white a:hover{
    color: var(--ld-lgray-2) !important;
}

.nav-link{
    font-size: 1.2rem !important;
    margin-top: 0.7rem;
}
.navbar-brand{
    font-size: 2rem !important;
    transition: transform 0.4s ease-out;
}
.ld-dropdown-item:hover{
  background-color: var(--ld-lgray);
}
.ld-dropdown-item:active{
  background-color: var(--ld-lgray-2);
}

.dropdown:hover .dropdown-menu {
    display: block !important;
    margin-top: 0; /* remove the gap so it doesn't close */
}

/* Navbar SM */
.X-button {
  margin-right: 15px !important;
  color: var(--ld-black) !important;
}

@media (max-width: 992px) {
  .logo {
   padding: 0 !important;
   margin-left: 12px !important; /* accounting for the 3 lines on the bootstrap navbar  */
   width: 9rem;
  }
}

.line-under-brand::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  display: block;
  clear: both;
  background-color: var(--ld-gray);
}
.line-under-brand.black::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  display: block;
  clear: both;
  background-color: var(--ld-lgray-1);
}

.logo{
  width: 10rem;
  padding-bottom: 0.6rem;
  cursor: pointer;
  transition: transform 0.4s ease-out;
}

/* Footer */
.ld-footer-links:hover{
  color: var(--ld-black) !important;
}

/* Hero section */
.hero-section {
    width: 100%;
    position: absolute;
    top: 0;

    background-image: url('../images/hero.jpg');
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);

    background-size: cover;
    background-position: center;
    color: #ffffff;
    text-align: center;
    padding-top: 30rem;
    padding-bottom: 3rem;

    -webkit-mask: linear-gradient(to bottom, black calc(100% - 30px), transparent);
}
.hero-text-main{
  display: inline-block;

  animation: scale-up-down 5s ease-in-out infinite alternate;
  -webkit-animation: scale-up-down 5s ease-in-out infinite alternate;
}
@keyframes scale-up-down {
    0% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
    100% {
        transform: scale(1.3);
        -webkit-transform: scale(1.3);
    }
}

/* Section 1 */
.add-section-margin{
  margin-top: 80px;
}
.add-section-margin.after{
  margin-top: 188px;
}
.s1-before-scroll {
  margin-top: 495px;
}
.s1-before-scroll.after {
  margin-top: 654px;
}
@media (max-width: 992px) {
  .s1-before-scroll {
    margin-top: 568px;
  }

  .s1-before-scroll.after {
    margin-top: 658px;
  }

  .add-section-margin {
    margin-top: 16px;
  }
  .add-section-margin.after {
    margin-top: 124px;
  }
}

.sm-adjusted {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title-with-underline::after{
  content: '';
  position: relative;
  height: 1px;
  top: 0;
  margin: 0 5rem 0 5rem;
  display: block;
  clear: both;
  background-color: var(--ld-gray);
}

/* Gallery Section */
.gallery-img{
  transition: transform .2s;
}

/* Reach Us Section*/
.fs-15rem{
  font-size: 1.5rem;
}
.fs-30rem{
  font-size: 3rem;
}
.instagram{
  color: #ff99ce;
  transition: transform .2s;
}
.instagram:hover{
  cursor: pointer;
  color: #ff7089;
}
.facebook{
  color: #3f85ff;
  transition: transform .2s;
}
.facebook:hover{
  color: #0f66ff;
  cursor: pointer;
}


/* Decorations */
.absolute-decoration{
  position: absolute;
  z-index: -1 !important; 
}
.decoration-lg{
  background-image: url('../images/d-full-2.png');
  background-size: cover;
  background-repeat: no-repeat;
  mask: linear-gradient(black calc(100% - 15px), transparent);
}
.decoration-sm{
  background-image: url('../images/d-full-2.png');
  background-size: contain;
  mask: linear-gradient(black calc(100% - 15spx), transparent)
}