.bgpix {position:absolute; left:0; top:0; bgcolor:#ffffff;
	background-image:url(garden/banner-garden.png);
	background-repeat:no-repeat;background-size:95%;background-position:center 100px; }

div.MainCtn {position:relative; top:0px; left:0px; width:100%; height:auto; display:flex;flex-wrap:wrap; }
div.SDCIntro {width:100%; padding-top:20px; padding-left: 22%; padding-right: 0%; padding-bottom;
              font-size:26px;color:#f0f0f0;font-weight:bold;font-style:italic;font-family: "Arial", "Helvetica", "sans-serif";
			  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Stronger shadow for better readability */ }
div.intro {width:100%; padding-top:20px; padding-left: 22%; padding-right: 0%; padding-bottom: 270px; 
 		   text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9); /* Stronger shadow for better readability */ 
           font-size:20px;color:#e0e0e0;font-weight:normal;font-style:italic;font-family: "Arial", "Helvetica", "sans-serif";
				}

div.addr {width:70%; padding-top:2px; padding-left:50px; padding-bottom:1%;  height:auto;
          font-size:20px;color:#0000f0;font-weight:bold;font-style:italic;font-family: "Arial", "Helvetica", "sans-serif"; }
div.Social {width: 28%; height:auto; padding-top:2px; padding-bottom:70px; }
img.fb {width: 48px; height: 24px; border:0; }
img.twer {width: 48px; height: 24px; border:0; }
img.ig {width: 48px; height: 24px; border:0; }

div.Color {width:100%; height:auto; padding-top:0; padding-bottom:20px;
           font-size:26px;color:#d82828;font-weight:bold;font-style:italic; font-family: "Arial", "Helvetica", "sans-serif";}

#smple {    /* Adjust this value based on the height of your fixed header/banner.
       Start with a value slightly larger than your tallest fixed element. */
       scroll-margin-top: 120px; /* Suggested value: Adjust as needed */
}
		   
a.inqa {font-size:16px;color:#ffffff; background-color:#f00000 ; 
        padding-left:5px;padding-top:5px; padding-right:5px; padding-bottom:5px;
        font-weight:normal; text-decoration:underline; font-family: "Arial", "Helvetica", "sans-serif"; }
a.inqa:active {color:#ffffff;}
a.inqa:visited {color:#ffffff;}
a.inqa:hover {color:#000000; text-decoration:none;  font-weight:bold; }

a.inqb {font-size:16px;color:#ffffff; background-color:#0000f0 ; 
        padding-left:5px;padding-top:5px; padding-right:5px; padding-bottom:5px;
        font-weight:normal; text-decoration:underline; font-family: "Arial", "Helvetica", "sans-serif"; }
a.inqb:active {color:#ffffff;}
a.inqb:visited {color:#ffffff;}
a.inqb:hover {color:#000000; text-decoration:none;  font-weight:bold; }

div.CntX {width:66%; height:auto; }

#granite-vn { scroll-margin-top: 100px; /* Suggested value: Adjust as needed */
}


div.Cnt0 {width:33%; height:auto;  padding-top:0; padding-bottom: 30px; }
img.SDC {width:100%; height:auto; }
img.demo {width:100%; height:auto; }



@media only screen and (max-width: 580px) {

.bgpix {position:absolute; left:0; top:0; bgcolor:#ffffff;
	background-image:url(garden/banner-garden-mp.png);
	background-repeat:no-repeat; background-size:100%; background-position:center 50px; 
	}

div.MainCtn {position:relative; top:0px; left:0px; width:100%; height:auto; display:flex;flex-wrap:wrap; }
	
div.SDCIntro {width:100%; top:0; left:0; padding-top:0; padding-left: 8%; padding-right: 0; 
             text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Slightly softer shadow for mobile */
             font-size:12px; color:#f0f0f0;font-weight:bold;font-style:italic;font-family: "Arial", "Helvetica", "sans-serif"; }
div.intro {width:100%; padding-top:0; padding-left: 8%; padding-right: 0; padding-bottom: 85px; 
           text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Slightly softer shadow for mobile */
           font-size:10px; color:white; font-weight:bold; font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; }
div.addr {width:70%; padding-left:6%; padding-right:0; padding-top: 2px; padding-bottom:26px ;
          font-size:12px;color:#0000f0;font-weight:bold;font-style:italic;font-family: "Arial", "Helvetica", "sans-serif"; }
div.Social {width:30%; padding-top:2px; padding-bottom:30px;}
img.twer {width: 36px; height: 18px; border:0; }
img.ig {width: 36px; height: 18px; border:0; }
img.fb {width: 36px; height: 18px; border:0; }

div.Color {width:100%; height: auto; padding-top:0; padding-bottom:0;
        font-size:8px;color:#d82828;font-weight:bold;font-style:italic;font-family: "Arial", "Helvetica", "sans-serif";}

#smple {    /* Adjust this value based on the height of your fixed header/banner.
       Start with a value slightly larger than your tallest fixed element. */
       scroll-margin-top: 70px; /* Suggested value: Adjust as needed */
}
a.inqa {font-size:9px;color:#ffffff; background-color:#f00000 ;
        padding-left:2px;padding-top:1px; padding-right:2px; padding-bottom:1px;
        font-weight:normal; text-decoration:underline; font-family: "Arial", "Helvetica", "sans-serif";}
a.inqa:active {color:#ffffff}
a.inqa:visited {color:#ffffff}
a.inqa:hover,focus {color:#000000 }

a.inqb {font-size:9px;color:#ffffff; background-color:#00000f0 ;
        padding-left:2px; padding-top:1px; padding-right:2px; padding-bottom:1px;
        font-weight:normal; text-decoration:underline; font-family: "Arial", "Helvetica", "sans-serif";}
a.inqb:active {color:#ffffff}
a.inqb:visited {color:#ffffff}
a.inqb:hover,focus {color:#000000 }

div.CntX {width:100%; height:auto; }
#granite-vn { scroll-margin-top: 70px; /* Suggested value: Adjust as needed */
}

div.Cnt0 {width:50%; height:auto; padding-top:0; padding-bottom: 0; }
img.SDC {width:100%; height:auto; }
img.demo {width:100%; height:auto; }

img.gs {width:100%; height:auto; border:0;}


div.InqH {width:100%; height:auto; padding-top:3%; padding-bottom:0.5%; color:#0000C0; font-size:13px;font-weight:bold; 
          font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; }
div.InqCo {width:100%; height:auto; padding-top:3%; padding-bottom:0.5%; color:#0000C0;font-weight:bold;font-style:italic; 
           font-size:11px; font-family: "Arial", "Helvetica", "sans-serif"; }
div.InqL {width:50%; padding-left:8%; height:auto ; 
      	  font-size:10px;color:#606060;font-weight:bold;font-style:italic;font-family: "Arial", "Helvetica", "sans-serif";}
div.InqR {width:50%; padding-left:0; height:auto ; 
          font-size:10px;color:#606060;font-weight:bold;font-style:italic;font-family: "Arial", "Helvetica", "sans-serif";}

}