@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

.clrfix{ clear:both}

* {
    box-sizing: border-box;
}

html,
body,
h1,
h3,
h4,
h6,
label,
span,
ul,
li,
ol,
p,
a {
    margin: 0;
    padding: 0;
}

body {
    font-family:'Inter', sans-serif;
    font-size: 16px;  background: url("https://img.tradeindia.com/new_website1/tradeshowslandingpage/coir-products/banner.png") #FBF2E9 center top  no-repeat ; 
}

ul,
li,
ol {
    list-style: none;
}

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

img {
    max-width: 100%;
}

.d-flex {
    display: flex; 
}

.flex-wrap {
    flex-wrap: wrap;
}

.align-items-center {
    align-items: center;
}

.justify-content-between {
    justify-content: space-between;
}


h1 {text-align: center; font-size: 36px; font-weight: 700; color: #000000}
h2 {text-align: center; font-size: 24px; font-weight: 600; color:#723B00 }
.container {
    max-width: 1170px;
    padding:0px 0px 0 0px;
    margin: 0 auto;
    width: 100%; 
}




.img{
  
    padding:0px 0px 0 0px;  border-radius: 8px; margin: 10px 0 0 5px; border: solid 1px #5C5C5C

}




/* Home Page CSS starts Here */

header {
    display: block;
    width: 100%;
   
    padding: 0px 0;
	z-index: -99;
}





.logo {
    float: left;
    width: auto; 
	padding:0px 20px 10px 0px; width:100%; display: block
}

.logo a {
    display: block;
    width:18%;
}

.logo a img {
    display: inline-block;
}




/* Banner CSS starts here */
.banner {
    display: block;
    width: 100%; padding:30px 0 70px 0;  color: #FFFFFF;  float: left}


.banner-txt {width: 50%; float: left;}

.banner-main  {width: 45%; float: right; filter: drop-shadow(-2px -3px 6px #c4c4c3);}


.txt1 {font-size:56px; line-height:60px; display: block ;  text-align: left;  padding:20px 0 15px 0; color:#000000; font-weight: 900
   
}
.txt2 {font-size: 36px;  color: #000000;display: block ; font-weight: 900}
.txt3 {font-size: 20px;  color: #723B00; font-weight: 600; display: block ; padding:0px 0 0px 0px }
.txt4 {font-size: 16px;  color: #000000; display: block ;  padding:5px 0 10px 0px; line-height: 28px  }


.txt {font-size: 44px; line-height:52px; display: block; letter-spacing: 1px; text-align: left; color: #000000}


.but { float: left}
.but ul{margin:0px; padding: 0px; width: 100%; }
.but li{width:100%; background: #0028FF; display: block; list-style:none; margin:10px 0 0 0px; padding:20px 25px; border-radius: 18px;
border-top-right-radius: 0;  float: left; text-align: center}
.but li a {font-size:22px; color:#fff; list-style:none; margin:0px; padding: 0px; text-align: center; font-weight: 600}
.but li:hover {background: #030303}
.banner img {
    display: block;
    width: 100%;
}

/* Banner CSS ends here */












/* Info Section CSS starts here */
.info {
    display: block;
    width: 100%;
    padding:80px 0 50px 0;
     float: left;
}

.info .cards {
    display: flex;
    width: 100%;
    justify-content: space-between; flex-wrap: wrap; 
}

.info .cards .card {
    width: 25%;
    text-align: center;
   
    padding: 15px 0px;  font-size: 18px; font-weight: 600
}

.info .cards .card .img-section {
    display: block;
    width: 100%;
    text-align: center;
}

.info .cards .card .img-section img {
    display: inline-block;
}

.info .cards .card label {
    display: block;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0 15px 0; color: #1897f8; font-weight:200
}

.info .cards .card p {
    display: block;
    width: 100%;
    color: #434343;	
    line-height: 27px;
    margin: 0 0 20px 0; font-weight:100
}

.info .cards .card a {
    display: inline-block;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: bold;
    color: #000;
}

.info .cards .card a:hover {
    text-decoration: underline;
}

/* Info Section CSS Ends here */










.container1 {
    max-width: 100%;
    padding:0px 0px 0 0px;
    margin: 0 auto;
    width: 100%; 
}















.footer {
    display: block;
    width: 100%;
    background: #ffffff;
    padding: 25px 0 25px 0;
}

.footer .footer-logo {
    display: block;
    width: 50%;
    text-align: left;
    margin: 0 0 20px 0; color: #6D6D6D;  float: left
}
.footer .footer-logo span{
    display: block; padding: 10px 0 0 0

}


 .footer .social  {
    display: block; float: right;
    width: 30%;
 padding: 4% 0 0 0; font-size: 18px; text-align: right
}

 .footer .social span {
    display: block; padding: 3% 0 0 0; float: left 
}

.footer .social i {
  font-size: 24px; padding: 0 10px
}
.footer .social i:hover {
color:#FF0004
}



.footer-end {background: #502D1D; padding:20px; text-align: center; color: #FFFFFF}

.footer-end a{color: #FFFFFF}

.tradeBtn {
  border-radius: 8px;
  background: #0028FF;

  color: rgb(255, 255, 255);
  font-weight: 600;
  padding: 15px 24px;
	text-decoration: none; float: right }

.tradeBtn a{
  color: #FFFFFF }




/* Schedule Meeting CSS starts Here */
.schedule-meeting-section {
    padding:60px 40px; background: #0028FF; margin:0 auto;  display:flex; width: 1150px; border-top-right-radius: 127px;
border-bottom-left-radius: 127px; margin-bottom: 50px; 
}

.form-banner {float: left; padding: 0px; margin: 0px; width: 50%}
.form-banner img { padding: 3%; margin: 0px; display: block }

.form-submit {width: 100%; float: left; padding:7% 10%; margin: 0px; background: #FFFFFF; border-radius: 8px; }

* {box-sizing: border-box;}

h4 {color: #000; padding:0px 0 0 0; font-size: 34px}

.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%; 

}

.icon {
  padding: 12px;
  background:#FFBE00;
  color: #000000;
  min-width: 50px;
  text-align: center; margin:20px 0 0  0px; float: left; font-size: 24px}

.input-field {
  width: 100%; 
  padding: 16px;
  outline: none;
	border: none;
margin:20px 0 0 0; float: left; font-size: 16px; color: #272727;

  padding: 16px;
  outline: none;
	border: none;
	margin:20px 0 0 0; float: left;  background: #fff; border: solid 1px #C8C8C8; border-radius: 4px
}

input[type=text]:focus {
  border: 1px solid #502D1D;    transition:
      border-color 0s ease-out 0.5s, // 
}

/* Set a style for the submit button */
.btn {
  background-color:#502D1D;
  color: white;
  padding: 20px 20px;
  border: none;
  cursor: pointer;
  width: 75%;
  opacity: 0.9;
	margin:0 auto; display: block; font-weight: bold; font-size: 20px; border-radius: 4px;
}

.btn:hover {
  opacity: 1;
}





/* Schedule Meeting CSS ends Here */

/* Responsive CSS starts here */
@media screen and (max-width: 1024px) {
    .footer .footer-content .links-section {
        width: 22%;
    }
}

/* responsive css for max-width: 768px */
@media screen and (max-width: 768px) {
    .footer .footer-content .date-time {
        width: 100%;
        margin: 0 0 0px 0;
    }

    .footer .footer-content {
        justify-content: flex-start;
    }

    .footer .footer-content .links-section {
        width: 50%;
    }






    .info {
        padding:20px 0 50px 0;
    }

    .info .cards .card {
        padding: 25px 5px;
    }

    .info .cards .card p {
        text-align: justify;
    }



}

/* responsive css for max-width: 480px */
@media screen and (max-width: 480px) {
body {
    font-family:'Inter', sans-serif;
    font-size: 16px; }

	h1 {display: none}
	.punch { font-size: 34px; line-height: 38px }
	
	.form-submit {width: 100%; margin: 0px;}
	.form-banner {display: none}
	
	.input-field {
  width: 100%;

}
	
	.but {display: none}
	
	header {
   
   
    padding: 0px 0;
	
}
	.banner-txt {width: 100%; }
		header .logo { width: 100%; text-align: center; float: none; margin: 0 auto;
}

.banner-main {width:100%}
	


.banner {
    display: block; width: 100%; padding:0px 0 30px 0;  color: #0000;  float: left}
	.txt2 {font-size: 18px}
	.txt3 {font-size: 20px; line-height: 28px; padding: 10px 0 20px 0}
	.txt4 {font-size: 16px; line-height: 24px; padding: 0px;}
	
	
	

   .info {
        padding:0 0 50px 0;
    }
	
	


	
	
    .container {
        padding: 0 10px;
    }

    .footer {
        padding: 20px 0;
    }




    .info .cards {
        flex-wrap: wrap;
    }

    .info .cards .card {
        width: 100%;
        margin: 0 0 0px 0;
        padding: 25px 10px;
    }

	
	.schedule-meeting-section {width: 100%; padding:50px  0px; border-radius: 0px; background: #ffffff; margin-bottom: 5px; }	
	
	
	.footer .footer-logo {width: 100%}
	.footer .social {width: 100%} 
	.tradeBtn {display: none}
	
	
	
}

/* Responsive CSS ends here */