/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
	
font-family: 'Montserrat';

}

.container{padding-left:100px; padding-right:100px;}

a {
  color: #dac34f;
  text-decoration: none;
}

a:hover {
  color: #65c9cd;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 font-family: 'Montserrat';
 
}
h1{font-size:40px; font-weight:800;}
h2{font-size:36px; font-weight:800; font-display: swap;}
h3{font-size:20px; font-weight:800;}
h4{font-size:18px; font-weight:800;}
h5{font-size:18px; font-weight:800;}
p{font-size:16px; line-height:30px;}
h1,h2,h3{text-transform:uppercase;}
.mainheading{font-size:40px; font-weight:800; font-display: swap;}
.h2size{font-size:36px; font-weight:800; font-display: swap;}
/*--------------------------------------------------------------
# Topbar
--------------------------------------------------------------*/
.topbar{background-color: black;}
.social-icons{display:flex; list-style:none;}
.social-icons li{margin-left:20px;}



/*--------------------------------------------------------------
# Menubar
--------------------------------------------------------------*/

.logoimg{width:200px; height:auto; padding:10px;}
.contactnav{border:1px solid #cba239; border-radius:20px;}
.nav-link{color:black !important;}
.navbar-nav { margin-left: auto;} 
.dropdown-menu li{font-size:14px;}
.breadcrumb li{text-transform:capitalize;}

.dropdown:hover .dropdown-menu {
      display: block;
}


/*--------------------------------------------------------------
# Corousel
--------------------------------------------------------------*/

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 10px; /* change width */
    height: 10px; /* change height */
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
    border-radius: 100%; // /* add border-radius */
}


/*--------------------------------------------------------------
# Body
--------------------------------------------------------------*/

.productgroupimg{border-radius:20px;}
.productgroup{margin-top:50px; margin-bottom:50px;}

.topsellingproducts{background-image: url(../images/top-selling-bg.png); background-size: cover;}

.whychoose{background-image: url(../images/whychoose.jpg); background-size:cover;}
.formimage{background-image: url(../images/form-image.png); background-size:cover;}
.homeform{padding-left:50px; padding-right:75px; padding-top:50px; padding-bottom:50px;}
.whychooseinner{padding-top:250px; padding-left:100px; padding-right:100px; padding-bottom:250px;}


/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/
.footera {color:black;}
.footera:hover{color:#dac34f;}
.footerlist {list-style:none; padding:0;}
.footerlist li{padding-top:2px; padding-bottom:2px;}
footer{background-color:#f2f2f2; padding-top:50px;}
.headerimageabout{background-image: url(../images/about-bannerfinal.png); background-size:cover;}
.headerimagecontact{background-image: url(../images/contact-banner.png); background-size:cover;}
.headerimagecarrier{background-image: url(../images/carrier-banner.png); background-size:cover;}
.headerimageproduct{background-image: url(../images/about-banner.jpg); background-size:cover;}
.headerimagenews{background-image: url(../images/about-banner1.png); background-size:cover;}
.headerimagecon{padding-top:100px; padding-bottom:100px;}
.contacticon{font-size:30px; color:#ba802f;}
.contact-form{padding-left:300px; padding-right:300px;}
.carrerapeal{background-image: url(../images/carrerformbg.png); background-size:cover;}}
.carrierform{padding:100px !important;}


/* Style the list */
ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: transparent;
}

/* Display list items side by side */
ul.breadcrumb li {
  display: inline;
  font-size: 16px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: ">>\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}


/*--------------------------------------------------------------
# product
--------------------------------------------------------------*/
.productparamargin{margin-top:10px; margin-bottom:0; font-weight:600;}
.qcolor{
	text-transform: uppercase;
	background: linear-gradient(to right, #cda33d 0%, #bb822e 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font: {
		size: 20vw;
		family: $font;
		
	};
}

.qcolor{}
.productheading{text-transform:capitalize;}
.visopt{background-color:#cda33d; font-size:16px; margin-right:5px;}
.wtopt
{
	
    border-radius: 100%;
    background: linear-gradient(to right, #f5ecd6 0%, #cda33d 100%);
    border: 1px solid #bb822e;
    text-align: center;
	padding:10px;
	margin-right:10px;
	color:#000000;
	font-weight:600 !important;
}
.wtlist{display:flex; list-style:none; padding:0;}


/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}




/*--------------------------------------------------------------
# modal
--------------------------------------------------------------*/








/*--------------------------------------------------------------
# mobile
--------------------------------------------------------------*/

@media only screen and (max-width: 600px) {
  .topbar {display:none;}
  .contact-form{padding-left:0px; padding-right:0px;}
  .container{padding-left:20px; padding-right:20px;}
  h1{font-size:35px; font-weight:800;}
h2{font-size:30px; font-weight:800; font-display: swap;}
h3{font-size:24px; font-weight:800;}
h4{font-size:18px; font-weight:800;}
.homeform{padding-left:15px; padding-right:15px;}
.whychooseinner{padding-top:25px; padding-left:0px; padding-right:0px; padding-bottom:25px;}
}