@charset "UTF-8";
/*
Theme Name: Jochris Commodities & Trading Custom Theme.
Theme URI: https://dientweb.net/
Author: the DientWeb team
Author URI: https://dientweb.net/
*/

*       {box-sizing: border-box;list-style:none;outline:none;transition: 0.5s;}
:root   {--primary-color:#DD9000; --grey-link-color:#858585;--grey-text:#707070;}

html, body 	{float:left;width:100%;margin:0;padding:0;height: 100%;background: #fff;overflow-x:hidden;}
body 		{font-family: 'Montserrat', sans-serif;color:#000;}
ul 			{margin:0;padding:0;}
a 			{text-decoration:none;color: inherit;}
p 			{float: left;width: 100%;font-size: 15px;line-height: 25px;letter-spacing: 0px;}
h1          {font-size: 40px;line-height: 48px;font-weight: normal;margin: 20px 0 14px;}
h2          {font-size:33px;font-weight: normal;margin:0;line-height: 34px;}
h3          {font-size: 22px;font-weight: normal;}
h1,h2,h3    {float: left;width: 100%;}
.screen-reader-text {display: none;}
#wrapper 	{width: 1200px;float: none;margin:0 auto;}
#wrapper925 {width: 925px;float: none;margin:0 auto;}
#wrapper-slide {width:1180px;float: none;margin:0 auto;}
#wrapper-small {width:850px;float: none;margin:0 auto;}


.inc-btns {float: none;margin:0 auto;max-width: 445px;text-align: center;}
.pry-btn, .sec-btn {float: left;width: auto;font-weight: 500;box-sizing: border-box;margin-left: 20px !important;}
.pry-btn a, .sec-btn a {color:#fff !important;float: left;width:auto;border-radius:100px !important;padding: 14px 20px;font-size: 13px;}
.pry-btn a {background: #265727 !important;}
.sec-btn a {background: #9F6301 !important;}
.pry-btn a:hover, .sec-btn a:hover {background: #70A81B !important;color:#fff !important;}

/*header*/
#head {float: left;width: 100%;padding:10px 0 0;}
    .logo       {float:left;width:300px;height:auto;}
    .logo img   {width:auto;max-width: 100%;height:auto;float: left;}
    .menuu      {float: right;width: auto;font-weight: 500;position: relative;margin-top: 20px;}
    .search-form {float: left;width: 100%;border: 1px solid #ccc;border-radius: 4px;}
    input[type="search"] {float: left;width: 90%;box-sizing: border-box;padding: 14px;border: none;outline: none;margin: 5px 0;}
    .search-submit {border: none;background: transparent url('img/search.png') no-repeat center center;box-sizing: border-box;padding: 13px;width: 10%;text-align: center;outline: none;border-left: 1px solid #ccc;margin: 6px 0;color: transparent;}

    .header-btns {float: right;width: auto;margin-top: 18px;}

#home-banner  {float: left;width:100%;background: #4A4A4A;}

#page-content       {float: left;width:100%;}
.home-intro         {float: left !important;width: 100% !important;padding: 60px 20% 0;box-sizing: border-box;}
.home-intro h2      {font-size: 40px;padding: 0 24%;box-sizing: border-box;float: left;width: 100%;line-height: 42px;}
.home-intro p       {padding:0 3%;box-sizing: border-box;float: left;width:100%;}

#hgrey-box      {padding-bottom: 100px;}
#grey-gap       {float: left;width:100%;text-align: center;padding:0px 9% 10px;margin:0; box-sizing: border-box;background: #F0F0F0;background: linear-gradient(180deg, rgba(240, 240, 240, 1) 10%, rgba(207, 207, 207, 1) 59%, rgba(240, 240, 240, 1) 100%);} 
#grey-gap h3    {margin: 0;}

.section-title p {margin:0;}
.section-title h2 {padding-right: 23%;box-sizing: border-box;float: left;line-height: 40px;margin: 0;}

#jostats {margin-top: 60px;}
#jostats li {display: inline-block;width:20%;}
#jostats li:nth-child(2) {width:39%;padding:40px 11%;margin: 0 10%;border-left:1px solid #ccc;border-right: 1px solid #ccc;}
#jostats h4 {font-size:50px;margin:0;}

#testimonial-box {padding:30px 0 50px;}
.carousel-wrapper {float:left;width:100%;margin-top: 50px;}
.tss-wrapper .tss-img-circle .profile-img-wrapper img {margin:0 auto;width: 50px;}
.rt-col-xs-12, .rt-col-sm-12, .rt-col-md-12 {padding-left:0;}
.tss-wrapper .tss-carousel1 .item-content-wrapper {height: 120px;color:#fff;border-radius:8px; border-bottom-right-radius: 100px;
/*background: #265727;*/
/*background: linear-gradient(160deg, rgba(38, 87, 39, 1) 0%, rgba(51, 158, 52, 1) 100%);*/
    background: #373837;
    background: linear-gradient(160deg, rgb(82 84 84) 0% 0%, rgb(125 125 125) 100% 100%);
}

.tss-wrapper .tss-carousel1 .item-content-wrapper .item-content {color:#fff;}
.tss-wrapper .single-item-wrapper h3.author-name {font-size: 13px;margin-bottom: 0;color:#000;}
.tss-wrapper .single-item-wrapper h4.author-bio {font-size: 12px;line-height: 16px;margin: 0;}

#connect-section {padding:50px 0 150px;color:#fff;float: left;width: 102%;}
#connect-section h2 {margin-bottom: 20px;font-size: 37px;}
#connect-section p {padding-right: 20%;}
.inline-btns {float: left;width:500px;margin-top:50px;}
.inline-btns .pry-btn {margin-left:0 !important;}
.inline-btns .pry-btn a {text-align: center;}

#page-header {float: left;width: 100%;background-size: cover;background-position: center;background-repeat: no-repeat;padding: 200px 20px 100px;color: #fff;position: relative;}
#page-header::before {content: "";position: absolute;inset: 0;background: rgba(0,0,0,0.4);z-index: 0;}
#page-header #wrapper {position: relative;z-index: 1;text-align: left;padding-left:15px;}
#page-header h1 {margin:0;font-size:55px;}

#white-box {float: left;width:102%;padding:80px 0 60px;box-sizing: border-box;background: #fff;}
#grey-box {float:left;width:102%; padding:20px 0 100px;margin-bottom:20px;background: #f0f0f0;}
#grey-box h2 {margin-bottom: 15px;}

#foot-means {text-align: center;padding-bottom: 80px;}
#foot-means p {font-size: 13px;}

#footer                 {float: left;width:100%;margin:0;color:#adadad;font-size: 11px;background: #265727;}
.pf-left ul li {list-style: none;display: inline-block;margin-right: 6px;}
.pf-left, .pf-right     {padding:12px 0 0;}
.pf-left 		        {float: left;width: auto;}
.pf-right 		        {float: right;width: auto;}
.pf-left p, .pf-right p {font-size: 12px;float: left;width: auto;}
.pf-left a              {color: #fff;}
.connect-media {float: left;width: auto;margin: 10px;}

.wpb_animate_when_almost_visible {opacity: 1 !important;}

#service-left h2 {margin: 20px 0 0;font-size: 25px;}
.page-id-18 #grey-box {padding:80px 0 60px;margin-bottom: 0;}
.left-half {float:left;width:45%;}
.right-half {float:right;width:45%;}
.left-half h3, .right-half h3 {font-size: 22px;margin: 50px 0 0;}
.service-image {float:right;padding-left:5%;}
.service-image img {float: right;width:100%;max-width: 100%;height: auto;}

.post-grid {float: left;width: 100%;display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;margin: 80px 0;}
.post-item {position: relative;width: 100%;overflow: hidden;}
li.postbox  {width:30%;overflow-x: hidden;}
.prtimg {float: left;width: 100%;border-radius: 8px;overflow: hidden;}
.prtimg img {height: auto;width: 250%;float: right;}
.postbox_cnt p {font-size: 18px;}
.post-item:hover img {transform: scale(1.1);transition: 0.5s;}
.post-item:hover a {color: #DD9000;}

.single #page-header h1 {margin: 0;font-size: 35px;}
.page-header-title {float: left;width: 65%;}
.breadcrumbs {float:right; width:auto; text-align: right; font-size: 13px; margin-top: 20px;color: #b2b2b2;}
.breadcrumbs a {color: #fff; text-decoration: none;margin:0 5px;}
.breadcrumbs a:hover {color: #70A81B;}
.single #white-box {padding: 30px 0 100px;}
.single #white-box h2 {font-size: 27px;margin-bottom: 10px;}
.single #white-box h3 {font-size: 15px;margin: 24px 0 0;font-weight: bold;}

/*==========================================================================================================================
CONTACT FORM
============================================================================================================================*/

.form-box {float:left; width:100%; margin-top:30px; float:left}
.form-box p {float:left;width:100%;font-size: 14px;line-height: 24px;margin:0;}

.wpcf7-form-control-wrap input[type="text"], 
.wpcf7-form-control-wrap input[type="email"],
.wpcf7-form-control-wrap input[type="date"],
.wpcf7-form-control-wrap select,
.wpcf7-form-control-wrap input[type="tel"],
.wpcf7-textarea, .wpcf7-submit    {float:left;width:100%;padding:15px;box-sizing:border-box;font-family: 'Montserrat', sans-serif;margin-bottom:24px !important;outline:none;border-radius: 4px;}

.wpcf7-form-control-wrap input[type="text"], 
.wpcf7-form-control-wrap input[type="email"],
.wpcf7-form-control-wrap input[type="date"],
.wpcf7-form-control-wrap select,
.wpcf7-form-control-wrap input[type="tel"],
.wpcf7-textarea   {border: 1px solid #b2b2b2;background: #dcdcdc;border-radius: 100px;}
.wpcf7-textarea  {height: 150px;border-radius: 20px;}

.wpcf7-submit {color:#fff;float: left;width:100%;background: #265727;padding:16px 44px 16px 15px;border-radius: 100px;border:0;outline:none;cursor: pointer;}
.wpcf7-submit:hover {background: #70A81B}

.form-grp       {float:left;width:100%;}
.form-right     {float:right;}
.form-left      {float:left;}
.form-right, .form-left     {width:49%;}
.mobile-nav-menu {display: none;float: right;width: auto;margin-top: 20px;}

/*===========================================================================================================================
mobile styles
===========================================================================================================================*/

@media (max-width:1024px) {
    #wrapper{width: 94%;}
    .menuu, .header-btns {display: none;}
    .mobile-nav-menu {display: block;}
    #head {padding: 10px 0 12px;}
    .home-intro h2 {padding: 0 8%}
    .home-intro p {padding: 0;}
    #grey-gap {padding: 0px 2% 10px;}
    .section-title h2 {padding-right: 0;}
    #connect-section p {padding-right: 0;}
    #service-left h2 {margin: 0;}
    .page-id-18 h2 {margin:-10px 0 0 0 !important; font-size: 22px !important;}
    .left-half h3, .right-half h3 {font-size: 18px;margin: 40px 0 0;}
    #foot-means h2 {font-size: 24px;line-height: 10px;}

}

@media (max-width:800px) {
    #wrapper, #wrapper-small   {width: 700px;}
    .home-intro h2 {padding: 0;}
    .home-intro {padding: 60px 14% 0;}
    .pf-left, .pf-right {width: 100%;float: left;}
    .pf-left {margin-top:10px;}
    .pf-right {margin:0 0 10px;padding-top:0;}
    .pf-left p, .pf-right p {margin:0;width:100%;}
    .connect-media {margin: 5px 0;}
    #jostats li:nth-child(2) {margin:0 9%;}
    .postbox_cnt p {font-size: 14px;line-height: 20px;}
    .single #page-header h1 {font-size: 33px;line-height: 35px;}
    .logo {width: 200px;}
    .mobile-nav-menu {margin-top:6px;}
  
}

@media(max-width:736px){
    .section-title {margin: 62px 0 -23px !important;float: left;}
    .inc-btns .pry-btn, .inc-btns .sec-btn {margin-top: 70px;}
    #foot-means {float: left;width: 103%;}
    .service-image {float: left;padding-left: 0;width: 103%;margin-top: 30px;}
    .post-grid {grid-template-columns: repeat(2, 1fr);gap: 20px;}
    .page-header-title {width: 100%;}
    .breadcrumbs {float: left;text-align: left;}
    .breadcrumbs a {margin: 0 5px 0 0;}
}

@media (max-width:600px) {
    #wrapper,#wrapper-small {width: 90%;}
    #page-header {padding: 150px 0 90px}
    #page-header #wrapper {padding-left: 0;}
    .home-intro {padding: 60px 5% 0;}
}

@media (max-width:450px) {
    .inc-btns .pry-btn, .inc-btns .sec-btn {margin-top: 70px;margin: 50px 1px 0 !important;}
    #jostats ul {margin-bottom: 60px;float: left;}
    #jostats li {width: 100% !important;margin: 0 0 25px 0 !important;padding: 0 !important;border: 0 !important;}
    #connect-section {width:105%;}
    #connect-section h2 {margin-bottom: 11px;font-size: 30px;}
    #connect-section p {padding-right: 70px;}
    #page-header h1 {font-size: 40px;}
    .page-id-18 #grey-box {width: 105%;padding: 50px 0 50px;margin-bottom: 0;}
    #white-box {float: left;width: 105%;padding: 50px 0 50px;}
    .form-right, .form-left {width: 100%;}
    #grey-box {width: 105%;}
    #page-header {padding: 150px 13px 90px;}
    .post-grid {grid-template-columns: repeat(1, 1fr);gap: 20px;}
    .home-intro h2 {font-size: 28px;margin: -10px;line-height: 34px;}
    .home-intro {padding: 20px 5% 0;}
    .inc-btns .pry-btn {margin: 50px 0 15px !important;float: left;width: 100% !important;}
    .inc-btns .sec-btn {margin:0 !important;float: left;width: 100% !important;}
    .pry-btn a, .sec-btn a {width:100%;}
    #connect-section p {padding-right: 27%;}
}

@media (max-width:360px) {
    .section-title {float: left;padding-right: 0%;box-sizing: border-box;width: 100%;}
    #connect-section p {padding-right: 0;}
    .inline-btns {width:100%;}
    .inline-btns .pry-btn, .inline-btns .sec-btn {float: left; width: 100%;}
    .inline-btns .sec-btn {margin: 20px 0 0 0 !important;text-align: center;}
}

@media (max-width:320px) {
   
}