/* html {background-image: url("turkeyfoot.jpg"); background-repeat: repeat;} oy vey 11-20-25 */

.movelogoup {margin-top: -50px;}

body {width: 75%; margin: auto; text-align: center; padding-top: 30px;} /*  background: #544426;  */
div {margin: auto; border: 0px solid gold;}
div.centerpics {margin: auto; width: 75%;} /* 67% */

.nomow {font-family: 'kulim park','Barlow'; letter-spacing: 0px; color: #fafafa; background: #8ca355; 
padding: 6px; border-left: 10px solid #3d5fd9; border-right: 10px solid #3d5fd9; border-width: 10px; font-size: 120%; border-radius: 10px; width: 50%;} /* #71b984; old background a yeelow ish 11-4-25*/

.project_categories {color: #33433f; font-size: 2.5em; letter-spacing: -1px;}

.Philadelphia_Landscaping {color: #272827; font-size: 94%; letter-spacing: -1px;} /* text-decoration: underline;  font-style: italic;*/

.markee {color: #787967; background: #fafafa; padding: 6px;}

.sod_care {text-align: left; font-size: 140%;}

.lilnewlogo {max-width: 20%;} /* 5-24-25 changed to 20% sneak small attack ... */

.sservices {letter-spacing: -2px; font-size: 300%;}

.kopyrite {font-size: 90%;}

.Philadelphia_landscaping_companies {color: green;}
.akovitsky {background: orange; border: 2px solid red; width: 50%;}
.Landscaping_Companies_In_Philadelphia {border: 1px solid tan;} /* #36DBCA; border was 3px */
.philly_landscape_design {background-color:rgba(0,255,0,0.18);}

.rubyscharf {font-family: 'Rubik Distressed', cursive;
color: #879ceb;
font-size: 2em; margin-bottom: 12px;}

td,tr {padding: 4px; font-family: arial; color: green;}
img {border: none;}
@font-face {
    font-family: ptrump;
    src: url('president_trump.otf');
	font-weight: bold;	
}
@font-face {
    font-family: 'whitewood';
	src: url('whitewood.otf');
}
@font-face {
    font-family: 'motionpicture';
	src: url('motion.ttf');
}
@font-face {
    font-family: rockoFLF;
	src: url('RockoFLF.ttf');
}
@font-face {
    font-family: bitterR;
	src: url('Bitter-Regular.ttf');
}
@font-face {
    font-family: greatvibes;
	src: url('greatvibes.ttf');
}
@font-face {
    font-family: qualio;
	src: url('Qualio.ttf');
}

@font-face {
    font-family: Signika;
	src: url('Signika.ttf');
}

@font-face {
    font-family: France;
	src: url('France.ttf');
}



div.gallery {
  margin: 5px;
  border: 0px solid #ccc;
  float: left;
  width: 180px;
}

div.galleryhoriz {
  margin: 5px;
  border: 0px solid #ccc;
  float: left;
  width: 200px;
}

div.gallery:hover {
  border: 0px solid #777;

}

div.gallery img {
  width: 100%;
  height: auto;
 
}

div.desc {
  padding: 5px;
  text-align: center;
}

h1 {
    font-family: 'whitewood', 'RockoFLF';
font-family: 'Hind', sans-serif;
font-family: 'Barlow', sans-serif;
line-height: 105%;
	/* color: #cc9839; */
color: #6b9f6b;
	/* font-size: 180%; */
	font-size: 230%;
	letter-spacing: -1px;
	
}
h2 {
	font-family: 'whitewood', 'greatvibes', 'motionpicture', 'RockoFLF';
	color: #b9b871;
	font-size: 240%;
	letter-spacing: 1px;
} 
h3 {
	font-family: whitewood, 'RockoFLF';
	color: #20211d;
	font-size: 230%; /*  280%;  */
	letter-spacing: -1px;
}

h4 {
	font-family: 'RockoFLF';
	color: green;
	font-size: 190%; /*  280%;  */
	letter-spacing: 0px;
margin-top: -34px;
}


h4.Philly_landscaping_contractors {
	font-family: 'RockoFLF';
	color: #d2692e;
	font-size: 100%;
	letter-spacing: 0px;
margin-top: -2px;
}

h5 {
	font-family: france, qualio, 'ptrump', 'motionpicture', 'greatvibes', 'RockoFLF';
	color: #b9b871;
	font-size: 165%;
	letter-spacing: 0px;
	line-height: 110%;
}

.premium {letter-spacing: 0px; font-size: 1.85em; color: #7b7a37;}


h4.rubyscharf {font-family: 'Rubik Distressed', cursive;
color: #879ceb;
font-size: 3em; margin-bottom: 20px;}

.liltrowel {max-width: 40%;}

.sunshadenatives {max-width: 75%;}


p {font-family: France, 'Shadows Into Light Two', cursive, whitewood, bitterR, 'RockoFLF'; color: tan; font-size: 90%;}
p.ah {font-family: France, 'Shadows Into Light Two', cursive, whitewood, bitterR, 'RockoFLF'; color: tan; font-size: 120%;}

/* unvisited link was tan */
a:link {
color: tan;
font-family: 'Barlow', 'Kulim Park', sans-serif;
word-spacing: -2px;
font-size: 170%; /* was 190% changed 1-7-26 woot */
font-weight: 600; /* was 900 */
text-decoration: none; /* it was underline */
}


/* visited link was tan */
a:visited {
color: tan;
font-family: 'Barlow', 'Kulim Park', sans-serif;
word-spacing: -2px;
font-size: 170%; /* was 190% */
font-weight: 600; /* was 900 */
text-decoration: none; /* it was underline */
}

/* mouse over link */
a:hover {
color: silver;
font-family: 'Barlow', 'Kulim Park', sans-serif;
word-spacing: -2px;
font-size: 170%; /* was 190% */
font-weight: 600; /* was 900 */
text-decoration: none; /* it was underline */
}

/* selected link was gold */
a:active {
color: tan;
font-family: 'Barlow', 'Kulim Park', sans-serif;
word-spacing: -2px;
font-size: 170%; /* was 190% */
font-weight: 600; /* was 900 */
text-decoration: none; /* it was underline */
}

.numba {
color: #b9b871; font-size: 330%; font-family: Qualio, whitewood; letter-spacing: 3px; margin-top: -10px;
}

.mobile_number {letter-spacing: -2px; font-size: 400%; color: #6b9f6b;}
.eightohfour {margin-top: -37px;}


.anisha {max-width: 90%;}

.smull {max-width: 4%; margin-bottom: -7px;}


#myVideo {
  position: fixed;
z-index: -1;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

video {
  object-fit: cover;
}


.dot {
  height: 50px;
  width: 50px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

#lovepete {font-size: 90%; color: #dbdbdb}

.markee {color: #787967; background: #e7efd1; padding: 6px; font-size: 170%;}

marquee {width: 60%;}



/*
#myVideo {
  position: fixed;
z-index: -1;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
} */

/* img.lilnewlogo {max-width: 10%;} */



.dot {
  height: 50px;
  width: 50px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

/* .lilnewlogo {max-width: 25%;} */


#rootprairie {max-width: 98%;}

h6 {
	font-family: 'RockoFLF', 'Shadows Into Light Two';
	font-size: 3.5rem;
	letter-spacing: -4px;
	margin: 40px;
}


ani.div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

.jersey-25-charted-regular {
  font-family: "Jersey 25 Charted", sans-serif;
  font-weight: 400;
  font-style: normal;
}

th {
    text-decoration: underline;
    font-size: 140%;
    text-align: left;
    
}


.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}


.full-background {
            /* We use the 'fixed' property so the image covers the entire viewport, 
                even if the content is shorter than the screen height. 
            */
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            /* Ensure it covers the whole screen */
            min-height: 100vh;
            width: 100%;
        }

.kalenda {text-decoration: none; font-size: 270%;}



/* added 11-5-2025 */

a.gem:link {
  color: #70bd23; /* #6b9f6b;  */
font-family: Castoro, georgia, 'Kulim Park', sans-serif;
word-spacing: -2px;
font-size: 127%;
font-weight: 900;
text-decoration: none;
}

a.gem:hover {
    color: gold; /* #6b9f6b;  */
}

a.gem:visited {
    color: #70bd23; /* #6b9f6b;  */
}

a.gem:active {
    color: #70bd23; /* #6b9f6b;  */
}



.dot {
  height: 50px;
  width: 50px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.clock {
    
    background-color: none;
      width: 80px;
    height: 80px;
}


.cutive-mono-regular {
  font-family: "Cutive Mono", serif;
  font-weight: 400;
  font-style: normal;
}


.oswald-<uniquifier> {
  font-family: "Oswald", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.homenaje-regular {
  font-family: "Homenaje", serif;
  font-weight: 400;
  font-style: normal;
  background: #fbeda2;
  padding: 4px;
  line-height: 125%;
  border-radius: 8px;
  border: 3px solid #853e8f;
}


.seed {font-weight: 900; font-size: 1.5em; border-bottom: 2px solid green; letter-spacing: 0px; font-family: France;}


a.somafm:any-link {font-size: 94%; text-decoration: none;}


.bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
.bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
  background: url("images/easlandcover.jpg");
}

#lovepete {font-size: 90%; color: #dbdbdb}


.markee {color: #787967; background: #e7efd1; padding: 6px; font-size: 170%;}

marquee {width: 60%;}

.tawkmarq {color: darkorange; font-size: 10%;}

.tawkmarqu {font-family: 'Kulim Park'; font-size: 22px; color: gold;}

.tawk {width: 120px;}

/* CSS */

.button-32 {
  background-color: #28c670; /* #3ed081; */ 
  border-radius: 6px; /* 12px */
  color: #111;
  cursor: pointer;
  font-weight: bold;
  padding: 6px 8px;
  text-align: center;
  transition: 200ms;
  width: auto;
  box-sizing: border-box;
  /* border: 1px dashed green; */
  border: 1px solid #010101;
  font-size: 13px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  font-family:'Kulim Park', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  line-height: 90%;
  position: absolute;
  top: 8px;
  left: 8px;
}

.button-32:not(:disabled):hover,
.button-32:not(:disabled):focus {
  outline: 0;
  background: #8bca84;
  box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);
}

.button-32:disabled {
  filter: saturate(0.2) opacity(0.5);
  -webkit-filter: saturate(0.2) opacity(0.5);
  cursor: not-allowed;
}

.button-33 {
  background-color: gold;
  border-radius: 6px; /* 12px */
  color: #111;
  cursor: pointer;
  font-weight: bold;
  padding: 6px 8px;
  text-align: center;
  transition: 200ms;
  width: auto;
  box-sizing: border-box;
  /* border: 1px dashed green; */
  border: 1px solid #010101;
  font-size: 13px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  font-family:'Kulim Park', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  line-height: 90%;
  position: absolute;
  top: 36px;
  /* top: 60px; */
  left: 8px;
}

.button-33:not(:disabled):hover,
.button-34:not(:disabled):focus {
  outline: 0;
  background: #75baba;
  box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);
}

.button-34:disabled {
  filter: saturate(0.2) opacity(0.5);
  -webkit-filter: saturate(0.2) opacity(0.5);
  cursor: not-allowed;
}

.badai {
  width: 60%; /* Maintain aspect ratio */
  /*height: 100vh; /* Fill the viewport height */
  /* object-fit: contain; /* Prevent cropping or stretching */
  /* Optional: Center the video */
  /*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
}


@media (min-aspect-ratio: 16/9) {
    #myVideo {
        width:100%;
        height: auto;
    }
    
      #reVideo {
        width:100%;
        height: auto;
    }
    
}

@media (max-aspect-ratio: 16/9) {
    #myVideo {
       width:auto;
       height: 100%;  
  }
  
    #reVideo {
        width:100%;
        height: auto;
    }
  
}



/* +++++++++++++++++++++++++++++ hamburger stack menu +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.hamburger, .menu-toggle {
  display: none;
}

 .menu-items {
    list-style: none !important;

 }

 .sticky-menu {
    position: fixed;   /* This locks it to the viewport */
    top: 0;            /* Distance from the top */
    left: 0;           /* Distance from the left */
    margin: 5px;         /* Removes default browser spacing  was just 0 */
    padding: 14px;     /* Optional: adds space inside the menu */
    z-index: 1000;     /* Keeps it "on top" of other elements */
    list-style: none;  /* Removes the bullet points */
    background-color: rgba(218, 190, 9, 0.6);
    text-align: left;
}

/* Optional: Layout for the list items */
.sticky-menu li {
    /* display: inline-block; */ /* Makes the list go horizontal */
   /* margin-right: 15px; */
}

/* +++++++++++++++++++++++++++++ hamburger stack menu ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


body.home-page { 
  background: url('../images/fishwebp.webp') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border: 10px solid red;
}



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ LOGO SLIDER FOR TECHO-BLOC BELGARD COLMET ETC. +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


.logo-slider {
    overflow: hidden;
    /* background:  */ /* rgb(130 201 130); << old too light green Matches your site background */
    background-color: rgba(218, 190, 9, 0.6);
    /* padding: 20px 0; */
    width: 60%;
    margin: auto;
    position: relative;
    display: flex;
    border: 1px solid #c9be84;
  }

  /* The ribbon of logos */
  .logo-track {
    display: flex;
    width: max-content;
    animation: scroll 12s linear infinite;
  }

  /* PAUSE ON HOVER */
  .logo-slider:hover .logo-track {
    animation-play-state: paused;
  }

  .logo-track img {
    height: 16px; /* height: 60px; Adjust height for your layout */
    margin: 10px 40px; /* Consistent spacing */
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }

  /* Subtle lift effect when hovering over a logo */
  .logo-track img:hover {
    transform: scale(1.1);
  }

  /* THE KEYFRAME: Move exactly 50% to loop perfectly */
  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* Faded edges for a high-end look */
  .logo-slider::before, .logo-slider::after {
    content: "";
    position: absolute;
    top: 0; width: 150px; height: 100%; z-index: 2; pointer-events: none;
  }
  .logo-slider::before { left: 0; background: linear-gradient(to right, white, transparent); }
  .logo-slider::after { right: 0; background: linear-gradient(to left, white, transparent); }


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */




/* ======================================================================================== Firefox mobile seems to follow this on iphone 12 pro ========================================================= */


@media only screen and (min-device-width : 120px) and (max-device-width : 540px) {

td,tr {padding: 2px; font-family: arial; color: green; font-size: 92%;}

.project_categories {color: #33433f; font-size: 1.5em; letter-spacing: 0px;}


p {font-family: whitewood, bitterR, 'RockoFLF'; color: tan; font-family: 'Barlow', font-family: 'Shadows Into Light Two', cursive; sans-serif; font-size: 90%;}

p.ah {font-family: France, 'Shadows Into Light Two', cursive; font-family: whitewood, bitterR, 'RockoFLF'; color: tan; font-family: 'Barlow', sans-serif; font-size: 120%; line-height: 111%;}

.anisha {max-width: 90%;}
.idesign {max-width: 90%;}
.mobile_number {letter-spacing: -4px; font-size: 170%;}

.eightohfour {margin-top: -27px;}

.lilnewlogo {max-width: 70%;}

.liltrowel {max-width: 80%;}
	
.sunshadenatives {max-width: 95%;}

.videowidth {max-width: 95%;}

body {width: 90%; margin: auto; text-align: center; padding-top: 10px;}   /*  background: #544426;  */	
h2 {
	font-family: bitterR, 'motionpicture', 'RockoFLF', qualio;
	color: #b9b871;
	font-size: 125%;
	letter-spacing: 3px;
} 

h2 {
	font-family: motionPicture;
	color: #f1b64c;
	font-size: 180%;
}

.premium {letter-spacing: 0px; font-size: 2em; color: #7b7a37;}



h1 {
    font-family: 'whitewood', 'RockoFLF';
font-family: 'Barlow', sans-serif;
	color: #cc9839;
	font-size: 130%;
}
h3 {
	font-family: whitewood, 'RockoFLF';
	color: #20211d;
	font-size: 150%;
	letter-spacing: -1px;
/* margin-bottom: 5px; */
}

h4.Philly_landscaping_contractors {
	font-family: 'RockoFLF';
	color: #d2692e;
	font-size: 90%; /*  280%;  */
	letter-spacing: 0px;
margin-top: -2px;
}

h4 {
	font-family: France, 'RockoFLF';
	color: green;
	font-size: 150%; /*  280%;  */
	letter-spacing: 0px;
margin-top: -34px;
}

h5 {
	font-family: france, qualio, 'ptrump', 'motionpicture', 'greatvibes', 'RockoFLF';
	color: #b9b871;
	font-size: 110%;
	letter-spacing: 0px;
	line-height: 110%;
} 

/* unvisited link was 160% word space was -2px dec 17 2020 */
a:link {
  color: tan;
font-family: 'Kulim Park', sans-serif;
word-spacing: -2px;
font-size: 140%;
font-weight: 900;
letter-spacing: -1px;
/* text-decoration: none; */
}

/* visited link */
a:visited {
  color: tan;
font-family: 'Kulim Park', sans-serif;
word-spacing: -2px;
font-size: 140%;
font-weight: 900;
letter-spacing: -1px;
/* text-decoration: none; */
}

/* mouse over link */
a:hover {
  color: silver;
font-family: 'Kulim Park', sans-serif;
word-spacing: -2px;
font-size: 140%;
font-weight: 900;
letter-spacing: -1px;
/* text-decoration: none; */
}

/* selected link */
a:active {
  color: gold;
font-family: 'Kulim Park', sans-serif;
word-spacing: -2px;
font-size: 140%;
font-weight: 900;
letter-spacing: -1px;
/* text-decoration: none; */
}
div.centerpics {margin: auto; width: 100%;}

div.gallery {
  margin: auto;
  width: 100%;
}

.smull {max-width: 12%; margin-bottom: -7px; margin-top: 4px;}

}

/* font-size: 200%; */

.numba {
color: #b9b871; font-family: Qualio, whitewood; letter-spacing: 3px; margin-top: 2px;
}

.anope {
	font-family: whitewood, 'RockoFLF';
	color: red;
	font-size: 180%; /*  280%;  */
	letter-spacing: -1px;
}

.sod_care {text-align: left; font-size: 100%;}

.skweeze {letter-spacing: -2px;}

#rootprairie {max-width: 98%;}

h6 {
	font-family: 'RockoFLF', 'Shadows Into Light Two';
	font-size: 2.5rem;
	letter-spacing: -2px;
	margin: 30px;
}

th {
    text-decoration: underline;
    font-size: 114%;
    text-align: left;
    
}
.youel {width: 60%;}

.kalenda {text-decoration: none; font-size: 140%;}


}

/* ======================================================================================== XXXX mobile seems to follow this on iphone 12 pro ============================================ */


@media 
  (min-device-width: 768px) 
  and (max-device-width: 1024px) {

td,tr {padding: 4px; font-family: arial; color: green;}

th {
    text-decoration: underline;
    font-size: 114%;
    text-align: left;
    
}

.project_categories {color: #33433f; font-size: 1.5em; letter-spacing: 0px;}


h1 {
    font-family: 'whitewood', 'RockoFLF';
font-family: 'Barlow', sans-serif;
	color: #cc9839;
	font-size: 190%;
}

.eightohfour {margin-top: -27px;}
.idesign {max-width: 90%;}

p.ah {font-family: France, 'Shadows Into Light Two', cursive; font-family: whitewood, bitterR, 'RockoFLF'; color: tan; font-family: 'Barlow', sans-serif; font-size: 120%;}

h4.Philly_landscaping_contractors {
	font-family: 'RockoFLF';
	color: #d2692e;
	font-size: 120%;
	letter-spacing: 0px;
margin-top: -2px;
}

.premium {letter-spacing: 0px; font-size: 2em; color: #7b7a37;}


h5 {
	font-family: france, qualio, 'ptrump', 'motionpicture', 'greatvibes', 'RockoFLF';
	color: #b9b871;
	font-size: 110%;
	letter-spacing: 0px;
	line-height: 110%;
} 

.liltrowel {max-width: 90%;}
.sunshadenatives {max-width: 95%;}
.lilnewlogo {max-width: 70%;}	
.videowidth {max-width: 85%;}
/* orig 544426 this si too lime>> 43CD80   5-11-20 best #655333 old or orig background ..  background: #655333;  */
body {width: 75%; margin: auto; text-align: center; padding-top: 30px;} /*  background: #544426;  */

.smull {max-width: 12%; margin-bottom: -7px; margin-top: 4px;}

h2 {
	font-family: whitewood, motionPicture;
	color: #f1b64c;
	font-size: 180%;
}


h3.anope {
	font-family: whitewood, 'RockoFLF';
	color: red;
	font-size: 180%; /*  280%;  */
	letter-spacing: -1px;
}
.mobile_number {letter-spacing: -4px; font-size: 170%;}

.sod_care {text-align: left; font-size: 100%;}

#rootprairie {max-width: 98%;}

h6 {
	font-family: 'RockoFLF', 'Shadows Into Light Two';
	font-size: 2.5rem;
	letter-spacing: -4px;
	margin: 30px;
}

.youel {width: 60%;}

.kalenda {text-decoration: none; font-size: 130%;}



}


/* ======================================================================================== XXX mobile seems to follow this on iphone 12 pro ============================================ */


@media 
  (min-device-width: 300px) 
  and (max-device-width: 800px) {

td,tr {padding: 4px; font-family: arial; color: green;}

th {
    text-decoration: underline;
    font-size: 114%;
    text-align: left;
    
}

.project_categories {color: ##33433f; font-size: 1.5em; letter-spacing: 0px;}


.eightohfour {margin-top: -27px;}

.idesign {max-width: 90%;}
h1 {
    font-family: 'whitewood', 'RockoFLF';
font-family: 'Barlow', sans-serif;
	color: #cc9839;
	font-size: 190%;
}

p {font-family: France, 'Shadows Into Light Two', cursive; font-family: whitewood, bitterR, 'RockoFLF'; color: tan; font-family: 'Barlow', sans-serif; font-size: 120%; line-height: 109%;}
p.ah {font-family: 'Shadows Into Light Two', cursive; font-family: whitewood, bitterR, 'RockoFLF'; color: tan; font-family: 'Barlow', sans-serif; font-size: 120%;}

h4.Philly_landscaping_contractors {
	font-family: 'RockoFLF';
	color: #d2692e;
	font-size: 120%;
	letter-spacing: 0px;
margin-top: -2px;
}

.premium {letter-spacing: 0px; font-size: 2em; color: #7b7a37;}


h5 {
	font-family: france, qualio, 'ptrump', 'motionpicture', 'greatvibes', 'RockoFLF';
	color: #b9b871;
	font-size: 110%;
	letter-spacing: 0px;
	line-height: 110%;
} 

.liltrowel {max-width: 90%;}
.sunshadenatives {max-width: 95%;}
	.lilnewlogo {max-width: 70%;}
.videowidth {max-width: 85%;}
/* orig 544426 this si too lime>> 43CD80   5-11-20 best #655333 old or orig background ..  background: #655333;  */
body {width: 75%; margin: auto; text-align: center; padding-top: 30px;} /*  background: #544426;  */

.smull {max-width: 12%; margin-bottom: -7px; margin-top: 4px;}


h3.anope {
	font-family: whitewood, 'RockoFLF';
	color: red;
	font-size: 160%; /*  280%;  */
	letter-spacing: -1px;
}

#rootprairie {max-width: 98%;}

h6 {
	font-family: 'RockoFLF', 'Shadows Into Light Two';
	font-size: 2.5rem;
	letter-spacing: -4px;
	margin: 30px;
}

.youel {width: 60%;}

.kalenda {text-decoration: none; font-size: 140%;}



}


/* old colors #7d7c31 #988156;
body {background: #a27726; width: 50%; margin: auto; text-align: center; padding-top: 50px;} 
h1 {
    font-family: whiteWood;
	color: #cc9839;
	font-size: 300%;
} 

h2 {
	font-family: motionPicture;
	color: #f1b64c;
	font-size: 180%;
}
*/


/* ======================================================================================== XXX mobile seems to follow this on iphone 12 pro ============================================ */


/* and (-webkit-min-device-pixel-ratio: 3) */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) { 

.eightohfour {margin-top: -27px;}
.lilnewlogo {max-width: 70%;}

h1 {
    font-family: 'whitewood', 'RockoFLF';
font-family: 'Barlow', sans-serif;
	color: #cc9839;
	font-size: 120%;
margin-top: -10px;
}

th {
    text-decoration: underline;
    font-size: 114%;
    text-align: left;
    
}

.premium {letter-spacing: 0px; font-size: 2em; color: #7b7a37;}

.project_categories {color: #33433f; font-size: 1.5em; letter-spacing: 0px;}


p {font-family: France, 'Shadows Into Light Two', cursive; 
/* font-family: whitewood, bitterR, 'RockoFLF'; */
color: tan; 
/* font-family: 'Barlow', sans-serif; */
font-size: 90%; 
line-height: 109%;}

h5 {
	font-family: france, qualio, 'ptrump', 'motionpicture', 'greatvibes', 'RockoFLF';
	color: #b9b871;
	font-size: 110%;
	letter-spacing: 0px;
	line-height: 110%;
} 

p.ah {font-family: 'Shadows Into Light Two', cursive; font-family: whitewood, bitterR, 'RockoFLF'; color: tan; font-family: 'Barlow', sans-serif; font-size: 110%; line-height: 109%;}

.idesign {max-width: 90%;}
body {width: 90%; margin: auto; text-align: center; padding-top: 15px;} /*  background: #544426;  */

#muvdown {font-size: 130%;}

h4.Philly_landscaping_contractors {
	font-family: 'RockoFLF';
	color: #d2692e;
	font-size: 94%;
	letter-spacing: -1px;
margin-top: -5px;
}

h2 {
	font-family: whitewood, motionPicture;
	color: #f1b64c;
	font-size: 180%;
}


h3.anope {
	font-family: whitewood, 'RockoFLF';
	color: red;
	font-size: 160%; /*  280%;  */
	letter-spacing: -1px;
}
.videowidth {max-width: 85%;}

.xsmull {max-width: 10%; margin-bottom: -5px;} /* was -3px 12-1-22 */

.smull {max-width: 12%; margin-bottom: -7px; margin-top: 4px;}

.mobile_number {letter-spacing: -4px; font-size: 170%;}
.sod_care {text-align: left; font-size: 100%;}

#rootprairie {max-width: 98%;}

h6 {
	font-family: 'RockoFLF', 'Shadows Into Light Two';
	font-size: 2.5rem;
	letter-spacing: -4px;
	margin: 30px;
}

.youel {width: 60%;}

.kalenda {text-decoration: none; font-size: 140%;}

}



/* ================================================================================================================================================================== */
/* ===================================================== from consult.htm file all of the infile css monday 1-12-26 ================================================= */
/* ================================================================================================================================================================== */



/* added 11-5-2025 */

a.gem:link {
  color: #70bd23; /* #6b9f6b;  */
font-family: Castoro, georgia, 'Kulim Park', sans-serif;
word-spacing: -2px;
font-size: 127%;
font-weight: 900;
text-decoration: none;
}

a.gem:hover {
    color: gold; /* #6b9f6b;  */
}

a.gem:visited {
    color: #70bd23; /* #6b9f6b;  */
}

a.gem:active {
    color: #70bd23; /* #6b9f6b;  */
}



.dot {
  height: 50px;
  width: 50px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.clock {
    
    background-color: none;
      width: 80px;
    height: 80px;
}


.cutive-mono-regular {
  font-family: "Cutive Mono", serif;
  font-weight: 400;
  font-style: normal;
}


.oswald-<uniquifier> {
  font-family: "Oswald", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.homenaje-regular {
  font-family: "Homenaje", serif;
  font-weight: 400;
  font-style: normal;
  background: #fbeda2;
  padding: 4px;
  line-height: 125%;
  border-radius: 8px;
  border: 3px solid #853e8f;
}


.seed {font-weight: 900; font-size: 1.5em; border-bottom: 2px solid green; letter-spacing: 0px; font-family: France;}


table {border: 0px solid gold; width: 60%;}
td {text-align: left; font-family: France;}
th {text-align: left; font-weight: 800;}


@font-face {
  font-family: 'Tekoo';
  src: url('fonts/Teko-Medium.ttf');
}

.clip-text {
  
 background: url(http://i.giphy.com/fsULJFFGv8X3G.gif);
  /* background: url(http://easlandscaping.com/gifs/unboxing_krukowski_stone.gif); */
 /* background: url(http://easlandscaping.com/gifs/unkrukowski.gif); */
  
  background-size: cover;
  background-position: center;
 /* background-clip: border-box; */
 /* background-clip: padding-box;  */
 /* background-clip: content-box; */
  
  -webkit-background-clip: text;
  color: transparent; // set to transparent, otherwise won't see the background
  
  width: 300px;
  height: 75px;
  box-sizing: border-box;
  font-size: 58px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  flex-shrink: 0;
  letter-spacing: 0px;
  font-family: 'Tekoo', arial;
}



@media (min-aspect-ratio: 16/9) {
    #myVideo {
        width:100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    #myVideo {
       width:auto;
       height: 100%;  
  }
}


/* +++++++++++++++++++++++++++++ hamburger stack menu +++++++++++++++++++++++++++++ */

.hamburger, .menu-toggle {
  display: none;
}

 .menu-items {
    list-style: none !important;

 }

 .sticky-menu {
    position: fixed;   /* This locks it to the viewport */
    top: 0;            /* Distance from the top */
    left: 0;           /* Distance from the left */
    margin: 5px;         /* Removes default browser spacing  was just 0 */
    padding: 14px;     /* Optional: adds space inside the menu */
    z-index: 1000;     /* Keeps it "on top" of other elements */
    list-style: none;  /* Removes the bullet points */
    background-color: rgba(218, 190, 9, 0.6);
    text-align: left;
}

/* Optional: Layout for the list items */
.sticky-menu li {
    /* display: inline-block; */ /* Makes the list go horizontal */
   /* margin-right: 15px; */
}

/* +++++++++++++++++++++++++++++ hamburger stack menu +++++++++++++++++++++++++++++ */

a:any-link {
    color: #88612e;
    font-family: Barlow, 'Kulim Park', sans-serif;
    word-spacing: -2px;
    font-size: 140%; 
    /* font-weight: 500; */
    text-decoration: none;
}

/* +++++++++++++ any-link needed too to make the top left links good to go in any situation background etc +++++++ */



@media (max-width: 767px) {

    #myVideo {
        display: none;
    }
    html {
       /* background: url('images/gala1_phone_bg4.jpg') no-repeat center fixed; */
        /* background: url('images/Ellsworth_mobilea.jpg'); */
        background-size: cover;
background-color: #e5f6df;
    }

.lilnewlogo {max-width: 50%;
    margin-bottom: 8%;
}

.sservices {letter-spacing: -2px; font-size: 150%;}

.mobile_number {letter-spacing: -2px; font-size: 210%; color: #6b9f6b;}

.kopyrite {font-size: 90%;}

.project_categories {color: #33433f; font-size: 1.5em; letter-spacing: 0px;}


.fafafa {color: #90ee91;}

/* unvisited link was tan */
a:link {
  color: #6b9f6b;
font-family: 'Kulim Park', sans-serif;
word-spacing: -2px;
font-size: 127%;
font-weight: 900;
/* text-decoration: none; */
}

/* visited link was tan */
a:visited {
  color: #6b9f6b;
font-family: 'Kulim Park', sans-serif;
word-spacing: -2px;
font-size: 127%;
font-weight: 900;
/* text-decoration: none; */
}

/* mouse over link */
a:hover {
  color: #6b9f6b;
font-family: 'Kulim Park', sans-serif;
word-spacing: -2px;
font-size: 127%;
font-weight: 900;
/* text-decoration: none; */
}

/* selected link was gold */
a:active {
  color: #6b9f6b;
font-family: 'Kulim Park', sans-serif;
word-spacing: -2px;
font-size: 127%;
font-weight: 900;
/* text-decoration: none; */
}

.clock {
    
    background-color: none;
    width: 20%;
    height: 20%;
}

table {width: 88%;}

.seed {font-weight: 900; font-size: 1.2em; border-bottom: 2px solid green; letter-spacing: -1px; font-family: France;}

.premium {letter-spacing: 0px; font-size: 2em; color: #7b7a37;}


/* https://giphy.com/gifs/IntoAction-happy-earth-day-cool-KZeKpFsTB3uGntA3f5 */

.clip-text {
  
background: url(http://i.giphy.com/fsULJFFGv8X3G.gif);
  /* background: url(http://easlandscaping.com/gifs/unboxing_krukowski_stone.gif); */
 /* background: url(http://easlandscaping.com/gifs/unkrukowski.gif); */
  
  background-size: cover;
  background-position: center;
 /* background-clip: border-box; */
 /* background-clip: padding-box;  */
 /* background-clip: content-box; */
  
  -webkit-background-clip: text;
  color: transparent; // set to transparent, otherwise won't see the background
  
  width: 300px;
  height: 100px;
  box-sizing: border-box;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  flex-shrink: 0;
  letter-spacing: 0px;
  font-family: 'Tekoo', arial;
}

.linehite {line-height: 180%;}

.homenaje-regular {
  font-family: "Homenaje", serif;
  font-weight: 400;
  font-style: normal;
  background: #fbeda2;
  padding: 4px;
  line-height: 180%;
  border-radius: 8px;
  border: 0px solid #853e8f;
}



/* ++++++++++++++++++++++++++++++++++++++++ hamburger stack menu ++++++++++++++++++++++++++ */
.xlandscaping-nav {
    position: relative;
    width: 100%;
    height: 60px; /* Adjust based on your header height */
  }

.landscaping-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000; /* Ensures it stays above other content */
  padding: 10px;
}

  /* POSITION ICON IN TOP RIGHT */
  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 30px;
    cursor: pointer;
    position: fixed; /* Keeps icon in place when rolling down */
    top: 20px;
    right: 20px;
    z-index: 1000;
  }
  
  .bar {
    height: 4px;
    width: 100%;
    background-color: #2e7d32; /* Landscaping Green */
    border-radius: 2px;
    transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  }

  /* ROLL-DOWN MENU SETTINGS */
  .menu-items {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Full screen height */
    background: rgba(255, 255, 255, 0.98); /* Clean white background */
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* Centering the content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    /* The "Roll" Animation */
    clip-path: circle(0% at 100% 0%); /* Starts as a tiny point at top right */
    transition: clip-path 0.6s ease-in-out;
    z-index: 999;
  }

  /* Trigger the Roll-Down */
  .menu-toggle:checked ~ .menu-items {
    clip-path: circle(150% at 100% 0%); /* Expands to cover screen */
  }

  /* Center Link Styling */
  .menu-items li {
    margin: 15px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.4s ease;
  }

  .menu-toggle:checked ~ .menu-items li {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s; /* Delays links until menu starts rolling */
  }

  .menu-items li a {
    font-size: 1.8rem;
    font-weight: bold;
    color: #2e7d32;
    text-decoration: none;
   /* font-family: sans-serif; */
  }

  /* HAMBURGER TO 'X' ANIMATION */
  .menu-toggle:checked ~ .hamburger .bar:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
    background-color: #333; /* Darkens X for visibility */
  }
  .menu-toggle:checked ~ .hamburger .bar:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle:checked ~ .hamburger .bar:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
    background-color: #333;
  }

/* ++++++++++++++++++++++++++++++++++++++++ hamburger stack menu ++++++++++++++++++++++++++ */

}
