/*
  * Name: Perfect Shape - Gym Landing Page HTML Template
  * Version: 1.0
  * Author: Glowlogix
  * Author URI: http://clients.glowlogix.com.pk/shaheer/perfectshape
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700;800;900&display=swap');

/*------------------------------------------------------------------

[Table of contents]

  1.  Header / #header
  2.  Navigation / #navbar
  2.  Home / #home
  2.  About / #about
  3.  Team / #team
  4.  Message / #message
  5.  Meet Us / #meet-us
  6.  Footer / #footer
  7.  Switcher
  8.  Responsiveness
------------------------------------------------------------------*/


* {
    font-family: 'Inter', sans-serif;
}

html {
    scroll-behavior: smooth;
}

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


/* Header
-------------------------------------------------------------- */

header {
    max-width: 70%;
    margin   : 0 auto;
    width    : 70%;
    position : absolute;
    left     : 0px;
    right    : 0px;
}

/* Navbar */

.navbar {
    position: relative;
    z-index : 20;
}

.navbar .menu {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
}

.navbar .menu .brand {
    position: relative;
    z-index : 10;
}

.navbar .menu .brand img {
    max-width: 180px;
    width    : 100%;
    padding  : 30px 0;
}

.navbar .menu .menu-icon {
    max-width: 24px;
    width    : 100%;
    cursor   : pointer;
    z-index  : 1;
    position : fixed;
    top      : 30px;
    right    : 30px;

}

.navbar .menu .menu-icon img {
    max-width: 24px;
}

.navbar .menu .menu-shape {
    position  : fixed;
    right     : -15.7em;
    top       : 0;
    transition: 0.5s ease-in-out;
}

.navbar .menu .menu-shape>.menu-shape-green,
.menu-shape-purple,
.menu-shape-pink,
.menu-shape-orange,
.menu-shape-blue {
    display: none;
}

.navbar .menu .menu-shape>.menu-shape-red {
    display: block;
}

.menu-shape>.menu-links {
    list-style-type: none;
    position       : absolute;
    top            : 120px;
    left           : 150px;
}

.menu-shape>.menu-links>li>a {
    color          : #ffffff;
    text-decoration: none;
    line-height    : 34px;
    text-transform : uppercase;
    font-size      : 14px;
    font-weight    : 500;
    font-style     : italic;
    transition     : 0.1s ease-in-out;
}

.menu-shape>.menu-links>li>a:hover {
    font-weight: 700;
}

.navbar .menu .menu-icon:hover+.menu-shape {
    position: fixed;
    top     : 0;
}

.toggle-menu {
    right: -80px !important;
}


/* Home */

.bg-hero {
    background     : #f2f2f2 url(../assets/bg-hero.jpg) no-repeat center top;
    height         : 768px;
    display        : flex;
    justify-content: center;
    flex-flow      : column;
    align-items    : center;
    background-size: cover;
}

.home::before {
    content : url(../assets/left-shape.png);
    position: absolute;
    z-index : 5;
    left    : 0px;
}

.bg-hero .bg-hero-container {
    max-width: 100%;
    margin   : 0 auto;
    width    : 70%;
    position : relative;
    z-index  : 7;
    top      : 10%;
}

.bg-hero .bg-hero-container h2 {
    font          : normal normal bold 32px/40px 'Inter', sans-serif;
    margin        : 0px;
    color         : #ffffff;
    display       : flex;
    align-items   : flex-start;
    flex-direction: column;
    transform     : skewX(-10deg);
}

.bg-hero .bg-hero-container h2 span {
    background-color: #E40612;
    padding         : 2px 6px;
}


.jump-links,
.jump-links1,
.jump-links2,
.jump-links3,
.jump-links4 {
    text-transform: uppercase;
}

.jump-links {
    position       : relative;
    top            : 48%;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    z-index        : 10;
}

.jump-links>h5 {
    font-size  : 14px;
    font-weight: 400;
    margin     : 0px;
}

.jump-links>h5>a {
    text-decoration: none;
    color          : #ffffff;
}

.jump-links>.vertical-line {
    width           : 1px;
    height          : 40px;
    border-radius   : 20%;
    margin          : 12px 0;
    background-color: #ffffff;
}

.jump-links1 {
    position       : relative;
    top            : 110%;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    z-index        : 10;
}

.jump-links1>h5 {
    font-size  : 14px;
    font-weight: 400;
    margin     : 0px;
}

.jump-links1>h5>a {
    text-decoration: none;
    color          : #ffffff;
}

.jump-links1>.vertical-line {
    width           : 1px;
    height          : 40px;
    border-radius   : 20%;
    margin          : 12px 0;
    background-color: #ffffff;
}



/* About */

.about .about-desktop {
    display   : flex;
    max-width : 100%;
    background: linear-gradient(145deg, #2f2f2f, #191919);
}

.about .about-mobile {
    display: none;
}

.about::before {
    content : url(../assets/left-shape2.png);
    position: absolute;
    left    : -64px;
    z-index : 5;
}


.about .image {
    max-width: 40%;
    width    : 100%;
}

.about .image .about-img1 {
    background     : url(../assets/about1.jpg) no-repeat right top;
    background-size: cover;
    width          : 100%;
    height         : 50%;
}

.about .image .about-img2 {
    background     : url(../assets/about2.jpg) no-repeat right top;
    background-size: cover;
    width          : 105%;
    height         : 50%;
}

.content-about::before {
    content : url(../assets/big-shape.png);
    position: absolute;
    left    : -2em;
    top     : -47.95em;
    z-index : 1;
}

.content-about {
    max-width  : 60%;
    align-items: center;
    display    : flex;
    flex-flow  : column;
    background : linear-gradient(145deg, #2f2f2f, #191919);
    transform  : skewX(12deg);
    position   : relative;
    left       : -130px;
}

.content-about .content-inner-top {
    max-width: 50%;
    height   : 19em;
    display  : flex;
    flex-wrap: wrap;
    margin   : 0 auto;
    transform: skewX(-12deg);
    padding  : 110px 0;
}

.content-about .content-inner-top h1 {
    color         : #ffffff;
    margin-bottom : 16px;
    transform     : skewX(-10deg);
    margin-top    : 0;
    font-size     : 24px;
    text-transform: uppercase;
}

.content-about .content-inner-top .info-inner {
    font-size    : 14px;
    color        : #ffffff;
    margin-bottom: 0;
    margin-top   : 10px;
    line-height  : 21px;

}

.content-about .content-inner-top h1 span {
    color           : #363636;
    background-color: #ffffff;
    padding         : 2px 16px;
    line-height     : 40px;
}

.content-about .content-inner-top .button {
    background-color: #E40612;
    transform       : skewX(-10deg);
    margin-top      : 24px;
}

.content-about .content-inner-top .button-about a {
    color          : #ffffff;
    display        : block;
    padding        : 8px 24px;
    text-decoration: none;
}

.content-about .button-about a:hover {
    background-color: #ffffff;
    color           : #363636;
}

.content-about .content-inner-bottom {
    max-width: 50%;
    height   : 16.25em;
    display  : flex;
    flex-wrap: wrap;
    margin   : 0 0 0 -240px;
    transform: skewX(-12deg);
    padding  : 170px 0;
}

.content-about .content-inner-bottom h1 {
    color         : #ffffff;
    margin-bottom : 16px;
    transform     : skewX(-10deg);
    margin-top    : 0;
    font-size     : 24px;
    text-transform: uppercase;
}

.content-about .content-inner-bottom p {
    font-size    : 14px;
    color        : #ffffff;
    margin-bottom: 0;
    margin-top   : 10px;
    line-height  : 21px;

}

.content-about .content-inner-bottom h1 span {
    color           : #1b1b1b;
    background-color: #ffffff;
    padding         : 2px 16px;
    line-height     : 40px;
}

.content-about .content-inner-bottom .button {
    background-color: #E40612;
    transform       : skewX(-10deg);
    margin-top      : 24px;
}

.content-about .content-inner-bottom .button-about a {
    color          : #ffffff;
    display        : block;
    padding        : 8px 24px;
    text-decoration: none;
}


/* Team */

.team {
    background: #191919;
    height    : 720px;

}

::-webkit-scrollbar {
    display: none;
}

.team::before {
    content : url(../assets/team-shape.png);
    position: absolute;
}

.team-container::before {
    content : url(../assets/team-shape2.png);
    position: absolute;
    left    : 0px;
}

.team .team-container .team-container-inner {
    max-width: 100%;
}

.team .team-container .team-container-inner .heading-team h1 {
    margin        : 0px;
    padding       : 100px 0 70px 0;
    color         : #ffffff;
    text-align    : center;
    font-size     : 32px;
    text-transform: uppercase;
}

.members::after {
    content  : '';
    max-width: 63%;
    width    : 63%;
    height   : 9em;
    position : absolute;
    transform: translate(0, 213%);
    background-image: linear-gradient(to top, #191919 0, #191919fa 20%,
            #191919f7 25%,
            #191919f2 35%,
            #191919f0 40%,
            #191919eb 45%,
            #191919e6 50%,
            #191919de 55%,
            #191919d1 60%,
            #191919bf 65%,
            #191919a1 70%,
            #19191973 75%,
            #19191945 80%,
            #19191926 85%,
            #19191914 90%,
            #19191908 95%,
            #19191900 100%);
}

.team .team-container .team-container-inner .members {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: center;
    overflow-y     : scroll;
    height         : 400px;
    max-width      : 60%;
    margin         : 0 auto;

}

.team .team-container .team-container-inner .members .member1 {
    max-width : 30.33%;
    text-align: center;
    margin    : 0;

}

.team .team-container .team-container-inner .members .member1 .member-image {
    transform: skewX(-10deg);
}

.team .team-container .team-container-inner .members .member1 .member-image img {
    max-width : 80%;
    width     : 240px;
    height    : 240px;
    object-fit: cover;
}

.team .team-container .team-container-inner .members .member1 .member-info {
    background  : #E40612;
    transform   : skewX(-10deg);
    padding     : 8px 0;
    max-width   : 170px;
    margin-left : auto;
    margin-right: 14px;
    position    : relative;
    top         : -26px;
}

.team .team-container .team-container-inner .members .member1 .member-info h5 {
    color         : #ffffff;
    margin        : 0px 0px 2px 0px;
    font-size     : 14px;
    text-transform: uppercase;
}

.team .team-container .team-container-inner .members .member1 .member-info p {
    color    : #ffffff;
    margin   : 0px;
    font-size: 14px;
}

.jump-links2 {
    position       : relative;
    top            : -91%;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    z-index        : 10;
}

.jump-links2>h5 {
    font-size  : 14px;
    font-weight: 400;
    margin     : 0px;
}

.jump-links2>h5>a {
    text-decoration: none;
    color          : #ffffff;
}

.jump-links2>.vertical-line {
    width           : 1px;
    height          : 40px;
    border-radius   : 20%;
    margin          : 12px 0;
    background-color: #ffffff;
}


/* Message */

input,
button:focus {
    outline            : 0;
    box-shadow         : none;
    background         : transparent;
    color              : #ffffff;
    border-bottom-color: red;
}

.message {
    background-image   : linear-gradient(45deg, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.8)), url(../assets/message.jpg);
    background-size    : cover;
    background-position: center;
    display            : flex;
    flex-flow          : column;
    justify-content    : center;
    align-items        : center;
    height             : 700px;
}

.message::before {
    content : url(../assets/message-shape.png);
    position: absolute;
    right   : 0px;
}

.message .message-container {
    max-width      : 50%;
    width          : 50%;
    display        : flex;
    flex-flow      : column;
    justify-content: center;
    align-items    : center;
    margin-top     : auto;
    height         : 21em;
}

.message .message-container .heading-message h2 {
    color         : #ffffff;
    margin-bottom : 16px;
    transform     : skewX(-10deg);
    margin-top    : 0;
    font-size     : 24px;
    text-align    : center;
    text-transform: uppercase;
}

.message .message-container .heading-message h2 span {
    color           : #1b1b1b;
    background-color: #ffffff;
    padding         : 2px 16px;
    line-height     : 40px;
}

.message .message-container .message-form {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: center;
}

.message .message-container .message-form .form-field {
    max-width     : 50%;
    width         : 50%;
    display       : flex;
    flex-direction: column;
    margin-bottom : 16px;

}

.message .message-container .message-form .form-btn button {
    border          : none;
    background-color: #E40612;
    color           : #ffffff;
    transform       : skewX(-10deg);
    padding         : 10px 24px;
    font-size       : 16px;
    cursor          : pointer;
    margin-top      : 24px;
}

.message .message-container .message-form .form-btn {
    display        : flex;
    max-width      : 100%;
    width          : 100%;
    justify-content: center;
    margin         : 0 auto;
}

.message .message-container .message-form .form-btn button:hover {
    background-color: #ffffff;
    color           : #1b1b1b;
}

.message .message-container .message-form .form-field label {
    color      : #ffffff;
    font-weight: 300;
}

.message .message-container .message-form .form-field input {
    border       : none;
    border-bottom: 1px solid #ffffff91;
    background   : transparent;
    padding      : 12px 8px;
    margin-right : 32px;
    transition   : 0.3s ease-in-out;
}

.message .message-container .message-form .form-field input:focus {
    border-bottom: 1px solid #e40612;
}

.jump-links3 {
    position       : relative;
    top            : -79%;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    z-index        : 10;
}

.jump-links3>h5 {
    font-size  : 14px;
    font-weight: 400;
    margin     : 0px;
}

.jump-links3>h5>a {
    text-decoration: none;
    color          : #ffffff;
}

.jump-links3>.vertical-line {
    width           : 1px;
    height          : 40px;
    border-radius   : 20%;
    margin          : 12px 0;
    background-color: #ffffff;
}

.jump-links4 {
    position       : relative;
    top            : 7%;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    z-index        : 10;
}

.jump-links4>h5 {
    font-size  : 14px;
    font-weight: 400;
    margin     : 0px;
}

.jump-links4>h5>a {
    text-decoration: none;
    color          : #ffffff;
}

.jump-links4>.vertical-line {
    width           : 1px;
    height          : 40px;
    border-radius   : 20%;
    margin          : 12px 0;
    background-color: #ffffff;
}

/* Meet Us */

.meet-us {
    background: #191919;
    overflow  : hidden;
}

.meet-us .meet-us-mobile {
    display: none;
}

.meet-us .meet-us-container {
    display   : flex;
    background: #191919;
    position  : relative;
}

.meet-us .meet-us-container .meet-us-left-content {
    max-width : 40%;
    width     : 40%;
    background: #d8d8d8;
}

.meet-us .meet-us-container .meet-us-left-content .map-inner {
    max-width : 103%;
    width     : 103%;
    height    : 37.5em;
    object-fit: cover;
    display   : block;
}

#gmap_canvas-desktop,
#gmap_canvas-mobile {
    filter: grayscale(1);
    width : 100%;
    height: 600px;
}

#gmap_canvas-desktop:hover,
#gmap_canvas-mobile:hover {
    filter: grayscale(0);
}

.mapouter {
    position  : relative;
    text-align: right;
}

.gmap_canvas-desktop,
.gmap_canvas-desktop {
    overflow  : hidden;
    background: none !important;
}

.meet-us .meet-us-container .meet-us-left-content .map-inner img {
    max-width : 103%;
    height    : 37.5em;
    object-fit: cover;
    display   : block;
}


.meet-us .meet-us-container .meet-us-left-content .testimonial-slider {
    display        : flex;
    justify-content: center;
    position       : absolute;
    align-items    : flex-end;
}

.meet-us .meet-us-container .meet-us-left-content .testimonial-slider .slider-images img {
    /* max-width: 50%; */
    width          : 100%;
    height         : 16.85em;
    object-fit     : cover;
    display        : block;
    object-position: top;
}

.meet-us .meet-us-container .meet-us-left-content .testimonial-slider .indicators {
    position : absolute;
    display  : flex;
    max-width: 100%;
    width    : 80%;
}

.meet-us .meet-us-container .meet-us-left-content .testimonial-slider .indicators .slide {
    width           : 9px;
    height          : 9px;
    border-radius   : 100%;
    background-color: #eaeaea;
    margin-right    : 6px;
}

.meet-us .meet-us-container .meet-us-left-content .testimonial-slider .indicators .slide:hover {
    background-color: #e40612;
    cursor          : pointer;
}

.meet-us .meet-us-container .meet-us-right-content {
    max-width  : 60%;
    width      : 60%;
    background : #191919;
    transform  : skewX(13deg);
    margin-left: auto;
    display    : flex;
    flex-flow  : column;
    align-items: center;
    position   : relative;
    left       : -28px;
}

.meet-us .meet-us-container .meet-us-right-content .meet-us-address-info {
    display    : flex;
    align-items: center;
    height     : 600px;
}


.meet-us .meet-us-container .meet-us-right-content .meet-us-address-info .meet-us-address-info-inner {
    margin-left: auto;
    transform  : skewX(-12deg);
}

.meet-us .meet-us-container .meet-us-right-content .meet-us-quote-info {
    max-width  : 100%;
    min-height : 270px;
    width      : 100%;
    background : #ffffff;
    display    : flex;
    align-items: center;
}

.meet-us .meet-us-container .meet-us-right-content .meet-us-quote-info .meet-us-quote-inner {
    transform  : skewX(-12deg);
    max-width  : 55%;
    margin-left: 10%;
}

.meet-us .meet-us-container .meet-us-right-content .meet-us-quote-info .meet-us-quote-inner .client-info {
    background-color: #E40612;
    color           : #ffffff;
    transform       : skewX(-10deg);
    padding         : 8px 24px;
    font-size       : 16px;
    width           : fit-content;
    position        : absolute;
    left            : -34%;
    top             : 7.2em;
}

.meet-us .meet-us-container .meet-us-right-content .meet-us-quote-info .meet-us-quote-inner .client-quote {
    height: 60px;
}

.meet-us .meet-us-container .meet-us-right-content .meet-us-quote-info .meet-us-quote-inner .client-quote .client-quote-inner {
    font-weight: 600;
    color      : #1b1b1b;
}

.meet-us .meet-us-container .meet-us-right-content .meet-us-quote-info .meet-us-quote-inner .client-info .client-name {
    margin        : 0px 0px 0px 0px;
    font-weight   : 500;
    text-transform: uppercase;
    font-size     : 14px;
}

.meet-us .meet-us-container .meet-us-right-content .meet-us-quote-info .meet-us-quote-inner .client-info .client-passion {
    margin   : 0px;
    font-size: 14px;
}

.meet-us .meet-us-container .meet-us-right-content .meet-us-address-info .meet-us-address-info-inner .info-heading h2 {
    color         : #ffffff;
    margin-bottom : 24px;
    transform     : skewX(-10deg);
    margin-top    : 0;
    font-size     : 24px;
    text-transform: uppercase;
}


.meet-us .meet-us-container .meet-us-right-content .meet-us-address-info .meet-us-address-info-inner .info-heading h2 span {
    color           : #1b1b1b;
    background-color: #ffffff;
    padding         : 2px 16px;
    line-height     : 40px;
}


.meet-us .meet-us-container .meet-us-right-content .meet-us-address-info .meet-us-address-info-inner .info-content {
    color  : #ffffff;
    display: flex;
}

.meet-us .meet-us-container .meet-us-right-content .meet-us-address-info .meet-us-address-info-inner .info-content img {
    max-width    : 120px;
    width        : 100%;
    margin-bottom: 24px;
}

.meet-us .meet-us-container .meet-us-right-content .meet-us-address-info .meet-us-address-info-inner .info-content h5 {
    font-size     : 14px;
    font-weight   : 500;
    text-transform: uppercase;
    margin        : 0;
}

.meet-us .meet-us-container .meet-us-right-content .meet-us-address-info .meet-us-address-info-inner .info-content p {
    font-size  : 14px;
    font-weight: 300;
    margin-top : 4px;
}

.meet-us .meet-us-container .meet-us-right-content .meet-us-address-info .meet-us-address-info-inner .info-content .info-content-inner .address {
    margin-right: 56px;
    max-width   : 72%;
    width       : 72%;
}


/* Footer */

footer .footer-content {
    background-color: #191919;
}

footer .footer-content p {
    color         : #ffffff;
    font-size     : 14px;
    text-transform: uppercase;
    font-weight   : 400;
    padding       : 32px 0px;
    text-align    : center;
    margin        : 0px;
    letter-spacing: 1px;
}


/* Switcher
-------------------------------------------------------------- */

.color-switcher {
    width           : 50px;
    height          : 50px;
    background-color: #242424;
    position        : absolute;
    right           : 300px;
    margin-top      : -7px;
    border-radius   : 4px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    box-shadow      : 0px 0px 4px 0px #0404047d
}

.color-switcher i {
    color          : #ffffff;
    border         : none;
    width          : 28px;
    height         : 28px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    animation      : rotate 3s infinite linear;
}


@keyframes rotate {
    100% {
        transform: rotate(0deg);
    }

    0% {
        transform: rotate(360deg);
    }
}

.color-variation {
    background-color: #242424;
    position        : fixed;
    top             : 160px;
    right           : -300px;
    padding         : 8px 4px;
    z-index         : 5;
    display         : flex;
    flex-direction  : column;
    border-radius   : 4px;
    z-index         : 1000;
    transition      : 0.5s ease-in-out;
}

.color-variation:hover {
    right: 0px;
}


.color-variation>h4 {
    color        : #ffffff;
    font-size    : 16px;
    font-weight  : 600;
    margin-left  : 8px;
    margin-bottom: 8px;
}

.color-variation .variation-inner .color {
    margin       : 0px 8px;
    width        : 32px;
    height       : 32px;
    border-radius: 50%;
    cursor       : pointer;
}

.color-variation .variation-inner {
    display: flex;
}

.color-variation .variation-inner .red {
    background-color: #f11616;
}

.color-variation .variation-inner .orange {
    background-color: #f16806;
}

.color-variation .variation-inner .green {
    background-color: #81b21b;
}

.color-variation .variation-inner .purple {
    background-color: #8f44ad;
}

.color-variation .variation-inner .pink {
    background-color: #f50079;
}

.color-variation .variation-inner .blue {
    background-color: #1e8aca;
}


/* Responsiveness */

/* Small devices */

@media (max-width: 449px) {

    .bg-hero .bg-hero-container h2 {
        display  : block;
        max-width: 230px;
        width    : 230px;
        position : relative;
        top      : 2.5em;
        font     : normal normal bold 36px/48px 'Inter', sans-serif;
    }




    header {
        max-width: 40%;
        width    : 40%;
    }

    .navbar .menu {
        justify-content: left;
    }

}

@media (max-width:550px) {
    .meet-us .meet-us-container .meet-us-right-content .meet-us-address-info {
        height: 54em;
    }

    .meet-us .meet-us-container .meet-us-right-content .meet-us-address-info .meet-us-address-info-inner .info-content {
        flex-flow: column;
    }
}

@media (min-width:551px) and (max-width:1290px) {
    .meet-us .meet-us-container .meet-us-right-content .meet-us-address-info .meet-us-address-info-inner .info-content .info-content-inner-left {
        margin-right: 24px;
    }
}


@media (min-width: 450px) and (max-width:1290px) {
    header {
        max-width: 65%;
        width    : 65%;
    }

    .bg-hero .bg-hero-container h2 {
        display  : block;
        max-width: 410px;
        width    : 410px;
        position : relative;
        top      : 2.5em;
        font     : normal normal bold 36px/48px 'Inter', sans-serif;
    }

}


@media (max-width: 320px),
(min-width: 320px) and (max-width: 1290px) {

    .content-about::before {
        display: none;
    }

    .bg-hero .bg-hero-container {
        display        : flex;
        justify-content: center;
        width          : 100%;
        height         : 30%;
        position       : relative;
        top            : 4%;
    }

    .menu-shape>.menu-links {
        left: 135px;
    }

    .navbar .menu .brand {
        left: -1em;
    }

    .navbar .menu .brand img {
        max-width: 175px;
        width    : 175px;
    }

    .navbar .menu .menu-shape {
        right: -300px;
    }

    .navbar .menu .menu-icon {
        right: 12px;
    }

    .home::before {
        display: none;
    }


    .about .about-mobile {
        display   : flex;
        max-width : 100%;
        background: linear-gradient(145deg, #2f2f2f, #191919);
        flex-flow : column;
    }

    .about .about-desktop {
        display: none;
    }

    .about::before {
        display: none;
    }


    .about .image {
        max-width: 100%;
        width    : 100%;
    }

    .about .image .about-img1 {
        height: 24em;
        width : 100%;
    }

    .about .image .about-img2 {
        height: 24em;
        width : 100%;
    }

    .content-about-top {
        height: 39.6em;
    }

    .content-about-bottom {
        height: 32em;
    }

    .content-about {
        max-width      : 100%;
        width          : 100%;
        transform      : skewX(0deg);
        left           : 0;
        display        : flex;
        align-items    : center;
        justify-content: center;
    }

    .content-about .content-inner-top {
        max-width      : 80%;
        margin         : 0 auto;
        height         : auto;
        padding        : 0px;
        transform      : skewX(0deg);
        flex-flow      : column;
        align-items    : flex-start;
        justify-content: center;
        margin-top: -48px;
    }

    .content-about .content-inner-top .info-inner {
        color: #ffffff;
    }

    .content-about .content-inner-bottom {
        max-width: 80%;
        margin   : 0px;
        padding  : 0px;
        height   : auto;
        transform: skewX(0deg);
        flex-flow: column;
        margin-top: -48px;
    }

    .jump-links {
        top: 41%;
    }

    .jump-links1 {
        top: 160.5%;
    }

    .jump-links3 {
        margin-top: -5%;
    }

    .members::after {
        display: none;
    }

    .team::before {
        left: -30px;
    }

    .team-container::before {
        left: -90px;
    }

    .team-container-inner::before {
        content : url(../assets/message-shape-mobile.png);
        position: absolute;
        right   : 0px;
    }

    .team .team-container .team-container-inner .members {
        max-width: 65%;
    }

    .team .team-container .team-container-inner .members .member1 .member-image {
        transform: skewX(-9deg);
    }

    .team .team-container .team-container-inner .members .member1 {
        max-width: 15em;
        width    : 100%;
    }


    .message::before {
        display: none;
    }


    .message .message-container {
        max-width: 100%;
        width    : 100%;
        position : relative;
        left     : 0;
    }


    .message .message-container .message-form {
        flex-flow: column;
        display  : block;
        max-width: 80%;
        width    : 80%;
        position : relative;
    }

    .message .message-container .heading-message h2 {
        text-align: end;
    }

    .message .message-container .message-form .form-field {
        max-width: 100%;
        width    : 100%;
    }

    .message .message-container .message-form .form-field input {
        margin-right: 15px;
    }

    .meet-us .meet-us-desktop {
        display: none;
    }

    .meet-us .meet-us-mobile {
        display: block;
    }



    .meet-us .meet-us-container .meet-us-right-content .meet-us-address-info .meet-us-address-info-inner .info-content .info-content-inner .address {
        max-width: 100%;
        width    : 100%;
    }

    .meet-us .meet-us-container .meet-us-left-content .testimonial-slider .indicators {
        top : 53%;
        left: 6%;
    }


    .meet-us .meet-us-container .meet-us-left-content {
        max-width: 100%;
        width    : 100%
    }

    .meet-us .meet-us-container .meet-us-left-content .map-inner {
        max-width: 100%;
        width    : 100%;
        height   : 28em;
    }

    .meet-us .meet-us-container .meet-us-left-content .map-inner img {
        max-width: 100%;
        width    : 100%;
        transform: translate(0%, -10%);
    }

    .meet-us .meet-us-container .meet-us-right-content {
        max-width: 100%;
        width    : 100%;
    }

    .meet-us .meet-us-container .meet-us-right-content {
        left: 0px;
    }

    .meet-us .meet-us-container {
        flex-flow: column;
    }

    .meet-us .meet-us-container .meet-us-right-content {
        transform: skewX(0deg);
    }

    .meet-us .meet-us-container .meet-us-right-content .meet-us-address-info .meet-us-address-info-inner {
        transform: skewX(0deg);
    }

    .meet-us .meet-us-container .meet-us-right-content .meet-us-quote-info .meet-us-quote-inner {
        transform: skewX(0deg);
        max-width: 78%;
    }

    .meet-us .meet-us-container .meet-us-right-content .meet-us-quote-info .meet-us-quote-inner .client-info {
        left: 0px;
    }

    .meet-us .meet-us-container .meet-us-left-content .testimonial-slider {
        position: static;
        display : block;
    }

    .meet-us .meet-us-container .meet-us-left-content .testimonial-slider .slider-images img {
        width     : 100%;
        object-fit: cover;
        height    : 24.85em;
        max-width : 100%;
    }

    .meet-us .meet-us-container .meet-us-right-content .meet-us-address-info .meet-us-address-info-inner .info-content img {
        margin-top: 3em;
    }

    .meet-us .meet-us-container .meet-us-right-content .meet-us-quote-info {
        height: 17em;
    }

    .meet-us .meet-us-container .meet-us-right-content .meet-us-quote-info .meet-us-quote-inner .client-info {
        position: relative;
        top     : 4em;
    }

    .meet-us .meet-us-container .meet-us-right-content .meet-us-quote-info .meet-us-quote-inner .client-quote {
        height: auto;
    }

    .meet-us .meet-us-container .meet-us-right-content .meet-us-address-info .meet-us-address-info-inner .info-content .info-content-inner .address {
        margin: 0;
    }
}

.meet-us-mobile .splide__pagination {
    bottom: 18em;
}

.splide__pagination__page {
    background: white !important;
    opacity   : 1 !important;
}

.splide__pagination__page.is-active {
    background: red !important;
}