

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }



/* === Fluid type & rhythm reset (from ChatGPT)=== */
html {
  /* Fluid root sizing: never below 16px, gently grows, capped for sanity */
  font-size: clamp(16px, 1.2vw + 10px, 20px);
}

body{
  font-family: 'Scheherazade', serif;
  /* Let body size be fluid off the root */
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;                 /* <-- global, unitless */
  color: #e81b3f;
  font-weight: 400;
  background-color: #fcf5e0;
}

/* Headings: tighter line-height than body, fluid size */
h1{
  margin: 0 0 1.25em 0;
  padding: 0;
  font-weight: 700;
  color: #e81b3f;
  text-align: left;
  border-bottom:1px solid #e81b3f;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.2;
}

/* Paragraphs & lists inherit body size/line-height; bump slightly if desired */
p,
ul{
  margin: 1em 0;        /* (remove duplicate + !important) */
  padding: 0;
  font-size: 1rem;      /* 1rem off fluid root -> stays responsive */
  /* line-height inherits 1.6 from body */
  text-align: left;
}

/* Subtext: smaller, still fluid */
.subtext{
  font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  line-height: 1.5;
}

/* Article titles: between body and h1 */
.article-title{
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  margin: 0;
  line-height: 1.3;
}

/* Nav links: fluid but bounded; avoid vw */
.nav a{
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.3;
}

/* Icon-text currently at 1.2 line-height—too tight for this font */
.icon-text {
  margin: 10% !important; /* keep your layout quirk */
  line-height: 1.45;       /* more readable */
}






.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:.5s;
  -moz-animation-duration:.5s;
  animation-duration:.5s;
}

.fade-in.one {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.fade-in.two {
  -webkit-animation-delay: .8s;
  -moz-animation-delay:.8s;
  animation-delay: .8s;
}

.fade-in.three {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  animation-delay: 1.2s;
}



/* Custom CSS
 * --------------------------------------- */


a:link { color:#e81b3f; text-decoration: none; font-weight: 700;}
a:visited { color:#e81b3f; text-decoration: none; font-weight: 700;}
a:hover { color:#e81b3f; text-decoration: underline; font-weight: 700;}
a:active { color:#e81b3f; text-decoration: underline; font-weight: 700;}

.section{
	text-align:center;
}


.container1 {margin:10px 20% 10px 20%}
.container2 {margin:0 20% 0 20%}
.container3 {margin:0 20% 0 20%}
.container4 {margin:0 20% 0 20%}
.container5 {margin:0 20% 0 20%}

.logo {width: 15%; margin: 0; padding:0;}

.icon {width: 30%; margin: 0; padding:0;}

.nav {
    list-style:none;
    margin:3% 0 8% 0;
    padding:0;
    text-align:center;
	display:flex;
	justify-content: space-evenly;
}

.nav li{
    display:inline;
	margin:0;
    padding:0;
}

.home-slideshow img {
	width: 100%;
	padding-bottom:10px;
	padding-top:10px;
	margin-left: auto;
	margin-right: auto;
}

.home-slideshow video {
	width: 100%;
	padding-bottom:10px;
	padding-top:10px;
	margin-left: auto;
	margin-right: auto;
}

.landlords-intro {
	width: 100%;
	padding-bottom:10px;
}

.paragraph-right {
  float:right;
  width: 50%;
}



/* Grid styles -------------------------------------------------*/

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px 30px;
}

.article-img {
  width: 100%;
  object-fit: cover;
}
.article-img-icon {
  width: 50%;
  object-fit: cover;
}

article {
	margin: 1.5em 0 0 0;
}

/* Extra Small screens ———– */
@media only screen and (max-width : 500px) {
.container1 {margin:10px 10% 10px 10%}
.container2 {margin:0 10% 0 10%}
.container3 {margin:0 10% 0 10%}
.container4 {margin:0 10% 0 10%}
.container5 {margin:0 10% 0 10%}

.nav a{
	
}
h1{
	
}
p{
    
}
ul{

}
.article-title{
	
}
}

/* Small screens ———– */
@media only screen and (max-width : 800px) and (min-width : 501px){
.container1 {margin:10px 10% 10px 10%}
.container2 {margin:0 10% 0 10%}
.container3 {margin:0 10% 0 10%}
.container4 {margin:0 10% 0 10%}
.container5 {margin:0 10% 0 10%}

.nav a{
	
}
h1{
	
}
p{

}
ul{
	
}
.article-title{
	
}
}


/* Medium screens ———– */
@media only screen and (max-width : 1000px) and (min-width : 801px) {
.container1 {margin:10px 15% 10px 15%}
.container2 {margin:0 15% 0 15%}
.container3 {margin:0 15% 0 15%}
.container4 {margin:0 15% 0 15%}
.container5 {margin:0 15% 0 15%}

.nav a{
	
}
h1{
	
}
p{
	
}
ul{
	
}
.article-title{
	
}
}


/* Large screens ———– */
@media only screen and (min-width : 1200px) {
.container1 {margin:10px 25% 10px 25%}
.container2 {margin:0 25% 0 25%}
.container3 {margin:0 25% 0 25%}
.container4 {margin:0 25% 0 25%}
.container5 {margin:0 25% 0 25%}
.cards {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 30px;
}
}


/* iPhone 4 landscape ———– */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
.container1 {margin:10px 5% 10px 5%}
.container2 {margin:0 5% 0 5%}
.container3 {margin:0 5% 0 5%}
.container4 {margin:0 5% 0 5%}
.container5 {margin:0 5% 0 5%}

.nav {
    margin:1% 0 3% 0;
}

.home-slideshow img {
	width: 50%;
	padding-bottom:0;
}

.cards {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.nav a{
	
}
h1{
	margin:0 0 1em 0;
}
p{
	
}
.long-text{

	margin:0 !important;
}
ul{
	
	padding:0 0 0 3%;
}
.article-title{
	
}	
}


/* iPhone 4 portrait ———– */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
.container1 {margin:10px 5% 10px 5%}
.container2 {margin:0 5% 0 5%}
.container3 {margin:0 5% 0 5%}
.container4 {margin:0 5% 0 5%}
.container5 {margin:0 5% 0 5%}

.logo {width: 25%; }

.nav a{
	
}
h1{
	margin:0 0 .5em 0;
}
p{
	font-size:5vw;
}
.long-text{
	
	margin:0 !important;
}
ul{
	font-size:5vw;
	padding:0 0 0 6%;
}
.article-title{
	
}
}	

/* iPhone 5 landscape ———– */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
.container1 {margin:10px 5% 10px 5%}
.container2 {margin:0 5% 0 5%}
.container3 {margin:0 5% 0 5%}
.container4 {margin:0 5% 0 5%}
.container5 {margin:0 5% 0 5%}

.nav {
    margin:1% 0 3% 0;
}

.home-slideshow img {
	width: 50%;
	padding-bottom:0;
}

.cards {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.nav a{
	
}
h1{
	margin:0 0 1em 0;
}
p{
	
}
.long-text{
	
	margin:0 !important;
}
ul{
	
	padding:0 0 0 3%;
}
.article-title{
	
}
}


/* iPhone 5 portrait ———– */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
.container1 {margin:10px 5% 10px 5%}
.container2 {margin:0 5% 0 5%}
.container3 {margin:0 5% 0 5%}
.container4 {margin:0 5% 0 5%}
.container5 {margin:0 5% 0 5%}

.logo {width: 25%; }

.nav a{
	
}
h1{
	margin:0 0 .5em 0;
}
p{
	
}
.long-text{
	
	margin:0 !important;
}
ul{
	
	padding:0 0 0 6%;
}
.article-title{
	
}
}


/* iPhone 6, 7, 8 landscape ———– */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
.container1 {margin:10px 5% 10px 5%}
.container2 {margin:0 5% 0 5%}
.container3 {margin:0 5% 0 5%}
.container4 {margin:0 5% 0 5%}
.container5 {margin:0 5% 0 5%}

.nav {
    margin:1% 0 3% 0;
}

.home-slideshow img {
	width: 50%;
	padding-bottom:0;
}

.cards {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.nav a{
	
}
h1{
	margin:0 0 1em 0;
}
p{
	
}
.long-text{
	
	margin:0 !important;
}
ul{
	
	padding:0 0 0 3%;
}
.article-title{
	
}
}


/* iPhone 6, 7, 8 portrait ———– */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
.container1 {margin:10px 5% 10px 5%}
.container2 {margin:0 5% 0 5%}
.container3 {margin:0 5% 0 5%}
.container4 {margin:0 5% 0 5%}
.container5 {margin:0 5% 0 5%}

.logo {
	width: 25%;
}

.nav a {
	
}
h1 {
	margin:0 0 .5em 0;
}
p {
	
}
.long-text{
	
	margin:0 !important;
}
ul {
	
	padding:0 0 0 6%;
}
.article-title {
	
}
}


/* iPhone 6+, 7+, 8+ landscape ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
.container1 {margin:10px 5% 10px 5%}
.container2 {margin:0 5% 0 5%}
.container3 {margin:0 5% 0 5%}
.container4 {margin:0 5% 0 5%}
.container5 {margin:0 5% 0 5%}

.nav {
    margin:1% 0 3% 0;
}

.home-slideshow img {
	width: 50%;
	padding-bottom:0;
}

.cards {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.nav a{
	
}
h1{
	margin:0 0 1em 0;
}
p{
	
}
.long-text{
	
	margin:0 !important;
}
ul{
	
	padding:0 0 0 3%;
}
.article-title{
	
}
}


/* iPhone 6+, 7+, 8+ portrait ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
.container1 {margin:10px 5% 10px 5%}
.container2 {margin:0 5% 0 5%}
.container3 {margin:0 5% 0 5%}
.container4 {margin:0 5% 0 5%}
.container5 {margin:0 5% 0 5%}

.logo {
	width: 25%;
}

.nav a {
	
}
h1 {
	margin:0 0 .5em 0;
}
p {
	
}
.long-text{
	
	margin:0 !important;
}
ul {
	
	padding:0 0 0 6%;
}
.article-title {
	
}
}
/* iPhone X landscape ———– */
@media only screen and (min-device-width : 375px) and (max-device-height : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape) {
.container1 {margin:10px 5% 10px 5%}
.container2 {margin:0 5% 0 5%}
.container3 {margin:0 5% 0 5%}
.container4 {margin:0 5% 0 5%}
.container5 {margin:0 5% 0 5%}

.logo {width: 12%; }

.nav {
    margin:1% 0 3% 0;
}

.home-slideshow img {
	width: 30%;
	padding-bottom:0;
}

.cards {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.nav a{
	
}
h1{
	margin:0 0 1em 0;
}
p{
	
}
.long-text{
	
	margin:0 !important;
}
ul{
	
	padding:0 0 0 3%;
}
.article-title{
	
}	
}


/* iPhone X portrait ———– */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3) {
.container1 {margin:10px 5% 10px 5%}
.container2 {margin:0 5% 0 5%}
.container3 {margin:0 5% 0 5%}
.container4 {margin:0 5% 0 5%}
.container5 {margin:0 5% 0 5%}

.logo {width: 25%; }

.nav a{
	
}
h1{
	margin:0 0 .5em 0;
}
p{
	
	margin:1.5em 0 !important;
}
.long-text{
	
	margin:1.5em 0 !important;
}
ul{
	
	padding:0 0 0 5%;
}
.article-title{
	
}
}


/* All sections display at the same time on first load issue ———– */

body, html,
#fullpage,
.section,
.slide,
.fp-tableCell{
    height: 100%
}


/* === fullPage.js overflow fix for iOS and mobile === */
.fp-overflow,
.fp-scroller {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

