@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
body{
    background:url('../images/bgimage.jpg') no-repeat;
    background-size: cover;
    padding-top:20px;
}
h1,h2,h3,h4,h5,h6{font-family: 'Montserrat', sans-serif;}

h1{    
    font-size: 2.6em;
    font-weight: bold;
    background: -webkit-linear-gradient(#fbc926, #c3922e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
h2{
    font-size: 2.0em;
    font-weight: bold;
    color:#de3035;
    padding-bottom: 60px;
}
.categories a{
    text-align: center;
    color:#fff;
    text-decoration: none;
}

.categories{
    text-align:center;
}
.categories a {
    float: left;
    display: contents;
}
.categories .col:nth-child(1) > a > h3, .categories .col:nth-child(2) > a > h3, .categories .col:nth-child(4) > a > h3, .categories .col:nth-child(5) > a > h3{
    background: rgb(230,49,55);
background: linear-gradient(90deg, rgba(230,49,55,1) 0%, rgba(167,39,38,1) 100%);
transition: all 2s ease;
}
.categories .col:nth-child(3) > a > h3{
    background: rgb(230,49,55);
background: linear-gradient(90deg, #c2912e 0%, #c2912e 100%);
transition: all 2s ease;
}

.categories .col:nth-child(1) > a:hover > h3, .categories .col:nth-child(2) > a:hover > h3, .categories .col:nth-child(4) > a:hover > h3, .categories .col:nth-child(5) > a:hover > h3{
    background: rgb(4 42 102);
background: linear-gradient(90deg, rgb(4 42 102) 0%, rgb(1 93 104) 100%);
}
.categories .col:nth-child(3) > a:hover > h3{
    background: rgb(4 42 102);
background: linear-gradient(90deg, rgb(4 42 102) 0%, rgb(1 93 104) 100%);
}

.categories a > img{
    width:150px;
    height:auto;
}
.categories a>h3{
    font-family: 'Montserrat', sans-serif;
    font-size:1.4em;
    font-weight: bold;
    border-radius: 10px;
    padding:5px 10px;
    margin-top:20px;
}
.categories a:hover > img{
animation: bounce; /* referring directly to the animation's @keyframe declaration */
animation-duration: 1s; /* don't forget to set a duration! */
}

img[alt='Rheem Logo'], img[alt='Leminar Global']{
    width:200px; height: auto;
}
img[alt='Rheem Logo']{
    margin-bottom:50px;
}
img[alt='Leminar Global']{
    margin: 50px 0;
}
.productsdesbox{background:#fff; padding:10px;margin:20px 0px; border: 1px solid #e9e9e9;}
.productsdesbox .align-left{padding:10px;}
.prodBox{float:left;width:100%;background:#fff; margin-bottom:25px;padding:10px;}
.products{
    text-align: center;
}
.products .productimg{
    width:100%;
    
}
.products h3{
    color: #000000;
    font-weight: bold;
    font-size: 1.5rem;
}
.align-left{text-align:left;}
.col-sm-3.bords {
    border: 1px solid #e9e9e9;
}
@media (max-width:576px){
    body{
        background:url('../images/bgimage-mob.jpg') top center no-repeat, url('../images/bgimage-mob-b.jpg') bottom center no-repeat;
        background-size: contain;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .categories a {
        float: left;
        display: block;
        margin: 0 auto;
    }
    .categories > .row {
        display: flex;
        flex-flow: column;
    }
    .categories > .row > .col {
        padding-bottom:50px;
        display:flex; 
    }
    h2 {
        padding-bottom: 10px
    }
}