@import 'https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700';
@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700';
@import 'http://fonts.googleapis.com/css?family=Oswald:400,300';

/* CSS RESET * -------------------------- */
* {margin: 0px; padding: 0px; box-sizing:border-box; }
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
body{ font-family: 'Ubuntu', sans-serif; overflow-x:hidden;}
h1, h2, h3{ font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}

/* CSS TOP MARGINS * -------------------------- */
.top-marg-1 {margin-top:10px;}
.top-marg-2 {margin-top:20px;}
.top-marg-3 {margin-top:30px;}
.top-marg-4 {margin-top:40px;}
.top-marg-5 {margin-top:50px;}

/* CSS CLEAR FLOATS * -------------------------- */
.clearfix:after { visibility:hidden; display:block; content:" "; clear: both; }
.clearfix { display: inline-block; }
.clearfix { display: block; }

/* HEADER CSS * -------------------------- */
.content{ padding:0 50px;}
#header{ width:100%; box-shadow:0px 2px 5px 0 rgba(0,0,0,0.25); position:relative; z-index:1;}
#header .top-bar{ width:100%; background:#303030; border-top:4px solid #2196f3; padding:5px 0; color:#c0c0c0;}
#header .top-bar .call{ float:left; font-size:14px; margin:0 50px 0 0; line-height:24px;}
#header .top-bar .mail{ float:left; font-size:15px; line-height:24px;}
#header .top-bar .call i, #header .top-bar .mail i { color:#2196f3; margin:0 5px 0 0;}
#header .top-bar .quote{ float:right; font-size:14px;}
#header .top-bar .quote a{ background:#2196f3; border-radius:2px; padding:5px 10px; color:#fff; display:inline-block; transition:all 0.5s ease 0s;}
#header .top-bar .quote a:hover{ background:#02e8c6; color:#000;}

#header .menu-bar{ width:100%;}
#header .logo-wrap { width:233px; float:left; margin:10px 0; }
#header .logo-wrap img{ width:100%; }
#header .menu-wrap{ float:right; margin:17px 0;}

/* BANNER CSS * -------------------------- */
#banner{width:100%;}
#banner-bottom{width:100%; background:#2196f3; padding:20px 0;}
#banner-bottom h1{float:left; display:inline-block; color:#fff; font-size:34px; font-weight: 400; line-height: 36px;}
#banner-bottom a{float:right; color:#fff; display:inline-block; border:2px solid #fff; border-radius:5px; padding:8px 20px; text-transform:uppercase; font-size:16px; }

/* ABOUT CSS * -------------------------- */
#about-section{width:100%; margin:60px 0;}
#about-section h1{ color:#303030; font-weight:400; font-size:36px; text-transform: uppercase;}
#about-section h2{ color:#303030; font-weight:400; font-size:32px; text-transform: uppercase;}
#about-section p{ color:#707070; font-weight:300; font-size:16px; line-height:24px; margin:15px 0 0 0;}
#about-section a{color:#2196f3; display:inline-block; border:2px solid #2196f3; border-radius:5px; padding:8px 20px; text-transform:uppercase; margin:20px 0 0 0; }
#about-section .left{width:48%; float:left;}
#about-section .right{width:48%; float:right;}
#about-section .right img{width:100%;}

/* SERVICES CSS * -------------------------- */
#services-section{width:100%; margin:60px 0; background:url(../images/services-bg.jpg) no-repeat scroll 0 0 / cover; padding:60px 0; position:relative; text-align:center; background-attachment:fixed;}
#services-section:before { background:#000; content:""; height:100%; left:0; opacity:0.7; position:absolute; top:0; width:100%;}
#services-section h2{ color:#fff; font-weight:400; font-size:32px;}
#services-section h3{ color:#333; font-weight:400; font-size:20px; margin:0px 0 0 0; text-transform:uppercase;}
#services-section p{ color:#707070; font-weight:300; font-size:14px; line-height:20px; margin:10px 0 0 0;}
#services-section .image{ position:relative; overflow:hidden;}
#services-section .image .overlay{ position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.5); left:0; bottom:-100%; color:#fff; transition:all 0.5s ease 0s;}
#services-section .image .overlay a{font-family: 'Roboto Condensed', sans-serif; display:inline-block; background:#2196f3; color:#fff; width:90px; height:90px; border-radius:100%; text-align:center; line-height:90px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
#services-section ul li:hover .overlay{ bottom:0;}
#services-section .text{ padding:20px;}
#services-section ul{ list-style:none; margin:10px 0 0 0; text-align:left;}
#services-section ul li{ width:32%; float:left; background:#fff; margin:30px 2% 0 0; padding:0px;}
#services-section ul li:nth-child(3n+0){ margin:30px 0 0 0;}
#services-section ul li img{ width:100%; }

/* WORK CSS * -------------------------- */
#work-section{ width:100%; margin:60px 0; text-align:center;}
#work-section h1{ color:#303030; font-weight:300; font-size:36px; text-transform:uppercase; }
#work-section h2{ color:#303030; font-weight:400; font-size:32px; text-transform:uppercase; font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
#work-section h3{ color:#2196f3; font-weight:500; font-size:20px; text-transform:uppercase; margin:10px 0 0 0; font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }

#work-section p{ color:#707070; font-weight:300; font-size:16px; line-height:24px; margin:10px 0 0 0;}
#work-section ul{ list-style:none; margin:10px 0 0 0; text-align:left;}
#work-section ul li{ width:48%; float:left; margin:30px 4% 0 0; }
#work-section ul li img{ width:20%; float:left; margin:0 5% 0 0; }
#work-section ul li:nth-child(2n+0){ margin:30px 0 0 0;}

/* BEST CSS * -------------------------- */
#best-section{ width:100%; margin:60px 0; background:url(../images/best-bg.jpg) no-repeat scroll 0 0 / cover; padding:60px 0; position:relative;  background-attachment:fixed;}
#best-section:before { background:#2196f3; content:""; height:100%; left:0; opacity:0.9; position:absolute; top:0; width:100%;}
#best-section h2{ color:#fff; font-weight:400; font-size:32px;}
#best-section h3{ color:#fff; font-weight:400; font-size:20px; margin:0px 0 0 0; text-transform:uppercase;}
#best-section p{ color:#fff; font-weight:300; font-size:14px; line-height:20px; margin:5px 0 0 0;}
#best-section .left{ width:75%; float:left;}
#best-section .right{ width:20%; float:right;}
#best-section .right img{ width:100%;}
#best-section ul{ list-style:none; margin:10px 0 0 0; text-align:left;}
#best-section ul li{ width:48%; float:left; margin:30px 4% 0 0; }
#best-section ul li img{ width:20%; float:left; margin:0 5% 0 0; border-radius: 50%; border: solid 2px #ffffff;}
#best-section ul li:nth-child(2n+0){ margin:30px 0 0 0;}


/* CLIENTS CSS * -------------------------- */
#clients-section{ width:100%; margin:60px 0; text-align:center;}
#clients-section h1{ color:#303030; font-weight:400; font-size:36px; text-transform:uppercase; margin:0 0 30px 0;}
#clients-section h2{ color:#303030; font-weight:400; font-size:32px; text-transform:uppercase; margin:0 0 30px 0;}
#clients-section img { border:1px solid #DDD; padding:20px; border-radius:2px; margin-right:20px;}

/* FOOTER TOP CSS * -------------------------- */
#triangle{width:100%; border-right:50vw solid transparent; border-left:50vw solid transparent; border-bottom:50px solid #2196f3; border-top:0px solid transparent;}
#footer-top{ width:100%; background:#2196f3; padding:30px 0; position:relative;}
#footer-top p{ color:#fff; font-weight:300; font-size:20px; line-height:20px; margin:10px 0 0 0;}
#footer-top h2{ color:#fff; font-weight:400; font-size:32px; line-height:32px; }
#footer-top .left{ width:70%; float:left;}
#footer-top .right{ width:25%; float:right; color:#fff; font-size:32px;}
#footer-top .right a{color:#fff; display:inline-block; border:2px solid #fff; border-radius:5px; padding:8px 20px; text-transform:uppercase; font-size:16px; }

/* FOOTER SECTION CSS * -------------------------- */
#footer-sec{ width:100%; background:#303030;}
#footer-sec .footer-top-strip { background:url(../images/footer-strip-bg.html) repeat; padding:25px 0; text-align:center; }
#footer-sec .footer-top-strip .heading { font-family: 'Oswald', sans-serif; font-size:30px; font-weight:300; color:#fff; text-shadow:0px 0px 5px rgba(0,0,0,0.8); }
#footer-sec .footer-top-strip .heading span { font-weight:700; }

#footer-sec .title{ font-weight:400; color:#2196f3; margin-bottom:30px; text-transform:uppercase;}
#footer-sec .logo{ width:100%;}
#footer-sec iframe{ width:100%;}
#footer-sec h4{ font-size:18px; color:#fff; margin:10px 0 0 0; font-weight:400; border-bottom:1px solid #595959; padding-bottom:10px;}
#footer-sec h4 img{ vertical-align:middle; width:25px;}
#footer-sec p{ font-size:14px; color:#c0c0c0; margin:10px 0 0 0; line-height:22px;}
#footer-sec .more{ color:#2196f3; display:inline-block; text-transform:uppercase; border:2px solid #2196f3; padding:7px 15px; border-radius:5px; margin:10px 0 0 0;}

#footer-sec .footer-box1{ width:22%; float:left; margin:60px 4% 0 0; }
#footer-sec .footer-box2{ width:22%; float:left; margin:60px 4% 0 0; }
#footer-sec .footer-box3{ width:22%; float:left; margin:60px 4% 0 0; }
#footer-sec .footer-box4{ width:22%; float:left; margin:60px 0 0 0; }

#footer-sec ul{ list-style:none; font-size:14px; font-style:300; }
#footer-sec ul li{ margin:12px 0 0 0; border-bottom:1px solid #595959; padding:0 0 12px 0; }
#footer-sec ul li:last-child{ border-bottom:none; }
#footer-sec ul li a{ color:#c0c0c0; }
#footer-sec ul li a i{ color:#2196f3; margin:0 5px 0 0; }
#footer-sec ul li:hover a{ color:#2196f3; }

#footer-copyright {font-size:14px; color: #c0c0c0; padding-top:25px; padding-bottom:20px; line-height:20px; margin-top:60px; background:#222;}
#footer-copyright .left{width:48%; float:left; text-align:left;}
#footer-copyright .right{width:48%; float:right; text-align:right;}
#footer-copyright a{ color: #c0c0c0;}
#footer-sec .social { margin:20px 0 0 0;}
#footer-sec .social i { color:#fff; font-size:18px; display:inline-block; width:40px; height:40px; text-align:center;
line-height:40px; border-radius:40px;}
.twitter{ background:#52a5e9;}
.facebook{ background:#4267B2;}
.instagram{ background:#8a3ab9;}
.youtube{ background:#ee1c1b;}

/* INNER BANNER CSS * -------------------------- */
#breadcrumb-area{background:url(../images/breadcrumb-bg.jpg) no-repeat scroll center center / cover;}
#breadcrumb-area .overlay { background:rgba(0,0,0,0.7); padding:75px 0;}
#breadcrumb-area .breadcrumb-title { float:left;}
#breadcrumb-area .breadcrumb-title h1 { color:#ffffff; font-size:36px; font-weight:400; margin:0px; text-transform:uppercase; }
#breadcrumb-area .page-breadcrumb { float:right; color:#fff; font-size:16px; font-weight:500;}
#breadcrumb-area .page-breadcrumb a{ color:#fff;}

/* CONTACT PAGE CSS * -------------------------- */
#contact-wrap{ width:100%; margin:60px 0;}
#contact-wrap .left{ float:left; width:60%; border:1px solid #eee; padding:10px;}
#contact-wrap .right{ float:right; width:36%;}
.google-maps { position:relative; padding-bottom:50%; height:0; overflow:hidden;}
.google-maps iframe { position:absolute; top:0; left:0; width:100% !important; height:100% !important;}
#contact-wrap .icon{ width:100px; height:100px; float:left; border-radius:50%; background:#2196f3; text-align:center; margin-right:10px;}
#contact-wrap .icon i{ color:#fff; font-size:50px; line-height:100px;}
#contact-wrap .text{ float:right; width:75%;}
#contact-wrap .bdr{ border:1px solid #eee; margin:20px 0;}
#contact-wrap h2{ color:#303030; font-weight:500; font-size:24px; text-transform:uppercase; margin:10px 0 0 0; }
#contact-wrap p{ color:#707070; font-weight:300; font-size:16px; line-height:24px; margin:0 0 0 0;}

#contact-wrap2{ width:100%; margin:0; background:#f5f5f5; padding:60px 0; text-align:center;}
#contact-wrap2 h2{ color:#303030; font-weight:400; font-size:32px; text-transform:uppercase;}
#contact-wrap2 h3{ color:#2196f3; font-weight:400; font-size:20px; text-transform:uppercase;}
#contact-wrap2 p{ color:#707070; font-weight:300; font-size:16px; line-height:22px; margin:5px 0 0 0;}
#contact-wrap2 p span{ color:#303030; font-weight:500; }
#contact-wrap2 li{ list-style:none; width:23.5%; float:left; margin:30px 2% 0 0; background:#fff; padding:15px; border:1px solid #eee; text-align:left;}
#contact-wrap2 li:last-child{ margin:30px 0 0 0;}

/* ENQUIRY PAGE CSS * -------------------------- */
#enquiry-wrap{ width:100%; margin:60px 0; text-align:center;}
#enquiry-wrap h1{ color:#303030; font-weight:300; font-size:36px;}
#enquiry-wrap p{ color:#707070; font-weight:300; font-size:16px; line-height:24px; margin:15px 0 0 0; padding:0 50px;}
.enquiry-form{ margin:30px 0 0 0; padding:0 100px;}
.enquiry-form label{ display:block; text-align:left; color:#555; font-weight:300; font-size:15px; margin:0 0 5px 0; font-weight:500;}
.enquiry-form span{ width:49%; float:left; margin:10px 2% 0 0;}
.enquiry-form span:nth-child(2n+0){ margin:10px 0 0 0;}
.enquiry-form input[type=text] {font-family:'Ubuntu',sans-serif; color:#999; width:100%; border: 1px solid #e5e5e5; min-height:38px; padding:10px; line-height:18px; font-size:14px; }
.enquiry-form input[type=phone] {font-family:'Ubuntu',sans-serif; color:#999; width:100%; border: 1px solid #e5e5e5; min-height:38px; padding:10px; line-height:18px; font-size:14px; }
.enquiry-form input[type=email] {font-family:'Ubuntu',sans-serif; color:#999; width:100%; border: 1px solid #e5e5e5; min-height:38px; padding:10px; line-height:18px; font-size:14px; }
.enquiry-form select {font-family:'Ubuntu',sans-serif; color:#999; width:100%; border: 1px solid #e5e5e5; min-height:38px; padding:10px; line-height:18px; font-size:14px; }
.enquiry-form textarea {font-family:'Ubuntu',sans-serif; color:#999; width:100%; border: 1px solid #e5e5e5; padding:10px; line-height:18px; font-size:14px; }
.enquiry-form input[type=submit] { color:#fff; border:none; min-height:40px; padding:10px; line-height:20px; background:#2196f3; border-radius:2px; margin:21px 0 0 0; }
.enquiry-form input[type=submit]:hover { background:#303030;  }
.cap-left{width:50%;float:left;}
.leftmore{width:10%;float:left;}
.cap-right{width:80%;float:right;}
.cap-image { vertical-align: middle; margin-top:20px;}
.cap-input {float:right;width:400px !important; margin-top:20px;}


/* TESTIMONIALS PAGE CSS * -------------------------- */
#testimonials-wrap{ width:100%; margin:40px 0 60px 0; text-align:left;}
#testimonials-wrap p{ color:#333; font-weight:300; font-size:16px; line-height:22px; margin:15px 0 0 0; }
#testimonials-wrap .name{ margin:10px 0 0 0; color:#2196f3; font-size:16px; font-weight:500; }
#testimonials-wrap span{ margin:10px 0 0 0; color:#777; font-size:14px; font-weight:300; }
#testimonials-wrap ul{list-style:none;}
#testimonials-wrap ul li{ width:48%; float:left; background:#f7f7f7; margin:40px 4% 0 0; border-top:2px solid #2196f3; padding:30px 20px; position:relative;}
#testimonials-wrap ul li:before{ content: "\f10e"; font-family:'FontAwesome'; position:absolute; left:20px; top:-25px; background:#2196f3; width:50px; height:50px; color:#fff; text-align:center; line-height:50px; font-size:24px;}
#testimonials-wrap ul li:nth-child(2n+0){ margin:40px 0 0 0;}

/* QUALITY PACKING PAGE CSS * -------------------------- */
#quapack-wrap{ width:100%; margin:60px 0 60px 0; text-align:left;}
#quapack-wrap p{ color:#333; font-weight:300; font-size:16px; line-height:24px; margin:15px 0 0 0; }
#quapack-wrap .left{width:36%; float:left;}
#quapack-wrap .left img{width:100%;}
#quapack-wrap .right{width:60%; float:right;}
#quapack-wrap .points{ width:100%; margin:60px 0; background:url(../images/best-bg.jpg) no-repeat scroll 0 0 / cover; padding:60px 0; position:relative;  background-attachment:fixed; text-align:center;}
#quapack-wrap .points:before { background:#2196f3; content:""; height:100%; left:0; opacity:0.9; position:absolute; top:0; width:100%;}
#quapack-wrap .points ul{ list-style:none;}
#quapack-wrap .points ul li{ width:23.5%; float:left; margin:0 2% 0 0; background:#fff; padding:10px; position:relative;}
#quapack-wrap .points ul li:last-child{ margin:0 0 0 0;}
#quapack-wrap .points ul li .icon{ width:100px; height:100px; background:#2196f3; border-radius:50%; position:absolute; left:50%; top:-50%;}

/* SERVICES PAGE CSS * -------------------------- */
#services-wrap{ width:100%; margin:60px 0 60px 0; text-align:left;}
#services-wrap h2{ color:#2196f3; font-weight:400; font-size:32px; text-transform:uppercase; }
#services-wrap p{ color:#333; font-weight:300; font-size:16px; line-height:24px; margin:15px 0 0 0; }
#services-wrap .left{width:50%; float:left; background:#eee;}
#services-wrap .right{width:50%; float:right; background:#eee;}
#services-wrap .left img, #services-wrap .right img{width:100%;}
#services-wrap .text{ padding:20px;}

/* ABOUT PAGE CSS * -------------------------- */
#about-wrap{ width:100%; margin:0 0 0 0; text-align:left; background:#f5f5f5; padding:60px 0; }
#about-wrap h1{ color:#303030; font-weight:400; font-size:36px; text-transform: uppercase;}
#about-wrap h2{ color:#303030; font-weight:400; font-size:32px; text-transform: uppercase;}
#about-wrap p{ color:#707070; font-weight:300; font-size:16px; line-height:24px; margin:15px 0 0 0;}
#about-wrap .left{width:48%; float:left; }
#about-wrap .left img{width:100%; }
#about-wrap .right{width:48%; float:right;}
#about-wrap2{ width:100%; margin:0 0 60px 0; text-align:left; background:#2196f3; padding:40px 0; text-align:center; }
#about-wrap2 h2{ color:#fff; font-weight:400; font-size:32px; text-transform: uppercase;}
#about-wrap2 p{ color:#fff; font-weight:300; font-size:16px; line-height:24px; margin:15px 0 0 0;}



.fix-call-icon {
    display: inline-block;
    position: fixed;
    bottom: 30%;
    left: 0px;
    z-index: 999999;
}

.fix-icon-item {
    width: 45px !important;
    height: 45px !important;
    text-align: center;
    cursor: pointer;
    padding: 0px;
    background-color: #f06850;
    border-bottom-right-radius: 25px;

    border-top-right-radius: 25px;

}

.fix-icon-whataap {
    display: inline-block;
    position: fixed;
    bottom: 22%;
    left: 0px;
    z-index: 999999;

}

.fix-icon-whataap-item {
    width: 45px !important;
    height: 45px !important;
    text-align: center;
    cursor: pointer;

    background-color: #00ce54;
    border-bottom-right-radius: 25px;

    border-top-right-radius: 25px;
    padding: 2px;
}