/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
   * { margin: 0; padding: 0; outline: 0; }
   html {
     color: #222;
     font-size: 1em;
     line-height: 1.4;
     font-family: 'Poppins', sans-serif !important;
   }
   html, body {
    
     height:100%;
   }
   
   body{
     font-family: 'Poppins', sans-serif !important;
   }
   img{
     width : 100%
   }
   /*
    * Remove text-shadow in selection highlight:
    * https://twitter.com/miketaylr/status/12228805301
    *
    * Vendor-prefixed and regular ::selection selectors cannot be combined:
    * https://stackoverflow.com/a/16982510/7133471
    *
    * Customize the background color to match your design.
    */
   
   ::-moz-selection {
     background: #b3d4fc;
     text-shadow: none;
   }
   
   ::selection {
     background: #b3d4fc;
     text-shadow: none;
   }
   
   /*
    * A better looking default horizontal rule
    */
   
   hr {
     display: block;
     height: 1px;
     border: 0;
     border-top: 1px solid #ccc;
     margin: 1em 0;
     padding: 0;
   }
   
   /*
    * Remove the gap between audio, canvas, iframes,
    * images, videos and the bottom of their containers:
    * https://github.com/h5bp/html5-boilerplate/issues/440
    */
   
   audio,
   canvas,
   iframe,
   img,
   svg,
   video {
     vertical-align: middle;
   }
   
   /*
    * Remove default fieldset styles.
    */
   
   fieldset {
     border: 0;
     margin: 0;
     padding: 0;
   }
   
   /*
    * Allow only vertical resizing of textareas.
    */
   
   textarea {
     resize: vertical;
   }
   
   /* ==========================================================================
      Author's custom styles
      ========================================================================== */
   
   /* ==========================================================================
      Helper classes
      ========================================================================== */
   
   /*
    * Hide visually and from screen readers
    */
   
   .hidden,
   [hidden] {
     display: none !important;
   }
   
   /*
    * Hide only visually, but have it available for screen readers:
    * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
    *
    * 1. For long content, line feeds are not interpreted as spaces and small width
    *    causes content to wrap 1 word per line:
    *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
    */
   
   .sr-only {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute;
     white-space: nowrap;
     width: 1px;
     /* 1 */
   }
   
   /*
    * Extends the .sr-only class to allow the element
    * to be focusable when navigated to via the keyboard:
    * https://www.drupal.org/node/897638
    */
   
   .sr-only.focusable:active,
   .sr-only.focusable:focus {
     clip: auto;
     height: auto;
     margin: 0;
     overflow: visible;
     position: static;
     white-space: inherit;
     width: auto;
   }
   
   /*
    * Hide visually and from screen readers, but maintain layout
    */
   
   .invisible {
     visibility: hidden;
   }
   
   /*
    * Clearfix: contain floats
    *
    * For modern browsers
    * 1. The space content is one way to avoid an Opera bug when the
    *    `contenteditable` attribute is included anywhere else in the document.
    *    Otherwise it causes space to appear at the top and bottom of elements
    *    that receive the `clearfix` class.
    * 2. The use of `table` rather than `block` is only necessary if using
    *    `:before` to contain the top-margins of child elements.
    */
   
   .clearfix::before,
   .clearfix::after {
     content: " ";
     display: table;
   }
   
   .clearfix::after {
     clear: both;
   }
   
   /* ==========================================================================
      EXAMPLE Media Queries for Responsive Design.
      These examples override the primary ('mobile first') styles.
      Modify as content requires.
      ========================================================================== */
   
   @media only screen and (min-width: 35em) {
     /* Style adjustments for viewports that meet the condition */
   }
   
   @media print,
     (-webkit-min-device-pixel-ratio: 1.25),
     (min-resolution: 1.25dppx),
     (min-resolution: 120dpi) {
     /* Style adjustments for high resolution devices */
   }
   
   /* ==========================================================================
      Print styles.
      Inlined to avoid the additional HTTP request:
      https://www.phpied.com/delay-loading-your-print-css/
      ========================================================================== */
   
   @media print {
     *,
     *::before,
     *::after {
       background: #fff !important;
       color: #000 !important;
       /* Black prints faster */
       box-shadow: none !important;
       text-shadow: none !important;
     }
   
     a,
     a:visited {
       text-decoration: underline;
     }
   
     a[href]::after {
       content: " (" attr(href) ")";
     }
   
     abbr[title]::after {
       content: " (" attr(title) ")";
     }
   
     /*
      * Don't show links that are fragment identifiers,
      * or use the `javascript:` pseudo protocol
      */
     a[href^="#"]::after,
     a[href^="javascript:"]::after {
       content: "";
     }
   
     pre {
       white-space: pre-wrap !important;
     }
   
     pre,
     blockquote {
       border: 1px solid #999;
       page-break-inside: avoid;
     }
   
     /*
      * Printing Tables:
      * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
      */
     thead {
       display: table-header-group;
     }
   
     tr,
     img {
       page-break-inside: avoid;
     }
   
     p,
     h2,
     h3 {
       orphans: 3;
       widows: 3;
     }
   
     h2,
     h3 {
       page-break-after: avoid;
     }
   }
   
   /* Final modification */
   
   .custom-navbars{
     width: 100%;
     border-bottom: 1px solid rgb(128 128 128 / 24%);
     background-color: #FCFDFF;
     position: sticky;
     top: 0;
     left: 0;
     z-index: 99;
   }
   #brand_item_img{
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
     margin-left: 80px;
   }
   
   .nav-item a{
     font-size: 14px;
   }
   .custom-menu{
     color:#000000;
     font-size: 14px;
     font-weight: 400;
   }
   input[type="button"] {
     width: 120px;
     height: 60px;
     margin-left: 35px;
     display: block;
     background-color: gray;
     color: white;
     border: none;
     outline: none;
   }
   .banner{
     margin-top: 50px;
     border-bottom: 1px solid rgb(128 128 128 / 22%);
     padding-bottom: 12px;
   }
   .sp_title{
     color:#155CC7;
     font-size: 14px;
     font-weight: 400;
     margin-top:18px;
   }
   .main_title{
     font-size: 22px;
     font-weight: 800;
     color : #000000
   }
   .main_desc{
     font-size: 14px;
     font-weight: 400;
     color: #000;
     margin-top: 10px;
   }
   .btn_main{
     margin-top: 15px;
   }
   .btn_main button{
     font-size: 14px;
   }
   .sub_menus{
     padding:15px;
     background-color: #D4DEEF;
   }
   .sub_menu_list{
     display: flex;
   }
   .sub_title_1{
     font-size: 14.5px;
     color: #607698;
       margin-top: 4px;
       font-weight: 500;
   }
   .sub_title_2{
     font-size: 13px;
     font-weight: 400;
     color: #607698;
   }
   .activemain a{
     font-weight: 500;
     color : #155CC7
   }
   .brand_title{
     font-size: 18px;
     font-weight: 700;
     color:#000;
     margin-top: 60px;
     margin-left: 15px;
   }
   ul li{
     float: left;
     list-style-type: none;
   }
   .brand_ul{
     overflow-x: auto;
     overflow-y: hidden;
     margin-top: 10px;
     margin-left: 0px;
     padding-left: 0px;
     background-color: white;
     position: sticky;
    top: 42px;
    z-index:99;
   }
   
   .brand_ul li{
     margin-right: 15px;
     cursor: pointer;
     margin-top:8px;
     
    
   }
   .brand_ul li a{
     padding-left: 0px;
     padding-right: 0px;
     color: #000;
     font-size: 14px;
     font-weight: 400;
   }
   .brand_ul li a.active{
   color: #155CC7;
   font-weight: 600 ;
   border-bottom: 2px solid #155CC7
   }
   .brand_ul li .active{
     color: #155CC7;
     font-weight: 600 ;
     border-bottom: 2px solid #155CC7
     }
   .img_brand_hl img{
     width : 100%
   }
   .img_brand_hl{
     box-shadow: 1px 3px 5px rgb(59 25 25 / 39%);
       padding: 5px;
   }
   .brand_rgt_title{
     font-size: 18px;
     font-weight: 600;
     color:#000
   }
   .brand_details{
     margin-top:60px;
   }
   .brand_right_info{
     margin-top:10px;
     margin-left:30px;
     width: 80%;
   }
   .brand_rgt_desc{
     margin-top:10px;
     font-size: 14px;
     font-weight: 400;
     color:#000
   }
   .know_more{
     font-size: 14px;
     margin-top:20px;
   }
   .customer_prefer{
     margin-top: 70px;
     padding-top:30px;
     padding-bottom:30px;
     background-color: #DAE9FF;
   }
   .customer_prefer_title{
     text-align: center;
       font-weight: 700;
       font-size: 18px;
       margin-top: 10px;
   }
   .customer_sub_desc{
     font-size: 14px;
       text-align: center;
       font-weight: 400;
       margin-top: 5px;
   }
   .list_customer{
     display: flex;
     font-size: 14px;
     font-weight: 400;
   }
   .dot_img{
     margin-right: 10px;
   }
   .about_us_title{
     font-size: 22px;
     font-weight: 700;
     color: #000;
   }
   .about_us{
     margin-top:50px;
   }
   .about_us_desc{
     margin-top:12px;
     font-weight: 400;
     font-size: 14px;
   }
   .awardss{
     font-size: 16px;
     margin-top:0px;
     font-weight: 600;
   
   }
   .awatds_img{
     display: flex;
     margin-top:10px
   }
   .awatds_img div{
   margin-right:20px
   }
   .content_form{
     margin-top:40px;
   
   }
   .looking_for{
     font-weight: 400;
     font-size: 18px;
     color:#000;
   }
   .req_quote{
     margin-top: 8px;
     font-size: 20px;
     font-weight: 600;
     color:#0C9243;
   }
   .form_desc{
     font-size: 14px;
     font-weight: 400;
     margin-top:5px;
     width : 70%
   }
   .form_boxes{
     padding-top:30px;
     padding-bottom: 30px;
     background-image: url(../img/form_bg.svg);
     background-position: 100%;
     background-color: #DAE9FF;
     margin-top:60px;
   }
   .form_box_in{
     background-color: #CCDAFF;
     padding:10px;
   }
   .custom_txtbx{
     margin-bottom:18px;
   }
   .table th{
   font-size: 14px;
   font-weight: 500;
   }
   .table_title{
     font-size: 15px;
     font-weight: 600;
     margin-bottom: 15px;
   }
   table td{
     font-size: 14px;
   }
   .bg_model{
     width: 100%;
     top: 0;
     position: absolute;
     background-color: rgb(0 0 0 / 55%);
     z-index: 99999;
     height: 100%;
     text-align: center;
     padding-top: 10%;
     color: white;
   }
   
   .custom_textarea{
     border:0px solid grey;
     height:140px;
     border-radius: 3px;
     color : grey;
   }
   .custom_txtbx.last{
   margin-bottom:0px;
   }
   .customer_slides_title{
     font-size: 21px;
     font-weight: 700;
     text-align:center;
     color :#000;
   }
   .customer_slides{
     margin-top:60px;
   }
   .items {
     width: 90%;
     margin: 0px auto;
     margin-top: 100px
   }
   
   .slick-slide {
     margin: 10px
   }
   
   .slick-slide img {
     width: 100%;
     border: 0px solid #fff
   }
   .card-body-tit{
     font-size: 14px;
     font-weight: 600;
     text-align: center;
   }
   .card-body-sub{
     font-size: 13px;
     font-weight: 400;
     margin-top:4px;
     text-align: center;
   }
   .card img{
     text-align: center;
     margin:0px auto;
     margin-top:30px
   }
   .card-text{
     text-align: center;
     font-size: 13px;
     font-weight: 400;
     margin-top:25px;
   }
   .card{
     width : 100% !important;
   }
   .allrights{
     padding:8px;
     text-align: center;
     font-size: 10px;
     color:grey;
     background-color: rgb(128 128 128 / 18%);
   }
   .dot_img img{
     width : 18px;
   }
   .slick-next:before, .slick-prev:before {
     font-size: 20px;
     line-height: 1;
     opacity: .75;
     color: #000;
   }
   
   .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
     border: none;
     color: #155cc7;
     background-color: none !important; 
     border-color: #dee2e6 #dee2e6 #fff;
     border-bottom: 2px solid #155cc7;
   }
   .nav-link {
     display: block;
     padding: .5rem 1rem;
     color: #141515;
   }
   
   .img_tag{
     margin-bottom: 30px;
     text-align: center;
     margin-top:10px;
     font-size: 14px;
     font-weight: 500;
   }
   .know_more center{
     text-align: center;
   }
   .know_more_po{
     width:100%;
     text-align: center;
   }
   .sub_title_sub{
     text-align: center;
     font-size: 14px;
     font-weight: 500;
   }
   .brand_ul::-webkit-scrollbar {
     display: none;
   }
   .brand_ul li .nav-link{
     font-size: 14.5px;
     padding: 0px !important;
    
     padding-bottom: 12px !important;
     border-top:none !important;
     border-left: none !important;
     border-right: none !important;
     margin-right: 14px !important;
   }
   .nav-link:hover {
     border-top:none !important;
     border-left: none !important;
     border-right: none !important;
    
     isolation: isolate;
     background-color: none !important;
   }
   /* .or_or{
     width : 100%;
     text-align: center;
     font-size: 13px;
   } */
   .or_or{
     width : 100%;
     display: flex;
     justify-content: center;
     z-index: 2 !important;
   }
   .horizontal_or{
     z-index: 2 !important;
     margin-top: -27px;
     text-align: center !important;
     width : 15% !important;
     font-size: 13px;
     background: #CCDAFF;
   }
   .mailsend{
     width: 100%;
     text-align: center;
   }
   #handlesubmit{
     width:200px;
     margin:0px auto;
     text-align: center;
   }
   .subb{
     width : 100%;
     text-align: center;
   }
   .btn-primary {
     margin-top: 10px;
     color: #fff;
     background-color: #0d6efd;
     border-color: #0d6efd;
     width: 40%;
   }
   #map-img img{
     height: 426px !important;
     opacity: 0.8;
   }
   #logo img{
     margin-top:30px ;
   }
   #spices-table{
     margin-top: 60px;
     width: 100%;
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
   }
   #table-container{
     width: 98%;
   }
   #herbs-table{
     margin-top: 0px;
     width: 100%;
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
   }
   .table {
     --bs-table-bg: transparent;
     --bs-table-accent-bg: transparent;
     --bs-table-striped-color: #212529;
     --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
     --bs-table-active-color: #212529;
     --bs-table-active-bg: rgba(0, 0, 0, 0.1);
     --bs-table-hover-color: #212529;
     --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
     width: 100%;
     margin-bottom: 1rem;
     color: #212529;
     vertical-align: top;
     border-color: #dcffd5;
   }
   .fab-content{
     font-size: 14px;
     margin-top: -40px;
   }
   
   @media only screen and (max-width: 500px) {
     .content_form {
       text-align: center;
       margin-top: 40px;
   }
     .brand_title {
       font-size: 16px;
       font-weight: 700;
       color: #000;
       margin-top: 30px;
   }
     .spiral_title_fab .img_brand_hl{
       width : unset;
     }
     .customer_slides {
       width: 90%;
       margin-top: 60px !important;
       margin: 0px auto;
   }
     .banner {
       text-align: center;
       margin-bottom: 20px ;
   
     }
     .img-res{
       margin-top:40px !important
     }
     .main_title {
       font-size: 17px;
     }
     .main_desc {
       font-size: 12px;
     }
     .btn_main {
       margin-top: 15px;
       margin-bottom:25px;
   }
   .sub_menu_list{
     margin-bottom:14px;
     margin-top:14px
   }
   .brand_ul{
     width: 100%;
       display: inline-flex;
       white-space: nowrap;
       flex-wrap: nowrap;
   }
   .brand_details {
     margin-top: 25px;
   }
   .img_brand_hl {
     text-align: center;
     width: 200px;
     box-shadow: 1px 3px 5px rgb(59 25 25 / 39%);
     padding: 5px;
     margin: 0px auto;
     margin-bottom: 10px;
   }
   .brand_right_info {
     text-align: center;
     margin-top: 10px;
     margin-left: 0px;
     width: 100%;
   }
   .brand_rgt_title {
     font-size: 16px;
   }
   .brand_rgt_desc {
     margin-top: 10px;
     font-size: 12px;
   }
   .customer_prefer_title {
   
     font-size: 15px;
   }
   .customer_sub_desc {
     font-size: 12px;
   }
   .list_customer {
     display: flex;
     font-size: 13px;
   }
   .about_us_title {
     font-size: 18px;
   }
   .about_us_desc {
     margin-top: 12px;
     font-weight: 400;
     font-size: 12.5px;
   }
   awardss {
     font-size: 16px;
     margin-top: 30px;
     font-weight: 600;
   }
   .form_boxes {
     padding-top: 0px;
     margin-top:40px;
   }
   .form_desc {
     font-size: 12px;
     font-weight: 400;
     margin-top: 5px;
     width: 100%;
     margin-bottom: 40px;
   }
   .customer_slides_title {
     font-size: 16px;
   }
   
   }
   
   @media only screen and (max-width: 420px) {
     #brand_item_img{
       display: flex !important;
       justify-content: center !important;
       align-items: center !important;
       margin-left: -10px;
     }
     .custom_txtbx {
       width: 100%;
       margin-bottom: 18px;
   }
   #full_form{
     margin-bottom: 20px;
   }
   .or_or{
     width : 100%;
     display: flex;
     justify-content: center;
     z-index: 2 !important;
   }
   .horizontal_or{
     z-index: 2 !important;
     margin-top: -27px;
     text-align: center !important;
     width : 15% !important;
     font-size: 13px;
     background: #CCDAFF;
   }
   .brand_ul li .nav-link{
     font-size: 14.5px;
     padding: 0px !important;
     padding-bottom: 12px !important;
     border-top:none !important;
     border-left: none !important;
     border-right: none !important;
   }
   #map-img img{
     height: 300px !important;
   }
   #logo img{
     margin-top: 0px ;
   }
   .img-res{
     margin-top:0px !important
   }
   .brand_title {
     font-size: 18px;
     font-weight: 700;
     color: #000;
     margin-top: 30px;
     margin-bottom: -18px;
     margin-left: 0px;
   }
   #spices-table{
     margin-left: 0px;
     margin-top: 60px;
     width: 100%;
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
   }
   #herbs-table{
     margin-left: 0px;
     margin-top: 0px;
     width: 100%;
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
   }
   #table-container{
     width: 100%;
     padding: 0;
   }
   .fab-content{
     font-size: 14px;
     margin-top: -40px;
   }
     }
   
     /* @media only screen and (max-width: 380px) {
       .or_or{
         width : 100%;
         display: flex;
         justify-content: center;
         z-index: 2 !important;
       }
       .horizontal_or{
         z-index: 2 !important;
         margin-top: -27px;
         text-align: center !important;
         width : 15% !important;
         font-size: 13px;
         background: #CCDAFF;
       }
     } */

     .mail_resbox{
      text-align: center;
      width: 310px;
      margin: 13% auto;   
      border: 1px solid grey;
      padding: 30px;
  }