﻿
a.navbar-brand { white-space: normal; text-align: center; word-break: break-all;}
/*a { color: #0366d6;}*/
a:hover { color: #c2965d;    text-decoration: none;}
.btn-primary { color: #fff; background-color: #521F1A; border-color: #c2965d;}
 .btn-primary:hover {color: #fff; background-color: #8C6239;border-color:#A57B48; }
.btn-danger{color: #fff;background-color:#AE3455}
.btn-secondary{color: #fff;background-color:#414656}
.text-primary{color: #0062B7!important}
.text-danger{color:#AE3455!important}
.text-secondary{color:#414656!important}
.text-maroon {color: #58211c !important;}
.text-gold { color: #c2965d !important;}
.btn-outline-dark:hover {color: #F5F2EB; border-color: #521F1A; background-color: #521F1A}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background-color: #1b6ec2; border-color: #1861ac;}

html { font-size: 14px; color:#414656;position: relative;  min-height: 100%;}
@media (min-width: 768px) { html { font-size: 16px; }}

.border-top {border-top: 1px solid #e5e5e5;}
.border-bottom {border-bottom: 1px solid #e5e5e5;}
.box-shadow {box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);}

footer {background-color: #521F1A; color: white; padding: 30px 0;}
.social-icons a {color: white;margin: 0 10px; font-size: 1.2rem;}

.navbar-toggler {  padding: .25rem .75rem; font-size: 1.25rem;  line-height: 1;  background-color: transparent; border-radius: .25rem;}
.navbar-brand {margin-left:12px;font-size:16px; color:#fff}


@media (min-width:1100px)and (max-width:1399px) {
    .navbar-brand { margin-left: 5vw;font-size:18px    }
}

@media(min-width:1400px){
    .navbar-brand { margin-left: 10vw;font-size:20px }
}

.navbar-brand img {height:70px; aspect-ratio:1}
@media  (max-width: 767px) {
    .navbar-brand img {height:60px; aspect-ratio:1}
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(194, 150, 93, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.dropdown-menu {padding: 0; margin: 0; background-color: #c2965d; border-left: 1px solid #cdcdcd;  border-right: 1px solid #cdcdcd;
        border-radius: 0;  -webkit-box-shadow: none !important;  box-shadow: none !important  }

.navbar .collapse ul ul li { border-bottom: 1px solid #cdcdcd;}
.navbar .collapse ul ul li a {color: #000; }

.navbar-nav > li > a, .navbar ul li a, .navbar-expand-md .navbar-nav .nav-link {
        font-size: 17px; text-transform: capitalize;  padding: 10px 15px; font-family: 'Roboto',sans-serif;
        display: block !important; text-decoration: none; color: #fff }

@media(min-width: 768px) and (max-width: 991px) {
     .navbar-nav > li > a, .navbar ul li a, .navbar-expand-md .navbar-nav .nav-link {
        font-size: 14px; padding: 10px 7px }
    }

    .navbar .active a, .navbar .active a:focus, .navbar .active a:hover, .navbar li a:hover,
    .navbar li a:focus, .navbar-nav > .show > a, .navbar-nav > .show > a:focus,
    .navbar-nav > .show > a:hover {color: #fff; background: #AE3455; outline: 0; }

    .navbar .collapse ul > li:hover > a {color: #fff; background: #AE3455; }

    .navbar .collapse ul ul > li:hover > a, .navbar-nav .show .dropdown-menu > li > a:focus,
    .navbar-nav .show .dropdown-menu > li > a:hover { background-color: #AE3455C0;color: #fefefe  }

.navbar {background: none; border: 0 solid;  margin: 0; padding: 0; min-height: 20px;  width: 100%; background:#58211c }


@media only screen and (min-width: 767px) {
        .navbar .collapse ul li:hover > ul {display: block }
        .navbar .collapse ul ul { position: absolute; top: 100%;left: 8px;width: 100%; min-width: 280px;display: none  }
        .navbar .collapse ul ul li {position: relative }
        .navbar .collapse ul ul li:hover > ul {display: block }
    }

@media only screen and (max-width: 767px) {
        .navbar-nav .show .dropdown-menu > li > a {padding: 9px 15px 9px 30px }
    }

section{padding:50px 0}
 /*CCS form Home Index Page*/
.center-box-container{width:100%; height:50vh;position:relative;  }
.center-box{position:absolute; top:50%;width:inherit; left:50%; transform:translate(-50%,-50%); text-align:center;color:#fff; 
            text-shadow:1px 1px 2px #0a3961; z-index:100; padding:0 20px}

.section-title h2{color:#6a5f5d; font-size:36px; text-align:center!important}
.section-title p{color:#6a5f5d; font-size:18px;text-align:center!important}

.full-width-input{width:85%;background-color:#F5F2EB; height:2.3em; 
             border:0.5px solid #A57B48; border-radius:5px}
.full-width-input:focus{outline: none !important; border:1px solid darkblue;}

/*---------------------------------*/
.banner {background-image: url('..//img/home-bg.webp'); background-size: cover; background-position: center;
    height: 90vh; color: white; position: relative;}
.banner::before {content: ''; position: absolute;top: 0;  left: 0; right: 0; bottom: 0; background: rgba(82, 31, 26, 0.6); }
.banner-content { position: absolute;z-index: 1; text-align: center;top: 50%;transform: translateY(-50%);}

.pgm-card, .industry-card { background-color: #f9f9f9; border: none; border-radius: 10px;transition: transform 0.3s;}
 .pgm-card:hover, .industry-card:hover { transform: scale(1.05); }
.cta-section {background-color: #8C6239;color: white;padding: 50px 0;text-align: center;}


/*----------------------------------*/
.index-features{background-color:#A5ABBD}
.index-features .section-title h2{color:#0062B7}
.index-features .card{position: relative; background-color: #b8becf; transition: box-shadow .25s;
    border-radius: 2px; box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 
    0 3px 1px -2px rgb(0 0 0 / 20%); max-width: 90%; height: 100%; display: block; margin: 0.5rem auto}

.index-features .product{margin-bottom: 35px; display: block;}
.index-features .card .card-image { position: relative;}
.index-features .card-title{color: #333333; position: relative; top:  0; left: 0; padding: 10px 20px; background:#b8becf;
    /*background: rgb(255, 255, 255); */ font-weight: bold; width: 100%; text-align: center;    
    border-bottom: 2px solid #0062B7;}
.index-features .card-title h2{font-size: 22px;margin: 0; padding: 0; color: #AE3455} 
.index-features .card-content{padding: 6px 10px 0}

.index-prdsvc{background-color: #24211e}
.index-prdsvc h2{color:#0062B7}
.index-prdsvc h3{font-size:large; padding:7px 5px; color:#d3cdcd}
.index-prdsvc h3::before{ display: inline-block;
    font-family: 'fontawesome';   vertical-align: text-bottom;  text-rendering: auto;
    -webkit-font-smoothing: antialiased; margin-right:8px; margin-left:15px;content: "\f101";
}

.accordian-item i{margin-right:7px; color:#8C6239}
.accordian-item h2{font-size:17px}

.ui-autocomplete > li {list-style: none;}
.ui-autocomplete > li > div {display: block;padding: 3px 10px; clear: both;font-weight: normal;
    line-height: 1.42857143; background-color:#f4dde2; max-width: 450px; font-size:14px;
    white-space: nowrap;}

.ui-state-hover, .ui-state-active,
.ui-state-focus {text-decoration: none; color: darkred;  font-weight: 800;  cursor: pointer;    }


.search-tags{margin:20px 40px; display:flex; flex-wrap:wrap; }
.search-tags p{font-size:18px; line-height:1.8}
.search-tags h2{font-size:18px; line-height:1.8}
.search-tags h2:after{content:"|"; padding:0 6px; }
@media(max-width:575px){
    .search-tags{margin:20px 30px;}
    .search-tags p{font-size:16px; }
    .search-tags h2{font-size:16px; }
}
.flex-line-br{width:100%}
.pgm-list .card h2{color:#616161}
.prd-img{width:80%;display:block; max-width:400px; margin:0 auto}
#search-btn .fa-search:before{margin-top:-5px}

.about-reasons {background-image: linear-gradient(#e5e5e5, #f0f5fa); padding: 20px 0px;
        width: 100%; height: 100%; text-align: center;}

.reason-title{text-align:center; padding:0 20px 20px}
.about-reasons h2 {color: #303058; padding: 30px 0 15px;text-align: center; }
.about-reasons h2 span {color: #58211c }
.about-reasons h3 { color: #454656; }
.about-reasons img {width: 35% !important; height: 70% !important; padding-bottom: 15px }
.about-reasons p {padding: 5px 40px }

.about-sec-2 {
    animation: scroll 90s linear infinite;
    background: url(../img/pattern-bg.webp), #58211c;
    color: #eee;    height: 100%;  min-width: 360px;   width: 100%; display: flex;
    justify-content: center;  align-items: center;  perspective: 1000px;  perspective-origin: 50% 50%;
}

@keyframes scroll {
    100% { background-position: 0px -3000px; }
}

@media (prefers-reduced-motion) {
    .about-sec-2 { animation: scroll 200s linear infinite; }
}

.refining-hero{background-color:#F5F2EB; padding-bottom:40px}

.refining-desc h2 {
    padding: 15px 0;
}
.refining-desc ul {list-style: none;margin-top: 20px}
.refining-desc ul li {margin-left: 20px;font-weight: bold; }

.refining-desc ul li:before {content: "\f101"; font-family: "FontAwesome";  margin-right: 7px;
            padding: 0 5px; color: #A57B48 ;  font-size: 1.1rem}

.refining-jewellery {background-color:whitesmoke; padding:40px 20px}
.refining-catalysts { background-color:#C4BEB3; padding:40px 20px}

.lab-hero{background-image:url(../img/services/lab-services-header.webp); background-size: cover; 
            background-repeat: no-repeat;height: 50vh}

.lab-overview { background: linear-gradient(#f0f5fa,#e5e5e5);padding: 48px 25px 35px}
.lab-overview ul { list-style: none; margin-top: 20px }

.lab-overview ul li { margin-left: 20px;font-weight: 500;}
.lab-overview ul li:before {content: "\f101"; font-family: "FontAwesome"; margin-right: 7px;
                padding: 0 5px;color: #521F1A;font-size: 1.1rem }

.lab-sec {padding: 48px 20px;}
.lab-sec h2 {text-align: center; padding-bottom: 30px; color: #521F1A; }
.lab-sec p {padding: 0 20px 20px; }

.lab-sec-1 {background-color: #C4BEB3;}
.lab-sec-1 h2{color:#521F1A}
.lab-sec-2 {background: linear-gradient($41414190,#A5ABBD80);}
.lab-sec-3 {background-color: #f3f5fa;}