@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
    margin: 0px;
    padding: 0;
    box-sizing: border-box;
    font-family: "Playfair Display", serif;
}

body { display: flex; }
.content { flex: 1; padding: 20px; }
.gallery { position: absolute; display: grid; gap: 20px; }
.card { background: white; border-radius: 8px; padding: 8px; text-align: left; }

/* XXXXXXXXXXXXXXXXXXXX Features XXXXXXXXXXXXXXXXXXXX */

.card p { margin-bottom: 3.5px; font-size: 1.7rem; color: black; position: relative; font-weight: 600;}
.card img { object-fit: fill; width: 57.6%; box-shadow:0 0 5px rgb(110, 110, 110);}
@media(max-width: 460px) /* OK Done */
    { 
	.de-Image-Main { position: absolute; left: 3.7%; top: 69px; width: 93%; box-shadow: 0 0 10px white; }
        .porContainer { margin-top: 90%; position: relative; left: 4.5%; width: 98%;}
        .proName { font-size: 1.6rem; color: rgb(251, 251, 253); text-shadow: 0 0 10px white;}
        .listDesc { left: 5.5%;}
        .featuresHead { margin-top: 100px; font-size: 1.5rem; font-weight: 130;}
        ul {color: white; position: absolute; }
        .featuresList { margin-top: 130px; left: 5.5%; } 
        ul li { list-style: circle; font-size: 1.2rem; line-height: 28px;}
        .breakLine1 { margin-top: 610px; font-size: 1.2rem;}

        .img-price-Box { margin-top: 640px; margin-bottom: 30px; position: absolute; left: 0%; width: 94%; height: 94px; border-radius: 8px; box-shadow:0 0 10px white; }
        .proPrice {position: absolute; left: 1.4%; font-size: 1.6rem; z-index: 2; color: black; font-weight:800;}
        #proPriceID1 { margin-top: 650px; font-size: 1.3rem; }
        #proPriceID2 { margin-top: 680px; color: rgb(53, 9, 110); text-shadow:0 0 10px rgb(0, 0, 0); }
        #proPriceID3 { margin-top: 685px; left: 55%; font-size: 1.1rem; }
        #proPriceID4 { margin-top: 710px; color: rgb(247, 6, 6); font-size: 1.2rem; text-shadow:0 0 10px rgb(0, 0, 0); }
        .gallery { margin-top: 1200px; left: 3%; grid-template-columns: repeat(1, 1fr); width: 94.2%; padding-bottom: 15px;} 
        .card {height: 261px;}
        .card P { font-size: 1.2rem;}
        .card img { width: 100%; height: 217px; }
    }
@media(min-width: 461px) and (max-width: 576px) /* OK Done */
    { 
	.de-Image-Main { position: absolute; left: 3.7%; top: 69px; width: 93%; box-shadow: 0 0 10px white; }
        .porContainer { margin-top: 87%; position: relative; left: 4.5%; width: 98%;}
        .proName { font-size: 1.8rem; color: rgb(251, 251, 253); text-shadow: 0 0 10px white;}
        .listDesc { left: 5.5%;}
        .featuresHead { margin-top: 85px; font-size: 1.7rem; font-weight: 130;}
        ul {color: white; position: absolute; }
        .featuresList { margin-top: 117px; left: 5.5%; } 
        ul li { list-style: circle; font-size: 1.5rem; line-height: 36px;}
        .breakLine1 { margin-top: 655px; font-size: 1.6rem;}

        .img-price-Box { margin-top: 710px; position: absolute; left: 0%; width: 94%; height: 95px; border-radius: 8px; box-shadow:0 0 10px white; }
        .proPrice {position: absolute; left: 1.4%; font-size: 1.6rem; z-index: 2; color: black; font-weight:800;}
        #proPriceID1 { margin-top: 720px; font-size: 1.6rem; }
        #proPriceID2 { margin-top: 750px; color: rgb(53, 9, 110); text-shadow:0 0 10px rgb(0, 0, 0); }
        #proPriceID3 { margin-top: 755px; left: 40%; font-size: 1.1rem; }
        #proPriceID4 { margin-top: 782px; color: rgb(247, 6, 6); font-size: 1.2rem; text-shadow:0 0 10px rgb(0, 0, 0); }
        
        .gallery { margin-top: 1370px; left: 3%; grid-template-columns: repeat(1, 1fr); width: 94.2%; padding-bottom: 15px;} 
        .card {height: 365px;}
        .card P { font-size: 1.4rem;}
        .card img { width: 100%; height: 317px; }
    }
@media(min-width: 577px) and (max-width: 767px) /* NO Side Menu OK Done */
    { 
	.de-Image-Main { position: absolute; left: 2.7%; top: 72px; width: 96%; box-shadow: 0 0 10px white;}
        .porContainer { margin-top: 85%; position: relative; left: 4.5%; width: 98%; }
        .proName { font-size: 1.9rem; color: rgb(251, 251, 253); text-shadow: 0 0 10px white;}
        .listDesc { left: 5.5%;}
        .featuresHead { margin-top: 105px; font-size: 2rem; font-weight: 700; }
        ul {color: white; position: absolute; }
        .featuresList { margin-top: 142px; left: 5.5%; } 
        ul li { list-style: circle; font-size: 1.7rem; line-height: 40px;}
        .breakLine1 { margin-top: 745px; font-size: 1.75rem;}

        .img-price-Box { margin-top: 800px; position: absolute; left: 0%; width: 94%; height: 110px; border-radius: 8px; box-shadow:0 0 10px white; }
        .proPrice {position: absolute; left: 1.4%; font-size: 1.6rem; z-index: 2; color: black; font-weight:800;}
        #proPriceID1 { margin-top: 810px; font-size: 1.7rem; }
        #proPriceID2 { margin-top: 842px; color: rgb(53, 9, 110); font-size: 2rem; text-shadow:0 0 10px rgb(0, 0, 0); }
        #proPriceID3 { margin-top: 850px; left: 47%; font-size: 1.4rem; }
        #proPriceID4 { margin-top: 880px; color: rgb(247, 6, 6); font-size: 1.3rem; text-shadow:0 0 10px rgb(0, 0, 0); }

        .gallery { margin-top: 1630px; left: 3.6%; grid-template-columns: repeat(1, 1fr); width: 94.2%; padding-bottom: 15px;} 
        .card {height: 465px;}
        .card P { font-size: 1.4rem;}
        .card img { width: 100%; height: 417px; } 
    }
@media(min-width: 768px) and (max-width: 991px) /* With Side Menu OK Done */
    { 
	    .de-Image-Main { position: absolute; left: 31.5%; top: 30px; width: 92.2%; box-shadow: 0 0 10px white;}
        .porContainer { margin-top: 74.5%; position: relative; left: 33%; width: 98%; }
        .proName { font-size: 2.2rem; color: rgb(251, 251, 253); text-shadow: 0 0 10px white;}
        .listDesc { left: 5.5%;}  /* <<<<<<<<<<<<<<<<<<<<< */
        .featuresHead { margin-top: 121px; font-size: 2.1rem; font-weight: 700; }
        ul {color: white; position: absolute; }
        .featuresList { margin-top: 160px; left: 4%; } 
        ul li { list-style: circle; font-size: 2rem; line-height: 45px; width: 98%;}
        .breakLine1 { margin-top: 885px; font-size: 2.5rem;}

        .img-price-Box { margin-top: 970px; position: absolute; left: 0%; width: 94%; height: 140px; border-radius: 8px; box-shadow:0 0 10px white; }
        .proPrice {position: absolute; left: 1.4%; font-size: 1.6rem; z-index: 2; color: black; font-weight:800;}
        #proPriceID1 { margin-top: 980px; font-size: 1.7rem; }
        #proPriceID2 { margin-top: 1022px; color: rgb(53, 9, 110); font-size: 2.2rem; text-shadow:0 0 10px rgb(0, 0, 0); }
        #proPriceID3 { margin-top: 1030px; left: 37%; font-size: 1.5rem; }
        #proPriceID4 { margin-top: 1070px; color: rgb(247, 6, 6); font-size: 1.5rem; text-shadow:0 0 10px rgb(0, 0, 0); }

        .gallery { margin-top: 1870px; left: 31.5%; grid-template-columns: repeat(1, 1fr); width: 92.2%; padding-bottom: 15px;} 
        .card {height: 495px;}
        .card P { font-size: 1.4rem;}
        .card img { width: 100%; height: 447px; } 
    }
@media(min-width: 992px) and (max-width: 1199px) /* OK Done */  /* <<<<<<<<<<<<<<<<<<<<< */
    { 
	    .de-Image-Main { position: absolute; left: 25%; top: 30px; width: 97%; box-shadow: 0 0 10px white;}
        .porContainer { margin-top: 76.5%; position: relative; left: 28%; width: 96%; }
        .proName { font-size: 2.2rem; color: rgb(251, 251, 253); text-shadow: 0 0 10px white;}
        .listDesc { left: 5.5%;}  /* <<<<<<<<<<<<<<<<<<<<< */
        .featuresHead { margin-top: 121px; font-size: 2.1rem; font-weight: 700; }
        ul {color: white; position: absolute; }
        .featuresList { margin-top: 160px; left: 4%; } 
        ul li { list-style: circle; font-size: 2rem; line-height: 45px;}
        .breakLine1 { margin-top: 835px; font-size: 2.5rem;}

        .img-price-Box { margin-top: 920px; position: absolute; left: 0%; width: 94%; height: 140px; border-radius: 8px; box-shadow:0 0 10px white; }
        .proPrice {position: absolute; left: 1.4%; font-size: 1.6rem; z-index: 2; color: black; font-weight:800;}
        #proPriceID1 { margin-top: 930px; font-size: 1.7rem; }
        #proPriceID2 { margin-top: 972px; color: rgb(53, 9, 110); font-size: 2.2rem; text-shadow:0 0 10px rgb(0, 0, 0); }
        #proPriceID3 { margin-top: 980px; left: 37%; font-size: 1.5rem; }
        #proPriceID4 { margin-top: 1020px; color: rgb(247, 6, 6); font-size: 1.5rem; text-shadow:0 0 10px rgb(0, 0, 0); }

        .gallery { margin-top: 1900px; left: 25%; grid-template-columns: repeat(1, 1fr); width: 97%; padding-bottom: 15px;} 
        .card {height: 620px;}
        .card P { font-size: 1.4rem;}
        .card img { width: 100%; height: 572px; } 
    }
@media(min-width: 1200px) and (max-width: 1399px) /* OK Done */
    { 
	.de-Image-Main { position: absolute; left: 39.7%; top: 30px; width: 58.8%; max-height: 600px; box-shadow: 0 0 10px white; }
        .porContainer { margin-top: 2%; position: relative; left: 15.5%; width: 70%;}
        .proName { font-size: 1.6rem; color: rgb(251, 251, 253); text-shadow: 0 0 10px white;}
        .listDesc { left: 2%;}
        .featuresHead { margin-top: 63px; font-size: 1.4rem; font-weight: 130;}
        ul {color: white; position: absolute; width: 70%}
        .featuresList {margin-top: 90px; left: 2%; } 
        ul li { list-style: circle; font-size: 1rem; line-height: 22px; width: 98%;}
        .breakLine1 { margin-top: 420px; font-size: 1.1rem;}

        .img-price-Box { margin-top: 452px; position: absolute; left: 0%; width: 32.2%; height: 83.8px; border-radius: 8px; box-shadow:0 0 10px white; }
        .proPrice {position: absolute; left: 1.5%; font-size: 1.6rem; z-index: 2; color: black; font-weight:800;}
        #proPriceID1 { margin-top: 460px; font-size: 1.5rem; }
        #proPriceID2 { margin-top: 485px; color: rgb(53, 9, 110); text-shadow:0 0 10px rgb(0, 0, 0); }
        #proPriceID3 { margin-top: 491px; left: 23%; font-size: 1.1rem; }
        #proPriceID4 { margin-top: 514px; color: rgb(247, 6, 6); font-size: 1.1rem; text-shadow:0 0 10px rgb(0, 0, 0); }

        .gallery { margin-top: 620px; left: 15.5%; grid-template-columns: repeat(2, 1fr); width: 83.1%; padding-bottom: 15px;} 
        .card {height: 388px;}
        .card p { font-size: 1.15rem;}
        .card img { width: 100%; height: 346px; }
    }
@media(min-width: 1400px)  /* OK Done */
    { 
	.de-Image-Main { position: absolute; left: 39.7%; top: 30px; width: 58.8%; max-height: 565px; box-shadow: 0 0 10px white; }
        .porContainer { margin-top: 2%; position: relative; left: 15.5%; width: 63%;}
        .proName { font-size: 1.6rem; color: rgb(251, 251, 253); text-shadow: 0 0 10px white;}
        .listDesc { left: 2%;}
        .featuresHead { margin-top: 63px; font-size: 1.4rem; font-weight: 130;}
        ul {color: white; position: absolute; }
        .featuresList {margin-top: 90px; left: 2%; } 
        ul li { list-style: circle; font-size: 1rem; line-height: 22px;}
        .breakLine1 { margin-top: 420px; font-size: 1.1rem;}

        .img-price-Box { margin-top: 452px; position: absolute; left: 0%; width: 35.2%; height: 83.8px; border-radius: 8px; box-shadow:0 0 10px white; }
        .proPrice {position: absolute; left: 1.5%; font-size: 1.6rem; z-index: 2; color: black; font-weight:800;}
        #proPriceID1 { margin-top: 460px; font-size: 1.5rem; }
        #proPriceID2 { margin-top: 485px; color: rgb(53, 9, 110); text-shadow:0 0 10px rgb(0, 0, 0); }
        #proPriceID3 { margin-top: 491px; left: 23%; font-size: 1.1rem; }
        #proPriceID4 { margin-top: 512px; color: rgb(247, 6, 6); font-size: 1.2rem; text-shadow:0 0 10px rgb(0, 0, 0); }

        .gallery { margin-top: 620px; left: 15.5%; grid-template-columns: repeat(2, 1fr); width: 83.1%; padding-bottom: 15px;} 
        .card {height: 388px;}
        .card p { font-size: 1.15rem;}
        .card img { width: 100%; height: 346px; }
    }