@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap');

* {
   margin: 0rem;
   padding: 0rem;
}

body {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   color: #444444;
   font-size: 0.875rem;
   font-family: 'Open Sans', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Poppins', sans-serif;
   margin: 0;
   padding: 0;
   color: #222222;
}

p {
   color: #444444;
}

ul,
p {
   margin: 0rem;
   padding: 0rem;
}

.nopadding {
   margin: 0;
   padding: 0;
}

/******************************
      Header area start
*******************************/
#header {
   position: fixed;
   z-index: 10;
   width: 100%;
}

.menu_area {
   position: absolute;
   top: 3%;
   left: 0;
   width: 100%;
   z-index: 2;
   background: transparent;
   -webkit-transition: 500ms ease;
   -o-transition: 500ms ease;
   -moz-transition: 500ms ease;
   transition: 500ms ease;
}

.menu_area.scrolled {
   background: #444444;
}

.logo img {
   width: 73%;
}

.menu ul {
   margin: 0;
   padding: 0;
}

.menu ul li {
   list-style: none;
   display: inline-block;
}

.menu ul li a {
   padding: 0.75rem;
   text-decoration: none;
   color: #fff;
   font-size: 0.875rem;
   font-family: 'Open Sans', sans-serif;
   display: block;
   font-weight: 700;
   -webkit-transition: .2s;
   -o-transition: .2s;
   -moz-transition: .2s;
   transition: .2s;
   text-transform: capitalize;
}

.menu ul li a:hover {
   color: #913bbe;
}

/* Menu area end */

/* Header Body Area Start */
.header_bg {
   background-image: url(../images/header_bg.jpg);
   position: relative;
   z-index: 1;
   overflow: hidden;
   max-width: 125rem;
   margin: 0 auto;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

.header_bg::after {
   content: '';
   position: absolute;
   background-image: url(../images/color1.png);
   top: 18%;
   left: 0%;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   z-index: -1;
}

.header_bg::before {
   content: '';
   position: absolute;
   background-image: url(../images/color2.png);
   top: 16%;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   z-index: -1;
   left: 7%;
}

.header_body_text {
   color: #fff;
   padding: 21.875rem 0rem;
}

.header_body_text h2 {
   font-size: 1.875rem;
   font-weight: 700;
   margin-bottom: 0.3125rem;
   color: #fff;
}

.header_body_text h1 {
   font-size: 3.75rem;
   font-weight: 700;
   color: #fff;
}

.header_body_text p {
   font-size: 1.5rem;
   padding: 1.875rem 0rem;
   color: #fff;
}

.header_body_download_btn h4 {
   font-size: 0.875rem;
   color: #fff;
}

.header_body_text a {
   text-decoration: none;
}

.header_body_download_btn img {
   margin-top: -0.9375rem;
}

/******************************
      Header Area End
*******************************/

/******************************
      Story Section Start
*******************************/
.story_bg {
   background-image: url(../images/story/story_bg.png);
   background-repeat: no-repeat;
   background-position: center;
   padding: 5.625rem 0rem;
}

.story_gallery {
   position: relative;
   height: 33.75rem;
}

.story_gallery img:nth-child(1) {
   width: 50%;
   position: absolute;
   top: 50%;
   left: 1%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
}

.story_gallery img:nth-child(2) {
   position: absolute;
   left: 41%;
   top: 3%
}

.story_gallery img:nth-child(3) {
   position: absolute;
   top: 0%;
   left: 56%;
   width: 44%;
}

.story_gallery img:nth-child(4) {
   position: absolute;
   left: 40%;
   bottom: 7%;
}

.story_gallery img:nth-child(5) {
   position: absolute;
   bottom: 0%;
   left: 50%;
   width: 28%;
   border: 0.625rem solid #913BBE;
}

.story_gallery img:nth-child(6) {
   position: absolute;
   bottom: 23%;
   left: 80%;
}

.story_text {
   color: #222222;
   padding-top: 6.25rem;
}

.story_text h3 {
   font-size: 1.5rem;
   text-transform: uppercase;
   color: #913bbe;
   font-weight: 600;
}

.story_text h2 {
   font-size: 2.8125rem;
   margin-bottom: 1.875rem;
   margin-top: 0.625rem;
}

.story_text p {
   margin-top: 1.8125rem;
   margin-bottom: 2.8125rem;
   color: #444444;
}

.story_text a {
   text-decoration: none;
}

.story_arrow_btn h4 {
   font-size: 0.875rem;
   color: #222222;
   font-weight: 700;
}

.hr {
   background: #f6f6f6;
   height: 0.125rem;
}

/******************************
     Story Section End
*******************************/

/******************************
   Services section start
*******************************/
#services {
   padding: 5.625rem 0rem;
}

.service_icons h3 {
   font-size: 1.5rem;
   font-weight: 700;
   margin-top: 1.25rem;
   margin-bottom: 2.1875rem;
}

.service_icons p {
   font-size: 0.875rem;
}

.service_icons {
   margin-bottom: 1.25rem;
   text-align: center;
}

.service_icon_bg {
   background-image: url(../images/services/service_icon_bg.png);
   background-repeat: no-repeat;
   background-position: center;
   height: 6.25rem;
   position: relative;
}

.s_icon {
   font-size: 2.3125rem;
   text-align: center;
   position: absolute;
   top: 23%;
   left: 39%;
   color: #913bbe;
}

/******************************
   Services section end
*******************************/

/************************************
   CounterUp js on scrolling start
*************************************/
#counterup {
   background: #913bbe;
   padding: 5.625rem 0rem;
   text-align: center;
}

.count_test {
   font-size: 3.75rem;
   color: #fff;
   font-weight: 700;
   line-height: 2.875rem;
   display: inline-block;
}

.count_heading {
   float: right;
}

.count_heading h4 {
   color: #fff;
   font-size: 1rem;
   font-weight: 700;
}

.count_heading h3 {
   font-size: 1.3125rem;
   color: #fff;
   font-weight: 700;
}

/************************************
   CounterUp js on scrolling end
*************************************/

/************************************
   Recent Works Start
*************************************/
#recent_works {
   padding-top: 5.3125rem;
   padding-bottom: 5.625rem;
   overflow: hidden;
}

.brands_logo {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -moz-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}

.recent_wroks_heading h3 {
   font-size: 1.875rem;
   font-weight: 700;
}

.recent_wroks_heading p {
   color: #999999;
   margin-top: 1.875rem;
   margin-bottom: 5.3125rem;
}

.recent_gallery_bg {
   background-image: url(../images/recent-works/recent_work_bg_2.png);
   background-repeat: no-repeat;
   position: relative;
   height: 37.5rem;
   -webkit-background-size: contain;
   -moz-background-size: contain;
   -o-background-size: contain;
   background-size: contain;
}

.recent_gallery_bg img:nth-child(1) {
   width: 100%;
   position: absolute;
   z-index: 4;
   top: 50%;
   left: 0;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
}

.recent_gallery_bg img:nth-child(2) {
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   z-index: 2;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
}

.recent_gallery_bg img:nth-child(3) {
   position: absolute;
   bottom: 0%;
   left: 90%;
   z-index: 3;
}

.recent_works_text {
   display: table-cell;
   height: 37.5rem;
}

.recent_works_text h2 {
   font-size: 2.25rem;
   font-weight: 700;
}

.recent_works_text p {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
}

.recent_works_text a {
   text-decoration: none;
}

/************************************
   Recent Works End
*************************************/

/************************************
   Services Section 2 Start
*************************************/
#services_2 {
   padding: 5.625rem 0rem;
   overflow: hidden;
}

.sevice_text h3 {
   color: #fff;
}

.single_service_item {
   position: relative;
   margin-right: 0.625rem;
}

.at-item:after {
   content: '';
   position: absolute;
   background: #000;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0.4;
   -webkit-transition: .3s;
   -o-transition: .3s;
   -moz-transition: .3s;
   transition: .3s;
}

.single_service_item:hover .at-item {
   color: #3079ed;
   -webkit-animation-name: angry-animation;
   -moz-animation-name: angry-animation;
   -o-animation-name: angry-animation;
   animation-name: angry-animation;
   -webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
   -o-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-timing-function: cubic-bezier(0.27, 0.04, 0.76, 1.01);
   -moz-animation-timing-function: cubic-bezier(0.27, 0.04, 0.76, 1.01);
   -o-animation-timing-function: cubic-bezier(0.27, 0.04, 0.76, 1.01);
   animation-timing-function: cubic-bezier(0.27, 0.04, 0.76, 1.01);
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -o-animation-delay: 0s;
   animation-delay: 0s;
   -webkit-animation-iteration-count: 1;
   -moz-animation-iteration-count: 1;
   -o-animation-iteration-count: 1;
   animation-iteration-count: 1;
   -webkit-animation-direction: normal;
   -moz-animation-direction: normal;
   -o-animation-direction: normal;
   animation-direction: normal;
}

@-webkit-keyframes angry-animation {
   0% {
      -webkit-transform: rotateY(-180deg);
      transform: rotateY(-180deg);
   }

   100% {
      -webkit-transform: rotateY(0);
      transform: rotateY(0deg);
   }
}

@-moz-keyframes angry-animation {
   0% {
      -webkit-transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
      transform: rotateY(-180deg);
   }

   100% {
      -webkit-transform: rotateY(0);
      -moz-transform: rotateY(0deg);
      transform: rotateY(0deg);
   }
}

@-o-keyframes angry-animation {
   0% {
      -webkit-transform: rotateY(-180deg);
      transform: rotateY(-180deg);
   }

   100% {
      -webkit-transform: rotateY(0);
      transform: rotateY(0deg);
   }
}

@keyframes angry-animation {
   0% {
      -webkit-transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
      transform: rotateY(-180deg);
   }

   100% {
      -webkit-transform: rotateY(0);
      -moz-transform: rotateY(0deg);
      transform: rotateY(0deg);
   }
}

.service_2_content img {
   width: 100%;
}

.sevice_text {
   position: absolute;
   top: 70%;
   left: 5%;
   z-index: 1;
}

.sevice_text h3 span {
   display: block;
}

.servic_text_1 h3 {
   font-size: 1.875rem;
}

.servic_text_2 h3 span,
.servic_text_3 h3 span,
.servic_text_4 h3 span {
   font-size: 1.875rem;
}

.servic_text_2 h3,
.servic_text_3 h3,
.servic_text_4 h3 {
   font-size: 1.125rem;
}

.servic_text_1 h3 span {
   font-size: 3rem;
}

.service_img_2 img,
.service_img_3 img {
   height: 100%;
}

.service_img_1 img,
.service_img_4 img {
   height: 100%;
}

.service_img_3 {
   margin-top: 0.625rem;
}

/************************************
   Services Section 2 End
*************************************/

/************************************
   People Say Section Start
*************************************/
#people_say {
   background-image: url(../images/people-say/people_say_bg.png);
   padding-top: 6.25rem;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

.reviews_img img {
   width: 100%;
}

.people_say_content {
   position: relative;
   display: table-cell;
   height: 31.25rem;
}

.people_say_content h2 {
   display: inline-block;
}

.people_say_content img {
   line-height: 4.375rem;
   position: absolute;
   top: 22%;
   right: 20%;
}

.people_say_content p {
   margin-top: 3.125rem;
   margin-bottom: 3.125rem;
}

.people_say_content h5 {
   font-size: 1.125rem;
   font-weight: 700;
}

.people_say_content h5 span {
   display: block;
   font-size: 0.875rem;
   font-weight: normal;
   margin-top: 0.3125rem;
}

/************************************
   People Say Section End
*************************************/


/************************************
   Brand Section Start
*************************************/
.brands_logo:nth-child(1),
.brands_logo:nth-child(2),
.brands_logo:nth-child(3),
.brands_logo:nth-child(5),
.brands_logo:nth-child(6) {
   border-right: 0.0625rem solid #ddd;
}

.brands_logo:nth-child(1),
.brands_logo:nth-child(2),
.brands_logo:nth-child(3),
.brands_logo:nth-child(4) {
   border-bottom: 0.0625rem solid #ddd;
}

.brand_icon {
   padding: 6.25rem;
}

/************************************
   Brand Section End
*************************************/


/************************************
   Latest News Section Start
*************************************/
#latest_news {
   padding: 6.25rem 0rem;
}

.latest_news_single_item h2 {
   font-size: 1.125rem;
   font-weight: 700;
   margin-top: 1.875rem;
   margin-bottom: 1.5625rem;
}

.latest_news_single_item img {
   width: 100%;
}

.latest_news_single_item p {
   margin-bottom: 1.875rem;
}

.lastes_news_border {
   padding-top: 1.5625rem;
   border-top: 0.0625rem solid #ddd;
}

.lastes_news_border span {
   color: #999999;
}

.lastes_news_border a {
   color: #222222;
   font-weight: 700;
   font-family: 'Poppins', sans-serif;
   text-decoration: none;
}

/************************************
   Latest News Section End
*************************************/

/************************************
   Footer Section Start
*************************************/
#footer {
   background-image: url(../images/footer/footer_bg.png);
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   padding-top: 18.75rem;
   padding-bottom: 3.125rem;
}

.footer_text h2 {
   font-weight: 700;
}

.footer_text p {
   margin-top: 3.125rem;
   margin-bottom: 7.5rem;
}

.form_submit {
   position: relative;
}

.form_submit:after {
   content: '';
   position: absolute;
   width: 100%;
   border-bottom: 0.125rem solid #d5cdd9;
   bottom: -11%;
   left: 0%;
}

.form_submit input[type="email"] {
   width: 84%;
   border: none;
   padding: 0.625rem;
   background: none;
   outline-color: #913bbe;
}

.form_submit input[type="submit"] {
   padding: 0.9375rem 1.5625rem;
   outline: none;
   border: none;
   color: #fff;
   background: #913bbe;
   font-weight: 700;
}

.footer_h {
   height: 21.25rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -moz-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

.social_icons {
   font-size: 1.625rem;
   padding-left: 1.5625rem;
}

.social_icons a:nth-child(1) {
   color: #3b5998;
}

.social_icons a:nth-child(2) {
   color: #1da1f2;
}

.social_icons a:nth-child(3) {
   color: #dd4d3b;
}

.social_icons a:nth-child(4) {
   color: #0077b5;
}

.social_icons a {
   padding: 0.3125rem;
}

.footer_rights a {
   color: #222222;
   font-weight: 700;
   font-family: 'Poppins', sans-serif;
   text-decoration: none;
}

.menu.menu_bottom a {
   color: #222;
   padding-top: 0;
}

.top_bottom_button {
   position: fixed;
   right: 2%;
   bottom: 19%;
   width: 3.4375rem;
   height: 3.4375rem;
   background: #913bbe;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -moz-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -moz-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   z-index: 11;
   font-size: 1.25rem;
   border: none;
   color: #fff;
   -webkit-transition: .2s;
   -moz-transition: .2s;
   -o-transition: .2s;
   transition: .2s;
   opacity: 0;
}

.top_bottom_button:hover {
   background-color: #9858bb;
}

/************************************
   Footer Section End
*************************************/