/*h1, h2, h3, h4, h5, h6 {font-family: 'Raleway', 'sans-serif';}*/

body {font-family: 'Roboto', sans-serif;font-size: 16px;color: #444444;
    padding-top: 73px; background-color: #fff8f8; /*overflow-x:hidden*/}

body * { margin: 0; padding: 0; /*border: 1px red solid;*/   }

.text-primary{color:#283aa0!important}

h1, .h1{font-size: 40px}
h2, .h2{font-size: 32px}
h3, .h3{font-size: 28px}
h4, .h4{font-size: 24px}
h5, .h5{font-size: 20px}


@media(min-width: 992px) and (max-width: 1199px) {
    h1, .h1 {font-size: 32px}
    h2, .h2 {font-size: 28px}
    h3, .h3 {font-size: 24px}
    h4, .h4 {font-size: 18px}
    h5, .h5 {font-size: 16px}
}

@media(min-width: 768px) and (max-width: 991px) {
    h1, .h1 {font-size: 30px}
    h2, .h2 {font-size: 26px}
    h3, .h3 {font-size: 22px}
    h4, .h4 {font-size: 17px}
    h5, .h5 {font-size: 15px}
}

@media(max-width: 576px) {
    h1, .h1 {font-size: 24px}
    h2, .h2 {font-size: 21px}
    h3, .h3 {font-size: 18px}
    h4, .h4 {font-size: 18px}
    h5, .h5 {font-size: 18px}
}


.w-10 {width: 10% !important}
.w-15 {width: 15% !important}
.w-20 {width: 20% !important; word-break:break-all}
.w-30 {width: 30% !important}
.w-40 {width: 40% !important;word-break:break-all }
.w-45 {width: 45% !important;word-break:break-all}
.w-60 {width: 60% !important}
.w-80 {width: 80% !important}
.w-90 {width: 90% !important}

.vw-10 {width: 10vw !important}
.vw-20 {width: 20vw !important}
.vw-25 {width: 25vw !important}
.vw-30 {width: 30vw !important}
.vw-40 {width: 40vw !important}
.vw-50 {width: 50vw !important}
.vw-60 {width: 60vw !important}
.vw-75 {width: 75vw !important}
.vw-90 {width: 90vw !important}
.vw-100 {width: 100vw !important}

.vh-10 {height:10vh !important}
.vh-20 {height:20vh !important}
.vh-25 {height:25vh !important}
.vh-30 { height:30vh !important}
.vh-40 {height:40vh !important}
.vh-50 {height:50vh !important}
.vh-60 {height:60vh !important}
.vh-75 {height:75vh !important}
.vh-90 {height:90vh !important}
.vh-100 {height:100vh !important}

.move-top { position: fixed; display: none; left: calc(100vw - 60px);
            bottom: 15px; z-index: 99999;}

.move-top i {display: flex; align-items: center;justify-content: center;
             font-size: 24px; width: 40px; height: 40px; border-radius: 30px;
             background: #861e28;color: #fff; transition: all 0.4s; }

.move-top i:hover {background: darkblue; color: #fff; }

.featured-section { width: 100%;height: 100%;padding: 40px 0;
    text-align: center;
    background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url(../img/bg/catalyst-bg.jpg) fixed center;
    background-size: cover;}

.featured-section h2 {color: #fff;text-shadow: 1px 2px grey}
.featured-items {display: flex;flex-wrap: wrap;justify-content: center;}
.featured-product { display: block; width: 225px;height: 100%; text-align: center;padding: 15px;
                    margin: 15px 30px;}

@media(max-width: 768px) {
    .featured-section {padding: 30px 15px; }
    .featured-product {width: 190px; height: 100%; padding: 10px; margin: 18px auto; }
}

.featured-product img {width: 95%; margin-bottom: 10px; border-radius: 15px;
    box-shadow: 4px 4px 4px 2px #22348b;  border-top: 7px solid white;}

.featured-product .btn { background-color: lightgray; padding: 5px 10px; 
     border-top: 6px solid whitesmoke }

.featured-product img:hover {box-shadow: 4px 4px 4px 2px #d0831b}
.featured-product .btn:hover {border-top: 6px solid orange;color: #d08220}


/*---------------# menu-section----------------------------*/

#menu-section { height: 70px; transition: all 0.5s; z-index: 997; margin-bottom: 1.5px;
                width: 100%; background:#f2f5f6; opacity: 0.9; 
                box-shadow: 0px 2px 6px 0px rgb(106,27,46);}
#menu-section .menu-section-transparent {background: transparent; }

#menu-section .logo {display: inline-flex; position: relative;margin-right: auto;
                     margin-left: 20px; padding: 7px 0 }

#menu-section .logo h4 { font-size: 18px; letter-spacing: 0.5px; padding: 14px 0;
            color: silver }

#menu-section .logo h4 a { color: #273b9e; font-weight: 600; text-decoration: none;
                font-family: 'Akaya Kanadaka', cursive; letter-spacing: 0.5PX;  }

#menu-section .logo img {padding: 0;  margin: 0;  max-height: 50px;    }

/* Desktop Menu */
.pc-menu, .pc-menu * {margin: 0; padding: 0;list-style: none;}
.pc-menu > ul { margin-right: 50px; }
.pc-menu > ul > li {position: relative;  white-space: nowrap; float: left; }
.pc-menu a {display: block; position: relative; color: #2e3136; letter-spacing: 0.5px;font-weight: 600;
        padding: 5px 12px 7px 12px; margin: 0 5px;transition: 0.3s;font-size: 16px;
        border-radius: 40px; }

.pc-menu a:hover, .pc-menu .active > a, .pc-menu li:hover > a {background: #2e313690; color: #fff; 
            text-decoration: none;  }

.pc-menu .drop-down ul {display: block;  position: absolute;top: 30px; z-index: 99; opacity: 0;
        visibility: hidden;padding: 10px 0; background: #fff; border-radius: 15px; margin-top: 3px;
        box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.35);left: -45%;
        transition: all 0.3s ease-in-out 0s; }

.pc-menu .drop-down:hover > ul {opacity: 1;top: 100%; visibility: visible; background: #e5e5e5;
        box-shadow: 0 4px 2px 3px #2e3136 }

.pc-menu .drop-down li {min-width: 160px; position: relative;}

.pc-menu .drop-down ul a {padding: 10px 20px; font-size: 16px; font-weight: 600; text-transform: none;
        color: #2e3136; }

.pc-menu .drop-down ul a:hover, .pc-menu .drop-down ul .active > a,
    .pc-menu .drop-down ul li:hover > a {color: #fff; background: #2e313690; font-weight: 600 }

.pc-menu .drop-down > a:after {content: "\f107"; font-family:FontAwesome; padding-left: 5px; }
.pc-menu .drop-down .drop-down ul {top: 0; left: -90%; }
.pc-menu .drop-down .drop-down:hover > ul {opacity: 1;top: 0; left: auto; right: 100%;}
.pc-menu .drop-down .drop-down > a {padding-right: 35px;}
.pc-menu .drop-down .drop-down > a:after {content: "\f104";font-family: FontAwesome;position: absolute;
                                          right: 15px; }

@media (max-width:1199px) {
.pc-menu a, .menu-icons a, .menu-icons button { padding: 5px 10px 7px 10px;margin: 0 4px;
                                                font-size: 14px; border-radius: 35px;}

.pc-menu .drop-down ul a, .menu-icons .drop-down ul a, .menu-icons .drop-down ul button {
        padding: 10px 16px;font-size: 14px;}
}

/* Phone Menu */

.phone-menu-toggle { position: fixed;left: calc(100vw - 55px);top: 15px; z-index: 9998; border: 0;
                     background: none;font-size: 24px;transition: all 0.4s;outline: none !important;
                     line-height: 1;cursor: pointer; text-align: right;}

.phone-menu-toggle i {color: #d18024; }

.phone-menu {position: fixed; top: 55px; right: 0;bottom: 0px; left: 0; z-index: 9999;
             overflow-y: auto; background: whitesmoke;transition: ease-in-out 0.2s; opacity: 0;
             visibility: hidden; border-radius: 10px; padding: 10px 0;}

.phone-menu * {margin: 0; padding: 0; list-style: none; }

.phone-menu a, .phone-menu button {display: block; position:relative; color:#2a2c39; padding: 10px 20px;
        font-weight: 500;outline: none;letter-spacing: 1px;}

.phone-menu a:hover, .phone-menu .active > a, .phone-menu li:hover > a, 
    .phone-menu button:hover {background: #2e313690 ; text-decoration: none;font-weight: 600;}

.phone-menu .drop-down > a:after {content: "\f107";font-family: FontAwesome;
                                  padding-left: 10px;position: absolute; right: 15px;  }

.phone-menu .active.drop-down > a:after {content: "\f106";}
.phone-menu .drop-down > a {padding-right: 35px; }
.phone-menu .drop-down ul { display: none;overflow: hidden; }
.phone-menu .drop-down li { padding-left: 20px; }
.phone-menu-active {overflow: hidden;}
.phone-menu-active .phone-menu {opacity: 1; visibility: visible; }
.phone-menu-active .phone-menu-toggle i { color: #861e28; }


/*--------------- Footer css------------------*/

#footer { font-size: 14px;text-align: center; background-color: #e9e9e9;
          padding: 30px 0; margin: 0; box-shadow: 0px -1px 6px 0px #a09ba5;}

#footer h5 {color: #273b9e; font-weight: 600; font-family: 'Akaya Kanadaka', cursive;
        letter-spacing: 1px  }

#footer p {font-size: 17px;  padding: 0 30px; margin: 0 0 5px 0; }
#footer .bottom-logo { margin-bottom: 8px; margin: 0 auto; }

#footer .bottom-logo a {font-size: 16px; margin-top: 30px;margin: auto 5px;
                        color: #444444;text-decoration: none; }

#footer .copyright { margin: 0 0 5px 0; }
#footer .copyright span {color: #861e28}
#footer a {padding: 10px 12px;  color: white; border-radius: 30px; font-size: 25px;}

.footer-fb {background-color: rgb(59, 89, 152) !important;}
.footer-ln {background-color: rgb(0, 122, 185) !important;}
.footer-tw {background-color: rgb(85, 172, 238) !important;}
.footer-in {background-color: rgb(255, 0, 0) !important;}


/*------- css for index page start ---------------*/

.index-slider {width: 100vw; background-color: #293A4A;  height: 100%; padding: 30px 0}
 .index-slider img { width: 70%; display: block;  margin: auto;  padding: 25px; }

@media(min-width: 992px and max-width: 1199px) {
    .index-slider img { width: 50%;}
}

@media(min-width: 776px and max-width: 991px) {
    .index-slider img {width: 70%; }
}

@media(max-width: 775px) {
    .index-slider img { width: 65%; padding: 20px 0 10px  }
}

@media(max-width: 575px) {
    .index-slider {padding: 10px 0 25px }
}

.middle-center-box {position: relative; top: 50%; -ms-transform: translateY(-50%);
                    transform: translateY(-50%); text-align: center;}

.middle-center-content { width: 100%;height: 100%; padding: 0 20px}
.index-features { background-color: #e5e5e5; height: 100%;}
.index-features h1 { color: #303058; text-align: center;  padding-top: 40px }

/*-------- css for index page end  ---------------*/

/*------- css for About page start ---------------*/

.about-main {border-bottom: 4px solid #861e2833}
.about-main img{background:#fff; padding:15px}
.about-main h2{color:#303058}
.about-sec-2 {width: 100%;
    background: linear-gradient(#f7e3e3cf, #f7e3e3d5), url(), url('../img/bg/about-bg.jpg') fixed center center;
    background-size: cover;}
.about-sec-2 ul li{background-color:#acddf1;  margin:10px 0; padding:7px; font-weight:500}
.about-sec-2 ul li:before{content: "\f101";font-family: "FontAwesome"; margin-right:9px;
                          letter-spacing:2px}
.about-sec-2 ul li h2{font-size:1.1rem; display:inline}

.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: #901f1f }
.about-reasons h3 { color: #303058; }
.about-reasons img {width: 35% !important; height: 70% !important; padding-bottom: 15px }
.about-reasons p {padding: 5px 40px }

.about-pgm-top{ padding : 30px 20px; box-sizing:border-box; overflow:auto}
.about-pgm-top h1{width:100%; color:#303058b0; text-align:center; padding:20px 0; }
.about-pgm-top img{float:left;padding:0 30px 15px}
@media(max-width:575px){
    .about-pgm-top{padding : 25px 25px}
    .about-pgm-top img{padding:0 0 15px}
    }

.about-pgm-items{padding:30px 50px; background:linear-gradient(rgba(0,0,0, 0.09),rgba(0,0,0, 0.03))}
@media(min-width:768) and (max-width:991)
{
    .about-pgm-items{padding:25px 30px;}
}
@media(max-width:575px) {
    .about-pgm-items { padding: 20px 10px; }
}
.pgm-item-inner{width:95%; margin:15px auto;}
.pgmitem{padding: 20px 20px 0; width: 100%;  box-shadow: 2px 3px 8px #861e2830 inset}
.pgmitem p{padding : 15px 5px;}
.pgmitem h2{text-align:center; padding:8px 0 0; color:#283aa0}

.pgm-roduction{padding:20px}
.pgm-roduction h2{text-align:center; color:#d08220; padding:0 10px; margin-bottom:10px; 
                  border-bottom:3px solid #861e2850;}
.
/*------- css for About page End ---------------*/
/*------- css for Contact page Start ---------------*/
.contact-sec1 {
    background-image: url("../img/bg/contact-bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100vw;
    text-align: center;
    padding: 30px 20px 10px;
}

.contact-sec1 h1 { color: #303058;}
.contact-details {display: block;vertical-align: middle; width: 100%;height: 100%}
.ci-head {font-size: 20px; font-weight: 700;margin: 20px 0 0; color: #303058;}
.ci-map {border: 0.5px dotted; width: 95%; min-height: 350px}

/*------- css for Contact page End ---------------*/

/*.refining-hero{width: 100%; height: 100%; background:#f0f5fa;}*/


.refining-hero { height: 100%; background-image: url('../img/bg/bg-repeat.png');
    background-repeat: repeat; color: #666;}
.refining-hero h1{padding:30px 10px;text-align:center}

.refining-desc {width:100%; padding: 0 30px 20px}

@media(max-width: 767px) {
    .refining-desc {padding: 10px 30px 20px }
}

.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: rgb(85 172 238);  font-size: 1.1rem}

.refining-jewellery {width: 100%;height: 100%; padding: 45px 0 30px; color: #555;}
.refining-catalysts { background-image: url('../img/bg/bg-repeat.png'); background-repeat: repeat;
    width: 100%; height: 100%; padding: 30px 0; color: #666;}

.lab-hero{background-image:url(../img/services/lab-services-header.jpg); 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: rgb(85 172 238);font-size: 1.1rem }

.lab-sec {padding: 48px 20px;}
.lab-sec h2 {text-align: center; padding-bottom: 30px; color: #303058; }
.lab-sec p {padding: 0 20px 20px; }

.lab-sec-1 {background-color: #f3f5fa;}
.lab-sec-2 {background: linear-gradient(#f0f5fa,#e5e5e5);}
.lab-sec-3 {background-color: #f3f5fa;}


.prd-menu {
    padding: 10px;
    background: linear-gradient(#d9b6ba4f,#d9b6ba4f), url(../img/bg/chemical-formula-bg.jpg) fixed center;
    background-size: cover;
}
@media(min-width:992px){
    .prd-menu { padding: 30px; }
}

#hexGrid { display: flex; flex-wrap: wrap; width: 90%; margin: 0 auto;
    overflow: hidden; list-style-type: none;}

.hex {  position: relative;   visibility: hidden;
    outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
    transition: all 0.5s;  backface-visibility: hidden; will-change: transform;
    transition: all 0.5s;
}

.hex::after {content: ''; display: block; padding-bottom: 86.602%;} /* =100/tan(60) * 1.5 */


.hexIn {position: absolute;  width: 96%; padding-bottom: 110.851%; /* =  width / sin(60) */
    margin: 2%; overflow: hidden;  visibility: hidden;
    outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
    -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
    transform: rotate3d(0,0,1,-60deg) skewY(30deg);
    transition: all 0.5s;}

 .hexIn * { position: absolute;visibility: visible;outline: 1px solid transparent; }

.hexLink {display: block; width: 100%; height: 100%;text-align: center;
    color: #fff;  overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
    -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
    transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}

.hexLink-active {display: block; width: 100%; height: 100%;text-align: center;
    color: #861e28;overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
    -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
    transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}

/****************************** HEX CONTENT ***********************************/
.hex hex-bg {left: -100%; right: -100%;  width: auto; height: 100%; margin: 0 auto;}

.hex h2, .hex h3, .hex p {width: 100%; padding: 5% 0; box-sizing: border-box; font-weight: 500; 
                 letter-spacing:1px}

.hex-formula{top:25%;text-align: center;}
.hex-name{text-transform: uppercase; text-align: center; bottom: 43%;
    padding-top: 57%; font-size: 1.5em; z-index: 1;}
.hex-weight{top: 55%;text-align: center;}

@media(max-width:576px) {
    .hex-name {bottom: 38%;   padding-top: 57%;   font-size: 1em;  }
    .hex p {padding: 3% 0; }
    .hex-weight {top: 58%;}
    .hex-formula {top: 16%;}
}

.hex-bg {position:absolute; top:0;  right:0;  bottom:0;  left:0; 
       background-color:#1a2f6b;
    background-position: center center; background-size: cover; overflow: hidden;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}

.hex-bg-active {position:absolute; top:0;  right:0;  bottom:0;  left:0; 
     background-color:#d18027;
    background-position: center center; background-size: cover; overflow: hidden;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}

.hex-bg:before /*, .hex-bg:after*/ {position: absolute; top: 0; right: 0; bottom: 0;
        left: 0;  content: '';  opacity: 0; transition: opacity 0.5s;   }

/**************** HOVER EFFECT ***********************/
.hexIn:hover .hex-bg:before,
.hexIn:hover .hexLink { opacity: 1; background-color:#d18027; color:#2e3136;}

/*************** HEXAGON SIZING AND EVEN ROW INDENTATION ****************/
@media (min-width:1201px) { /* <- 5-4  hexagons per row */

    #hexGrid { padding-bottom: 4.4%}
    .hex {width: 20%;}/* = 100 / 5 */
    .hex:nth-child(9n+6) {margin-left: 10%; } /* first hexagon of even rows */
    /* = width of .hex / 2  to indent even rows */
}

@media (max-width: 1200px) and (min-width:901px) { /* <- 4-3  hexagons per row */
    #hexGrid { padding-bottom: 5.5%; font-size: 13px; }
    .hex {width: 25%; /* = 100 / 4 */}
    .hex:nth-child(7n+5) { margin-left: 12.5%; }  /* first hexagon of even rows */
    /* = width of .hex / 2  to indent even rows */
}

@media (max-width: 900px)  { /* <- 3-2  hexagons per row */
    #hexGrid { padding-bottom: 7.4%; font-size: 14px; }
    .hex { width: 33.333%; /* = 100 / 3 */ }
    .hex:nth-child(5n+4) {margin-left: 16.666%; }    /* first hexagon of even rows */
    /* = width of .hex / 2  to indent even rows */
}

@media (max-width: 899px) and (min-width:400px) {
    #hexGrid { font-size: 14px; }
}

@media (max-width: 400px) {
    #hexGrid { font-size: 10px; }
}

.full-width-input{width:85%;background-color:lightcyan; height:2.3em; 
             border:0.5px solid #007bff; border-radius:5px}
.full-width-input:focus{outline: none !important; border:1px solid darkblue;}

.accordian-grp{display:flex;flex-wrap:wrap; padding-top:10px}
.accordian-item{width:50%; height:100%; padding:10px 20px}
@media(max-width:767px){
    .accordian-item{width:100%; padding:10px 10px}
}
.accordian-item i{margin-right:7px; color:#999999}
.accordian-item h2{font-size:17px}
.metal-list{padding:7px 20px;  background:#e0e0e0}
.metal-list a{font-size:22px; text-decoration:none}
.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:floralwhite; max-width: 450px; font-size:14px;
    white-space: nowrap;}

.ui-state-hover,.ui-state-active,
.ui-state-focus {text-decoration: none; color: darkblue; font-weight:600; 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%}

.prd-img{width:80%;display:block; max-width:400px; margin:0 auto}