@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Teko:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');

html{ scroll-behavior: smooth; }
body{ background: #eff2fc; font-family: 'OpenSans', sans-serif; font-size: 14px; line-height: 120%; letter-spacing: 1px; word-spacing: 1.05px; font-weight: 400; text-align: justify; }
p{ font-family: 'OpenSans', sans-serif; font-size: 14px; line-height: 18px; letter-spacing: 1px; word-spacing: 1.05px; font-weight: 400 }

img{ max-width: 100%; }
.carousel-inner img{ width: 100%;}
.container{ max-width: 1200px; }

h1,h2,h3,h4,h5,h6{ font-family: 'Roboto', sans-serif; font-weight: 900; }
.goTop{ position: fixed; right: 20px; bottom: 15px; width: 50px; height: 50px; line-height: 50px; text-align: center; background: rgba(0,122,253,0.4); border-radius: 50% 50% 0 0; color: #007afd; font-size: 32px; opacity: 0; z-index: 999; }
.stickyHead .goTop{ opacity: 1; }
img{ max-width: 100%; }
.stickyHead .mainMenuWrap{ width: 100%; background: rgba(50, 130, 210, 0.9); position: fixed; left: 0; top: 0; box-shadow: 0 0 12px #111; z-index: 999; }
.stickyHead .mainMenu ul li a{color: #fff;}

/* Common Transition Script Section -----
============================================================================= */

.logoCol img,
a, a:hover{
  -webkit-transition: all 1s ease !important;
  -moz-transition: all 1s ease !important;
  -ms-transition: all 1s ease !important;
  -o-transition: all 1s ease !important;
  transition: all 1s ease !important;
}


/* headTop Style  Section -----
========================================================================== */
.headTop{ background: #3282c9; color: #ccdbfe; font-size: 16px; padding: 5px 0; }


/* MainMenu Style  Section -----
========================================================================== */
.mainMenu{ padding: 10px 0 0; overflow: hidden; }
.mainMenu:hover{ overflow: visible; }
.mainMenu ul{ width: 100%; text-align: right; display: block; }
.mainMenu ul li{ display: inline-block; position: relative; }
.mainMenu ul li a{ display: block; color: #003560; padding: 7px 6px; font-size: 11px; text-transform: uppercase; font-family: 'Roboto', sans-serif; font-weight: 700 }

.mainMenu ul li a:hover{ background: #ed1c24; color: #FFF; text-decoration: none; }
.mainMenu ul ul{ position: absolute; top: 300px; left: 0; opacity: 0; width: 240px; margin: 0; padding: 0; text-align: left; transition: all 0.3s; z-index: 7777; }
.mainMenu ul li:hover ul{ top: 100%; opacity: 1; }
.mainMenu ul ul li{ display: block; }
.mainMenu ul ul li a{ background: rgba(48,81,160,0.9) !important; color: #FFF; display: block; border-top: 1px #3056b1 solid; border-bottom: 1px #21469d solid; padding: 7px 20px }
.mainMenu ul ul li a:hover{ background: #ed1c24 !important; }

html.home .mainMenu a[href="index.php"],
html.aboutus .mainMenu a[href="about-us.php"],
html.contactus .mainMenu a[href="contact-us.php"],
html.reactive-dyestuffs .mainMenu a[href="reactive-dyestuffs.php"],
html.direct-dyestuffs .mainMenu a[href="direct-dyestuffs.php"],
html.direct-dyestuffs .mainMenu a[href="reactive-dyestuffs.php"],
html.printing-dyestuffs .mainMenu a[href="printing-dyestuffs.php"],
html.printing-dyestuffs .mainMenu a[href="reactive-dyestuffs.php"],
html.others-dyestuffs .mainMenu a[href="others-dyestuffs.php"],
html.others-dyestuffs .mainMenu a[href="reactive-dyestuffs.php"],
html.auxiliaries .mainMenu a[href="auxiliaries-gall.php#gallThree"],
html.Textile-One .mainMenu a[href="Textile-One.php"],
html.Textile-Two .mainMenu a[href="Textile-One.php"],
html.Textile-Three .mainMenu a[href="Textile-One.php"],
html.sustainability .mainMenu a[href="sustainability.php"]{ background: #ed1c24 !important; color: #FFF !important; }

html.direct-dyestuffs .navbar-nav ul a[href="reactive-dyestuffs.php"],
html.printing-dyestuffs .navbar-nav ul a[href="reactive-dyestuffs.php"],
html.others-dyestuffs .navbar-nav ul a[href="reactive-dyestuffs.php"]{background: rgba(48,81,160,0.9) !important;}

/*html.Textile-Three .navbar-nav ul a[href="Textile-Three.php"]{ background: #ed1c24 !important; color: #FFF !important; }*/


/* socialIcons Changer Script Section ----------
=============================================================================== */
.socialIcons a{ color: #ddd; display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 20px; margin-left: 2px; }
.socialIcons a:hover{ color: #ed1c24; }


/* mainSliderWrap -------------
====================================================================*/
.sliderWrap{ box-shadow: 0 3px 12px #333; position: relative; z-index: 555;}

/* ---- Nav Bottom ================= */
.carousel.navBottom .carousel-control-prev{ left: inherit; right: 80px; width: 70px; height: 70px; top: auto; bottom: 0; background: #fdb819; }
.carousel.navBottom .carousel-control-next{ right: 0px; width: 70px; height: 70px; top: auto; bottom: 0; background: #fdb819; }
.carousel.navBottom .carousel-control-next-icon,
.carousel.navBottom .carousel-control-prev-icon{ width: 36px; height: 36px; }


/* ---- navBottomTst ================= */
.carousel.navBottomTst .carousel-control-prev{ width: 30px; height: 30px; left: inherit; right: 40px; top: auto; bottom: 30px; background: #fdb819; }
.carousel.navBottomTst .carousel-control-next{ width: 30px; height: 30px; right: 5px; top: auto; bottom: 30px; background: #fdb819; }
.carousel.navBottomTst .carousel-control-next-icon,
.carousel.navBottomTst .carousel-control-prev-icon{ width: 16px; }


.carousel-caption{ font-size: 56px; font-weight: 900; -webkit-text-stroke:1px red; bottom: -300px; }
.clrTxt{ color: #fdb819 }
.carousel-item.active .carousel-caption{ bottom: 100px; }


/* subPageTitleWrap Style  Section -----
========================================================================== */
.subPageTitleWrap{ box-shadow: 0 3px 7px #333; background: url(../images/banner6.jpg) no-repeat center; background-size: cover; padding: 120px 0; color: #08266c; font-size: 12px; text-align: center; position: relative; }
.subPageTitleWrap:after{ position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,36,152,0.2); z-index: 0 }
.subPageTitleWrap .container{ position: relative; z-index: 33 }
.subPageTitleWrap h2{ line-height: 65px; margin-bottom: 0; padding-bottom: 0; color: #FFF; font-size: 52px; font-weight: 600; text-shadow: 0 0 6px #ff0; }
.subPageTitleWrap h4{ color: #eee !important; line-height: 30px; margin-bottom: 30px; color: #999; font-size: 16px; font-weight: 100; }
.subPageTitleWrap.assoc:after{ background: rgba(0,36,152,0.4);}
.subPageTitleWrap.assoc h2{ color: green; }

/* featureOne_Wrap Style  Section -----
========================================================================== */
.featureOne_Wrap{ background: url(../images/FeatBg_01.jpg) no-repeat center; background-size: cover; padding: 80px 0 70px; color: #08266c; font-size: 12px; text-align: justify; }
.featureOne_Wrap h2{ line-height: 32px; margin-bottom: 0; padding-bottom: 0; color: #ed1c24; font-size: 24px; font-weight: 600; }
.featureOne_Wrap h4{ line-height: 30px; margin-bottom: 30px; color: #ed1c24; font-size: 28px; font-weight: 100; }


/* aboutSndti Style  Section -----
========================================================================== */
.aboutSndti{ background: url(../images/FeatBg_01.jpg) no-repeat center; background-size: cover; padding: 120px 0; color: #08266c; font-size: 12px; text-align: center; }
.aboutSndti h2{ line-height: 42px; margin-bottom: 0; padding-bottom: 0; color: #ed1c24; font-size: 32px; font-weight: 600; }
.aboutSndti h4{ line-height: 30px; margin-bottom: 30px; color: #ed1c24; font-size: 16px; font-weight: 100; }
.inner{ position: relative; }
.box{box-shadow: 0 0 3px #777; border-radius: 7px; font-size: 14px; font-weight: 600; text-transform:uppercase; position: relative; border-radius: 10px; z-index: 3; overflow: hidden; transition: all 0.3s}
.box:after{content:""; position: absolute; width:0; height:0; top: 50%; left: 50%; background: rgba(50, 130, 200, 0.2); transition: all 0.3s; border-radius:100%; z-index: -1}
.box span{display: block; padding: 12px; position: absolute; left: 0; bottom: 0; width: 100%}
.box:hover:after{ width:100%; height:100%; top:0; left:0; border-radius:0 }

.home .box{ min-height: 200px; box-shadow: 0 0 3px #777; border-radius: 7px; font-size: 12px; position: relative; border-radius: 10px; z-index: 3; overflow: hidden;}


.seeMore{ display: inline-block; text-transform: uppercase; padding: 3px 30px; background: #bbb; cursor: pointer; }
.seeMore:hover{ background: #999; color: #111; }


/* aboutSndtiOne Style  Section -----
========================================================================== */
.aboutSndtiOne{ background: url(../images/FeatBg_01.jpg) no-repeat center; background-size: cover; padding: 70px 0 50px; color: #08266c; font-size: 12px; }
.aboutSndtiOne h2{ line-height: 42px; margin-bottom: 0; padding-bottom: 0; color: #ed1c24; font-size: 32px; font-weight: 600; }
.aboutSndtiOne h4{ line-height: 30px; margin-bottom: 30px; color: #ed1c24; font-size: 16px; font-weight: 100; }

/* SndtiGallWrap Style  Section -----
========================================================================== */
.SndtiGallWrap{
  background-image: url(../images/FeatBg_01.jpg), url(../images/img_flwr.gif);
  background-repeat: no-repeat, no-repeat;
  background-position: center, right bottom;
  background-size: cover, auto;
  padding: 80px 0 50px; color: #08266c; font-size: 12px; }
.SndtiGallWrap h2{ line-height: 42px; margin-bottom: 0; padding-bottom: 0; color: #ed1c24; font-size: 32px; font-weight: 600; }
.SndtiGallWrap h4{ line-height: 30px; color: #ed1c24; font-size: 16px; font-weight: 100; }
.SndtiGallWrap .title{ text-transform:uppercase; }



/* aboutSndtiTwo Style  Section -----
========================================================================== */
.aboutSndtiTwo{ background: url(../images/banner5.jpg) no-repeat center; background-size: cover; padding: 50px 0; color: #08266c; position: relative; }
.aboutSndtiTwo:after{ position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,36,152,0.6); z-index: 0 }
.aboutSndtiTwo .container{ position: relative; color: #FFF; z-index: 33 }
.aboutSndtiTwo h4{ color: #FFF !important; line-height: 30px; margin-bottom: 30px; color: #ed1c24; font-size: 28px; font-weight: 100; }
.aboutSndtiTwo li{ padding: 3px 0; }
.aboutSndtiThree li{ padding: 3px 0 }


/* aboutSndtiThree Style  Section -----
========================================================================== */
.aboutSndtiThree{ background: #FFF no-repeat center; background-size: cover; padding: 40px 0; color: #08266c;}
.aboutSndtiThree h2{ line-height: 42px; margin-bottom: 0; padding-bottom: 0; color: #ed1c24; font-size: 28px; font-weight: 600; }
.aboutSndtiThree h4{ line-height: 30px; margin-bottom: 15px; color: #ed1c24; font-size: 22px; font-weight: 100; }
.pp_social{ display: none !important; }


/* featureTwo_Wrap Style  Section -----
========================================================================== */
.featureTwo_Wrap{ padding: 70px 0 40px; color: #08266c; font-size: 12px; }
.featureTwo_Wrap .innerSubTitle{ position: relative; text-align: center; margin-bottom: 30px; font-weight: 100; text-transform: uppercase; }
.featureTwo_Wrap .innerSubTitle:after,
.featureTwo_Wrap .innerSubTitle:before{ position: absolute; content: ""; background: #5376cb; width: 140px; height: 3px; bottom: 0; left: 50%; margin-left: -60px; }
.featureTwo_Wrap .innerSubTitle:after{ background: #ed1c24; margin-left: -80px; bottom: -6px; }

.featuredProd{ margin-bottom: 20px; text-align: center; }
.featuredProd h3{ padding-top: 10px; font-size: 12px; font-weight: 100; }


/* featureThree_Wrap Style  Section -----
========================================================================== */
.featureThree_Wrap{ text-align: center; background: url(../images/FeatBg_02.jpg) no-repeat center; background-size: cover; padding: 70px 0; color: #08266c; font-size: 12px; position: relative;}
.featureThree_Wrap .container{ position: relative; z-index: 9; }
.featureThree_Wrap:after{ content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; background: rgba(241, 103, 42, 0.7); }
.featureThree_Wrap .innerSubTitle{ position: relative; text-align: center; margin-bottom: 40px; font-weight: 100; text-transform: uppercase;}
.featureThree_Wrap .innerSubTitle:after,
.featureThree_Wrap .innerSubTitle:before{ position: absolute; content: ""; background: #5376cb; width: 140px; height: 3px; bottom: 0; left: 50%; margin-left: -60px; }
.featureThree_Wrap .innerSubTitle:after{ background: #ed1c24; margin-left: -80px; bottom: -6px; }

.recmProd{ margin-bottom: 30px; }
.recmProd .inner{ background: #FFF; box-shadow: 0 0 12px #222; border-radius: 10px; overflow: hidden; }
.recmProd h3{ background: #DDD; padding: 10px 12px; margin-bottom: 0; font-size: 16px; font-weight:100 }


/* featureFour_Wrap Style  Section -----
========================================================================== */
.featureFour_Wrap{ background: #ed1c24; color: #ccdbfe; font-size: 12px; }


/* Body Loading Script Section ----------
=============================================================================== */
.{ background-image: linear-gradient(45deg, rgba(252, 83, 76, 0.9), rgba(252, 83, 76, 0))}


/* contactFrm Section ----------
=============================================================================== */

.contactPageWrap{ background: url(../images/FeatBg_01.jpg) no-repeat center; background-size: cover; padding: 70px 0 0px; color: #08266c; font-size: 12px; }
.contactPageWrap h2{ line-height: 42px; margin-bottom: 0; padding-bottom: 0; color: #ed1c24; font-size: 32px; font-weight: 600; }
.contactPageWrap h4{ line-height: 30px; margin-bottom: 30px; color: #ed1c24; font-size: 16px; font-weight: 100; }
.contactPageWrap .subTxt h2{ padding: 0 0 30px; font-size: 42px; font-weight: 100 }
.contactPageWrap .subTxt{ padding:0 0 30px }
.contRow h3{ font-size: 30px; font-weight: 100 }
.contactFrm textarea,
.contactFrm input{ margin-bottom: 12px; }
.contactFrm .btn{ width: 150px; background: #F26E26; color: #fff;  }
.contactFrm .btn:hover{ width: 150px; background: #CF7602; color: #fff;  }
.right-half,
.left-half{ float: left; width: 50%; max-width: 50%; }
.full-width{ width: 100%; }
.left-half{ padding-right: 10px }
.right-half{ padding-left: 10px }
.contactBtn{ background: #F26E26; padding: 10px 30px; color: #FFF; text-transform: uppercase; border-radius: 10px; cursor: pointer; font-size: 16px; transition: all 0.3s; border: 0 }
.contactBtn:hover{ box-shadow: 0 0 20px #222; }


/* logoHideWrap -------
====================================================================================*/
.logoCol img{ max-width: 60px }
.logo{ float: left; margin-right: 7px; }
.logoCol .name{ float: left; padding-top: 10px; font-size: 30px; }
.logoCol .name img{ width: 300px; max-width: 230px;}
.logoCol .tag{ padding-top: 20px; font-size: 10px; }
.saveEn{ padding-top: 4px; font-size: 12px; color: #330574; line-height: 12px; }
.saveEn span{ font-size: 9px; color: #d0b4f9 }
.goGreen{ font-size: 12px; color: #119316; line-height: 12px; }
.goGreen em{ font-size: 8px !important; color: #ddd }
.goGreen span{ font-size: 8px; color: #5ff865 }
.hdHot{ font-size: 16px; color: #fff; text-shadow: 0 0 3px #000; font-weight: 600 }
.hdemail{ font-size: 12px; color: #ddd; }


/* logoHideWrap -------
====================================================================================*/
.ftrContactWrap{ background: #245d91; padding: 60px 0; position: relative; }
.ftrContactWrap:after{ content: ""; position: absolute; left: 0; bottom: -100%; width: 250px; height: 100%; background: url(../images/colorDrip.png) no-repeat center top; background-size: 100%; }
.ftrContactWrap .innerSubTitle{ position: relative; text-align: center; margin-bottom: 50px; font-weight: 100; color: #bbb; }
.ftrContactWrap .innerSubTitle:after,
.ftrContactWrap .innerSubTitle:before{ position: absolute; content: ""; background: #5376cb; width: 140px; height: 3px; bottom: 0; left: 50%; margin-left: -60px; }
.ftrContactWrap .innerSubTitle:after{ background: #0f2d74; margin-left: -80px; bottom: -6px; }
.ftrContactWrap input{ width: 36%; margin-right: 10px; background: transparent; border: none; border-bottom: 1px #1e50c7 solid; color: #FFF; font-size: 14px; padding: 7px 10px; }
.ftrContactWrap input:focus{ outline: none; box-shadow: 0 0 12px #1452e5; }
.ftrContactWrap .ftrContBtn{ width: 20%; background: #1e50c7; line-height: 20px; font-size: 14px; text-transform: uppercase; padding: 7px 12px; color: #FFF; }
.ftrContactWrap .ftrContBtn:hover{ background: #1452e5; box-shadow: 0 0 12px #1452e5; }
.form-inline .form-control{width: 100%}


.certificWrap{ margin:0; padding:0; }
.certificWrap img{ max-height:120px; }
.certificWrap li{list-style: none; display: inline-block; padding: 7px 7px}


/* footerWrap -------
====================================================================================*/
.footerWrap{ padding: 90px 0 30px; }
.footerWrap h3{ color: #F26E26; font-size: 18px; text-transform:uppercase; font-weight:100 }
.footerWrap p{line-height: 18px;}


/* CopyrightWrap -----
============================================================================== */
.copyRight{ background: #003560; color: #a4befa; font-size: 14px; padding: 15px 0; }
.powered{ text-align: right; }


/* prodGallRow -----
============================================================================== */
.prodGallRow .inner{ box-shadow: 0 0 3px #233; overflow: hidden; border-radius: 10px; padding-bottom: 0; transition: all 0.3s }
.prodGallRow .inner:hover{ box-shadow: 0 0 24px #233; }
.prodGallRow .inner h3{ background: #233; color: #FFF; font-size: 18px; padding: 10px 0; margin-bottom: 0 }