.thumbnails a
{
    float:right;
      margin:10px 5px;
}

.thumbnails
{
    margin-top:200px;
}
div.Box-Titleheader
{
width: 50%;
text-align: center;
height: auto;
margin: auto;
margin-top: 100px;
padding: 5% 0%;
position: relative;
border: 1px solid #f68e56;
border-bottom: transparent;
}
#About-Page
{
   
    padding-bottom: 0;
    position: relative !important;
    height: auto;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
position: relative;
padding-top: 70px;
background-position: center center !important;
background-attachment: fixed;
overflow: hidden;

}
.content-pages
{
    background: #273b5c;
}
div.Box-Titleheader h3
{
    color: #fff;
    font-weight: normal;
    font-size: 2.5em;
    line-height:60px;
    
}
div.Box-Titleheader ul
{
 
margin-top: 20px;
}
div.Box-Titleheader ul li
{
    display: inline-block;
}
div.Box-Titleheader ul li a.pre-link
{
    font-size: 14px;
font-weight: normal;
line-height: 20px;
color: #aaa;
text-decoration: none;
}
div.Box-Titleheader ul li label
{
    color: #f68e56;
}



.content-pages img
{
/*width: 100%;*/
    height: auto;
    border-radius: 4px;
    margin:auto
}
.content-pages h3{
    color: #fff;
    margin: 7% auto 2%;
    text-align: center;
    display: block;
    border-bottom: 1px solid #f68e56af;
    padding-bottom: 4%;
    
}
.content-pages-p   ,#Mission .internal-box p,#Mission .internal-box
{
    margin: 20px  auto;
    color: #cdd6e2;
    line-height: 40px;
    direction: ltr;
    text-align: justify;
    font-size:1.1em;
}
.content-pages img.Icon_About
{
width: 50%;
}
.content-pages .purecounter
{
    text-align: center;
    font-size: 2em;
    margin-top: 30px;
}
.content-pages .title_about_item
{
    display: block;
    text-align: center;
    font-size: 1.2em;
    color: #f68e56;
}
#about_items_box
{
    background-image: url(../images/about/facts-bg.jpg) !important;
    padding-bottom: 0;
    position: relative !important;
    height: auto;
background-size: cover;
background-repeat: no-repeat;
color: rgba(255,255,255,.8);
z-index: 0;
position: relative;
padding: 3em 0;
background-position: top center !important;
background-attachment: fixed;
overflow: hidden;
margin-top: 70px;
}
.overlay-left
{
    background: rgb(24,24,52);
   background: linear-gradient(94deg, rgba(24,24,52,1) 0%, rgba(24,24,52,0.5999533602503502) 47%, rgba(24,24,52,1) 100%);
   position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
opacity: 1;
z-index: 0;
}
#footer
{
    border-top: 3px solid #9aa8bc;
}
.footer_center::before, .footer_center::after
{
    top:0px;
}
.borders-otherpages
{
    width: 80%;
    border: 1px solid #f68e56;
    border-top:none;
    position: absolute;
    height: 80%;
    top: 0;
    left: 10%;
    opacity: 0.6;
}
#Mission .Content-mission-box
{
background: #172130ab;
border: #414a5a;
margin: 40px;
padding: 40px;
}
#Mission .internal-box
{
    border: 1px solid #f68e568a;
    padding: 10px 10%;
}
#Mission .internal-box p
{
    text-align: justify;
}
#Contact
{
    width: 100%;
    background: #1d283a;
    padding: 5% 0;
}
#Contact i
{
    display: block;
    color: #fff;
    font-size: 2.5em;
    text-align: center;
    padding: 40px 0 10px;
}
#Contact label
{
    display: block;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}
.lbl_title
{
    color:#9aa8bc;
    font-family:Arial,"Hind", sans-serif;
}
#Contact span
{
    display: block;
    text-align: center;
    color: #9aa8bc;
    font-size: 1.2em;
    font-family:Arial,"Hind", sans-serif;
    
}
#Message
{
    width:97%
}
.refresh
{
    background:#9aa8bc;
    padding:6px 10px;
    border-radius:5px;
}
.form-control
{
    font-family:Arial,"Hind", sans-serif;
}
.Captcha li
{
    list-style:none;
    display:inline-block;
    margin-right:10px
}
.contact-form-input
{
    padding-bottom: 10px;
    margin-right: 3%;
    font-family: Arial,"Hind", sans-serif;
}
.map-address
{
    width:100%;
    height:450px;
}
.margin-top-50
{
    margin-top: 50px;
}
.field-validation-error
{
    color:#f68e56;
    font-family:Arial,"Hind", sans-serif;
}
.col-box
{
    background: #fff;
    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    padding: 0;
    margin-bottom: 30px;
    margin-left: 5%;
width: 28%;
border-radius: 5px;
transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-ms-transition:all ease 0.5s;
-o-transition: all ease 0.5s;

    
}
.col-box:hover
{
    box-shadow: 0px 0px 12px #9aa8bc;
}
.img-box
{

    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    
}

.img-box img
{
    width: 100%;
    transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -ms-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
  position: relative;
    max-width: 100%;
    height: 250px;
    overflow: hidden;
}
.img-box img:hover
{
    -webkit-filter: brightness(60%);
    -moz-filter:brightness(60%);
    -o-filter:brightness(60%);
    -ms-filter:brightness(60%);
    cursor: pointer;
    transform: scale(1.1);
    overflow: hidden;
}
.col-box .date
{
    color: #ccc;
font-size: 1.3em;
margin: 20px 0;
display: inline-block;

}
.col-box i
{
    display: inline-block;
    padding: 20px 10px;
    font-size: 1.4em;
    color: #ccc;

}
.col-box li
{
    display: inline-block;
}
.text-success
{
    color: green !important;
}
.text-danger
{
    color: red !important;
}
.col-box span
{
    margin-left: 10px;
    color: #ccc;
}
.col-box span:hover
{
    color:#f68e56 ;
}
.col-box a
{
    text-decoration: none;
}
.col-box h3{
    text-align: center;
    display: block;
    clear: both;
    color: #666;
    font-size: 14px;
    margin-top: 10px;
}
.col-box p
{
    font-size: 13px;
    color: #9aa8bc;
    text-align: justify;
    padding: 20px;
    height: 120px;
    overflow: hidden;
}
.blue
{
    background-color: #278dd6;
}

.image_bg
{
    background-image: url("images/bg/about.jpg");
background-size: cover;
background-position: center center;
height: 300px;
background-attachment: fixed;
}
.left-item
{
    width: 100%;
    position:relative;

}
.left-item .overlay_dark{
    z-index:0 !important;
}
.right-item
{
    width: 100%;
    float: right;
    min-height: 560px;
    max-height:100%;
       padding-top:50px;
   
}
.Item-support
{
    text-align: right;
    padding-top: 0;
    color: #eee;
    line-height: 40px;
    font-weight: normal;
    padding:50px 10px;
          /*border: 1px solid #f68e56;*/
    border-bottom: none;
}
.Item-support ul
{
    margin:0 ;
}
.Item-support ul li
{
    list-style: none;

}
.Item-support ul li i
{
    color: #414a5a;
    font-size: 14px;
    padding:10px;
}
.Item-support ul li span
{
    color: #eee;
    font-family:Arial,"Hind", sans-serif;
}
.darkblue
{
    background-color: #100169;
}
.dark
{
    background-color: rgb(24,24,52);
}

.itemsList
{
    background-image: url("../images/bg/aboutbg.jpg");
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
.itemsList i
{
color: #278dd6;
font-size: 2em;
padding: 20px 0px;
}
.itemsList h4 span
{
    color: #fff;
    text-align: center;
    font-size: 1em;
    padding:20px 5px;
}
.itemsList p
{
    color: #c3cedd;
    text-align: left;
    line-height: 35px;
    font-size: 14px;
}
.item-box-support
{
    width: 30%;
    margin-top: 30px;
    margin-bottom: 50px;
}

.thumb-image
{
    display: inline-block;
    margin-top: 20px;
}

.xzoom-container>img
{
    width: 100%;
}


  /* Compatibility styles for frameworks like bootstrap, foundation e.t.c */
.xzoom-source img, .xzoom-preview img, .xzoom-lens img {
display: block;
max-width: none;
max-height: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
/* --------------- */

/* xZoom Styles below */
.xzoom-container { 
display: inline-block;
}

.xzoom-thumbs {
text-align: center;
margin-bottom: 10px;
}

.xzoom { 
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);  
}
.xzoom2, .xzoom3, .xzoom4, .xzoom5 {
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

/* Thumbs */
.xzoom-gallery, .xzoom-gallery2, .xzoom-gallery3, .xzoom-gallery4, .xzoom-gallery5 {
border: 1px solid #cecece;
margin-left: 5px;
margin-bottom: 10px;
}

.xzoom-source, .xzoom-hidden {
display: block;
position: static;
float: none;
clear: both;
}

/* Everything out of border is hidden */
.xzoom-hidden {
overflow: hidden;
}

/* Preview */
.xzoom-preview {
border: 1px solid #888;
background: #2f4f4f;
box-shadow: -0px -0px 10px rgba(0,0,0,0.50);
}

/* Lens */
.xzoom-lens {
border: 1px solid #555;
box-shadow: -0px -0px 10px rgba(0,0,0,0.50);
cursor: crosshair;
}

/* Loading */
.xzoom-loading {
background-position: center center;
background-repeat: no-repeat;
border-radius: 100%;
opacity: .7;
background: url(../images/xloading.gif);
width: 48px;
height: 48px;
}

/* Additional class that applied to thumb when it is active */
.xactive {
-webkit-box-shadow: 0px 0px 3px 0px rgba(74,169,210,1);
-moz-box-shadow: 0px 0px 3px 0px rgba(74,169,210,1);
box-shadow: 0px 0px 3px 0px rgba(74,169,210,1); 
border: 1px solid #4aaad2;
}

/* Caption */
.xzoom-caption {
position: absolute;
bottom: -43px;
left: 0;
background: #000;
width: 100%;
text-align: left;
}

.xzoom-caption span {
color: #fff;
font-family: Arial,"Hind", sans-serif;
display: block;
font-size: 0.75em;
font-weight: bold;
padding: 10px;
}

.info-product h1
{
    color: #fff;
    font-size: 1.5em;
    padding: 10px;
    border-bottom: 1px solid #f68e569c;
}
.info-product p
{
    color: #9aa8bc;
    line-height: 40px;
    margin: 15px 10px;
    text-align: justify;
}
.align-right
{
    text-align: right !important;
}
.align-center
{
    text-align: center !important;
}

#RelatedProduct
{
    width: 100%;
    background-color: #1c293e;
}

/*product page*/
 .table-bordered {
border: 1px solid #dddddd;
border-collapse: separate;
border-left: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.table {
width: 100%;
margin-bottom: 20px;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
display: table;
}

.widget.widget-table .table {
margin-bottom: 0;
border: none;
}

.widget.widget-table .widget-content {
padding: 0;
}

.widget .widget-header + .widget-content {
border-top: none;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

.widget .widget-content {
padding: 20px 15px 15px;
background: #FFF;
border: 1px solid #D5D5D5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.widget .widget-header {
position: relative;
height: 40px;
line-height: 40px;
background: #E9E9E9;
background: -moz-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #e9e9e9));
background: -webkit-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
background: -o-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
background: linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
text-shadow: 0 1px 0 #fff;
border-radius: 5px 5px 0 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1),inset 0 1px 0 white,inset 0 -1px 0 rgba(255,255,255,0.7);
border-bottom: 1px solid #bababa;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
border: 1px solid #D5D5D5;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-webkit-background-clip: padding-box;
}

thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}

.widget .widget-header h3 {
top: 2px;
position: relative;
left: 10px;
display: inline-block;
margin-right: 3em;
font-size: 14px;
font-weight: 600;
color: #555;
line-height: 18px;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.widget .widget-header [class^="icon-"], .widget .widget-header [class*=" icon-"] {
display: inline-block;
margin-left: 13px;
margin-right: -2px;
font-size: 16px;
color: #555;
vertical-align: middle;
}

/*اسلایدر محصولات*/
.col-item
{
    border: 1px solid #E1E1E1;
    border-radius: 5px;
    background: #FFF;
}
.col-item .photo img
{
    margin: 0 auto;
    width: 100%;
}

.col-item .info
{
    padding: 10px;
    border-radius: 0 0 5px 5px;
    margin-top: 1px;
}

.col-item:hover .info {
    background-color: #F5F5DC;
}
.col-item .price
{
    /*width: 50%;*/
    float: left;
    margin-top: 5px;
}

.col-item .price h5
{
    line-height: 20px;
    margin: 0;
}

.price-text-color
{
    color: #219FD1;
}

.col-item .info .rating
{
    color: #777;
}

.col-item .rating
{
    /*width: 50%;*/
    float: left;
    font-size: 17px;
    text-align: right;
    line-height: 52px;
    margin-bottom: 10px;
    height: 52px;
}

.col-item .separator
{
    border-top: 1px solid #E1E1E1;
}

.clear-left
{
    clear: left;
}

.col-item .separator p
{
    line-height: 20px;
    margin-bottom: 0;
    margin-top: 10px;
    text-align: center;
}

.col-item .separator p i
{
    margin-right: 5px;
}
.col-item .btn-add
{
    width: 50%;
    float: left;
}

.col-item .btn-add
{
    border-right: 1px solid #E1E1E1;
}

.col-item .btn-details
{
    width: 50%;
    float: left;
    padding-left: 10px;
}
.controls
{
    margin-top: 20px;
}
[data-slide="prev"]
{
    margin-right: 10px;
}
.nav-tabs .nav-link.active {
    font-weight:bold;
    background-color: transparent;
    border-bottom:3px solid #f68e569c;
    border-right: none;
    border-left: none;
    border-top: none;
    color: #fff;
}
.Info_News
{
    margin-top:20px;
}
  .Info_News ul li
    {
        display:inline-block;
    }
     .Info_News ul li i
     {
         color:#ddd;
         display:inline-block;
         padding:5px;
         font-size:16px
     }
      .Info_News ul li span
      {
          color:#a8b5c9;
          font-family:Arial,"Hind", sans-serif;
          font-size:16px;
          padding:5px;

      }
      .news_image img
      {
          margin:50px auto;
      }
        .Description_news p
  {
      padding: 20px;
color: #eee;
line-height: 35px;
  }
        .margin-bottom-50
        {
            margin-bottom:50px;
        }
        .text-white
        {
            color:#fff;
        }
        .text-light
        {
            color:#9aa8bc;
        }

        /*-----------------------------------pagination--------------------------------------*/
     .pagination   h2 {
        text-align: center; color: #fff ;font-size: 40px; font-family: $mainFont ;font-weight: 700 ;margin-top: 60px;
         text-shadow: 0 5px 8px rgba(0,0,0,.25);
    }
       .pagination  span {
        font-weight: 400;
    }
       .pagination {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        margin: 0;
        padding: 10px;
        background-color: transparent;
        border-radius: 40px;
        /*box-shadow: 0 5px 25px 0 rgba(0,0,0,.5);*/
        margin-top:20px;
    }
       .pagination li {
        display: inline-block;
        list-style: none;
    }
       .pagination   a {
        display: block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        text-align: center;
        text-decoration: none;
        color: #252525;
        border-radius: 4px;
        margin: 5px;
        box-shadow: inset 0 5px 10px rgba(0,0,0,.1), 0 2px 5px rgba(0,0,0,.5);
        transition: all .3s ease;
    }
       .pagination  a:hover,
       .pagination  a.active {
            color: #fff ;
            background-color: #ff6a00;
        }
       .pagination  a:first-child a {
            border-radius: 40px 0 0 40px;
        }
       .pagination   a:last-child a {
            border-radius: 0 40px 40px 0;
        }
       .box-paging
       {
           display:block;
           position:relative;
           margin-bottom:12%;
           clear:both;
           margin-top:50px;
       }
@media screen and (max-width: 1024px) {
    .col-box
    {
        width:28%
    }
    .item-box-support
    {
        width: 44%;
    }
    div.Box-Titleheader {
        width: 80%;
    }
      h3.Title_News {
        font-size: 1.8em !important;
    }
      .right-item {
    width: 100%;
}
      .left-item {
    width: 100%;

}
}

@media screen and (max-width: 600px) {
    div.Box-Titleheader h3
    {
        font-size: 1em;
    }
    div.Box-Titleheader ul {
        width: 100%;
    }
    .col-box
    {
        width:100%
    }
    .right-item
    {
        width: 100%;
    }
    .left-item
    {
        width: 100%;
    }
    .content-pages h3
    {
        font-size: 1em;
    }
    .internal-box .form-control
    {
width:100%;
    }
    #Mission .Content-mission-box
    {
        margin: 0;
        padding: 0;
width: 100%;
margin-top: 30px;
    }
     div.Box-Titleheader {
        width: 90%;
    }
    h3.Title_News {
        font-size: 1.5em !important;
    }
      
}

@media screen and (max-width: 512px) {
    .item-box-support
    {
        width: 100%;
    }

}
@media screen and (max-width: 400px) {
      div.Box-Titleheader {
        width: 95%;
    }
      h3.Title_News
      {
          font-size:1.3em !important;
      }
}

  .main-timeline{
    font-family: 'Roboto', sans-serif;
    position: relative;
}
.main-timeline:after{
    content: '';
    display: block;
    clear: both;
}
.timeline-content img
{
    width:40%;
    float:right;
    margin-top:30px;
    margin-left:20px;

}
.timeline-content_custom img
{
   width: 40%;
    margin-top: 30px;
    margin-left: auto;
    float:none;

}
.main-timeline:before{
content: '';
height: 99%;
width: 1px;
border: 1px solid #f68e56;
transform: translateX(-50%);
position: absolute;
left: 3%;
top: 30px;
}
.main-timeline .timeline{
    width: 100%;
    padding: 0 35px 0 27px;
    margin: 0 10px 20px 0;
    float: left;
}
.main-timeline_custom .timeline_custom
{
      width: 30%;

}
.main-timeline .timeline-content{
    background: rgba(30,42,59,0.7);
    text-align: center;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 10px -5px rgba(0,0,0,0.6);
    display: block;
    position: relative;
}
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-content:before,
.main-timeline .timeline-content:after{
    content: "";
    background: linear-gradient(to bottom,#647cde,#78b0fa);
    width: 45px;
    height: 45px;
    transform: rotate(-45deg);
    position: absolute;
    top: 13px;
    right: -58px;
    z-index: 1;
}
.main-timeline .timeline-content:after{
    background: #fff;
    transform:rotate(-45deg) scale(0.6);
}
.main-timeline .timeline-icon{
    color: #fff;
    background: linear-gradient(to right,#617de0,#78b1f8);
    font-size: 23px;
    text-align: center;
    line-height: 40px;
    height: 40px;
    width: 40px;
    transform: translateY(-50%) rotate(-45deg);
    position: absolute;
    top: 50%;
    left: -20px;
}
.main-timeline .timeline-icon i{ transform: rotate(45deg); }
.main-timeline .timeline-year{
    color: #fff;
    background: linear-gradient(to bottom,#617de0,#617de0,#78b1f8);
    font-size: 32px;
    font-weight: 900;
    text-align: center;
    line-height: 100px;
    height: 100%;
    width: 100px;
    border-radius: 0 0 5px 0;
    position: absolute;
    right: 0;
    top: 0;
}
.main-timeline .timeline-year:after{
    content: '';
    background: linear-gradient(to right bottom,#617de0 49%, transparent 50%);
    height: 33px;
    width: 33px;
    position: absolute;
    right: -33px;
    top: 0;
}
.main-timeline .title{
    color: #eee;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 7px 0;
    font-family:Arial,"Hind", sans-serif;
}
.main-timeline .description{
    color: #cdd6e2;
    font-size: 15px;
    letter-spacing: 1px;
    margin: 0;
    font-family:Arial,"Hind", sans-serif;
    font-family: Arial,"Hind", sans-serif;
text-align: justify;
line-height: 35px;
font-size: 12px;
padding: 20px;

}
.main-timeline .timeline:nth-child(even){
    padding: 0 27px 0 35px;
    margin: 0 0 20px 10px;
    float: right;
}
.main-timeline .timeline:nth-child(even) .timeline-content{ padding: 15px }
.main-timeline .timeline:nth-child(even) .timeline-content:before,
.main-timeline .timeline:nth-child(even) .timeline-content:after{
    right: auto;
    left: -58px;
}
.main-timeline .timeline:nth-child(even) .timeline-icon{
    left: auto;
    right: -20px;
}
.main-timeline .timeline:nth-child(even) .timeline-year{
    right: auto;
    left: 0;
    border-radius: 0 0 0 5px;
}
.main-timeline .timeline:nth-child(even) .timeline-year:after{
    transform: rotateY(180deg);
    right: auto;
    left: -33px;
}
.main-timeline .timeline:nth-child(4n+2) .timeline-content:before,
.main-timeline .timeline:nth-child(4n+2) .timeline-icon {background:linear-gradient(to left,#f53b57,#ef5777);}
.main-timeline .timeline:nth-child(4n+2) .timeline-year {background:linear-gradient(to bottom,#f53b57,#f53b57,#ef5777);}
.main-timeline .timeline:nth-child(4n+2) .timeline-year:after{background:linear-gradient(to right bottom, #f53b57 49%, transparent 50%);}
.main-timeline .timeline:nth-child(4n+3) .timeline-content:before,
.main-timeline .timeline:nth-child(4n+3) .timeline-icon {background:linear-gradient(to bottom,#227e22 ,#63a211);}
.main-timeline .timeline:nth-child(4n+3) .timeline-year {background:linear-gradient(to bottom,#227e22,#227e22,#63a211);}
.main-timeline .timeline:nth-child(4n+3) .timeline-year:after{background:linear-gradient(to right bottom, #227e22 49%, transparent 50%);}
.main-timeline .timeline:nth-child(4n+4) .timeline-content:before,
.main-timeline .timeline:nth-child(4n+4) .timeline-icon {background:linear-gradient(to left,#7d5ac2 ,#b493fe);}
.main-timeline .timeline:nth-child(4n+4) .timeline-year {background:linear-gradient(to bottom,#7d5ac2,#7d5ac2,#b493fe);}
.main-timeline .timeline:nth-child(4n+4) .timeline-year:after{background:linear-gradient(to right bottom, #7d5ac2 49%, transparent 50%);}
@media screen and (max-width:767px){
    .main-timeline:before{
        left: 17px;
        transform: translateX(0);
    }
    .main-timeline .timeline,
    .main-timeline .timeline:nth-child(even){
        width: 100%;
        padding: 0 0 27px 40px;
        margin: 0 0 30px 0;
    }
    .main-timeline .timeline-content,
    .main-timeline .timeline:nth-child(even) .timeline-content{
        padding: 70px 15px 35px 15px;
    }
    .main-timeline .timeline-content:before,
    .main-timeline .timeline-content:after,
    .main-timeline .timeline:nth-child(even) .timeline-content:before,
    .main-timeline .timeline:nth-child(even) .timeline-content:after{
        height: 25px;
        width: 25px;
        top: 10px;
        right: auto;
        left: -34px;
    }
    .main-timeline .timeline-icon,
    .main-timeline .timeline:nth-child(even) .timeline-icon{
        transform: translateY(0) translateX(50%) rotate(-45deg);
        left: auto;
        right: 50%;
        top: auto;
        bottom: -20px;
    }
    .main-timeline .timeline-year,
    .main-timeline .timeline:nth-child(even) .timeline-year{
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-radius: 0 5px 5px 5px;
        right: auto;
        left: 0;
    }
    .main-timeline .timeline-year:after,
    .main-timeline .timeline:nth-child(even) .timeline-year:after{
        height: 20px;
        width: 20px;
        transform: rotateY(180deg);
        right: auto;
        left: -20px;
    }
}
  @media screen and (max-width:1024px) {
           .main-timeline .timeline
       {
           width:87%;
       }


    }
@media screen and (max-width:576px){
 .main-timeline .title{ font-size: 18px; }
}

@media screen and (max-width:835px) {
    .timeline-content img {
        width: 80%;
        margin:auto;
        float:none;
    }
            .box-image-product {
    margin-right: 72% !important;
}
}
@media screen and (max-width:600px) {
    .box-image-product {
    margin-right: 76% !important;
}
}
@media screen and (max-width:480px) {
    .box-image-product {
    margin-right: 79% !important;
}
}
@media screen and (max-width:410px) {
    .box-image-product {
    margin-right: 99% !important;
}
}
  @media screen and (max-width:375px) {
    .box-image-product {
        margin-right: 91% !important;
    }
}
  @media screen and (max-width:360px) {
    .box-image-product {
        margin-right: 93% !important;
    }
}
      @media screen and (max-width:320px) {
        .box-image-product {
            margin-right: 100% !important;
        }
}