@import url("responsive.css");


body {
    margin:0%;
    padding:0%;
    overflow-x:hidden !important;
    
 }
/**.slide-bg{
    width:100%;
    height:130vh;
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    backface-visibility:hidden;
    animation:slideBg 8s linear infinite 0s;
    animation-timing-function:ease-in-out;
    background-image:url(../images/b-4.jpg);
    transform:skew(0deg, -5deg) translateY(-70px);

}
@keyframes slideBg{
   0%{
        background-image:url(../images/b-1.jpg) ;               
    }
    33% {
        background-image: url(../images/b-2.jpg);
    }
    66% {
        background-image: url(../images/b-6.jpg);
    }
    100% {
        background-image: url(../images/b-5.jpg);
    }
}*/
.slide-bg .carousel-item {
    transition: transform 2s ease, opacity .5s ease-in-out;     
}
.slide-bg .carousel-inner {
    transform: skew(0deg, -5deg) translateY(-145px);
}
.nav-link {
    font-size: 16px;
    margin: 15px;
    color: white;
    font-weight: 700;
}

    .nav-link:hover {
        color: #d9d9d9 !important;
    }

.navbar-toggler  {
    stroke:white;
}
.navbar_fixed {
    position: relative;
    width: 100%;
    top: -1%;
    left: 0;
    right: 0;
    background:;
    box-shadow: var(--box-shadow);
    z-index: 999;
    transition: background 1s ease;
  /**transform: skew(0deg, 5deg)*/
}
.slide-bg .navbar_fixed .navbar .navbar-brand{
    font-size: 50px;
    color: #FFFFFF;
    padding: 0 0rem 0 0rem;
}
.carousel-caption{
    padding-left:10px;
}
.carousel-caption h5 {
    text-align: start;
    font-size: 60px;
    padding-left: -100px;
    transform: skew(0deg, 5deg);
    padding-top: -155px;
    padding-right: 5%;
}
.carousel-caption p {
    text-align: left;
    font-size: 20px;
    transform: skew(0deg, 5deg);
    padding-bottom: 25%;
}

 @media only screen and (max-width: 400px) and (min-width: 320px){
    
    }
    /**********      Section-1      ********/
    .section-1 .skewed {
    position: relative;
    height: 600px;
    width: 99%;
    background-color:;
    padding: 5px 0;
    transform: skew(0deg, -5deg) translateY(-150px)
}
.section-1 .head-1 {
    transform: skew(0deg, 0deg) translateY(0px);
}
.section-1 .skewed .col-md-6 .heading-1 {
    font-size: 60px;
    font-weight: 600;
    transform: skew(0deg, 5deg) ;
}
.section-1 .skewed .para-1 {
    color: #737373;
    transform: skew(0deg, 0deg) translateY(0px);
}

.section-1 .col-md-6 {
    
   
    padding-top: 12%;
    padding-bottom: 10%;
    padding-left: 2%;
}
.section-1 .skewed .col-md-6 .counts {
 
}
.section-1 .skewed .camera {
    transform: skew(0deg, 5deg) ;
}
    .section-1 .skewed .camera i {
        transform: skew(0deg, 0deg);
        color: #ffcc00;
        padding-left: 40%;
        font-size: 50px;
    }
.section-1 .skewed .camera h3 {
    padding-left: 5%;
    color: #ffcc00;
    font-size: 35px;
}
.section-1 .skewed .camera .para-2{
    padding-top:0%;
    padding-left:55%;
    text-align:;
    font-weight:700;
    padding-bottom:4%;
}
.section-1 .skewed .tripod{
    transform: skew(0deg, 5deg);
}

.section-1 .skewed .tripod i{
    color: #ffcc00;
    padding-left: 40%;
    font-size: 50px;
}

.section-1 .skewed .tripod h3 {
    padding-left: 7%;
    color: #ffcc00;
    font-size: 35px;
}

.section-1 .skewed .tripod .para-2 {
    padding-top: 0%;
    padding-left: 55%;
    text-align: center;
    font-weight: 700;
    padding-bottom: 4%;
}
.section-1 .skewed .photos{
    transform: skew(0deg, 5deg);
}
.section-1 .skewed .photos i {
    color: #ffcc00;
    padding-left: 40%;
    font-size: 50px;
}

.section-1 .skewed .photos h3 {
    padding-left: 5%;
    color: #ffcc00;
    font-size: 35px;
}

.section-1 .skewed .photos .para-2 {
    padding-top: 0%;
    padding-left: 54%;
    text-align: center;
    font-weight: 700;
    
}
@media only screen and (max-width: 400px) and (min-width: 320px) {

   
}


/**********      Section-2      ********/

  .section-2 {
    background-image: url(../images/bg-1.jpg);
    background-repeat: no-repeat;
    background-size: ;
    background-attachment: fixed;
    opacity: 0.9;
    transform: skew(0deg, -5deg) translateY(-145px);
  }
    .section-2 .heading-3 {
        font-size: 20px;
        padding-top: 10%;
        text-align: center;
        color: whitesmoke;
        transform: skew(0deg, 5deg)
    }
    .section-2 .heading-4 {
        font-size: 50px;
        padding-top: 1%;
        text-align: center;
        color: whitesmoke;
        font-weight: 800;
        transform: skew(0deg, 5deg);
        padding-bottom:5%;
    }
    .section-2 .carousel-inner  {
        transform: skew(0deg, 5deg) translateY(0);
        margin-left:12%;
       padding-bottom:15%;
    }
    .section-2 .carousel-indicators {
        transform: skew(0deg, 5deg) translateY(0);
        top:75%;
    }
    .section-2 .carousel-inner .card{
        border:none;
        border-radius:0;
        padding:0;
    }
        .section-2 .carousel-inner .card img :hover{
            color: #ffcc00;
            opacity:0.5;
        }
        .section-2 .carousel-inner .card .card-img-top {
            padding: 0;
        }
        .section-2 .carousel-inner .card #button {
            margin-left: 28%;
        }
    .section-2 .carousel-inner .card #button :hover {
            background-color:black;
            font-weight:500;
     }
    .section-2 .carousel-inner .card .card-title {
            text-align: center;
     }
        .section-2 .carousel-inner .card .card-title :hover {
            color: #ffcc00;
        }
   @media only screen and (max-width: 400px) and (min-width: 320px) {
    
    }


/**********      Section-3     ********/
.section-3 .skewed-1 {
    position: relative;
    height: 600px;
    width: 100%;
    background-color:;
    padding: 5px 0;
    transform: skew(0deg, -5deg) translateY(-150px)
}
    .section-3 .skewed-1 .col-md-6 .heading-1 {
        font-size: 60px;
        font-weight: 600;
        transform: skew(0deg, 5deg);
        text-align:right;
        padding-top:-40px;
    }
.section-3 .col-md-6 {
    padding-top: 11%;
    padding-bottom: 10%;
    
}
.section-3 .skewed-1 .para-1{
    text-align:right;
}

.section-3 .skewed-1 .carousel-inner {
    transform: skew(0deg, -0deg) translateY(-153px)
}

@media only screen and (max-width: 400px) and (min-width: 320px) {
    
}


/**********      Section-4     ********/
.section-4 {
    background-color: #999999;
    width:100%;
    background-attachment:;
    transform: skew(0deg, -5deg) translateY(-255px);
    margin-top:0;
}
    .section-4 .carousel-inner {
        transform: skew(0deg, 5deg) translateY(0);
        margin-left: 0%;
        padding-bottom: 15%;
    }
    .section-4 .icons{
        transform: skew(0deg, 5deg) translateY(0);
    }
  .section-4 .heading-3 {
    font-size: 20px;
    padding-top: 10%;
    text-align: center;
    color: whitesmoke;
    transform: skew(0deg, 5deg)
  }

  .section-4 .heading-4 {
    font-size: 50px;
    padding-top: 1%;
    text-align: center;
    color: whitesmoke;
    font-weight: 800;
    transform: skew(0deg, 5deg);
    padding-bottom: %;
  }
.section-4 .carousel-inner  .card .card-title{
    text-align:center;
    font-weight:700;
}
    .section-4 .carousel-inner .card .post {
        text-align: center;
        color:#999999;
        font-size:17px;
    }
    .section-4 .carousel-inner .card .card-text {
        text-align: center;
        color: #999999;
        font-size: 17px;
    }
    .section-4 .carousel-inner .card {
        background-color: #ededde;
        border: none;
        border-radius: 0;
        padding: 0;
    }
@media only screen and (max-width: 360px)  {
   
}
    @media only screen and (max-width: 400px) and (min-width: 360px) {
    
}

    /**********      Section-5     ********/
.section-5 .skewed-2 {
        position: relative;
        height: 400px;
        width: 99%;
        background-color:;
        padding: 5px 0;
        transform: skew(0deg, -5deg) translateY(-260px);
    }


.section-5 .skewed-2 .col-md-6 .heading-1 {
            font-size: 60px;
            font-weight: 600;
            transform: skew(0deg, 5deg);
            text-align: right;
            padding-top: -40px;
            color: white;
        }

 .section-5 .col-md-6 {
        padding-top: 11%;
        padding-bottom: 10%;
    }

.section-5 .skewed-2 .para-1 {
    text-align: right;
    color: white;
    transform: skew(0deg, 5deg);
}

.section-5 .skewed-2 .back-1 .para-3 {
        padding-top: 10%;
        padding-bottom: 0%;
        transform: skew(0deg, 5deg);
        color: aliceblue;
 }

.section-5 .skewed-2 .back-1 .client img{
        border-radius:90%;
}
.section-5 .skewed-2 .back-1 .client{
        padding-left:20%;
}
    .section-5 .skewed-2 .back-1 .client .heading-5 {
        color: aliceblue;
        padding-top: 5%;
        padding-left: 3%;
        transform: skew(0deg, 5deg);
    }

/**.section-5 .skewed-2
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
    display: block;
} */
.section-5 .skewed-2 .container .controls {
    transform: skew(0deg, 05deg) translateY(-195px);
    bottom: 0%;
}



@media only screen and (max-width: 400px) and (min-width: 320px) {
    
}
/**********      Section-6     ********/


.section-6 {
    transform: skew(0deg, -5deg) translateY(-70px);
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    background-size:;
    background-attachment: ;
}
.section-6 .centered {
        position: absolute;
        top: 30%;
        left:30%;
        transform: translate(-50%, -50%);
        transform: skew(0deg, 5deg);
        color:white;
}
.section-6 .centered .heading-6 {
            font-size: 60px;
            font-weight: 700;
           margin-left:0%;
           text-align:center;
}
.section-6 .centered .heading-7 {
            font-size: 80px;
            font-weight: 700;
            text-align:center;
}
    .section-6 .centered button {
        padding: 15px;
        border-radius: 0px;
        font-weight: 700;
        font-size: 30px;
        color: #ff9900;
        border-color: white;
        border-color: white;
        background-color:;
        margin-left:30%;
        margin-top:5%;
        margin-bottom:5%;
    }
    .section-6 .centered a :hover {
        background-color: #ff9900;
        color: white;
    }

@media only screen and (max-width: 400px) and (min-width: 320px) {
   
}


/**********      Section-7     ********/
.section-7 {
    transform: skew(0deg, -5deg) translateY(-45px);
}
    .section-7 .mob-no{
        margin-left:20%;
        margin-right:10%;
    }
    .section-7 .heading-8 {
        text-align: center;
        font-size: 20px;
        transform: skew(0deg, 5deg);
        padding-top: 10%;
        font-weight:500;
    }
    .section-7 .heading-9 {
        text-align: center;
        font-size: 50px;
        font-weight: 800;
        transform: skew(0deg, 5deg);
        
    }
    .section-7 p {
        transform: skew(0deg, 5deg);
        font-weight:800;
    }
    .section-7 i {
        color: #ffcc00;
        font-size: 70px;
        transform: skew(0deg, 5deg);
        padding-left: 20%;
    }
    .section-7 .mob-no #icon-1{
        padding-left:40%;
    }
    .section-7 .mob-no .para-4 {
        padding-left:10%;
        padding-top:10%;
    }
    .section-7 .address{
        margin-top:20px;
    }
    .section-7 .address #icon-2 {
        padding-left:35%;
        padding-top:2%;
    }
        .section-7 .address .para-4 {
            padding-top: 10%;
        }
    .section-7 .mail{
        margin-top: 20px;
    }

        .section-7 .mail #icon-3 {
            padding-left: 145%;
            padding-top: 20%;
        }

        .section-7 .mail .para-4 {
            padding-top: 4%;
            padding-left: 135%;
        }

@media only screen and (max-width: 400px) and (min-width: 320px) {
    
}
/**********      Section-9    ********/
.section-9 {
    margin-top: 10%;
    transform: skew(0deg, -5deg) translateY(-92px ) ;
    height: 100%;
    background-color: #262626;
    background-repeat: no-repeat;
    background-size:;
    background-attachment: fixed;
}
    .section-9 .heading-10 {
        transform: skew(0deg, 5deg);
        padding-top: 12%;
        padding-bottom: 2%;
        text-align: center;
        color: #ffcc00;
        
    }
    .section-9 .address-1 .heading-12{
        font-size:20px;
        padding:12%;
    }
    .section-9 .address-1 {
        color: white;
        transform: skew(0deg, 5deg);
        padding-left: 28%;
        font-size: 15px;
    }
.vertical {
    border-right: 0.5px solid #404040;
    height: 130px;
    padding-left: %;
}
.section-9 .socials {
    color: white;
    transform: skew(0deg, 5deg);
    padding-top: 4%;
    padding-left: 6%;
}
        .section-9 .socials .heading-13 {
            font-size: 20px;
         padding-top:10%;
            padding-bottom: 30%;
            padding-left:6%;
        }
        .section-9 .socials #icon-4
        {
            color:white;
            font-size:27px;
            padding:10%;
            padding-right:0%;
        }
    .section-9 .socials a {
        padding: 4%;
    }
        .section-9 .socials a :hover {
          
           color : #ff9900;
        }
    .vertical-1 {
        border-left: 0.5px solid #404040;
        height: 130px;
        padding-left: 0%;
        padding-right: 0%;
    }

        .section-9 .contacts {
            color: white;
            transform: skew(0deg, 5deg);
            padding-top: 4%;
            padding-left: 7%;
            padding-bottom: 10%;
        }
        .section-9 .contacts .heading-14 {
            font-size: 20px;
            padding: 12%;
            padding-top:15%;
          padding-left:60%;
        }
            .section-9 .contacts .para-6 {
                padding-left: 50%;
                padding-top:8%;
            }

@media only screen and (max-width: 40s0px) and (min-width: 320px) {
    
}

/**********      Section-10    ********/
.section-10 {
    height:;
    width: 100%;
    background:url();
   top:-50px;
   text-align:center;
  }