/*
--------------------------
    Basic steup
--------------------------
yellow #f9b707
*/
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    scroll-behavior: smooth !important;
}
html,
body{
    font-family:'lato', 'arial', Verdana, Tahoma, sans-serif;

    font-weight: 300;
    color: rgb(34, 34, 34);
    background-color: #fff;
    font-size: 16px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
.clearfix { zoom : 1}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
    
}

/*
--------------------------
    header section
--------------------------
*/
header{
    /* background-image: url(../img/home1.jpg); */
    
    background-position: center;
    background-size: cover;
    /* min-height: 90vh; */
    position: relative;
    background-attachment: fixed;
   
}
.header__text-box {
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    width: 80%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.navbar{
    background-color: rgb(255, 255, 255) !important;

}
.navbar-light .navbar-nav .nav-link{
    font-weight:600 !important;
}
.heading-primary {
    color: #fff;
    /* text-transform: uppercase; */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    margin-bottom: 3.1rem; }
    .heading-primary--main {
      display: block;
      font-weight: 400;
      font-size: 3.7rem;
      letter-spacing:   .5rem;
      animation-name: moveInLeft;
      animation-duration: 1s;
      animation-timing-function: ease-out;
    text-transform: uppercase; }
    .heading-primary--sub {
      display: block;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: .3rem;
      width: 80%;
      margin: auto;
      margin-top: 20px;
      animation-name: moveInRight;
      animation-duration: 1s;
      animation-timing-function: ease-out; }
    
      .ani{
        animation-name: moveInRight;
        animation-duration: 1s;
        animation-timing-function: ease-out;
      }
      .anil{
        animation-name: moveInLeft;
        animation-duration: 1s;
        animation-timing-function: ease-out;
      }
          @keyframes moveInLeft {
            0% {
              opacity: 0;
              transform: translatex(-10rem);
              -webkit-transform: translatex(-10rem);
              -moz-transform: translatex(-10rem);
              -ms-transform: translatex(-10rem);
              -o-transform: translatex(-10rem); }
            80% {
              transform: translateX(1rem);
              -webkit-transform: translateX(1rem);
              -moz-transform: translateX(1rem);
              -ms-transform: translateX(1rem);
              -o-transform: translateX(1rem); }
            100% {
              opacity: 1;
              transform: translateX(0);
              -webkit-transform: translateX(0);
              -moz-transform: translateX(0);
              -ms-transform: translateX(0);
              -o-transform: translateX(0); } }
          
          @keyframes moveInRight {
            0% {
              opacity: 0;
              transform: translatex(10rem);
              -webkit-transform: translatex(10rem);
              -moz-transform: translatex(10rem);
              -ms-transform: translatex(10rem);
              -o-transform: translatex(10rem); }
            80% {
              transform: translateX(-1rem);
              -webkit-transform: translateX(-1rem);
              -moz-transform: translateX(-1rem);
              -ms-transform: translateX(-1rem);
              -o-transform: translateX(-1rem); }
            100% {
              opacity: 1;
              transform: translateX(0);
              -webkit-transform: translateX(0);
              -moz-transform: translateX(0);
              -ms-transform: translateX(0);
              -o-transform: translateX(0); } }

              @keyframes moveInBottom {
                0% {
                  opacity: 0;
                  transform: translateY(10rem);
                  -webkit-transform: translateY(10rem);
                  -moz-transform: translateY(10rem);
                  -ms-transform: translateY(10rem);
                  -o-transform: translateY(10rem); }
                100% {
                  opacity: 1;
                  transform: translateY(0);
                  -webkit-transform: translateY(0);
                  -moz-transform: translateY(0);
                  -ms-transform: translateY(0);
                  -o-transform: translateY(0); } }


              .btn, .btn:link, .btn:visited {
                text-decoration: none;
                text-transform: uppercase;
                padding: 15px 40px;
                display: inline-block;
                position: relative;
                font-size:  1rem;
                border-radius: 100px;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
                -ms-border-radius: 100px;
                -o-border-radius: 100px;
                transition: all .2s;
                -webkit-transition: all .2s;
                -moz-transition: all .2s;
                -ms-transition: all .2s;
                -o-transition: all .2s;
                border: none;
                cursor: pointer;
}
              
              .btn:hover {
                transform: translateY(-0.3rem);
                -webkit-transform: translateY(-0.3rem);
                -moz-transform: translateY(-0.3rem);
                -ms-transform: translateY(-0.3rem);
                -o-transform: translateY(-0.3rem);
                box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); }
                .btn:hover::after {
                  transform: scaleX(1.4) scaleY(1.6);
                  -webkit-transform: scaleX(1.4) scaleY(1.6);
                  -moz-transform: scaleX(1.4) scaleY(1.6);
                  -ms-transform: scaleX(1.4) scaleY(1.6);
                  -o-transform: scaleX(1.4) scaleY(1.6);
                  opacity: 0; }
              
              .btn:focus, .btn:active {
                outline: none;
                transform: translateY(-0.1rem);
                -webkit-transform: translateY(-0.1rem);
                -moz-transform: translateY(-0.1rem);
                -ms-transform: translateY(-0.1rem);
                -o-transform: translateY(-0.1rem);
                box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }
              
              .btn--white {
                background-color: #fff;
                color: #777; }
                .btn--white::after {
                  background-color: #fff; }
              
              .btn--green {
                background-color: #7ed56f;
                color: #fff; }
                .btn--green::after {
                  background-color: #7ed56f; }
              
              .btn::after {
                content: "";
                position: absolute;
                display: inline-block;
                height: 100%;
                width: 100%;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: 10rem;
                -webkit-border-radius: 10rem;
                -moz-border-radius: 10rem;
                -ms-border-radius: 10rem;
                -o-border-radius: 10rem;
                transition: all 0.4s;
                -webkit-transition: all 0.4s;
                -moz-transition: all 0.4s;
                -ms-transition: all 0.4s;
                -o-transition: all 0.4s; }
              
              .btn--animated {
                animation-name: moveInBottom;
                animation-duration: 0.7s;
                animation-timing-function: ease-out;
                animation-fill-mode: backwards; }
                
/* ============================================
                contact us
============================================= */
.section-book {
    padding: 15px 0;
    background-image: linear-gradient(to right bottom, #474747bb, #cfcfcfbb); 
    background-size: cover;
    background-position: center;
}
.row_book{
    max-width: 1140px;
    margin: auto;
}
    .book {
        background-image: linear-gradient(105deg,rgba(221, 221, 221, 0.829) 0%,rgba(212, 212, 212, 0.829) 50%, transparent 50%), url(../img/1.jpg);
        background-size: cover;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
        border-radius: 3px;
        /* margin: auto; */
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px; 
    }
    .book_form {
        width: 50%;
        padding: 50px; 
    }
    .form_group:not(:last-child) {
            margin-bottom: 20px !important; 
        }
            
    .form_input {
        background-color: rgb(255, 255, 255);
        color: inherit;
        display: block;
        width: 90%;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border: none;
        font-family: inherit;
        font-size: 15px;
        padding: 15px 20px;
        border-bottom: 3px solid transparent; 
        color: rgba(119, 119, 119, 0.7); 
    }
    .up_div{
        width: 300px !important;
    }
    .form_input:focus:valid {
        outline: none;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-bottom: 3px solid #55c57a; 
    }
    .form_input:focus:invalid {
        outline: none;
        border-bottom: 3px solid #ff7730; 
    }
    .form_input::-webkit-input-placeholder {
        color: rgba(119, 119, 119, 0.7); 
    }
    
    .form_label {
        display: block;
        margin-left: 10px;
        margin-top: 7px;
        transition: all .2s;
        -webkit-transition: all .2s;
        -moz-transition: all .2s;
        -ms-transition: all .2s;
        -o-transition: all .2s; 
    }
    
    .form_input:placeholder-shown + .form_label {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-40px);
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
}
    
    .form_radio-input {
        display: none; 
    }
    
    .form_radio-group {
        width: 49%;
        display: inline-block; 
    }
    .form_radio-label {
        font-size: 10px;
        cursor: pointer;
        position: relative;
        padding-left: 50px; 
    }
      
    .form_radio-button {
        height: 30px;
        width: 30px;
        display: inline-block;
        border: 4px solid #55c57a;
        position: absolute;
        left: 0;
        top: -7px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        transition: opacity .2s;
        -webkit-transition: opacity .2s;
        -moz-transition: opacity .2s;
        -ms-transition: opacity .2s;
        -o-transition: opacity .2s; 
    }
    .form_radio-button::after {
        content: "";
        height: 10px;
        width: 10px;
        background-color: #55c57a;
        display: inline-block;
        top: 50%;
        left: 50%;
        opacity: 0;
        transform: translate(16%, -4%);
        -webkit-transform: translate(16%, -4%);
        -moz-transform: translate(16%, -4%);
        -ms-transform: translate(16%, -4%);
        -o-transform: translate(16%, -4%);
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%; 
    }
      
    .form_radio-input:checked ~ .form_radio-label .form_radio-button::after {
        opacity: 1 !important; 
    }
    @media only screen and (max-width: 560px) {
        .head-p{
            font-size: 1.05rem;
        }
        .first-head{
            font-size: 2.5rem;
        }
      .section-book {
        padding: 100px 0; } 
        .book {
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%), url(../img/1.jpg); }
        .book_form {
            width: 100%;
            padding: 20px; }
            .form_input {
                width: 100%; 
            }
        .form_radio-group {
            width: 100%;
            margin-bottom: 20px; 
        }
        .heading-primary--sub {
            letter-spacing: .5rem; }
    
    }
       
    @media only screen and (max-width: 768px) {
        .book {
        background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 65%, transparent 65%), url(../img/1.jpg); } 
        .book_form {
            width: 70%; 
        } 
        .heading-primary--main {
            letter-spacing: .62rem;
            font-size: 3.75rem; }
    }

    /* for carasol */
    .carousel-item{
        min-height: 100vh;

    }
    .carousel-caption{
        margin-bottom: 20vh !important;
    }
    #carousel-inner{
        margin-bottom: 4rem ;
    }
    .carousel-img-1{
        background-image: linear-gradient( rgba(0, 0, 0, 0.616), rgba(0, 0, 0, 0.712)), url("../img/background.png");
        background-position:center center;
        background-size: cover;
        background-repeat: no-repeat;
        /* min-height: 90vh; */
        position: relative;
        background-attachment: fixed;
        
    }
    .carousel-img-2{
        background-size: cover;
        background-image:linear-gradient( rgba(0, 0, 0, 0.616), rgba(0, 0, 0, 0.712)), url("../img/b2.jpg");
        background-attachment: fixed;
        background-repeat: no-repeat;

        
    }
    .carousel-img-3{
        background-size: cover;
        background-image:linear-gradient( rgba(0, 0, 0, 0.616), rgba(0, 0, 0, 0.712)), url("../img/3b.jpg");
        background-attachment: fixed;
        background-repeat: no-repeat;
       
    }
    @media (min-width:768px){
        .carousel-img-1{
           
            -webkit-animation-name: zoombg;
            animation-name: zoombg;
            -webkit-animation-duration: 8s;
            animation-duration: 8s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
        .carousel-img-2{
            -webkit-animation-name: zoombg;
            animation-name: zoombg;
            -webkit-animation-duration: 8s;
            background-repeat: no-repeat;
            animation-duration: 8s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
        .carousel-img-3{
            -webkit-animation-name: zoombg;
            animation-name: zoombg;
            -webkit-animation-duration: 8s;
            animation-duration: 8s;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
    }
    @keyframes zoombg {
        0% {
          background-size: 100%; }
         70%{
            background-size: 105%;
         }
        100% {
          
          background-size: 100%;} 
        }
    .home-heading{
        background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url("../img/2bg.jpg");
        min-height:200px;
        padding: 2rem 0rem !important;
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        color: #fff;
        width: 100%;
    }
    .sec:after{
        display: block;
        height: 2px;
        width: 120px;
        background-color: rgb(20, 56, 92);
        margin: 20px auto 30px auto;
        content: "";
    }
    .bg-for-about{
        background-image: url(../img/ab.gif);
        min-height: 23rem;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .card_cus {
        /* position: relative; */
        min-height: 720px; }
        .card_side {
          min-height: 520px;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          width: 100%;
          /* position: absolute; */
          box-shadow: 0 1.5rem 1rem rgba(0, 0, 0, 0.2);
          /* top: 0; */
          /* left: 0; */
          transition: all .8s ease;
          -webkit-transition: all .8s ease;
          -moz-transition: all .8s ease;
          -ms-transition: all .8s ease;
          -o-transition: all .8s ease;
          border-radius: 3px;
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
          -ms-border-radius: 3px;
          -o-border-radius: 3px;
        /* text-align: justify;  */
    }
          .card_side--front {
            background-color: #fff; 
            min-height: 800px;
        }
            .card_picture {
                background-size: cover;
                height: 230px;
                background-blend-mode: screen;
                clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
                -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
                border-top-left-radius: .5rem;
                border-top-right-radius: .5rem; 
            position: relative;}
                .card_picture-1 {
                  background-image:  url(../img/1.jpg); }
                  .card_picture-2 {
                    background-image:  url(../img/s2.jpg); }
                    .card_picture-3 {
                        background-image:  url(../img/s3.jpg); }
                  .card_heading {
                    font-size: 25px;
                    font-weight: 300;
                    width: 65%;
                    text-transform: uppercase;
                    text-align: right;
                    color: #fff;
                    top: 120px;
                    right: 31px;
                    position: absolute; }
                    .card_heading_2 {
                        font-size: 25px;
                        font-weight: 300;
                        width: 70%;
                        text-transform: uppercase;
                        text-align: right;
                        color: #fff;
                        top: 120px;
                        right: 15px;
                        position: absolute;
                    overflow: hidden;
                padding-right: 20px; }
                .hed_3{
                    width: 50%;
                }
                  .card_heading-span {
                    padding: 5px 15px;
                    box-decoration-break: clone;
                    -webkit-box-decoration-break: clone; }
                    .card_heading-span--1 {
                      background-image: linear-gradient(to right bottom, rgba(255, 185, 0, 0.85), rgba(255, 119, 48, 0.85)); }
                  
/* =================================================

                        page-quote
================================================= */
.section_quote{
    background-image:linear-gradient(rgba(20, 56, 92, 0.678),rgba(20, 56, 92, 0.884)), url(../img/quote.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;   
    min-height: 400px;         
}
.quotform{
    background-color:rgb(20, 56, 92) ;
}
.inner_content{
    margin-top: -250px !important;
    max-width:892px;
    background-color: #fff;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    padding: 40px 20px;
}
.inner_content input,
.inner_content select,
.inner_content textarea{
    background-color: #eeeeee;
}
.inner_content .in_label{
    font-size: 1.1rem;
    font-weight: 500;
}
.sel{
    height: 40px;
}
#quote{
    position: fixed;
    top:40px;
    right: 20px;
    z-index: 99999;
}
#call{
    position: fixed;
    top:10px;
    right: 20px;
    z-index: 99999;
}
.num{
    padding-right: 5px;
    border-right: 2px solid #000000;
}
.email{
    padding-right: 5px;
    border-right: 2px solid #000000;
}
.mt-7{
    margin-top: 70px;
}
.c-primary{
  color:rgb(20, 56, 92) !important;
}
/* ===========================
            FAQ
=========================== */

.cp{
    cursor: pointer !important;
    color: rgb(20, 56, 92) ;
}
.bgp{
    background-color: rgb(20, 56, 92) !important;
}
@media(max-width:600px){
    #quote a{
        font-size: 12px;
    }
    #call a{
        font-size: 12px;
    }
    #call a svg{
        margin-right: 0px !important;
    }
    .mt-7{
        margin-top: 20px;
    }
    .navbar-toggler{
        margin-top: 70px !important;
    }
}