@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;469;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;400;600&display=swap');

html{
	scroll-behavior: smooth;
}

body{
	
	font-size: 12px;
	font-family: 'Oswald', sans-serif;
	color: #505962; 
	overflow-x: hidden;
}

/* Topbar*/

.container{
	font-family: 'Oswald', sans-serif;
	width: 940px;
    padding-right: 15px;
    padding-left: 15px;
    margin: auto;
}



.navbar {
		font-family: 'Oswald', sans-serif;
		 background: #0C0F2C;
		  text-transform: uppercase;
		  font-size: 83%;
		  letter-spacing: .1rem;
 }

 .navbar-brand img{
 		height: 3rem;
 }

.navbar-brand img:hover{
	transform: scale(1.1);
	transition: 1s;
}

.navbar-nav li a{
	margin-left: 20px;
	font-weight: 500;
	padding-right: .8rem;
	color: #fff;
	padding-top: .8rem;
}

.navbar .navbar-nav .nav-link :hover { 
	color: #fbc531;
	font-weight: 500;								
}

.dropdown-menu.show {
    background: none;
    border: none;
}

.navbar .navbar-nav .active > .nav-link { color: #fbc531; }

.navbar .navbar-nav .active > .nav-link { color: #fbc531; }



/*.dropdown.show {
    margin-bottom: -15px;
}

.dropdown-menu.show {
    padding: -0px;
    border: 1px solid;
    border-radius: 5px;
}

.dropdown.show:hover a {
    color: #fbc531;
}

.dropdown-menu.show a {
    background:  #0C0F2C;
    color: white;
    font-size: 14px;
}*/

/*scroll top button*
#toTopBtn {
    position: fixed;
    bottom: 26px;
    right: 39px;
    z-index: 98;
    padding: 21px;
}

.js .cd-top--fade-out {
    opacity: .5
}

.js .cd-top--is-visible {
    visibility: visible;
    opacity: 1
}

.js .cd-top {
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s, visibility .3s, background-color .3s
}

.cd-top {
    position: fixed;
    bottom: 20px;
    bottom: var(--cd-back-to-top-margin);
    right: 20px;
    right: var(--cd-back-to-top-margin);
    display: inline-block;
    height: 40px;
    height: var(--cd-back-to-top-size);
    width: 40px;
    width: var(--cd-back-to-top-size);
    background: url(https://res.cloudinary.com/dxfq3iotg/image/upload/v1571057658/cd-top-arrow.svg) no-repeat center 50%;
    }
    */
    #back2Top {
    width: 36px;
    line-height: 36px;
    overflow: hidden;
    z-index: 999;
    border-radius: 42px;
    display: none;
    cursor: pointer;
    transform: rotate(270deg);
    position: fixed;
    bottom: 50px;
    right: 23px;
    background-color: #ffffff21;
    color: #ff5200;
    text-align: center;
    font-size: 23px;
    text-decoration: none;
}
#back2Top:hover {
    background-color: #DDF;
    color: #000;
}

/* slider */
.carousel-item {
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100vh;
}

.display-5{
	font-weight: 500 !important ; margin: auto; font-family: 'Oswald', sans-serif;
}

.display-5 p{
	margin-top: 0; font-family: 'Oswald', sans-serif; 
    font-size: 20px; font-weight: 200;
    
   
}



@media only screen and (max-width: 360px){
    .display-5{
        font-size: 15px;
    }

    .display-5 p{
        font-size: 9px;
        margin-bottom: 0px;
    }
}


/* Our Mission*/
#Our-goal{
	 background: white;
	padding: 70px 0;
}

.boxWrapper {overflow: hidden;}





.mission-pic {
    padding-bottom: 30px;
    text-align: center;
}

.mission-pic img{
    width: 100%;
    text-align: center;  
}


@media only screen and (max-width: 360px){

    .mission-pic{
        width: 100% !important;
    }

    
}
/*closed*/

.firstbox {
    width: 256px;
    background: #f5f6f6;
    padding: 17px;
    float: left;
    margin-right: 28px;
    transition: 0.8s;
}

.mTitle {
    text-align: center;
    text-transform: uppercase;
    width: 170px;
    margin: auto;
}

.mTitle h2 {
    font-size: 20px;
    margin: 17px 0px;
    letter-spacing: 2px;
}

.mIcon {
    color: :#ff5200;
    font-size: 45px;
    text-align: center;
    color: #ff5200;
}

.paragraph {
    font-size: 13px;
    text-align: center;
    margin: 17px 0;
    text-transform: uppercase;
}

.firstbox:hover{
	background: #fb5200;
	color: white;
}

.firstbox:hover i{
	color: white;
	}

@media only screen and (max-width: 360px){
	/*for moblie phones*/
	.firstbox, .mTitle, .mTitle h2, .mIcon, .paragraph{
		width: 100%;
	}	
}


/*Company History */

.aboutWrapper{
	overflow: hidden;
}

.WriteIcon {
    width: 1110px;
       
}

.WriteIcon i {
    font-size: 54px;
    color: #af9b93;
}

.Heading {
    padding-top: 30px;
    width: fit-content;
}

.Heading h1 {
    color: orangered;
    font-weight: 500;
    font-size: 70px;
}


.AboutParagraph {
    width: 650px;
    max-width: fit-content;
    text-align: justify;
}

.AboutParagraph p {
    color: black;
    font-size: 21px;
    font-weight: 300;
}

.Icon {
    color: orangered;
    font-size: 26px;
    width: fit-content;
    float: left;
}

.company-setup {
    color: black;
    font-size: 21px;
    padding: 5px;
}

.company-setup p {
    margin: 0px;
    margin-left: 35px;
    color: black;
}


.profile-img{
	padding-top: 50px;
}
.profile-img img{
	padding-left: 1.8rem;
	float: right;
	width: 40%;
    height: 292px;
	border-radius: 4px;
	
}

.text-CSL{
	font-family: 'Oswald', sans-serif;
	color: black;
	font-size: 18px;
	font-weight: 300;
	padding: 50px  0 0;
    text-align: center;
}


@media only screen and (width: 360px){
    .csl{
        font-size: 17px !important;
    }
}

.Machineries {
    padding: 72px 0 0;
}

.Machineries h3 {
    color: black;
    font-size: 35px;
    width: 901px;
}

.cutting-section {
    width: 717px;
    float: left;
    padding: 30px 0 0;
    color: black;
}

.cutting-section h4 {
    padding: 0px 0px;
}

.cutting-section p {
    margin: 0;
    font-size: 20px;
    font-weight: 300;
}

.finishing-section {
    float: left;
    color: black;
    padding: 30px 0 0;
}

.finishing-section h4 {
    padding: 0px 0px;
}

.finishing-section p{
	font-size: 20px;
    font-weight: 300;
}

.Sweing-section {
    color: black;
    width: 717px;
    float: left;
    padding: 56px 0 0;
}

.Sweing-section h4 {
    padding: 0px 0px;
}

.Sweing-section p {
    margin: 0px;
    font-size: 20px;
    font-weight: 300;
}

.utility-Section {
    float: left;
    color: black;
    padding: 30px 0;
        width: 393px;
}

.utility-Section h4 {
    padding: 0px 0px;
}

.utility-Section p {
    margin: 0px;
    font-size: 20px;
    font-weight: 300;
}



/*factory calculation part*/
#statistic{
	background:white;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	color: black;
	padding: 70px 0;
}

.iconWrapper {
    overflow: hidden;
}

.headline {
    text-align: center;
    font-size: 45px;
    color: black;
   
}

.icons {
    width: 277px;
    color: black;
    text-align: center;
    float: left;
    padding: 25px 0;
}

.icons h4 {
    font-size: 29px;  font-weight: 100;  margin: 20px 0; text-transform: none;}

.icons h5 {
    font-size: 46px; margin: 25px 0;}

.icons h6 {font-size: 27px;font-weight: 100;}

@media only screen and (max-width: 360px){
	/*for moblie phones*/
	.headline, .icons, .icons h4, .icons h5, .icons h6{
		width: 100%;
	}
}

/* what we can do & how*/
#quality{
	background: #d0ece71f;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	padding: 70px 0;
}

.caption-aim h3 {
    width: fit-content;
    padding-top: 30px;
}

.aim-para p {
    font-size: 21px;
    font-weight: 300;
    text-align: left;
    padding-left: 129px;
    margin: auto;
    text-align: justify;
}

@media only screen and (width:360px){
    .aim-pera p{width: 100% !important; 
                height: 218px !important;
    }
}




/*how to do product *
.hislide{
	position: relative;
	width: 754px;
	height: 292px;
	border-radius:50px; 
	margin: 115px auto 0px;

}

.hislide .hi-next,
.hislide .hi-prev{
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border-radius: 50px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	background-color: powderblue;
	color: black;
	transition: all 0.7s;
	font-size: 20px;
	font-weight: bold;
}

.hislide .hi-next: hover,
.hislide .hi-prev: hover{
	opacity: 1;
	background-color: white;
}

.hislide .hi-prev{
	left: -70px;
}

.hislide .hi-prev::before{
	content: url(./button/prev.png);
    background: transparent;
	

}


.hislide .hi-next{
	right: -70px;
}

.hislide .hi-next::before{
	content: url(./button/next.png);
	background: transparent;
}

.hislide > ul{
	list-style: none;
	position: relative;
	width: 754px;
	height: 292px;
	margin: 0px;
	padding: 0;
}

.hislide > ul > li{
	overflow: hidden;
	position: absolute;
	z-index: 0;
	left: 377px;
	top: 147px;
	width: 0;
	height: 0;
	margin: 0;
	border: 2px solid #ff5200;
    border-radius: 2px;
	background-color: #333;
	cursor: pointer;
}

.hislide > ul > li > img{
	width: 100%;
	height: 100%;
	background-position: center;
}*/

/* being responsibe*/

section#responsible {
    padding: 70px 0;
    background: #dee7f152;
}

.responsibleWrapper {
    overflow: hidden;
}

.heading-respons {
    padding: 0 0 20px;
}

.rspnsib-pera {
    text-align: center;
}

.rspnsib-pera p {
    font-size: 21px;
    font-weight: 300;
    padding-bottom: 30px;
}

.responsib-img {
    text-align: center;
    }

/*compliant*/
section#complaint {
    padding: 70px 0;
    background: white;
}

.complaintWrapper {
    overflow: hidden;
}

.heading-complaint {
    padding-bottom: 20px;
}

.Compliant-pera {
    font-size: 21px;
    font-weight: 300;
}

.compliant-pic {
    float: left;
    width: fit-content;
}

.compliant-image {
    float: left;
    padding: 20px 28px 0;
    padding-right: 18px;
}


/*product*/
#product{
	padding: 70px 0px;
	background-image: linear-gradient(#0000002e, #000000e0), url(./Products/Machine.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center ;

}

.productWrapper{
	overflow: hidden;
}


.product-text {
   
    padding-bottom: 20px;
    color: snow;
   	font-size: 20px;
   	font-weight: 300;
    text-align: justify;
}

/* 3D flip box */
.flip-box {
  background-color: transparent;
  width: 250px;
  height: 300px;
  border: 1px solid #f1f1f1;
  border-radius: 4px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  float: left;
  margin-bottom: 32px;
  margin-right: 32px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-box-back {
  background-color: #1e90ff40;
  color: white;
  transform: rotateY(180deg);
}

.flip-box-back h2{
	padding: 50px 0px  0px;
	padding-bottom: 20px;
}

.flip-box-back{
	padding: 0px 20px;
}

/*focus on strength*/
.focus-content {
    padding: 70px 0;
}

.strenghtWrapper {
    overflow: hidden;
}

.heading {
    padding-bottom: 20px;
}

.Strenght-para {
    font-size: 21px;
 }   
.Strenght-para p {
    font-weight: 300;
}

.strenght-img img{
    width: 100%;
    text-align: center;
}



/*Clien Part*/
#clientsection {
    padding: 70px 0px;
    background: #d6dfe647;
}
.clientWrapper{
	overflow: hidden;
}

h3.heading{
	font-size: 1.9rem;
	font-weight: 700;
	text-transform: uppercase;
	padding-bottom: 0.9rem;
	letter-spacing: 2px;
}

.heading-underline{
	width: 6rem;
	height: 0.2rem;
	background-color: #ff5200;
	margin: 0px auto 2rem;
}

@media only screen and (width: 360px){
    h3.heading{
        font-size: 1.4rem;
    }
    
}

.img-area img{
	width: 210px;
	height: 130px;
	border: 2px solid #ff5200;
	border-radius: 4px;
	padding: 10px 10px;
}


/*.owl-dot{
	display: inline-block;
	height: 15px !important;
	width: 15px !important;
	background-color: #000 !important;
	border-radius: 50%;
	margin: 0 5px;

}

.owl-dots{
	text-align: center;
}

.owl-dot.active{
	background-color:  #ff5200 !important;
}*/

/*contact section*/
#contact-section{
	padding: 70px 0px;
	background:linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)), url(./IMG/Picture14.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	
}

.contact-wrapper{
	overflow: hidden;
}

.maps {
    width: 401px;
    margin-right: none;
    margin-right: 0;
    float: left;
}

.Address {
    width: fit-content;
    padding-bottom: 98px;

}

.Address h3 {
    color: white;
    padding: 20px 0 ;
    width: 100%;
}


.Address p {
    color: white;
    font-size: 16px;
    font-weight: 300;
    
}

/* contact */
.contact-title {
    width: 50%;
    float: right;
    text-align: center;
    
    /* display: block; */
    /* border-radius: 10px; */
    /* border: 1px solid #ff5200; */
}

.contact-title h2 {
    font-family: 'Oswald';
    color: white;
    padding: 11px 0px 0px;
    font-size: 26px;
}

form.contact-form {
    
    width: 100%;
    float: right;
    padding-top: 20px;
}

.text{
    float: right;
    font-family: 'Oswald', sans-serif;
    width: 100%;
}

.text .form-control{

    background: transparent;
    color: #fff;
    border:none;
    outline: none;
    border-bottom: 2px solid gray;
    margin-bottom: 10px;
}



.text .submit{
    background: #ff5722;
    border-color: transparent;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    height: 50px;
    margin-top: 20px;
    
}

.text .submit:hover{
    background-color: #f44336;
    cursor: pointer;
}


/* Start footer */

.footer {
	
	background: #0C0F2C;
	color: #d3d3d3;
	height: 300px;
	position: relative;
	text-align: center;
}

.footer-content{
	border: 1px ;
	height: 250px;
	display: flex;
}

.socials {
	width: 1000%;
	text-align: center;

}
.socials a{
	border: 1px solid gray;
	width: 45px;
	height: 41px;
	padding-top: 5px;
	margin-top: 90px;
	display: inline-block;
	font-size: 1.3em;
	border-radius: 5px;
	transition: all .4s;
}

.socials a:hover{
	border: 1px solid white;
	color: white;
	transition: all .4s;
}

.footer-bottom{
	color: #CBC6B9;
	height: 50px;
	text-align: center;
	padding-top: 0px;
    font-weight: 300;
    letter-spacing: 1px;

}
/* End Footer */