/* INDEX FILE */
     
     @import url("index.css");
     /* MOBILE APP SERVICES  */
     
     .ebk {
         height: 620px !important;
     }
     
     .mobileservices {
         position: relative;
     }
     
     .mobileservices .description {
         height: 100%;
         display: flex;
         justify-content: center;
         flex-direction: column;
         padding-left: 10px;
     }
     
     .mobileservices h4 {
         font-size: 28px;
         font-weight: bold;
     }
     
     .mobileservices p {
         font-size: 15px;
         width: 70%;
         font-weight: 500;
     }
     
     .mobileservices img {
         width: 70%;
     }
     
     .mobileservices a {
         border: none;
         display: inline-block;
         text-align: center;
         color: #fff;
         font-weight: bold;
         width: 160px;
         font-size: 13px;
         padding: 8px;
         border-radius: 20px;
     }
     
     @media screen and (max-width: 1194px) {}
     
     @media screen and (max-width: 991px) {
         .mobileservices .description {
             height: 210px;
         }
         .mobileservices p {
             font-size: 14px;
             width: 90%;
         }
     }
     
     @media screen and (max-width: 763px) {
         .mobileservices h4 {
             font-size: 24px;
         }
         .mobileservices p {
             font-size: 13px;
             width: 95%;
         }
         .mobileservices a {
             width: 130px;
             font-size: 11px;
             padding: 6px;
         }
         .mobileservices img {
             width: 80%;
             display: block;
             margin: 20px 10px;
         }
     }
     /* SUCCESSFULL PROJECTS */
     
     .sucessfull-projects {
         position: relative;
         overflow: hidden;
         margin-top: 20px;
     }
     
     .sucessfull-projects .project {
         position: relative;
         margin-top: 60px;
     }
     
     .sucessfull-projects .project-bg {
         width: 80%;
         height: 300px;
         display: block;
         background-image: url(../images/web/cstech-webproject-background.png);
         background-size: cover;
         display: flex;
         justify-content: center;
         align-items: flex-end;
         flex-direction: column;
     }
     
     .sucessfull-projects .project img {
         width: 100%;
         float: right;
         transition: 0.6s all;
         height: 100%;
     }
     
     .sucessfull-projects .description {
         position: absolute;
         top: 30px;
         left: 0;
         height: 100%;
         display: flex;
         padding-left: 10px;
         justify-content: center;
         flex-direction: column;
     }
     
     .sucessfull-projects .description h1 {
         font-weight: bold;
         font-size: 36px;
         transition: 0.6s all;
     }
     
     .sucessfull-projects .description .outline {
         background: #6d64ff;
         height: 6px;
         margin: 10px 0;
         width: 60px;
     }
     
     .sucessfull-projects .description p {
         font-weight: bold;
         font-size: 18px;
         transition: 0.6s all;
         color: #13413c;
     }
     
     .sucessfull-projects .project:hover .description h1 {
         transform: translate(-7px, -7px);
     }
     
     .sucessfull-projects .project:hover .description p {
         transform: translate(-7px, 7px);
     }
     
     .sucessfull-projects .project:hover .project-bg img {
         transform: translateX(7px);
     }
     
     @media screen and (max-width: 991px) {
         .sucessfull-projects .description h1 {
             font-size: 26px;
         }
         .sucessfull-projects .description p {
             font-size: 16px;
         }
     }
     
     @media screen and (max-width: 763px) {
         .sucessfull-projects .description h1 {
             font-size: 28px;
         }
         .sucessfull-projects .description p {
             font-size: 14px;
         }
     }
     /* pricing faq section codepen css */
     
     .ul-sec {
         padding: 100px 0 70px;
     }
     
     .ul-sec .f {
         padding: 0 180px;
     }
     
     .ul-h {
         text-align: center;
         margin-bottom: 20px;
     }
     
     .ul-h h1 {
         font-weight: 700;
         font-family: 'Montserrat';
     }
     
     .ul-h p {
         padding: 10px 50px;
     }
     
     ul.accordion-list {
         position: relative;
         display: block;
         width: 100%;
         height: auto;
         padding: 20px;
         margin: 0;
         list-style: none;
         background-color: #f9f9fA;
         li {
             position: relative;
             display: block;
             width: 100%;
             height: auto;
             background-color: #FFF;
             padding: 20px;
             margin: 0 auto 15px auto;
             border: 1px solid #eee;
             border-radius: 5px;
             cursor: pointer;
             &.active {
                 h3 {
                     &:after {
                         transform: rotate(45deg);
                     }
                 }
             }
             h3 {
                 font-weight: 500;
                 position: relative;
                 display: block;
                 width: 100%;
                 height: auto;
                 padding: 0 0 0 0;
                 margin: 0;
                 font-size: 18px;
                 letter-spacing: 0.01em;
                 cursor: pointer;
                 &:after {
                     content: "\f278";
                     font-family: "material-design-iconic-font";
                     position: absolute;
                     right: 0;
                     top: -5px;
                     color: #0a858a;
                     transition: all 0.3s ease-in-out;
                     font-size: 28px;
                 }
             }
             div.answer {
                 position: relative;
                 display: block;
                 width: 100%;
                 height: auto;
                 margin-top: 20px;
                 padding: 0;
                 cursor: pointer;
                 p {
                     position: relative;
                     display: block;
                     font-weight: 300;
                     padding: 10px 0 0 0;
                     cursor: pointer;
                     line-height: 150%;
                     margin: 0 0 15px 0;
                     font-size: 14px;
                 }
             }
         }
     }
     
     .gc h1 {
         font-family: "Raleway";
         font-weight: 700;
         color: #0a858a;
         font-size: 27px;
     }
     
     .gc p {
         font-family: 'Montserrat';
         color: #000;
         font-weight: 500 !important;
         padding-right: 35px !important;
     }
     
     .gc a {
         border: 0;
         padding: 5px 15px;
         background: #1073a3;
         color: #fff;
         font-weight: 500;
     }
     
     .gc a:hover {
         background-color: #076290;
     }
     
     .g-box {
         display: grid;
         grid-template-columns: 3fr 2fr;
         background: #f8f8f8;
     }
     
     .high {
         display: grid;
         grid-template-columns: auto;
         background: #f8f8f8;
     }
     
     .high .fbox p {
         margin-bottom: 0 !important;
     }
     
     .high .g-price {
         border: none;
         padding: 10px;
     }
     
     .p {
         padding: 10px 12px;
         background-color: #13413c;
     }
     
     .p h5 {
         text-align: left;
         color: #fff;
         font-size: 16px;
     }
     
     .fbox {
         padding: 12px;
     }
     
     .fbox h6 {
         font-weight: 700;
     }
     
     .g-price {
         padding: 40px 12px;
         border-left: 1px solid #957d04a7;
     }
     
     .nob {
         border: 0;
         padding: 80px 12px 0;
     }
     
     .g-price h5 {
         font-size: 15px;
         font-weight: 500;
     }
     
     @media screen and (max-width:991px) {
         .ul-sec .f {
             padding: 0 80px;
         }
         .ul-sec {
             padding: 0px 0 70px;
         }
         .ul-h h1 {
             font-size: 33px;
         }
         .gc {
             margin-bottom: 20px;
         }
         .page-title {
             height: unset !important;
         }
         .ebk {
             height: unset !important;
         }
     }
     
     @media screen and (max-width:650px) {
         .ul-sec .f {
             padding: 0 50px;
         }
         .ul-h h1 {
             font-size: 30px;
         }
     }
     
     @media screen and (max-width:450px) {
         .ul-sec .f {
             padding: 0 25px;
         }
         .ul-h h1 {
             font-size: 18px;
         }
     }