/* ===================================
    About
====================================== */

/*
    Theme Name: MegaOne | Medical
    Theme URI:
    Author: Themes Industry
    Author URI:
    Description: One Page Parallax Template
    Tags: one page, multipurpose, parallax, creative, html5
*/
:root {
    --redish: #F42F20;
    --blueish: #0000FF;
  }

@font-face {
    font-family: 'alliance-bold';
    src: url('/fonts/alliance-plattbold.eot');
    src: url('/fonts/alliance-plattbold.eot#iefix') format('embedded-opentype'),
            url('/fonts/alliance-plattbold.woff') format('woff'),
            url('/fonts/alliance-plattbold.ttf') format('truetype'),
            url('/fonts/alliance-plattbold.svg#revicons') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'alliance';
    src: url('fonts/alliance-plattregular.eot');
    src: url('/fonts/alliance-plattregular.eot#iefix') format('embedded-opentype'),
            url('/fonts/alliance-plattregular.woff') format('woff'),
            url('/fonts/alliance-plattregular.ttf') format('truetype'),
            url('/fonts/alliance-plattregular.svg#revicons') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'alliance', sans-serif;
    color: #000000;
    overflow-x: hidden !important;
}

p {
    color: #000000;
}

h1, h2, h3, h4, h5, h6 {font-family: 'alliance', sans-serif;}

section {
    padding: 6.4rem 0;
    margin: 0 7%;
    background-color: var(--blueish);
    overflow: hidden;
    position: relative;
}

section, .rounded-corners {
    -moz-border-radius: 30px !important;
    -webkit-border-radius: 30px !important;
    -khtml-border-radius: 30px !important;
    border-radius: 30px !important;
}

section, section p {
    font-size: 20px;
}

section.no-bg {background-color: transparent !important;}

section.no-padding {padding: 0;}

section.no-padding-bottom {padding-bottom: 0;}

.container-nav {
    margin-left: auto;
    margin-right: auto;
    width: 86%;
}
/* .section-full-width {
    margin: 0 !important;
    padding-left: 7% !important;
    padding-right: 7% !important;
} */
/*-------------------------------*/
/*Navigation Starts */
/*-------------------------------*/


.navbar {
    padding-right: 0 !important;
}

.navbar-nav .nav-link {
    margin-right: 0rem !important;
    font-size: 20px;
    color: var(--blueish);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active
.navbar-nav .nav-link.active{
    background: linear-gradient(to right, var(--blueish) 2%, var(--redish) 82%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bottom-nav,.header-appear .bottom-nav {
    top: 0;
    height: 102px;
    /* transform: translateY(100%); */
    transform: none;
    margin: 0 7% !important;
    width: 86%;
}

.bottom-nav.navbar-bottom-top {
    margin: auto !important;
    left: auto
}

/* Nav Bottom Line Hover Effect */
.nav-bottom-line .navbar-nav .nav-link::after {
    background: #3264f5;
    background: -moz-linear-gradient(left, var(--blueish) 2%, var(--redish) 82%);
    background: -webkit-linear-gradient(left, var(--blueish) 2%,var(--redish) 82%);
    background: linear-gradient(to right, var(--blueish) 2%,var(--redish) 82%);
}


/*-------------------------------*/
/*Navigation Ends */
/*-------------------------------*/

.sidemenu_btn {
    display: none !important;
}

.logo-default-right {
    margin-left: 2rem;
}

.navbar-brand {
    width: 265px;
}

.header-bg {
    overflow: hidden;
}

#home {
    padding: 0; 
    margin-top: 6.4rem;
}

.circle-bg-default {
    position: absolute;
}

.about-us-element-padding {
    padding: 3rem 0rem;
}

h1, .custom-title {
    font-size: 110px;
    line-height: 130px;
}

h1.reservation {
    color: var(--redish);
}

h1.courts {
    color: var(--blueish);
}

h1.padel-description, .padel-description, #contact, #contact p, #contact a, #contact a:hover {
    color: white;
}

h2 {
    font-size: 45px;
}

.align-items-center {
    text-align: center;
}

.section-text-punchline {
    font-size: 34px;
    line-height: 50px;
}

.section-row-padding-bottom {
    padding-bottom: 6rem;
}

.section-row-padding-top {
    padding-top: 6rem;
}

.padding-four {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.section-text-last-column {
    font-size: 34px;
    line-height: 45px;
}

.rounded-redbox-link {
    font-family: 'alliance-bold', sans-serif;
    color: white;
    background-color: var(--redish) !important;
    -moz-border-radius: 100px !important;
    -webkit-border-radius: 100px !important;
    -khtml-border-radius: 100px !important;
    border-radius: 100px !important;
}

.rounded-redbox-link-section {
    font-size: 40px;
    padding: 36px 60px;
    padding-right: 40px;
    line-height: 58px;
}

.navbar-nav .nav-link.rounded-redbox-link-nav {
    color: white;
    padding: 10px 30px !important;
}

.rounded-redbox-link:hover, .navbar-nav .nav-link.rounded-redbox-link-nav:hover, .navbar-nav .nav-link.sidebar-link-nav:hover {
    color: white !important;
    background: var(--blueish) !important;
    -webkit-background-clip: padding-box !important;
    -webkit-text-fill-color: white;
}

.margin-left-image {
    margin-left: 38px;
    float: right;
}

#padel-description, #padel-description p {
    color: white;
}

.redish-bg {
    background-color: var(--redish);
}

.blueish-bg {
    background-color: var(--blueish);
}

.copyrights, .copyrights a {
    font-size: 34px;
    color: var(--blueish);
}

.copyrights a:hover, .copyrights a:focus {
    color: var(--blueish);
}

.side-menu {
    background-color: var(--blueish);
}

/* ===================================
   Testimonial
====================================== */


.icon-quotes {
    color: #dabd1d;
    font-size: 24px;
    -webkit-transition: .2s ease;
    -o-transition: .2s ease;
    transition: .2s ease;
    cursor: pointer;
    line-height: 1.3;
    margin: 0 auto;
}

.paragraph {
    font-weight: normal;
    line-height: 1.920;
    font-size: 18px;
}

.testimonial-owl .owl-dots {
    margin-top: -61px !important;
    margin-left: 40px;
    position:relative !important;
    z-index:99;
    padding-bottom: 20px;
}

.testimonial-owl .owl-nav button.owl-next, .testimonial-owl .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    height: 20px;
    width: 20px;
    background: #ffffff;
    margin: 10px 5px;
    border-radius: 10px;
    transition: 0.5s ease;
}

.testimonial-owl button.owl-dot.active {
    background-color: var(--blueish) !important;
}

.owl-stage-outer .owl-stage .owl-item .item {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    height: 800px;
    overflow: hidden;
}

.slider-text {
    position: absolute;
    top: 180px;
    left: 70px;
    overflow: hidden;
    font-size: 110px;
    line-height: 130px;
    color: white;
    z-index: 9999;
}

.circle-default {
    -moz-border-radius: 400px;
    -webkit-border-radius: 400px;
    -khtml-border-radius: 400px;
    border-radius: 400px;
}

.circle-body-bg {
    position: absolute;
    top: 50px;
    background-color: var(--blueish);
    z-index: 0;
    width: 650px;
    height: 650px;
    left: -120px;
}

.circle-body-bg-container {
    position: absolute;
    width: 650px;
    height: 700px;
    left:0;
    overflow: hidden;
}

/* 

.parallax {
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .parallax__layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .parallax__layer--base {
    transform: translateZ(0);
  }
  .parallax__layer--back {
    transform: translateZ(-1px);
  } */

  
  



@media (min-width: 1200px) {
    .container {
        max-width: 85%;
    }

    .container-wider {
        max-width: 98% !important;
    }
}

@media (max-width: 1200px) {
    .center-brand .navbar-brand{
        width: 180px;
    }
    
    .footer-brand {
        width: 134px;
    }

    .footer-brand2 {
        width: 64px;
    }

    .copyrights, .copyrights a {
        font-size: 21px;
    }
}

@media (max-width: 997px) {
    .sidemenu_btn {
        display: inline !important;
    }

    .owl-stage-outer .owl-stage .owl-item .item {
        height: 500px;
    }
    
    .slider-text {
        top: 100px;
        left: 50px;
        font-size: 70px;
        line-height: 80px;
    }

    .circle-body-bg {
        top: 30px;
        position: absolute;
        background-color: var(--blueish);
        z-index: 0;
        width: 380px;
        height: 380px;
        left: -50px;
    }

    .circle-body-bg-container {
        width: 380px;
        height: 410px;
    }
}

@media (max-width: 1400px) {
    .reservation {
        font-size: 50px;
        line-height: 60px;
    }

    .section-text-punchline {
        font-size: 23px;
        line-height: 32px;
    }

    .rounded-redbox-link-section {
        font-size: 20px;
        padding: 20px 30px;
        padding-right: 24px;
        line-height: 29px;
    }

    .rounded-redbox-link-section img {
        width: 18px;
    }

    .margin-left-image {
        margin-left: 20px;
    }

    h1, .custom-title {
        font-size: 70px;
        line-height: 81px;
    }

    h2 {
        font-size: 28px;
    }

    section, section p {
        font-size: 16px;
    }

    h2.margin-top-xs, .margin-top-xs {
        margin-top: 2rem;
    }

    .section-row-padding-bottom {
        padding-bottom: 2rem;
    }

    .about-us-element-padding {
        padding: 1.5rem 0rem;
    }

    /* .circle-default {
        display: none;
    } */
}

@media (max-width: 767px) {
    .side-menu {
      width: 260px;
    }

    .no-circles-xs {
        display: none;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 85%;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 85%;
    }
}


@media screen and (max-width: 575px) {
    .slider-text {
        top: 88px;
        left: 50px;
        font-size: 50px;
        line-height: 60px;
    }
    
    .circle-body-bg {
        top: 30px;
        width: 300px;
        height: 300px;
        left: -50px;
    }

    .circle-body-bg-container {
        width: 300px;
        height: 330px;
    }
}