*{
    border: 0;
    padding: 0%;
    margin: 0%;
    font-family: Snippet;
    /* font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
    /* font-style: normal; */
    /* font-family: "Open Sans",sans-serif; */
    font-family: 'Rubik', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 24px;
}

body{
    background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%234FE'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
}

div{
    font-family: 'Rubik', sans-serif;
}

p{
    font-size: 16px;
    font-weight: 300;
    font-family: 'Rubik', sans-serif;
}
h1{
    font-size: 70px;
    padding-top: 5%;
}

.nav a{
    color: white;
    text-decoration: none;
    font-size: 19px;
}

.nav a:hover{
    color: white;
    text-decoration: none;
}

a{
    text-decoration: none;
    
}

.rev{
    flex-direction: row-reverse;
}

.rev .pro-cont-img{
    border-radius: 0px 20px 20px 0px;
}

.rev .pro-cont-data{
    border-radius: 20px 0px 0px 20px;
}


.hed-centerr{
    text-align: center;
    margin: 28px;
    font-weight: 340;
    /* background-color: aqua; */
    font-size: 50px;
}

.pro{
    display: flex;
    flex-wrap: wrap;

    justify-content: center;
    margin: 10%;
}

.pro-cont{
    margin: 10px;
    width: 100%;
    display: flex;
    border-radius: 20px;
    /* transform: scale(1.01);
    transition: transform 0.3s;
    -webkit-transition: transform 0.3s; */
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.212);
}

.pro-cont:hover{
    transform: scale(1.02);
    transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
}

.pro-cont-img{
    width: inherit;

    border-radius: 20px 0 0px 20px , rgb(255, 255, 255);
    
    /* changing value below will resul in change of height of image */
    height: 250px;
    width: 600px;


    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: rgb(255, 255, 255);
}

.pro-cont-data{
    /* border: 1px solid #C7C5C5; */
    box-sizing: border-box;
    backdrop-filter: blur(4px);
    width: inherit;
    /* Note: backdrop-filter has minimal browser support */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 50px;
    background-color: rgba(43, 187, 108, 0.253);
    border-radius: 0px 20px 20px 0px;
}

.pro-cont-data-hed{
    padding: 10px;
    padding-left: 0;
    /* background-color: blanchedalmond; */
}

.pro-cont-data-hed p{
    font-size: 22px;
    font-weight: 400;
}

.pro-cont-data-body{
    /* max-width: 400px; */
    /* background-color: azure; */
    /* background-color: rgb(180, 115, 17); */
    margin-left: 70px;
    margin-right: 70px;
}

.pro-cont-data-body p{
    font-size: 15px;
}

#btt{
    position: fixed;
    /* top: 90vh; */
    /* left: 92%; */
    right: 30px;
    bottom: 30px;
    padding-left: 32px;
    padding-right: 32px;

}

@media screen and (max-width:800px){
    .pro-cont{
        margin: 25px;
        /* width: 180px; */
        flex-direction: column;
    }
    .pro-cont-img{
        height: 250px;
        width: 100%;
    }
    .pro{
        margin: 0%;
    }
    h1{
        font-size: 60px;
    }
    .nav{
        display: flex;
        justify-content: center;
       
    }
    
}