/* General CSS start
----------------------------------------*/
body { font-size:14px; color:#2b2c2c; line-height:18px; background:#fff; font-family:Arial, Helvetica, sans-serif;}


/* top header css start
----------------------------------------*/
.header { background:#f1f1f1; padding:28px 0; border-top:8px solid #008000;}
.header .logo { float:left;}
.header .language { float:right; margin:8px 40px 0 0;}
.header .language ul { list-style:none; margin:0; padding:0;}
.header .language ul li { float:left; margin:0 4px; padding:0;}
.header .language ul li a { display:inline-block; text-align:center; text-decoration:none;}

.header .social-media { float:right; margin:2px 0 0 0;}
.header .social-media ul { list-style:none; margin:0; padding:0;}
.header .social-media ul li { float:left; margin:0 0 0 20px; padding:0;}
.header .social-media ul li a { width:34px; height:34px; background:#424242; border-radius:100px; display:inline-block; text-align:center; text-decoration:none;}
.header .social-media ul li a .fa { color:#fff; font-size:20px; margin:7px 0 0 0; display:inline-block; }
.header .social-media ul li a:hover { background:#008000;}
/* top header END start
----------------------------------------*/

/* banner css start
----------------------------------------*/
.banner { width:100%; position:relative; border-bottom:6px solid #8a2be2;}
.banner .banner-img { width:100%; position:relative;}
.banner .banner-img img { width:100%;}
.banner .banner-img::after { position:absolute; bottom: 0px; left: 0px; width: 100%; height: 27%; background: rgba(0,0,0,0.5); content: ""; z-index: 2; }
.banner .banner-text { position:absolute; left:0; bottom:30px; z-index:9; width:100%;}
.banner .banner-text h1 { font-size:42px; line-height:1.5em; color:#fff; text-transform:uppercase; font-weight:normal;}
.banner .banner-text p { font-size:21px; line-height:1.4em; color:#fff; max-width:552px;}
/* banner css END
----------------------------------------*/

/* about vector css start
----------------------------------------*/
.about_vector { width:100%; padding:36px 0;}
.about_vector .about_cottent { width:100%; padding:0 0 15px 0; border-bottom:2px solid #8a2be2}
.about_vector .about_cottent p { font-size:16px; line-height:24px; color:#282828;}
.about_vector .about_cottent p span { color:#008000;}
/* about vector css END
----------------------------------------*/

/* content box css start
----------------------------------------*/
.content { width:100%; padding:30px 0;}
.content .category { border:1px solid #dfdfdf; width:100%; margin:0 0 30px 0;}
.content .category .category_img { width:100%; text-align:center;}
.content .category .category_img img { width:100%;}
.content .category .category_text { width:100%; border-top:1px solid #dfdfdf; padding:15px 15px 0 15px; min-height:415px;}
.content .category .small_hight { min-height:300px;}
.content .category .category_text .category_text_img { margin:0 0 15px 0;}
.content .category .category_text .category_text_img img { width:100%;}

span.green { color:#008000}
span.purple { color:#8a2be2;}

/* content box css END
----------------------------------------*/

/* bottom logo css start
----------------------------------------*/
.logo_part { display:inline-block; background:#f5f5f5;}
.logo_part ul { list-style:none; padding:0; margin:-1px 0 0 0; width:100%; display:inline-block;  text-align:center;}
.logo_part ul li { float:none; padding:7px; margin:0 -2px 0 -3px; border:1px solid #e6e6e6; display:inline-block; background:#fff;}
/* bottom logo css END
----------------------------------------*/

/* bottom content css start
----------------------------------------*/
.about { padding:40px 0 0 0;}
.about .border-grin { background:#008000; height:17px; border-radius:10px; margin:0 0 15px 0;}
.about .border-purple { background:#8a2be2; height:17px; border-radius:10px; margin:0 0 15px 0;}
/* bottom content css END
----------------------------------------*/

/* Responsive css start
----------------------------------------*/
@media (max-width:1500px) {
.banner .banner-text { bottom:6px;}
.banner .banner-text h1 { font-size:30px;}
.banner .banner-text p { font-size:16px;}
}
@media (max-width:1199px) { 
.header .logo { width:35%;}
.header .logo img { width:100%;}
.header .language { margin:8px 9px 0 0;}
.content .category .category_text { min-height:367px;}
.logo_part ul li { padding:4px;}
}
@media (max-width:1024px) {
.banner .banner-text { bottom:-2px;}
.banner .banner-text h1 { font-size:30px;}
.banner .banner-text p { font-size:16px;}
}

@media (max-width:991px) { 
.header { padding:10px 0;}
.header .logo {  width:100%; text-align:center; margin:15px 0 0 0; padding:15px 0 15px 0; border-top:2px solid #737373;}
.header .logo img { width:50%;}
.header .language { margin:8px 9px 0 0; float:left;}
.content .category .category_text { min-height:404px;}
.logo_part ul li { padding:4px;  }
.logo_part ul li img { width:100%;}
}

@media (max-width:768px) { 
.banner .banner-img::after { height:39%;}
.content .category .category_text { min-height:410px;}
}

@media (max-width:767px) {
.header { padding:10px 0;}
.header .logo img { width:58%;}
.header .language { float:left; margin:8px 0 0 0;}
.banner .banner-text h1 { font-size:30px;}
.banner .banner-text, .banner .banner-img::after { display:none;}
.content .category .category_text { min-height:inherit;}	
}
@media (max-width:640px) { 
.header .social-media { width:100%; text-align:center;}
.header .social-media ul { width:100%; text-align:center;}
.header .social-media ul  li { float:none; display:inline-block;}
.header .social-media ul li a { width:30px; height:30px;}
.header .social-media ul li a .fa { font-size:18px; margin:5px 0 0 0;}

.header .language { width:100%; float:left; margin:8px 0 0 0;}
.header .language ul { width:100%; text-align:center;}
.header .language ul li { float:none; display:inline-block; width:21px; margin:0 2px;}
.header .language ul li a img { width:100%;}

.banner .banner-text h1 { font-size:20px;}
.banner .banner-text p { font-size:18px;}
}
@media (max-width:320px) { 
.banner .banner-text { display:none;}
}