html, body {
  background-color:#ffffff; margin: 0;
  padding: 0 0 1.7vw 0;  /* ChatGPT suggest is 0 0 3.5vw 0; change it for testing */
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

div.MainCtn {position:relative; ; top:0; left:0px; width:100%; height:auto; display:flex;flex-wrap:wrap; }

div.ban-PCcnt {position: relative; z-index:16; top:0; margin-top:-110px; transform: translateY(-20px); left: 0; width: 100vw; display: block; }
div.ban-MPcnt {position:relative; display: none;}
img.ban-size  {position: relative; z-index:16; width:95vw; height:auto; background-color:white; border-radius:2vw; }
div.SDCIntro, div.intro, div.addr 
			{position:absolute; z-index:17; top:0; left:0; width:100%; height:auto; margin-bottom:0; padding:0; 
			font-style:italic; font-family: "Arial", "Helvetica", "sans-serif";  line-height: 1.3; }
div.SDCIntro {margin-top:9.0vw; margin-left:20vw; font-size:1.8vw;color:white;font-weight:bold; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);}
div.intro {margin-top:9.0vw; margin-left:50vw; font-size:1.5vw; color:white;font-weight:normal; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);}
div.addr {margin-top:30.0vw; margin-left:6.5vw; font-size:2.0vw; color:white;font-weight:bold; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);}


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";}

img.SDC, img.demo, img.gs	{width:95%; height:auto; border-radius:1.5vw}

#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; }

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

div.CntX, div.Cnt0 {height:auto; top:0; left:0;  padding-top:0; font-size:2.2vw; color:#d82828; font-weight:bold;cfont-style:italic; 
					font-weight:normal; text-decoration:none; font-family: "Arial", "Helvetica", "sans-serif"; }
div.CntX 			{width:66%;  }
div.Cnt0 			{width:33%; padding-bottom: 30px; }




/* ======== MOBILE LAYOUT  MOBILE LAYOUT  MOBILE LAYOUT ================ */
@media only screen and (max-width: 768px) {
html, body {background-color:#ffffff; margin: 0; padding: 0 0 0 0; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

div.MainCtn {position:relative; top:0px; left:0px; width:100%; height:auto; display:flex;flex-wrap:wrap; }

div.ban-PCcnt {position: relative; top: 0; left: 0; width: 100%; display: none; }

div.ban-MPcnt, img.ban-size {position: relative; z-index:1; }
div.ban-MPcnt {top:0; left:0; margin-top:-4.25vw; width:100%; height:auto; display: block; }
img.ban-size  {width:100%; height:auto; border-radius: 3.5vw; }
	
div.SDCIntro, div.intro, div.addr
				{position: absolute; z-index:10; top:0; left:0; width:100%; height:auto; margin-bottom:0; padding:0; 
				font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; line-height: 1.3; }
div.SDCIntro 	{margin-top:4.75vw; margin-left: 6.2%; font-size:4.5vw; color:white;font-weight:bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }
div.intro 		{margin-top:10.25vw; margin-left: 6.2%; font-size:3.4vw; color:#303030; font-weight:bold; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);}
div.addr 		{margin-top:60.0vw; margin-left:0; font-size:3.8vw; color:white;font-weight:bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }

div.Color 	{width:100%; height:auto; top:0; left:0; margin-top:2vw; padding:0; 
        	font-size:3.5vw; color:#303030; font-weight:bold; font-style:italic; font-family: "Arial", "Helvetica", "sans-serif";}

div.CntX, div.Cnt0 {height:auto; top:0; left:0; margin:0; padding:0; font-size:3.5vw; color:#303030;
					font-weight:bold;font-style:italic;font-family: "Arial", "Helvetica", "sans-serif"; }
div.CntX 			{width:100%; }
div.Cnt0 			{width:50%; }

img.SDC, img.demo, img.gs	{width:95%; height:auto; border-radius:2.5vw}

#smple {scroll-margin-top: 70px; }
#granite-vn { scroll-margin-top: 70px; }

a.inqa, a.inqa:visited
 		{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, a.inqa:hover,focus {color:#000000 }

a.inqb, a.inqb:visited 
		{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, hover,focus {color:#000000 }

		}