@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Bold.woff2') format('woff2'),
    url('../fonts/OpenSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Medium.woff2') format('woff2'),
    url('../fonts/OpenSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.woff2') format('woff2'),
    url('../fonts/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


.top_bar p,
.top_bar p a,
.top_bar ul li a {
    color: #fff
}

.font-size-14,
.top_bar ul li {
    font-size: 14px
}

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    background: #fff
}

body a {
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
    text-decoration: none;
    outline: 0
}

.carousel img {
    width: 100%
}

.btn {
    cursor: pointer
}

.btn:active,
.btn:focus {
    background: #828386!important;
    outline: 0!important
}

a {
    text-decoration: none!important
}

.common_padding {
    padding-top: 30px;
    padding-bottom: 30px
}

.top_bar {
    background: #a60a2a;
    padding-top: 5px;
    padding-bottom: 5px
}

.top_bar ul li {
    color: #fff;
    padding: 0 10px
}
.top_bar svg{
    height: 15px;
    width:15px;
    margin-right: 5px;
    vertical-align: middle;

}
.top_bar ul li .fa-phone {
    transform: rotate(90deg)
}

.menubar {
    padding-top: 5px;
    padding-bottom: 5px
}

.menubar .navbar {
    padding: 0
}

.menubar img {
    width: 200px;
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all
}

.menubar .navbar:before {
    content: '';
    position: absolute;
    top: 15px;
    left: -100%;
    height: 44px;
    width: 100%;
    background-image: url(../images/grafiqberry_patern_left.svg);
    background-repeat: repeat-x;
    background-position: center;
    background-size: contain
}

.menubar .navbar .navbar-nav li {
    font-size: 14px;
    font-weight: 600;
    padding: 5px 4px;
    text-transform: uppercase
}

.menubar .navbar .navbar-nav li .nav-link {
    color: #000;
    border-bottom: 3px solid transparent;
    position: relative;
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all
}

.menubar .navbar .navbar-nav li .dropdown-item {
    font-size: 14px
}

.menubar .navbar .navbar-nav li .nav-link:focus,
.menubar .navbar .navbar-nav li .nav-link:hover {
    color: #a60a2e;
    border-bottom: 3px solid #fff
}

.menubar .navbar .navbar-nav li .nav-link:before {
    transition: 1s all;
    -webkit-transition: 1s all;
    -moz-transition: 1s all;
    -o-transition: 1s all;
    -ms-transition: 1s all
}

.menubar .navbar .navbar-nav li .nav-link:focus:before,
.menubar .navbar .navbar-nav li .nav-link:hover:before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    bottom: -6px;
    margin: auto;
    height: 10px;
    width: 10px;
    background: #a60a2e;
    border-radius: 50%
}

.masthead {
    display: table;
    position: relative;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    z-index: 800;
    background-color: #000;
    margin-left: auto;
    margin-right: auto
}
.fade-carousel .btn{text-shadow: none;border-radius: 50px !important;}
.fade-carousel .btn-grafiqberry {
    background: #a60a2a;
    color: #fff;
    border: 1px solid #a60a2a;
    margin-right: 10px;
    padding: 10px 30px;
    font-size: 14px;
}

.fade-carousel .btn-grafiqberry:hover {
    background: #fff;
    color: #a60a2a
}
.fade-carousel {
    position: relative;
    height: 90vh;
    overflow: hidden;
}

.fade-carousel .carousel-inner .carousel-item {
    height: 90vh;
    /*position: relative;*/
    /*overflow: hidden;*/
}
.fade-carousel .carousel-inner .carousel-item:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(166,10,42,0.3);
    z-index: 1;
}
.fade-carousel .carousel-inner .carousel-caption {
    top: 55%;
    left: 50%;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .75);
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    width: 80%;
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
    -moz-transition: 2s all ease-in-out .1s;
    -ms-transition: 2s all ease-in-out .1s;
    -o-transition: 2s all ease-in-out .1s;
    transition: 2s all ease-in-out .1s
}

.hvr-float,
.services .service_list .service_icon {
    -webkit-transform: perspective(1px) translateZ(0)
}

.fade-carousel .carousel-inner .carousel-caption .headingtag {
    font-size: 400%;
    font-weight: 800;
    margin: 0;
    padding: 0;
    text-transform: uppercase
}
.fade-carousel .carousel-inner .carousel-caption .subheading{
    font-size: 16px;
}
.fade-carousel .carousel-inner .active .carousel-caption {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out .1s;
    -moz-transition: 2s all ease-in-out .1s;
    -ms-transition: 2s all ease-in-out .1s;
    -o-transition: 2s all ease-in-out .1s;
    transition: 2s all ease-in-out .1s
}

.fade-carousel .carousel-inner .slider {
    height: 90vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat
}

.home_service {
    background-image: url(../images/grafiqberry_service_bg.png);
    background-repeat: no-repeat;
    background-position: center bottom
}
.home_service h1{
    color:  #000000;
    padding-top: 30px;
    font-size: 200%;

}
.home_service .home_service_logo {
    width: 25%
}

.home_service .service_viewall .btn {
    background: #a60a2e;
    color: #fff;
    border-radius: 40px;
    font-size: 14px;
    padding: 10px 30px;
    border: 2px solid #a60a2e;
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all
}

.home_service .service_viewall .btn-outline-light {
    background: transparent;
    color: #a60a2e;
}

.home_service .service_viewall {
    background-repeat: repeat-x;
    background-position: center;
    background-size: contain;
    height: 44px;
}

.home_service .service_viewall {
    background-image: url(../images/grafiqberry_patern_left.svg);
    display: flex;
    justify-content: center;
}

.home_service .service_viewall .home_abt {
    background: #fff;
    padding: 0 16px;
}

.home_service .service_viewall .btn:hover,
.home_service .service_viewall .btn:focus,
.home_service .service_viewall .btn:active {
    color: #a60a2e;
    background: transparent !important;
}

.home_service p {
    font-size: 14px;
    padding: 2px 20px 0;
    letter-spacing: 1px;
    color: #3f4043;
}

.home_service .service_list {
    margin-bottom: 60px
}

.home_service .service_list img {
    height: 60px;
    width: 60px;
    margin: 0 auto 20px
}

.hvr-float {
    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.home_service .service_list:active .hvr-float,
.home_service .service_list:focus .hvr-float,
.home_service .service_list:hover .hvr-float {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px)
}

.home_service .service_list .service_list_heading {
    font-weight: 700;
    font-size: 16px;
    color: #828386;
    letter-spacing: 1px
}

.home_service .service_list:hover .service_list_heading {
    color: #a60a2e
}

.latest_works header {
    overflow: hidden;
    position: relative
}

.latest_works header h2 {
    font-size: 30px;
    font-weight: 100;
    color: #a60a2e;
    text-align: center;
    text-transform: uppercase
}

.latest_works header h2:after,
.latest_works header h2:before {
    content: '';
    position: absolute;
    height: 1px;
    width: 39%;
    margin: 20px 0 0;
    background-color: #a60a2e
}

.latest_works header h2:before {
    left: 0
}

.latest_works header h2:after {
    right: 0
}

.latest_works .work_viewall .btn {
    background: #828386;
    color: #fff;
    border-radius: 40px;
    font-size: 14px;
    padding: 10px 30px
}

.latest_works .work_viewall .btn:after,
.latest_works .work_viewall .btn:before {
    position: absolute;
    content: '';
    width: 42%;
    background-repeat: repeat-x;
    background-position: center;
    background-size: contain;
    height: 44px;
    margin: -12px 0 0
}

.latest_works .work_viewall .btn:before {
    left: 0;
    background-image: url(../images/grafiqberry_patern_left.svg)
}

.latest_works .work_viewall .btn:after {
    right: 0;
    background-image: url(../images/grafiqberry_patern.svg)
}

.latest_works .work_viewall .btn:hover {
    background: #a60a2e;
    color: #fff
}

.home_blog header {
    overflow: hidden;
    position: relative;
    margin-bottom: 20px
}

.home_blog header h2 {
    font-size: 30px;
    font-weight: 100;
    color: #a60a2e;
    text-align: center;
    text-transform: uppercase
}

.home_blog header h2:after,
.home_blog header h2:before {
    content: '';
    position: absolute;
    height: 1px;
    width: 44%;
    margin: 20px 0 0;
    background-color: #a60a2e
}

.home_blog header h2:before {
    left: 0
}

.home_blog header h2:after {
    right: 0
}

.home_blog .blog_list .col-xl-12 {
    overflow: hidden;
    padding: 0;
    position: relative
}
.home_blog .blog_list img{
    border-radius: 20px;
}
.home_blog .blog_list .blog_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .7);
    border-radius: 20px;
}

.home_blog .blog_list .blog_overlay p {
    color: #ccc;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    height: 40px;
    font-size: 14px;
    overflow: hidden;
    padding: 0 20px
}

.home_blog .blog_list .blog_overlay a:hover {
    color: #fff
}

.home_clients header {
    overflow: hidden;
    position: relative;
    margin-bottom: 20px
}

.home_clients header h3 {
    font-size: 30px;
    font-weight: 100;
    color: #a60a2e;
    text-align: center
}

.home_clients header h3:after,
.home_clients header h3:before {
    content: '';
    position: absolute;
    height: 1px;
    width: 40%;
    margin: 20px 0 0;
    background-color: #a60a2e
}

.home_clients header h3:before {
    left: 0
}

.home_clients header h3:after {
    right: 0
}

.home_clients .owl-carousel .item {
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 15px;
}
.quick_contact {
    padding-top: 120px;
    padding-bottom: 100px;
    border-top: 10px solid #a60a2e;
    background-image: url(../images/grafiqberry_quickcontact.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover
}

.quick_contact .quick_contact_no,
.quick_contact .quick_contact_no a{
    font-size: 60px;
    font-weight: 100;
    padding: 0 0 10px;
    color: #a60a2e
}

.quick_contact .quick_contact_no svg {
    width: 60px;
    height: 60px;
    margin-right: 10px;
}

/*.quick_contact .quick_contact_no .fa-mobile-alt {*/
/*    font-size: 70px*/
/*}*/

.quick_contact p {
    color: #000;
    margin: 0;
    padding: 30px 0 0
}

.quick_contact .quick_contact_connect {
    font-weight: 600;
    font-size: 40px;
    padding: 0 0 20px;
    color: #000
}

.quick_contact .btn {
    border-radius: 25px;
    font-size: 14px;
    background: #a60a2e;
    border: 1px solid #a60a2e;
    color: #fff;
    padding: 10px 30px
}

footer .footer_links ul li a,
footer h4 {
    color: #a60a2e
}

.quick_contact .btn:hover {
    background: #828386;
    border: 1px solid #828386
}

footer {
    padding-top: 70px;
    padding-bottom: 30px;
    position: relative
}

footer:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    width: 100%;
    height: 43px;
    top: 5px;
    background-image: url(../images/grafiqberry_patern.svg);
    background-repeat: repeat-x;
    background-size: contain;
    background-position: center
}

footer h4 {
    font-weight: 700;
    font-size: 20px
}

footer .footer_links ul li {
    padding: 5px 0;
    font-size: 14px
}

footer .footer_links ul li a:hover {
    color: #828386
}

footer .footer_services ul li {
    padding: 10px 60px 5px 0;
    font-size: 14px
}

footer .footer_services ul li a {
    color: #a60a2e
}

footer .footer_services ul li a:hover {
    color: #828386
}

footer .footer_contact .footer_contact_item {
    position: absolute;
    top: -60%;
    right: 0;
    padding: 60px 20px 30px;
    margin: 0 10px 0 0;
    background: #a60a2e;
    border-radius: 50%;
    height: 400px;
    width: 400px;
    z-index: 1
}

footer .footer_contact .footer_contact_item img {
    width: 220px;
    margin-bottom: 15px
}

footer .footer_contact .footer_contact_item p {
    color: #fff;
    padding: 0 0 0 50px;
    font-weight: 400;
    display: flex;
}

footer .footer_contact .footer_contact_item p a {
    color: #fff
}

footer .footer_contact .footer_contact_item p svg{
    color: #fff;
    padding:0;
    /*float: left;*/
    /*font-size: 18px*/
    height: 20px;
    width: 20px;
    margin-right: 5px;
}

footer .footer_contact .footer_contact_item ul {
    margin-top: 20px
}

footer .footer_contact .footer_contact_item ul li svg {
    height: 20px;
    width: 20px;
}
footer .footer_contact .footer_contact_item ul li a{
    height: 40px;
    width: 40px;
    border: 2px solid #fff;
    border-radius: 50%;
    line-height: 34px;
    color: #fff;
    display: block;
}

footer .footer_contact .footer_contact_item ul li a:hover svg path{

    fill: #828386
}
footer .footer_contact .footer_contact_item ul li a:hover{
    border: 2px solid #828386;
}
footer .copyright {
    padding-top: 10px
}

footer .copyright p {
    color: #a60a2e
}

.dot:before {
    content: '';
    border: 3px solid #ff5b5b;
    background: 0 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    height: 400px;
    width: 400px;
    -webkit-animation: pulse 2s ease-out;
    -moz-animation: pulse 2s ease-out;
    animation: pulse 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0
}

@-moz-keyframes pulse {
    0% {
        -moz-transform: scale(1);
        opacity: 0
    }
    25% {
        -moz-transform: scale(1.01);
        opacity: .1
    }
    50% {
        -moz-transform: scale(1.03);
        opacity: .5
    }
    75% {
        -moz-transform: scale(1.05);
        opacity: .1
    }
    100% {
        -moz-transform: scale(1.06);
        opacity: 0
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        opacity: 0
    }
    25% {
        -webkit-transform: scale(1.01);
        opacity: .1
    }
    50% {
        -webkit-transform: scale(1.03);
        opacity: .5
    }
    75% {
        -webkit-transform: scale(1.05);
        opacity: .1
    }
    100% {
        -webkit-transform: scale(1.06);
        opacity: 0
    }
}

.innerpage_banner {
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding-top: 210px;
    padding-bottom: 10px
}

.innerpage_banner h1 {
    font-size: 50px;
    font-weight: 700;
    margin: 0;
    text-align: right;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .75)
}

.innerpage_banner h1:after {
    content: '';
    position: absolute;
    top: 10px;
    right: -100%;
    height: 44px;
    width: 100%;
    background-image: url(../images/grafiqberry_patern.svg);
    background-repeat: repeat-x;
    background-size: contain
}

.aboutpage {
    background-image: url(../images/innerpage_bg/about_bg.jpg)
}

.servicepage {
    background-image: url(../images/innerpage_bg/services_bg.jpg)
}

.workpage {
    background-image: url(../images/innerpage_bg/work_bg.jpg)
}

.blogpage {
    background-image: url(../images/innerpage_bg/blog_bg.jpg)
}

.contactpage {
    background-image: url(../images/innerpage_bg/contact_bg.jpg)
}
.casestudypage {
    background-image: url(../images/innerpage_bg/casestudy_bg.jpg)
}

.aboutus {
    background: #a60a2e;
    padding-top: 60px;
    padding-bottom: 60px
}

.aboutus .about_grafiqberry h4 {
    font-weight: 600;
    color: #fff;
    font-size: 30px;
    padding: 0 0 15px
}

.aboutus .about_grafiqberry p {
    color: #eee;
    font-size: 15px;
    line-height: 26px;
    padding: 0 0 20px;
    margin: 0;
    text-align: justify
}

.aboutus .grafiqberry_paterns_white {
    margin-top: 50px;
    margin-bottom: 40px;
    background-image: url(../images/grafiqberry_patern_white.png);
    background-repeat: repeat-x;
    height: 60px
}

.aboutus .about_mission h4,
.aboutus .about_vision h4 {
    font-weight: 600;
    color: #fff;
    padding: 0
}

.aboutus .about_mission h4 i,
.aboutus .about_vision h4 i {
    color: #fff;
    padding: 0 10px 0 0;
    font-size: 12px;
    margin-top: -10px
}

.aboutus .about_mission p,
.aboutus .about_vision p {
    color: #eee;
    font-size: 14px;
    line-height: 24px;
    padding: 0;
    margin: 0;
    text-align: justify
}

.about_experiance {
    padding-top: 60px;
    padding-bottom: 60px
}

.about_experiance h4 {
    letter-spacing: 1px;
    font-size: 22px;
    font-weight: 600;
    padding: 0 0 15px;
    position: relative
}

.about_experiance h4:before {
    position: absolute;
    content: '';
    left: -20px;
    top: 10px;
    background: #828386;
    height: 10px;
    width: 10px;
    border-radius: 50%
}

.about_experiance p {
    font-size: 14px;
    color: #555;
    text-align: justify
}

.meet_teem {
    padding-bottom: 60px;
    padding-top: 60px
}

.meet_teem header {
    margin-bottom: 30px;
    overflow: hidden
}

.meet_teem header h3 {
    color: #a60a2e;
    font-size: 30px;
    position: relative
}

.meet_teem header h3:after,
.meet_teem header h3:before {
    content: '';
    position: absolute;
    height: 1px;
    width: 38%;
    margin: 20px 0 0;
    background-color: #a60a2e
}

.meet_teem header h3:before {
    left: 0
}

.meet_teem header h3:after {
    right: 0
}

.meet_teem .owl-carousel .item img {
    width: 220px;
    height: 220px;
    margin: auto;
    border: 5px solid #a60a2e
}

.whychoose .whychoose_leftbg:before,
.whychoose .whychoose_rightbg:before {
    top: 0;
    right: 0;
    width: 120%;
    position: absolute;
    bottom: 0;
    content: ''
}

.meet_teem .owl-carousel .item p.member_name {
    padding: 15px 0 0;
    font-weight: 600;
    margin: 0
}

.meet_teem .owl-carousel .item p.member_position {
    padding: 0;
    font-weight: 100;
    margin: 0;
    color: #828386;
    font-size: 14px
}

.whychoose {
    overflow: hidden
}

.whychoose .whychoose_leftbg:before {
    left: -19%;
    background: url(../images/grafiqberry_whychoose.jpg) no-repeat;
    background-size: cover
}

.whychoose .whychoose_rightbg:before {
    left: 0;
    background: #f2f2f2
}

.whychoose .whychoose_rightbg {
    padding-top: 50px;
    padding-bottom: 50px
}

.whychoose h3 {
    font-weight: 700;
    color: #000;
    font-size: 30px
}

.whychoose p {
    padding: 10px 0;
    font-size: 14px;
    color: #000
}

.whychoose .whychoose_rightbg ul {
    list-style: none
}

.whychoose .whychoose_rightbg ul li {
    padding: 8px 0;
    color: #000
}

.whychoose .whychoose_rightbg ul li:before {
    content: '\f058';
    position: absolute;
    left: 25px;
    font-size: 18px;
    color: #a60a2a;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    text-transform: none!important
}

.contact_us {
    padding-top: 60px;
    padding-bottom: 60px;
    background-image: url(../images/contact_bg.png);
    background-position: left top;
    background-repeat: no-repeat
}

.contact_us .contact_address {
    padding-left: 120px
}

.contact_us .contact_address ul li {
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600
}

.contact_us .contact_address ul li a {
    color: #000
}

.contact_us .contact_address ul li span {
    color: #828386
}

.contact_us .contact_form input[type=email],
.contact_us .contact_form input[type=text],
.contact_us .contact_form select {
    height: 50px
}

.contact_us .contact_form .form-control {
    border: 2px solid #a60a2e;
    border-radius: 25px;
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: none
}

.contact_us .contact_form .btn {
    background: #a60a2e;
    border: 15px solid #fff;
    color: #fff;
    border-radius: 40px;
    font-size: 14px;
    padding: 10px 30px;
    letter-spacing: 1px
}

.contact_us .contact_form .btn:hover {
    background: #828386;
    color: #fff
}

.custom_select {
    position: relative;
    border: 2px solid #a60a2e;
    border-radius: 25px;
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px
}

.custom_select select {
    display: none
}

.select-selected {
    background-color: #fff;
    border-radius: 25px;
    font-size: 14px;
    padding: 11px 0!important
}

.select-selected:after {
    position: absolute;
    content: "";
    top: 20px;
    right: 15px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #000 transparent transparent
}

.select-selected.select-arrow-active:after {
    border-color: transparent transparent #000;
    top: 12px
}

.select-items div,
.select-selected {
    color: #000;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, .1);
    cursor: pointer;
    user-select: none
}

.select-items {
    position: absolute;
    background-color: #fff;
    border: 2px solid #a60a2e;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border-radius: 25px;
    overflow: hidden;
    -webkit-box-shadow: 0 3px 13px 0 rgba(0, 0, 0, .53);
    -moz-box-shadow: 0 3px 13px 0 rgba(0, 0, 0, .53);
    box-shadow: 0 3px 13px 0 rgba(0, 0, 0, .53)
}

.select-hide {
    display: none
}

.same-as-selected,
.select-items div:hover {
    background-color: rgba(0, 0, 0, .1)
}

.googlemap {
    overflow: hidden;
    border: 5px solid #a60a2e;
    border-radius: 25px;
    padding: 0;
    margin-top: 40px
}

.googlemap .locationmap {
    padding: 0;
    margin: 0 0 -5px;
    border: none;
    width: 100%;
    height: 400px
}

.services {
    padding-top: 0;
    padding-bottom: 60px
}

@-webkit-keyframes hvr-pulse {
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    75% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
}

@keyframes hvr-pulse {
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    75% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
}

.services .service_list {
    margin-top: 80px
}

.services .service_list .col-xl-12 {
    border: 2px solid #a60a2e;
    border-radius: 15px;
    padding: 0;
    height: 400px
}

.services .service_list .service_icon {
    position: absolute;
    top: -45px;
    left: 0;
    right: 0;
    height: 90px;
    width: 90px;
    border-radius: 50%;
    margin: 0 auto;
    text-align: center;
    line-height: 85px;
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    background: rgba(214, 21, 66, 1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(214, 21, 66, 1) 0, rgba(166, 10, 46, 1) 100%);
    background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0, rgba(214, 21, 66, 1)), color-stop(100%, rgba(166, 10, 46, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(214, 21, 66, 1) 0, rgba(166, 10, 46, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(214, 21, 66, 1) 0, rgba(166, 10, 46, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(214, 21, 66, 1) 0, rgba(166, 10, 46, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(214, 21, 66, 1) 0, rgba(166, 10, 46, 1) 100%);
    border: 2px solid #a60a2a
}

.services .service_list .service_patn_top,
.services .service_list .service_patn_top:after {
    height: 40px;
    background-image: url(../images/grafiqberry_patern_left.svg);
    background-repeat: repeat-x;
    background-size: contain
}

.services .service_list .service_icon i {
    font-size: 30px;
    color: #fff;
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
    -webkit-transform: perspective(1px) translateZ(0)
}

.services .service_list .service_icon i:before {
    font-size: 45px
}

.services .service_list .service_patn_top {
    margin-top: -3px;
    border-radius: 15px 15px 0 0;
    -webkit-box-shadow: inset 0 -48px 56px -17px rgba(255, 255, 255, 1);
    -moz-box-shadow: inset 0 -48px 56px -17px rgba(255, 255, 255, 1);
    box-shadow: inset 0 -48px 56px -17px rgba(255, 255, 255, 1)
}

.services .service_list .service_patn_top:after {
    position: absolute;
    content: '';
    bottom: 0;
    width: 100%;
    margin-bottom: -3px;
    border-radius: 0 0 15px 15px;
    -webkit-box-shadow: inset 0 48px 56px -17px rgba(255, 255, 255, 1);
    -moz-box-shadow: inset 0 48px 56px -17px rgba(255, 255, 255, 1);
    box-shadow: inset 0 48px 56px -17px rgba(255, 255, 255, 1)
}

.services .service_list h4 {
    font-size: 18px;
    color: #a60a2a;
    text-align: center;
    padding: 25px 15px 10px;
    letter-spacing: 1px;
    font-weight: 600
}

.services .service_list p {
    font-size: 14px;
    color: #999;
    text-align: justify;
    padding: 0 15px
}

.services .service_list .col-xl-12:hover .service_icon {
    top: 40%
}

.services .service_list .col-xl-12:hover a {
    background: rgba(166, 10, 42, .4);
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center
}

.services .service_list .col-xl-12:hover .service_icon {
    background: #fff;
    -webkit-animation-name: hvr-pulse;
    animation-name: hvr-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.services .service_list .col-xl-12:hover .service_icon i {
    color: #a60a2a
}

.service_single {
    padding-bottom: 50px;
    padding-top: 60px
}

.service_single .left_icon {
    position: relative;
    overflow: hidden
}
.service_single .left_icon img{
    width: 100px;height: 100px;
}
.new_sub_services ul{list-style: none;}
.new_sub_services li:first-child{padding-left: 0 !important;}
.new_sub_services li{padding: 15px !important;text-align: center !important;}
.new_sub_services li a img{padding: 5px !important;border: 1px solid #a60a2a;border-radius: 5px;display: block;margin: auto;width: 60px;height: 60px;}
.new_sub_services li a span{font-size: 12px;color: #666;text-align: center;display: inline-block;padding-top: 5px;}
.new_sub_services li:before{display: none !important;}
.service_single .left_icon .service_icon {
    height: 200px;
    width: 200px;
    line-height: 200px;
    border-radius: 50%;
    background: #a60a2a;
    margin: 0 auto;
    text-align: center;
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all
}

.service_single .left_icon:before {
    position: absolute;
    content: '';
    height: 100%;
    width: 1px;
    top: 400px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #a60a2a;
    margin: auto;
    z-index: -1
}

.service_single .left_icon .service_icon i {
    color: #fff;
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all
}

.service_single .left_icon .service_icon i:before {
    font-size: 120px
}

.service_single .service_single_list h4 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px
}

.service_single .service_single_list header {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    padding: 0 0 10px
}

.service_single .service_single_list header span {
    color: #a60a2a
}

.service_single .service_single_list h5 {
    font-size: 18px;
    font-weight: 600;
    color: #666;
    padding: 10px 0 0;
    position: relative
}

.service_single .service_single_list h5:before {
    position: absolute;
    content: '';
    left: -20px;
    top: 16px;
    background: #828386;
    height: 10px;
    width: 10px;
    border-radius: 50%
}

.service_single .service_single_list p {
    font-size: 16px;
    font-weight: 400;
    text-align: justify
}

.service_single .service_single_list p.text-danger {
    color: #a60a2a;
    font-weight: 600
}

.service_single .service_single_list ul li {
    font-size: 14px;
    padding: 5px 0 5px 15px;
    text-align: justify;
    color: #333
}

.service_single .service_single_list ul li:before {
    content: "\2022";
    color: #a60a2a;
    font-weight: 700;
    display: inline-block;
    width: 1em;
    margin-left: -1em
}

.service_single:hover .left_icon .service_icon {
    -webkit-animation: toRightFromLeft .3s forwards;
    -moz-animation: toRightFromLeft .3s forwards;
    animation: toRightFromLeft .3s forwards;
    background: #fff;
    border: 3px solid #a60a2a
}

.service_single:hover .left_icon .service_icon i {
    color: #a60a2a
}

.service_single .service_single_list {
    border-top: 1px solid #a60a2a;
    padding-top: 30px
}

.service_single .service_single_list:before {
    position: absolute;
    content: '';
    left: -68px;
    top: 24px;
    height: 1px;
    width: 78px;
    background: #a60a2a;
    transform: rotate(140deg);
    -webkit-transform: rotate(140deg);
    -moz-transform: rotate(140deg);
    -o-transform: rotate(140deg);
    -ms-transform: rotate(140deg);
    z-index: -1
}


.service_single_works {
    margin-top: 30px
}

.service_single_works header h3 {
    color: #a60a2e;
    font-size: 30px;
    position: relative;
    margin-bottom: 30px
}

.service_single_works header h3:before {
    content: '';
    position: absolute;
    right: 0;
    height: 1px;
    width: 75%;
    margin: 20px 0 0;
    background-color: #a60a2e
}

@-webkit-keyframes toRightFromLeft {
    49% {
        -webkit-transform: translate(100%)
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(-100%)
    }
    51% {
        opacity: 1
    }
}

@-moz-keyframes toRightFromLeft {
    49% {
        -moz-transform: translate(100%)
    }
    50% {
        opacity: 0;
        -moz-transform: translate(-100%)
    }
    51% {
        opacity: 1
    }
}

@keyframes toRightFromLeft {
    49% {
        transform: translate(100%)
    }
    50% {
        opacity: 0;
        transform: translate(-100%)
    }
    51% {
        opacity: 1
    }
}

#feedback {
    position: fixed;
    right: 0;
    bottom: 15%;
    height: 350px;
    margin-left: -3px;
    margin-bottom: -3px;
    z-index: 999
}

#feedback-form {
    float: right;
    width: 300px;
    z-index: 1000;
    padding: 15px;
    background-clip: padding-box;
    border: 1px solid rgba(166, 10, 42, .2);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    background: rgba(255, 255, 255, .9)
}

#feedback-form .form-control {
    box-shadow: none;
    border-radius: 15px;
    font-size: 14px;
    padding: 10px
}

#feedback-form .form-control:active,
#feedback-form .form-control:focus {
    border: 1px solid #a60a2a
}

#feedback-form .btn-grafiqberry {
    background: #a60a2a;
    color: #fff;
    border: 1px solid #a60a2a;
    border-radius: 15px;
    padding: 5px 15px;
    font-size: 14px
}

#feedback-form .btn-grafiqberry:hover {
    background: #fff;
    color: #a60a2a
}

#feedback-tab {
    float: left;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    text-align: center;
    width: 150px;
    height: 42px;
    background-color: rgba(166, 10, 42, .8);
    margin-top: 60px;
    margin-right: -54px;
    padding-top: 6px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg)
}
#feedback-tab svg{
    height: 15px;
    width: 15px;
}
#feedback-tab:hover {
    background-color: rgba(166, 10, 42, .5)
}

#feedback-form textarea {
    resize: none
}

.work_single_body header {
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .3)
}

.work_single {
    padding-top: 50px;
    padding-bottom: 50px
}

.work_single h1 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0 0 30px
}

.work_single p {
    font-size: 14px;
    color: #4c5b5c;
    padding: 0 0 30px
}

.work_single p.work_sinle_overview {
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 1px;
    border-bottom: 1px solid #a60a2a;
    color: #000;
    padding: 0 0 5px
}

.work_single img {
    border-radius: 5px
}

.blog {
    padding-bottom: 60px;
    padding-top: 60px
}

.blog .blog_list {
    margin-bottom: 40px
}

.blog .blog_list img {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 3px
}

.blog .blog_list .blog_content {
    background: #fff;
    margin: -60px auto 0;
    padding: 25px;
    width: 92%;
    -webkit-box-shadow: 0 2px 13px 0 rgba(0, 0, 0, .14);
    -moz-box-shadow: 0 2px 13px 0 rgba(0, 0, 0, .14);
    box-shadow: 0 2px 13px 0 rgba(0, 0, 0, .14)
}

.blog .blog_list .blog_content .btn {
    border: 1px solid #a60a2a;
    font-size: 14px;
    padding: 5px 15px;
    border-radius: 25px;
    color: #777
}

.blog .blog_list .blog_content h4 {
    padding: 20px 0 0;
    font-size: 20px;
    font-weight: 600
}

.blog .blog_list .blog_content h4 a {
    color: #000
}

.blog .blog_list .blog_content h4 a:hover {
    color: #a60a2a
}

.blog .blog_list .blog_content p {
    font-size: 14px;
    color: #777;
    line-height: 24px;
    padding: 0 0 10px
}

.blog .blog_list .blog_content ul li {
    font-size: 13px;
    padding: 0 10px;
    color: #777
}

.blog .blog_list .blog_content ul li a {
    color: #777
}

.blog .blog_list .blog_content ul li a:active,
.blog .blog_list .blog_content ul li a:focus,
.blog .blog_list .blog_content ul li a:hover {
    color: #a60a2a
}

.blog .blog_right .blog_search .form-control {
    border-radius: 20px;
    font-size: 14px;
    padding-right: 40px;
    padding-left: 20px;
    box-shadow: none
}

.blog .blog_right .blog_search .form-control:focus {
    border: 1px solid #a60a2a
}

.blog .blog_right .blog_search input[type=submit] {
    background: url(../images/search.png) center center no-repeat;
    border: none;
    padding: 8px 10px;
    position: absolute;
    top: 0;
    right: 10px;
    opacity: .3;
    cursor: pointer;
    z-index: 18;
    outline: 0;
    transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease
}

.blog .blog_right .popular_post h4,
.blog .blog_right .popular_tags h4 {
    font-size: 22px;
    font-weight: 600;
    padding: 0 0 0 15px;
    border-left: 3px solid #a60a2a;
    margin-bottom: 30px
}

.blog .blog_right .popular_post .media {
    margin-top: 20px
}

.blog .blog_right .popular_post .media img {
    max-width: 100%;
    max-height: 100%;
    height: 60px;
    width: 80px;
    object-fit: cover
}

.blog .blog_right .popular_post .media h5 {
    font-size: 14px;
    font-weight: 600
}

.blog .blog_right .popular_post .media p {
    font-size: 12px;
    color: #777
}

.blog .blog_right .popular_post a {
    color: #000
}

.blog .blog_right .popular_post a:hover {
    color: #a60a2a
}

.blog .blog_right .popular_tags .btn {
    font-size: 12px;
    border: 1px solid #999;
    border-radius: 15px;
    margin-bottom: 8px;
    padding: 5px 15px
}

.blog .blog_right .popular_tags .btn:active,
.blog .blog_right .popular_tags .btn:focus,
.blog .blog_right .popular_tags .btn:hover {
    background: #a60a2a;
    border: 1px solid #a60a2a;
    color: #fff
}

.blog .blog_left .blog_single_list .btn-heart {
    position: absolute;
    right: 30px;
    top: 10px;
    background: rgba(255, 255, 255, .9);
    border-radius: 50%;
    padding: 0;
    height: 40px;
    width: 40px;
    line-height: 38px;
    color: #888;
    font-size: 18px;
    -webkit-box-shadow: 0 2px 22px 0 rgba(0, 0, 0, .17);
    -moz-box-shadow: 0 2px 22px 0 rgba(0, 0, 0, .17);
    box-shadow: 0 2px 22px 0 rgba(0, 0, 0, .17)
}

.blog .blog_left .blog_single_list .btn-heart:hover {
    color: #a60a2a
}

.blog .blog_left .blog_single_list ul.category li {
    color: #666;
    font-size: 14px
}

.blog .blog_left .blog_single_list ul.category li .btn {
    border: 1px solid #a60a2a;
    font-size: 14px;
    padding: 5px 15px;
    border-radius: 25px;
    color: #777
}

.blog .blog_left .blog_single_list .blog_content h1 {
    padding: 20px 0 0;
    font-size: 24px;
    font-weight: 600
}

.blog .blog_left .blog_single_list .blog_content p {
    font-size: 14px;
    color: #777;
    line-height: 24px;
    padding: 0 0 10px
}

.blog .blog_left .blog_single_list .blog_content ul.blog_single_share {
    border-top: 1px solid #eee;
    padding: 10px 0 0
}

.blog .blog_left .blog_single_list .blog_content ul.blog_single_share li {
    font-size: 14px;
    color: #777
}

.blog .blog_left .blog_single_list .blog_content ul.blog_single_share li ul li {
    padding: 0 5px
}

.blog .blog_left .blog_single_list .blog_content ul.blog_single_share li ul li a {
    color: #777
}

.blog .blog_left .blog_single_list .blog_content ul.blog_single_share li ul li a:hover {
    color: #a60a2a
}

.filter_buttons {
    padding-top: 30px;
    text-align: left;
    padding-bottom: 10px
}

.filter_buttons ul li .btn {
    border: 1px solid #a60a2a;
    border-radius: 15px;
    font-size: 12px;
    padding: 5px 15px;
    background: #fff;
    box-shadow: none;
    margin-bottom: 5px
}

.filter_buttons ul li .btn.active,
.filter_buttons ul li .btn:active,
.filter_buttons ul li .btn:focus,
.filter_buttons ul li .btn:hover {
    background: #a60a2a!important;
    color: #fff!important;
    border: 1px solid #a60a2a!important
}

.navbar-light .navbar-toggler {
    border: none!important
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(166, 10, 42, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}

h1.number {
    position: relative;
    text-align: center;
    animation: mymove 2s forwards
}

h1.number::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 210px;
    height: 100px;
    background: #a60a2e;
    clip-path: polygon(0 97%, 0 90%, 25% 80%, 30% 10%, 40% 0, 50% 5%, 60% 0, 70% 10%, 75% 80%, 100% 90%, 100% 97%, 50% 100%);
    border-radius: 30px
}

h1.number::after {
    content: "You came to the wrong page.";
    display: block;
    font-size: 10%
}

.btn-home {
    position: relative;
    top: 150px;
    width: 150px;
    color: #828386;
    display: block;
    margin: 0 auto;
    text-align: center;
    background: 0 0;
    border: 2px solid #a60a2e;
    border-radius: 5px
}

.btn-home:hover {
    background: #a60a2e;
    color: #fff
}

.tumble {
    position: absolute;
    bottom: 0;
    width: 100px;
    height: 100px;
    left: -120px;
    background: url(../images/favicon/apple-touch-icon.png);
    background-size: contain;
    animation: tumbleRoll 7.5s infinite forwards
}

@keyframes mymove {
    0% {
        top: 0;
        font-size: initial
    }
    100% {
        top: 100px;
        font-size: 200px
    }
}

@keyframes tumbleRoll {
    0% {
        left: -120px
    }
    10%,
    40%,
    70% {
        bottom: 30px
    }
    15%,
    55%,
    75% {
        bottom: 0
    }
    100% {
        left: 100vw;
        transform: rotate(600deg)
    }
}

.thankyou {
    background: #d0d0d0;
    padding-bottom: 80px;
    padding-top: 80px
}

.thankyou .thankyou_box {
    background: #fff;
    padding: 50px 45px;
    -webkit-box-shadow: 0 0 17px 0 rgba(0, 0, 0, .25);
    -moz-box-shadow: 0 0 17px 0 rgba(0, 0, 0, .25);
    box-shadow: 0 0 17px 0 rgba(0, 0, 0, .25);
    border-radius: 5px
}

.thankyou .thankyou_box hr {
    height: 5px;
    width: 100px;
    background: #a60a2a;
    border-radius: 25px
}

.thankyou .thankyou_box h1 {
    padding: 20px 0
}

.thankyou .thankyou_box p {
    padding: 0 0 20px;
    color: #888
}

.thankyou .thankyou_box .btn {
    background: #a60a2a;
    border: 1px solid #a60a2a;
    color: #ffff;
    border-radius: 20px;
    padding: 8px 30px
}

.thankyou .thankyou_box .btn:hover {
    background: 0 0;
    border: 1px solid #a60a2a;
    color: #a60a2a
}

.quick_connect {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 0!important;
    width: 100%;
    margin: 0;
    z-index: 99999;
    overflow: hidden
}

.quick_connect div {
    padding: 0
}

.quick_connect .btn-grafiqberry {
    border: none;
    border-radius: 0;
    width: 100%!important;
    margin: 0;
    font-size: 13px;
    background: #a60a2e;
    border: 1px solid #a60a2e;
    color: #fff;
    padding: 10px 10px
}
.quick_connect .btn-grafiqberry svg,
.quick_connect .btn-light svg{
    width: 15px;
    height: 15px;
    margin-right: 5px;
}
.quick_connect .btn-light {
    border: none;
    border-radius: 0;
    width: 100%!important;
    margin: 0;
    font-size: 13px;
    background: #fff;
    border: 1px solid #a60a2e;
    color: #a60a2e;
    padding: 10px 10px
}

.quick_connect .btn-gray {
    border: none;
    border-radius: 0;
    width: 100%!important;
    margin: 0;
    font-size: 13px;
    background: #999a9d;
    border: 1px solid #999a9d;
    color: #a60a2e;
    padding: 10px 10px
}

.whatsapp_icon {
    position: fixed;
    right: 20px;
    bottom: 10px;
    z-index: 999
}

.whatsapp_icon li:nth-child(1) a {
    background: #4fce5d;
    color: #fff
}

.whatsapp_icon li:nth-child(2) a {
    background: rgba(166, 10, 42, .6);
    color: #fff
}

.whatsapp_icon li a {
    display: inline-block;
    font-size: 24px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    line-height: 45px;
    text-align: center;
    border: 2px solid #fff;
    -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .26);
    -moz-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .26);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .26)
}
.whatsapp_icon li a svg{
    width: 25px;
    height: 25px;
}
.whatsapp_icon li:last-child a svg{
    width: 20px;
    height: 20px;
}
.whatsapp_icon a:hover {
    color: #fff;
    opacity: .8
}
.grid-item button.rww_grid_button svg{
    height: 15px;
    width: 15px;
}
.back_btn {
    width: 90px
}

.back_btn li a {
    color: rgba(166, 10, 42, 1)
}

.back_btn li a:hover {
    color: rgba(166, 10, 42, .6)
}

.abt_view_cmpny {
    border-radius: 25px;
    color: #a60a2a;
    padding: 10px 25px;
    box-shadow: none !important;
}
/*happy_clients*/
.happy_clients{padding-top: 60px;padding-bottom: 60px;}

.happy_clients .owl-clients .client_list{padding: 30px 30px 30px 60px;margin: 20px;border-radius: 15px;
    min-height: 240px;
    -webkit-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.11);
    -moz-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.11);
    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.11);
}
.happy_clients .owl-clients .client_list svg{position: absolute;left: 40px;height: 20px;width: 20px;}
.happy_clients .owl-clients .client_list p{color: #717070;text-align: justify;}
.happy_clients .owl-clients .client_list h6{color: #000000; font-size: 16px;font-weight: 600;}
.happy_clients .owl-theme .owl-dots .owl-dot.active span,
.happy_clients .owl-theme .owl-dots .owl-dot:hover span{background: #a60a2a;}
/*{font-weight: 700;font-size: 36px;padding: 0 0 20px 0;letter-spacing: 1px;}*/
.happy_clients h4 {
    font-size: 30px;
    font-weight: 100;
    color: #a60a2e;
    text-align: center;
    text-transform: uppercase
}

.happy_clients h4:after,
.happy_clients h4:before {
    content: '';
    position: absolute;
    height: 1px;
    width: 38%;
    margin: 20px 0 0;
    background-color: #a60a2e
}

.happy_clients h4:before {
    left: 0
}

.happy_clients h4:after {
    right: 0
}
.happy_clients .work_viewall{padding-top: 30px;}
.happy_clients .work_viewall .btn {
    background: #828386;
    color: #fff;
    border-radius: 40px;
    font-size: 14px;
    padding: 10px 30px
}

.happy_clients .work_viewall .btn:after,
.happy_clients .work_viewall .btn:before {
    position: absolute;
    content: '';
    width: 42%;
    background-repeat: repeat-x;
    background-position: center;
    background-size: contain;
    height: 44px;
    margin: -12px 0 0
}

.happy_clients .work_viewall .btn:before {
    left: 0;
    background-image: url(../images/grafiqberry_patern_left.svg)
}

.happy_clients .work_viewall .btn:after {
    right: 0;
    background-image: url(../images/grafiqberry_patern.svg)
}

.happy_clients .work_viewall .btn:hover {
    background: #a60a2e;
    color: #fff
}
/*happy_clients*/
/*testimonialspage*/
.testimonialspage{padding-top: 80px;padding-bottom: 80px;}
.testimonialspage .client_list{}
.testimonialspage .client_list{padding: 30px 30px 30px 60px;margin: 20px;border-radius: 15px;
    -webkit-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.11);
    -moz-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.11);
    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.11);
}
.testimonialspage .client_list .fa-quote-left{position: absolute;left: 20px;font-size: 25px;}
.testimonialspage .client_list p{color: #717070;text-align: justify;}
.testimonialspage .client_list h6{color: #000000; font-size: 16px;font-weight: 600;}
.faqpage{padding-top: 80px;padding-bottom: 80px;}
.faqpage .panel-group{}
.faqpage .panel-group .panel{border-bottom: 1px solid #DDDDDD;}
.faqpage .panel-group .panel .panel-heading{}
.faqpage .panel-group .panel h4{color: #000000;font-size: 16px;font-weight: 600;}
.faqpage .panel-group .panel h4 a{color: #000000;font-size: 18px;font-weight: 600;display: block;padding: 15px 0;}
.faqpage .panel-group .panel .panel-body{padding: 0 0 20px 0;}

/*testimonialspage*/
/*hm_service*/
.hm_service{display: flex;justify-content: center;flex-wrap: wrap;margin-top: 40px;}
.hm_service .hm_serlist{width: 24%;text-align: center;margin-bottom: 30px;}
.hm_service .hm_serlist p {
    font-size: 14px;
    color: #3f4043;
    text-align: center;
    padding: 0 15px;
    font-weight: 600;
}
.hm_service .hm_serlist .service_icon{
    height: 90px;
    width: 90px;
    border-radius: 50%;
    margin: 0 auto 15px auto;
    text-align: center;
    line-height: 85px;
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    /*background: rgba(214, 21, 66, 1);*/
    /*background: -moz-radial-gradient(center, ellipse cover, rgba(214, 21, 66, 1) 0, rgba(166, 10, 46, 1) 100%);*/
    /*background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0, rgba(214, 21, 66, 1)), color-stop(100%, rgba(166, 10, 46, 1)));*/
    /*background: -webkit-radial-gradient(center, ellipse cover, rgba(214, 21, 66, 1) 0, rgba(166, 10, 46, 1) 100%);*/
    /*background: -o-radial-gradient(center, ellipse cover, rgba(214, 21, 66, 1) 0, rgba(166, 10, 46, 1) 100%);*/
    /*background: -ms-radial-gradient(center, ellipse cover, rgba(214, 21, 66, 1) 0, rgba(166, 10, 46, 1) 100%);*/
    /*background: radial-gradient(ellipse at center, rgba(214, 21, 66, 1) 0, rgba(166, 10, 46, 1) 100%);*/
    border: 2px solid #a60a2a;
    color: #ffffff;

}
.hm_service .hm_serlist .service_icon i:before{
    font-size: 40px;
    color: rgba(214, 21, 66, 1);
}
/*hm_service*/
/*case study*/
.img-cover{max-width: 100%;max-height: 100%;width: 100%;object-fit: cover;}
.casestudy_list{padding-top: 60px;padding-bottom: 60px;}
.casestudy_list .cslist{margin-bottom: 60px;}
.casestudy_list .cslist .card{border: none; border-radius: 0;position: relative;}
.casestudy_list .cslist .card svg{position: absolute;bottom: 90px;right: 15px;opacity: 0;transition: 0.3s all;width: 60px;}
.casestudy_list .cslist .card img{height: 350px;}
.casestudy_list .cslist .card h5{font-size: 24px;font-weight: 700;padding-top: 10px;color: #000;}
.casestudy_list .cslist .card p{font-size: 18px;font-weight: 100;color: #000;}
.casestudy_list .cslist .card:hover svg{opacity: 1;}
.casestudydetails .csvideo{width: 100%;height: 100%;object-fit: cover;max-width: 100%;max-height: 100%;}
.cs_single_det{padding-top: 80px;}
.cs_single_det .left_cont{padding-right:60px;}
.cs_single_det .right_cont{display: flex;flex-direction: column;justify-content: center;}
.cs_single_det h4{font-size: 26px;font-weight: 700;}
.cs_single_det h5{font-size: 16px;padding-bottom: 30px;}
.cs_single_det h6{font-size: 14px;font-weight: 700;border-bottom: 1px solid #000000;margin-bottom: 15px;padding-bottom: 5px;}
.cs_single_det ul{display: flex; flex-wrap: wrap;padding-left: 15px;}
.cs_single_det ul li{color: #505050;font-size: 11px;width: 50%;}
.cs_single_det p{font-size: 14px;color: #000000;}
.cs_single_det .masonary{padding:80px 0;display: flex;flex-wrap: wrap;}
.cs_single_det .masonary div{padding: 10px;}
.cs_single_det .masonary div:nth-child(3n-0){width: 50%;}
.cs_single_det .masonary div:nth-child(3n-1){width: 50%;}
.cs_single_det .masonary div:nth-child(3n-2){width: 100%;}
.cs_single_det .masonary .csvideo{width: 100%;height: 100%;object-fit: cover;max-width: 100%;max-height: 100%;}
.nextcasestudy{background:#a60a2a;padding-top: 40px;padding-bottom: 40px; }
.nextcasestudy h4{text-align:left;position: absolute;right: 200px;top: 50%;transform: translateY(-50%);color: #fff;font-size: 60px;font-weight: 600;transition: 0.3s all;}
.nextcasestudy:hover h4{right:0px; }
/*case study*/

/*new services*/
.service_single_list_new header,
.service_single_list_new h5{
    font-size: 28px;
    font-weight: 700;

}
.service_single_list_new p{
    color: #666666;
    font-size: 16px;
}
.service_single_list_new img{
    border-radius: 15px;
    height: 100%;
}
.service_single_list_new li{

}
.service_single_list_new li img{
    width: 60px;
    height: 60px;
    border-radius: 0;
}
.service_single_list_new .list-inline{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.service_single_list_new .list-inline .list-inline-item{
    width: 48%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    padding: 15px 0;

}
.service_single_list_new .card{
    text-align: center;
    margin-bottom: 20px;
}
.service_single_list_new .card p{
    padding-top: 15px;
    font-size: 15px;
}
.service_single_list_new .card p.text-dark{
    color: #000000 !important;
}
.recent_works{}
.recent_works h5{
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 30px;
    color: #000000;
    padding-bottom: 20px;

}
.recent_works .btn-grafiqberry{
    background: #992535;
    border-radius: 20px;
    padding: 10px 30px;
    color: #ffffff;

}
.recent_works .btn-grafiqberry:hover{
    background: #ffffff;
    color: #992535;
    border-color: #992535;
}
.recent_works .item .card{
    border: none;
    border-radius: 10px;
    z-index: 1;
}
.recent_works .item .card a{
}
.recent_works .item .card:before{
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    border-radius: 10px;
    z-index: 0;

}
.recent_works .item .card img{
    height: 350px;
    border-radius: 10px;
    z-index: -1;
}
.recent_works .item .card p{
    position: absolute;
    bottom: 10px;
    left: 15px;
    right: 15px;
    color: #ffffff;
    z-index: 1;
}
.btn-outline-grafiqberry{
    background: #fff;
    border-radius: 20px;
    padding: 10px 30px;
    border-color: #992535;
    color: #992535;

}
.btn-outline-grafiqberry:hover{
    background: #992535;
    color: #ffffff;
    border-color: #992535;
}
.btn-outline-grafiqberry:hover svg path{
    stroke: #ffffff;
}
/*new services*/
/*letstart*/
.letstart{ background: #992535;padding-top: 40px;padding-bottom: 40px;}
.letstart .row{
    gap: 40px;
}
.letstart p{
    color: #ffffff;
    font-size: 36px;

}
.letstart .btn-gradient{
    background: #fff;
    border-radius: 100px;
    padding: 18px 40px;
    border-color: #992535;
    color: #992535;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.5s;
}
.letstart .btn-gradient svg{
    fill:#992535;
    height: 15px;
    width: 15px;
    transition: transform 0.5s;
}
.letstart .btn-gradient:hover{
    box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.35);
    transform: scale(0.9);
}
.letstart .btn-gradient:hover svg{
    transform: translateX(10px);
}
/*letstart*/
/*faq*/
.hmfaq{
    padding-bottom: 60px;
    padding-top: 0;
}
.hmfaq h4{font-size: 32px;}

/*faq*/
#feedback-form .closecontact{display: none;}

/*home work list*/
.listitems{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
    gap: 10px;
}
.listitems li{
    position: relative;
    transition: .5s all;
    overflow: hidden;
    border-radius: 20px;
    /*padding: 8px;*/
    height: 420px;
}
.listitems li img{width: 100%;max-width: 100%;max-height: 100%;object-fit: cover;border-radius: 20px;
height: 100%;transition: 0.5s all;}
.listitems li:nth-child(8n+0){flex: 1 1 calc(40% - 10px); }
.listitems li:nth-child(8n-1){flex: 1 1 calc(30% - 10px);}
.listitems li:nth-child(8n-2){flex: 1 1 calc(30% - 10px);}
.listitems li:nth-child(8n-3){height: 250px;flex: 1 1 calc(33.333% - 10px);}
.listitems li:nth-child(8n-4){height: 250px;flex: 1 1 calc(33.333% - 10px);}
.listitems li:nth-child(8n-5){height: 250px;flex: 1 1 calc(33.333% - 10px);}
.listitems li:nth-child(8n-6){flex: 1 1 calc(30% - 10px);}
.listitems li:nth-child(8n-7){flex: 1 1 calc(70% - 10px);}
.listitems .overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #A60A2E;
    /*background: linear-gradient(0deg,rgba(166, 10, 46, 1) 0%, rgba(255, 255, 255, 0) 100%);*/
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 20px;
    opacity: 0;
}
.listitems .overlay p{color: #ffffff;margin-bottom: 0;transition: 0.3s all;transform: translateY(60px);}
.listitems .overlay a{
    display: block;
    background: #ffffff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    position: absolute;
    top: 20px;
    right: 20px;
    transition: 0.3s all;
    transform: scale(0);
}
.listitems .overlay a svg{
    width: 12px;
    height: 12px;
}
.listitems li:hover .overlay{
    opacity: 1;
}
.listitems li:hover .overlay p{
    transform: translateY(0px);
}
.listitems li:hover .overlay a{
    transform: scale(1);
}
.listitems li:hover img{
    transform: scale(1.2);
}
.listitems .overlay a:hover{
    transform: scale(1.2) !important;
}
/*home work list*/

@media only screen and (max-width:1024px){
    .menubar .navbar .navbar-nav li{font-size: 13px;padding: 5px 2px}
}

@media only screen and (max-width:768px){
    .menubar .navbar .navbar-nav li{font-size: 16px;}
    .service_single_list_new li img{height: 30px;width: 30px;}
    .service_single_list_new .list-inline .list-inline-item{width: 46%;font-size: 13px;padding: 0;}
    .letstart .row{gap: 10px;}
    .letstart p{text-align: center;font-size: 24px;}
    .letstart .btn-gradient{padding: 12px 20px;font-size: 16px;}
    .listitems li{flex: 1 1 calc(50% - 10px) !important;height: 250px;}
    .listitems .overlay{opacity: 1;}
    .listitems .overlay p{transform: translateY(0px);}
    .listitems .overlay a{transform: scale(1);}
}
@media only screen and (max-width:480px){
    .service_single_list_new h5, .service_single_list_new header{font-size: 20px;}
    .service_single_list_new h5, .service_single_list_new h5{font-size: 20px;padding: 15px 0;}
    .service_single_list_new .list-inline .list-inline-item{width: 100%;padding: 8px 0;}
    .recent_works .col-md-3{padding: 25px 0;text-align: center;}
    .recent_works .item .card img{height: 300px;}
    .recent_works .item .card p{font-size: 13px;}
    .fade-carousel .btn-grafiqberry{margin-right: 5px;}
    .fade-carousel .dflex{text-align: center;}
    .fade-carousel .btn{font-size: 12px !important;padding: 8px 15px !important;}
    .home_service h1{font-size: 150%;}
    #feedback-form{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        float: none;
        padding-top: 40px;
        background: rgba(255, 255, 255, 1);
        transition: right 0.5s ease;
    }
    #feedback-form .closecontact{
        display: inline-block;
        position: absolute;
        right: 20px;
        top: 10px;
        font-size: 18px;
    }
    #feedback-form .closecontact svg{height: 20px;width: 20px;}
    #feedback-form h5{padding-bottom: 15px;}
    #feedback-tab{font-size: 16px;height: 38px;width: 140px;}
    .listitems li{flex: 1 1 calc(100% - 10px) !important;height: 200px !important;}
}
@media only screen and (min-width:1024px) and (max-width:1365px) {
    .home_service .service_viewall .btn:after,
    .home_service .service_viewall .btn:before,
    .latest_works .work_viewall .btn:after,
    .latest_works .work_viewall .btn:before {
        width: 39.5%
    }
    .latest_works header h2:after,
    .latest_works header h2:before {
        width: 37%
    }
    .home_clients header h3:after,
    .home_clients header h3:before {
        width: 38%
    }
    footer .footer_contact .footer_contact_item {
        top: -75%
    }
    .menubar .navbar:before {
        height: 42px
    }
    .services .service_list .col-xl-12 {
        height: 320px
    }
    .services .service_list p {
        display: -webkit-box;
        max-height: 150px;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        -webkit-line-clamp: 7
    }
    .services .service_list h4 {
        font-size: 15px
    }
    .contact_us {
        background-position: -75px top
    }
    .happy_clients h4:before,
    .happy_clients h4:after {
        width: 36%;
        margin: 19px 0 0;
    }
    .happy_clients .work_viewall .btn:after, .happy_clients .work_viewall .btn:before{width: 37%;}
}

@media only screen and (min-width:768px) and (max-width:1023px) {
    .aboutus .about_img,
    .menubar .navbar .navbar-nav li .nav-link:focus:before,
    .menubar .navbar .navbar-nav li .nav-link:hover:before,
    .service_single .service_single_list::before,
    .whatsapp_icon li:nth-child(1),
    .whychoose .whychoose_leftbg {
        display: none
    }
    .whatsapp_icon {
        bottom: 30px
    }
    .menubar img {
        margin: 0
    }
    .menubar .navbar:before {
        height: 45px
    }
    .fade-carousel,
    .fade-carousel .carousel-inner .carousel-item,
    .fade-carousel .carousel-inner .slider {
        height: 60vh
    }
    .fade-carousel .carousel-inner .carousel-caption .headingtag {
        font-size: 200%
    }
    .home_service .service_list img {
        height: 50px;
        width: 50px
    }
    .home_service .service_list .service_list_heading {
        font-weight: 600;
        font-size: 12px
    }
    .home_service .service_viewall .btn:after,
    .home_service .service_viewall .btn:before,
    .latest_works .work_viewall .btn:after,
    .latest_works .work_viewall .btn:before {
        width: 35%
    }
    .latest_works header h2:after,
    .latest_works header h2:before {
        width: 33%
    }
    .home_clients header h3:after,
    .home_clients header h3:before {
        width: 34%
    }
    .home_blog header h2:after,
    .home_blog header h2:before {
        width: 42%
    }
    footer .footer_contact .footer_contact_item {
        position: relative;
        top: 0;
        padding: 60px 20px 30px;
        margin: 0 auto 30px
    }
    footer .copyright {
        text-align: center
    }
    .aboutus .about_vision {
        padding-top: 20px
    }
    .meet_teem header h3:after,
    .meet_teem header h3:before {
        width: 30%
    }
    .innerpage_banner h1 {
        font-size: 36px
    }
    .innerpage_banner h1::after {
        height: 36px;
        top: 3px
    }
    .innerpage_banner {
        background-attachment: initial
    }
    .service_single .left_icon .service_icon {
        height: 160px;
        width: 160px;
        line-height: 160px
    }
    .service_single .left_icon .service_icon i:before {
        font-size: 90px
    }
    .service_single .service_single_list {
        border-top: none
    }
    .service_single .left_icon::before {
        top: 0;
        height: 1px;
        width: 80%;
        transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -webkit-transform: rotate(30deg)
    }
    .service_single_works header h3::before {
        width: 60%
    }
    .blog .blog_left .blog_content {
        padding-bottom: 30px
    }
    .contact_us .contact_address {
        text-align: right;
        padding-left: 0;
        padding-bottom: 30px
    }
    .quick_connect {
        display: inline-flex
    }
    footer {
        padding-bottom: 70px
    }
    .happy_clients .owl-clients .client_list p{font-size: 14px;}
    .hm_service .hm_serlist{width: 33%;}
    .happy_clients h4:before,
    .happy_clients h4:after {
        width: 32%;
        margin: 19px 0 0;
    }
    .happy_clients .work_viewall .btn:after, .happy_clients .work_viewall .btn:before{width: 32%;}
}

@media only screen and (min-width:480px) and (max-width:767px) {
    /*#feedback,*/
    .menubar .navbar .navbar-nav li .nav-link:focus:before,
    .menubar .navbar .navbar-nav li .nav-link:hover:before,
    .topbar_email,
    .whatsapp_icon li:nth-child(1) {
        display: none
    }
    .whatsapp_icon {
        bottom: 30px;
        right: 10px
    }
    .whatsapp_icon li a {
        font-size: 14px;
        width: 30px;
        height: 30px;
        line-height: 30px
    }
    .top_bar .col-md-6 {
        padding: 0;
        text-align: center!important
    }
    .top_bar ul li {
        font-size: 13px;
        padding: 0 5px
    }
    .menubar {
        padding: 0
    }
    .menubar img {
        width: 160px
    }
    .menubar .navbar:before {
        top: 15px;
        height: 32px
    }
    .menubar .navbar .navbar-nav li .nav-link {
        text-align: center
    }
    .fade-carousel,
    .fade-carousel .carousel-inner .carousel-item,
    .fade-carousel .carousel-inner .slider {
        height: 50vh
    }
    .fade-carousel .carousel-inner .carousel-caption {
        top: 45%
    }
    .fade-carousel .carousel-inner .carousel-caption .headingtag {
        font-size: 100%
    }
    .fade-carousel .carousel-inner .carousel-caption .subheading {
        font-size: 12px
    }
    .home_service .home_service_logo {
        width: 60%
    }
    .home_service .service_list img {
        margin: 0 auto 15px
    }
    .home_service p {
        font-size: 14px;
        padding: 2px 0 0;
        text-align: justify
    }
    .home_service .service_list .service_list_heading {
        font-weight: 600;
        font-size: 14px
    }
    .home_service ul.d-flex {
        display: block!important;
        text-align: center
    }
    .home_service ul.d-flex .list-inline-item {
        display: inline-block;
        padding: 0 8px;
        width: 180px
    }
    .home_service .service_viewall .btn:after,
    .home_service .service_viewall .btn:before,
    .latest_works .work_viewall .btn:after,
    .latest_works .work_viewall .btn:before {
        width: 28%
    }
    .home_blog header h2,
    .home_clients header h3,
    .latest_works header h2,
    .meet_teem header h3 {
        font-size: 26px
    }
    .latest_works header h2:after,
    .latest_works header h2:before {
        width: 24%
    }
    .home_clients header h3:after,
    .home_clients header h3:before {
        width: 28%
    }
    .home_blog header h2:after,
    .home_blog header h2:before {
        width: 38%
    }
    .meet_teem header h3::after,
    .meet_teem header h3::before {
        width: 20%
    }
    .home_blog header h2:after,
    .home_blog header h2:before,
    .home_clients header h3:after,
    .home_clients header h3:before,
    .latest_works header h2:after,
    .latest_works header h2:before,
    .meet_teem header h3::after,
    .meet_teem header h3::before {
        margin: 14px 0 0
    }
    .home_blog .blog_list {
        margin-bottom: 15px
    }
    footer .footer_links ul,
    footer h4 {
        text-align: center
    }
    footer .footer_links ul li {
        text-align: center;
        display: inline-block;
        padding: 4px 5px
    }
    footer .footer_services .d-flex {
        display: block!important
    }
    .aboutus .about_img,
    .service_single .service_single_list::before {
        display: none
    }
    footer .footer_services ul {
        margin-bottom: 0
    }
    footer .footer_services ul li {
        padding: 10px 0 5px;
        text-align: center
    }
    footer .footer_contact {
        padding: 0
    }
    footer .footer_contact .footer_contact_item {
        position: relative;
        top: 0;
        padding: 30px 10px 10px;
        margin: 30px auto 0;
        height: 280px;
        width: 280px
    }
    .dot:before {
        height: 280px;
        width: 280px
    }
    footer .footer_contact .footer_contact_item img {
        width: 150px
    }
    footer .footer_contact .footer_contact_item p {
        padding: 0 0 0 40px;
        font-size: 12px
    }
    footer .footer_contact .footer_contact_item p i.fa-map-marker-alt {
        padding: 5px 5px 20px 0;
        float: left;
        font-size: 14px
    }
    footer .footer_contact .footer_contact_item ul li i {
        height: 35px;
        width: 35px;
        line-height: 30px
    }
    footer .copyright {
        padding-top: 20px;
        text-align: center
    }
    .quick_contact .quick_contact_no, .quick_contact .quick_contact_no a  {
        font-size: 28px
    }
    .quick_contact .quick_contact_no svg{width: 30px;height: 30px;}
    .quick_contact p {
        font-size: 12px
    }
    .aboutus .about_grafiqberry h4,
    .innerpage_banner h1,
    .quick_contact .quick_contact_connect {
        font-size: 20px
    }
    .quick_contact {
        padding-bottom: 50px;
        padding-top: 50px
    }
    .innerpage_banner {
        padding-top: 90px;
        background-attachment: initial
    }
    .innerpage_banner h1:after {
        height: 16px;
        top: 3px;
        right: -98%
    }
    .aboutus .about_vision {
        padding-top: 20px
    }
    .whychoose .whychoose_leftbg {
        height: 250px
    }
    .about_experiance,
    .aboutus,
    .meet_teem {
        padding-top: 30px;
        padding-bottom: 30px
    }
    .aboutus .about_grafiqberry p {
        font-size: 14px;
        line-height: 22px
    }
    .aboutus .grafiqberry_paterns_white {
        margin-bottom: 30px;
        margin-top: 30px;
        height: 30px;
        background-size: contain
    }
    .aboutus .about_mission h4,
    .aboutus .about_vision h4 {
        font-size: 20px
    }
    .about_experiance .col-xl-12 {
        padding-left: 30px
    }
    .about_experiance h4 {
        font-size: 18px
    }
    .whychoose h3 {
        font-size: 22px
    }
    .whychoose .whychoose_leftbg::before {
        width: 150%
    }
    .whychoose .whychoose_rightbg::before {
        left: -19%;
        width: 150%
    }
    .whychoose .whychoose_rightbg ul li {
        font-size: 13px
    }
    .whychoose .whychoose_rightbg .col-xl-12 {
        padding: 0
    }
    .whychoose .whychoose_rightbg ul li::before {
        left: 6px
    }
    .meet_teem p {
        font-size: 14px;
        text-align: justify!important
    }
    .service_single .left_icon .service_icon {
        height: 160px;
        width: 160px;
        line-height: 160px
    }
    .service_single .left_icon .service_icon i:before {
        font-size: 90px
    }
    .service_single .service_single_list {
        border-top: none
    }
    .service_single .left_icon::before {
        top: 0;
        height: 1px;
        width: 100%;
        transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -webkit-transform: rotate(30deg)
    }
    .service_single_works header h3::before {
        width: 50%;
        margin: 15px 0 0
    }
    .service_single_works header h3 {
        font-size: 24px;
        margin-bottom: 10px
    }
    .service_single_works {
        margin-top: 0
    }
    .work_single p {
        text-align: justify
    }
    .blog .blog_left .blog_content {
        padding-bottom: 30px
    }
    .contact_us {
        background-size: 280px
    }
    .contact_us .contact_address {
        text-align: right;
        padding-left: 0;
        padding-bottom: 30px
    }
    .googlemap .locationmap {
        height: 250px
    }
    .googlemap {
        border: 2px solid #a60a2e
    }
    .quick_connect {
        display: inline-flex
    }
    footer {
        padding-bottom: 70px
    }
    .happy_clients .owl-clients .client_list p{font-size: 14px;}
    .happy_clients h4{font-size: 24px;}
    .happy_clients .owl-clients .client_list{margin: 10px;padding: 15px;}
    .happy_clients .owl-clients .client_list svg{left: 0;top: 0;}
    .happy_clients .col-xl-12{padding: 0;}
    .hm_service .hm_serlist{width: 49%;}
    .happy_clients h4:before,
    .happy_clients h4:after {
        width: 30%;
        margin: 14px 0 0;
    }
    .happy_clients .work_viewall .btn:after, .happy_clients .work_viewall .btn:before{width: 23%;}
}

@media only screen and (min-width:320px) and (max-width:479px) {
    .faqpage .panel-group .panel .float-right{float: none !important;}
    .faqpage .panel-group .panel h4 a{font-size: 14px;}
    .home_service .service_viewall .btn-outline-light.view_cmpny {
        margin-top: 10px;
    }
    /*#feedback,*/
    .menubar .navbar .navbar-nav li .nav-link:focus:before,
    .menubar .navbar .navbar-nav li .nav-link:hover:before,
    .topbar_email,
    .whatsapp_icon li:nth-child(1) {
        display: none
    }
    .whatsapp_icon {
        bottom: 30px;
        right: 10px
    }
    .whatsapp_icon li a {
        font-size: 14px;
        width: 30px;
        height: 30px;
        line-height: 30px
    }
    .top_bar .col-md-6 {
        padding: 0;
        text-align: center!important
    }
    .top_bar ul li {
        font-size: 13px;
        padding: 0 5px
    }
    .menubar {
        padding: 0
    }
    .menubar img {
        width: 160px
    }
    .menubar .navbar:before {
        top: 15px;
        height: 34px
    }
    .menubar .navbar .navbar-nav li .nav-link {
        text-align: center
    }
    .fade-carousel,
    .fade-carousel .carousel-inner .carousel-item,
    .fade-carousel .carousel-inner .slider {
        height: 50vh
    }
    .fade-carousel .carousel-inner .carousel-caption {
        top: 50%
    }
    .fade-carousel .carousel-inner .carousel-caption .headingtag {
        font-size: 100%
    }
    .fade-carousel .carousel-inner .carousel-caption .subheading {
        font-size: 12px
    }
    .home_service .home_service_logo {
        width: 90%
    }
    .home_service .service_list img {
        margin: 0 auto 15px
    }
    .home_service p {
        font-size: 13px;
        padding: 2px 0 0;
        text-align: justify
    }
    .home_service .service_list .service_list_heading {
        font-weight: 600;
        font-size: 14px
    }
    .home_service ul.d-flex {
        display: block!important;
        text-align: center
    }
    .home_service ul.d-flex .list-inline-item {
        display: block
    }
    .home_service .service_viewall .btn:after,
    .home_service .service_viewall .btn:before,
    .latest_works .work_viewall .btn:after,
    .latest_works .work_viewall .btn:before {
        width: 16%
    }
    .home_blog header h2,
    .home_clients header h3,
    .latest_works header h2,
    .meet_teem header h3 {
        font-size: 20px
    }
    .latest_works header h2:after,
    .latest_works header h2:before {
        width: 18%
    }
    .home_clients header h3:after,
    .home_clients header h3:before {
        width: 22%
    }
    .home_blog header h2:after,
    .home_blog header h2:before {
        width: 35%
    }
    .meet_teem header h3::after,
    .meet_teem header h3::before {
        width: 20%
    }
    .home_blog header h2:after,
    .home_blog header h2:before,
    .home_clients header h3:after,
    .home_clients header h3:before,
    .latest_works header h2:after,
    .latest_works header h2:before,
    .meet_teem header h3::after,
    .meet_teem header h3::before {
        margin: 12px 0 0
    }
    .home_blog .blog_list {
        margin-bottom: 15px
    }
    footer .footer_links ul,
    footer h4 {
        text-align: center
    }
    footer .footer_links ul li {
        text-align: center;
        display: inline-block;
        padding: 4px 5px
    }
    footer .footer_services .d-flex {
        display: block!important
    }
    footer .footer_services ul {
        margin-bottom: 0
    }
    footer .footer_services ul li {
        padding: 10px 0 5px;
        text-align: center
    }
    footer .footer_contact {
        padding: 0
    }
    footer .footer_contact .footer_contact_item {
        position: relative;
        top: 0;
        padding: 30px 10px 10px;
        margin: 30px auto 0;
        height: 280px;
        width: 280px
    }
    .dot:before {
        height: 280px;
        width: 280px
    }
    footer .footer_contact .footer_contact_item img {
        width: 150px
    }
    footer .footer_contact .footer_contact_item p {
        padding: 0 0 0 40px;
        font-size: 12px
    }
    footer .footer_contact .footer_contact_item p i.fa-map-marker-alt {
        padding: 5px 5px 20px 0;
        float: left;
        font-size: 14px
    }
    footer .footer_contact .footer_contact_item ul li i {
        height: 35px;
        width: 35px;
        line-height: 30px
    }
    footer .copyright {
        padding-top: 20px;
        text-align: center
    }
    .quick_contact .quick_contact_no, .quick_contact .quick_contact_no a
    {
        font-size: 24px
    }
    .quick_contact .quick_contact_no svg{width: 20px;height: 20px;}
    .quick_contact p {
        font-size: 12px
    }
    .quick_contact .quick_contact_connect {
        font-size: 20px
    }
    .quick_contact {
        padding-bottom: 50px;
        padding-top: 50px
    }
    .innerpage_banner {
        padding-top: 100px;
        padding-bottom: 5px;
        background-attachment: initial
    }
    .innerpage_banner .col-xl-12 {
        padding: 0
    }
    .innerpage_banner h1 {
        font-size: 16px
    }
    .innerpage_banner h1:after {
        height: 16px;
        top: 1px;
        right: -101%
    }
    .aboutus .about_img {
        display: none
    }
    .aboutus .about_vision {
        padding-top: 20px
    }
    .whychoose .whychoose_leftbg {
        height: 250px
    }
    .about_experiance,
    .aboutus,
    .meet_teem {
        padding-top: 30px;
        padding-bottom: 30px
    }
    .aboutus .about_grafiqberry h4 {
        font-size: 20px
    }
    .aboutus .about_grafiqberry p {
        font-size: 14px;
        line-height: 22px
    }
    .aboutus .grafiqberry_paterns_white {
        margin-bottom: 30px;
        margin-top: 30px;
        height: 30px;
        background-size: contain
    }
    .aboutus .about_mission h4,
    .aboutus .about_vision h4 {
        font-size: 20px
    }
    .about_experiance .col-xl-12 {
        padding-left: 30px
    }
    .blog .blog_list,
    .whychoose .whychoose_rightbg .col-xl-12 {
        padding: 0
    }
    .about_experiance h4 {
        font-size: 18px
    }
    .whychoose h3 {
        font-size: 22px
    }
    .whychoose .whychoose_leftbg::before {
        width: 150%
    }
    .whychoose .whychoose_rightbg::before {
        left: -19%;
        width: 150%
    }
    .whychoose .whychoose_rightbg ul li {
        font-size: 13px
    }
    .whychoose .whychoose_rightbg ul li::before {
        left: 6px
    }
    .meet_teem p {
        font-size: 14px;
        text-align: justify!important
    }
    .services .service_list .col-xl-12 {
        height: 320px
    }
    .services .service_list p {
        display: -webkit-box;
        max-height: 145px;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        -webkit-line-clamp: 7
    }
    .services .service_list h4 {
        font-size: 15px
    }
    .service_single .left_icon .service_icon {
        height: 160px;
        width: 160px;
        line-height: 160px
    }
    .service_single .left_icon .service_icon i:before {
        font-size: 90px
    }
    .service_single .service_single_list {
        border-top: none
    }
    .service_single .service_single_list::before {
        display: none
    }
    .service_single .left_icon::before {
        top: 0;
        height: 1px;
        width: 100%;
        transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -webkit-transform: rotate(30deg)
    }
    .service_single_works header h3::before {
        width: 36%;
        margin: 12px 0 0
    }
    .service_single_works header h3 {
        font-size: 20px;
        margin-bottom: 10px
    }
    .service_single_works {
        margin-top: 0
    }
    .work_single h1 {
        font-size: 18px
    }
    .work_single p {
        text-align: justify
    }
    .blog .blog_left .blog_content {
        padding-bottom: 30px
    }
    .blog .blog_left,
    .blog .blog_right {
        padding: 0
    }
    .blog .blog_list img {
        height: 160px
    }
    .blog .blog_list .blog_content {
        padding: 15px
    }
    .blog .blog_list .blog_content .btn {
        font-size: 12px;
        padding: 2px 10px
    }
    .blog .blog_list .blog_content h4 {
        font-size: 14px
    }
    .blog .blog_list .blog_content p {
        font-size: 12px;
        line-height: 16px
    }
    .blog .blog_right .popular_post .media h5 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 155px
    }
    .contact_us {
        background-size: 180px
    }
    .contact_us .contact_address {
        text-align: right;
        padding-left: 0;
        padding-bottom: 30px
    }
    .googlemap .locationmap {
        height: 200px
    }
    .googlemap {
        border: 2px solid #a60a2e
    }
    .thankyou {
        padding-bottom: 30px;
        padding-top: 30px
    }
    .quick_connect {
        display: inline-flex
    }
    footer {
        padding-bottom: 70px
    }
    .home_service .service_viewall {
        height: auto;
        background: none;
    }
    .home_service .service_viewall .home_abt {
        background: transparent;
    }
    .happy_clients .owl-clients .client_list p{font-size: 14px;}
    .happy_clients h4{font-size: 24px;}
    .happy_clients .owl-clients .client_list{margin: 10px;padding: 15px;}
    .happy_clients .owl-clients .client_list svg{left: 0;top: 0;}
    .happy_clients .col-xl-12{padding: 0;}
    .hm_service .hm_serlist{width: 100%;}
    .happy_clients h4:before,
    .happy_clients h4:after {
        width: 18%;
        margin: 14px 0 0;
    }
    .happy_clients .work_viewall .btn:after, .happy_clients .work_viewall .btn:before{width: 10%;}
}

@media screen and (max-width:319px) {
    .faqpage .panel-group .panel .float-right{float: none !important;}
    .faqpage .panel-group .panel h4 a{font-size: 14px;}
    /*#feedback,*/
    .menubar .navbar .navbar-nav li .nav-link:focus:before,
    .menubar .navbar .navbar-nav li .nav-link:hover:before,
    .topbar_email,
    .whatsapp_icon li:nth-child(1) {
        display: none
    }
    .whatsapp_icon {
        bottom: 30px;
        right: 10px
    }
    .whatsapp_icon li a {
        font-size: 14px;
        width: 30px;
        height: 30px;
        line-height: 30px
    }
    .top_bar .col-md-6 {
        padding: 0;
        text-align: center!important
    }
    .top_bar ul li {
        font-size: 13px;
        padding: 0 5px
    }
    .menubar {
        padding: 0
    }
    .menubar img {
        width: 160px
    }
    .menubar .navbar:before {
        top: 15px;
        height: 34px
    }
    .menubar .navbar .navbar-nav li .nav-link {
        text-align: center
    }
    .fade-carousel,
    .fade-carousel .carousel-inner .carousel-item,
    .fade-carousel .carousel-inner .slider {
        height: 50vh
    }
    .fade-carousel .carousel-inner .carousel-caption {
        top: 50%
    }
    .fade-carousel .carousel-inner .carousel-caption .headingtag {
        font-size: 100%
    }
    .fade-carousel .carousel-inner .carousel-caption .subheading {
        font-size: 12px
    }
    .home_service .home_service_logo {
        width: 90%
    }
    .home_service .service_list img {
        margin: 0 auto 15px
    }
    .home_service p {
        font-size: 13px;
        padding: 2px 0 0;
        text-align: justify
    }
    .home_service .service_list .service_list_heading {
        font-weight: 600;
        font-size: 14px
    }
    .home_service ul.d-flex {
        display: block!important;
        text-align: center
    }
    .home_service ul.d-flex .list-inline-item {
        display: block
    }
    .home_service .service_viewall .btn:after,
    .home_service .service_viewall .btn:before,
    .latest_works .work_viewall .btn:after,
    .latest_works .work_viewall .btn:before {
        width: 16%
    }
    .home_blog header h2,
    .happy_clients h4,
    .home_clients header h3,
    .latest_works header h2,
    .meet_teem header h3 {
        font-size: 20px
    }
    .latest_works header h2:after,
    .latest_works header h2:before {
        width: 18%
    }
    .home_clients header h3:after,
    .home_clients header h3:before {
        width: 22%
    }
    .home_blog header h2:after,
    .home_blog header h2:before {
        width: 35%
    }
    .happy_clients h4:before,
    .happy_clients h4:after {
        width: 20%
    }

    .meet_teem header h3::after,
    .meet_teem header h3::before {
        width: 20%
    }
    .home_blog header h2:after,
    .home_blog header h2:before,
    .home_clients header h3:after,
    .home_clients header h3:before,
    .latest_works header h2:after,
    .latest_works header h2:before,
    .meet_teem header h3::after,
    .meet_teem header h3::before {
        margin: 12px 0 0
    }
    .home_blog .blog_list {
        margin-bottom: 15px
    }
    footer .footer_links ul,
    footer h4 {
        text-align: center
    }
    footer .footer_links ul li {
        text-align: center;
        display: inline-block;
        padding: 4px 5px
    }
    footer .footer_services .d-flex {
        display: block!important
    }
    footer .footer_services ul {
        margin-bottom: 0
    }
    footer .footer_services ul li {
        padding: 10px 0 5px;
        text-align: center
    }
    footer .footer_contact {
        padding: 0
    }
    footer .footer_contact .footer_contact_item {
        position: relative;
        top: 0;
        padding: 30px 10px 10px;
        margin: 30px auto 0;
        height: 280px;
        width: 280px
    }
    .dot:before {
        height: 280px;
        width: 280px
    }
    footer .footer_contact .footer_contact_item img {
        width: 150px
    }
    footer .footer_contact .footer_contact_item p {
        padding: 0 0 0 40px;
        font-size: 12px
    }
    footer .footer_contact .footer_contact_item p i.fa-map-marker-alt {
        padding: 5px 5px 20px 0;
        float: left;
        font-size: 14px
    }
    footer .footer_contact .footer_contact_item ul li i {
        height: 35px;
        width: 35px;
        line-height: 30px
    }
    footer .copyright {
        padding-top: 20px;
        text-align: center
    }
    .quick_contact .quick_contact_no, .quick_contact .quick_contact_no a  {
        font-size: 24px
    }
    .quick_contact .quick_contact_no svg{width: 20px;height: 20px;}
    .quick_contact p {
        font-size: 12px
    }
    .quick_contact .quick_contact_connect {
        font-size: 20px
    }
    .quick_contact {
        padding-bottom: 50px;
        padding-top: 50px
    }
    .innerpage_banner {
        padding-top: 100px;
        padding-bottom: 5px;
        background-attachment: initial
    }
    .innerpage_banner .col-xl-12 {
        padding: 0
    }
    .innerpage_banner h1 {
        font-size: 16px
    }
    .innerpage_banner h1:after {
        height: 16px;
        top: 1px;
        right: -101%
    }
    .aboutus .about_img {
        display: none
    }
    .aboutus .about_vision {
        padding-top: 20px
    }
    .whychoose .whychoose_leftbg {
        height: 250px
    }
    .about_experiance,
    .aboutus,
    .meet_teem {
        padding-top: 30px;
        padding-bottom: 30px
    }
    .aboutus .about_grafiqberry h4 {
        font-size: 20px
    }
    .aboutus .about_grafiqberry p {
        font-size: 14px;
        line-height: 22px
    }
    .aboutus .grafiqberry_paterns_white {
        margin-bottom: 30px;
        margin-top: 30px;
        height: 30px;
        background-size: contain
    }
    .aboutus .about_mission h4,
    .aboutus .about_vision h4 {
        font-size: 20px
    }
    .about_experiance .col-xl-12 {
        padding-left: 30px
    }
    .blog .blog_list,
    .whychoose .whychoose_rightbg .col-xl-12 {
        padding: 0
    }
    .about_experiance h4 {
        font-size: 18px
    }
    .whychoose h3 {
        font-size: 22px
    }
    .whychoose .whychoose_leftbg::before {
        width: 150%
    }
    .whychoose .whychoose_rightbg::before {
        left: -19%;
        width: 150%
    }
    .whychoose .whychoose_rightbg ul li {
        font-size: 13px
    }
    .whychoose .whychoose_rightbg ul li::before {
        left: 6px
    }
    .meet_teem p {
        font-size: 14px;
        text-align: justify!important
    }
    .services .service_list .col-xl-12 {
        height: 320px
    }
    .services .service_list p {
        display: -webkit-box;
        max-height: 145px;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        -webkit-line-clamp: 7
    }
    .services .service_list h4 {
        font-size: 15px
    }
    .service_single .left_icon .service_icon {
        height: 160px;
        width: 160px;
        line-height: 160px
    }
    .service_single .left_icon .service_icon i:before {
        font-size: 90px
    }
    .service_single .service_single_list {
        border-top: none
    }
    .service_single .service_single_list::before {
        display: none
    }
    .service_single .left_icon::before {
        top: 0;
        height: 1px;
        width: 100%;
        transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -webkit-transform: rotate(30deg)
    }
    .service_single_works header h3::before {
        width: 36%;
        margin: 12px 0 0
    }
    .service_single_works header h3 {
        font-size: 20px;
        margin-bottom: 10px
    }
    .service_single_works {
        margin-top: 0
    }
    .work_single h1 {
        font-size: 18px
    }
    .work_single p {
        text-align: justify
    }
    .blog .blog_left .blog_content {
        padding-bottom: 30px
    }
    .blog .blog_left,
    .blog .blog_right {
        padding: 0
    }
    .blog .blog_list img {
        height: 160px
    }
    .blog .blog_list .blog_content {
        padding: 15px
    }
    .blog .blog_list .blog_content .btn {
        font-size: 12px;
        padding: 2px 10px
    }
    .blog .blog_list .blog_content h4 {
        font-size: 14px
    }
    .blog .blog_list .blog_content p {
        font-size: 12px;
        line-height: 16px
    }
    .blog .blog_right .popular_post .media h5 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 155px
    }
    .contact_us {
        background-size: 180px
    }
    .contact_us .contact_address {
        text-align: right;
        padding-left: 0;
        padding-bottom: 30px
    }
    .googlemap .locationmap {
        height: 200px
    }
    .googlemap {
        border: 2px solid #a60a2e
    }
    .thankyou {
        padding-bottom: 30px;
        padding-top: 30px
    }
    .quick_connect {
        display: inline-flex
    }
    footer {
        padding-bottom: 70px
    }
    .happy_clients .owl-clients .client_list p{font-size: 14px;}
    .happy_clients h4{font-size: 24px;}
    .happy_clients .owl-clients .client_list{margin: 10px;padding: 15px;}
    .happy_clients .owl-clients .client_list svg{left: 0;top: 0;}
    .happy_clients .col-xl-12{padding: 0;}
    .hm_service .hm_serlist{width: 100%;}
}