.product-main-section {
 width: 100%;
 padding: 4rem;
}
.inside-product-main {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
}
.main-left {
 width: 45%;
}
.main-left img {
 width: 100%;
 border-radius: 5px 5px 5px 5px;
 box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
}
.main-right{
 width: 50%;
 padding: 2rem;
 font-family: "poppins";
}
.main-right h2 {
 font-family: montserrat;
 font-weight: 600;
 margin: 1rem 0;
 color: #00567b;
 font-size: 31px;
}
.main-right h3 {
 font-weight: 500;
 color: #1e293b;
 margin-bottom: 1rem;
}
.main-right h3 span {
 font-weight: 800;
 font-style: italic;
}
.main-right p {
 font-size: 17px;
 line-height: 35px;
 color: #505050;
}

.desc-section {
 width: 100%;
 padding: 4rem 8rem;
 font-family: "poppins";
}
.inside-desc-section h2 {
 margin: 2rem 0;
 font-size: 30px;
 color: #00567b;
}
ol.desc-sec-list {
 /* padding: 1rem; */
}
.desc-sec-list li {
 margin: 2rem 0;
 line-height: 25px;
 color: #515151;
}
.desc-sec-list span {
 font-weight: 700;
 color: #424242;
}

.image-container{

 height: 45vh;
 padding: 1rem;
 box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.image-slider{
 height: 100%;
}
.image-slide{
 height: 100%;
 width: 100%;
}
.image-slide img{
 width: 100%;
 height: 100%;
}
ul.sub-list {
 padding: 2rem;
}
.sub-list li {
 line-height: 26px;
 margin-bottom: 1em;
 color: #424242;
}
.types span{
 font-weight: 600;
 color: #424242;
}
.product-image {
 width: 50%;
 margin: auto;
}

.product-image img {
 width: 100%;
 box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 border-radius: 5px;
}

.components {
 display: flex
;
 justify-content: space-between;
 align-items: center;
 width: 100%;
}
.comp-right {
 width: 45%;
}
.comp-right img {
 width: 100%;
 box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
 border-radius: 5px;
}
.comp-left{
 width: 50%;
}

@media (max-width: 1100px) {
 .main-right p {
  font-size: 15px;
  line-height: 30px;
  color: #505050;
}
.desc-sec-list li {
 margin: 1rem 0;
 font-size: 15px;
}
.desc-sec-list li {
 margin: 1rem 0;
}
.inside-desc-section h2 {
 margin: 2rem 0;
}
.comp-right {
 width: 48%;
}
}
@media (max-width: 1024px){
 .main-right p {
  font-size: 15px;
  line-height: 28px;
}
.main-right h2 {
 font-size: 27px;
}.main-right {
 padding: 1rem;
}
.product-main-section {
 padding: 4rem 2rem;
}
.main-left {
 width: 50%;
}
.desc-section {
 padding: 4rem 4rem;
}
.inside-desc-section h2 {
 font-size: 25px;
}
}

@media (max-width: 900px){
 .main-right p {
  font-size: 14px;
  line-height: 25px;
  text-align: justify;
}
.main-right h2 {
 font-size: 23px;
}
.sub-list li {
 font-size: 15px;
}
ul.sub-list {
 padding: 1rem 2rem;
}
.inside-desc-section h2 {
 margin: 1rem 0;
}
.comp-left {
 width: 100%;
}
.comp-right {
 margin: 2rem 0;
 width: 65%;
}
.components {
 flex-direction: column-reverse;
}
.image-container {
 height: 40vh;
}
}

@media (max-width: 765px) {
 
 .main-right {
  width: 100%;
  text-align: center;
}    
.main-left {
 width: 65%;
}
.inside-product-main {
 flex-direction: column;
}

.desc-section {
 padding: 0rem 4rem;
}
.product-image {
 width: 60%;
 margin: auto;
}
.comp-right {
 margin: 2rem 0;
 width: 75%;
}
.image-container {
  margin-top: 4rem;
}
.inside-common-hero h1 {
  font-size: 45px;
}
}

@media (max-width: 600px){
 .main-left {
  width: 75%;
}
.product-main-section {
 padding: 4rem 1rem;
}
.desc-section {
 padding: 0rem 3rem;
}
.sub-list li {
 font-size: 14px;
}
.types span {
 font-size: 15px;
}
.inside-desc-section h2 {
 font-size: 23px;
}
.product-image {
 width: 75%;
 margin: auto;
}
.desc-sec-list li {
 margin: 1rem 0;
 font-size: 14px;
}
.comp-right {
 width: 85%;
}
.image-container {
  height: 35vh;
}
.inside-common-hero h1 {
  font-size: 40px;
}
.common-hero {
  height: 50vh;
}
}

@media (max-width: 465px){
 .main-right h2 {
  font-size: 21px;
  margin: 0.5rem 0;
}    
.product-main-section {
 padding: 4rem 1rem;
}
.main-left {
 width: 95%;
}
.desc-section {
 padding: 0rem 2rem;
}
ul.sub-list {
 padding: 1rem 1rem;
}
.product-image {
 width: 100%;
 margin: auto;
}
.comp-right {
 width: 100%;
}
.inside-common-hero h1 {
  font-size: 30px;
}
.common-hero {
  height: 40vh;
}

}