@font-face {
  font-family: 'Larsseit';
  src: url('larsseit.otf') format('otf')
}

@font-face {
  font-family: 'Prata';
  src: url('prata.ttf') format('ttf')
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* scroll */
html {
  /* 62.5% of 16px = 10px */
  font-size: 62.5%;
  scroll-behavior: smooth !important;
  /* padding-top: 0; */
}

h1,
h2
{
    font-family: 'Prata', serif;
    font-weight: 400;
}

h3,
p, 
a,
span {
  font-family: 'Larsseit', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: 400;
}

span{
  margin-bottom: 0;
  line-height: 1.1;
}


h1 {
  font-size: 4rem;
}

h2 {
  font-size: 2.7rem;
  margin-bottom: 2rem;
}

h3 {
  font-size: 1.8rem;
  letter-spacing: 2px;
  margin-bottom: 0;
  font-weight: 700;
}

ul{
  list-style: none !important;
}
nav li a {
  text-decoration: none;
}

/* Red Line */
.red-line{
  margin-top: -2rem;
  height: .2rem;
}

.red-line-40{
  margin-top: 1.5rem;
  height: .2rem;
  width: 70%;
  /* background: #F05D29; */
}

.red--line{
  background:#F05D29 !important
}

.blue--line{
  background:#042642 !important
}

.red-line-70{
  width: 55%;
  background-image: linear-gradient(to right, transparent 80%, #F05D29);
}

p{
  color:#2F2023;
  font-size: 1.8rem;
  line-height: 2.6rem;
  margin-bottom: 2rem;
  font-weight: 300;
}

a{
  font-size: 1.6rem;
  text-decoration: none;
  color: #2F2023;
}

.icon{
  width: 158px;
  height: 98px;
}

/* ****************************
   Disable for desktops: starts    
 **************************** */
#header {
  display: none;
}
.container-mobile{
  display: none;
}
/* ***************************
   Disable for desktops: ends    
 *************************** */

/* animations */
.fade-in{
  animation: fadeIn 1s;
 }

@keyframes fadeIn {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

 /* page scroll effect */
.container-desktop{
  position: fixed;
  width: 100%;
  height: 100vh;

  margin: 0 auto;

  /* scrolling 100% at once */
  overflow-y: scroll; 
  scroll-snap-type: y mandatory;


}

.page{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
  z-index: -100;
}


.sliders{
  width: 100%;
  height: 100vh; /* comment here - smooth scrooling works */
  
  /* page scroll effect */
  scroll-snap-align: start; 
  background: transparent;
  z-index: 1;
}

.content{
  /* background: gold; */
  width: 80%;
  max-width: 1920px;
  height: inherit;
  display: flex;
  margin: 0 auto;
  align-items: center;
  gap: 2rem;
}

.center{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem;
}

.width30{
width:30%
}

.width20{
width:20%
}

.width70{
width:70%;
max-width: 800px;
}

.width80{
width:90%;
max-width: 900px;

}

.flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

/* ***************************
   Container Left-Side: starts    
 *************************** */
.left{
  position: relative;
  z-index: 1;
  width: 70%;
  height: 80vh;
  padding: 1rem;
  /* background: gold; */
}

.height-30{
height: 30%;
}

.height-40{
height: 40%;
}

.height-70{
height: 70%;
}

.height-60{
height: 60%;
}

.header{
  position: absolute;
  /* background: #F8F5ED;   */
  background: #EC441B;
  padding: 4rem 4rem 2rem 4rem;
  z-index: 3 !important;
  color: #fff;
}

.header p{
color: #fff !important;
font-size: 1.8rem;
line-height: 1.3em;
}

.subheader{
  position: absolute;
  background: #F8F5ED;
  opacity: .8;
  margin: 17.5rem 0 1rem 3rem;
  padding: 8rem 4rem 4rem 4rem;
  z-index: 2 !important;

  /* alignment */
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.background--blue{
  /* background:#EAEDEC !important */
  background: #042642;
}

.background--blue--opacity{
  /* background:#EAEDEC !important; */
  opacity: .8;
}

.small-p{
  font-size: 1.6rem !important;
  line-height: 2.2rem !important;
  }
  
  .blue-color{
  color: #042642 !important;
  }
  
  .blue-color p{
    color: #042642 !important;
  }
  .bold-blue-color{
    /* color: #042642 !important; */
    color: #fff
  }


/* Contact Infos */

.subheader-bottom{
  padding-top: 2rem;
  display: flex;
  gap: 3rem
}

.contact-info-details{
  display: flex;
  align-items: center;
  gap: .5rem
}

.email-detail a{
  font-weight: 500 !important;
}
.phone-detail a{
  font-weight: 500 !important;
}

.contact-info-details p{
  font-size: 1.6rem !important; 
  padding:0;
  color: #EC441B;
  font-weight: 500;
  margin-bottom: 0;
}

.contact-info-details img{
  max-width: 40px;
  padding: .8rem;
  border: 1px solid #2F2023;
}

/* ***************************
   Container Left-Side: ends    
 *************************** */

 /* ***************************
   Container Right-Side: starts    
 *************************** */

 .right{
  width: 30%;
  /* height: 80vh; */
  padding: 1rem ;
  /* background: silver; */

  /* alignment */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;

}
.smaller-height{
  padding-bottom: 4rem;
}

.vertical-menu {
  width: 30rem;
  padding-top: 3rem; 
  
} 

.vertical-menu a {
  background-color: #2F2023;
  color: #fff; 
  display: block;
  padding: 1.6rem;
  text-decoration: none;
  margin-top: 1rem;
  font-weight: 400;
}
/* wagner */
.links a {
 font-size: 1.4rem;
 padding: 2rem 3rem;
 letter-spacing: 1px;
}
.vertical-menu a:hover {
  background: #EC441B;
  transition: .3s;
}

.active{
  background: #EC441B !important; 
  color: white;
  transition-delay: .5s;
}

.desactive{
  background-color: #2F2023; 
  color: white;
}

.copy::after{
  content: '© 2023 Property Capital. ABN 82 158 861 459';
  color: #fff;
  font-size: 1.3rem;
  line-height: 1rem;

}

.ml-2{
  margin-left: 3rem;
}
 /* ***************************
   Container Right-Side: ends    
 *************************** */


/* ***************************
   Layout Grid: starts    
 *************************** */

.grid--red{
  border-top: 2px solid #EC441B !important
} 

.grid--blue{
  border-top: 2px solid #355A79 !important;
} 

.grid--blue p{
  color: #042642 !important
}

.grid {
  display: grid;
  grid-template-columns: 30% 70% ;

}

.grid-box {
  padding: 2rem 2rem 0 4rem;
  margin-top: 22rem;
  /* font-size: 1.6rem; */
}

.left-col {
  grid-column: 1;
  background: #F8F5ED
  /* grid-row: 1 / span 2; */
}

.left-col p{
  font-weight: 500 !important;
}
.right-col {
  grid-column: 2 ;
  background: rgba(255, 255, 255, .8)
  /* grid-row: 1 / span 2;; */
}

.grid-box p{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* font-weight: 400;   */
  min-height: 38px;
  line-height: 1.8rem;
  font-size: 1.6rem;
}
/* ***************************
   Layout Grid: ends    
 *************************** */

.clear{
	clear: both;
}

/**************************/
/*         Laptops         */
/**************************/
@media only screen   
and (min-device-width : 769px)   
	and (max-device-width : 1540px) {	

  .content{
    width: 90%
  }

  .icon{
    width: 128px;
    height: 79px;
  }

  h2{
    font-size: 2.1rem;
    font-weight: 600;;
    margin-bottom: 1rem
  }

  .red-line-70{
    margin-top: -1rem;
    margin-bottom: 1rem;
    width: 60%;
  }

  .red-line-40{
    /* margin-top: -1rem; */
    margin-bottom: 2rem;
    width: 70%;
    background-image: linear-gradient(to right, transparent 75%, #F05D29);
  }

  h3{
    font-size: 1.3rem;
  }

  p{
    font-size: 1.2rem !important;
    line-height: 1.8rem !important;
  }

  .left{
    height: 93vh !important;
    /* background: gold; */
    padding: 0;
  }

  .right{
    padding: 0 !important;
    /* height: 93vh !important; */
    /* background: silver; */
  }
  .smaller-height{
    /* max-height: 93vh !important; */
    padding-bottom: 2rem !important;
  }
  .header{
    height: 30%!important;
    padding-top: 3rem}

  .header p{
    font-size: 1.3rem !important;
    line-height: 1.6rem !important;
  }

  .subheader{
    margin: 13.5rem 0 0 2rem;
    /* margin: -2rem 0  0 2rem; */
    width: 90%;
    padding: 4rem 2rem 0 2rem;
  }

  .subheader-bottom{
    padding-top: 0;
    padding-bottom: 2rem;
  }
  
  .contact-info-details p, a{
    font-size: 1.2rem !important; 
    line-height: 1.8rem;
    font-weight: 600;
    margin-bottom: 0 !important
  }
  
  .contact-info-details img{
    max-width: 2.8rem;
    max-height: 2.8rem;
  }
  
  .vertical-menu {
    padding-top: 0 !important;
    width: 25rem;
  }

  .vertical-menu a{
    padding: 1.2rem;
  }

  .copy::after{
    font-size: 1rem;
  }

  .grid-box p{
    font-size: 1.3rem;
    min-height: 0rem;
    line-height: 1.1em;
    /* background: gold; */
    height: 2.3rem;
  }

  .grid-box {
    margin-top: 16rem;
  }

}

/***************************/
/* Desktop up to 27 inch   */
/***************************/
@media only screen   
and (min-device-width : 2112px){

h2{
  font-size: 3rem;
}

h3{
  font-size: 2rem;
  line-height: 4rem;
}

p{
  font-size: 1.8rem !important;
}

.header{
  padding: 2rem 4rem 1rem 4rem !important;
}

.private{
 font-family: 'Poppins', sans-serif !important
}

.header p{
  font-size: 1.8rem !important;
}

.subheader{
  padding: 8rem 4rem 4rem 4rem;
}

.small-p{
  font-size: 1.6rem  !important;
  line-height: 2.4rem !important;
}

.red-line-70{
  width: 66% !important;
}
/* .subheader p{
  font-size: 2.9rem !important;
  line-height: 1.4;
} */

.grid-box p{
  font-size: 2rem;
  min-height: 5.3rem;
  line-height: 2.5rem;
}

.vertical-menu a {
  font-size: 1.8rem;
  padding: 2rem;
}

.copy{
  padding-top: 1rem;
}

.ml-2{
  margin-left: 2.6rem;
}

.copy::after{
  font-size: 1.8rem;
  font-weight: 400;
}

.height-70{
  height: 70%;
}



.links a {
  font-size: 1.4rem;
  padding: 2.5rem;
 }

}

/**************************/
/*        MOBILE          */
/**************************/
@media (max-width: 600px) {

  html {
    scroll-padding: 2rem;
  }
  .container-desktop{
    display: none;
  }
  
  .container-mobile{
    display: block;
  }

  .grid{
    margin-bottom: 4rem;
  }

  .container-mobile{
    width: 100%;
    padding: 2rem;
    background-image: url('/images/pc-background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  h2{
    font-size: 2.5rem;
  } 

  h3{
    font-size: 1.8rem;
  } 

  .header p ,p{
    font-size: 1.4rem !important;
    line-height: 2rem;
  }

  .header-mobile{
    padding: 4rem 2rem 2rem 2rem;
    background: #fff;
  }

  .subheader-mobile{
    background: rgba(255, 255, 255, 0.8);
    padding: 6rem 2rem 2rem 2rem;
    zoom: 0;
    margin: -20px -10px 20px 10px ;
  }

  .subheader-bottom{
    padding-top: 0;
    flex-direction: column;
    padding-bottom: 1rem ;
    gap: 2rem
  }

  .contact-info-details{
    margin-bottom: 0px;
  }

  .contact-info-details p, a{
    font-size: 1.4rem !important;
  }

  .contact-info-details img{
    max-width: 32px;
    max-height: 32px;
  }

  .red-line-70{
    width: 60%;
  }

  .red-line-40{
    background-image: linear-gradient(to right, transparent 75%, red);
  }

  .grid-box p{
    font-size: 1.4rem;
    min-height: 50px;
    line-height: 1.8rem;
    font-weight: 400; 
    padding-top: 0;
    }

  .p-100{
    height: 10rem;
    line-height: 2rem;
    /* background: gold; */
  }

  .copy::after{
    font-size: 1.4rem !important;
  }
/* ***************************
  Navigation Menu: starts  
*************************** */

  #logo {
    margin-top: 10px;
    width: 100%;
    max-width: 120px;
  }

  #menu {
    display: flex;
    list-style: none;
    gap: 0.5rem;
  }

  #menu a {
    display: block;
    padding: 0.5rem;
  }

  #btn-mobile {
    display: none;
  }

  #header {
    display: block;
    height: 80px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #menu {
    display: block;
    position: absolute;
    width: 100%;
    top: 80px;
    right: 0;
    background: #fff;
    transition: 0.6s;
    z-index: 1000;
    height: 0px;
    visibility: hidden;
    overflow-y: hidden;
  }

  #nav.active #menu {
    height: calc(100vh - 80px);
    visibility: visible;
    overflow-y: auto;
  }

  #menu a {
    padding: 2.5rem 0;
    margin: 0 2.5rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
  }

  #btn-mobile {
    display: flex;
    align-items: center;
    padding: 2rem;
    font-size: 2rem;
    border: none;
    background: none;
    cursor: pointer;
    gap: 0.5rem;
  }

  #hamburger {
    margin: 2rem .5rem;
    border-top: 2px solid;
    width: 2.5rem;
  }

  #hamburger::after,
  #hamburger::before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    margin-top: 5px;
    transition: 0.3s;
    position: relative;
  }

  #nav.active #hamburger {
    border-top-color: transparent;
  }

  #nav.active #hamburger::before {
    transform: rotate(135deg);
  }

  #nav.active #hamburger::after {
    transform: rotate(-135deg);
    top: -7px;
  }
}
  /* ***************************
  Navigation Menu: ends  
 *************************** */


/* ***************************
  Animation: Starts  
 *************************** */
[data-anime]{
  opacity: 0;
  transition: .3s;
}

[data-anime="left"]{
  transform: translate3d(-50px, 0, 0);
}

[data-anime="right"]{
  transform: translate3d(50px, 0, 0 );
}

[data-anime].animate{
  opacity: 1;
  transform: translate3d(0px,0px,0px);
}