/* ------------------------------------------------
  Project:   Hortech - Responsive HTML5 Template
  Author:    ThemeHt
------------------------------------------------ */
/* ------------------------
    Table of Contents

  1. General
  2. Typography
  3. Helper class
  4. Text color
  5. Background color
  6. Pattern
  7. Parallax
  8. Button
  9. Social Icon
  10. Header
  11. Navigation
  12. Banner
  13. About Us
  14. Counter
  15. Skill
  20. Featured Box
  21. Portfolio with Isotope Filtering
  22. Team
  22. Side Background
  23. Accordian
  24. Price Table
  25. Testimonial
  26. Blog
  22. Client Logo
  27. Contact Us
  28. Video

 
/* ------------------------
    General
------------------------*/
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

body {font-family:Arial, Helvetica, sans-serif; position: relative; 
    font-weight: normal; font-style: normal; font-size: 18px;    letter-spacing: 0.5px;line-height: 28px; color:#525252; overflow-x: hidden;}

h1, h2, h3, h4, h5, h6{font-family:Arial, Helvetica, sans-serif; font-weight:normal; margin-top: 0px; margin-bottom: 0px; text-transform: capitalize;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }
h1 { font-size: 60px; font-style: normal; line-height: 70px; font-weight: bold; text-transform: capitalize; color: #11585d;}
h2 { font-size: 38px; font-style: normal; line-height: 50px; font-weight: 300; color: #232323; text-transform: capitalize;}
h3 { font-size: 26px; font-style: normal; line-height: 36px; }
h4 { font-size: 20px; font-style: normal; text-transform: uppercase; margin-bottom: 10px; font-weight: 500; line-height: 26px; color: #232323;}
h5 { font-size: 16px; font-style: normal; line-height: 20px; font-weight: 500;}
h6 { font-size: 16px; font-style: normal; line-height: 24px; }

ul { margin: 0px; padding: 0px; }

#ht-preloader{
    background: url(../images/background.jpg) center no-repeat;
}

/* ------------------------
    Helper class
------------------------*/
.lead{font-weight: normal; font-size: 16px; line-height: 30px;}
.o-hidden{overflow: hidden;}
.img-center{display: inline-block !important; max-width: 100%;}
.fa{line-height: inherit;}
.color-customizer a.opener{background: #11585d}
section{padding: 80px 0;}
h2 span{color: #11585d; font-weight: bold;}
.theme-bg h2 span{color: #151515;}
.section-title{margin-bottom: 50px;}

/* ------------------------
    Text color
------------------------*/
.text-theme{color:#11585d;}
.text-white{color:#ffffff;}
.text-black{color:#151515;}
.text-grey{color:#aaaaaa;}

/* ------------------------
    Background color
------------------------*/
.white-bg{background:#ffffff;}
.dark-bg{background:#151515;}
.grey-bg{background:#fdfdfd;}
.theme-bg{background:#11585d;}
.dark-bg a{color: #ffffff;}

/* ------------------------
    Pattern
------------------------*/
.pattern-1{width: 100%; background-image: url(../images/pattern/pattern-1.png) !important; background-position: 0px 0px; background-repeat: repeat; animation: animatedBackground 20s linear infinite;
-ms-animation: animatedBackground 20s linear infinite; -moz-animation: animatedBackground 20s linear infinite; -webkit-animation: animatedBackground 20s linear infinite;}

.pattern-2{width: 100%; background-image: url(../images/pattern/pattern-2.html) !important; background-position: 0px 0px; background-repeat: repeat; animation: animatedBackground 20s linear infinite;
-ms-animation: animatedBackground 20s linear infinite; -moz-animation: animatedBackground 20s linear infinite; -webkit-animation: animatedBackground 20s linear infinite;}


/* ------------------------
    Parallax
------------------------*/
.parallax { background-clip: initial; background-color: rgba(0, 0, 0, 0); background-origin: initial; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 0; background-attachment: fixed !important; }

/* ------------------------
    Button
------------------------*/
.btn{position: relative; overflow: hidden; border-radius: 5px; background: none; border: 1px solid #11585d; color: #11585d; padding: 12px 30px; text-transform: uppercase;}
.btn span{position: relative; z-index: 9;}
.btn.btn-theme{background: #11585d; color: #ffffff; border-color: #11585d;}
.btn:before {content: ''; display: block; position: absolute; background: #11585d; width: 0%; height: 75%; border-radius: 5px;
left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transition: all .5s;
-webkit-transition: all .5s; -moz-transition: all .5s;}
.btn:hover:before, .btn:focus:before {width: 90%; height: 75%;}
.btn:hover, .btn:focus{color: #ffffff; background: none !important; border: 1px solid #11585d; box-shadow: none !important;}
.btn-outline-light{border-color: #ffffff !important; color: #ffffff !important}
.btn + .btn{margin-left: 20px;}
.theme-bg .btn:hover span{color: #11585d} 
.theme-bg .btn:before{background: #ffffff} 

/* ------------------------
    Social Icon
------------------------*/
.social-icon li{margin-right: 0 !important;}
.social-icon li a{border-radius: 50%; text-align: center; width: 40px; display: inline-block; line-height: 40px; height: 40px; font-size: 18px; background: none; color: #151515;}
.social-icon li a:hover{background: #11585d; color: #ffffff;}

/* ------------------------
    Header
------------------------*/
.site-header, .fullscreen-banner, .halfscreen-banner,  .banner{position: relative;} 
.site-header + .fullscreen-banner{margin-bottom: -85px; top:-85px;} 
.site-header + .halfscreen-banner{margin-bottom: -85px; top:-85px;} 
.site-header, header .container {position: relative; z-index: 999 !important;}
.header-transparent{background: transparent;}
#header-wrap{padding:20px 0 20px 0; width: 100%; background:#fff;}
#header-wrap.fixed-header {position: fixed; padding: 15px 0; top:0; left:0; width: 100%; z-index: 999 !important; background: #f5f5f5;}
.logo img {height:130px;}
#header-wrap.fixed-header .logo img {height:100px;}
.header-2 #header-wrap{background: #151515; padding: 15px;}

header{
    position: relative;
}

/* ------------------------
    Navigation
------------------------*/
.navbar{padding: 0;}
.navbar-nav li{margin: 0 15px;}
.navbar-nav li:last-child{margin-right: 0;}
.navbar-nav .nav-link {position: relative; padding: 0 !important; color: #11585d; font-size: 16px; font-weight: 700; text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;}
.navbar-nav .nav-link:hover span,
.navbar-nav .nav-link:focus span,
.navbar-nav .nav-item .nav-link.active span {color: #ffffff; background: #11585d;}
.navbar-nav .nav-link::before, .navbar-nav .nav-item .nav-link.active::before {content: ''; position: absolute; top: 50%; left: -17px; width: 0.9em; height: 1em; opacity: 0; background: rgba(255,255,255,0.5); animation: none; /* For Chrome */}
.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-link:focus::before,
.navbar-nav .nav-item .nav-link.active::before {animation: blinkblink 0.4s cubic-bezier(0.5,0,1,1) infinite alternate;}
.fixed-header .navbar-nav .nav-link:hover span,
.fixed-header .navbar-nav .nav-link:focus span,
.fixed-header .navbar-nav .nav-item .nav-link.active span {color: #ffffff; background: #11585d;}
.fixed-header .navbar-nav .nav-link::before, .fixed-header .navbar-nav .nav-item .nav-link.active::before{background: rgba(126,206,54,0.5);}

/* ------------------------
    Banner
------------------------*/
.fullscreen-banner{padding: 0;}
.banner .owl-carousel, .banner .owl-stage-outer, .banner .owl-item, .banner .owl-item .item, .banner .owl-stage, .banner {height: 100%;}
.banner-content{ 
    display: inline-block;
    left: 10%;
    position: absolute;
    text-align: center;
    bottom:0px !important;
    width: 50%;
    z-index: 2;
    background: rgb(0 0 0 / 40%);
    margin: 0 auto;
    right: 10%;
    padding: 20px 0px;
    border-radius: 10px;
    border-top: 5px solid #275557;
}
#particles {width: 100%; height: 100%; overflow: hidden;}
.cursor{color: #ffffff;}
.banner-2::after { content: ""; height: 100%; position: absolute; right: -30%; transform: rotate(-75deg); width: 100%; background:#11585d;
  background:-webkit-linear-gradient(90deg,#11585d,#eb3570,#0e54f3,#ff5733);
  background:-o-linear-gradient(90deg,#11585d,#eb3570,#0e54f3,#ff5733);
  background:-moz-linear-gradient(90deg,#11585d,#eb3570,#0e54f3,#ff5733);
  background:linear-gradient(90deg,#11585d,#eb3570,#0e54f3,#ff5733);}

/* ------------------------
    Sub Banner
------------------------*/
.sub-banner h1{color: #ffffff; font-weight: normal; text-transform: uppercase;}
.sub-banner h1{position: relative; padding-bottom: 20px; margin: 25px 0;}
.sub-banner h1:before, .sub-banner h1:after{content: ""; position: absolute; bottom: 0; left: 50%; background: #11585d; height: 2px; width: 70px;}   
.sub-banner h1:before{width: 70px;}   
.sub-banner h1:after{width: 50px; bottom: -8px;}
.breadcrumb {background: none; margin: 30px 0 0; padding: 0; justify-content: center; text-transform: uppercase; font-weight: bold;}
.breadcrumb-item.active, .breadcrumb-item a:hover{color: #11585d;}

/* ------------------------
    About Us
------------------------*/
.about-desc {background: #fff; padding: 40px; position: absolute; left: 0; top: 50%; width: 100%;}
.about-1 {border: 10px solid rgba(255, 255, 255, 0.2);}

/* ------------------------
    Counter
------------------------*/
.counter{position:relative; color: #151515;}
.counter .count-number{display:block; font-size:50px; font-weight:600; line-height:40px; position: relative;}
.counter label{font-weight:500; color: #151515; font-size:15px; position:relative; margin:10px 0 0; text-transform: uppercase;}
.counter.text-white, .counter.text-white label{color: #ffffff;}
.counter label::before {background: #ffffff; content: ""; height: 1px; left: -30px; position: absolute; top: 50%; width: 20px;}

/* ------------------------
    Skill
------------------------*/
.ht-skill{width:100%; height:7px; margin:50px 0 0 0; background-color:#eceff8; border-radius: 5px;}
.ht-skill:not(:first-child){margin-top:64px;}
.skillBar{width: 2%; height:100%; position: relative; border-radius: 5px; padding:0px; background:#11585d; box-shadow:none; transition: width .9s ease; -webkit-transition: width .9s ease; -o-transition: width .9s ease; -ms-transition: width .9s ease; -moz-transition: width .9s ease; }
.skill-title{color:#222; font-size:15px; top: -30px; font-weight:normal; position:absolute; text-align:left; text-transform: capitalize;}
.skill-percentage{color:#151515; right: 0; top: -30px; position:absolute; font-size:15px; opacity: 0;}
.skillBar.sk-fired .skill-percentage{opacity: 1;}
.theme-bg .skill-title, .dark-bg .skill-title{color: #ffffff;}
.theme-bg .skill-percentage, .dark-bg .skill-percentage{color: #ffffff;}

/* ------------------------
    Featured Box
------------------------*/
.featured-item{border-radius: 5px; position: relative; overflow: hidden; background: #ffffff; padding: 30px 30px;}
.featured-item .featured-icon {margin: 0 0 20px; font-size: 50px; line-height: 50px; color: #11585d; overflow: hidden; display: inline-block;}
.featured-item:hover{color: #000;  }
.featured-item:hover .featured-icon i, .featured-item:hover h4{color: #11585d}
.featured-item p{margin-bottom: 0;}
.featured-item span {bottom: 0; color: rgba(0, 0, 0, 0.03); font-size: 200px; line-height: 180px; position: absolute; right: 0;}
.featured-item:hover span{color: rgba(255, 255, 255, 0.2);}
.featured-item.style-2{box-shadow: none; border: 1px solid #efefef; padding: 30px;}
.featured-item.style-2:hover{background: none; color: #151515; border-color: #11585d; 
    }
.featured-item.style-2:hover .featured-icon i, .featured-item.style-2:hover h4{color: #11585d}
.featured-item:hover img{
   
}

/* ------------------------
    Portfolio
------------------------*/
.portfolio-filter {background: #ffffff; border-radius: 5px; overflow: hidden; display: table; margin:0 auto 50px; text-align: center;}
.portfolio-filter.text-left { display: block; margin: 30px 0; text-align: left; }
.portfolio-filter a {position: relative; margin: 0 !important; cursor: pointer;  padding: 13px 25px;
     font-size: 16px; background: transparent; color: #333; border:none; float: left; text-transform: capitalize;}
.portfolio-filter a:focus { outline: none;  outline-style: none; outline-offset:0; }
.portfolio-filter a.is-checked, .portfolio-filter a:hover { background: #11585d; color: #fff;}
.portfolio-filter a+a { margin-left: 10px; } 
.isotope .grid-item img { width: 100%; }
.portfolio-filter a:before{content: ""; position: absolute; right: 0; background: #11585d; width: 1px; height: 50%; top: 25%;}
.portfolio-filter a:last-child:before{display: none;}

.grid.columns-2 .grid-item { width: 50%; padding: 10px; }
.grid.columns-3 .grid-item { width: 33.333333%; padding: 0; }
.grid.columns-4 .grid-item { width: 25%; padding: 10px; }
.grid.columns-5 .grid-item { width: 20%; padding: 10px; } 

.portfolio-item {overflow: hidden; position: relative; text-align: center;}
.portfolio-item .portfolio-hover::before,
.portfolio-item .portfolio-hover::after {position: absolute; z-index: 9; content: ''; opacity: 0; -webkit-transition: opacity 0.70s, -webkit-transform 0.70s;
  transition: opacity 0.70s, transform 0.70s;}
.portfolio-item .portfolio-hover::before {top: 50px; right: 30px; bottom: 50px; left: 30px; border-top: 1px solid #11585d; border-bottom: 1px solid #11585d;
  -webkit-transform: scale(0,1);  transform: scale(0,1); -webkit-transform-origin: 0 0; transform-origin: 0 0;}
.portfolio-item .portfolio-hover::after {top: 30px; right: 50px; bottom: 30px; left: 50px; border-right: 1px solid #11585d; border-left: 1px solid #11585d;
  -webkit-transform: scale(1,0); transform: scale(1,0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0;}
.portfolio-item:hover .portfolio-hover::before,
.portfolio-item:hover .portfolio-hover::after {opacity: 1; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1);  -o-transform:scale(1);  transform:scale(1);}
.portfolio-item:hover .portfolio-hover::after {-webkit-transition-delay: 0.15s; transition-delay: 0.15s;}
.portfolio-item a.popup{z-index: 9; width: 40px; height: 40px; line-height: 40px; background: #11585d; display: inline-block; margin: 0 5px; color: #ffffff; font-size: 24px; border-radius: 50%; opacity: 0; transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transition: opacity 0.70s, -webkit-transform 0.70s; transition: opacity 0.70s, transform 0.70s;}
.portfolio-item a.popup:hover{color: #151515}
.portfolio-item:hover a.popup{opacity: 1; transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1);}
.portfolio-title{position: absolute; top: 50%; width: 100%; padding: 15px; left: 0; z-index: 99;}
.portfolio-item:before {opacity: 0; content: ''; display: inline-block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: rgba(0,0,0,0.8);
-webkit-transition: all 0.7s cubic-bezier(.68,.11,.13,.98); -moz-transition: all 0.7s cubic-bezier(.68,.11,.13,.98); transition: all 0.7s cubic-bezier(.68,.11,.13,.98); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.portfolio-item:hover:before{opacity: 1;}
.portfolio-item:hover img {-webkit-transform:scale(1.10); -moz-transform:scale(1.10); -ms-transform:scale(1.10);  -o-transform:scale(1.10);  transform:scale(1.10);}
.portfolio-meta li span, .social-icon span {color: #000; display: inline-block; font-size: 12px; text-transform: uppercase; width: 130px;}
.portfolio-details .social-icon ul{display: inline-block;}

/* ------------------------
    Team
------------------------*/
.team-member {overflow: hidden; position: relative; margin: 0 10px 50px; border-radius: 5px;}
.team-member .team-title {background: #11585d; bottom: 0; color: #fff; padding: 15px 10px; position: absolute; right: 0; width: 100%;}
.team-member .team-title h5{font-weight: bold;}
.team-member .team-title span{font-style: italic;}
.team-hover {background: rgba(255, 255, 255, 0.9); border: 20px solid rgba(126, 206, 54, 0.1); bottom: 0; left: 0; margin: 0; opacity: 0; position: absolute; right: 0; top: 0;}
.team-desk {opacity: 0; padding: 0 20px; position: absolute; top: 0; width: 100%; transform: translateY(-55%); -webkit-transform: translateY(-55%); -o-transform: translateY(-55%); -ms-transform: translateY(-55%); -moz-transform: translateY(-55%);}
.team-social {font-size: 35px; position: absolute; text-align: center; bottom: -80px; width: 100%; padding: 20px 10px; background: #ffffff;}
.team-member:hover .team-social {bottom: 0;}
.team-member:hover{-webkit-box-shadow: 0 5px 30px -10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 5px 30px -10px rgba(0, 0, 0, 0.3); box-shadow: 0 5px 30px -10px rgba(0, 0, 0, 0.3); transform: translateY(5px); -webkit-transform: translateY(5px); -o-transform: translateY(5px); -ms-transform: translateY(5px); -moz-transform: translateY(5px);}
 
/* ------------------------
    Side Background
------------------------*/
.img-side img{max-width: 100%}
.img-side.img-right {right: 0;}
.img-side {padding: 0; position: absolute!important; top: 0px; height: 100%; overflow: hidden; z-index: 100;}




/* ------------------------
    Testimonial
------------------------*/
.testimonial-content{font-size: 20px; color: #ffffff; line-height: 30px; font-weight: 400; font-style: italic;}
.testimonial-avatar{margin-top: 50px;}
.testimonial .testimonial-img {display: inline-block; margin-right: 15px;}
.testimonial .testimonial-img img {border-radius: 100%; overflow: hidden; border: 2px solid #ffffff;}
.testimonial .testimonial-caption {display: inline-block; vertical-align: middle; text-align: left;}
.testimonial h6{color: #11585d; font-weight: bold; text-transform: uppercase;}
.theme-bg .testimonial h6{color: #ffffff}
.testimonial-content p{position: relative; padding-top: 50px; padding-left: 35px; margin-bottom: 0; line-height: 38px;}
.testimonial-content p:before {content: "\e67f"; font-family: 'themify'; font-style: italic; font-weight: normal; text-decoration: inherit; font-size: 70px;
 position: absolute; top: 45px; left: 50%; color: rgba(0, 255, 255, 0.2);}
.theme-bg .testimonial-content p:before{ color: rgba(255, 255, 255, 0.5);}
.testimonial-content p:after {content: ""; position: absolute; top: 70px; left: 0; background: #11585d; width: 30px; height: 2px;}
.theme-bg .testimonial-content p:after{background: #ffffff;}
.testimonial-caption label{margin-bottom: 0; color: #ffffff; font-style: italic;}
.white-bg .testimonial-caption label{color: #151515;}



/* ------------------------
    Client logo
------------------------*/
.client-logo {background: #11585d; border-radius: 5px; padding: 30px;}
.client-logo img{opacity: 0.6}

/* ------------------------
    Contact Us
------------------------*/
iframe{width: 100%; height: 400px; border: none;}
.contact-box{padding: 50px; background: #ffffff; border-radius: 5px; border-top: 2px solid #11585d; position: relative;}
.form-group{margin-bottom: 20px; position: relative;}
 label{font-size: 14px; color: #333}
.form-control{height: 50px; border-radius: 5px; font-size: 12px; background: none; border-color: #eceff8; box-shadow: none;}
textarea.form-control{height: 130px;}
.form-control:focus{box-shadow: none; border-color: #11585d;}
.contact-info{padding: 30px; height: auto !important; background: #ffffff; border-radius: 5px; border-bottom: 2px solid #11585d; position: relative;}
.media-icon li{padding-left:40px; position: relative; color: #151515;}
.media-icon li i{position: absolute; left: 0; top: 0; font-size: 22px; color: #11585d}
.media-icon li a{color: #151515;}
.media-icon li a:hover{color: #11585d;}
.help-block.with-errors {position: absolute; color: red; right: 0; font-size: 10px;}

/* ------------------------
    Video
------------------------*/
.video-btn a {background: #11585d; color: #fff; width: 60px; height: 60px; -webkit-border-radius: 50px;
 border-radius: 50px; text-align: center; line-height: 60px; font-size: 26px; cursor: pointer; display: inline-block; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out; -webkit-transition-property: color, background, border-color; transition-property: color, background, border-color;}
.video-btn {min-width: 60px; min-height: 50px; padding: 15px 0; position: relative; display: inline-block;}
.video-btn-pos{position: absolute; position: absolute; left: 50%; top: 50%;}
.html5-video {height: 100%; left: 0; opacity: 1; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -2;}
.html5-video video {width: 100%;}



.about-top{
    background:url(../images/about-top.jpg) no-repeat;
    background-size: cover;
    padding: 30px 0;
    height: 150px;
    position: relative;
}

/* .about-top:after{
    background:url(../images/bg-media.svg) bottom no-repeat ;
    content: "";
    position: absolute;
    width: 100%;
    height: 69px;
    margin: 0 auto;
    bottom: -10px;
    object-fit: cover;
    transform: rotate(0);

} */

.about-top h2{
    color: #fff;
    font-size:40px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 20px;
    font-weight: 800;
}


.container.triangles-of-section {
    position: relative;
    background-color: #ffffff;
   
}

.container:before{
    content: " ";
    display: table;
}

.slidebg > .container.triangles-of-section div {
    bottom: -100px !important;
}
.slidebg > .container.triangles-of-section div.square-left, .slidebg > .container.triangles-of-section div.square-right {
    bottom: -103px !important;
}

.container.triangles-of-section .square-left {
    width: 900px;
    height: 103px;
    position: absolute;
    left: -1000px;
    top:17px;
    overflow: hidden;
}


.container.triangles-of-section .triangle-up-left {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 20px !important;
    left: -100px;
    overflow: hidden;
}
.container.triangles-of-section .triangle-up-left:after {
    content: "";
    position: absolute;
    width: 142px;
    height: 142px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 29px;
    left: -71px;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    z-index: 2;
}
.container.triangles-of-section .square-left:after {
    content: "";
    position: absolute;
    width: 900px;
    height: 100px;
    background: #fff;
    top: 3px;
    left: 0px;
}
.container.triangles-of-section .triangle-up-right {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 20px;
    right: -100px;
    overflow: hidden;
}
.container.triangles-of-section .triangle-up-right:after {
    content: "";
    position: absolute;
    width: 142px;
    height: 142px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 29px;
    left: 29px;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    z-index: 2;
}


.container.triangles-of-section .square-right {
    width: 900px;
    height: 103px;
    position: absolute;
    right: -1000px;
    top: 17px;
    overflow: hidden;
}
.container.triangles-of-section .square-right:after {
    content: "";
    position: absolute;
    width: 900px;
    height: 100px;
    background: #fff;
    top: 3px;
    left: 0px;
}

.process-top{
    background:url(../images/process-top.jpg) no-repeat;
    background-size: cover;
    padding: 30px 0;
    height: 150px;
    position: relative;
    margin-bottom: 30px;
}

.process-top h2{
    color: #fff;
    font-size:40px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 20px;
    font-weight: 800;
}


.mb-100{
    margin-bottom: 100px;
}

.whatsapp{
    position: fixed;
    top: 50%;
    z-index: 999;
    left: 0;

}

.pro-top{
    background:url(../images/pro-top.jpg) no-repeat;
    background-size: cover;
    padding: 30px 0;
    height: 150px;
    position: relative;
   
}

.pro-top h2{
    color: #fff;
    font-size:40px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 20px;
    font-weight: 800;
}

.con-top{
    background:url(../images/con-top.jpg) no-repeat;
    background-size: cover;
    padding: 30px 0;
    height: 150px;
    position: relative;
}

.con-top h2{
    color: #fff;
    font-size:40px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 20px;
    font-weight: 800;
}