/* Next Gen - Intelligence Starts * 
This file contains the styling for the actual template, 
this is the file you need to edit to change the look of the template. 
This files table contents are outlined below
>>>>>>>> 
**************************************************** **************************************************** */
/* Global Style */
 @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
 body {
     color:var(--text);
     font-size: 16px;
     font-family: "Nunito Sans", serif;
}
 .cls-5, .cls-6 {
     font-family: "Nunito Sans", serif !important;
}
 img {
     max-width: 100%;
     height: auto;
}
 a {
     color:var(--text);
     text-decoration: none;
     transition: all 0.5s;
}
 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
     color: var(--black);
     font-weight: 700;
     font-family: "Nunito Sans", serif;
}
 p {
     margin-bottom: 15px;
     line-height: 30px;
     color:var(--text);
}
 p:last-child {
     margin-bottom: 0;
}
 .bg-color-f6fcff {
     background-color: rgb(244 246 253 / 50%);
}
 .bg-color-000f5c {
     background-color: var(--blue);
}
 .ptb-100 {
     padding-top: 100px;
     padding-bottom: 100px;
}
 .pt-100 {
     padding-top: 100px;
}
 .pb-100 {
     padding-bottom: 100px;
}
 .ptb-70 {
     padding-top: 70px;
     padding-bottom: 70px;
}
 .pt-70 {
     padding-top: 70px;
}
 .pb-70 {
     padding-bottom: 70px;
}
 :root{
     --blue:#1F3468;
     --sky:#1A85C8;
     --black:#252525;
     --text:#555555;
     --yellow:#FEBF3E;
     --white:#fff;
     --bdrclr:rgba(0,0,0,0.1);
}
 body::-webkit-scrollbar {
     width: 6px;
}
 body::-webkit-scrollbar-track {
     background:transparent;
     border-radius: 8px;
}
 body::-webkit-scrollbar-thumb {
     background:var(--yellow);
     border-radius: 8px;
}
 a{
     transition: all 0.5s;
}
 ::selection{
     background-color:var(--blue);
     color: var(--white);
}
/* Default Area CSS ======================================================*/
 .common-btn {
     font-weight: 600;
     color: var(--white);
     background-color: var(--yellow);
     padding: 15px 50px;
     border-radius: 6px;
     display: inline-block;
     transition: all ease 0.5s;
}
 .common-btn:hover {
     background-color: var(--blue);
     color: var(--white);
}
 .read-more {
     font-weight: 600;
     border: 1px solid #eeeeee;
     padding: 12px 35px;
     border-radius: 30px;
     display: inline-block;
}
 .read-more:hover {
     background-color: var(--yellow);
     border: 1px solid var(--yellow);
     color: var(--white);
}
 .section-title {
    /* max-width: 675px;
     */
     margin: auto;
     text-align: center;
}
 .section-title .sub-title {
     position: relative;
     padding-left: 90px;
     font-size: 15px;
     color: var(--black);
     font-weight: 600;
}
 .section-title .sub-title .sub-title-shape {
     position: absolute;
     top: 0;
     left: 0;
}
 .section-title .title-ron {
     display: block;
     color: var(--sky);
    ;
     margin-bottom: 8px;
}
/*.section-title h2 {
     font-size: 48px;
     color: var(--blue);
     margin-top: 10px;
}
*/
 .section-heading {
     margin-bottom: 25px;
}
 .section-heading span{
     text-transform:uppercase;
     display: flex;
     grid-gap: 15px;
     align-items: center;
}
 .section-heading .about-sub-title {
     position: relative;
     padding-left: 90px;
     font-size: 15px;
     color: var(--black);
     font-weight: 600;
}
 .section-heading .about-sub-title .sub-title-image {
     position: absolute;
     top: 0;
     left: 0;
}
 .section-heading .title-ron {
     display: block;
     color: var(--sky);
    ;
     margin-bottom: 8px;
}
 .section-heading h2,.section-title h2{
     font-size: 36px;
     color: var(--black);
     margin-top: 10px;
     font-weight: 800;
     text-transform: capitalize;
}
/* Navbar Area Style ======================================================*/
 .navbar-area {
    position: fixed;
    width: 100%;
    left: 0px;
    top: 0px;
    z-index: 9;
}
/*.navbar-area::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     width: 400px;
     height: 100%;
     background-color: var(--white);
}
*/
 .navbar-area.is-sticky {
     top: 0;
     left: 0;
     width: 100%;
     z-index: 999;
     position: fixed;
     animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
     box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
     background-color: var(--white);
}
 .navbar-area .container-fluid {
     max-width: calc(100% - 56px);
}
 .navbar-brand {
     z-index: 22;
     display: block;
     max-width: 100%;
}
 .side-menu .offcanvas-header a {
     max-width: 110px;
}
 .navbar-brand .white-logo {
     display: none;
}
 .navbar-area .mobile-responsive-menu .logo .white-logo {
     display: none;
}
 .header_left {
     display: flex;
     align-items: center;
     grid-gap: 24px 40px;
     width: 100%;
     max-width: 203px;
}
 .desktop-nav {
     padding-top: 0;
     padding-bottom: 0;
}
 .desktop-nav .navbar {
     transition: all ease 0.5s;
     z-index: 2;
     position: relative;
     padding-top: 10px;
     padding-bottom: 10px;
     justify-content: space-between !important;
    !i;
    !;
}
 .desktop-nav .align-items-center {
     align-items: center !important;
     width: 100%;
     max-width: 600px;
}
/*.desktop-nav .navbar::before {
     position: absolute;
     content: "";
     height: 100%;
     left: 0;
     top: 0;
     right: 0px;
     background-color: var(--white);
}
*/
 .header_top {
     background-color: #12AFFE;
     display: flex;
     align-items: end;
     width: 100%;
     border-bottom: 1px solid var( --bdrclr);
}
 .header_top ul {
     display: flex;
     justify-content: end;
     width: 100%;
     flex-flow: wrap;
     grid-gap: 20px;
}
 .header_top ul li {
     max-width: fit-content !important;
}
 .header_top ul li a{
     color: var(--white);
     transition: all 0.5s;
     font-weight: 600;
}
 .header_top ul li a:hover{
     color: var(--blue);
}
 .menu {
    /* position: absolute;
     */
    /* right: -100px;
     */
     max-width: fit-content;
}
 .desktop-nav .navbar-expand-md .navbar-collapse {
     margin: 0px auto;
     grid-gap: 50px;
     justify-content: end;
     grid-gap: 15px;
     max-width: fit-content;
     !i;
    !;
     margin: 0px;
}
 .desktop-nav .navbar ul {
     margin-bottom: 0;
     list-style-type: none;
}
 .desktop-nav .navbar .navbar-nav .nav-item {
     position: relative;
     padding-top: 10px;
     padding-left: 0;
     padding-right: 0;
     padding-bottom: 10px;
}
 .desktop-nav .navbar .navbar-nav .nav-item a {
     font-size: 16px;
     color: var(--blue);
     line-height: 1;
     position: relative;
     padding-left: 0;
     padding-top: 0;
     padding-right: 0;
     padding-bottom: 0;
     margin-right: 36px;
     font-weight: 600;
}
 .desktop-nav .navbar .navbar-nav .nav-item:last-child a{
    /* padding-right:40px !important;
     */
}
 .desktop-nav .navbar .navbar-nav .nav-item a.dropdown-toggle {
    /* padding-right: 30px;
     */
}
 .desktop-nav .navbar .navbar-nav .nav-item a.dropdown-toggle::after {
     content: "\ebc0";
    /* position: absolute;
     */
    /* top: 2px;
     */
    /* right: 15px;
     */
     font-family: boxicons !important;
     line-height: 1;
     font-size: 14px;
     font-weight: 400;
}
 .desktop-nav .navbar .navbar-nav .nav-item a:hover, .desktop-nav .navbar .navbar-nav .nav-item a:focus, .desktop-nav .navbar .navbar-nav .nav-item a.active {
     color: var(--sky);
}
 .desktop-nav .navbar .navbar-nav .nav-item a i {
     font-size: 18px;
     line-height: 0;
     position: relative;
     top: 4px;
}
 .desktop-nav .navbar .navbar-nav .nav-item:last-child a {
     margin-right: 0;
}
 .desktop-nav .navbar .navbar-nav .nav-item:first-child a {
     margin-left: 0;
}
 .desktop-nav .navbar .navbar-nav .nav-item:hover a, .desktop-nav .navbar .navbar-nav .nav-item:focus a, .desktop-nav .navbar .navbar-nav .nav-item.active a {
     color: var(--sky);
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu {
     box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease-in-out;
     background-color: var(--white);
     position: absolute;
     visibility: hidden;
     border-radius: 0;
     display: block;
     width: 250px;
     border: none;
     z-index: 99;
     opacity: 0;
     top: 80px;
     left: 0;
     padding: 0;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li {
     padding: 0;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {
     color: var(--blue);
     padding: 14px;
     border-bottom: 1px dashed #e3e3e3;
     margin: 0;
     font-size: 15px;
     font-weight: 400;
     line-height: 1;
     display: block;
     position: relative;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.dropdown-toggle::after {
     display: none;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.dropdown-toggle::before {
     content: "\ea50";
     position: absolute;
     top: 18px;
     right: 13px;
     font-family: boxicons !important;
     line-height: 1;
     font-size: 17px;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active {
     color: var(--sky);
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
     right: 250px;
     left: auto;
     top: 0;
     opacity: 0;
     visibility: hidden;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
     color: #1b2336;
     border-bottom: 1px dashed #e3e3e3;
     font-size: 15px;
     font-weight: 400;
     line-height: 1;
     position: relative;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.dropdown-toggle::after {
     display: none;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.dropdown-toggle::before {
     content: "\ea4e";
     position: absolute;
     top: 14px;
     right: 13px;
     font-family: remixicon !important;
     line-height: 1;
     font-size: 17px;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active {
     color: var(--yellow);
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
     right: 250px;
     left: auto;
     top: 0;
     opacity: 0;
     visibility: hidden;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
     color: #000000;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
     color: var(--blue);
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
     left: -250px;
     top: 0;
     opacity: 0;
     visibility: hidden;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
     color: #000000;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
     color: #1b2336;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
     left: -250px;
     top: 0;
     opacity: 0;
     visibility: hidden;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
     color: #000000;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
     color: #1b2336;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
     left: -250px;
     top: 0;
     opacity: 0;
     visibility: hidden;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
     color: #000000;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
     color: #1b2336;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
     left: -250px;
     top: 0;
     opacity: 0;
     visibility: hidden;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
     color: #000000;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
     color: #1b2336;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
     color: #1b2336;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
     opacity: 1;
     visibility: visible;
     top: -15px;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
     color: #1b2336;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
     opacity: 1;
     visibility: visible;
     top: -1px;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
     color: #00ca99;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
     opacity: 1;
     top: -1px;
     visibility: visible;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
     color: #00ca99;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
     opacity: 1;
     top: -15px;
     visibility: visible;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li.active a {
     color: #00ca99;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
     opacity: 1;
     visibility: visible;
     top: -15px;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li.active a {
     color: #00ca99;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu {
     opacity: 1;
     visibility: visible;
     top: 0;
}
 .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li:last-child a {
     border-bottom: none;
}
 .desktop-nav .navbar .others-options ul li {
     margin-right: 20px;
     display: inline-block;
}
 .desktop-nav .navbar .others-options ul li:last-child {
     margin-right: 0;
}
 .desktop-nav .navbar .others-options ul li .search {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100%;
     max-width: 400px;
     height: 50px;
     transform: translateX(-50%) translateY(-50%);
}
 .desktop-nav .navbar .others-options ul li .search__toggle:checked ~ .search__field {
     width: calc(100% - 80px);
     border-width: 2px;
}
 .desktop-nav .navbar .others-options ul li .search__toggle:checked ~ .search__field .search__input::-moz-placeholder {
     opacity: 1;
}
 .desktop-nav .navbar .others-options ul li .search__toggle:checked ~ .search__field .search__input::placeholder {
     opacity: 1;
}
 .desktop-nav .navbar .others-options ul li .search__toggle:checked ~ .search__field .search__close {
     left: -25px;
}
 .desktop-nav .navbar .others-options ul li .search__toggle:checked ~ .search__field .search__button {
     right: 5px;
     width: 35px;
     height: 35px;
     border-radius: 50px;
}
 .desktop-nav .navbar .others-options ul li .search__toggle:checked ~ .search__field .search__button--toggle {
     display: none;
}
 .desktop-nav .navbar .others-options ul li .search__toggle:checked ~ .search__field .search__button--submit {
     display: flex;
}
 .desktop-nav .navbar .others-options ul li .search__close {
     position: relative;
     top: 50%;
     left: 0;
     transform: translateX(-50%);
     transition: 0.3s;
}
 .desktop-nav .navbar .others-options ul li .search__close::before, .desktop-nav .navbar .others-options ul li .search__close::after {
     position: absolute;
     display: block;
     content: "";
     width: 15px;
     height: 3px;
     background-color: var(--white);
}
 .desktop-nav .navbar .others-options ul li .search__close::before {
     transform: rotate(45deg);
}
 .desktop-nav .navbar .others-options ul li .search__close::after {
     transform: rotate(-45deg);
}
 .desktop-nav .navbar .others-options ul li .search__field {
     position: absolute;
     right: 0;
     left: 50%;
     width: 40px;
     height: 45px;
     border: 0px solid var(--white);
     border-radius: 50px;
     transform: translateX(-50%);
     transform-origin: right;
     transition: 0.3s;
}
 .desktop-nav .navbar .others-options ul li .search__input {
     position: absolute;
     left: 0;
     box-sizing: border-box;
     width: calc(100% - 40px);
     height: 100%;
     padding: 5px 15px;
     color: var(--white);
     background-color: transparent;
     border: 0;
     outline: none;
     font-family: "Roboto", sans-serif;
     font-size: 16px;
}
 .desktop-nav .navbar .others-options ul li .search__input::-moz-placeholder {
     color: var(--white);
     opacity: 0;
     -moz-transition: 0.3s;
     transition: 0.3s;
     transition-delay: 0.3s;
}
 .desktop-nav .navbar .others-options ul li .search__input::placeholder {
     color: var(--white);
     opacity: 0;
     transition: 0.3s;
     transition-delay: 0.3s;
}
 .desktop-nav .navbar .others-options ul li .search__label {
     cursor: pointer;
}
 .desktop-nav .navbar .others-options ul li .search__button {
     position: absolute;
     top: 50%;
     right: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 50px;
     height: 50px;
     background-color: var(--white);
     border-radius: 5px;
     transform: translateY(-50%);
     cursor: pointer;
     transition: 0.3s;
}
 .desktop-nav .navbar .others-options ul li .search__button--submit {
     display: none;
     border: 0;
}
 .desktop-nav .navbar .others-options ul li .search__icon {
     position: relative;
     width: 19px;
     height: 19px;
}
 .desktop-nav .navbar .others-options ul li .search__icon::before {
     display: block;
     content: "";
     width: 12px;
     height: 12px;
     background-color: transparent;
     border: 2px solid #0099ff;
     border-radius: 50px;
}
 .desktop-nav .navbar .others-options ul li .search__icon::after {
     position: absolute;
     right: 0;
     bottom: 0;
     display: block;
     content: "";
     width: 8px;
     height: 2px;
     background-color: #0099ff;
     transform: rotate(45deg);
     transform-origin: right;
}
 .desktop-nav .others-options .optional-btn {
     color: #000000;
     margin-left: 50px;
     margin-right: 25px;
     font-weight: 700;
     position: relative;
     line-height: 12px;
     top: 7px;
     border: none;
     background-color: transparent;
}
 .desktop-nav .others-options .optional-btn::before {
     content: "";
     position: absolute;
     top: -1px;
     left: -24px;
     width: 1px;
     height: 25px;
     background-color: #1f242e;
     opacity: 0.2;
}
 .desktop-nav .others-options .optional-btn i {
     margin-right: 0;
     font-size: 25px;
}
 .desktop-nav .others-options .optional-btn .badge {
     margin-left: 0;
}
 .desktop-nav .others-options .bag {
     color: #000000;
     position: relative;
     margin-right: 40px;
     top: 3px;
}
 .desktop-nav .others-options .bag i {
     font-size: 25px;
}
 .desktop-nav .others-options .bag span {
     top: 10px;
     left: 15px;
     width: 18px;
     height: 19px;
     font-size: 12px;
     line-height: 20px;
     text-align: center;
     border-radius: 50%;
     color: var(--white);
     background-color: var(--blue);
     transform: translateY(-50%);
}
 .desktop-nav .menu .login-btn {
     font-weight: 600;
     color: var(--yellow);
     border: 1px solid var(--yellow);
     padding: 16px 40px;
     border-radius: 30px;
    /* margin: 0 50px 0 30px;
     */
     transition: all ease 0.5s;
    /* position: relative;
     */
    /* top: -6px;
     */
}
 .desktop-nav .menu .login-btn:hover {
     color: var(--white);
     background-color: var(--yellow);
}
 .desktop-nav .menu .menu-btn {
     border: none;
     background: transparent;
     font-size: 35px;
     color: var(--white);
     position: relative;
     top: 5px;
}
 .mobile-responsive-nav {
     display: none;
}
 .login .form-check-label {
     color: var(--blue);
}
 .desktop-nav .others-options .option-item {
     position: relative;
}
 .desktop-nav .others-options .option-item .search-btn {
     cursor: pointer;
     transition: all ease 0.5s;
     color: var(--blue);
     font-size: 25px;
     position: relative;
     top: 4px;
}
 .desktop-nav .others-options .option-item .close-btn {
     transition: all ease 0.5s;
     color: var(--blue);
     font-size: 25px;
     display: none;
     cursor: pointer;
}
 .desktop-nav .others-options .option-item .close-btn.active {
     display: block;
}
 .desktop-nav .others-options .option-item .search-overlay {
     display: none;
}
 .desktop-nav .others-options .option-item .search-overlay.search-popup {
     position: absolute;
     top: 100%;
     right: 0;
     width: 300px;
     margin-top: 34px;
     background-color: var(--white);
     padding-top: 20px;
     padding-left: 20px;
     padding-right: 20px;
     padding-bottom: 20px;
     z-index: 2;
}
 .desktop-nav .others-options .option-item .search-overlay.search-popup .search-form {
     position: relative;
     box-shadow: none;
}
 .desktop-nav .others-options .option-item .search-overlay.search-popup .search-form .search-input {
     outline: 0;
     border: none;
     box-shadow: none;
     display: block;
     width: 100%;
     height: 50px;
     background-color: transparent;
    );
     padding-top: 15px;
     padding-left: 20px;
     padding-right: 70px;
     padding-bottom: 15px;
     border: 1px solid var(--bdrclr) !important;
    !i;
    !;
}
 .desktop-nav .others-options .option-item .search-overlay.search-popup .search-form .search-input:focus {
     border: 1px solid var(--blue);
}
 .desktop-nav .others-options .option-item .search-overlay.search-popup .search-form .search-button {
     border: none;
     position: absolute;
     top: 0;
     right: 0;
     height: 50px;
     font-size: 18px;
     color: var(--white);
     background-color: var(--blue);
     padding-top: 15px;
     padding-left: 20px;
     padding-right: 20px;
     padding-bottom: 15px;
}
 .desktop-nav .others-options .option-item:hover .search-btn {
     color: var(--yellow);
}
 .desktop-nav .others-options .option-item:hover .close-btn {
     color: var(--yellow);
}
 @keyframes fadeInDown {
     0% {
         opacity: 0;
         transform: translate3d(0, -100%, 0);
    }
     to {
         opacity: 1;
         transform: translateZ(0);
    }
}
 .side-menu .offcanvas {
     padding: 20px;
}
 .side-menu .offcanvas .offcanvas-header .btn-close {
     box-shadow: none !important;
     opacity: 100;
     transition: all ease 0.5s;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .sidebar-content .sidebar-btn .common-btn {
     margin-bottom: 20px;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .sidebar-contact-info {
     margin-bottom: 40px;
     margin-top: 30px;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .sidebar-contact-info h3 {
     font-size: 20px;
     margin-bottom: 20px;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .sidebar-contact-info .info-list {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .sidebar-contact-info .info-list li {
     position: relative;
     padding-left: 25px;
     margin-bottom: 10px;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .sidebar-contact-info .info-list li:last-child {
     margin-bottom: 0;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .sidebar-contact-info .info-list li i {
     position: absolute;
     top: 2px;
     left: 0;
     font-size: 20px;
     color: var(--yellow);
}
 .side-menu .offcanvas .offcanvas-body .modal-body .sidebar-contact-info .info-list li a {
     color: var(--blue);
}
 .side-menu .offcanvas .offcanvas-body .modal-body .sidebar-contact-info .info-list li a:hover {
     color: var(--yellow);
}
 .side-menu .offcanvas .offcanvas-body .modal-body .sidebar-social-list {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .sidebar-social-list li {
     display: inline-block;
     padding-right: 20px;
     margin-bottom: 20px;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .sidebar-social-list li:last-child {
     padding-right: 0;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .sidebar-social-list li a {
     background-color: #888888;
     color: var(--white);
     font-size: 18px;
     width: 40px;
     height: 40px;
     line-height: 44px;
     border-radius: 50%;
     text-align: center;
     display: inline-block;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .sidebar-social-list li a:hover {
     background-color: var(--blue);
}
 .side-menu .offcanvas .offcanvas-body .modal-body .contact-form h3 {
     font-size: 20px;
     margin-bottom: 20px;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .contact-form form .form-group ul li {
     font-size: 14px;
     font-weight: 500;
     color: #ff0000;
     margin-top: -15px;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .contact-form form .form-group .form-control {
     box-shadow: none;
     border-radius: 5px;
     border: 1px solid #eeeeee;
     margin-bottom: 20px;
     height: 60px;
     padding: 20px;
     transition: all ease 0.5s;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .contact-form form .form-group .form-control:focus {
     border: 1px solid var(--yellow);
}
 .side-menu .offcanvas .offcanvas-body .modal-body .contact-form form .form-group .textarea {
     height: 140px;
     resize: none;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .contact-form form .common-btn {
     border: none;
}
 .side-menu .offcanvas .offcanvas-body .modal-body .contact-form form #msgSubmit {
     font-size: 20px;
}
/* Others Option For Responsive Area Style ======================================================*/
 .others-option-for-responsive {
     display: none !important;
}
 .others-option-for-responsive .dot-menu {
     top: -38px;
     right: 60px;
     height: 30px;
     z-index: 999;
     padding: 0 10px;
     cursor: pointer;
     position: absolute;
     display: flex;
}
 .others-option-for-responsive .dot-menu .inner {
     align-items: center;
     display: flex;
}
 .others-option-for-responsive .dot-menu .inner .circle {
     height: 5px;
     width: 5px;
     margin: 0 2px;
     border-radius: 100%;
     transition: all ease 0.5s;
     background-color: #f68723;
}
 .others-option-for-responsive .dot-menu:hover .inner .circle {
     background-color: var(--blue);
}
 .others-option-for-responsive .container {
     position: relative;
}
 .others-option-for-responsive .container .container {
     position: absolute;
     right: -2px;
     top: 15px;
     opacity: 0;
     max-width: 320px;
     visibility: hidden;
     transform: scaleY(0);
     transition: all ease 0.5s;
     margin-left: auto;
     padding-left: 15px;
     padding-right: 15px;
}
 .others-option-for-responsive .container .container.active {
     opacity: 1;
     visibility: visible;
     transform: scaleY(1);
}
 .others-option-for-responsive .container .others-options {
     display: inline-flex;
     text-align: center;
     background-color: var(--white);
     padding-top: 8px;
     padding-left: 15px;
     padding-right: 15px;
     padding-bottom: 12px;
     align-items: center;
}
 .others-option-for-responsive .container .others-options .optional-btn {
     margin-left: 0;
     margin-right: 43px;
     font-weight: 700;
     position: relative;
     top: 2px;
     padding-top: 14px;
     padding-left: 15px;
     padding-right: 15px;
     padding-bottom: 14px;
}
 .others-option-for-responsive .container .others-options .optional-btn i {
     font-size: 28px;
     margin-right: 0;
     color: var(--blue) !important;
     position: relative;
     top: 5px;
}
 .others-option-for-responsive .container .others-options .common-btn {
    /* width: 100%;
     */
    /* font-size: 15px;
     */
    /* margin: 0 10px;
     */
    /* padding: 9px 18px;
     */
    /* height: fit-content;
     */
}
 .others-option-for-responsive .container .others-options .option-item {
     position: relative;
     margin-right: 5px;
     margin-left:05px;
}
 .option-inner {
     display: flex;
     justify-content: flex-end;
}
 .others-option-for-responsive .container .others-options .option-item .search-btn {
     cursor: pointer;
     transition: all ease 0.5s;
     color: var(--blue);
     font-size: 25px;
}
 .others-option-for-responsive .container .others-options .option-item .close-btn {
     transition: all ease 0.5s;
     color: var(--blue);
     font-size: 25px;
     display: none;
     cursor: pointer;
}
 .others-option-for-responsive .container .others-options .option-item .close-btn.active {
     display: block;
}
 .others-option-for-responsive .container .others-options .option-item .search-overlay {
     display: none;
}
 .others-option-for-responsive .container .others-options .option-item .search-overlay.search-popup {
     position: absolute;
     top: 100%;
     right: 0;
     left: -50px;
     width: 298px;
     margin-top: 10px;
     background-color: var(--white);
     padding-top: 20px;
     padding-left: 20px;
     padding-right: 20px;
     padding-bottom: 20px;
     z-index: 2;
}
 .others-option-for-responsive .container .others-options .option-item .search-overlay.search-popup .search-form {
     position: relative;
}
 .others-option-for-responsive .container .others-options .option-item .search-overlay.search-popup .search-form .search-input {
     outline: 0;
     border: none;
     box-shadow: none;
     display: block;
     width: 100%;
     height: 50px;
     background-color: #f4f4ff;
     padding-top: 15px;
     padding-left: 20px;
     padding-right: 70px;
     padding-bottom: 15px;
     border: 1px solid #dfdfff;
}
 .others-option-for-responsive .container .others-options .option-item .search-overlay.search-popup .search-form .search-input:focus {
     border: 1px solid var(--blue);
}
 .others-option-for-responsive .container .others-options .option-item .search-overlay.search-popup .search-form .search-button {
     border: none;
     position: absolute;
     top: 0;
     right: 0;
     height: 50px;
     font-size: 18px;
     color: var(--white);
     background-color: var(--blue);
     padding-top: 15px;
     padding-left: 20px;
     padding-right: 20px;
     padding-bottom: 15px;
}
 .others-option-for-responsive .container .others-options .option-item:hover .search-btn {
     color: var(--blue);
}
 .others-option-for-responsive .container .others-options .option-item:hover .close-btn {
     color: var(--blue);
}
 .others-option-for-responsive .container .others-options .menu-btn {
     border: none;
     background-color: transparent;
     font-size: 30px;
     color: var(--blue);
     position: relative;
     top: 3px;
}
 .result-pagination.search-pagination {
     margin-left: 0;
}
/* Home Slides Banner Area CSS ======================================================*/
 .banner-slider.owl-carousel.owl-theme {
     position: relative;
}
 .banner-slider.owl-carousel.owl-theme .owl-nav {
     margin-top: 0;
}
 .banner-slider.owl-carousel.owl-theme .owl-nav [class*=owl-] {
     color: var(--yellow);
     font-size: 24px;
     background-color: rgba(255, 122, 65, 0.1);
     width: 60px;
     height: 60px;
     line-height: 65px;
     text-align: center;
     display: inline-block;
     border-radius: 50%;
     position: absolute;
     left: 40px;
     top: 50%;
     transform: translateY(-50%);
     transition: all ease 0.5s;
}
 .banner-slider.owl-carousel.owl-theme .owl-nav [class*=owl-].owl-next {
     right: 40px;
     left: auto;
}
 .banner-slider.owl-carousel.owl-theme .owl-nav [class*=owl-]:hover {
     background-color: var(--yellow);
     color: var(--white);
}
 .second-banner-slider.owl-carousel.owl-theme {
     position: relative;
}
 .second-banner-slider.owl-carousel.owl-theme .owl-nav {
     margin-top: 0;
}
 .second-banner-slider.owl-carousel.owl-theme .owl-nav [class*=owl-] {
     color: var(--yellow);
     font-size: 40px;
     background-color: rgba(255, 122, 65, 0.19);
     width: 60px;
     height: 60px;
     line-height: 65px;
     text-align: center;
     display: inline-block;
     border-radius: 50%;
     position: absolute;
     left: 40px;
     top: 50%;
     transform: translateY(-50%);
     transition: all ease 0.5s;
}
 .second-banner-slider.owl-carousel.owl-theme .owl-nav [class*=owl-].owl-next {
     right: 40px;
     left: auto;
}
 .second-banner-slider.owl-carousel.owl-theme .owl-nav [class*=owl-]:hover {
     background-color: var(--yellow);
     color: var(--white);
}
 .home-slides.owl-carousel.owl-theme {
     position: relative;
}
 .home-slides.owl-carousel.owl-theme .owl-nav {
     margin-top: 0;
     opacity: 0;
     visibility: hidden;
     transition: all ease 0.5s;
}
 .home-slides.owl-carousel.owl-theme .owl-nav [class*=owl-] {
     margin: 0;
     position: absolute;
     top: 50%;
     left: 25px;
     width: 50px;
     height: 50px;
     line-height: 56px;
     text-align: center;
     background-color: var(--white);
     color: var(--blue);
     transform: translateY(-50%);
     transition: all ease 0.5s;
     font-size: 40px;
     border-radius: 0;
     overflow: hidden;
}
 .home-slides.owl-carousel.owl-theme .owl-nav [class*=owl-].owl-next {
     left: auto;
     right: 25px;
}
 .home-slides.owl-carousel.owl-theme .owl-nav [class*=owl-]:hover {
     background-color: var(--blue);
     color: var(--white);
}
 .home-slides.owl-carousel.owl-theme:hover .owl-nav {
     opacity: 1;
     visibility: visible;
}
 .home-slides .banner-area {
     position: relative;
     padding-top: 150px;
     padding-bottom: 200px;
     background-image: none;
}
 .home-slides .banner-area .banner-content .sub-title {
     color: var(--white);
     padding-left: 0;
}
 .home-slides .banner-area .banner-content h1 {
     color: var(--white);
}
 .home-slides .banner-area .banner-content p {
     color: var(--white);
}
 .home-slides .banner-area {
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
}
 .banner-area {
     padding-top: 70px;
     padding-bottom: 100px;
     background-image: url("../../assets/images/shape/hero-shape-3.png");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
     width: 100%;
     height: 100%;
     position: relative;
}
 .banner-area .container-fluid {
     max-width: 1630px;
}
 .banner-content {
    /* margin-top: 50px;
     */
     max-width: 850px;
     margin: 0px auto;
}
 .banner-content .sub-title {
     position: relative;
     padding-left: 90px;
     font-size: 15px;
     color: var(--sky);
    ;
}
 .banner-content .sub-title .hero-shape-2 {
     position: absolute;
     top: 0;
     left: 0;
     width: 74px;
     height: 18px;
}
 .banner-content h1 {
     font-size: 70px;
     margin-top: 8px;
     margin-bottom: 22px;
}
 .banner-content p {
     max-width: 680px;
     margin-bottom: 20px;
}
/* Business Area CSS ======================================================*/
 .business-area {
     position: relative;
}
 .business-area .section-title {
     max-width: 630px;
}
 .business-area .business-shape-1 {
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
}
 .business-area .business-shape-2 {
     position: absolute;
     top: 0;
     right: 0;
     z-index: -1;
}
 .business-card {
     text-align: center;
     padding: 50px 42px;
     margin-bottom: 30px;
     border-radius: 10px;
     transition: all ease 0.5s;
}
 .business-card .data-image-1 {
     margin-bottom: 22px;
}
 .business-card .business-card-content h4 {
     font-size: 24px;
     margin-bottom: 12px;
}
 .business-card .business-card-content h4 a {
     color: var(--blue);
}
 .business-card .business-card-content h4 a:hover {
     color: var(--yellow);
}
 .business-card .business-card-content p {
     margin-bottom: 15px;
}
 .business-card .business-card-content .business-btn {
     font-weight: 600;
     color: var(--sky);
    ;
     transition: all ease 0.5s;
}
 .business-card.active {
     background-color: #f6fcff;
     border-radius: 10px;
}
 .business-card:hover {
     background-color: #f6fcff;
     border-radius: 10px;
}
 .business-card:hover .business-btn {
     color: var(--yellow);
}
/* About Area CSS ======================================================*/
 .about-area {
     background-image: url("../../assets/images/background/background-image-2.png");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
     width: 100%;
     height: 100%;
     position: relative;
}
 .about-content {
     margin-left: 0;
     position: relative;
}
 .about-content p {
     max-width: 560px;
     margin-bottom: 20px;
}
 .about-content ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .about-content ul li {
     position: relative;
     color: var(--blue);
     padding-left: 25px;
     font-weight: 500;
     margin-bottom: 20px;
}
 .about-content ul li:last-child {
     margin-bottom: 0;
}
 .about-content ul li i {
     position: absolute;
     top: 2px;
     left: 0;
     color: var(--sky);
    ;
}
 .about-content .common-btn {
     margin-top: 30px;
}
/* Services Area CSS ======================================================*/
 .services-area {
     position: relative;
     overflow: hidden;
}
 .services-area .section-title {
     max-width: 700px;
}
 .services-area p {
     text-align: center;
     margin-bottom: 20px;
}
 .services-area p a {
     font-weight: 600;
     color: var(--yellow);
}
 .services-area .service-shape-1{
     position: absolute;
     top: 100px;
     left: 100px;
     z-index: -1;
}
 .services-card {
     text-align: center;
     padding: 30px 18px;
     background-color: var(--white);
     border-radius: 10px;
     height: 100%;
}
 .services-card .services-card-image {
     margin-bottom: 20px;
}
 .services-card .services-card-image .service-1 {
     width: 75px;
}
 .services-card h4 {
     font-size: 22px;
     margin-bottom: 8px;
}
 .services-card h4 a {
     display: inline-block;
     color: var(--blue);
}
 .services-card h4 a:hover {
     color: var(--yellow);
}
 .services-card p {
     margin-bottom: 15px;
}
 .services-card .service-btn {
     font-weight: 600;
     display: inline-block;
     border: 1px solid #dddddd;
     border-radius: 30px;
     padding: 12px 35px;
     transition: .services-card .service-btn all ease 0.5s;
}
 .services-card .service-btn:hover {
     background-color: var(--yellow);
     color: var(--white);
}
 .services-card:hover .service-1 {
     animation: rotate-vertical 1.1s ease-out;
}
/* Story Area CSS ======================================================*/
 .story-area {
    /* padding-bottom: 350px;
    */
    /*background-image: url(../../assets/images/background/background-image-3.jpg);
    */
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
     width: 100%;
     height: 100%;
     position: relative;
     z-index: 1;
     background-color: var(--white);
}
 .story-area::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
    /*background-color: rgba(0, 15, 92, 0.6);
    */
     z-index: -1;
}
 .story-area .section-title {
    /* max-width: 710px;
     */
}
 .story-area .section-title .sub-title {
    /* color: var(--sky);
     */
}
 .story-area .popup-btn {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     background-color: rgba(255, 255, 255, 0.2);
     width: 100px;
     height: 100px;
     line-height: 100px;
     border-radius: 50%;
     text-align: center;
     padding-left: 5px;
     z-index: 1;
     margin-bottom: 250px;
}
 .story-area .popup-btn .play-icon {
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     margin: auto;
     transform: translateY(-50%);
     background-color: var(--white);
     width: 60px;
     height: 60px;
     line-height: 56px;
     border-radius: 50%;
     text-align: center;
     padding-left: 5px;
     z-index: 1;
     transition: all ease 0.5s;
}
 .story-area .popup-btn .play-icon:hover {
     background-color: var(--sky);
    ;
}
 .story-area .popup-btn .play-icon img {
     width: 20px;
     height: 20px;
}
 .story-area .popup-btn::before {
     content: "";
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: -1;
     border-radius: 50%;
     transition: all ease 0.5s;
     background-color: rgba(255, 255, 255, 0.2);
     animation: ripple 2s linear infinite;
}
 .painter-area {
     padding: 70px 10px;
     text-align: center;
     margin-top: -110px;
     position: relative;
     z-index: 1;
     margin-right: 0px !important;
     margin-left: 0px !important;
     background-position: center !important;
     background-repeat: no-repeat !important;
     background-size: cover !important;
     border-radius: 5px !important;
}
 .painter-area .count-info {
     line-height: 0;
     position: relative;
}
 .painter-area .count-info::before {
     content: "";
     position: absolute;
     top: 50%;
     right: -14px;
     bottom: 0;
     width: 1px;
     height: 90px;
     transform: translateY(-50%);
     background-color: rgba(255, 255, 255, 0.2);
     border-radius: 1px;
}
 .painter-area .count-info h3 {
     font-size: 48px;
     color: var(--white);
     margin-bottom: 0;
     letter-spacing: 0px;
     font-weight: 700;
}
 .painter-area .count-info .target {
     position: absolute;
     top: -50px;
     left: 170px;
}
 .painter-area .count-info .target i {
     font-size: 65px;
     color: var(--yellow);
}
 .painter-area .count-info p {
     color: var(--white);
     font-size: 18px;
     font-weight: 600;
}
 .painter-area .count-shape-1 {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
}
 .col-lg-3:nth-child(4) .count-info::before {
     width: 0;
}
/* How We Are Area CSS ======================================================*/
 .who-we-are-area {
     position: relative;
}
 .who-we-are-area .who-shape-1 {
     position: absolute;
     top: -70px;
     right: 220px;
}
 .who-we-are-content {
     max-width: 555px;
}
 .who-we-are-content p {
     margin-bottom: 20px;
}
 .who-we-are-content ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .who-we-are-content ul li {
     position: relative;
     padding-left: 25px;
     font-weight: 500;
     color: var(--blue);
     margin-bottom: 20px;
}
 .who-we-are-content ul li:last-child {
     margin-bottom: 0;
}
 .who-we-are-content ul li i {
     position: absolute;
     top: 2px;
     left: 0;
}
 .who-we-are-content .common-btn {
     margin-top: 30px;
}
/* Portfolio Area CSS ======================================================*/
 .portfolio-area p {
     text-align: center;
}
 .portfolio-area p a {
     font-weight: 600;
     color: var(--yellow);
}
 .portfolio-area p a:hover {
     color: var(--blue);
}
 .portfolio-card {
     overflow: hidden;
     margin-bottom: 30px;
}
 .portfolio-card .view-gallery {
     position: relative;
}
 .portfolio-card .view-gallery::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: var(--blue);
     filter: blur(226px);
     border-radius: 5px;
     transition: all ease 0.5s;
     opacity: 0;
     visibility: hidden;
}
 .portfolio-card .view-gallery .portfolio-1 {
     border-radius: 5px;
}
 .portfolio-card .view-gallery .popup-view {
     position: absolute;
     top: -20px;
     right: -20px;
     background-color: var(--sky);
    ;
     width: 130px;
     height: 130px;
     line-height: 130px;
     border-radius: 80px 5px 80px 80px;
     text-align: center;
     transition: all ease 0.5s;
     opacity: 0;
     visibility: hidden;
}
 .portfolio-card .view-gallery .popup-view i {
     font-size: 20px;
     color: var(--sky);
    ;
     background-color: var(--white);
     width: 60px;
     height: 60px;
     line-height: 60px;
     border-radius: 50%;
     text-align: center;
     transition: all ease 0.5s;
}
 .portfolio-card .view-gallery .popup-view i:hover {
     background-color: var(--yellow);
     color: var(--white);
}
 .portfolio-card .view-gallery .single-view {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: var(--white);
     border-radius: 5px;
     padding: 40px;
     margin-left: 30px;
     margin-right: 30px;
     margin-bottom: 30px;
     text-align: center;
     transition: all ease 0.5s;
     opacity: 0;
     visibility: hidden;
}
 .portfolio-card .view-gallery .single-view h4 {
     font-size: 22px;
     margin-top: 10px;
     margin-bottom: 0;
}
 .portfolio-card .view-gallery .single-view h4 a {
     display: inline-block;
     color: var(--blue);
}
 .portfolio-card .view-gallery .single-view h4 a:hover {
     color: var(--yellow);
}
 .portfolio-card .view-gallery:hover::before {
     opacity: 1;
     visibility: visible;
}
 .portfolio-card .view-gallery:hover .popup-view {
     opacity: 1;
     visibility: visible;
}
 .portfolio-card .view-gallery:hover .single-view {
     opacity: 1;
     visibility: visible;
}
/* Pricing Area CSS ======================================================*/
 .pricing-area {
     position: relative;
}
 .pricing-area .pricing-shape-1 {
     position: absolute;
     left: 0;
     bottom: 0;
     z-index: -1;
}
 .pricing-content {
     margin-right: 85px;
}
 .pricing-content .pricing-logo p {
     margin-bottom: 25px;
}
 .pricing-content .pricing-logo h6 {
     font-weight: 600;
     margin-bottom: 15px;
}
 .pricing-content .pricing-logo .logo {
     max-width: 400px;
     background-color: #f6fcff;
     border-radius: 5px;
     padding: 26px 28px;
}
 .pricing {
     margin-left: -60px;
}
 .pricing-card {
     background-color: var(--white);
     box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.07);
     border-radius: 5px;
     padding: 35px 40px;
     margin-bottom: 30px;
     transition: all ease 0.5s;
}
 .pricing-card .pricing-card-heading {
     position: relative;
     padding-bottom: 20px;
     margin-bottom: 0;
     transition: all ease 0.5s;
     display: grid;
     justify-content: center;
}
 .pricing-card .pricing-card-heading p {
     font-size: 55px;
     font-weight: 700;
     font-family: "Nunito Sans", serif;
     color: var(--sky);
    ;
     transition: all ease 0.5s;
}
 .pricing-card .pricing-card-heading p span {
     font-size: 16px;
     font-weight: 400;
    /* color: #888888;
     */
     transition: all ease 0.5s;
}
 .pricing-card ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .pricing-card ul li {
     position: relative;
     margin-bottom: 20px;
}
 .pricing-card ul li:last-child {
     margin-bottom: 0;
}
 .pricing-card ul li i {
     position: absolute;
     top: 2px;
     right: 0;
     font-size: 18px;
     color: var(--sky);
    ;
     transition: all ease 0.5s;
}
 .pricing-card .common-btn {
     margin-top: 25px;
     width: 100%;
     text-align: center;
}
 .pricing-card.style-one {
     margin-top: 30px;
}
 .pricing-card:hover {
     background-color: var(--sky);
    ;
}
 .pricing-card:hover .pricing-card-heading p span {
     color: var(--white);
}
 .pricing-card:hover ul li {
     color: #dddddd;
}
 .pricing-card:hover ul li i {
     color: #dddddd;
}
/* Testimonial Area CSS ======================================================*/
 .testimonial-area .section-title {
     max-width: 500px;
}
 .testimonials {
     box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.04);
     margin-right: 100px;
}
 .testimonials .testimonial-card {
     background-color: var(--white);
     padding: 40px 45px;
     border-radius: 5px;
     position: relative;
}
 .testimonials .testimonial-card .content {
     margin-bottom: 30px;
}
 .testimonials .testimonial-card .content img {
     width: 100px;
     height: 100px;
     border-radius: 50%;
}
 .testimonials .testimonial-card .content h5 {
     font-size: 22px;
     color: var(--blue);
     margin-bottom: 10px;
}
 .testimonials .testimonial-card .content span {
     color: var(--sky);
    ;
}
 .testimonials .testimonial-card p {
     font-weight: 500;
     margin-bottom: 25px;
}
 .testimonials .testimonial-card ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .testimonials .testimonial-card ul li {
     display: inline-block;
     color: #ffc107;
}
 .testimonials .testimonial-card .quote {
     position: absolute;
     top: 20px;
     right: 40px;
     font-size: 64px;
     color: #eeeeee;
}
 .testimonial-slider.owl-carousel.owl-theme .owl-nav [class*=owl-] {
     color: var(--yellow);
     font-size: 24px;
     background-color: rgba(255, 122, 65, 0.1);
     width: 60px;
     height: 60px;
     line-height: 65px;
     text-align: center;
     display: inline-block;
     border-radius: 50%;
     position: absolute;
     left: -90px;
     top: 50%;
     transform: translateY(-50%);
     transition: all ease 0.5s;
}
 .testimonial-slider.owl-carousel.owl-theme .owl-nav .owl-prev i {
     left: 0;
     position: relative;
}
 .testimonial-slider.owl-carousel.owl-theme .owl-nav[class*=owl-] .owl-next {
     right: -90px;
     left: auto;
}
 .testimonial-slider.owl-carousel.owl-theme .owl-nav[class*=owl-] .owl-next i {
     position: relative;
     right: 0;
}
 .testimonial-slider.owl-carousel.owl-theme .owl-nav [class*=owl-]:hover {
     background-color: var(--yellow);
     color: var(--white);
}
 .testimonial-slider.owl-carousel.owl-theme {
     position: relative;
}
 .testimonial-slider.owl-carousel.owl-theme .owl-dots {
     margin-top: 40px;
     padding-bottom: 18px;
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
}
 .testimonial-slider.owl-carousel.owl-theme .owl-dots .owl-dot span {
     width: 14px;
     height: 14px;
     border-radius: 30px;
     background-color: #dddddd;
     transition: all ease 0.5s;
}
 .testimonial-slider.owl-carousel.owl-theme .owl-dots .owl-dot.active span {
     width: 18px;
     height: 18px;
     background-color: var(--yellow);
}
/* Clients Area CSS ======================================================*/
 .clients-area {
     position: relative;
     z-index: 1;
}
 .clients-area::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 180px;
     background-color: #f6fcff;
     z-index: -1;
}
 .clients-area .clients-shape-1 {
     position: absolute;
     top: 60px;
     right: 90px;
     z-index: -1;
}
 .clients-info {
     background-color: var(--white);
     border: 1px solid #eeeeee;
     box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.07);
     border-radius: 5px;
     padding: 80px 75px;
}
 .clients-info .clients-slider {
     margin-bottom: 40px;
}
 .clients-info .owl-carousel .owl-item img {
     width: auto;
     height: auto;
     margin: auto;
     opacity: 35%;
     transition: all ease 0.5s;
     cursor: pointer;
}
 .clients-info .owl-carousel .owl-item img:hover {
     opacity: 100%;
}
/* Blog Area CSS ======================================================*/
 .blog-area {
     position: relative;
     z-index: 1;
     background-position: center !important;
     background-repeat: no-repeat !important;
     background-size: cover !important;
}
 .blog-area p {
     text-align: center;
     margin-bottom: 20px;
}
 .blog-area p a {
     font-weight: 600;
     color: var(--yellow);
}
 .blog-area p a:hover {
     color: var(--blue);
}
 .blog-area .blog-shape-1 {
     position: absolute;
     top: 90px;
     left: 20px;
     z-index: -1;
}
 .testimonials-area{
     background-position: center !important;
     background-repeat: no-repeat !important;
     background-size: cover !important;
     padding-top: 130px;
     margin-top: -130px;
}
 .blog-card .blog-card-content {
     background-color: var(--white);
     box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.04);
     border-radius: 0px 0px 5px 5px;
     padding: 30px;
     margin-bottom: 30px;
}
 .blog-card .blog-card-content ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .blog-card .blog-card-content ul li {
     display: inline-block;
     margin-right: 20px;
     padding-left: 15px;
     position: relative;
     margin-bottom: 15px;
}
 .blog-card .blog-card-content ul li i {
     position: absolute;
     top: -20px;
     left: -17px;
     font-size: 45px;
     color: var(--yellow);
}
 .blog-card .blog-card-content ul li:last-child {
     margin-right: 0;
     padding-left: 0;
}
 .blog-card .blog-card-content ul li:last-child::before {
     display: none;
}
 .blog-card .blog-card-content ul li::before {
     content: "";
     position: absolute;
     top: 50%;
     right: -13px;
     bottom: 0;
     width: 1px;
     height: 18px;
     transform: translateY(-50%);
     background-color: #dddddd;
}
 .blog-card .blog-card-content h4 {
     font-size: 20px;
     margin-bottom: 20px;
     line-height: 30px;
}
 .blog-card .blog-card-content h4 a {
     color: var(--blue);
}
 .blog-card .blog-card-content h4 a:hover {
     color: var(--yellow);
}
 .blog-card .blog-card-content .blog-btn {
     font-weight: 600;
     color: var(--sky);
    ;
     transition: all ease 0.5s;
}
 .blog-card .blog-card-content .blog-btn:hover {
     color: var(--yellow);
}
/* Newsletter Area CSS ======================================================*/
 .newsletter-area {
     position: relative;
     z-index: 1;
}
 .newsletter-area::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     width: 100%;
     height: 250px;
     background-color:var(--white);
     z-index: -1;
}
 .newsletter-area::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 230px;
     background-color: #f6fcff;
     z-index: -1;
}
 .newsletter-image {
     background-image: url("../../assets/images/newsletter.jpg");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
     width: 100%;
     height: 100%;
     position: relative;
     border-radius: 5px 0px 0px 5px;
     position: relative;
     background-color: #f6fcff;
}
 .newsletter-image .latest-1 {
     border-radius: 5px 0px 0px 5px;
     display: none;
}
 .newsletter-image .icon {
     position: absolute;
     top: 50%;
     right: -22px;
     transform: translateY(-50%);
     border: 1px solid var(--white);
     width: 115px;
     height: 115px;
     line-height: 134px;
     border-radius: 50%;
     text-align: center;
     z-index: 2;
}
 .newsletter-image .icon .email {
     font-size: 40px;
     color: var(--sky);
    ;
     background-color: var(--white);
     width: 95px;
     height: 95px;
     line-height: 100px;
     border-radius: 50%;
     text-align: center;
     display: inline-block;
}
 .newsletter-content {
     background-color: var(--sky);
    ;
     padding: 100px;
     border-radius: 0px 5px 5px 0px;
     position: relative;
     margin-left: -35px;
     z-index: 1;
}
 .newsletter-content .section-heading .about-sub-title {
     color: var(--white);
}
 .newsletter-content .section-heading h2 {
     color: var(--white);
}
 .newsletter-content .newsletter-form .form-group {
     position: relative;
}
 .newsletter-content .newsletter-form .form-group .form-control {
     border: none;
     box-shadow: none;
     border-radius: 5px;
     background-color: var(--white);
     height: 80px;
     padding: 30px;
}
 .newsletter-content .newsletter-form .form-group .newsletter-btn {
     position: absolute;
     top: 8px;
     right: 8px;
     border: none;
     font-weight: 500;
     color: var(--white);
     background-color: var(--yellow);
     border-radius: 5px;
     padding: 20px 30px;
     transition: all ease 0.5s;
}
 .newsletter-content .newsletter-form .form-group .newsletter-btn:hover {
     background-color: var(--blue);
}
 .newsletter-content .newsletter-form .form-group #validator-newsletter {
     margin-top: 10px;
     color: var(--white);
}
 .newsletter-content .subscribe-shape-1 {
     position: absolute;
     top: 61%;
     right: 0;
     transform: translateY(-50%);
     z-index: -1;
}
/* Footer Area CSS ======================================================*/
 .footer-area {
     background-image: url("../../assets/images/shape/footer-shape-1.png");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
     height: 100%;
}
 .footer-in {
     position: relative;
     padding-right: 50px;
}
 .footer-in .footer-logo {
     margin-bottom: 25px;
     max-width: 185px;
}
 .footer-in p {
     color: var(--text);
     margin-bottom: 20px;
}
 .footer-in ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .footer-in ul li {
     display: inline-block;
     margin-right: 10px;
}
 .footer-in ul li:last-child {
     margin-right: 0;
}
 .footer-in ul li i {
     display: inline-block;
     color: var(--yellow);
     background-color: #19276c;
     font-size: 18px;
     width: 50px;
     height: 50px;
     line-height: 54px;
     border-radius: 50%;
     text-align: center;
     transition: all ease 0.5s;
}
 .footer-in ul li i:hover {
     background-color: var(--yellow);
     color: var(--white);
}
 .footer-we h4 {
     font-size: 22px;
     color: var(--blue);
     margin-bottom: 25px;
}
 .footer-we ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .footer-we ul li {
     position: relative;
     margin-bottom: 15px;
}
 .footer-we.address ul li{
     display: grid;
     grid-template-columns: 51px auto;
     align-items: center;
     grid-gap:15px;
     padding:0px !important;
}
 .footer-we ul li:last-child {
     margin-bottom: 0;
}
 .footer-we ul li i {
    /* position: absolute;
     */
    /* top: 0;
     */
    /* left: 0;
     */
     font-size: 25px;
     color: var(--yellow);
}
 .footer-we ul li a {
     color: var(--text);
}
 .footer-we ul li a:hover {
     color: var(--yellow);
}
 .footer-we.address ul li {
    /* padding-left: 65px;
     */
    /* line-height: 30px;
     */
}
 .footer-we.address ul li p {
     color: var(--text);
}
 .footer-we.address ul li i {
     background-color: #19276c;
     width: 50px;
     height: 50px;
     line-height: 56px;
     border-radius: 50%;
     text-align: center;
     font-size: 20px;
}
 .footer-we.address ul li a {
     display: block;
}
 .col-lg-2:nth-child(3) .footer-we {
     margin-left: -30px;
}
/* Copy Area CSS ======================================================*/
 .copy-area {
     padding-top: 26px;
     padding-bottom: 26px;
     border-top: 1px solid rgba(0,0,0, 0.1);
}
 .copy-area .first-side p {
     color: var(--text);
}
 .copy-area .first-side p span {
     font-weight: 600;
     color: var(--yellow);
}
 .copy-area .first-side p a {
     font-weight: 600;
     color: var(--yellow);
}
 .copy-area .second-side {
     text-align: end;
}
 .copy-area .second-side ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .copy-area .second-side ul li {
     display: inline-block;
     padding-left: 16px;
}
 .copy-area .second-side ul li a {
     color: var(--text);
}
 .copy-area .second-side ul li a:hover {
     color: var(--yellow);
}
 .copy-area .second-side ul li:first-child {
     padding-left: 0;
}
/* Home Two Home Area CSS ======================================================*/
 .navbar-area.navbar-area-three {
     border-bottom: 1px solid #eeeeee;
}
 .banner-area-two {
     padding-top: 100px;
     padding-bottom: 90px;
     position: relative;
     z-index: 1;
}
 .banner-area-two .container-fluid {
     max-width: 1685px;
}
 .banner-area-two .big-shape-2 {
     position: absolute;
     right: 90px;
     bottom: 50px;
     z-index: -1;
     max-width: 190px;
}
 .banner-area-two .big-shape-3 {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     height: 100%;
     z-index: -1;
}
 .banner-two-image {
     position: relative;
}
 .banner-two-image .hero-shape-4 {
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     z-index: -1;
}
 .banner-two-content {
     max-width: 765px;
     margin-left: 65px;
     margin-top: 50px;
}
 .banner-two-content .color-title {
     color: 15px;
     display: block;
     margin-bottom: 5px;
     color: var(--yellow);
}
 .banner-two-content h1 {
     font-size: 96px;
     color: var(--white);
     margin-bottom: 30px;
}
 .banner-two-content p {
     color: var(--text);
     margin-bottom: 40px;
     padding-right: 40px;
}
 .banner-two-content .banner-btn {
     display: -webkit-inline-box;
}
 .banner-two-content .banner-btn .style {
     display: inline-block;
     font-weight: 600;
     background-color: var(--yellow);
     color: var(--white);
     border-radius: 30px;
     padding: 16px 50px;
     margin-right: 20px;
     transition: all ease 0.5s;
}
 .banner-two-content .banner-btn .style:hover {
     color: var(--sky);
    ;
     background-color: var(--white);
}
 .banner-two-content .banner-btn .r-relative {
     position: relative;
}
 .banner-two-content .banner-btn .r-relative .popup-btn {
     display: inline-block;
}
 .banner-two-content .banner-btn .r-relative .popup-btn .play-icon {
     font-weight: 600;
     background-color: var(--white);
     color: var(--sky);
    ;
     border-radius: 30px;
     padding: 16px 70px 16px 35px;
     transition: all ease 0.5s;
}
 .banner-two-content .banner-btn .r-relative .popup-btn .play-icon i {
     position: absolute;
     top: 6px;
     right: 6px;
     font-size: 30px;
     color: var(--white);
     background-color: var(--sky);
    ;
     width: 45px;
     height: 45px;
     line-height: 45px;
     border-radius: 50%;
     padding-left: 5px;
     text-align: center;
     transition: all ease 0.5s;
}
 .banner-two-content .banner-btn .r-relative .popup-btn .play-icon:hover {
     color: var(--white);
     background-color: var(--yellow);
}
 .banner-two-content .banner-btn .r-relative .popup-btn .play-icon:hover i {
     background-color: var(--white);
     color: var(--yellow);
}
/* Analytics Area CSS ======================================================*/
 .analytics-area {
     position: relative;
     z-index: 1;
}
 .analytics-area .section-title {
     max-width: 600px;
}
 .analytics-area .analytics-shape-1 {
     position: absolute;
     top: 25px;
     right: 25px;
     z-index: -1;
}
 .analytics-area .analytics-shape-2 {
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
}
 .analytics-card {
     position: relative;
     background-color: var(--white);
     border: 1px solid #eeeeee;
     border-radius: 10px;
     padding: 45px;
     margin-bottom: 30px;
     transition: all ease 0.5s;
}
 .analytics-card i {
     position: absolute;
     font-size: 40px;
     color: var(--white);
     background: linear-gradient(233.07deg, rgba(0, 102, 255, 0.8) 12.37%, rgba(0, 18, 97, 0.8) 84.29%);
     width: 100px;
     height: 100px;
     line-height: 110px;
     border-radius: 50%;
     text-align: center;
}
 .analytics-card .analytics-info {
     padding-left: 130px;
}
 .analytics-card .analytics-info h4 {
     font-size: 24px;
     margin-bottom: 15px;
}
 .analytics-card .analytics-info p {
     margin-bottom: 15px;
}
 .analytics-card .analytics-info .analytics-btn {
     font-weight: 600;
     color: var(--sky);
    ;
     transition: all ease 0.5s;
}
 .analytics-card .analytics-info .analytics-btn:hover {
     color: var(--yellow);
}
 .analytics-card:hover {
     border: 1px solid var(--sky);
    ;
     border-radius: 10px;
}
 .about-area.about-area-two {
     background-image: none;
     position: relative;
     z-index: 2;
}
 .about-area.about-area-two .about-content {
     margin-left: 75px;
}
 .about-area.about-area-two .about-shape-1 {
     position: absolute;
     right: 100px;
     bottom: 50px;
}
/* Provide Area CSS ======================================================*/
 .provide-area {
     padding-bottom: 130px;
     position: relative;
}
 .provide-area .owl-carousel .owl-item img {
     width: 190px;
     height: 160px;
     margin: auto;
}
 .provide-area .provide-shape-1 {
     position: absolute;
     top: 88px;
     left: 148px;
     z-index: -1;
}
 .provide-card {
     border: 1px solid #eeeeee;
     border-radius: 10px;
     margin: 0 5px 5px 5px;
     padding: 30px 30px;
     margin-bottom: 30px;
     text-align: center;
     transition: all ease 0.5s;
}
 .provide-card .provide-image {
     background-color: #f1faff;
     border-radius: 10px;
     padding: 30px;
     transition: all ease 0.5s;
}
 .provide-card .provide-image .provide-1 {
     width: 190px;
     height: 175px;
}
 .provide-card .provide-card-content {
     padding-top: 30px;
}
 .provide-card .provide-card-content h4 {
     font-size: 22px;
     margin-bottom: 12px;
}
 .provide-card .provide-card-content h4 a {
     color: var(--blue);
}
 .provide-card .provide-card-content h4 a:hover {
     color: var(--yellow);
}
 .provide-card .provide-card-content p {
     margin-bottom: 20px;
}
 .provide-card:hover .provide-image {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 3px rgba(0, 0, 0, 0.07);
     border-radius: 10px;
}
 .provide-slider.owl-carousel.owl-theme, .ensure-slider.owl-carousel.owl-theme, .testimonials-slider-warp.owl-carousel.owl-theme {
     position: relative;
}
 .provide-slider.owl-carousel.owl-theme .owl-dots, .ensure-slider.owl-carousel.owl-theme .owl-dots, .testimonials-slider-warp.owl-carousel.owl-theme .owl-dots {
     margin-top: 10px;
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
}
 .provide-slider.owl-carousel.owl-theme .owl-dots .owl-dot span, .ensure-slider.owl-carousel.owl-theme .owl-dots .owl-dot span, .testimonials-slider-warp.owl-carousel.owl-theme .owl-dots .owl-dot span {
     width: 16px;
     height: 16px;
     border-radius: 30px;
     background-color: #dddddd;
     transition: all ease 0.5s;
}
 .provide-slider.owl-carousel.owl-theme .owl-dots .owl-dot.active span, .ensure-slider.owl-carousel.owl-theme .owl-dots .owl-dot.active span, .testimonials-slider-warp.owl-carousel.owl-theme .owl-dots .owl-dot.active span {
     width: 16px;
     height: 16px;
     background-color: var(--yellow);
}
 .testimonials-slider-warp.owl-carousel.owl-theme .owl-dots .owl-dot span {
     background-color: #19276c;
}
/* Count Area CSS ======================================================*/
 .painter-area.count-area {
     overflow: hidden;
     background-color: var(--white);
     box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.07);
     padding-left: 20px;
     position: relative;
     z-index: 1;
}
 .painter-area.count-area .count-info .rocket {
     font-size: 70px;
     color: var(--yellow);
     margin-top: 20px;
     margin-bottom: -50px;
     padding-right: 15px;
}
 .painter-area.count-area .count-info h3 {
     font-size: 60px;
     color: var(--blue);
     margin-top: -90px;
}
 .painter-area.count-area .count-info .target {
     position: relative;
     top: -22px;
     left: -10px;
     color: var(--sky);
    ;
}
 .painter-area.count-area .count-info .target i {
     font-size: 60px;
     font-weight: 700;
     font-family: "Nunito Sans", serif;
     color: var(--sky);
    ;
}
 .painter-area.count-area .count-info p {
     color:var(--text);
     line-height: 0;
     margin-left: 50px;
     margin-top: -15px;
}
 .painter-area.count-area .count-shape-3 {
     position: absolute;
     left: 0;
     right: 0;
     z-index: -1;
}
 .painter-area.count-area .count-shape-4 {
     position: absolute;
     top: 0;
     right: 0;
     z-index: -1;
}
/* Pricing Plan Area CSS ======================================================*/
 .plan-area {
     position: relative;
     z-index: 1;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
}
 .plan-area .section-title {
     max-width: 660px;
}
 .plan-area .pricing-shape-2 {
     position: absolute;
     top: 20px;
     left: 70px;
     z-index: -1;
}
 .pricing-card.pricing-plan-card {
     box-shadow: none;
     border: 1px solid #eeeeee;
     border-radius: 5px;
     transition: all ease 0.5s;
     margin-bottom: 0px;
}
 .pricing-card.pricing-plan-card .pricing-card-heading h4 {
     margin-bottom: 25px;
}
 .pricing-card.pricing-plan-card .pricing-card-heading p {
     font-size: 40px;
     font-weight: 700;
     font-family: "Nunito Sans", serif;
     color: #000;
     transition: all ease 0.5s;
     display: block;
     margin-top: 15px;
}
 .pricing-card.pricing-plan-card .pricing-card-heading p span {
     font-size: 16px;
    /* color: #888888;
     */
}
 .pricing-card.pricing-plan-card ul li i {
     color: var(--sky);
    ;
}
 .pricing-card.pricing-plan-card .read-more {
     width: 100%;
     margin-top: 40px;
     text-align: center;
     color: var(--white);
     background-color: var(--yellow);
     border:unset;
}
 .pricing-card.pricing-plan-card .read-more:hover {
     background-color: var(--blue) !important;
     color: #ffffff !important;
}
 .pricing-card.pricing-plan-card:hover {
     background-color: var(--white);
     box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.07);
     border: 1px solid var(--white);
}
 .pricing-card.pricing-plan-card:hover .pricing-card-heading h4 {
     color: var(--blue);
}
 .pricing-card.pricing-plan-card:hover ul li {
     color:var(--text);
}
 .pricing-card.pricing-plan-card:hover .read-more {
     background-color: var(--yellow);
     color: var(--white);
}
/* Expert Plan Area CSS ======================================================*/
 .expert-content {
     max-width: 560px;
}
 .expert-content .section-heading {
     margin-bottom: 25px;
}
 .expert-content p {
     margin-bottom: 25px;
}
 .expert-content .skills {
     position: relative;
}
 .expert-content .skills .skill-item {
     position: relative;
     margin-bottom: 25px;
}
 .expert-content .skills .skill-item .skill-header {
     position: relative;
     margin-bottom: 10px;
}
 .expert-content .skills .skill-item .skill-header .skill-title {
     font-size: 16px;
     font-weight: 500;
     font-family: "Nunito Sans", serif;
     margin-bottom: 0;
     color: var(--blue);
}
 .expert-content .skills .skill-item .skill-header .skill-percentage {
     position: absolute;
     right: 0;
     top: 1px;
     font-weight: 500;
     color: var(--sky);
    ;
     font-family: "Nunito Sans", serif;
}
 .expert-content .skills .skill-item .skill-bar {
     position: relative;
     width: 100%;
}
 .expert-content .skills .skill-item .skill-bar .bar-inner {
     position: relative;
     width: 100%;
     border-top: 5px solid #dddddd;
}
 .expert-content .skills .skill-item .skill-bar .bar-inner .bar {
     position: absolute;
     left: 0;
     top: -2px;
     width: 0;
     height: 5px;
     background: var(--sky);
    ;
     transition: all 2000ms ease;
     border-radius: 30px;
     margin-top: -3px;
     animation: fillBars 2.5s 1;
}
 .expert-content .common-btn {
     margin-top: 20px;
}
 @keyframes fillBars {
     from {
         width: 0;
    }
     to {
         width: 100%;
    }
}
/* Newsletter Area CSS ======================================================*/
 .newsletter-area.subscribe-area {
     position: relative;
     margin-bottom: -270px;
     z-index: 2;
}
 .newsletter-area.subscribe-area::after {
     height: 0;
}
 .newsletter-area.subscribe-area .subscribe-shape-2 {
     position: absolute;
     top: -58%;
     right: 140px;
     z-index: -1;
}
/* Ensure Plan Area CSS ======================================================*/
 .ensure-area {
     padding-top: 350px;
     padding-bottom: 280px;
     display: block;
     background-image: url("../../assets/images/background/background-image-4.jpg");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
     width: 100%;
     height: 100%;
     position: relative;
     z-index: 1;
}
 .ensure-area::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 15, 92, 0.65);
     z-index: -1;
}
 .ensure-area .ensure {
     max-width: 675px;
     text-align: center;
     margin: auto;
     z-index: 1;
}
 .ensure-area .ensure .ensure-title {
     display: block;
     color: var(--sky);
    ;
     margin-bottom: 8px;
     z-index: 1;
}
 .ensure-area .ensure h2 {
     font-size: 48px;
     color: var(--white);
     z-index: 1;
}
/* Ensure Area CSS ======================================================*/
 .ensure-portfolio {
     position: relative;
     margin-top: -260px;
}
/* Reached Area CSS ======================================================*/
 .reached-image {
     position: relative;
}
 .reached-image .reached-logo-1 {
     position: absolute;
     top: -75px;
     left: 0;
     right: 0;
     margin: auto;
     text-align: center;
     border: 1px solid #dddddd;
     padding: 45px 35px;
     border-radius: 10px;
     background: var(--white);
}
 .reached-image .reached-logo-2 {
     position: absolute;
     top: 45%;
     left: -16px;
     margin: auto;
     text-align: center;
     border: 1px solid #dddddd;
     padding: 45px 35px;
     border-radius: 10px;
     background: var(--white);
     transform: translateY(-50%);
}
 .reached-image .reached-logo-3 {
     position: absolute;
     top: 45%;
     right: -30px;
     text-align: center;
     border: 1px solid #dddddd;
     padding: 45px 35px;
     border-radius: 10px;
     background: var(--white);
     transform: translateY(-50%);
}
 .reached-image .reached-logo-4 {
     position: absolute;
     left: 0;
     right: 0;
     bottom: -50px;
     margin: auto;
     text-align: center;
     border: 1px solid #dddddd;
     padding: 45px 35px;
     border-radius: 10px;
     background: var(--white);
}
 .reached-image .about-image-7 {
     display: none;
}
 .reached-area {
     padding-top: 100px;
     padding-bottom: 150px;
}
 .reached-content {
     margin-left: 60px;
}
 .reached-content .section-heading h2 {
     font-size: 40px;
     max-width: 500px;
     line-height: 55px;
}
/* Testimonials Area CSS ======================================================*/
 .testimonials-area .section-title {
     max-width: 500px;
     margin: auto;
     margin-bottom: 30px;
}
 .testimonials-area .owl-carousel .owl-item .quote-1 {
     width: 50px;
     height: 50px;
     border-radius: 0;
     margin-bottom: 15px;
}
 .testimonials-area .owl-carousel .owl-item img {
     width: 70px;
     height: 70px;
     border-radius: 50%;
}
 .single-testimonials-card {
     background-color: var(--white);
     border: 1px solid #eeeeee;
     border-radius: 5px;
     padding: 40px 45px;
     margin-bottom: 30px;
}
 .single-testimonials-card p {
     margin-bottom: 30px;
}
 .single-testimonials-card .content .name h5 {
     font-size: 22px;
     margin-bottom: 5px;
}
 .single-testimonials-card .content .name span {
     color: var(--sky);
    ;
}
 .testimonials-slider.owl-carousel.owl-theme .owl-nav [class*=owl-] {
     color: var(--yellow);
     font-size: 24px;
     background-color: rgba(255, 122, 65, 0.1);
     width: 60px;
     height: 60px;
     line-height: 65px;
     text-align: center;
     display: inline-block;
     border-radius: 50%;
     position: absolute;
     left: -90px;
     top: 48%;
     transform: translateY(-50%);
     transition: all ease 0.5s;
}
 .testimonials-slider.owl-carousel.owl-theme .owl-nav .owl-prev i {
     left: 0;
     position: relative;
}
 .testimonials-slider.owl-carousel.owl-theme .owl-nav[class*=owl-] .owl-next {
     right: -90px;
     left: auto;
}
 .testimonials-slider.owl-carousel.owl-theme .owl-nav[class*=owl-] .owl-next i {
     position: relative;
     right: 0;
}
 .testimonials-slider.owl-carousel.owl-theme .owl-nav [class*=owl-]:hover {
     background-color: var(--yellow);
     color: var(--white);
}
/* Home Three Testimonials Area CSS ======================================================*/
 .banner-area-three {
     padding-top: 100px;
     padding-bottom: 70px;
     position: relative;
     z-index: 1;
}
 .banner-area-three::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 460px;
     background-color: var(--blue);
     z-index: -1;
}
 .banner-area-three .container-fluid {
     max-width: 1630px;
}
 .banner-area-three .banner-content {
     max-width: 765px;
     text-align: center;
     margin: auto;
     margin-bottom: 60px;
}
 .banner-area-three .banner-content .title-ron {
     display: inline-block;
     font-size: 16px;
     color: var(--sky);
    ;
     background: rgba(0, 102, 255, 0.1);
     border-radius: 5px;
     padding: 5px 10px;
}
 .banner-area-three .banner-content h1 {
     font-size: 96px;
     margin-bottom: 40px;
}
 .banner-area-three .banner-content .common-btn {
     margin-right: 20px;
}
 .banner-area-three .banner-content .common-btn.style {
     background-color: var(--sky);
    ;
}
 .banner-area-three .banner-content .common-btn:hover {
     background-color: var(--sky);
    ;
}
 .banner-area-three .banner-content .common-btn:hover.style {
     background-color: var(--yellow);
}
 .banner-area-three .image-data {
     z-index: 999;
}
 .banner-area-three .image-data .data-image-3 {
     border: none;
     margin-top: -70px;
     margin-right: -50px;
}
 .banner-area-three .image-data .data-image-2 {
     border: none;
     margin-left: -70px;
     z-index: 2;
}
 .banner-area-three .image-data .data-image-1 {
     border: none;
     margin-top: -70px;
     margin-left: -70px;
}
 .banner-area-three .big-shape-4 {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     z-index: -2;
}
 .banner-area-three .big-shape-5 {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     z-index: -1;
}
 .join-area p {
     text-align: center;
     color: var(--blue);
     margin-bottom: 30px;
}
 .join-area .owl-carousel .owl-item img {
     width: auto;
     height: auto;
     margin: auto;
     justify-content: center;
}
 .join-area .logo {
     margin-bottom: 30px;
}
/* Service Area CSS ======================================================*/
 .service-area {
     overflow: hidden;
     position: relative;
     z-index: 1;
}
 .service-area .service-shape-2 {
     position: absolute;
     top: 25%;
     right: 0;
     bottom: 0;
     z-index: -1;
}
 .single-service-card {
     background-color: var(--white);
     box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.07);
     padding: 30px 30px;
     border-radius: 5px;
     margin-bottom: 30px;
     transition: all ease 0.5s;
}
 .single-service-card .server {
     width: 50px;
     margin-bottom: 25px;
}
 .single-service-card h4 {
     font-size: 22px;
     margin-bottom: 10px;
}
 .single-service-card h4 a {
     color: var(--blue);
}
 .single-service-card h4 a:hover {
     color: var(--yellow);
}
 .single-service-card p {
     margin-bottom: 15px;
}
 .single-service-card .more-btn {
     display: inline-block;
     position: relative;
}
 .single-service-card .more-btn span {
     font-weight: 600;
     opacity: 0;
     visibility: hidden;
     position: relative;
     transition: all ease 0.5s;
}
 .single-service-card .more-btn i {
     position: absolute;
     top: 0;
     left: 0;
     font-size: 20px;
     color: var(--sky);
    ;
     transition: all ease 0.5s;
}
 .single-service-card .more-btn:hover span {
     color: var(--yellow);
     opacity: 1;
     visibility: visible;
}
 .single-service-card .more-btn:hover i {
     color: var(--yellow);
     padding-left: 100px;
}
 .single-service-card:hover .server {
     animation: rotate-vertical 1.1s ease-out;
}
/* About Area CSS ======================================================*/
 .about-area.about-area-three {
     background-image: none;
}
 .about-area.about-area-three .about-image {
     margin-right: 80px;
}
 .about-area.about-area-three .about-content {
     margin-left: -20px;
}
/* Check Area CSS ======================================================*/
 .check-area {
     position: relative;
     z-index: 1;
}
 .check-area::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: -1px;
     width: 100%;
     height: 435px;
     background-color: var(--white);
     z-index: -1;
}
 .check-area .check-heading .check-title {
     display: block;
     color: var(--white);
     margin-bottom: 10px;
}
 .check-area .check-heading h2 {
     font-size: 48px;
     color: var(--white);
     margin-bottom: 50px;
}
 .check-area .check-btn {
     text-align: end;
     margin-top: -40px;
}
 .check-area .check-btn .common-btn:hover {
     background-color: var(--sky);
    ;
}
 .check-area .check-image {
     position: relative;
}
 .check-area .check-image .background-image-5 {
     border-radius: 20px;
     z-index: 1;
}
 .check-area .check-image .popup-btn {
     position: absolute;
     left: 0;
     bottom: 0;
     background-color: var(--white);
     padding: 20px 70px 20px 40px;
     border-radius: 30px;
     margin-left: 50px;
     margin-bottom: 50px;
     transition: all ease 0.5s;
}
 .check-area .check-image .popup-btn .play-icon {
     font-weight: 500;
     color: var(--sky);
    ;
     transition: all ease 0.5s;
}
 .check-area .check-image .popup-btn .play-icon i {
     position: absolute;
     top: 7px;
     right: 7px;
     font-size: 30px;
     color: var(--white);
     background-color: var(--sky);
    ;
     width: 50px;
     height: 50px;
     line-height: 50px;
     border-radius: 50%;
     text-align: center;
}
 .check-area .check-image .popup-btn:hover {
     background-color: var(--yellow);
}
 .check-area .check-image .popup-btn:hover .play-icon {
     color: var(--white);
}
 .check-area .check-shape-1 {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     width: 100%;
     z-index: -2;
}
/* Fun Fact Area CSS ======================================================*/
 .fun-fact-area {
     overflow: hidden;
}
 .fun-fact-area .painter-area {
     background-color: transparent;
     padding: 60px 0px 100px 45px;
}
 .fun-fact-area .painter-area .count-info {
     justify-content: center;
     align-items: center;
     text-align: center;
     position: relative;
}
 .fun-fact-area .painter-area .count-info .medal {
     position: absolute;
     top: 50%;
     left: 0;
     font-size: 35px;
     color: var(--sky);
    ;
     transform: translateY(-50%);
     background-color: #e5f0ff;
     width: 85px;
     height: 85px;
     line-height: 90px;
     border-radius: 50%;
     text-align: center;
}
 .fun-fact-area .painter-area .count-info .content {
     margin-left: 35px;
}
 .fun-fact-area .painter-area .count-info .content h3 {
     color: var(--blue);
}
 .fun-fact-area .painter-area .count-info .content .target {
     left: 185px;
}
 .fun-fact-area .painter-area .count-info .content p {
     color:var(--text);
}
/* Portfolio Area CSS ======================================================*/
 .portfolio-area-style {
     overflow: hidden;
     position: relative;
     z-index: 1;
     margin-left: 0;
     margin-right: 0;
}
 .portfolio-area-style .portfolio-content {
     width: 100%;
     display: flex;
     padding: 0;
     margin-bottom: 30px;
}
 .portfolio-area-style .slide {
     width: 315px;
     height: 500px;
     border-radius: 5px;
     margin: 10px;
     cursor: pointer;
     color: var(--white);
     flex: 1;
     background-position: center;
     background-repeat: no-repeat;
     position: relative;
     transition: all ease 0.5s;
}
 .portfolio-area-style .slide h3 {
     transition: all ease 0.5s;
     visibility: hidden;
     color: var(--white);
     position: absolute;
     font-size: 24px;
     bottom: 40px;
     left: 40px;
     opacity: 0;
     margin: 0;
}
 .portfolio-area-style .slide h3:hover {
     color: var(--sky);
    ;
}
 .portfolio-area-style .slide h3 p {
     display: block;
     font-weight: 400;
     margin-bottom: 5px;
     color: var(--yellow);
     font-size: 16px;
     transition: all ease 0.5s;
}
 .portfolio-area-style .slide .popup-view {
     position: absolute;
     right: 40px;
     bottom: 35px;
     font-size: 30px;
     visibility: hidden;
     color: var(--sky);
    ;
     background-color: var(--white);
     width: 60px;
     height: 60px;
     line-height: 66px;
     border-radius: 50%;
     text-align: center;
     opacity: 0;
     transition: all ease 0.5s;
}
 .portfolio-area-style .slide .popup-view:hover {
     background-color: var(--yellow);
     color: var(--white);
}
 .portfolio-area-style .slide::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgb(8, 0, 32));
     border-radius: 5px;
     opacity: 0;
     visibility: hidden;
     transition: all ease 0.5s;
}
 .portfolio-area-style .slide.active {
     flex: 3;
     overflow: hidden;
     transition: all ease 0.5s;
}
 .portfolio-area-style .slide.active::before {
     opacity: 1;
     visibility: visible;
}
 .portfolio-area-style .slide.active h3 {
     opacity: 1;
     visibility: visible;
}
 .portfolio-area-style .slide.active .popup-view {
     opacity: 1;
     visibility: visible;
}
 .portfolio-area-style .slide.bg-1 {
     background-image: url("../../assets/images/portfolio/portfolio-8.jpg");
     margin-left: 0;
}
 .portfolio-area-style .slide.bg-2 {
     background-image: url("../../assets/images/portfolio/portfolio-6.jpg");
}
 .portfolio-area-style .slide.bg-3 {
     background-image: url("../../assets/images/portfolio/portfolio-4.jpg");
}
 .portfolio-area-style .slide.bg-4 {
     background-image: url("../../assets/images/portfolio/portfolio-5.jpg");
}
 .portfolio-area-style .slide.bg-5 {
     background-image: url("../../assets/images/portfolio/portfolio-7.jpg");
     margin-right: 0;
}
 .portfolio-area-style .portfolio-shape-1 {
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
}
/* Testimonials Warp Area CSS ======================================================*/
 .testimonials-warp {
     padding-bottom: 130px;
}
 .testimonials-warp .section-title {
     max-width: 510px;
}
 .testimonials-warp .section-title h2 {
     color: var(--white);
}
 .testimonials-warp .owl-carousel .owl-item img {
     width: 70px;
     height: 70px;
     border-radius: 50%;
}
 .testimonials-warp .single-testimonials-card {
     background-color: transparent;
     background-color: var(--blue) !important;
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 5px;
     position: relative;
}
 .testimonials-warp .single-testimonials-card .content {
     margin-bottom: 25px;
}
 .testimonials-warp .single-testimonials-card .content .name h5 {
     font-size: 22px;
     color: var(--white);
     margin-bottom: 5px;
}
 .testimonials-warp .single-testimonials-card p {
     color: var(--text);
     margin-bottom: 25px;
}
 .testimonials-warp .single-testimonials-card ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .testimonials-warp .single-testimonials-card ul li {
     display: inline-block;
     color: #ffc107;
}
 .testimonials-warp .single-testimonials-card .quote-1 {
     position: absolute;
     top: 30px;
     right: 50px;
     font-size: 65px;
     color: rgba(255, 255, 255, 0.1);
}
 .testimonials-slider-warp.owl-carousel.owl-theme .owl-dots .owl-dot.active span, .testimonials-slider-warp.owl-carousel.owl-theme .owl-dots .owl-dot:hover span {
     background-color: var(--yellow);
}
/* Blog Area CSS ======================================================*/
 .blog-area.blog-area-three .blog-card .blog-card-content {
     background-color: #f6fcff;
     transition: all ease 0.5s;
}
 .blog-area.blog-area-three .blog-card .blog-card-content .blog-btn {
     display: inline-block;
     position: relative;
     transition: all ease 0.5s;
}
 .blog-area.blog-area-three .blog-card .blog-card-content .blog-btn span {
     font-weight: 600;
     opacity: 0;
     visibility: hidden;
     position: relative;
     transition: all ease 0.5s;
}
 .blog-area.blog-area-three .blog-card .blog-card-content .blog-btn i {
     position: absolute;
     top: 0;
     left: 0;
     font-size: 20px;
     color: var(--sky);
    ;
     transition: all ease 0.5s;
}
 .blog-area.blog-area-three .blog-card .blog-card-content .blog-btn:hover span {
     opacity: 1;
     visibility: visible;
}
 .blog-area.blog-area-three .blog-card .blog-card-content .blog-btn:hover i {
     padding-left: 100px;
     color: var(--yellow);
}
 .blog-area.blog-area-three .blog-card:hover .blog-card-content {
     background-color: transparent;
}
/* About Page CSS ======================================================*/
 .page-banner-area {
     padding-top: 60px;
     padding-bottom: 60px;
     margin-top: 121.53px;
     text-align: center;
     background-size: cover;
     background-repeat: repeat;
     background-attachment: scroll;
     background-position: center center;
     background-color: rgb(26 133 200 / 15%);
     z-index: 4;
     position: relative;
     background-blend-mode: multiply;
}
 .page-banner-area .banner-content h2 {
     font-size: 40px;
     text-transform: capitalize;
}
 .page-banner-area .banner-content ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
     display: flex;
     align-items: baseline;
     justify-content: center;
     grid-gap: 6px;
}
 .page-banner-area .banner-content ul li {
     display: inline-block;
     font-weight: 500;
     color: var(--blue);
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     grid-gap: 6px;
     text-align: left;
}
 .page-banner-area .banner-content ul li a{
     opacity: 0.6;
}
 .page-banner-area .banner-content ul li::after {
     content: "";
     height: 4px;
     width: 4px;
     border-radius: 50%;
     margin: 0 5px;
     background-color: var(--blue);
     display: inline-block;
}
 .page-banner-area .banner-content ul li:last-child::after{
     display:none;
}
 .page-banner-area .banner-content ul li a:hover {
     color: var(--sky);
    ;
}
 .page-banner-area .banner-content ul li:last-child {
     padding-right: 0;
     opacity: 1;
     font-weight: 600;
     text-transform: capitalize;
}
 .page-banner-area .banner-content ul li:last-child::before {
     display: none;
}
 .page-banner-area .page-banner-image {
     text-align: end;
}
 .about-area.about-page {
     background-image: none;
}
/* Services Page CSS ======================================================*/
 .services-area.services-area-two .services-card {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.05);
     border-radius: 10px;
}
 .service-pagination .pagination {
     justify-content: center;
     margin-top: 20px;
}
 .service-pagination .pagination .page-item {
     margin-right: 20px;
}
 .service-pagination .pagination .page-item .page-link {
     font-size: 20px;
     font-weight: 500;
     color:var(--text);
     border: 1px solid #eeeeee;
     width: 60px;
     height: 55px;
     line-height: 42px;
     border-radius: 3px;
     text-align: center;
     transition: all ease 0.5s;
}
 .service-pagination .pagination .page-item .page-link.active {
     background-color: var(--yellow);
     color: var(--white);
}
 .service-pagination .pagination .page-item .page-link:hover {
     background-color: var(--yellow);
     color: var(--white);
     border-radius: 3px;
}
 .service-pagination .pagination .page-item .page-link span {
     position: relative;
     top: 2px;
     color: var(--yellow);
}
/* Service Details Page CSS ======================================================*/
 .service-details-area .service-details {
     margin-right: 45px;
}
 .service-details-area .service-details .blog-10 {
     border-radius: 5px;
     margin-bottom: 25px;
}
 .service-details-area .service-details h4 {
     font-size: 48px;
     margin-bottom: 15px;
}
 .service-details-area .service-details p {
     margin-bottom: 15px;
}
 .service-details-area .service-details p:last-child {
     margin-bottom: 0;
}
 .service-details-area .service-details .service-analyses {
     margin-top: 20px;
}
 .service-details-area .service-details .service-analyses h5 {
     font-size: 30px;
     margin-bottom: 10px;
}
 .service-details-area .service-details .service-analyses .error {
     max-width: 455px;
     margin-bottom: -15px;
}
 .service-details-area .service-details .service-analyses .quia {
     margin-bottom: 25px;
}
 .service-details .service-analyses ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .service-details .service-analyses ul li {
     position: relative;
     padding-left: 25px;
     margin-bottom: 20px;
}
 .service-details .service-analyses ul li:last-child {
     margin-bottom: 0;
}
 .service-details .service-analyses ul li i {
     position: absolute;
     top: 2px;
     left: 0;
     color: var(--sky);
    ;
}
 .service-details-area .service-details .service-analyses .process .process-1 {
     border-radius: 5px;
     margin-bottom: 30px;
}
/* Testimonials Page CSS ======================================================*/
 .single-testimonials-warp {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.06);
     border-radius: 5px;
     text-align: center;
     margin-bottom: 30px;
     position: relative;
}
 .single-testimonials-warp .quote-icon {
     font-size: 30px;
     background-color: var(--yellow);
     color: var(--white);
     width: 60px;
     height: 60px;
     line-height: 68px;
     border-radius: 50%;
     text-align: center;
     margin: auto;
     position: absolute;
     top: -30px;
     left: 0;
     right: 0;
     transition: all ease 0.5s;
}
 .single-testimonials-warp .single-content {
     padding-top: 50px;
     padding-left: 52px;
     padding-right: 52px;
     padding-bottom: 40px;
}
 .single-testimonials-warp .single-content p {
     margin-bottom: 20px;
}
 .single-testimonials-warp .single-content .client-image {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     margin-bottom: 15px;
}
 .single-testimonials-warp .single-content h4 {
     font-size: 22px;
     margin-bottom: 8px;
}
 .single-testimonials-warp .single-content span {
     display: block;
     color: var(--sky);
    ;
     margin-bottom: 10px;
}
 .single-testimonials-warp .single-content ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .single-testimonials-warp .single-content ul li {
     display: inline-block;
     color: #ffc107;
}
 .single-testimonials-warp:hover .quote-icon {
     background-color: var(--blue);
}
 .col-lg-4:nth-child(1) .single-testimonials-warp {
     margin-bottom: 60px;
}
 .total-area {
     background-image: url("../../assets/images/background/background-image-6.jpg");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
     width: 100%;
     height: 100%;
     position: relative;
     z-index: 1;
}
 .total-area::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 15, 92, 0.85);
     z-index: -1;
}
 .total-area .total-count {
     text-align: center;
     margin-bottom: 30px;
}
 .total-area .total-count .total-shape {
     position: relative;
}
 .total-area .total-count .total-shape img {
     margin-left: -20px;
}
 .total-area .total-count .total-shape .icon {
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     transform: translateY(-50%);
     font-size: 30px;
     color: var(--white);
}
 .total-area .total-count h1 {
     font-size: 60px;
     color: var(--white);
     letter-spacing: 5px;
     margin-bottom: 0;
     margin-top: -30px;
}
 .total-area .total-count .target {
     font-size: 60px;
     font-weight: 700;
     color: var(--white);
}
 .total-area .total-count p {
     font-weight: 500;
     color: var(--text);
}
 .clients-area.clients-testimonials {
     position: relative;
}
 .clients-area.clients-testimonials::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 165px;
     background-color: var(--blue);
}
/* Team Page CSS ======================================================*/
 .team-card {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.06);
     border-radius: 5px;
     margin-bottom: 30px;
}
 .team-card .team-card-info {
     text-align: center;
     padding: 30px 0;
}
 .team-card .team-card-info h4 {
     text-align: center;
     font-size: 22px;
}
 .team-card .team-card-info h4 a {
     color: var(--blue);
}
 .team-card .team-card-info p {
     color: var(--sky);
    ;
     text-align: center;
}
 .team-card .tram-image {
     position: relative;
}
 .team-card .tram-image .team-1 {
     border-radius: 5px;
}
 .team-card .tram-image .profile-btn {
     position: absolute;
     left: 20px;
     bottom: 20px;
}
 .team-card .tram-image .profile-btn .share-in {
     cursor: pointer;
     color: var(--sky);
    ;
     background-color: var(--white);
     height: 45px;
     width: 45px;
     line-height: 48px;
     border-radius: 50%;
     text-align: center;
     position: relative;
     transition: all ease 0.5s;
}
 .team-card .tram-image .profile-btn .share-in .facebook, .team-card .tram-image .profile-btn .share-in .instagram, .team-card .tram-image .profile-btn .share-in .twitter, .team-card .tram-image .profile-btn .share-in .linkedin {
     border: none;
     color: var(--sky);
    ;
     background-color: var(--white);
     height: 45px;
     width: 45px;
     line-height: 48px;
     border-radius: 50%;
     text-align: center;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     transition: all ease 0.5s;
}
 .team-card .tram-image .profile-btn .share-in:hover {
     background-color: var(--yellow);
     color: var(--white);
}
 .team-card .tram-image .profile-btn .share-in:hover .facebook {
     opacity: 1;
     left: 55px;
}
 .team-card .tram-image .profile-btn .share-in:hover .facebook:hover {
     background-color: var(--yellow);
     color: var(--white);
}
 .team-card .tram-image .profile-btn .share-in:hover .instagram {
     opacity: 1;
     left: 110px;
}
 .team-card .tram-image .profile-btn .share-in:hover .instagram:hover {
     background-color: var(--yellow);
     color: var(--white);
}
 .team-card .tram-image .profile-btn .share-in:hover .twitter {
     opacity: 1;
     top: -55px;
}
 .team-card .tram-image .profile-btn .share-in:hover .twitter:hover {
     background-color: var(--yellow);
     color: var(--white);
}
 .team-card .tram-image .profile-btn .share-in:hover .linkedin {
     opacity: 1;
     top: -110px;
}
 .team-card .tram-image .profile-btn .share-in:hover .linkedin:hover {
     background-color: var(--yellow);
     color: var(--white);
}
/* Team Details Page CSS ======================================================*/
 .personal-details .team-9 {
     border-radius: 5px;
     margin-bottom: 30px;
}
 .personal-details h4 {
     font-size: 30px;
     margin-bottom: 10px;
}
 .personal-details p {
     margin-bottom: 35px;
}
 .personal-details .leave-contact {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.06);
     border-radius: 5px;
     padding: 45px 50px;
}
 .personal-details .leave-contact h4 {
     font-size: 24px;
     margin-bottom: 25px;
}
 .personal-details .leave-contact .form-control {
     box-shadow: none;
     border: 1px solid #eeeeee;
     color: #888888;
     border-radius: 5px;
     padding: 15px 20px;
     height: 60px;
     margin-bottom: 20px;
     transform: all ease 0.5s;
}
 .personal-details .leave-contact .form-control::-moz-placeholder {
     color:var(--text);
     -moz-transition: all ease 0.5s;
     transition: all ease 0.5s;
}
 .personal-details .leave-contact .form-control::placeholder {
     color:var(--text);
     transition: all ease 0.5s;
}
 .personal-details .leave-contact .form-control:focus {
     border: 1px solid var(--yellow);
}
 .personal-details .leave-contact .form-control:focus::-moz-placeholder {
     color: transparent;
}
 .personal-details .leave-contact .form-control:focus::placeholder {
     color: transparent;
}
 .personal-details .leave-contact .textarea {
     height: 150px;
}
 .personal-details .leave-contact .common-btn {
     border: none;
}
 .team-robert {
     margin-left: 45px;
}
 .team-robert h4 {
     font-size: 40px;
     margin-bottom: 5px;
}
 .team-robert span {
     display: block;
     color: var(--sky);
    ;
     margin-bottom: 15px;
}
 .team-robert p {
     margin-bottom: 15px;
}
 .team-robert .email-phone {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .team-robert .email-phone li {
     position: relative;
     font-weight: 700;
     color: var(--blue);
     margin-bottom: 20px;
}
 .team-robert .email-phone li:last-child {
     margin-bottom: 0;
}
 .team-robert .email-phone li a {
     position: absolute;
     top: 0;
     left: 150px;
     font-weight: 400;
     color:var(--text);
}
 .team-robert .email-phone li a:hover {
     color: var(--yellow);
}
 .team-robert .social-link {
     margin-top: 20px;
     margin-bottom: 45px;
}
 .team-robert .social-link ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .team-robert .social-link ul li {
     display: inline-block;
     margin-right: 20px;
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.07);
     width: 50px;
     height: 50px;
     line-height: 56px;
     border-radius: 50%;
     text-align: center;
     transition: all ease 0.5s;
}
 .team-robert .social-link ul li a {
     font-size: 20px;
     color: var(--sky);
    ;
}
 .team-robert .social-link ul li:last-child {
     margin-right: 0;
}
 .team-robert .social-link ul li:hover {
     background-color: var(--yellow);
}
 .team-robert .social-link ul li:hover a {
     color: var(--white);
}
 .team-robert .professional-skills {
     margin-bottom: 35px;
}
 .team-robert .professional-skills .expert-content h2 {
     font-size: 30px;
     margin-bottom: 20px;
}
 .team-robert .professional-skills .expert-content .skills .skill-item .skill-header .skill-percentage span {
     display: inline-block !important;
}
/* Blog Page CSS ======================================================*/
 .blog-search-form {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.06);
     padding: 20px 25px;
     border-radius: 10px;
     margin-bottom: 20px;
}
 .blog-search-form .form-group {
     position: relative;
}
 .blog-search-form .form-group .form-control {
     box-shadow: none;
     border: 1px solid #eeeeee;
     color: #888888;
     border-radius: 10px;
     padding: 15px 25px;
     height: 60px;
     transition: all ease 0.5s;
}
 .blog-search-form .form-group .form-control:focus {
     border: 1px solid var(--yellow);
}
 .blog-search-form .form-group .search-btn {
     position: absolute;
     top: 0;
     right: 0;
     border: none;
     background-color: var(--yellow);
     border-radius: 0px 10px 10px 0px;
     color: var(--white);
     height: 60px;
     font-size: 20px;
     padding: 18px 25px;
     transition: all ease 0.5s;
}
 .blog-search-form .form-group .search-btn:hover {
     background-color: var(--sky);
    ;
}
 .category,.industry_right {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.06);
     border-radius: 10px;
     padding: 30px 24px;
     margin-bottom: 20px;
}
 .category h4 {
     font-size: 24px;
     margin-bottom: 14px;
}
 .category ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .category ul li {
     display: block;
     width: 100%;
     position: relative;
     border: 1px solid #eeeeee;
     border-radius: 10px;
     margin-bottom: 20px;
     z-index: 1;
}
 .category ul li::before {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 0%;
     background-color: var(--sky);
    ;
     border-radius: 10px;
     z-index: -1;
     opacity: 0;
     visibility: hidden;
     transition: all ease 0.5s;
}
 .category ul li a {
     display: block;
     position: relative;
     padding: 15px 20px 15px 40px;
}
 .category ul li:last-child {
     margin-bottom: 0;
}
 .category ul li i {
     position: absolute;
     top: 19px;
     left: 15px;
     color: var(--sky);
     transition: all ease 0.5s;
}
 .category ul li:hover a {
     color: var(--white);
}
 .category ul li:hover i {
     color: #ffffff !important;
}
 .category ul li:hover::before {
     opacity: 1;
     visibility: visible;
     height: 100%;
     color: var(--white);
}
 .tags {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.06);
     border-radius: 10px;
     padding: 40px;
}
 .tags h4 {
     font-size: 24px;
     margin-bottom: 25px;
}
 .tags ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .tags ul li {
     display: inline-block;
     margin-right: 6px;
     margin-bottom: 10px;
     transition: all ease 0.5s;
}
 .tags ul li:last-child {
     margin-bottom: 0;
}
 .tags ul li a {
     display: inline-block;
     border: 1px solid #eeeeee;
     border-radius: 5px;
     padding: 12px 15px;
     font-size: 15px;
}
 .tags ul li a:hover {
     background-color: var(--sky);
    ;
     color: var(--white);
     border-radius: 5px;
}
/* Blog Details Page CSS ======================================================*/
 .blog-details {
     margin-right: 45px;
}
 .blog-details .blog-card .blog-card-content {
     box-shadow: unset;
     padding: 30px 0 0 0;
     margin-bottom: 0;
}
 .blog-details .blog-card .blog-card-content h4 {
     font-size: 24px;
     margin-bottom: 15px;
     line-height: normal;
}
 .blog-details .robert {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.06);
     border-radius: 10px;
     padding: 40px 50px;
     position: relative;
     margin-top: 25px;
     margin-bottom: 35px;
}
 .blog-details .robert::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     width: 5px;
     height: 100%;
     background-color: var(--sky);
    ;
     border-radius: 10px 0px 0px 10px;
}
 .blog-details .robert p {
     margin-bottom: 16px;
}
 .blog-details .robert span {
     color: var(--sky);
    ;
}
 .blog-details .robert .quote-2 {
     position: absolute;
     left: 70%;
     bottom: 14px;
}
 .blog-details .technology h4 {
     font-size: 24px;
     margin-bottom: 12px;
}
 .blog-details .technology p {
     margin-bottom: 25px;
}
 .blog-details .technology .blog-7 {
     border-radius: 10px;
     margin-bottom: 25px;
}
 .blog-details .share-tags {
     margin-bottom: 50px;
}
 .blog-details .share-tags .first-tags ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .blog-details .share-tags .first-tags ul li {
     display: inline-block;
     margin-right: 20px;
}
 .blog-details .share-tags .first-tags ul li:last-child {
     margin-right: 0;
}
 .blog-details .share-tags .first-tags ul li a {
     border: 1px solid #eeeeee;
     padding: 12px 15px;
     border-radius: 5px;
     color: #888888;
}
 .blog-details .share-tags .first-tags ul li a:hover {
     background-color: var(--yellow);
     color: var(--white);
}
 .blog-details .share-tags .first-tags ul li p {
     font-weight: 700;
     color: var(--blue);
}
 .blog-details .share-tags .second-side {
     text-align: end;
}
 .blog-details .share-tags .second-side ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .blog-details .share-tags .second-side ul li {
     display: inline-block;
     margin-right: 10px;
}
 .blog-details .share-tags .second-side ul li:last-child {
     margin-right: 0;
}
 .blog-details .share-tags .second-side ul li a {
     display: inline-block;
     background-color: var(--white);
     box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.07);
     width: 45px;
     height: 45px;
     line-height: 48px;
     border-radius: 50%;
     text-align: center;
}
 .blog-details .share-tags .second-side ul li a:hover {
     background-color: var(--yellow);
     color: var(--white);
}
 .blog-details .share-tags .second-side ul li p {
     font-weight: 700;
     color: var(--blue);
     margin-right: 15px;
}
 .blog-details .comments {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.06);
     padding: 45px 50px;
     border-radius: 5px;
     margin-bottom: 50px;
}
 .blog-details .comments h4 {
     font-size: 30px;
     margin-bottom: 30px;
}
 .blog-details .comments ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .blog-details .comments ul li {
     position: relative;
     padding-left: 130px;
     margin-bottom: 70px;
}
 .blog-details .comments ul li::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: -35px;
     width: 100%;
     height: 1px;
     background-color: #eeeeee;
}
 .blog-details .comments ul li:last-child {
     margin-bottom: 0;
}
 .blog-details .comments ul li:last-child::after {
     display: none;
}
 .blog-details .comments ul li img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100px;
     height: 100px;
     border-radius: 50%;
}
 .blog-details .comments ul li h5 {
     font-size: 18px;
     margin-bottom: 5px;
}
 .blog-details .comments ul li .date {
     font-size: 14px;
     color: #888888;
     margin-bottom: 15px;
}
 .blog-details .comments ul li a {
     display: inline-block;
     position: absolute;
     top: 10px;
     right: 0;
     background-color: var(--sky);
    ;
     color: var(--white);
     padding: 5px 18px;
     border-radius: 5px;
     text-align: center;
}
 .blog-details .comments ul li a:hover {
     color: var(--yellow);
}
 .blog-details .leave {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.06);
     border-radius: 5px;
     padding: 50px;
     margin-bottom: 30px;
}
 .blog-details .leave h4 {
     font-size: 30px;
     margin-bottom: 30px;
}
 .blog-details .leave .form-control {
     box-shadow: none;
     border: 1px solid #eeeeee;
     border-radius: 5px;
     padding: 15px 25px;
     height: 60px;
     margin-bottom: 20px;
     transition: all ease 0.5s;
}
 .blog-details .leave .form-control:focus {
     border: 1px solid var(--yellow);
}
 .blog-details .leave .textarea {
     height: 200px;
}
 .blog-details .leave .common-btn {
     border: none;
}
 .recent-post {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.06);
     padding: 24px 20px;
     border-radius: 10px;
     margin-bottom: 24px;
}
 .recent-post h4 {
     font-size: 22px;
     margin-bottom: 14px;
}
 ul.recent_list {
     padding: 0px;
     list-style: none;
     display: grid;
     grid-gap: 8px;
     margin: 0px;
}
ul.recent_list li,.recent-post li{
    padding: 0px !important;
}
 ul.recent_list li a {
     width: 100%;
     display: block;
}
 ul.recent_list li a:hover{
     color:var(--blue);
}
 .recent-post .single-recent-post {
     overflow: hidden;
     margin-bottom: 20px;
     display: grid;
     grid-template-columns: 90px auto;
}
 .recent-post .single-recent-post:last-child {
     margin-bottom: 0;
}
 .recent-post .single-recent-post .thumb {
    /* width: 100px;
     */
    /* height: 100px;
     */
     margin-right: 10px;
     position: relative;
     display: inline-block;
}
 .recent-post .single-recent-post .thumb .full-image {
     width: 100px;
     height: 100px;
     display: inline-block;
     position: relative;
     border-radius: 5px;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
}
 .recent-post .single-recent-post .thumb .full-image.bg-1 {
     background-image: url("../../assets/images/blog/blog-11.jpg");
}
 .recent-post .single-recent-post .thumb .full-image.bg-2 {
     background-image: url("../../assets/images/blog/blog-12.jpg");
}
 .recent-post .single-recent-post .thumb .full-image.bg-3 {
     background-image: url("../../assets/images/blog/blog-13.jpg");
}
 .recent-post .single-recent-post .thumb .full-image.bg-4 {
     background-image: url("../../assets/images/blog/blog-14.jpg");
}
 .recent-post .single-recent-post .single-recent-info {
     margin-left: 10px;
}
 .recent-post .single-recent-post .single-recent-info h5 {
     font-size: 16px;
     margin-bottom: 8px;
}
 .recent-post .single-recent-post .single-recent-info h5 a {
     display: inline-block;
     color: var(--blue);
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
}
 .recent-post .single-recent-post .single-recent-info h5 a:hover {
     color: var(--yellow);
}
 .recent-post .single-recent-post .single-recent-info ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .recent-post .single-recent-post .single-recent-info ul li {
     display: inline-block;
     margin-right: 25px;
     position: relative;
}
 .recent-post .single-recent-post .single-recent-info ul li::before {
     content: "";
     position: absolute;
     top: 50%;
     right: -15px;
     bottom: 0;
     width: 1px;
     height: 15px;
     background-color: #dddddd;
     transform: translateY(-50%);
}
 .recent-post .single-recent-post .single-recent-info ul li:last-child {
     margin-right: 0;
}
 .recent-post .single-recent-post .single-recent-info ul li:last-child::before {
     display: none;
}
 .recent-post .single-recent-post .single-recent-info ul li:first-child {
     margin-right: 0;
}
 .recent-post .single-recent-post .single-recent-info ul li:first-child::before {
     display: none;
}
 .recent-post .single-recent-post .single-recent-info ul li p {
     background-color: var(--yellow);
     width: 7px;
     height: 7px;
     border-radius: 30px;
     margin-right: 5px;
     position: relative;
     top: -2px;
}
/* Portfolio Page CSS ======================================================*/
 .brand-area .section-heading h2 {
     font-size: 35px;
}
 .brand-area .brand-content {
     max-width: 500px;
}
 .brand-area .brand-content p {
     margin-bottom: 25px;
}
 .brand-area .brand-image img {
     margin-bottom: -2px;
}
/* Portfolio Details Page CSS ======================================================*/
 .portfolio-details .portfolio-details-content {
     margin-right: 45px;
}
 .portfolio-details .portfolio-details-content .blog-9 {
     border-radius: 5px;
     margin-bottom: 30px;
}
 .portfolio-details .portfolio-details-content h4 {
     font-size: 48px;
     margin-bottom: 15px;
}
 .portfolio-details .portfolio-details-content p {
     margin-bottom: 15px;
}
 .portfolio-details .portfolio-details-content .portfolio-image {
     margin-bottom: 30px;
}
 .portfolio-details .portfolio-details-content h5 {
     font-size: 30px;
     margin-bottom: 10px;
}
 .portfolio-details .portfolio-details-content .project-tips ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .portfolio-details .portfolio-details-content .project-tips ul li {
     position: relative;
     padding-left: 25px;
     margin-bottom: 20px;
}
 .portfolio-details .portfolio-details-content .project-tips ul li:last-child {
     margin-bottom: 0;
}
 .portfolio-details .portfolio-details-content .project-tips ul li i {
     position: absolute;
     top: 2px;
     left: 0;
     font-size: 20px;
     color: var(--sky);
    ;
}
 .portfolio-details .portfolio-details-content .overview {
     margin-top: 30px;
}
 .portfolio-details .project-details {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.06);
     border-radius: 10px;
     padding: 30px 35px;
     margin-bottom: 50px;
}
 .portfolio-details .project-details h4 {
     font-size: 24px;
     margin-bottom: 25px;
}
 .portfolio-details .project-details ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .portfolio-details .project-details ul li {
     position: relative;
     margin-bottom: 40px;
}
 .portfolio-details .project-details ul li::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: -20px;
     width: 100%;
     height: 1px;
     background-color: rgba(221, 221, 221, 0.7);
}
 .portfolio-details .project-details ul li:last-child {
     margin-bottom: 0;
}
 .portfolio-details .project-details ul li:last-child::before {
     display: none;
}
 .portfolio-details .project-details ul li span {
     position: absolute;
     top: 0;
     right: 0;
     font-weight: 500;
}
 .portfolio-details .need-portfolio {
     background-color: var(--sky);
    ;
     border-radius: 10px;
     padding: 30px 35px;
     position: relative;
     z-index: 1;
}
 .portfolio-details .need-portfolio h2 {
     font-size: 32px;
     color: var(--white);
     margin-bottom: 30px;
}
 .portfolio-details .need-portfolio .portfolio-shape-2 {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
}
/* FAQ Page CSS ======================================================*/
 .faq-details {
}
 .faq-content .accordion-item {
     margin-bottom: 20px;
     border-radius: 0;
     border: none;
     border: 1px solid #eeeeee;
     border-radius: 5px;
}
 .faq-content .accordion-item:last-child {
     margin-bottom: 0;
}
 .faq-content .accordion-item .accordion-body {
     background: var(--white);
     padding: 0 45px 25px 70px;
}
 .tab_details .faq-content .accordion-item .accordion-body {
     padding: 0 45px 25px 32px;
}
 .faq-content .accordion-button {
     border: none;
     font-weight: 600;
     font-size: 20px;
     padding: 20px 30px;
     border-radius: 5px;
     color: var(--blue);
     box-shadow: unset !important;
     font-weight: 600;
}
 .faq-content .accordion-button span {
     display: inline-block;
     color: var(--yellow);
     margin-right: 10px;
}
 .faq-content .accordion-button::before {
     right: 15px;
     top: 50%;
     content: "\ebc0";
     font-size: 20px;
     position: absolute;
     transform: translateY(-50%);
     font-family: boxicons;
}
 .faq-content .accordion-button::after {
     display: none;
}
 .faq-content .accordion-button:not(.collapsed) {
     background-color: var(--white);
}
 .faq-content .accordion-button:not(.collapsed)::before {
     content: "\eb8b";
}
 .article_head ul {
     display: grid;
     grid-gap: 10px;
     padding: 0px;
     margin: 20px 0px;
     list-style: none;
}
 .faq-form {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.06);
     border-radius: 5px;
     padding: 40px 50px;
}
 .faq-form h5 {
     font-size: 24px;
     margin-bottom: 25px;
}
 .faq-form .form-control {
     box-shadow: none;
     border-radius: 5px;
     margin-bottom: 20px;
     padding: 15px 25px;
     height: 60px;
     color: #888888;
     border: 1px solid #eeeeee;
     transition: all ease 0.5s;
}
 .faq-form .form-control:focus {
     border: 1px solid var(--yellow);
}
 .faq-form .textarea {
     height: 150px;
}
 .faq-form .common-btn {
     border: none;
}
 .download {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.06);
     border-radius: 10px;
     padding: 35px 40px;
}
 .download h4 {
     font-size: 22px;
     margin-bottom: 25px;
}
 .download button {
     width: 100%;
     background-color: transparent;
     position: relative;
     padding-left: 25px;
     margin-bottom: 20px;
     border: 1px solid #eeeeee;
     padding: 18px 30px 18px 60px;
     text-align: start;
     border-radius: 10px;
     transition: all ease 0.5s;
}
 .download button:last-child {
     margin-bottom: 0;
}
 .download button .download-icon {
     position: absolute;
     top: 50%;
     left: 30px;
     transform: translateY(-50%);
}
 .download button:hover {
     border: 1px solid var(--sky);
    ;
}
/* Contact Us Page CSS ======================================================*/
 .contact-us-area .map iframe {
     display: block;
     width: 100%;
     height: 550px;
}
 .contact-mail {
     position: relative;
     margin-top: -140px;
}
 .contact-mail .mail {
     background-color: var(--white);
     box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.07);
     border-radius: 5px;
     padding: 50px;
     text-align: center;
     position: relative;
     z-index: 1;
     transition: all ease 0.5s;
     height: 100%;
}
 .contact-mail .mail i {
     font-size: 40px;
     color: var(--sky);
    ;
     background-color: #e5f0ff;
     display: block;
     width: 85px;
     height: 85px;
     line-height: 96px;
     border-radius: 50%;
     text-align: center;
     margin: auto;
     margin-bottom: 25px;
     transition: all ease 0.5s;
}
 .contact-mail .mail h4 {
     font-size: 22px;
     margin-bottom: 15px;
     transition: all ease 0.5s;
}
 .contact-mail .mail span {
     transition: all ease 0.5s;
}
 .contact-mail .mail ul {
     padding-left: 0;
     margin-bottom: 0;
     list-style-type: none;
}
 .contact-mail .mail ul li a {
     display: block;
     line-height: 26px;
}
 .contact-mail .mail ul li a:hover {
     color: var(--sky);
    ;
}
 .contact-mail .mail .contact-shape {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
}
 .contact-mail .mail .contact-shape-1 {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     transition: all ease 0.5s;
}
 .contact-mail .mail:hover {
     background-color: var(--sky);
    ;
}
 .contact-mail .mail:hover i {
     color: var(--white);
     background-color: #1975ff;
}
 .contact-mail .mail:hover h4 {
     color: var(--white);
}
 .contact-mail .mail:hover span {
     color: #eeeeee;
}
 .contact-mail .mail:hover ul li a {
     color: #eeeeee;
}
 .contact-mail .mail:hover .contact-shape-1 {
     opacity: 0;
}
 .get-touch-area .get-image {
     position: relative;
}
 .get-touch-area .contact-form {
     margin-right: 40px;
}
 .get-touch-area .contact-form .form-group ul li {
     font-size: 14px;
     color: #ff0000;
     margin-top: -15px;
}
 .get-touch-area .contact-form .form-control,.get-touch-area .contact-form .form-select {
     box-shadow: none;
     border-radius: 5px;
     border: 1px solid #eeeeee;
     padding: 15px 25px;
     height: 60px;
     color: #888888;
     margin-bottom: 20px;
     transition: all ease 0.5s;
}
 .get-touch-area .contact-form .form-control::-moz-placeholder,.get-touch-area .contact-form .form-select::-moz-placeholder {
     color:var(--text);
     -moz-transition: all ease 0.5s;
     transition: all ease 0.5s;
}
 .get-touch-area .contact-form .form-control::placeholder,.get-touch-area .contact-form .form-select::placeholder {
     color:var(--text);
     transition: all ease 0.5s;
}
 .get-touch-area .contact-form .form-control:focus,.get-touch-area .contact-form .form-select:focus {
     border: 1px solid var(--yellow);
}
 .get-touch-area .contact-form .form-control:focus::-moz-placeholder,.get-touch-area .contact-form .form-select:focus::-moz-placeholder {
     color: transparent;
}
 .get-touch-area .contact-form .form-control:focus::placeholder,.get-touch-area .contact-form .form-select:focus::placeholder {
     color: transparent;
}
 .get-touch-area .contact-form .textarea {
     height: 150px !important;
     resize: none;
}
 .get-touch-area .contact-form .common-btn {
     border: none;
}
 .get-touch-area .contact-form #msgSubmit {
     font-size: 20px;
     color: #ff0000;
}
/* Login Register Area CSS =======================================================*/
 .login-form {
     padding: 35px;
     border-radius: 15px;
     background-color: var(--white);
     box-shadow: 0 0 1.25rem rgba(108, 118, 134, 0.1);
     max-width: 650px;
     margin: auto;
     border: 1px solid #eeeeee;
}
 .login-form h2 {
     font-size: 30px;
     margin-bottom: 30px;
}
 .login-form form .form-group {
     margin-bottom: 25px;
}
 .login-form form .form-group label {
     display: block;
     margin-bottom: 8px;
     font-weight: 500;
}
 .login-form form .form-group .form-control {
     height: 55px;
     padding: 20px;
     line-height: initial;
     background-color: transparent;
     border: 1px solid #eeeeee;
     border-radius: 10px;
     box-shadow: unset;
     transition: all ease 0.5s;
     font-size: 15px;
}
 .login-form form .form-group .form-control:focus {
     border: 1px solid var(--yellow);
}
 .login-form form .lost-your-password a {
     display: inline-block;
     position: relative;
     font-weight: 500;
     font-size: 15px;
     color:var(--text);
}
 .login-form form .lost-your-password a::before {
     width: 100%;
     height: 1px;
     position: absolute;
     left: 0;
     bottom: 0;
     content: "";
     transition: all ease 0.5s;
     background-color: #eeeeee;
}
 .login-form form .lost-your-password a::after {
     width: 0;
     height: 1px;
     position: absolute;
     left: 0;
     transition: all ease 0.5s;
     bottom: 0;
     content: "";
     background-color: var(--blue);
}
 .login-form form .lost-your-password a:hover {
     color: var(--yellow);
}
 .login-form form .lost-your-password a:hover::before {
     background-color: var(--yellow);
}
 .login-form form .default-btn {
     margin-top: 25px;
     padding: 15px 35px;
     width: 100%;
     border: none;
     font-weight: 500;
     border-radius: 5px;
     position: relative;
     z-index: 1;
     transition: all ease 0.5s;
}
 .login-form form .default-btn::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 0%;
     opacity: 0;
     visibility: hidden;
     background-color: var(--sky);
    ;
     transition: all ease 0.5s;
     z-index: -1;
}
 .login-form form .default-btn:hover {
     color: var(--white);
}
 .login-form form .default-btn:hover::before {
     opacity: 1;
     height: 100%;
     visibility: visible;
     border-radius: 5px;
}
 .register-form {
     padding: 35px;
     border-radius: 15px;
     background-color: var(--white);
     box-shadow: 0 0 1.25rem rgba(108, 118, 134, 0.1);
     max-width: 650px;
     margin: auto;
     border: 1px solid #eeeeee;
}
 .register-form h2 {
     font-size: 30px;
     margin-bottom: 30px;
}
 .register-form form .form-group {
     margin-bottom: 25px;
}
 .register-form form .form-group label {
     display: block;
     margin-bottom: 8px;
     font-weight: 500;
     font-size: 16px;
}
 .register-form form .form-group .form-control {
     height: 50px;
     padding: 20px;
     line-height: initial;
     background-color: transparent;
     border: 1px solid #eeeeee;
     border-radius: 10px;
     box-shadow: unset;
     transition: all ease 0.5s;
     font-size: 15px;
}
 .register-form form .description {
     font-style: italic;
     font-size: 14px;
     margin-top: -5px;
     margin-bottom: 15px;
}
 .register-form form .default-btn {
     margin-top: 10px;
     padding: 15px 35px;
     width: 100%;
     border: none;
     font-weight: 500;
     border-radius: 5px;
     position: relative;
     z-index: 1;
     transition: all ease 0.5s;
}
 .register-form form .default-btn::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 0%;
     opacity: 0;
     visibility: hidden;
     background-color: var(--sky);
    ;
     transition: all ease 0.5s;
     z-index: -1;
}
 .register-form form .default-btn:hover {
     color: var(--white);
}
 .register-form form .default-btn:hover::before {
     opacity: 1;
     height: 100%;
     visibility: visible;
     border-radius: 5px;
}
/* Terms & Conditions Page CSS ======================================================*/
 .terms-conditions-area .container {
     max-width: 875px;
     margin: auto;
}
 .terms-conditions {
     max-width: 800px;
     margin: auto;
}
 .terms-conditions .title {
     margin-bottom: 30px;
     text-align: center;
}
 .terms-conditions .title span {
     color: var(--blue);
     display: block;
     margin-bottom: 10px;
}
 .terms-conditions .title h2 {
     font-size: 36px;
     color: var(--blue);
}
 .terms-conditions img {
     margin-bottom: 30px;
}
 .terms-conditions .conditions-content {
     margin-bottom: 30px;
}
 .terms-conditions .conditions-content h3 {
     margin-bottom: 15px;
}
 .terms-conditions .conditions-content p {
     margin-bottom: 10px;
}
 .terms-conditions .conditions-content ul {
     margin-bottom: 15px;
     padding-left: 0;
     list-style-type: none;
     margin-top: 15px;
}
 .terms-conditions .conditions-content ul li {
     position: relative;
     padding-left: 25px;
     margin-bottom: 10px;
}
 .terms-conditions .conditions-content ul li:last-child {
     margin-bottom: 0;
}
 .terms-conditions .conditions-content ul li i {
     position: absolute;
     left: 0;
     top: 1px;
     font-size: 20px;
     color: var(--sky);
    ;
}
 .terms-conditions .conditions-content h3 {
     margin-bottom: 15px;
}
 .terms-conditions .conditions-content p {
     margin-bottom: 10px;
}
/* Privacy Policy Area CSS =======================================================*/
 .privacy-policy-area .container {
    /* max-width: 875px;
     */
    /* margin: auto;
     */
}
 .privacy-policy-wrap img {
     margin-bottom: 30px;
}
 .privacy-policy-wrap .privacy-content {
     margin-bottom: 30px;
}
 .privacy-policy-wrap .privacy-content h3 {
     margin-bottom: 15px;
}
 .privacy-policy-wrap .privacy-content p {
     margin-bottom: 10px;
}
.privacy-content ul,.product_inner ul {
     margin-left: 0;
     margin-bottom: 15px;
     list-style-type: none;
     padding-left: 0;
     margin-top: 15px;
}
 .privacy-content li,.product_inner ul li {
     position: relative;
     padding-left: 25px;
     margin-bottom: 10px;
}
  .privacy-content li:last-child,.product_inner li:last-child {
     margin-bottom: 0;
}
.privacy-content li i,.product_inner ul li i {
     position: absolute;
     left: 0;
     top: 1px;
     color: var(--sky);
     font-size: 20px;
}
/* Coming Soon Area CSS =======================================================*/
 .coming-soon-area {
     position: relative;
     z-index: 1;
     background: #f6f7fb;
     padding-top: 100px;
}
 .coming-soon-area .d-table {
     width: 100%;
     height: 100%;
}
 .coming-soon-area .d-table .d-table-cell {
     vertical-align: middle;
}
 .coming-soon-area .coming-soon-content {
     max-width: 720px;
     background-color: var(--white);
     border-radius: 5px;
     overflow: hidden;
     text-align: center;
     padding: 40px 60px;
     box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
     margin-left: auto;
     margin-right: auto;
     border-radius: 10px;
}
 .coming-soon-area .coming-soon-content .logo {
     display: inline-block;
}
 .coming-soon-area .coming-soon-content h2 {
     font-size: 48px;
     margin-top: 30px;
     margin-bottom: 0;
     color: var(--blue);
}
 .coming-soon-area .coming-soon-content #timer {
     margin-top: 40px;
}
 .coming-soon-area .coming-soon-content #timer div {
     background-color: var(--blue);
     color: var(--white);
     width: 130px;
     height: 130px;
     border-radius: 0;
     font-size: 45px;
     font-weight: 800;
     margin-bottom: 0;
     margin-left: 10px;
     margin-right: 10px;
}
 .coming-soon-area .coming-soon-content #timer div span {
     font-size: 16px;
     color: var(--white);
     display: block;
     margin-top: -10px;
     font-weight: 400;
}
 .coming-soon-area .coming-soon-content .newsletter-form {
     position: relative;
     max-width: 500px;
     margin-left: auto;
     margin-right: auto;
     margin-top: 50px;
}
 .coming-soon-area .coming-soon-content .newsletter-form .form-group {
     margin-bottom: 25px;
     width: 100%;
     position: relative;
}
 .coming-soon-area .coming-soon-content .newsletter-form .form-group .form-control {
     box-shadow: none;
     border-radius: 0;
     padding-left: 0;
     border: none;
     border-bottom: 1px solid #eeeeee;
     height: 50px;
     color:var(--text);
}
 .coming-soon-area .coming-soon-content .newsletter-form .form-group .form-control::-moz-placeholder {
     color:var(--text);
     -moz-transition: all ease 0.5s;
     transition: all ease 0.5s;
}
 .coming-soon-area .coming-soon-content .newsletter-form .form-group .form-control::placeholder {
     color:var(--text);
     transition: all ease 0.5s;
}
 .coming-soon-area .coming-soon-content .newsletter-form .form-group .form-control:focus {
     border-bottom: 1px solid var(--sky);
    ;
}
 .coming-soon-area .coming-soon-content .newsletter-form .form-group .form-control:focus::-moz-placeholder {
     color: transparent;
}
 .coming-soon-area .coming-soon-content .newsletter-form .form-group .form-control:focus::placeholder {
     color: transparent;
}
 .coming-soon-area .coming-soon-content .newsletter-form .default-btn {
     border: none;
}
 .coming-soon-area .coming-soon-content .newsletter-form .validation-danger {
     color: #ff0000;
}
/* 404 Error Page CSS =======================================================*/
 .error-area {
     text-align: center;
     position: relative;
     z-index: 1;
     padding-top: 100px;
}
 .error-area .d-table {
     width: 100%;
     height: 100%;
}
 .error-area .d-table .d-table-cell {
     vertical-align: middle;
}
 .error-area .error-content-wrap {
     z-index: 1;
     position: relative;
}
 .error-area .error-content-wrap h1 {
     font-size: 300px;
     line-height: 1;
     font-weight: 700;
     color: var(--blue);
     margin-top: -40px;
}
 .error-area .error-content-wrap h1 .a {
     display: inline-block;
}
 .error-area .error-content-wrap h1 .red {
     color: var(--sky);
    ;
     display: inline-block;
}
 .error-area .error-content-wrap h1 .b {
     display: inline-block;
}
 .error-area .error-content-wrap h3 {
     margin: 30px 0 0;
     position: relative;
     color: var(--blue);
}
 .error-area .error-content-wrap p {
     margin: 20px 0 20px;
     font-size: 19px;
     color: var(--blue);
}
 .error-area .error-content-wrap .default-btn {
     border: 1px solid var(--yellow);
     border-radius: 5px;
     display: inline-block;
}
 .error-area .error-content-wrap .default-btn.two {
     font-size: 16px;
     font-weight: 600;
     color: var(--yellow);
     padding: 12px 40px;
     position: relative;
     z-index: 1;
     transition: all ease 0.5s;
}
 .error-area .error-content-wrap .default-btn.two::before {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     width: 0%;
     height: 100%;
     background-color: var(--sky);
    ;
     z-index: -1;
     opacity: 0;
     visibility: hidden;
     border-radius: 5px;
     transition: all ease 0.5s;
}
 .error-area .error-content-wrap .default-btn.two:hover {
     color: var(--white);
     border: 1px solid var(--sky);
    ;
}
 .error-area .error-content-wrap .default-btn.two:hover::before {
     opacity: 1;
     width: 100%;
     visibility: visible;
}
/* Go Top CSS =======================================================*/
 .go-top {
     position: fixed;
     cursor: pointer;
     top: 50%;
     padding-top: 3px;
     font-size: 25px;
     right: 15px;
     background-color: var(--yellow);
     z-index: 4;
     width: 40px;
     text-align: center;
     height: 40px;
     line-height: 40px;
     border-radius: 50%;
     opacity: 0;
     visibility: hidden;
     transition: all ease 0.5s;
     color: var(--white);
}
 .go-top.active {
     top: 98%;
     transform: translateY(-98%);
     opacity: 1;
     visibility: visible;
}
 .go-top::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     z-index: -1;
     background-color: var(--sky);
    ;
     opacity: 0;
     visibility: hidden;
     transition: all ease 0.5s;
}
 .go-top:hover::before {
     opacity: 1;
     visibility: visible;
}
/* Preloader CSS =======================================================*/
 #preloader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 99999999;
     background-color: #FFF1EC;
}
 #preloader #loader {
     display: block;
     position: relative;
     left: 50%;
     top: 50%;
     width: 100px;
     height: 100px;
     margin: -75px 0 0 -75px;
     border-radius: 50%;
     border: 4px solid transparent;
    /* border-top-color: var(--yellow);
     */
     animation: spin 2s linear infinite;
}
/* #preloader #loader::before {
     content: "";
     position: absolute;
     top: 5px;
     left: 5px;
     right: 5px;
     bottom: 5px;
     border-radius: 50%;
     border: 4px solid transparent;
     border-top-color: var(--white);
     animation: spin 3s linear infinite;
}
 #preloader #loader::after {
     content: "";
     position: absolute;
     top: 15px;
     left: 15px;
     right: 15px;
     bottom: 15px;
     border-radius: 50%;
     border: 4px solid transparent;
     border-top-color: var(--blue);
     animation: spin 1.5s linear infinite;
}
 */
 @keyframes spin {
     0% {
         transform: rotateY(0deg);
    }
     100% {
         transform: rotateY(360deg);
    }
}
/* Others Area CSS =======================================================*/
 .rotate {
     animation: rotation 20s infinite linear;
}
 .FocuS {
     animation: FocuS 1s linear 1s infinite;
}
 .animationFramesTwo {
     animation: animationFramesTwo 15000ms infinite ease-in-out;
}
 .bounce {
     animation: float 1500ms infinite ease-in-out;
}
 .moveHorizontal {
     animation: moveHorizontal 3000ms infinite ease-in-out;
}
 .moveHorizontal_reverse {
     animation: moveHorizontal_reverse 3000ms infinite ease-in-out;
}
 .moveVertical {
     animation: moveVertical 3000ms infinite ease-in-out;
}
 @keyframes waving_left {
     0% {
         -webkit-transform: rotate(0deg);
    }
     25% {
         -webkit-transform: rotate(3deg);
    }
     50% {
         -webkit-transform: rotate(6deg);
    }
     75% {
         -webkit-transform: rotate(-3deg);
    }
     100% {
         -webkit-transform: rotate(0deg);
    }
}
 @keyframes waving_right {
     0% {
         -webkit-transform: rotate(0deg);
    }
     25% {
         -webkit-transform: rotate(-3deg);
    }
     50% {
         -webkit-transform: rotate(-6deg);
    }
     75% {
         -webkit-transform: rotate(-3deg);
    }
     100% {
         -webkit-transform: rotate(0deg);
    }
}
 @keyframes float {
     0% {
         transform: translateY(0px);
    }
     50% {
         transform: translateY(-5px);
    }
     100% {
         transform: translateY(0px);
    }
}
 @keyframes rotation {
     from {
         -webkit-transform: rotate(0deg);
    }
     to {
         -webkit-transform: rotate(359deg);
    }
}
 @keyframes animationFramesTwo {
     0% {
         -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
     20% {
         -webkit-transform: translate(73px, -1px) rotate(36deg);
    }
     40% {
         -webkit-transform: translate(141px, 72px) rotate(72deg);
    }
     60% {
         -webkit-transform: translate(83px, 122px) rotate(108deg);
    }
     80% {
         -webkit-transform: translate(-40px, 72px) rotate(144deg);
    }
     100% {
         -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
}
 @keyframes moveHorizontal {
     0% {
         transform: translateX(0px);
    }
     50% {
         transform: translateX(-20px);
    }
     100% {
         transform: translateX(0px);
    }
}
 @keyframes moveHorizontal_reverse {
     0% {
         transform: translateX(0px);
    }
     50% {
         transform: translateX(20px);
    }
     100% {
         transform: translateX(0px);
    }
}
 @keyframes moveVertical {
     0% {
         transform: translateY(0px);
    }
     50% {
         transform: translateY(-20px);
    }
     100% {
         transform: translateY(0px);
    }
}
 @keyframes FocuS {
     0% {
         opacity: 0;
    }
     75% {
         opacity: 1;
    }
     100% {
         opacity: 0;
    }
}
 @keyframes ripple {
     0% {
         transform: scale(1);
    }
     75% {
         transform: scale(1.75);
         opacity: 0.6;
    }
     100% {
         transform: scale(2);
         opacity: 0;
    }
}
 @keyframes pop {
     0% {
         transform: scale(1, 1);
    }
     50% {
         transform: scale(1.1, 1.1);
    }
     100% {
         transform: scale(1, 1);
    }
}
 @keyframes rotate-vertical {
     0% {
         transform: rotateY(0deg);
    }
     100% {
         transform: rotateY(360deg);
    }
}
 @keyframes full-circle {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(-360deg);
    }
}
/*# sourceMappingURL=style.css.map */
 .home-slides .item {
     height: calc(100vh - 142.97px );
     position: relative;
}
 .home-slides .item > img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .home-slides .item .cover {
     padding: 75px 0;
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background: rgba(0, 0, 0, 0.6);
     display: flex;
     align-items: center;
}
 .home-slides .item .cover .header-content {
     position: relative;
     padding: 56px;
     overflow: hidden;
}
 .home-slides .item .cover .header-content .line {
     content: "";
     display: inline-block;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     position: absolute;
     border: 9px solid #fff;
     -webkit-clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%);
     clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%);
}
 .home-slides .item .cover .header-content h1 {
     font-size: 56px;
     font-weight: 600;
     margin: 5px 0 20px;
     word-spacing: 3px;
     color: #fff;
}
 .home-slides .item .cover .header-content h4 {
     font-size: 24px;
     font-weight: 300;
     line-height: 36px;
     color: #fff;
}
 .contante_slider {
     max-width: 800px;
}
 .home-slides .owl-item.active h1 {
     -webkit-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     animation-name: fadeInDown;
     animation-delay: 0.3s;
}
 .home-slides .owl-item.active span {
     -webkit-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     animation-name: fadeInDown;
     animation-delay: 0.3s;
}
 @keyframes fadeInDown {
     0% {
         opacity: 0;
         -webkit-transform: translate3d(0,-100%,0);
         transform: translate3d(0,-100%,0) 
    }
     to {
         opacity: 1;
         -webkit-transform: translateZ(0);
         transform: translateZ(0) 
    }
}
 .home-slides.owl-item.active h4 {
     -webkit-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     animation-name: fadeInUp;
     animation-delay: 0.3s;
}
 .home-slides .owl-item.active .line {
     -webkit-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     animation-name: fadeInLeft;
     animation-delay: 0.3s;
}
 @keyframes fadeInUp {
     0% {
         opacity: 0;
         -webkit-transform: translate3d(0,100%,0);
         transform: translate3d(0,100%,0) 
    }
     to {
         opacity: 1;
         -webkit-transform: translateZ(0);
         transform: translateZ(0) 
    }
}
 @keyframes fadeInLeft {
     0% {
         opacity: 0;
         -webkit-transform: translate3d(-100%,0,0);
         transform: translate3d(-100%,0,0) 
    }
     to {
         opacity: 1;
         -webkit-transform: translateZ(0);
         transform: translateZ(0) 
    }
}
 .home-slides span.sub-title {
     display: flex;
     grid-gap: 16px;
     align-items: baseline;
     color: var(--white);
}
 @keyframes slideOutUp {
     0% {
         -webkit-transform: translateZ(0);
         transform: translateZ(0) 
    }
     to {
         visibility: hidden;
         -webkit-transform: translate3d(0,-100%,0);
         transform: translate3d(0,-100%,0) 
    }
}
 .slideOutUp {
     -webkit-animation-name: slideOutUp;
     animation-name: slideOutUp 
}
 @keyframes fadeIn {
     0% {
         opacity: 0 
    }
     to {
         opacity: 1 
    }
}
 .fadeIn {
     -webkit-animation-name: fadeIn;
     animation-name: fadeIn 
}
 .article_box {
     position: absolute;
     padding: 20px;
     bottom: 0px;
     height: 100%;
     display: flex;
     align-items: end;
}
 .article_box * {
     color: var(--white);
}
 .article_box h4 {
     margin: 0px 0px 15px !important;
     font-size: 24px !important;
     font-weight: 500;
}
 .article_sec .blog-card img {
     filter: brightness(0.85);
     object-fit: cover;
     transition: all 1s;
     transform: scale(1);
}
 .article_sec .blog-card a,.article_sec .blog-card img{
     height: 400px;
     border-radius: 8px;
     overflow: hidden;
     position: relative;
}
 .article_sec a:hover img{
     transform: scale(1.05);
}
 .article_sec .row {
     grid-row-gap: 24px;
}
 @keyframes slideOutLeft {
     0% {
         -webkit-transform: translateZ(0);
         transform: translateZ(0) 
    }
     to {
         visibility: hidden;
         -webkit-transform: translate3d(-100%,0,0);
         transform: translate3d(-100%,0,0) 
    }
}
 .slideOutLeft {
     -webkit-animation-name: slideOutLeft;
     animation-name: slideOutLeft 
}
 @keyframes slideOutRight {
     0% {
         -webkit-transform: translateZ(0);
         transform: translateZ(0) 
    }
     to {
         visibility: hidden;
         -webkit-transform: translate3d(100%,0,0);
         transform: translate3d(100%,0,0) 
    }
}
 .list_black li {
     color: var(--black) !important;
}
 .slideOutRight {
     -webkit-animation-name: slideOutRight;
     animation-name: slideOutRight 
}
 .services-area .row {
     grid-row-gap: 30px;
}
 .service-analyses h6 {
     font-size: 20px;
     margin: 24px 0px 20px;
     color: var(--black);
     font-weight: 600;
}
 .service-details-area .services-card {
     background-color: #f6fcff;
}
 .service-details-area .services-card h4 {
     font-size: 20px;
     margin-bottom: 0px;
}
 .industry_img img {
     width: 100%;
     object-fit: cover;
}
 .industry_grid a.download_btn {
     background-color: var(--yellow);
     padding: 10px 20px;
     font-size: 15px;
     border-radius: 30px;
     color: var(--white);
    /* margin-top: 24px;
     */
     display: block;
     max-width: fit-content;
}
 .industry_grid a.download_btn:hover{
     background-color: var(--blue);
}
 .industry_img,.industry_img img {
     height: 286px;
     object-fit: cover;
     position: relative;
}
 .industry_img {
     overflow: hidden;
}
 .industry_img img {
     transition: all 1s;
     transform: scale(1);
     overflow: hidden;
}
 .industry_img:hover img {
     transform: scale(1.05);
}
 .industry_details >.industry_grid:nth-child(1) .industry_img,.industry_details > .industry_grid:nth-child(1) .industry_img img{
     height: 386px;
}
/*------------|| New Css ||-------------------*/
 body{
     overflow-x: hidden;
     max-width: 100%;
}
 .hero_slde {
     position: relative;
     z-index: 2;
     display: flex;
     flex-flow: wrap;
     justify-content: space-between;
     position: relative;
     padding: 50px 0px;
     min-height: 600px;
}
 .hero_sec {
     padding-top: 120.53px;
     max-width: 100%;
     position: relative;
     overflow-x: clip;
}
 .heroimg2 {
     position: absolute;
     right: 0px;
     top: 0px;
     left: 830.5px;
     top: -225px;
     visibility: visible;
     perspective: 601px;
     z-index: 1;
}
 .heroimg1{
     position: absolute;
     display: block;
     pointer-events: auto;
     left: -402.5px;
     top: -427px;
     z-index: 6;
     visibility: visible;
     perspective: 601px;
     transform: translate(1.24px, -1.33px);
     z-index: 1;
}
 .hero_details {
     position: absolute;
     top: 48%;
     left: 50%;
     width: 100%;
     transform: translate(-50%,-50%);
}
 .hero_img {
     margin-left: auto;
     max-width: 60%;
     padding-right: 5%;
}
 .hero_details h2 {
     font-size: 60px;
     font-weight: 800;
}
 .hero_details .typewriter span{
     font-size: 48px;
     font-weight: 300;
     margin-bottom: 30px;
}
 .blue_dots,.orange_dots,.sky_dots{
     position: absolute;
     display: block;
     pointer-events: auto;
     left: 950px;
     top: 170px;
     z-index: 1;
     visibility: visible;
     perspective: 601px;
}
 .orange_dots {
     top: 550px;
     left: 945px;
}
 .sky_dots {
     left: 76px;
     top: 430px;
}
 .blue_dots img{
     position: absolute;
     opacity: 1;
     transform-origin: 50% 50%;
     min-height: 39px;
     min-width: 37px;
     transform: perspective(600px) translate3d(-13.8852px, 18.998px, 0px);
     animation-name: blue_dots;
     animation-duration:10s;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
}
 @keyframes blue_dots {
     0% {
         transform: perspective(600px) translate3d(-13.8852px, 18.998px, 0px);
    }
     50% {
         transform: perspective(600px) translate3d(-33.8852px, 99.998px, 0px);
    }
     100% {
         transform: perspective(600px) translate3d(-13.8852px, 18.998px, 0px);
    }
}
 .orange_dots img{
     position: absolute;
     display: block;
     height: 46px;
     width: 43px;
     opacity: 1;
     transform-origin: 50% 50%;
     min-height: 46px;
     min-width: 43px;
     transform: perspective(600px) translate3d(5.0207px, -18.9671px, 0px);
     animation-name: orange_dots;
     animation-duration:10s;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
}
 @keyframes orange_dots {
     0% {
         transform: perspective(600px) translate3d(5.0207px, -18.9671px, 0px);
    }
     50% {
         transform: perspective(600px) translate3d(45.0207px, -153.9671px, 0px);
    }
     100% {
         transform: perspective(600px) translate3d(5.0207px, -18.9671px, 0px);
    }
}
 .sky_dots img{
     position: absolute;
     display: block;
     height: 34px;
     width: 33px;
     opacity: 1;
     transform-origin: 50% 50%;
     min-height: 34px;
     min-width: 33px;
     transform: perspective(600px) translate3d(232.023px, -61.5212px, 0px);
     animation-name: sky_dots;
     animation-duration:20s;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
}
 @keyframes sky_dots {
     0% {
         transform: perspective(600px) translate3d(232.023px, -61.5212px, 0px);
    }
     50% {
         transform:perspective(600px) translate3d(-35.977px, 8.4788px, 0px);
    }
     100% {
         transform: perspective(600px) translate3d(232.023px, -61.5212px, 0px);
    }
}
 .typewriter {
     white-space: nowrap;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     height: 65px;
     max-width: 996px;
}
 .auto_type .typewriter {
     justify-content: left;
     animation: widthAnimation 6s infinite;
}
 .auto_type .typewriter span {
     position: absolute;
     top: 50%;
     left: 0px;
     transform: translateY(-50%);
     opacity: 0;
     transition: all 0s;
}
 .auto_type .typewriter * {
     font-family: "Plus Jakarta Sans", Sans-serif;
     font-size: 75px;
     font-weight: 800;
     color: var(--porpule1);
}
 @keyframes widthAnimation {
     0% {
         width: 0%;
    }
     50% {
         width: 100%;
    }
     100% {
         width: 0%;
    }
}
 .seo_form_sec {
     min-height: 417px;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     display: flex;
     align-items: center;
     padding: 50px 0px;
}
 .seo_form .section-heading {
     text-align: center;
}
 .seo_form .section-heading * {
     color: var(--white);
}
 .seo_form {
     max-width: 600px;
     margin: 0px auto;
}
 .seo_form .newsletter-form {
     display: grid;
     grid-gap: 16px;
     grid-template-columns: auto max-content;
     margin-top: 12px;
}
 .seo_form .newsletter-form input {
     width: 100%;
     min-height: 50px;
}
 .seo_form button {
     background-color: var(--yellow);
     border: unset;
     outline: unset;
     display: block;
     padding: 12px 40px;
     border-radius: 6px;
     color: var(--white);
     font-weight: 600;
     transition:all 0.4s;
}
 .seo_form button:hover{
     background:var(--sky);
}
 div#validator-newsletter {
     grid-column: span 2;
}
 .service_img {
     position: absolute;
     bottom: -15%;
     z-index: 2;
     top: 40%;
     left: 88%;
}
 .services-area .container{
     border-top: 1px solid var(--bdrclr);
}
 .extended-parallax {
     position: absolute;
     display: block;
     pointer-events: auto;
     left: -238.5px;
     top: -90px;
     z-index: 1;
     visibility: visible;
     perspective: 601px;
     transform: translate(-3.32px, -2.02px);
}
 .service_imgleft {
     top: -10%;
     left: -550px;
     position: absolute;
     z-index: 3;
     height: 100%;
}
 .seofy_module_services_4 {
     position: relative;
     z-index: 1;
     margin-left: auto;
     margin-right: auto;
}
 .seofy_module_services_4 .services_wrapper {
     padding-top: 100%;
     text-align: center;
}
 .seofy_module_services_4 .services_content {
     position: absolute;
     z-index: 1;
     height: 80%;
     width: 80%;
     top: 10%;
     left: 10%;
     display: flex;
     flex-direction: column;
     justify-content: center;
}
 .seofy_module_services_4 .services_bg {
     position: absolute;
     z-index: 1;
     height: 80%;
     width: 80%;
     top: 10%;
     left: 10%;
}
 .seofy_module_services_4 .services_bg .seofy_hexagon svg {
     transition: all 0.5s;
     filter: drop-shadow(7px 5px 30px rgba(72, 73, 121, 0.15));
}
 .seofy_module_services_4 .services_number {
     position: absolute;
     z-index: -1;
     font-size: 100px;
     font-weight: 900;
     color: #f4f6fd;
     top: 0;
     right: 0;
     line-height: 1;
     transition: all 0.5s;
}
 .seofy_module_services_4 .services_icon_wrapper {
     font-size: 60px;
     line-height: 1;
     margin-bottom: 14px;
}
 .seofy_module_services_4 .services_icon {
     transition: all 0.5s;
}
 .seofy_module_services_4 .services_title {
     font-size: 20px;
     font-weight: 700;
}
 .seofy_module_services_4 .services_figure {
     position: absolute;
     z-index: 1;
     height: 100%;
     width: 100%;
     top: 0;
     left: 0;
     background: #ffffff;
     border-radius: 50%;
     box-shadow: 7px 5px 30px rgba(72, 73, 121, 0.15);
}
 .seofy_module_services_4.hex-type .services_wrapper {
     padding-top: 112%;
}
 .seofy_module_services_4:hover .seofy_hexagon svg {
     fill: #f4f6fd !important;
     filter: none;
}
 .seofy_module_services_4:hover .services_figure {
     background: #f4f6fd;
}
 .seofy_module_circuit_services .services_wrapper {
     position: relative;
     z-index: 1;
     height: 0;
     padding-top: 100%;
}
 .seofy_module_circuit_services .services_wrapper:before {
     content: "";
     position: absolute;
     z-index: -1;
     left: 10%;
     top: 10%;
     width: 80%;
     height: 80%;
     border-radius: 50%;
     border: 1px solid #dee1ed;
}
 .seofy_module_circuit_services .services_item-icon {
     position: absolute;
     z-index: 1;
     width: 18%;
     height: 18%;
     font-size: 40px;
     border-radius: 50%;
     box-shadow: 5px 7px 30px rgba(72, 73, 121, 0.15);
     border: 2px solid #ffffff;
     transition: all 0.3s;
     left: 41%;
     top: 41%;
     cursor: pointer;
}
 .seofy_module_circuit_services .services_item-icon:hover img,.services_item-wrap.active .services_item-icon img {
     filter: brightness(0) invert(1);
}
 .seofy_module_circuit_services .services_item-icon:before, .seofy_module_circuit_services .services_item-icon:after {
     content: "";
     position: absolute;
     z-index: -1;
     width: 99.9%;
     height: 99.9%;
     left: 0;
     top: 0;
     transition: all 0.6s;
     border-radius: 50%;
     background: #ffffff;
}
 .seofy_module_circuit_services .services_item-icon:after {
     opacity: 0;
}
 .seofy_module_circuit_services .services_item-icon .services_icon,.seofy_module_circuit_services .services_item-icon img {
     transform: translate(-50%, -50%);
     left: 50%;
     top: 50%;
     position: absolute;
     z-index: 1;
     transition: all 0.6s;
     line-height: 1;
}
 .seofy_module_circuit_services .services_item-icon img {
     height:40px;
}
 .seofy_module_circuit_services .services_item-icon .services_icon-grad2 {
     opacity: 0;
}
 .seofy_module_circuit_services .services_item-content {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     padding: 25% 30%;
     display: flex;
     flex-direction: column;
     text-align: center;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
     transition: all 0.6s;
}
 .seofy_module_circuit_services .services_item-wrap.active .services_item-icon:before {
     opacity: 0;
}
 .seofy_module_circuit_services .services_item-wrap.active .services_item-icon:after {
     opacity: 1;
}
 .seofy_module_circuit_services .services_item-wrap.active .services_item-icon .services_icon-grad1 {
     opacity: 0;
}
 .seofy_module_circuit_services .services_item-wrap.active .services_item-icon .services_icon-grad2 {
     opacity: 1;
}
 .seofy_module_circuit_services .services_item-wrap.active .services_item-icon + .services_item-content {
     opacity: 1;
     visibility: visible;
}
 .seofy_module_circuit_services .services_subtitle {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--yellow);
    margin-bottom: 10px;
}
 .seofy_module_circuit_services .services_title {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 10px;
}
 .seofy_module_circuit_services.tablet_resp .services_descr {
     display: none;
}
 .seofy_module_circuit_services.tablet_resp .services_title {
     font-size: 22px;
     margin-bottom: 0;
}
 .seofy_module_circuit_services.tablet_resp .services_icon {
     font-size: 75%;
}
 .seofy_module_circuit_services.mobile_resp .services_descr {
     display: none;
}
 .seofy_module_circuit_services.mobile_resp .services_title {
     font-size: 18px;
     line-height: 26px;
     margin-bottom: 0;
}
 .seofy_module_circuit_services.mobile_resp .services_subtitle {
     font-size: 13px;
}
 .seofy_module_circuit_services.mobile_resp .services_icon {
     font-size: 55%;
}
 .wpb_wrapper {
     max-width: 610px;
     margin: 0px auto;
}
 .flaticon-analytics:before {
     content: "\f16c";
}
 .flaticon-price-1:before {
     content: "\f170";
}
 .flaticon-world:before {
     content: "\f171";
}
 .flaticon-rocket:before {
     content: "\f173";
}
 .flaticon-gear-2:before {
     content: "\f174";
}
 .flaticon-tv:before {
     content: "\f175";
}
 .wpb_wrapper .services_icon-grad1:before {
     color: #3224e9;
     -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;
     background-image: -webkit-linear-gradient(0deg, #3224e9 0%, #5ad0ff 100%);
     background-image: -moz-linear-gradient(0deg, #3224e9 0%, #5ad0ff 100%);
}
 .wpb_wrapper .services_icon-grad2:before {
     color: #ffffff;
     -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;
     background-image: -webkit-linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
     background-image: -moz-linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
}
 .wpb_wrapper .services_item-icon:before {
     background-image: -webkit-linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
     background-image: -moz-linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
}
 .wpb_wrapper .services_item-icon:after {
     background-image: -webkit-linear-gradient(0deg, #3224e9 0%, #5ad0ff 100%);
     background-image: -moz-linear-gradient(0deg, #3224e9 0%, #5ad0ff 100%);
}
 .services_img img{
     height: 370px;
     width: 100%;
     display: block;
     object-fit: cover;
     border-radius: 6px;
}
 .service_content h5 {
     margin: 0px;
}
 .service_content {
     padding: 26px 30px 18px;
     z-index: 3;
     transition: all 0.25s ease-in;
     position: absolute;
     bottom: 30px;
     width: calc(100% - 70px);
     left: 50%;
     transform: translateX(-50%);
     margin-bottom: -54px;
     background-color: var(--white);
     text-align: center;
     min-height: 92px;
}
 .servie_box:hover .service_content{
     margin-bottom: -0px;
}
 .servie_box {
     display: block;
     width: 100%;
     position: relative;
     padding-bottom: 30px;
}
 .service_slider .owl-dots {
     padding: 50px 0px 0px;
}
 .service_slider .owl-dots .owl-dot span {
     width: 6px;
     height: 6px;
     background-color: #3224E9 !important;
     opacity: 0.5;
     transition: all 0.4s;
     margin: 0px 5px;
}
 .service_slider .owl-dots .owl-dot.active span {
     opacity: 1;
     width: 27px;
}
 .strategize_sec {
     padding-top: 0px !important;
     padding-right: 80px !important;
     padding-left: 80px !important;
     background-color: var(--white);
     border-radius: 5px !important;
     max-width: 1200px;
     margin: 0px auto;
     z-index: 4;
     position: relative;
     box-shadow: 5px 7px 30px rgba(72, 73, 121, 0.15);
}
 .strategize_box {
     padding: 45px 50px 40px 50px;
     position: relative;
}
 .infobox_icon_container {
     width: 100px;
     height: 100px;
     border-radius: 100px;
     border: 1px solid #dee0ea;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0px auto 20px;
}
 .infobox_icon_container i,.infobox_icon_container img{
     font-size: 40px;
     color: #5ad0ff;
     -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;
     background-image: -webkit-linear-gradient(0deg, #5ad0ff 0%, #3224e9 100%);
     width: 40px;
     max-height: 45px;
     object-fit: cover;
}
 .strategize_box h3 {
     font-size: 20px;
     line-height: 30px;
     font-weight: 700;
     margin-bottom: 7px;
     text-align: center;
}
 .infobox_content {
     font-size: 16px;
     text-align: center;
}
 .strategize_box::before {
     content: '';
     position: absolute;
     width: 57%;
     border-bottom: 1px solid #eaeaec;
     left: 90px;
     top: 85px;
     transform: translateX(100%);
     display: block;
}
 .strategize_sec .row > div:last-child .strategize_box::before{
     display: none;
}
 .infobox_wrapper {
     padding: 45px 50px 40px 50px;
     box-shadow: 7px 5px 30px 0 rgba(72, 73, 121, 0);
     background-color:transparent;
     transition:all 0.4s;
}
 .value_icon i{
     margin: 0px !important;
     font-size: 35px !important;
}
 .infobox_wrapper:hover{
     box-shadow: 7px 5px 30px 0 rgba(72, 73, 121, 0.15);
     background-color: var(--white);
     border-color: transparent;
}
 .infobox_wrapper h3 {
     font-size: 20px;
     line-height: 30px;
     font-weight: 700;
     margin-bottom: 7px;
}
 .value_box {
     background: var(--white);
     padding: 45px;
     box-shadow: 7px 5px 30px rgba(72, 73, 121, 0.15);
     border-radius: 5px;
     text-align: center;
     min-height: 100%;
}
 .value_box h3 {
     font-size: 26px;
     font-weight: 700;
     margin-bottom: 10px;
}
 .value_icon {
     width: 130px;
     height: 130px;
     background: #f4f6fd;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0px auto 30px;
}
 .infobox_wrapper i, .value_icon i,.infobox_wrapper img, .value_icon img {
     font-size: 30px;
     color: #5ad0ff;
     -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;
     background-image: -webkit-linear-gradient(0deg, #5ad0ff 0%, #3224e9 100%);
     margin-bottom: 20px;
     !i;
    !;
     height: 30px !important;
    !i;
    !;
     display: block;
}
 .why_choose_sec{
     background-size: cover;
     background-repeat: no-repeat;
     background-position:center 
}
 .care_value_sec {
    background-image: linear-gradient(to bottom, #F4F6FD calc(100% - 285px), var(--white) 285px);
}
 .industry_row {
     display: grid;
     grid-template-columns: 25% auto;
     align-items: center;
     border-radius: 6px;
     padding: 24px;
     border: 1px solid #DEE2E6;
     grid-gap: 24px 8%;
     background-color: var(--white);
}
 .industry_date {
     text-align: center;
}
 .industry_row:nth-child(odd) {
     background-color: #f3f6fd;
}
 .industry_row h3 {
     margin: 0px;
     font-weight: 700;
     font-size: 26px;
     color: var(--blue);
}
 .industry_sec .container {
     display: grid;
     grid-gap: 24px;
     position: relative;
     z-index: 4;
}
 .industry_sec,.blog-grid-area,.article_sec{
     position: relative;
     overflow: hidden;
}
 .service_grid {
     display: grid;
     grid-template-columns: repeat(3,1fr);
     grid-gap: 60px 30px;
}
 .services-area .container,.blog-grid-area .container,.article_sec .container{
     position: relative;
     z-index: 4;
}
 .contact-mail .row {
     grid-row-gap: 24px;
}
/*-------------------------------------------------------------- # Graph Start css --------------------------------------------------------------*/
 .graph_left h2 {
     font-size: 80px;
     color: var(--blue);
}
 .graph_left h4 {
     font-size: 20px;
     color: var(--black);
     margin: 40px 0px 26px;
}
 .graph_sec {
     display: flex;
     align-items: center;
}
 .graph_sec .container {
     max-width: 1300px;
}
 .circle_box {
     max-width: 220px;
     position: relative;
     margin-left: auto;
}
 .circle_content {
     text-align: center;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
}
 .circle_content h5 {
     margin: 8px 0px 0px;
     font-size: 14px;
}
 .circle_content h3 {
     font-size: 22px;
     margin: 0px;
     color: var(--blue);
}
 .circle_inner {
     position: absolute;
     top: 45px;
     right: 0%;
     width: 100%;
}
 .graph_high {
     text-align: end;
     margin-bottom: 3%;
}
 .graph_line img {
     width: 100%;
     display: block;
     max-width: 100%;
}
 .graph_line img{
     min-height: 843px;
}
 .graph_right {
     position: relative;
}
 .graph_circle:nth-child(3){
    margin-right: 25%;
}
 .graph_circle:nth-child(4) {
    margin-right: 47%;
}
 .circle_box img{
     animation: rotate360 10s linear infinite;
}
 .graph_circle {
     position: relative;
     margin-right: 6%;
}
 .graph_circle::before {
     content: "";
     display: block;
     position: absolute;
     right: 0px;
     width: 100%;
     height: 2px;
     background-color: var(--blue);
     top: 50%;
     transform: translateY(-50%);
}
 @keyframes rotate360 {
     from {
         transform: rotate(0deg);
    }
     to {
         transform: rotate(360deg);
    }
}
 .circle_inner h4 {
     font-size: 18px;
     margin: 0px;
     color: var(--blue);
}
 .graph_low {
     text-align: end;
     margin-top: 20px;
     border-bottom: 1px solid #D9D9D9;
     padding-bottom: 20px;
     position: relative;
}
 .graph_circle::after,.graph_low::after {
     position: absolute;
     top: 50%;
     left: -22px;
     width: 40px;
     height: 40px;
     border: 1px solid #D9D9D9;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(--white);
     transform: translateY(-50%);
     font-family: 'Nunito Sans';
     font-weight: 700;
     color: var(--blue);
}
 .graph_circle:nth-child(2)::after {
     content: "3";
}
 .graph_circle:nth-child(3)::after {
     content: "2";
}
 .graph_circle:nth-child(4)::after {
     content: "1";
}
 .graph_low::after {
     content: "0";
     top: calc(50% + 22px);
}
 .industry_text a {
     padding: 10px 24px;
}
 ul.badges_list {
     padding: 0px;
     list-style: none;
     margin: 0px 0px 30px 0px;
     display: flex;
     flex-flow: wrap;
     grid-gap: 10px;
}
 ul.badges_list li {
     padding: 5px 8px 4px;
     background-color: var(--blue);
     border-radius: 4px;
     color: var(--white);
     font-size: 13px;
     display: flex;
     align-items: center;
}
 .service_box .infobox_wrapper{
     background-color: #F3F6FD;
     min-height: 100%;
}
 .hero_img .items {
     height: 600px;
     display: flex;
     justify-content: end;
     position: relative;
}
 .hero_img .items img{
     height: 100%;
}
 .hero_details a{
     min-width: 202.66px;
}
 ul.tab_list {
     display: flex;
     grid-gap: 20px;
     padding: 0px;
     list-style: none;
     flex-flow: wrap;
     align-items: center;
}
 ul.tab_list li {
     padding: 10px 25px;
     font-size: 14px;
     font-weight: 700;
     text-transform: uppercase;
     border: unset;
     border-radius: 4px;
     background-color: #daeaf6;
     cursor: pointer;
     transition: all 0.3s;
}
 ul.tab_list li.active {
     box-shadow: 4px 3px 25px rgba(72, 73, 121, 0.3);
     background: linear-gradient(120deg,#5ad0ff 0%,#3224e9 100%);
     color: var(--white);
}
 .tab_details > ul {
     padding: 0px;
     list-style: none;
     display: grid;
     grid-gap: 10px;
     margin-top: 20px;
}
 .tab_details > ul > li::before {
     font-family: flaticon_tiva !important;
     font-style: normal;
     font-weight: normal !important;
     font-variant: normal;
     text-transform: none;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     content: "\f14b";
     color: var(--sky);
     position: absolute;
     left: 0px;
     top: 5px;
}
 .tab_details > ul > li {
     position: relative;
     padding-left: 26px;
}
 .pie_sec img {
     max-height: 550px;
}
 .chart_sec {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
}
 .chart_inner,.shadow_box {
     background-color: var(--white);
     box-shadow: -2px 5px 14px rgba(72, 73, 121, 0.1);
     border-radius: 6px;
}
 .chart_data ul {
     padding: 0px;
     margin: 0px;
     display: flex;
     list-style: none;
     flex-flow: wrap;
     grid-gap: 12px 20px;
}
 .chart_data ul li {
     padding-bottom: 6px;
     font-weight: 500;
     font-size: 16px;
     cursor: pointer;
     position: relative;
}
 .chart_data li:before{
     content: "";
     display: block;
     width: 0%;
     height: 2px;
     background-color:var(--sky);
     position: absolute;
     bottom: 0px;
     left: 0px;
     transition: all 0.3s;
}
 .chart_data li.active:before{
     width: 100%;
}
 .chart_data li.active {
     color: var(--sky);
     border-bottom-color: var(--sky);
}
 .char_table a {
     padding: 10px 24px;
     position: absolute;
     top: 50%;
     width: 100%;
     max-width: fit-content;
     display: block;
     transform: translate(-50%,-50%);
     left: 50%;
}
 .char_table {
     position: relative;
}
 .shadow_box {
     display: grid;
     grid-gap: 15px;
}
 .shadow_box h5 {
     font-size: 18px;
}
 .chart_sec .section-heading h2 {
     font-size: 26px;
     margin-top: 0px;
}
 .industry_text p a {
     padding: 0px;
     font-size: 18px;
     font-weight: 500;
     line-height: normal;
}
 .modal-header button.close {
     border: unset !important;
     background-color: transparent;
     outline: unset !important;
     margin-left: auto;
     width: 30px;
}
 .form_grid {
     display: grid;
     grid-template-columns: repeat(2,1fr);
     grid-gap: 10px;
}
 form button.btn {
     padding: 6px 25px !important;
     max-width: fit-content;
     margin: 0px auto !important;
     background-color: var(--yellow);
     border: unset;
     transition: all 0.4s;
     min-width: 150px;
}
 form button.form-control.btn:hover {
     background-color: var(--blue);
}
 .page-banner-area .industry_row {
     padding: 0px !important;
     background-color: transparent !important;
     grid-template-columns: 250px auto;
}
 .page-banner-area .industry_row .industry_text p {
     text-align: left;
}
 ul.btn_grid {
     display: flex;
     flex-flow: wrap;
     grid-gap: 12px;
     padding: 0px;
     margin: 0px;
     list-style: none;
}
 ul.btn_grid li a {
     padding: 8px 12px;
     background-color: var(--yellow);
     border-radius: 6px;
     font-size: 14px;
     color: var(--white);
     display: block;
     text-align: center;
}
 ul.btn_grid li a:hover{
     background-color: var(--blue);
}
 textarea{
     resize: none;
}
 .industry_right .form-check {
     font-size: 15px;
     display: flex;
     align-items: center;
     grid-gap: 10px;
     cursor: pointer;
     margin-bottom: 5px;
}
 .industry_right {
     border: 1px solid var(--bdrclr);
     padding: 20px;
     border-radius: 6px;
}
 .industry_right * {
     font-family: 'Nunito Sans';
}
 .industry_right .form-check input {
     margin-top: 1px;
}
 .industry_right button {
     padding: 9px 12px !important;
     font-size: 15px;
     min-height: fit-content !important;
}
 .sticky_box .recent-post {
     position: sticky;
     top: 0px;
     height: fit-content;
}
 .checkout_sec .row {
     grid-row-gap: 10px;
}
 .checkout_sec table th {
     width: 20%;
}
 .footer_grid {
     display: grid;
     grid-template-columns: 30% max-content max-content 368px;
     justify-content: space-between;
}
 #Map > g{
     cursor: pointer;
}
 .hover_blue{
     opacity: 0;
     transition: opacity 0.4s;
}
 #Map > g path:hover ~ .hover_blue {
     cursor: pointer;
     opacity: 1;
     animation: bounceCustom 1s ease-in-out;
}
 @keyframes bounceCustom {
     0% {
         transform: translateY(0);
    }
     20% {
         transform: translateY(-5px);
    }
     40% {
         transform: translateY(0);
    }
     60% {
         transform: translateY(-2.5px);
    }
     80% {
         transform: translateY(0);
    }
     100% {
         transform: translateY(0);
    }
}
 .recent-post ul.btn_grid li a, .recent-post ul.btn_grid li {
     width: 100%;
}
 .chapter_list {
     padding: 0px;
     display: grid;
     grid-gap: 6px;
     padding-left: 0px;
}
 .chapter_list , .chapter_list ul {
     list-style: none;
}
 .shadow_inner ul {
     padding-left: 20px;
     display: grid;
     grid-gap: 10px;
}
 .shadow_inner ul ul {
     margin: 10px 0px;
}
 .plan-area .container {
     border: unset;
}
 .plan-area .pricing_title {
     display: inline-block;
     font-size: 14px;
     font-weight: 800;
     line-height: 1;
     text-transform: uppercase;
     padding: 6px 10px;
     max-width: fit-content;
     margin: 0px auto;
     border: 1px solid var(--bdrclr);
     border-radius: 4px;
     color: var(--blue);
}
 .pricing-card .pricing-card-heading p *,.pricing-card .pricing-card-heading p *{
     color: #000 !important;
}
 .pricing-card.pricing-plan-card .pricing-card-heading p span{
     font-size:55px;
     font-weight: 700;
     font-family: 'Nunito Sans';
     color: #000;
}
 .pricing-card .faq-details .accordion-button {
     padding: 0px;
}
 .pricing-card .faq-details .accordion-item {
     border-top-width: 0px;
     border-left-width: 0px;
     border-right-width: 0px;
     padding: 15px 0px;
     margin: 0px;
}
 .pricing-card .faq-details .accordion-item:first-child {
     border-top-width: 1px;
}
 .pricing-card .faq-details .accordion-item button {
     font-size: 16px;
     padding-right: 16px;
}
 .pricing-card .faq-details .accordion-body {
     padding: 10px 0px 0px;
}
 .pricing-card .faq-details * {
     text-align: left;
}
 .pricing-card .faq-details .accordion-body h5 {
     font-size: 16px;
}
 .pricing-card .faq-details .accordion-body p {
     margin-bottom: 16px;
     line-height: normal;
}
 .pricing-card .faq-details .accordion-body p:last-child{
     margin-bottom: 0px;
}
 .fixed_btn {
     position: fixed;
     right: -166px;
     top: 50%;
     transform: translateY(-50%) rotate(-90deg);
}
 .fixed_btn a{
     border-bottom-right-radius:0px !important;
     border-bottom-left-radius:0px !important;
}
.tab_sec {
    position: sticky;
    top: 100px;
    z-index: 99;
}
 .sticky_box .recent-inner {
     position: sticky;
     top: 120px;
     height: fit-content;
}
.key_sec td,.key_sec th {
    padding: 10px 24px;
}
.key_sec table ul {
    padding: 0px 0px 0px 20px;
    margin: 0px;
}
.key_sec table *{
    font-size:15px;
}
.mtreport-cont {
    display: flex;
    grid-gap: 20px;
    align-items: center;
}
ul.tab_list li.active a ,ul.tab_list a:active{
    color: var(--white);
}
.tab_details ul.tab_list li {
    padding: 8px 8px;
    font-size: 14px;
    line-height: inherit;
    margin: 0px;
}
.tab_details ul.tab_list {
    grid-gap: 10px;
}
.form_grap_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
}
.product_form {
    background-color: var(--white);
    box-shadow: 0px 0px 30px 4px rgba(0, 0, 0, 0.06);
    padding: 24px 20px;
    border-radius: 10px;
}
.form_box label {
    font-weight: 600;
}
.form_inner > h5 {
    font-size: 20px;
    font-weight: 700;
    margin: 0px;
}
.counter svg {
    width: 14px;
    object-fit: contain;
}
.form_content h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 14px;
}
.content_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    margin: 16px 0px 0px;
}
.counter {
    display: flex;
    grid-gap: 7px;
    align-items: center;
    margin-bottom: 10px;
}
.counter h3 {
    font-size: 32px;
    margin: 0px;
}
.graph_content h5 {
    font-size: 16px;
    margin: 0px 0px 6px;
}
.graph_content p ,.product_form p{
    font-size: 16px;
    line-height: normal;
    margin: 0px;
}
.product_inner table ul li, .product_inner table ul {
    padding: 0px;
}
.filer_blur{
    filter: blur(15px);
}
/*-------------------------------------------------------------- # Header Start css --------------------------------------------------------------*/
 @media(min-width: 1024px){
     .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu {
         position: absolute !important;
         padding: 8px 0 !important;
         z-index: 100;
         min-width: 180px !important;
         visibility: hidden;
         background-color: var(--white) !important;
         opacity: 0;
         box-shadow: 0 0 60px 0 rgb(53 57 69 / 15%);
         transform: rotateX(-90deg);
         transform-origin: 0 0;
         display: block !important;
         transition: all 500ms linear 0ms;
         border-radius: unset !important;
         top: 50px;
    }
     .desktop-nav .navbar .navbar-nav .nav-item:nth-child(2) .dropdown-menu{
         min-width: 375px !important;
    }
     .desktop-nav .navbar .navbar-nav .nav-item:nth-child(3) .dropdown-menu{
         min-width: 340px !important;
    }
     .desktop-nav .navbar .navbar-nav .nav-item:hover .dropdown-menu {
         visibility: visible !important;
         opacity: 1 !important;
         transform: rotateX(0) !important;
         z-index: 999;
    }
     .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a{
         padding: 10px 25px !important;
         display: flex;
         grid-gap: 4px;
         border: unset;
         align-items: center;
         font-weight: 600;
    }
     .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:before{
         content: "";
         height: 2px;
         background-color: var(--sky);
         transition: all 0.3s ease-out 0s;
         display: block;
         width:0px;
    }
     .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover:before{
         width: 12px;
    }
     .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu img {
         height: 85px;
    }
    .product_inner .row > div:nth-child(2) {
        max-width: 243px;
    }
    .product_inner .row > div:nth-child(1) {
        max-width: calc(100% - 243px) !important;
        width: 100% !important;
    }
}
 @media(max-width: 1680px){
     .hero_img .items {
         height: 490px;
    }
}
 @media(max-width: 1500px){
     .heroimg1 {
         left: -49%;
         top: -427px;
    }
     .heroimg2 {
         left: 844.5px;
    }
     .sky_dots {
         left: -127px;
         top: 399px;
    }
     @keyframes sky_dots {
         0% {
             transform: perspective(600px) translate3d(232.023px, -61.5212px, 0px);
        }
         50% {
             transform: perspective(600px) translate3d(139.023px, -23.5212px, 0px);
        }
         100% {
             transform: perspective(600px) translate3d(232.023px, -61.5212px, 0px);
        }
    }
     .orange_dots {
         top: 242px;
         left: 1026px;
    }
     .hero_img {
         padding-right: 2%;
    }
     .pricing-card {
         padding: 30px 24px;
    }
}
 @media(max-width: 1280px){
     .hero_img .items {
         height: 430px;
    }
}
 @media(max-width: 767px){
     .checkout_sec table th {
         width: 35%;
    }
     .fixed_btn li a {
         padding: 6px 10px;
    }
     .faq-content .accordion-button span {
         display: none;
    }
     .faq-content .accordion-item .accordion-body {
         padding: 0px 20px 20px;
    }
}