/*Global Css*/
*{margin: 0;padding: 0;box-sizing: border-box;}
:root {
    --primary: #eb2227;
    --secondary: #c3282d;
    --heading: #000;
    --shadow-color: 0deg 0% 0%;
}
.navbar {
    box-shadow: 0.3px 0.5px 0.8px hsl(var(--shadow-color) / 0.02), 1.4px 2.9px 4.6px -0.2px hsl(var(--shadow-color) / 0.07), 4.2px 8.4px 13.5px -0.4px hsl(var(--shadow-color) / 0.12);
}
html{scroll-behavior: smooth;}
body{font-family: 'Rubik', sans-serif;font-size: 16px;color: #58585a;font-weight: 400;line-height: 24px;background: #fff;}
a{text-decoration: none;color: #337ab7;transition: all .3s;}
.img-fluid{width: 100%;}
.btn-primary{background-image: -webkit-linear-gradient(0deg,var(--primary) 0%, var(--secondary) 100%);border: none;border-radius: 5px;padding: 20px 30px;font-size: 18px;font-weight: 700;text-transform: uppercase;}
.btn-primary:focus{
    background-color: var(--primary);
    border: none;
    box-shadow: none;
}
.btn-primary i{
    -webkit-animation: arrows 1.5s infinite;
    -moz-animation: arrows 1.5s infinite;
    -ms-animation: arrows 1.5s infinite;
    animation: arrows 1.5s infinite;
}
@keyframes arrows {
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/*Section Annimation*/
.reveal {
  position: relative;
  opacity: 0;
}

.reveal.active {
  opacity: 1;
}
.active.fade-bottom {
  animation: fade-bottom 1s ease-in;
}
.active.fade-left {
  animation: fade-left 1s ease-in;
}
.active.fade-right {
  animation: fade-right 1s ease-in;
}
@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}



/*Header Css*/
.navbar-nav .nav-item {
    padding: 0 12px;
}
.navbar-expand-lg .navbar-nav .nav-link {
    color: #676868;
    font-size: 16px;
    font-weight: 500;
    padding: 0;
    position: relative;
    transition: all 0.5s ease-in-out;
}
.navbar-expand-lg .navbar-nav .nav-link::before{
    content: attr(data-item);
    transition: 0.5s;
    color: var(--primary);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 0;
    overflow: hidden;
}
.navbar-expand-lg .navbar-nav .nav-link:hover::before{
    width: 100%;
    transition: all 0.5s ease-in-out;
}
.navbar-expand-lg .navbar-nav .nav-link.active {
	color: var(--primary);
}
.navbar {
   width: 100% !important;
    transition: all 0.6s ease;
    z-index:111;
}
.navbar-toggler-icon {
    width: auto;
    height: auto;
}
.navbar-toggler i {
    color: var(--secondary);
}
.navbar-toggler:focus {
    box-shadow: none;
    line-height: normal;
}
.site_header.sticky .navbar {
  position: fixed;
  width: 100%;
  z-index: 111;
  padding: 5px 0;
  border-bottom: 1px solid #ddd;
}
.site_header.sticky .navbar-brand img {
  max-height: 40px;
}
.navbar-brand img {
  transition: all 0.6s ease;
}
.onscroll-pad{
    padding:0px;
}
.noscroll-pad{
    padding:20px;
}


/*Banner Css*/
.banner_sec {
	display: block;
	box-sizing: border-box;
	min-height: 90vh;
	background-color: var(--secondary);
	clip-path: ellipse(150% 100% at 50% 0%);
	background-image: url(../img/bannerBg3.png);
	background-repeat: no-repeat;
	background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
}
.banner_heading{
	font-size: 70px;
	font-weight: 700;
	text-transform: uppercase;
/*    white-space: nowrap;
    overflow: hidden;*/
}
.banner_text p{
	font-size: 20px;
}
.banner_text .btn{
	background: #000;
}
.banner_image{
	position: relative ;
    padding-top: 250px;
}
@keyframes flyIn{0%,100%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(1rem);transform:translateY(1rem)}}
.flyIn{
    -webkit-animation-name: flyIn;
    animation-name: flyIn;
    -webkit-animation-duration: 4.5s;
    animation-duration: 4.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: .1s;
    animation-delay: .1s;
}
.banner_image_top{
    position: absolute;
    display: block;
    width: 100%;
    height: auto;
    z-index: 9;
    top: 115px;
    -webkit-animation-duration: 4.5s;
    animation-duration: 4.5s;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    left: -99px;
}
.banner_image_top img{
    width: 500px;
}
.banner_static_image{
    width: 550px;
}
/*.banner_heading{
    animation: animated-text 2s steps(30,end) 1s 1 normal both;
}
@keyframes animated-text{
  from{width: 0;}
  to{width: 472px;}
}*/

/* Section Common Css */
.section_holder {
    padding: 120px 0;
}

/* Section Heading */
.section_heading {
    text-transform: uppercase;
    font-size: 40px;
    color: var(--heading);
    font-weight: 600;
}

.section_heading_label {
    font-size: 14px;
    display: block;
    color: var(--primary);
}

.section_heading_holder p {
    font-size: 20px;
}
.section_heading_holder p.section_text {
    font-size: 16px;
    text-align: justify;
    line-height: 24px;
    padding: 20px 0;
}
/* Section Icon Box */
.icon_box {
    padding: 37px 100px 32px 37px;
    background: #fff;
    position: relative;
    box-shadow: 0 0 20px 0 #eee;
    border-radius: 10px;
    font-size: 14px;
    transition: linear .5s;
    z-index: 1;
    margin-bottom: 30px;

}
/*.icon_box::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(45deg,var(--secondary) 0%, var(--primary) 100%);
    top: 0;
    left: 0;
    opacity: 0;
    transition: all .5s;
    z-index: -1;
}*/
.icon_box:hover,.icon_box:hover .icon_box_heading a, .icon_box:hover .icon_box_link{
    color: #fff;
}

.icon_box::after {
    background-image: url(../img/IconBoxBg.png);
    background-position: top center;
    background-size: 100%;
    background-repeat: no-repeat;
    content: "";
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 1;
    transition: all .5s;
}
.icon_box:hover::after {
    opacity: 1;
    background-color: #dc171e;
    background-image: url(../img/IconBoxBgHover.png);
}
/*.icon_box:hover {
    background: linear-gradient(0deg, rgba(275,219,72,1) 0%, rgba(27,812,229,1) 100%);
}*/
/*.icon_box::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary);
}*/
.icon_box_heading a{
    font-size: 24px;
    color: var(--heading);
    font-weight: 600;
    margin-bottom: 25px;
    line-height: normal;
}
.icon_box_link {
    color: #000;
    font-weight: 600;
    font-size: 14px;
}
.icon_box_text {margin-bottom: 25px;}
.icon_box_link i {color: var(--primary);}
.icon_box:hover .icon_box_link i{color: #fff;-webkit-animation: arrows 1.5s infinite;-moz-animation: arrows 1.5s infinite;-ms-animation: arrows 1.5s infinite;animation: arrows 1.5s infinite;}

@keyframes beat{to { transform: scale(1.4); }}
.icon_box_icon {margin-bottom: 30px;}
.icon_box_icon img {width: 50px;animation: beat 2s infinite alternate;transform-origin: center;}

/* Section half image */
#about .section_image{text-align: right;padding-right: 100px;position: relative;}
#about .section_image::after{content: "";width: 280px;height: 265px;position: absolute;top: 0;right: 100%; background-image: url(../img/dots.png);background-repeat:no-repeat;background-position: top right;-webkit-animation: swing 3s infinite alternate;-moz-animation: swing 3s infinite alternate;-ms-animation: swing 3s infinite alternate;animation: swing 3s infinite alternate; margin-right: -150px;}
@keyframes swing{to { transform: perspective(600px) translate3d(0px, 0px, 0px) rotateY(37.621deg) } from { transform: perspective(600px) translate3d(0px, 0px, 0px) rotateY(-37.621deg)}}
#about, .waved_section {
    position: relative;
    background: #fff6f6;
    margin: 163px 0;
}
#about::before,#about::after, .waved_section::before, .waved_section::after  {
    content: "";
    width: 100%;
    background: url("../img/wavedBg1.png");
    position: absolute;
    bottom: 100%;
    height: 163px;
}
#about::after, .waved_section::after {
    bottom: auto;
    top: 100%;
    transform: rotate(-180deg);
}
.image_label {
    position: absolute;
    top: 100%;
    right: 164px;
    margin-top: -180px;
    line-height: 30px;
}
.image_label .image_label_content {
    width: 170px;
    padding: 30px 20px;
    border-radius: 15px;
    background: #000;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
}

.image_label_heading {
    color: var(--primary);
    font-size: 72px;
    line-height: 58px;
}
#about .section_right_content::after {
    content: "";
    width: 280px;
    height: 265px;
    position: absolute;
    top: 100%;
    right: 0;
    background-image: url(../img/dots.png);
    background-repeat: no-repeat;
    background-position: top right;
    -webkit-animation: swing 3s infinite alternate;
    -moz-animation: swing 3s infinite alternate;
    -ms-animation: swing 3s infinite alternate;
    animation: swing 3s infinite alternate;
    opacity: .3;
    z-index: 1;
}

.section_right_content {
    position: relative;
}
.styled_list {
    padding: 0;
    list-style: none;
    margin-top: 30px;
}
.styled_list li {
    margin-bottom: 10px;
    color: #676868;
}
.styled_list li i {
    color: var(--primary);
}
.bounce2 {
  animation: bounce2 2s ease infinite;
}
.icon_box_style2 .icon_box{
    padding: 37px 32px;
}
/*.icon_box_style2 .icon_box::after {
    display: none;
}*/
@keyframes bounce2 {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}
.bounce {
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}
.shake {
  animation: shake 10s ease infinite;
}
@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-20px);}
    20%, 40%, 60%, 80% {transform: translateX(20px);}
}
.service_details_sec .section_image img{width: 70%; margin: 0 auto;}
.service_details_sec .flyIn {animation-duration: 2s;}
#our_products{position: relative;}
.waved_bg {
    position: absolute;
    background: #fff6f6;
    width: 100%;
    height: 30%;
    top: 50%;
    transform: translate(0,-50%);
    margin-top: 5%;
    margin: 9% 0 0;
}
.waved_bg.waved_section::before, .waved_bg.waved_section::after {
    content: "";
    width: 100%;
    background: url(../img/wavedBg1.png);
    position: absolute;
    bottom: 100%;
    height: 160px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
}
.waved_bg.waved_section::after {
    bottom: auto;
    top: 100%;
    transform: rotate(-180deg);
}

#portfolio{
    background-image: url(../img/portfolioBg.png);
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-size: contain;
    background-position: center;
    position: relative;
    z-index: 1;

    background-color: #f2e2e2;
}
.filters {
    box-shadow: 0 0 10px #eeeeee;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    color: #000;
    margin-bottom: 45px;
    width: 98%;
}

.filters li.active {
    color: #eb2227;
}

.filters li {
    margin: 0 20px;
    cursor: pointer;
}
.grid_item .item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 0 10px #eee;
}
.grid_item:hover .item::after {
    opacity: .9;
    background-color: #dc171e;
    background-image: url(../img/IconBoxBgHover.png);
}
.grid_item .item::after {
    background-image: url(../img/IconBoxBg.png);
    background-position: top center;
    background-size: 100%;
    background-repeat: no-repeat;
    content: "";
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: all .5s;
}
.portfolio_content {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    transform: translate(0,-50%);
    text-align: center;
    color: #fff;
    z-index: -1;
    opacity: 0;
    transition: all .5s;
}


/* Code By tuRjo */
.filters-content .desktop-mobile-wrapper-real .show{
    display: none;
}
.filters-content .desktop-mobile-wrapper-real .show h5{
    color: var(--primary);
    font-size: 16px;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    max-width: 75%;
}
.filters-content .desktop-mobile-wrapper-real .show p{
    font-size: 13px;
    color:#000;

}




.grid_item:hover .portfolio_content{
    opacity: 1;
    z-index: 2;
}
.portfolio_content h5 a{
    color: #fff;
    font-size: 24px;
    font-weight: 600;

}
#client {
    background: var(--secondary);
    background-image: url(../img/client_bg.jpg);
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    padding-bottom: 200px;
}

/* #portfolio:before {
    clip-path: ellipse(150% 100% at 50% 0%);
    content: "";
    position: absolute;
    width: 100%;
    height: 500px;
    bottom: 0;
    left: 0;
    background: #fff;
    margin-bottom: -28px;
    z-index: -1;
    background-color: #f2e2e2;
} */
.client_slider_item {background: #fff;margin: 0 6px;border-radius: 10px;}

.client_slider_item img {object-fit: contain;width: 100%;height: 126px;max-width: none;}
.slick-dots li button::before, .slick-dots li.slick-active button:before {font-size: 15px; color: #fff;}
ul.slick-dots {top: 100%;}
.slick-list {padding-bottom: 25px;}
#country.waved_section::before, #country.waved_section::after {
    margin: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    background: url(../img/wavedBg1White.png);
    height: 185px;
}
#country {
    background: #fff;
    margin: 0;
    padding-bottom: 0;
}
#country .container, .about_content {
    overflow: hidden;
}
/* Footer css */
#site_footer {background: #000000;padding: 200px 0 60px;}
#site_footer p{color: #ddd;font-size: 16px;margin-top: 20px;}
#site_footer p.footer_info{font-size: 14px;}
.footer_sub_title{font-size: 18px;}
#site_footer p i{color: var(--primary);}
.social_links ul {list-style: none;padding: 0;display: flex;margin-top: 20px;}
.social_links ul li a {color: #fff;margin-right: 10px;font-size: 18px;}
.social_links ul li a:hover {color: var(--primary);}


.navbar .main_menu .sidebar-ending .sidebar-social_links ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.navbar .main_menu .sidebar-ending .sidebar-social_links ul li a {
    color: black;
    margin-right: 10px;
    font-size: 30px;
}
.navbar .main_menu .sidebar-ending .sidebar-social_links ul li a:hover {
    color: var(--primary);
}
.navbar .main_menu .sidebar-ending .footer_sub_title{
    font-size: 18px;
    text-align: center;
}
.navbar .main_menu .collapse .sidebar-ending {
    bottom: 60px!important;
    right: 42px !important;
}

body{
    position: relative;
}
#sidebar-overlay{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background-color: rgba(0,0,0,0.5);
}






.form_singel {
    padding-top: 0;
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 0 10px #ddd;
    margin: 50px 0 0px;
}
.form_singel input.form-control, .form_singel textarea.form-control {
    border-width: 0 0 1px;
    border-radius: 0;
    color: #58585a;
    text-transform: capitalize;
    padding: 0;
    padding-bottom: 15px;
    margin-bottom: 40px;
    border-color: var(--heading) !important;
}
.form_singel .form-control::placeholder, .form_singel textarea.form-control::placeholder {
  color: #58585a !important;
}
input.form-control:focus, textarea.form-control:focus, .form-control.is-invalid:focus, .was-validated .form-control:invalid:focus, .form-control.is-valid:focus, .was-validated .form-control:valid:focus {

    box-shadow: none;

}
.copyright_sec{
    background: var(--primary);
    text-align: center;
    color: #fff;
    font-size:14px;
}
.footer_menu a {
    margin-bottom: 10px;
    display: block;
}

#portfolio .grid_item {
    min-height: 105px;
}
.menu-close {
    display:none;
}
.testimonial_slider .slick-slide img {
    border: 1px solid #ddd;
    margin: 0 auto 10px;
    border-radius: 50%;
    padding: 10px;
}
.testimonial_slider .title a {
    color: var(--primary);
    font-size: 16px;
    margin-bottom: 0;
}

.testimonial_slider .title h4 {
    margin-bottom: 0;
}
.testimonial_slider .slick-dots li button::before, .slick-dots li.slick-active button:before {
    color: var(--primary);
}
#free_quote{
    position:relative;
}
#free_quote .waved_bg {
    bottom: 0;
    top: auto;
    transform: none;
    height: 50%;
}
#free_quote .waved_bg.waved_section::after{
    display:none;
}
#free_quote h3 {
    font-size: 18px;
    color: var(--heading);
}

#free_quote p a {
    color: #58585a;
    font-size: 16px;
}
.sub_menu {
    position: absolute;
    display: block;
    left: 0;
    top: 100%;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    z-index: 10;
    -webkit-transform: translateY(80px);
    -moz-transform: translateY(80px);
    transform: translateY(80px);
    -webkit-transition: opacity .4s,transform .4s;
    -moz-transition: opacity .4s,transform .4s;
    transition: opacity .4s,transform .4s;
    width: 100%;
    background: #fff;
    transition: all .7s;
    padding: 20px;
    border-radius: 0;
}
.nav-item:hover>.sub_menu, .top_menu li:hover>.sub_menu {
    visibility: visible;
    overflow: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}
.sub_menu ul {
    flex-wrap: wrap;
    width: 100%;
}

.sub_menu ul li {
    width: 25%;
    padding: 20px 0;
    text-align: center;
}

.sub_menu ul li a {
    color: #676868;
    font-size: 16px;
    font-weight: 500;
}
.menu_icon {
    margin-bottom: 10px;
}
.dropdown-toggle{
    /* display:none; */
}
.navbar-expand-lg .navbar-nav {
    align-items: center;
}
.navbar-nav .nav-item:last-child a {
    background: var(--secondary);
    padding: 5px 10px;
    border-radius: 4px;
    color: #fff;
    letter-spacing: 1px;
    display:inline-block;
    text-transform:uppercase;
}
.navbar-nav .nav-item:last-child a:before{
    display:none;
}
section#site_footer .navbar-brand {
    width: 40%;
    display: block;
}

section#site_footer .navbar-brand img {
    width: 100%;
}
#free_quote {
    position: relative;
    margin: 120px 0 0;
    padding-top: 60px;
    padding-bottom: 60px;
}
#free_quote.waved_section::after {
    margin: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    background: url(../img/wavedBg1WhitePink.png);
    height: 185px;
}
header.site_header {
    min-height: 106px;
}
.cookie-alert {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 320px;
  margin: 0 !important;
  z-index: 999;
  opacity: 0;
  transform: translateY(100%);
  transition: all 500ms ease-out;
}

.cookie-alert.show {
  opacity: 1;
  transform: translateY(0%);
  transition-delay: 1000ms;
}
a.btn.btn-primary.accept-cookies {
    padding: 0.375rem 0.75rem;
    font-size: 16px;
    display: inline-block;
    font-weight: 500;
    text-transform: none;
}
.service_details_sec {
    overflow: hidden;
}







.error{
    color: #c3282d;
}

/* start portfollio real */

.mobile_frame{
    position: relative;
}

.portfolio_img{
    position: absolute;
    top: 19px;
    z-index: 1;
    display: block;
    max-width: 100%;
    width: auto;
    min-width: 99%;
    /* height: 100% !important; */
}
.desktop_frame{
    width: 86%;
    height: 100%;
    position: relative;
}
.desktop_wrapper{
    position: relative;
}
.desktop-mobile-wrapper-real{
    position: relative;
    margin-bottom: 58px;
    margin-right: 20px;
}
.desktop-wrapper-real{
    position: relative;
}
.mobile-wrapper-real{
    position: absolute;
    top: 48px;
    right:0;
    z-index: 99;
}
.desktop-frame-real{
    width: 86%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.desktop_bg{
    width: 100%;
    overflow: hidden;
}
.project-link{
    width: 86%;
    display: contents;
    position: relative;
    height: auto;
    transition: all 0.5s ease-in-out;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: -19px;
    right: 0;
    background: #ff0000cd;
    width: 100%;
    z-index: 9;
    box-shadow: 0 0 10px #eeeeee;
    display: none;
    transition: all 0.5s ease-in-out;
    border-radius: 6px 6px 0 0;
}

a.project-link:hover .overlay {
    display: block;
    transition: all 0.5s ease-in-out;
}
.overlay h5{
    text-align: center;
    margin-top: 19%;
    color: white;
}
.overlay .cat{
    text-align: center;
    color: white;
}
.mobile-frame-real{
    position: relative;
}
.mobile_bg{
    width: 145px;
    overflow: hidden;

}
.mobile_portfolio {
    position: absolute;
    top: 25px;
    left: 10px;
    right: 10px;
    bottom: 0;
    border-radius: 6px;
    height: 206px;
    display: block;
    border-radius: 6px;
    width:118px;
}

/* JS Vector Map Styles */

  #map {
    margin: auto;
    width: 100%;
    height: 600px;
    text-align: center;
  }



  @media (max-width: 500px) {
    #map {
      width: 375px;
      height: 200px;
      max-width: 100%;
    }
  }





/* responsive */
@media  screen and (max-width:767px) {
    /* Code by tuRjo */
    .mobile_portfolio {
        width: 65px !important;
        height: 111px !important;
    }
    .mobile_bg {
        width: 84px !important;
        height: 148px !important;
    }
    .mobile-wrapper-real {
        top: 13px !important;
    }
    .overlay h5
    {
        font-size: 13px;
    }
    .overlay .cat
    {
        font-size: 12px;
    }
    .section_holder .clearfix
    {
        padding-top: 60px;
    }
    .filters-content .desktop-mobile-wrapper-real .show{
        display: block;
        background: #e9cdcde8;
        border: 1px solid #e7e7e7c2;
        padding: 5px;
        padding-top: 1px;
        box-shadow: 1px 1px 1px 1px rgb(235 235 235 / 20%);

    }


    .desktop-frame-real{
        width: 100%;


    }

    .portfolio_img{
        max-width: 98%;
        width: 100%;
        left:3px;

    }

    .desktop-mobile-wrapper{
        margin-bottom: 111px;
        margin-right: 0;
    }
    .project-link{
        width: 95%;
    }
    .desktop-mobile-wrapper-real{
        margin-right:0;
    }

    .column-reverse-gap
    {
        flex-direction: column-reverse !important;
        gap: 20px;
    }
    .desktop-mobile-wrapper-real{
        margin-bottom:30px;
    }

}



.desktop-mobile-wrapper-real .show p {
    margin-bottom:0;
}


/* Code by tuRjo */
#portfolio-section
{
    background: #F2E2E2;
}
.heading-label
{
    font-size: 14px;
    display: block;
    color: var(--primary);
    text-transform: uppercase;
}
.portfolio-heading
{
    text-transform: uppercase;
    font-size: 40px;
    color: var(--heading);
    font-weight: 600;
}
.section-description
{
    font-size: 20px;
}

.portfolio-filter-container
{
    box-shadow: 0 0 9px #eeeeee;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 45px;
    width: 98%;
    margin-top: 50px;
    margin-bottom: 40px;
    background-color: rgba(var(--bs-white-rgb), 90%)!important;
    width: 100%;
}
.portfolio-filter
{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-left: 0;
}
.portfolio-filter-container  .portfolio-filter li a
{
    color: #000;
}
.portfolio-filter-container .portfolio-filter li
{
    margin: 0 20px;
}
.portfolio-tab-container
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 30px;
}
.portfolio-tab-container .portfolio-tab {
    /* padding: 1rem; */
    background-color: #e9cdcde8;
}
.portfolio-tab-container .portfolio-tab .tab-desktop-background
{
    width: 90%;
    background-image: url("../../../public/assets/img/Safari-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.portfolio-tab-container .portfolio-tab .tab-desktop-background .tab-desktop-overlay
{
    display: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ff0000cd;
}
.portfolio-tab-container .portfolio-tab .tab-desktop-background:hover .tab-desktop-overlay
{
    display: block;
}
.portfolio-tab-container .portfolio-tab .tab-desktop-background .tab-desktop-overlay .tab-desktop-overlay-description
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #fff;
    text-align: center;
}
.portfolio-tab-container .portfolio-tab .tab-desktop-wrapper
{
    /* margin-bottom: 60px; */
}
.portfolio-tab-container .portfolio-tab .tab-desktop-background img
{
    width: 100%;
    margin-top: 16px;
}
.portfolio-tab-container .portfolio-tab .tab-mobile-background
{
    width: 158px;
    background-image: url(../../../public/assets/img/mobile-frame.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 56px;
    right: 0px;
}
.portfolio-tab-container .portfolio-tab .tab-mobile-background img {
    width: 129px;
    margin-top: 28px;
    max-height: 221px;
    display: block;
    margin: 30px 10px 31px;
    border-radius: 8px;
}
.portfolio-tab-container .portfolio-tab .tab-description{
    display: none;
    background: #e9cdcde8;
    /* border: 1px solid #e7e7e7c2; */
    /* padding: 5px; */
}
.portfolio-tab-container .portfolio-tab .tab-description h5{
    color: var(--primary);
    font-size: 16px;
    /* margin-top: 12px !important; */
    margin-bottom: 0 !important;
    max-width: 75%;
}
.portfolio-tab-container .portfolio-tab .tab-description p{
    font-size: 13px;
    color:#000;
    margin-bottom: 0;
}

/* For responsive view */

@media only screen and (max-width: 1400px)
{
    .mobile_bg {
        width: 129px !important;
        height: 225px !important;
    }
    .mobile_portfolio {
        height: 181px !important;
        width: 101px !important;
    }
    .portfolio-tab-container .portfolio-tab .tab-mobile-background {
        width: 150px;
        background-image: url(../../../public/assets/img/mobile-frame.png);
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        top: 60px;
        right: -20px;
    }
    .portfolio-tab-container .portfolio-tab .tab-mobile-background img {
        width: 104px;
        margin-top: 28px;
        max-height: 176px;
        display: block;
        margin: 30px 9px 16px;
        border-radius: 8px;
    }
}

@media only screen and (max-width: 1200px)
{
    .icon_box{padding: 37px 32px;}
    .mobile_bg {
        width: 105px !important;
        height: 187px !important;
    }
    .mobile_portfolio {
        height: 147px !important;
        width: 85px !important;
        left: 7px !important;
        right: 7px !important;
    }
    .portfolio-tab-container .portfolio-tab .tab-mobile-background {
        width: 148px;
        top: 65px;
        right: -40px;
    }

    .portfolio-tab-container .portfolio-tab .tab-mobile-background img {
        width: 81px;
        margin-top: 28px;
        max-height: 137px;
        margin: 22px 7px 14px;
    }
}


@media only screen and (max-width: 991px){
    .banner_text {padding-top: 30px;}
    .banner_heading {font-size: 50px;}
    .banner_image {text-align: center;padding-top: 100px;width: 300px;margin: 0 auto;}
    .banner_image_top {left: -16px;top: 30px;text-align: left;}
    .banner_static_image {width: 300px;margin: 0 auto;max-width: none;margin-left: 0px;}
    .navbar-toggler.menu-tab {
        margin-left: auto;
    }
    .banner_image_top img {width: 250px;max-width: none;}
    .collapse:not(.show) {
        display: block;
    }
    .navbar-collapse {
        width: 300px;
        right: -300px;
        height: 100%;
        position: fixed;
        z-index: 1111111;
        top: 0px;
        transition: all .6s ease-in-out;
        padding: 15px;
        color: #fff;
        overflow: auto;
    }
    .show .navbar-collapse {
      right: 0px;
      background-color: #fff4f4;
      transition: all .6s ease-in-out;
      box-shadow: 0 0 10px #333;
    }
    .main_menu {
      position: relative;
      justify-content: flex-end !important;
      flex-basis: 100%;
      flex-grow: 1;
      align-items: center;
    }
    .menu-close {
      background: #000;
      border: none;
      color: #fff;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      float: right;
      display:block;
    }
    .navbar-collapse::after {
      background-image: url(../img/IconBoxBg.png);
      background-position: top center;
      background-size: 100%;
      background-repeat: no-repeat;
      content: "";
      width: 100%;
      position: absolute;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
      opacity: 1;
      transition: all .5s;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
      color: #000;
      padding: 15px 0;
    }
    .navbar-nav {
      margin-top: 50px;
    }
    .navbar-expand-lg .navbar-nav .nav-link:hover {
        color: var(--primary);
    }
    .navbar-expand-lg .navbar-nav .nav-link:hover::before {
        display: none;
    }
    .dropdown-toggle {
        /* width: 50px;
        height: 26px;
        line-height: 26px;
        background: transparent;
        display: block;
        position: absolute;
        top: 15px;
        right: 0;
        text-align: right;
        padding-right: 10px;
        z-index: 1; */
        margin-left: 12px;
    }
    .sub_menu.dropdown-menu {
        display: none;
        top: auto;
        left: auto;
        transform: none;
        visibility: visible;
        overflow: visible;
        opacity: 1;
        width: 100%;
        background: none;
        border: none;
        padding: 20px 0;
        border-radius: 0;
    }
    .sub_menu.dropdown-menu.show {
        display: block;
    }
    .nav-item {
        position: relative;
    }
    .sub_menu ul {
        display: block !important;
    }

    .sub_menu ul li {
        width: 100%;
        text-align: left;
        padding: 10px 0;
    }

    .menu_icon img {
        width: 40px;
    }

    .sub_menu .container {
        padding: 0;
    }
    .dropdown-toggle::after {
        border-top-color: var(--primary);
    }
    .navbar-expand-lg .navbar-nav {
        align-items: flex-start;
    }
    header.site_header {
        min-height: 90px;
    }
    #about .section_right_content::after, #about .section_image::after {
        width: 100px;
        height: 110px;
        background-size: contain;
        margin-top: 0;
    }
    .image_label .image_label_content {
        padding: 5px 15px;
        font-size: 18px;
        width: auto;
    }
    .image_label_heading {
        font-size: 42px;
        line-height: normal;
    }
    .image_label {
        margin-top: -120px;
        right: 35px;
        font-size: 14px;
        padding: 15px;
        width: auto;
    }
    .navbar .main_menu .collapse .logo,
    .navbar .main_menu .collapse .sidebar-ending
    {
        display: unset !important;
    }

    /* Code By tuRjo */
    .mobile-wrapper-real
    {
        top: 32px !important;
    }
    .mobile_portfolio {
        height: 114px !important;
        width: 66px !important;
    }
    .mobile_bg {
        width: 85px !important;
        height: 151px !important;
    }


    .portfolio-tab-container .portfolio-tab .tab-mobile-background {
        width: 108px;
        top: 42px;
        right: -28px;
    }
    .portfolio-tab-container .portfolio-tab .tab-mobile-background img {
        width: 67px;
        margin-top: 28px;
        max-height: 115px;
        margin: 17px 6px 12px;
    }
    .portfolio-tab-container .portfolio-tab .tab-desktop-background .tab-desktop-overlay .tab-desktop-overlay-description h5
    {
        font-size: 16px;
    }
    .portfolio-tab-container .portfolio-tab .tab-desktop-background .tab-desktop-overlay .tab-desktop-overlay-description p
    {
        font-size: 14px;
    }
}

@media only screen and (max-width: 767px){
    .banner_text {text-align: center;padding-top: 30px;}
    .banner_heading {font-size: 30px;}
    .banner_text p{font-size: 14px;}
    .mobile_heading_center{text-align: center;}
    .icon_box{margin-bottom: 15px;}
    .section_holder {padding: 60px 0;}
    .navbar-brand img {max-height: 40px;}
    .mobile_no_x_padding{padding-right: 0;padding-left: 0;}
    #about .section_image::after, #about .section_right_content::after {width: 100px;height: 100px;background-size: 100%;}
    .image_label {margin-top: -120px;right: 35px;font-size: 14px;padding: 15px;width: auto;}
    .image_label_heading {font-size: 42px;line-height: normal;}
    #about .section_image{padding-right: 0;margin-bottom: 30px;}
    .section_heading_holder p.section_text {text-align: left;}
    #about .section_right_content::after {left: auto;margin-top: -100px;}
    #services .section_image img{width: 100%;}
    .mobile_order_first{order: -1;}
    .styled_list {margin-bottom: 30px;}
    .section_heading {font-size: 30px;}
    .portfolio-heading{font-size: 30px;}
    .section_heading_holder p {font-size: 16px;}
    .section-description {font-size: 16px;}
    .btn-primary {font-size: 16px;}
    #about, .waved_section {margin: 100px 0;padding-top: 0;}
    .image_label .image_label_content {padding: 5px 15px;font-size: 18px;width: auto;}
    .waved_bg.waved_section {height: 80%;}
    .filters li {font-size: 12px;text-transform: capitalize;margin: 0 5px;}
    .portfolio-filter-container .portfolio-filter li {font-size: 12px;text-transform: capitalize;margin: 0 5px;}
    #portfolio {padding-top: 0;}
    .mobile_no_y_padding{padding-top: 0;padding-bottom: 0;
    }

}

@media (max-width: 768px) {
    /* #map {
      width: 450px;
      height: 250px;
    } */


    /* Code By tuRjo */
    .portfolio-tab-container .portfolio-tab .tab-desktop-background
    {
        width: 100%;
    }

    .portfolio-tab-container
    {
        gap: 20px;
    }
    .portfolio-tab-container .portfolio-tab .tab-mobile-background {
        width: 91px;
        top: 43px;
        right: -10px;
    }
    .portfolio-tab-container .portfolio-tab .tab-mobile-background img {
        width: 65px;
        margin-top: 28px;
        max-height: 108px;
        display: block;
        margin: 21px 6px 11px;
        border-radius: 8px;
    }
    .portfolio-tab-container .portfolio-tab .tab-desktop-background .tab-desktop-overlay .tab-desktop-overlay-description
    {
        align-items: flex-start;
        margin-left: 10px;
    }
    .portfolio-tab-container .portfolio-tab .tab-description{
        display: block;
    }
    .portfolio-tab-container .portfolio-tab .tab-desktop-wrapper {
        margin-bottom: 0;
    }
    }



@media  screen and (max-width:577px) {
    /* Responsive by tuRjo */
    .mobile_portfolio {
        width: 83px !important;
        height: 152px !important;
        left: 10px !important;
        right: 10px !important;
    }
    .mobile_bg {
        width: 108px !important;
        height: 192px !important;
    }
    .mobile-wrapper-real {
        top: 20px !important;
    }
    .overlay h5
    {
        font-size: 1.25rem;
    }
    .overlay .cat
    {
        font-size: 16px;
    }

    /* Code By tuRjo */
    .portfolio-tab-container
    {
        grid-template-columns: repeat(1, 1fr);
    }
    .portfolio-tab-container .portfolio-tab .tab-desktop-background
    {
        width: 100%;
    }
    .portfolio-tab-container .portfolio-tab .tab-mobile-background {
        width: 120px;
        top: 50px;
        right: 4px;
    }
    .portfolio-tab-container .portfolio-tab .tab-mobile-background img {
        width: 93px;
        margin-top: 28px;
        max-height: 164px;
        margin: 26px 11px 16px;
    }
    .portfolio-tab-container .portfolio-tab .tab-desktop-background .tab-desktop-overlay .tab-desktop-overlay-description
    {
        align-items: center;
        margin-left: 0;
    }

}