@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap');



.breadcrumb {    background-color: #719844;}
li.breadcrumb-item a, .breadcrumb-item+.breadcrumb-item::before  {color: #ffffff;}
.breadcrumb-item.active {color: #ffffff;font-weight: bold;}

body {background-color:#eeeeee; background:url("../img/bg-image.jpg"); background-repeat: no-repeat; font-family: 'Raleway', sans-serif;}

.product-detail-body {background-image: none;}

.navbar-bg{background: url("../img/navbar-bg.png"); font-family: 'Raleway', sans-serif;}
:focus {outline: -webkit-focus-ring-color auto 0px !important;}
.mb-30{margin-bottom:30px;}
.mt-30 {margin-top:30px;}
button:hover{outline: none !important; box-shadow: none !important;}
a:hover{outline: none !important; box-shadow: none !important;}
button:focus{outline: none !important; box-shadow: none !important;}
a:focus{outline: none !important; box-shadow: none !important;}
.send-btn {    height: auto;
    transition: 1s all;
border-radius: 0px;
text-align: center;
line-height: 14px;
font-size: 14px;
color: white;
background-color: #719845;
padding: 10px 30px;
border: 0;}
.send-btn:hover{background:#3f6e06; color:white; border-radius: 0;}
.btn-ramco-green{background: #719844; color:white;border-radius: 0;width: 100%; transition: 1s all;}
.btn-ramco-green:hover{background:#3f6e06; color:white; border-radius: 0;width: 100%;}

.navbar-rectangle{
width: 350px;
height: 170px;
margin-top:-56px;
background: #719844;
z-index: 1 !important;
}
/*
.overlay::before{
    position: absolute;
    content: "";
    height: 745px;
    top: 170px;
    width: 350px;
    background-color: #719844;
} */
footer {
/*width: 100%;
position: absolute;
bottom:0;
z-index: 3;
*/
padding: 0 34px;margin-bottom:10px;
margin-top:10px;
}
.product-detail-body .text-brand {margin-top: 80px; font-size: 11px; margin-left: 6px;}
.product-detail-body .logo img {width: 140px; }
.product-detail-body footer {border-top:1px solid #0080002e; padding: 7px 0 0px 0;}

.product-detail-body .navbar-rectangle {height: 56px; width: 200px;}
.product-detail-body .breadcrumb {border-radius: 0;}
.product-detail-body li.breadcrumb-item:first-child {margin-left: 280px;}
.product-detail-body .product-detail .item img {width: 100%;border: 1px solid #0080002e;border-radius: 5px;}
.product-detail-body .product-detail .item span {    margin-top: -40px;

    text-transform: capitalize;
    display: block;
    color: white;
    z-index: 4;
    position: absolute;
    margin-left: 25px;}
.product-detail-body .product-detail .item:after {
    content: '';
    position: absolute;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#000000), to(rgba(35, 31, 32, 0)));
    background-image: linear-gradient(to top, #000000ad 0%, rgba(35, 31, 32, 0));
    border-radius: 8px;
    height: 30%;
    width: 89%;
    bottom: 0px;
    left: 15px;
    right: 0px;
}

.product-detail-body .products-title {    margin-top: 40px;margin-bottom: 10px;}
/*.product-detail-body .products-title:after {content:''; width: 100%; background-color: #0080002e; float: right; height: 1px; } */
.product-detail-body .item {margin-bottom:15px;}
.navbar{z-index: 1 !important;}

.text-green{color: #3f6e06 !important;}
.col-right{background:url("../img/company-bg.png");}
.circle-fa{transition:1s all; color: white;background: #364cbd;border-radius: 50px;width: 41px;height: 41px;padding: 13px 17px;margin-right:10px;}
.circle-fa:hover{background:  #3B5998;}
.circle-in{
    transition:1s all;
    color:white;
    background: #ce406a;
    border-radius: 50px;
    width: 41px;
    height: 41px;
    padding: 13px 14px;
    margin-right:10px;
}
.circle-in:hover{background: #a43d5c;}
.circle-yt{
    transition:1s all;
    color:white;
    background: #b93627;
    border-radius: 50px;
    width: 41px;
    height: 41px;
    padding: 13px;

}
.circle-yt:hover{background: #C31A1E}

.index-left{
    background: url(../img/index-left-bg.png);
    background-size: 72%;
    background-repeat: no-repeat;
    background-position: 2px 0px;
    z-index: 1;
    margin-top: -55px;
}

.content-bg-image {
  /*  background: url(../img/recycle-sign.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: -13px 0;
    margin-top: -328px;*/
    margin-top: 120px;
    }

.index-right{
   /* background:url('../img/index-right-bg.png'); */
}
.index-text {
    color: white;
    position: relative;
    width: 180px;
    margin: 380px auto 0px auto;
    height: 75px;
    padding: 4px 0px 0px 0px;
    font-family: 'Fira Sans Condensed';
    font-weight: 600;
    font-style: italic;
    background: url(../img/product-plans-text.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.text-brand{
    margin-top:125px;
    font-weight: bolder;
    color:white;
    font-family: 'open sans';
}

.green-bord {    width: 350px;
    height: calc(100% - 80px);
    background-color: #719844;
    position: absolute;
    margin-left: 48px;}
.codeandmore-ref {    font-family: 'open sans';
    color:black;
    font-size: 12px;
    padding: 0;
    margin: 0;
    line-height: 40px;
    font-style: italic;
    opacity: 0.5;}

.right-area-content img{
    /*width: 580px;
    margin: 0 auto 0 auto;
    display: block;
    padding: 60px 0px;*/
    width: 100%;
}
.index-left img {width: 95%;
    margin-left: 25%;
    display: block;
    margin-top: 50px;}
/** Company Profile Page **/

.col-left-company{background:url("../img/company-cover.jpg");background-size: cover; background-repeat: no-repeat; padding:30px;     margin-top: -54px;}


.text-right-company{margin-top:30%;}

.right-colon-section {height: 960px;overflow: hidden; padding: 0 50px;}

/** References **/
.col-left-references{

	background:url("../img/referance-cover.jpg");
   background-size: cover;
    background-repeat: no-repeat;
    padding: 30px;
    margin-top: -54px;

}


.text-right-references img {width: 130px; margin:55px auto; display:block}
.brand-list { border:1px solid #33333314; height: 130px;}
.brand-list img{ width: 100%;margin: 10px auto;display: block;}
.brand-list:hover {transition: 0.5s;  background-color: #e4e4e4;}
#pagin{margin-top:60px;float: right}
#pagin li{display:inline-block; }
#pagin li a:hover{color:black !important; text-decoration: none}
#pagin li a{padding: 10px; border-radius:5px; background-color:#719844}
.current{background:white !important; color:#719844 !important; border:1px solid white}
.current:hover{color:#719844 !important;}
.border-right-none{
	border-right: none !important;
}

.border-bottom-none{
	border-bottom: none !important;
}



/** Contact **/

.btn-dark{
	 border-radius: 25px;
}

.col-left-products{
	background:url("../img/product-cover.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    padding:30px;
    margin-top: -54px;
}

.col-left-contact{
	background:url("../img/contact-cover.png");
    background-size: cover;
    background-repeat: no-repeat;
    padding:30px;
    margin-top: -54px;
}
.long-text b {    width: 100px;display: block;float: left;}
.long-text a {color:black;}

.col-left-references h2, .col-left-company h2, .col-left-products h2, .col-left-contact h2, .col-left-references h2{text-align: center;margin-top:50%;text-transform: uppercase;color:#b8ced8;}
.col-left-company p, .col-left-products p, .col-left-contact p, .col-left-references p, .col-left-references p {text-align: center; color:white}



.form-control{
display: block;
width: 100%;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fcfcfc;
background-clip: padding-box;
border: 1px solid #928f853b;
    border-radius: .0rem;
/* border-radius: .25rem; */
transition: border-color .20s ease-in-out,box-shadow .15s ease-in-out;
}

/** Product **/

.bg-grey{
	background-color:#e4e3e2;
}

.bg-pink{
	background-color:#dfcbe5;
}

.bg-white{
	background-color:#e9e7e6
}

.close{
    font-size: 12px;
    font-weight: bold;
    color:#cf5f49 !important;
    text-shadow: none !important;
    opacity: unset !important;
}


.btn-modal{
    padding:0px 0px !important;
}

.products-title { margin-top: 50px;}
.products-content {  margin-top: 50px;}


ul.product-list {margin:0 !important; padding:0!important;}
ul.product-list li {list-style:  none; margin-bottom:10px; padding:0 20px;}
ul.product-list li:first-child {margin-bottom:20px; height: 158px;}
ul.product-list li span {float: right; font-weight: bold; color:#000 !important; margin-top: -30px;}
ul.product-list li a img {width: 100%; padding:30px;  }
ul.product-list li:hover {transition: 0.5s; background-color: #b3b3b2;}

ul.product-list li:first-child img {  margin-top: -30px; float: right; margin-right:0px; }

ul.men-product li:first-child {background-color: #bec4c5; }
ul.men-product li  {background-color: #e4e3e2; }

ul.women-product li:first-child {background-color: #dbd7e5;}
ul.women-product li  {background-color: #dbd7e5;}

ul.child-product li:first-child {background-color: #ffffff;}
ul.child-product li  {background-color: #ffffff;}




@media screen and (max-width: 1024px) {
.index-left img {margin-left: 25%;margin-top: 145px;}
.content-bg-image {margin-top: 160px;}
.green-bord { height: calc(88% - 76px);}
/*footer { margin-top: 30px;} */
}
@media (min-width: 992px)  and (max-width: 1024px)  {

    ul.product-list li {padding: 0;}
    ul.product-list li a img {padding: 15px;}
    ul.product-list li:first-child img {width: 90%; margin-right:10px;  }
    ul.product-list li:first-child {height: 107px;}

    /*Detail Page*/
    .text-right-company{margin-top:10%;}
    .right-colon-section {height: 939px; padding: 0 0px;}
}



@media (min-width: 768px)  and (max-width: 991px)  {
    body{background-size: 200%; background-position: top right;}
    .logo img {width: 170px;}
    .text-brand {margin-top: 85px;margin-left: 36px;text-align: left !important;font-size: 10px;}
    .navbar-rectangle {width: 230px;}
    .green-bord {width: 230px;    height: calc(62% - 76px);}
    .navbar-expand-md .navbar-nav .nav-link {font-size:13px;}
    .index-left img {margin-bottom:80px;}


/*Detail Page*/
.text-right-company{margin-top:10%;}
.right-colon-section {height: 518px; padding: 0 0px;}


/*Product Page*/
ul.product-list li {padding: 0;}
ul.product-list li a img {padding: 5px;}
ul.product-list li:first-child img {width: 80%; margin-right:18px;  }
ul.product-list li:first-child {height: 55px;}
ul.product-list li span {font-size:13px}
}
.desktop-menu{display:block;}
.mobile-menu{display:none ;}
textarea{resize:none;}

@media (min-width: 768px)  and (max-width: 1024px)  {
    .col-left-company h2, .col-left-products h2, .col-left-contact h2, .col-left-references h2 {font-size:18px;}
    .products-title, .company-title {font-size:20px}
    .long-text p{font-size:16px;}

}

@media screen and (max-width: 768px) {
.col-left-company h2, .col-left-products h2, .col-left-contact h2, .col-left-references h2 {font-size:14px;}
.products-title, .company-title {font-size:20px}
.long-text p{font-size:14px;}
.col-left-company h2, .col-left-products h2, .col-left-contact h2,.col-left-references h2 {margin-top:70%;}
.ul.product-list li:first-child img { margin-right: 18px }
.zero-resp {margin-right:0; padding-right:0; margin-left:0; padding-left:0; }

.product-detail .right-colon-section {padding:0;}

}
@media screen and (width: 768px) {
    ul.product-list li:first-child img {margin-top: -21px;}
    .brand-list img{
        width: 100%;
        margin: 32px auto;
    }
}
@media (min-width: 320px) and (max-width: 767px){
    .brand-list img{    margin: 16px auto;
        display: block;
        width: 130px;}
    .text-product{
        display: none;
    }
    .breadcrumb-item:first-child{margin-left:0 !important;}
    .navbar-rectangle{height: 67px !important;}
}
@media screen and (min-width: 1441px){
   .brand-list img{    margin: 16px auto;
       display: block;
       width: 130px;}


}
@media screen and (min-width: 1681px){


     footer {   margin-bottom:0px; background-color: #eeeeee;
         padding: 10px 0;}
 }


@media screen and (max-width: 374px){
    .col-left-company,.col-left-products, .col-left-references, .col-left-contact, .col-left-references {height: 250px !important; margin-top:0;     background-position: 0 -43px;}
    #pagin li a{padding:9px;}
}
@media screen and (max-width: 767px) {

body{ background-size: 200%;background-position: top right; background-repeat: repeat;}
.mobile-menu{display:block ;}
.desktop-menu {display:none !important;}
.logo img {    width: 120px;margin: 0 0px 0 13px !important;padding: 0 !important;}
.text-brand {margin-top: 50px;  margin-left: 15px;font-size: 7px;}
.green-bord {width: 230px;    height: calc(62% - 76px); display:none;}
.navbar-expand-md .navbar-nav .nav-link {font-size:13px;}
.index-left img {width: 70%;margin-left: 15%; margin-top: 15px;}
.navbar {height: 67px;}
.navbar-dark .navbar-toggler {border: 1px solid green;}
.index-left {margin-top:0;}
.content-bg-image {margin-top: 30px;}
.navbar-rectangle {width: 177px;height: 67px;margin-top: -67px;background: #719844;z-index: 1 !important;margin-left: 15px !important;}
.navbar-collapse {-ms-flex-preferred-size: 100%;flex-basis: 100%;-ms-flex-positive: 1;flex-grow: 1;-ms-flex-align: center;align-items: center;width: 100%;background-color: #719844;margin-top: 0px;}
.text-green {color:white !important;}
.menu-settings-css li {margin-left: 36px;}
.social-btn {text-align: center;}
.foot-note-v2 {text-align: center;}
.brand-list {margin-bottom:30px}
.right-colon-section {padding:0 15px;}



.col-left-company,.col-left-products, .col-left-references, .col-left-contact, .col-left-references {height: 200px; margin-top:0;     background-position: 0 -43px;}
.right-colon-section {height: auto;}
.col-left-company h2, .col-left-products h2, .col-left-contact h2 { margin-top: 6%;}
.col-left-references h2 { margin-top: 1%;}
.text-right-company { margin-top: 10%;}
ul.product-list {margin-top:50px !important;}
.right-colon-section {overflow: hidden;}
.brand-list {border: 1px solid #33333380;}



.product-detail .col-left-products {display:none;}
}

@media (width: 375px){
    .text-brand{
        margin-left:5px;
    }
}


