/*-----------------------------------------------------------------------------------

    Template Name: Randerc - It Solutions & Services HTML Template
    Template URI: http://rockstheme.com
    Description: This is html5 template
    Author: Rocks_theme
    Author URI: http://rockstheme.com
    Version: 1.0

-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------  
     CSS INDEX
    ===================

    1. Theme Default CSS (body, link color, section etc)
    2. Header top Area
    2.1 Header Bottom Area 
    2.2. Sticky Header Area
    2.3. Mobile Menu Area
    3. Intro Area
    4.Welcome Services Area
    5. About area
    6. Services Area
    7. Counter Area
    8. banner area css
    9. projects Area
    10. Quote Area
    11.tab Area
    12. Blog Area
    13.Reviews Area Css
    14. Footer Area
    15. Home 02 area
    16. Brand area
    17. Team Area css
    18. Home 03
    19. Digital Service Area
    20. Breadcumbs Area
    21. Overview Area
    22. FAQ  Area
    23. Blog Sidebar Area
    24. Blog Details
    25.Contact CSS
    26. Services Details area
    27. Project Details page
    28. Login and Register

    
-----------------------------------------------------------------------------------*/
/*----------------------------------------*/
/*  Google Fonts
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700,800,900&display=swap");

/*----------------------------------------*/
/*  1.  Theme default CSS
/*----------------------------------------*/
html,
body {
    height: 100%;
}
.floatleft {
    float: left;
}
.floatright {
    float: right;
}
.alignleft {
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
}
.alignright {
    float: right;
    margin-left: 15px;
    margin-bottom: 15px;
}
.aligncenter {
    display: block;
    margin: 0 auto 15px;
}
a:focus {
    outline: 0px solid;
}
img {
    max-width: 100%;
    height: auto;
}
.fix {
    overflow: hidden;
}
p {
    margin: 0 0 15px;
    color: #5d6471;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
    margin: 0 0 15px;
    color: #151b2c;
    font-weight: 400;
}
h1 {
    font-size: 48px;
    line-height: 52px;
}
h2 {
    font-size: 42px;
    line-height: 46px;
}
h3 {
    font-size: 34px;
    line-height: 40px;
    font-weight: 600;
}
h4 {
    font-size: 26px;
    line-height: 32px;
}
h5 {
    font-size: 20px;
    line-height: 28px;
}
h6 {
    font-size: 16px;
    line-height: 26px;
}
a {
    transition: all 0.3s ease 0s;
    text-decoration: none;
}
a:hover {
    color: #0d808d;
    text-decoration: none;
}
a:active,
a:hover {
    outline: 0 none;
}
a:hover,
a:focus {
    color: #151b2c;
    text-decoration: none;
}
body {
    background: #fff none repeat scroll 0 0;
    color: #7a7788;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    text-align: left;
    overflow-x: hidden;
    line-height: 26px;
}
#scrollUp {
    background: #0d808d none repeat scroll 0 0;
    border-radius: 2px;
    bottom: 15px;
    color: #fff;
    font-size: 24px;
    height: 40px;
    line-height: 37px;
    right: 15px;
    text-align: center;
    transition: all 0.3s ease 0s;
    width: 40px;
}
#scrollUp:hover {
    background: #fff;
    opacity: 1;
    border: 1px solid #0d808d;
    color: #0d808d;
}
.clear {
    clear: both;
}
ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
input,
select,
textarea,
input[type="text"],
input[type="date"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="tel"],
button,
button[type="submit"] {
    /* -moz-appearance: none; */
    -moz-appearance: none; /* Firefox ke liye */
    appearance: none; /* Baaki browsers ke liye */
    box-shadow: none !important;
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
}
/* div#preloader { 
	position: fixed;
	left: 0; 
	top: 0; 
	z-index: 99999;
	width: 100%;
	height: 100%;
	overflow: visible;
	background: #fff url('img/logo/preloader.gif') no-repeat center center;
} */
.navbar-collapse {
    padding-left: 0px;
}
::-moz-selection {
    background: #0d808d;
    text-shadow: none;
}
::selection {
    background: #0d808d;
    text-shadow: none;
}
.bg-color {
    background: #f5f8fb;
}
.bg-color-2 {
    background: #0f2350;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
.area-padding {
    padding: 40px 0px;
}
.area-padding-4 {
    padding-top: 30px;
    padding-bottom: 50px;
}
.area-padding-2 {
    padding: 110px 0px 80px;
}
.area-padding-3 {
    padding: 40px 0px 40px;
}
.section-headline {
    padding-bottom: 40px;
    position: relative;
}
.section-headline h3 {
    font-size: 34px;
    max-width: 500px;
    line-height: 40px;
    margin: 0px auto 15px;
    font-weight: 500;
}
.section-headline.left-headline h3 {
    max-width: 100%;
    margin: 0px 0px 20px;
    text-align: left;
}
.section-headline.right-headline h3 {
    max-width: 100%;
    margin: 0px 0px 20px;
    text-align: left;
}
.white-headline h3 {
    color: #fff;
}
.section-headline p {
    max-width: 560px;
    font-size: 17px;
    margin: 0 auto;
}
.section-headline.left-headline p,
.section-headline.right-headline p {
    max-width: 100%;
    text-align: left;
}
.mar-row {
    margin-top: 50px;
}
.bg-background {
    position: relative;
    background: url(img/background/bgp3.html);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.bg-white {
    background: #fff;
}
.bg-gray {
    background: #fdfcfc;
}
.color {
    color: #2c2020;
}
/*--------------------------------*/
/*  2. Header top Area
/*--------------------------------*/
.topbar-left ul li {
    display: inline-block;
}
.topbar-area {
    background: #0d808d;
}
.topbar-left ul li a {
    color: #fff;
    display: block;
    margin-right: 20px;
    padding: 10px 0;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.6px;
}
.topbar-left ul li a i {
    color: #fff;
    font-size: 16px;
    padding-right: 7px;
}
.topbar-left ul li:last-child a {
    margin-right: 0px;
}
.top-social {
    float: right;
    padding: 10px 0px;
}
.top-social ul li {
    display: inline-block;
}
.top-social ul li a {
    color: #fff;
    margin-left: 5px;
    display: block;
    text-align: center;
    font-size: 13px;
    width: 24px;
    height: 24px;
    line-height: 25px;
    border-radius: 3px;
    background: #0d808d;
}
.top-social ul li a:hover {
    color: #fff;
    opacity: 1;
}
/*----------------------------------------*/
/*  2.1 Header Bottom Area 
/*----------------------------------------*/
.header-one {
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 999;
}
.header-area {
    background: rgba(255, 255, 255, 0.8);
}
.logo {
    display: block;
}
.logo a {
    display: inline-block;
    height: auto;
    padding: 2px 0;
}
.logo img {
    height:45px ;
    margin-top:20px;
}
.main-menu ul.navbar-nav li {
    float: left;
    position: relative;
}
.main-menu ul.navbar-nav li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #444 !important;
    font-size: 16px;
    font-weight: 500;
    padding: 34px 15px;
    text-transform: capitalize;
    position: relative;
}
.main-menu ul.navbar-nav li a:hover {
    color: #0d808d;
}
.main-menu ul.navbar-nav li.active a:focus {
    color: #fff;
}
.main-menu ul.navbar-nav li.active a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #0d808d;
    position: relative;
    z-index: 9999999;
}
.navbar {
    border: medium none;
    margin-bottom: 0;
}
.navbar-default {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.main-menu ul.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background: none;
    color: #fff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    background-color: transparent;
    color: #fff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background: none;
}
.main-menu ul.nav li ul.sub-menu {
    background: #fff;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 115%;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 200px;
    z-index: -99;
    padding: 10px 0px;
    border-top: 2px solid #0d808d;
}
.pages {
    position: relative;
}
.main-menu ul.nav > li > a.pages::after {
    color: #444;
    content: "\e64b";
    font-family: themify;
    font-size: 12px;
    position: absolute;
    right: 0px;
    top: 35px;
}
.navbar.navbar-default {
    float: left;
}
.main-menu ul.nav li ul.sub-menu li {
    padding: 0;
    position: relative;
    width: 100%;
}
.main-menu ul.nav li:hover ul.sub-menu {
    top: 100%;
    opacity: 1;
    z-index: 999;
    visibility: visible;
}
.main-menu ul.nav li ul.sub-menu li a {
    color: #151b2c;
    display: block;
    font-size: 14px;
    padding: 5px 20px;
}
.main-menu ul.nav li ul.sub-menu li a span {
    color: #0d808d;
}
.main-menu ul.nav li:hover ul.sub-menu li a:hover {
    color: #0d808d;
}
.header-right-link {
    float: right;
    width: 200px;
    padding: 30px 0px;
    margin-left: 70px;
    text-align: right;
}
.slice-btn {
    display: inline-block;
    padding: 0px 15px;
}
.slice-btn span {
    font-size: 20px;
    font-weight: 500;
    color: #151b2c;
    cursor: pointer;
    line-height: 28px;
}
.search-inner {
    display: inline-block;
    margin-right: 15px;
}
.search-option {
    background: #f5f5f5;
    bottom: -84px;
    color: #151b2c;
    display: none;
    position: absolute;
    right: 20px;
    width: 300px;
    z-index: 99999;
    padding: 20px;
}
.search-option input {
    background: #fff none repeat scroll 0 0;
    border: medium none;
    color: #151b2c;
    display: block;
    float: left;
    font-size: 14px;
    font-style: italic;
    padding: 8px 10px;
    width: 214px;
    height: 44px;
}
.search-option {
    display: flex;
    justify-content: flex-end; /* Aligns button to the right */
}

.search-option button.button {
    background: #0d808d;
    border: none; /* border: medium none is redundant, so simplified */
    color: #fff;
    font-size: 17px;
    line-height: 35px;
    padding: 5px 15px;
    text-align: center;
}
/* .search-option button.button {
    background: #0d808d;
    border: medium none;
    color: #fff;
    display: inline-block;
    float: right;
    font-size: 17px;
    line-height: 35px;
    padding: 5px 15px;
    text-align: center;
} */
.header-right-link a.main-search {
    color: #151b2c;
    display: inline-block;
    font-size: 18px;
    position: relative;
}
.header-right-link a.main-search:hover {
    color: #0d808d;
}
.s-menu {
    padding: 12px 20px;
    border: 1px solid #0d808d;
    border-radius: 2px;
    background: #0d808d;
    color: #fff;
    transition: 0.4s;
    font-size: 15px;
    font-weight: 500;
}
.s-menu:hover {
    border: 1px solid #0d808d;
    background: transparent;
    color: #0d808d;
    transition: 0.4s;
}
.header-area.stick .header-right-link {
    padding: 25px 0px;
}
/*--------------------------------*/
/* 2.2. Sticky Header Area
/*--------------------------------*/
.header-area.stick {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
    box-shadow: 0px 0px 3px #ddd, -2px -2px 3px #ddd;
    background: #fff;
}
.header-area.stick .logo a {
    display: inline-block;
    height: auto;
    padding: 1px 0;
}
.header-area.stick .main-menu ul.navbar-nav li a {
    padding: 30px 15px;
    color: #151b2c;
}
.header-area.stick .main-menu ul.nav li ul.sub-menu li a {
    color: #151b2c;
    display: block;
    padding: 5px 15px;
}
.header-area.stick .main-menu ul.nav li ul.sub-menu li a:hover {
    color: #0d808d;
}
.header-area.stick .main-menu ul.nav > li > a.pages::after {
    right: -1px;
    top: 30px;
}
/*----------------------------------------*/
/*  2.3. Mobile Menu Area
/*----------------------------------------*/
.mobile-menu-area {
    background: #fff none repeat scroll 0 0;
    padding: 10px 0px;
}
.mean-container .mean-nav {
    float: left;
    width: 100%;
    background: #fff;
}
.mean-container .mean-bar::after {
    content: "";
    font-size: 21px;
    left: 5%;
    position: absolute;
    top: 12px;
    text-transform: uppercase;
    font-weight: 500;
}
.mean-container a.meanmenu-reveal:hover {
    color: #0d808d;
}
.mean-container .mean-nav ul {
    list-style-type: none;
    margin: 20px 0px;
    padding: 0;
    width: 100%;
}
.mean-container .mean-nav ul li a {
    background: #fff none repeat scroll 0 0;
    color: #151b2c;
    display: block;
    float: left;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    padding: 13px 10px;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    width: 90%;
}
.mean-nav ul li.mean-last {
    margin-bottom: 20px;
}
.mean-container .mean-nav ul li a.mean-expand {
    color: #151b2c;
    line-height: 17px;
}
.mean-container .mean-nav ul li {
    width: 99.7%;
}
.mean-container .mean-nav ul li a.mean-expand {
    background: #fff;
}
.mean-container .mean-nav ul li {
    background: #fff;
}
/*----------------------------------------*/
/*  3. Intro Area
/*----------------------------------------*/
.intro-area {
    position: relative;
    overflow: hidden;
}
.display-table {
    width: 100%;
    height: 100%;
    display: table;
}
.display-table-cell {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}
.intro-content {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    margin-top: -110px;
}
.title1 {
    font-weight: 500;
    font-size: 18px;
    color: #0d808d;
    margin-bottom: 20px;
    display: inline-block;
}
.layer-2 p {
    font-size: 19px;
    line-height: 30px;
    max-width: 460px;
}
.layer-1 h2 {
    color: #151b2c;
    font-size: 54px;
    font-weight: 600;
    line-height: 64px;
    max-width: 700px;
    margin-bottom: 20px;
    text-transform: capitalize;
}
.ready-btn {
    border: 1px solid #0d808d;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    margin-top: 20px;
    padding: 10px 10px;
    text-align: center;
    text-transform: capitalize;
    transition: all 0.4s ease 0s;
    z-index: 222;
    background: #0d808d;
    width: 150px;
    border-radius: 2px;
}
.ready-btn:hover {
    color: #fff;
    background: #0d808d;
    border: 1px solid #0d808d;
    text-decoration: none;
    transition: all 0.4s ease 0s;
}
.ready-btn.right-btn {
    margin-left: 15px;
    background: #fff;
    border: 1px solid #0d808d;
    color: #0d808d;
}
.ready-btn.right-btn:hover {
    background: #0d808d;
    border: 1px solid #0d808d;
    color: #fff;
}
.ready-btn.left-btn:hover {
    border: 1px solid #0d808d;
    background: #fff;
    color: #0d808d;
}
/*--------------------------------*/
/* 4.Welcome Services Area
/*--------------------------------*/
.welcome-area {
    position: relative;
}
.all-services {
    margin-top: -30px;
}
.well-services {
    width: 33.33%;
    float: left;
    padding: 40px 30px;
    border-radius: 0px;
    margin-top: 0px;
    text-align: center;
}
.wel-btn {
    font-size: 24px;
    color: #0d808d;
    transition: 0.5s;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 41px;
    font-weight: 700;
    border-radius: 2px;
    background: #fff;
    text-align: center;
    border: 1px solid #fff;
}
.big-icon {
    font-size: 60px;
    display: inline-block;
    margin: 0px 10px 10px;
    line-height: 60px;
    position: relative;
    color: #0d808d;
}
.services-img {
    overflow: hidden;
    position: relative;
    text-align: center;
    padding: 0px;
}
.wel-content h4 {
    display: inline-block;
    font-size: 22px;
    margin-bottom: 0;
    padding: 0 0 20px;
}
.wel-content p {
    font-size: 16px;
}
.well-services:nth-child(2n) {
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
}
.wel-content a {
    position: relative;
    font-weight: 500;
    color: #444;
}
.well-services:hover::after {
    transition: 0.4s;
    opacity: 1;
    top: 54%;
    left: 50%;
}
.wel-content a:hover {
    color: #0d808d;
}
.wel-content a::after {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #0d808d;
    height: 1px;
    width: 0%;
    content: "";
    transition: 0.3s;
}
.wel-content a:hover {
    color: #0d808d;
}
.wel-content a:hover::after {
    transition: 0.3s;
    width: 100%;
}
/*----------------------------------------*/
/*  5. About area
/*----------------------------------------*/
.about-2 {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-attachment: scroll;
}
.about-content {
    padding: 120px 70px 100px 100px;
    overflow: hidden;
}
.about-content p {
    color: #ddd;
    font-size: 16px;
}
.about-company {
    margin-top: 15px;
    display: block;
    overflow: hidden;
}
.single-about {
    width: 50%;
    float: left;
}
.about-text {
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    line-height: 26px;
    position: relative;
    padding-left: 30px;
    display: block;
    margin-top: 10px;
}
.about-text::before {
    position: absolute;
    content: "";
    border: 1px solid #fff;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50px;
}
.about-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 510px;
}
.video-content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: -50px;
    text-align: center;
    z-index: 9;
}
.video-play.vid-zone {
    background: #0d808d;
    border-radius: 100%;
    display: inline-block;
    font-size: 24px;
    height: 70px;
    line-height: 66px;
    width: 70px;
    overflow: hidden;
    transition: 0.4s;
    border: 1px solid #0d808d;
}
.video-play.vid-zone:hover {
    background: #fff;
    transition: 0.4s;
    border: 1px solid #0d808d;
}
.video-play.vid-zone:hover i {
    color: #0d808d;
}
.video-play.vid-zone i {
    color: #fff;
    margin-left: 5px;
}
/*--------------------------------*/
/* 6. Services Area
/*--------------------------------*/
.service-area {
    position: relative;
}
.single-service {
    z-index: 1;
    background: #fff;
    text-align: left;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    margin-bottom: 30px;
    position: relative;
    box-shadow: none;
    text-align: left;
    padding: 40px 40px;
    border: 1px solid rgba(48, 120, 251, 0.4);
}
.single-service::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background: #0d808d;
    opacity: 0;
    transition: 0.4s;
    content: "";
    z-index: -1;
}
.service-icon span {
    font-size: 60px;
    line-height: 60px;
    margin-bottom: 20px;
    display: inline-block;
    color: #0d808d;
}
.service-content h4 {
    display: inline-block;
    font-size: 22px;
    margin-bottom: 0;
    padding: 0 0 15px;
    text-transform: capitalize;
    font-weight: 500;
}
.single-service:hover::after {
    transition: 0.4s;
    opacity: 1;
    height: 100%;
}
.service-content p {
    font-size: 16px;
}
.service-btn {
    font-size: 17px;
    color: #0d808d;
    transition: 0.5s;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 41px;
    font-weight: 700;
    border-radius: 2px;
    background: #f5f8fb;
    text-align: center;
    border: 1px solid #f5f8fb;
    margin-top: 10px;
}
.service-btn:hover {
    color: #fff;
    transition: 0.5s;
    background: #0d808d;
    border: 1px solid #0d808d;
}
.single-service:hover .service-icon span,
.single-service:hover .service-content h4 {
    color: #fff;
}
.single-service:hover .service-content p {
    color: #ddd;
}
/*--------------------------------*/
/* 7. Counter Area
/*--------------------------------*/
.counter-image {
    margin-right: 50px;
    position: relative;
}
.top-img {
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.fun_text {
    padding: 22px 10px;
    text-align: center;
    border-radius: 3px;
    margin-bottom: 15px;
    background: #f5f8fb;
}
.fun_text .counter-icon {
    color: #0d808d;
    display: block;
    font-size: 40px;
    padding-bottom: 10px;
    line-height: 42px;
    font-weight: 100;
}
.fun_text .counter {
    color: #444;
    display: block;
    font-size: 40px;
    padding-bottom: 10px;
    line-height: 44px;
    font-weight: 600;
}
.fun_text > h4 {
    color: #444;
    font-size: 18px;
    text-transform: capitalize;
    margin-bottom: 0px;
}
.counter-image .rotmate-image {
    position: inherit;
    z-index: 2;
    opacity: 0.3;
}
/*----------------------------------------*/
/* 8. banner area css
/*----------------------------------------*/
.banner-area {
    background: rgba(0, 0, 0, 0) url("/assets/img/background/bg2.jpg") no-repeat
        scroll center center / cover;
    position: relative;
}
.banner-area:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(6, 34, 65, 0.85) none repeat scroll 0 0;
    content: "";
}
.add-content h3 {
    color: #fff;
    font-size: 36px;
    line-height: 48px;
    max-width: 750px;
    float: left;
    margin-bottom: 0px;
    margin-top: 18px;
    font-weight: 500;
    text-transform: capitalize;
}
.add-contact {
    float: left;
}
.call-us {
    display: block;
    color: #5d6471;
    font-size: 20px;
    margin-bottom: 30px;
}
.call-us i {
    width: 50px;
    height: 50px;
    display: inline-block;
    border: 1px solid #0d808d;
    background: #0d808d;
    text-align: center;
    line-height: 46px;
    margin-right: 15px;
    border-radius: 3px;
}
.mail-us {
    margin-bottom: 0px;
}
/*--------------------------------*/
/*  9. projects Area
/*--------------------------------*/
.single-awesome-project {
    float: left;
    overflow: hidden;
    width: 100%;
}
.project-all {
    margin-top: -40px;
}
.project-all .single-awesome-project {
    margin-top: 30px;
}
.project-carousel .col-md-4 {
    width: 100%;
}
.awesome-img {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.awesome-img img {
    transform: scale(1.1);
    transition: 0.4s;
}
.single-awesome-project:hover .awesome-img img {
    transform: scale(1);
    transition: 0.4s;
}
.awesome-img > a {
    display: block;
    position: relative;
}
.single-awesome-project:hover .awesome-img > a::after {
    opacity: 1;
}
.single-awesome-project:hover .add-actions {
    opacity: 1;
}
.awesome-img > a::after {
    background: rgba(0, 44, 87, 0.95);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    transition: 0.4s;
}
.add-actions {
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    transition: all 0.4s ease 0s;
    width: 100%;
    z-index: 4;
    top: 0;
    cursor: pointer;
}
.port-icon {
    color: #fff;
    display: inline-block;
    cursor: pointer;
    top: 41%;
    position: relative;
    font-size: 40px;
}
.project-dec {
    display: block;
    padding-top: 20px;
}
.project-dec h4 {
    color: #2a354e;
    font-size: 24px;
    font-weight: 500;
    text-decoration: none;
    text-transform: capitalize;
    margin-bottom: 5px;
    cursor: pointer;
    position: relative;
}
.project-dec h4::after {
    position: absolute;
    content: "\e628";
    right: 40px;
    top: 0px;
    font-family: themify;
    font-size: 18px;
    width: 46px;
    height: 30px;
    border: 1px solid #0d808d;
    background: #0d808d;
    color: #fff;
    text-align: center;
    line-height: 27px;
    opacity: 0;
    transition: 0.5s;
}
.single-awesome-project:hover .project-dec h4::after {
    right: 0px;
    opacity: 1;
    transition: 0.5s;
}
.project-dec p {
    margin-bottom: 0px;
}
.pst-content {
    padding-left: 10px;
}
.single-awesome-project:hover .project-dec h4 {
    color: #0d808d;
}
.project-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev,
.project-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
    color: #fff;
    font-size: 18px;
    margin-top: -20px;
    position: absolute;
    top: 50%;
    text-align: center;
    line-height: 39px;
    opacity: 0;
    border: 1px solid #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
/* .project-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev{
    left: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
} */
.project-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev {
    position: absolute; /* Ensure it's positioned within the container */
    left: 10%;
    transition: 0.4s; /* Standard transition */
}
/* .project-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
    right: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
} */
.project-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
    position: absolute; /* Ensure it's positioned within the container */
    right: 10%;
    transition: 0.4s; /* Standard transition */
}

/* .project-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-next{
    right: 2%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    opacity: 1;
}
.project-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-prev{
    left: 2%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    opacity: 1;
} */
.project-carousel.owl-carousel.owl-theme:hover
    .owl-controls
    .owl-nav
    div.owl-next {
    position: absolute; /* Ensure it's positioned properly */
    right: 2%;
    transition: right 0.4s, opacity 0.4s; /* Standard transition */
    opacity: 1;
}

.project-carousel.owl-carousel.owl-theme:hover
    .owl-controls
    .owl-nav
    div.owl-prev {
    position: absolute; /* Ensure it's positioned properly */
    left: 2%;
    transition: left 0.4s, opacity 0.4s; /* Standard transition */
    opacity: 1;
}

.project-carousel.owl-carousel.owl-theme:hover
    .owl-controls
    .owl-nav
    div.owl-next:hover,
.project-carousel.owl-carousel.owl-theme:hover
    .owl-controls
    .owl-nav
    div.owl-prev:hover {
    color: #fff;
    background: #0d808d;
    border: 1px solid #0d808d;
}
/*----------------------------------------
 10. Quote Area
----------------------------------------*/
.quote-area {
    height: auto;
    width: 100%;
    background: #0d808d;
}
.quote-area #contactForm input {
    border: none;
    height: 54px;
    margin-bottom: 20px;
    border: 1px solid rgba(49, 120, 251, 0.4);
    border-radius: 3px;
    color: #fff;
}
.quote-area #contactForm input.last-part {
    margin-bottom: 0px;
}
.quote-area .contact-form textarea#message {
    height: 127px;
    border-radius: 0;
    border: none;
    margin-bottom: 20px;
    border: 1px solid rgba(49, 120, 251, 0.4);
    border-radius: 3px;
    color: #fff;
    margin-top: 15px;
}
.quote-area .quote-btn {
    background: #0d808d;
    border: 1px solid #0d808d;
    color: #fff;
    padding: 10px 20px;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    width: 100%;
    height: 54px;
    transition: 0.4s;
    border-radius: 3px;
}
.white-headline p {
    color: #ddd;
}
.quote-area .quote-btn:hover {
    background: #fff;
    color: #0d808d;
    transition: 0.4s;
}
.help-block.last-part {
    margin: 0px;
}
/*--------------------------------*/
/* 11.tab Area
/*--------------------------------*/
.tab-area {
    position: relative;
}
.tab-menu {
    display: block;
}
.tab-menu ul.nav {
    margin: 0;
    padding: 0;
}
.tab-menu ul.nav li {
    border: medium none;
    float: left;
    width: 25%;
}
.tab-menu ul.nav li a {
    border-radius: 0;
    color: #2a354e;
    padding: 20px 10px;
    align-items: center;
    text-align: center;
    margin-left: 20px;
    border-radius: 4px;
    border: 1px solid rgba(49, 120, 251, 0.4);
}
.tab-menu .nav-tabs {
    border-bottom: none;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus {
    border-color: #f5f5f5;
    border-image: none;
    border-style: solid;
    border-width: 1px;
    color: #fff !important;
    cursor: default;
    position: relative;
    background: #0d808d;
}
.tab-menu ul.nav li a:hover {
    background: transparent;
}
.tab-menu ul.nav li.active a:hover {
    background: #0d808d;
}
.title-date {
    display: inline-block;
    position: relative;
}
.tab-menu ul.nav li.active .cha-title {
    color: #fff;
}
.cha-title {
    display: inline-block;
    font-size: 22px;
    line-height: 26px;
}
.single-machine {
    position: relative;
}
.tab-menu ul.nav li:first-child a {
    margin-top: 0px;
    margin-left: 0px;
}
.tab-content {
    margin-top: 40px;
}
/* .machine-text {
    margin-top: 20px;
} */
.machine-text h3 {
    font-size: 32px;
    line-height: 40px;
}
.tabe-img img {
    border-radius: 4px;
}
.machine-text li {
    display: block;
    position: relative;
}
.machine-text ul li a {
    font-size: 15px;
    color: #757b82;
    padding: 6px 0px 6px 35px;
    display: block;
}
.machine-text li::after {
    position: absolute;
    left: 0px;
    top: 10px;
    content: "\e64c";
    font-family: themify;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50px;
    font-size: 12px;
    color: #fff;
    background: #0d808d;
}
/*----------------------------------------*/
/*  12. Blog Area
/*----------------------------------------*/
.blog-content {
    padding: 30px;
    position: relative;
    z-index: 1;
    transition: 0.5s;
    overflow: hidden;
    background: #fff;
}
.blog-content a h4 {
    font-size: 21px;
    color: #2a354e;
    line-height: 30px;
    transition: 0.4s;
}
.home-blog .blog-content a h4 {
    margin-bottom: 0px;
}
.admin-type i,
.date-type i,
.comments-type i {
    color: #0d808d;
    margin-right: 5px;
}
.single-blog:hover .blog-content::after {
    transition: 0.4s;
    opacity: 1;
    top: 0px;
}
.blog-content p {
    line-height: 28px;
    transition: 0.4s;
}
.blog-content a h4:hover {
    color: #0d808d;
    transition: 0.4s;
}
.blog-meta span {
    color: #757b82;
    font-size: 14px;
    font-weight: 400;
    padding-right: 10px;
}
.admin-type img {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: 2px solid #0d808d;
    margin-right: 10px;
}
.single-blog {
    position: relative;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}
.blog-meta {
    margin-bottom: 15px;
}
.blog-btn {
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.4s ease 0s;
    border: 1px solid #0d808d;
    background: #0d808d;
    padding: 7px 24px;
    margin-top: 10px;
    border-radius: 3px;
}
.blog-btn:hover {
    color: #0d808d;
    background: transparent;
    transition: all 0.4s ease 0s;
}
/*----------------------------------------
 13.Reviews Area Css
----------------------------------------*/
.reviews-area {
    position: relative;
}
.reviews-area {
    position: relative;
}
.single-testi {
    margin: 0px 0px 30px;
}
.clients-text {
    padding: 30px 30px;
    position: relative;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.testi-img {
    position: relative;
    margin-top: 20px;
    display: block;
    overflow: hidden;
}
.testi-img img {
    max-width: 80px;
    height: auto;
    border-radius: 50px;
    border: 1px solid #ccc;
    float: left;
    margin-right: 20px;
}
.Reviews-content {
    margin-bottom: 15px;
}
.active.center .single-testi .clients-text {
    border: 1px solid #0d808d;
    background: #0d808d;
}
.testi-text h4 {
    font-weight: 600;
    text-transform: capitalize;
    font-size: 20px;
    margin-bottom: 0px;
}
.active.center .single-testi .testi-text p,
.active.center .single-testi .guest-rev,
.active.center .single-testi .testi-text h4 {
    color: #fff;
}
.guest-rev {
    font-weight: 400;
}
.testi-text p {
    margin-bottom: 0px;
}
.client-rating {
    margin-bottom: 15px;
}
.testi-text span a {
    color: #0d808d;
}
.testi-text h5 {
    color: #6a7d91;
    font-size: 20px;
}
.client-rating a {
    display: inline-block;
    color: #fec731;
    font-size: 20px;
    padding: 0px 5px 0px 0px;
}
.testimonial-carousel.owl-carousel.owl-theme
    .owl-controls
    .owl-dots
    div.owl-dot
    > span {
    background: #7e8ca0 none repeat scroll 0 0;
    display: inline-block;
    height: 8px;
    width: 8px;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    transition: 0.4s;
    border-radius: 50%;
}
.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots {
    bottom: -20px;
    display: block;
    left: 50%;
    margin-left: -40px;
    position: absolute;
}
.testimonial-content {
    margin-bottom: 15px;
}
.testimonial-carousel.owl-carousel.owl-theme
    .owl-controls
    .owl-dots
    div.owl-dot {
    display: inline-block;
    margin: 0 3px;
}
.testimonial-carousel.owl-carousel.owl-theme
    .owl-controls
    .owl-dots
    div.owl-dot.active
    span {
    background: #0d808d;
    width: 30px;
    border-radius: 3px;
}
/*----------------------------------------*/
/*  14. Footer Area
/*----------------------------------------*/
.footer-area {
    padding: 40px 0;
    background: #0d808d;
}
.footer-logo {
    margin-bottom: 20px;
}
.footer-content.logo-footer {
    margin-right: 30px;
}
.footer-head p {
    color: #fff;
}
.footer-head h4 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 20px;
    text-transform: capitalize;
    font-weight: 500;
}
.footer-icons ul li {
    display: inline-block;
}
.footer-icons ul li a {
    color: #fff;
    display: block;
    font-size: 16px;
    line-height: 33px;
    text-align: center;
    margin-right: 2px;
    width: 34px;
    height: 34px;
    border: 1px solid #0d808d;
    border-radius: 2px;
    background: #0d808d;
    transition: 0.4s;
}
.footer-tags li a:hover,
.footer-icons ul li a:hover {
    color: #0d808d;
    background: #fff;
    transition: 0.4s;
}
.footer-tags {
    display: block;
    overflow: hidden;
}
.footer-tags li {
    float: left;
}
.footer-tags li a {
    color: #151b2c;
    display: block;
    font-size: 14px;
    font-weight: 500;
    padding: 3px 5px;
}
.footer-icons {
    margin-top:0px;
}
.footer-list {
    width:100%;
    float: left;
}
.footer-contacts p span {
    color: #fff;
    font-weight: 500;
}
.subs-feilds {
    padding-top: 15px;
    border-radius: 3px;
}
.suscribe-input {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}
.suscribe-input input {
    background: transparent;
    border: 1px solid #f5f5f5;
    color: #777;
    font-size: 15px;
    line-height: 24px;
    padding: 6px 15px;
    height: 46px;
    border-radius: 0;
    width: 64%;
    float: left;
    background: #fff;
}
.suscribe-input button {
    background: #0d808d;
    border: none;
    color: #fff;
    font-size: 17px;
    padding: 10px 5px;
    width: 36%;
    font-weight: 400;
    height: 46px;
    border: 1px solid #0d808d;
    transition: 0.4s;
}
.suscribe-input button:hover {
    color: #151b2c;
    background: transparent;
    transition: 0.4s;
}
.footer-list li a {
    color: #ffff;
    padding: 7px 0px 10px 20px;
    display: block;
    position: relative;
}
.footer-list li a:first-child {
    padding-top: 0px;
}
.footer-list li a::after {
    position: absolute;
    content: "\e649";
    top: 1px;
    left: 0;
    font-size: 11px;
    font-family: themify;
}
.footer-list li a:hover,
.footer-list li a:hover::after {
    color: #151b2c;
}
.footer-list li a:hover::after {
    color: #0d808d;
}
.footer-area-bottom {
    background: #f5f8fb none repeat scroll 0 0;
    padding: 12px 0;
}
.copyright-text a:hover {
    text-decoration: underline;
    color: #0d808d;
}
.copyright-text a {
    color: #0d808d;
}
.copyright > p {
    margin-bottom: 0;
    color: #151b2c;
}
.copyright a {
    color: #0d808d;
}
/*----------------------------------------*/
/*  15. Home 02 area
/*----------------------------------------*/
.header-area-2 {
    background: rgba(255, 255, 255, 0.85);
}
.intro-content-2 {
    position: relative;
    z-index: 1;
}
.intro-area .slide-content {
    margin-top: 30px;
}
.intro-area-2 .slider-content,
.intro-area-3 .slider-content {
    position: absolute;
    right: 0;
    text-align: left;
    top: 50%;
    z-index: 3;
    left: 0;
    margin: 0 auto;
    margin-top: -80px;
}
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev,
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
    color: #fff;
    font-size: 20px;
    margin-top: 30px;
    position: absolute;
    top: 50%;
    text-align: center;
    line-height: 44px;
    opacity: 0;
    border: 1px solid #fff;
    width: 44px;
    height: 44px;
    border-radius: 2px;
}
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev {
    position: absolute; /* Ensure proper positioning */
    left: 10%;
    transition: left 0.4s, opacity 0.4s; /* Transition for left and opacity */
}

.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
    position: absolute; /* Ensure proper positioning */
    right: 10%;
    transition: right 0.4s, opacity 0.4s; /* Transition for right and opacity */
}

.intro-carousel.owl-carousel.owl-theme:hover
    .owl-controls
    .owl-nav
    div.owl-next {
    right: 2%;
    opacity: 1; /* Ensures opacity changes when hovered */
}

.intro-carousel.owl-carousel.owl-theme:hover
    .owl-controls
    .owl-nav
    div.owl-prev {
    left: 2%;
    opacity: 1; /* Ensures opacity changes when hovered */
}

/* .intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev{
    left: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
}
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
    right: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
}
.intro-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-next{
    right: 2%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    opacity: 1;
}
.intro-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-prev{
    left: 2%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    opacity: 1;
} */
.intro-carousel.owl-carousel.owl-theme:hover
    .owl-controls
    .owl-nav
    div.owl-next:hover,
.intro-carousel.owl-carousel.owl-theme:hover
    .owl-controls
    .owl-nav
    div.owl-prev:hover {
    color: #fff;
    background: #0d808d;
    border: 1px solid #0d808d;
}
.intro-carousel .owl-item .layer-1 {
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 0.3s;
}
.intro-carousel .owl-item .layer-2 {
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 1s;
}
.intro-carousel .owl-item .layer-3 {
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 1.5s;
}
.intro-carousel .owl-item.active .layer-1,
.intro-carousel .owl-item.active .layer-2,
.intro-carousel .owl-item.active .layer-3 {
    transform: translateY(0);
    opacity: 1;
}
.intro-carousel .owl-item.active .slider-images img {
    transform: scale(1.1);
    transition: 10s;
}
/*--------------------------------*/
/* 16. Brand area
/*--------------------------------*/
.brand-content {
    overflow: hidden;
    text-align: center;
    padding: 5px 12px;
}
.service-area-2 .single-service {
    text-align: center;
}
.service-area-2 .service-icon span {
    font-size: 32px;
    color: #0d808d;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    line-height: 77px;
    border: 1px solid #0d808d;
    transition: 0.4s;
}
.service-area-2 .single-service:hover .service-icon span {
    color: #fff;
    border: 1px solid #0d808d;
    transition: 0.4s;
    background: #0d808d;
}
.section-headline.right-headline {
    padding-bottom: 0px;
}
/*----------------------------------------*/
/*  17. Team Area css
/*----------------------------------------*/
.single-member {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}
.team-hover {
    padding: 15px 0 0px;
    text-align: center;
    transition: all 0.4s ease 0s;
}
.single-member .team-img {
    display: block;
    position: relative;
}
.single-member .team-img a {
    display: block;
}
.team-content {
    position: absolute;
    top: 65%;
    content: "";
    left: 0;
    right: 0;
    transition: 0.5s;
    background: rgba(255, 255, 255, 0.75) none repeat scroll 0 0;
    padding: 20px 20px;
    width: 100%;
    height: 200px;
}
.team-content h4 a {
    color: #444;
}
.team-content p {
    margin-bottom: 0;
    color: #444;
}
.team-content h4 {
    font-size: 16px;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.team-content .social-icon {
    margin-top: 15px;
    opacity: 0;
}
.social-icon li {
    display: inline-block;
    margin: 0px 2px;
}
.social-icon li a {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 1px solid #f5f8fb;
    color: #0d808d;
    border-radius: 1px;
    font-size: 18px;
    text-align: center;
    line-height: 39px;
    background: #f5f8fb;
}
.social-icon li a:hover {
    border: 1px solid #0d808d;
    color: #fff;
    background: #0d808d;
}
.single-member .team-img::after {
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
    width: 100%;
    height: 0%;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    transition: 0.5s;
    box-shadow: 2px 2px 20px #ddd;
}
.single-member:hover .team-img::after {
    height: 100%;
}
.single-member:hover .team-content .social-icon {
    opacity: 1;
}
.single-member:hover .team-content {
    opacity: 1;
    top: 45%;
    transition: 0.5s;
    background: transparent;
}
/*--------------------------------*/
/* 18. Home 03
/*--------------------------------*/
.header-area-3 .main-menu ul.nav > li > a.pages::after {
    color: #fff;
}
.header-area-3.stick .main-menu ul.nav > li > a.pages::after {
    color: #444;
}
.header-area-3 {
    background: rgba(36, 53, 89, 0.5);
}
.intro-area-3 .intro-content-2 {
    position: relative;
    z-index: 1;
}
.intro-area-3 .intro-content-2::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 23, 46, 0.7) none repeat scroll 0 0;
    content: "";
}
.intro-area-3 .slider-content {
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    z-index: 3;
    left: 0;
    margin: 0 auto;
    margin-top: -80px;
}
.intro-area-3 .layer-1 h2 {
    color: #fff;
    margin: 0 auto 20px;
    font-size: 60px;
    max-width: 890px;
    line-height: 70px;
}
.intro-area-3 .layer-2 p {
    color: #ddd;
    margin: 0 auto 20px;
}
.header-area-3 .main-menu ul.navbar-nav li a {
    color: #fff;
}
.header-area-3 .header-right-link a.main-search {
    color: #fff;
}
.header-area-3.stick .logo a.white-logo {
    display: none;
}
.header-area-3 .logo a.black-logo {
    display: none;
}
.header-area-3.stick .logo a.black-logo {
    display: block;
}
.intro-area-3
    .intro-carousel.owl-carousel.owl-theme
    .owl-controls
    .owl-nav
    div.owl-prev,
.intro-area-3
    .intro-carousel.owl-carousel.owl-theme
    .owl-controls
    .owl-nav
    div.owl-next {
    margin-top: -20px;
}
/*----------------------------------------
  19. Digital Service Area
----------------------------------------*/
.digital-services {
    display: block;
    margin-bottom: 30px;
}
.digital-wel {
    text-align: center;
    border: 1px solid rgba(48, 120, 251, 0.4);
    padding: 30px;
}
.digital-icon {
    font-size: 60px;
    margin-bottom: 20px;
    display: block;
    line-height: 60px;
}
.digital-content h4 {
    font-size: 20px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 30px;
    margin-bottom: 0px;
}
/*----------------------------------------*/
/*  20. Breadcumbs Area
/*----------------------------------------*/
.page-area {
    position: relative;
    z-index: 1;
}
.transparent-header {
    background: transparent;
}
.page-area {
    background-image: url
        ('{{asset("public/frontend-assets/img/background/about-bg.jpg")}}');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.page-area::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0 0 0 / 33%);
    z-index: -1;
}
.breadcrumb .section-headline {
    text-align: center;
    padding-bottom: 10px;
}
.page-area .section-headline::after {
    display: none;
}
.breadcrumb {
    background-color: transparent;
    margin-bottom: 0;
    padding: 270px 0px 155px;
}
.breadcrumb h3 {
    color: #fff;
    font-size: 42px;
    font-weight: 500;
    line-height: 50px;
    position: relative;
    margin-bottom: 0px;
}
.breadcrumb .section-headline {
    text-align: center;
}
.breadcrumb ul li {
    display: inline-block;
    color: #f5f5f5;
    padding: 0px 10px 0px 20px;
    position: relative;
    font-size: 16px;
}
.breadcrumb ul li.home-bread {
    padding-left: 0px;
}
.breadcrumb ul li.home-bread::after {
    position: absolute;
    content: "\f105";
    font-family: fontAwesome;
    right: -10px;
    top: 0;
}
.transparent-header .main-menu ul.nav > li > a.pages::after {
    color: #fff;
}
.transparent-header.stick .main-menu ul.nav > li > a.pages::after {
    color: #444;
}
/*--------------------------------*/
/* 21. Overview Area
/*--------------------------------*/
.overview-area {
    position: relative;
}
.overview-wrapper {
    margin-top: 20px;
}
.overview-wrapper h3 {
    font-size: 32px;
    line-height: 40px;
}
.total-count {
    margin-top: 30px;
}
.single-count {
    width: 47%;
    float: left;
    text-align: center;
    padding: 40px 20px;
    border-radius: 3px;
}
.left-one {
    margin-right: 3%;
    background: #1fc157;
    border: 1px solid #1fc157;
}
.right-one {
    margin-left: 3%;
    background: #0a27d5;
    border: 1px solid #0a27d5;
}
.count-num {
    font-size: 60px;
    font-weight: 600;
    color: #fff;
    line-height: 70px;
}
.single-count h4 {
    color: #fff;
}
.overview-image {
    position: relative;
    border-radius: 5px;
}
.overview-image img {
    border-radius: 5px;
}
/*----------------------------------------*/
/*  22. FAQ  Area
/*----------------------------------------*/
.faq-area {
    position: relative;
}
.company-faq {
    display: block;
    overflow: hidden;
}
.left-faq {
    display: block;
    overflow: hidden;
    padding-right: 40px;
}
.right-faq {
    display: block;
    overflow: hidden;
    padding-left: 40px;
}
.single-faq .number {
    color: #fff;
    font-weight: 400;
    margin-right: 10px;
    float: left;
    width: 30px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    background: #0d808d;
    border-radius: 3px;
    text-align: center;
}
.single-faq h4 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
}
.single-faq p {
    padding-left: 50px;
}
span.q-text {
    padding-left: 50px;
    display: inherit;
    font-size: 20px;
    font-weight: 600;
}
.single-faq {
    margin-bottom: 30px;
}
/*----------------------------------------*/
/*  23. Blog Sidebar Area
/*----------------------------------------*/
.blog-page-area .single-blog {
    padding: 5px;
    background: #fff;
}
.blog-page-area .blog-content {
    padding: 10px 15px 20px;
}
.blog-search-option input {
    padding: 5px 15px;
    width: 80%;
    border: none;
    height: 56px;
    background: transparent;
}
.blog-search-option {
    margin-bottom: 30px;
    display: block;
    background: #fff;
    border: 1px solid #0d808d;
    border-radius: 3px;
}
.blog-search-option button {
    background: transparent;
    border: none;
}
.blog-search-option button i {
    line-height: 16px;
    font-size: 18px;
    padding: 0px 10px;
}
.blog-search-option button i:hover {
    color: #0d808d;
}
.left-blog h4 {
    position: relative;
    color: #3d5368;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 5px;
    padding: 15px 0px;
    text-transform: capitalize;
    border-bottom: 1px solid #eee;
}
.left-blog h4::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: -2px;
    width: 60px;
    height: 3px;
    background: #0d808d;
}
.blog-left-content .blog-content::after {
    display: none;
}
.left-side {
    padding-right: 40px;
}
.right-side {
    padding-left: 40px;
}
.left-blog {
    overflow: hidden;
    padding-bottom: 20px;
}
.blog-category li,
.left-blog li {
    display: block;
    position: relative;
}
.left-blog ul li a {
    color: #3d5368;
    display: inline-block;
    font-size: 15px;
    padding: 7px 0px 7px;
    text-transform: capitalize;
}
.blog-category ul {
    margin-top: 12px;
}
.left-blog ul li {
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content:space-between !important; /* Align the span to the right */
}

.left-blog ul li span {
    display: inline-block;
    border: 1px solid #0d808d;
    width: 24px;
    height: 24px;
    text-align: center;
    border-radius: 4px;
    font-size: 13px;
    color: #0d808d;
    line-height: 24px;
    margin: 8px 0px;
}

/* .left-blog ul li span {
    display: inline-block;
    border: 1px solid #0d808d;
    width: 24px;
    height: 24px;
    text-align: center;
    border-radius: 4px;
    font-size: 13px;
    color: #0d808d;
    line-height: 24px;
    float: right;
    margin: 8px 0px;
} */
.pst-content .date-type {
    font-size: 14px;
}
.popular-tag.left-blog ul li a:before {
    display: none;
}
.recent-single-post {
    display: block;
    overflow: hidden;
    padding: 15px 0px;
}
.recent-single-post:last-child {
    border-bottom: none;
}
.post-img {
    display: inline-flex; /* Using inline-flex instead of float */
    align-items: center; /* Center align if needed */
    padding-right: 10px; /* Same padding as before */
}

/* .post-img {
    display: inline-block;
    float: left;
    padding-right:10px;
} */
.left-blog .post-img a {
    display: block;
    border: 1px solid #fafafa;
}
.left-blog .post-img a img {
    border-radius: 4px;
}
.pst-content {
    padding-left: 100px;
}
.pst-content p {
    margin-bottom: 0px;
}
.pst-content p a:hover,
.left-blog ul li a:hover {
    color: #0d808d;
}
.blog-page-area .blog-content {
    background: #f9f9f9;
}
.pst-content p a {
    color: #3d5368;
    font-size: 15px;
}
.blog-tags {
    padding: 1px 0;
}
.recent-single-post img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 2px;
}
.left-blog li:last-child {
    border-bottom: 0;
}
.popular-tag.left-side-tags.left-blog ul {
    padding: 0px;
}
.left-tags .left-side-tags ul li {
    border-bottom: 0;
    display: inline-block;
    margin: 5px 3px;
}
.left-tags .left-side-tags ul li a {
    padding: 5px 10px;
    width: auto;
    background: #f4f5f4;
    color: #3d5368;
    border-radius: 3px;
    font-weight: 400;
    font-size: 14px;
}
.left-tags .left-side-tags ul li a:hover {
    color: #fff;
    background: #0d808d;
}
.left-side-tags h4 {
    margin-bottom: 15px;
}
.blog-side-area .blog-right-column {
    margin-top: -30px;
}
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 10px 490px 0px;
    border-radius: 4px;
}
.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #3d5368;
    background-color: #f4f5f5;
    border: none;
    margin-left: -1px;
    border-radius: 2px;
}
.pagination > li {
    display: inline-block;
    margin: 0px 3px 0px 0px;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 3;
    color: #fff;
    background-color: #0d808d;
    cursor: default;
    border-radius: 2px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    z-index: 2;
    color: #fff;
    background-color: #0d808d;
    border-color: #0d808d;
    border-radius: 2px;
}
.adver-img {
    margin-top: 20px;
}
/*----------------------------------------*/
/*  24. Blog Details
/*----------------------------------------*/
.comments-heading h3,
h3.comment-reply-title {
    border-bottom: 1px solid #ddd;
    color: #3d5368;
    font-size: 18px;
    margin: 0 0 40px;
    padding: 0 0 5px;
    text-transform: capitalize;
}
.comments-list ul li {
    margin-bottom: 25px;
}
.comments-list-img {
    float: left;
    margin-right: 15px;
    border-radius: 50%;
}
.comments-list-img img {
    border-radius: 3px;
    border: 1px solid #ddd;
}
.comments-content-wrap {
    color: #3d5368;
    font-size: 14px;
    margin: 0 0 15px 90px;
    padding: 10px;
    position: relative;
}
blockquote {
    padding: 20px 40px 40px 80px;
    margin: 0 0 20px;
    font-size: 15px;
    border-left: none;
    font-style: italic;
    position: relative;
    background: #f5f5f5;
}
blockquote::before {
    position: absolute;
    top: 20px;
    left: 30px;
    content: "\f10d ";
    font-family: fontawesome;
    font-size: 34px;
    color: #3d5368;
}
blockquote p {
    font-size: 16px !important;
    line-height: 28px;
}
.author-avatar {
    display: inline-flex; /* Using inline-flex instead of float */
    justify-content: center; /* Optional: Center content horizontally if needed */
    width: 10%; /* Set the width as before */
}

/* .author-avatar {
    display: inline-block;
    float: left;
    width: 10%;
} */
.comments-content-wrap span b {
    margin-right: 5px;
}
/* .comments-content-wrap span a:hover{}
span.post-time{margin-right:5px}
.comments-content-wrap p {
    color: #3d5368;
    margin-top: 10px;
} */
.comments-content-wrap span a:hover {
    color: #0d808d; /* Example hover effect */
}

span.post-time {
    margin-right: 5px;
}

.comments-content-wrap p {
    color: #3d5368;
    margin-top: 10px;
}

.threaded-comments {
    margin-left: 50px;
}
.comment-respond {
    margin-top: 20px;
}
span.email-notes {
    color: #3d5368;
    display: block;
    font-size: 12px;
    margin-bottom: 10px;
}
.comment-respond p {
    color: #3d5368;
    margin-bottom: 5px;
}
.comment-respond input[type="text"],
.comment-respond input[type="email"] {
    border: 1px solid #ccc;
    border-radius: 0;
    height: 46px;
    margin-bottom: 15px;
    padding: 0 0 0 10px;
    width: 100%;
    background: transparent;
}
.comment-respond textarea#message-box {
    border: 1px solid #ccc;
    border-radius: 0;
    max-width: 100%;
    padding: 10px;
    height: 200px;
    width: 100%;
    background: transparent;
}
.comments-content-wrap span a {
    color: #0d808d;
}
.comments-content-wrap span a:hover {
    color: #0d808d;
}
.comment-respond .add-btn.contact-btn {
    background: #0d808d;
    color: #fff;
    display: block;
    font-size: 16px;
    margin-top: 5px;
    padding: 10px 20px;
    transition: 0.4s;
    border-radius: 2px;
    width: auto !important;
    margin-top: 20px;
    border: 1px solid #0d808d;
    text-transform: capitalize;
    font-weight: 600;
}
.comment-respond .add-btn.contact-btn:hover {
    background: #fff;
    color: #0d808d;
    border: 1px solid #0d808d;
}
.blog-page-details .left-blog-page {
    margin-top: 0px;
    margin-bottom: 30px;
}
.single-post-comments,
.related-post {
    margin-top: 30px;
}
.left-head-blog .pst-content p {
    margin-bottom: 5px;
}
.blog-details .blog-content h4 {
    font-size: 22px;
    line-height: 34px;
    margin-top: 10px;
}
.blog-details .blog-content h5 {
    font-size: 20px;
}
.blog-details .blog-content {
    border: none;
    padding: 30px 0px 30px;
}
.blog-details .blog-images img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
}
.blog-details .img-blog {
    margin: 15px 0px 30px;
    max-height: 350px;
    overflow: hidden;
    width: 50%;
    float: left;
}
.left-blog-img img {
    padding-right: 15px;
}
.right-blog-img img {
    padding-left: 15px;
}
.related-post-list .recent-single-post {
    width: 50%;
    float: left;
    padding: 0px 20px 0px 0px;
}
.related-post-list .recent-single-post:last-child {
    padding: 0px 0px 0px 20px;
}
/*----------------------------------------*/
/* 25.Contact CSS
/*----------------------------------------*/
.contact-area {
    position: relative;
}
.map-area {
    margin-right: 30px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="phone"],
.contact-form input[type="file"] {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #ccc;
    border-radius: 0;
    color: #3d5368;
    height: 55px;
    margin-bottom: 20px;
    /* margin-top: 10px; */
    padding-left: 20px;
    width: 100%;
}
.contact-form textarea#message {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #ccc;
    border-radius: 0;
    color: #3d5368;
    height: 160px;
    padding: 20px;
    width: 100%;
}
.contact-form button[type="submit"] {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #0d808d;
    color: #fff;
    display: block;
    font-size: 18px;
    margin-top: 16px;
    padding: 13px 24px;
    border-radius: 2px;
    transition: all 0.3s ease 0s;
    background: #0d808d;
}
.contact-form button[type="submit"]:hover {
    color: #0d808d;
    border: 1px solid #0d808d;
    background: #fff;
    transition: all 0.3s ease 0s;
}
.single-icon i {
    font-size: 64px;
    line-height: 77px;
    margin-bottom: 20px;
    color: #0d808d;
    display: block;
}
.single-icon p {
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 0px;
}
.contact-icon {
    margin-bottom: 50px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    padding: 22px 22px 22px;
    position: relative;
    z-index: 1;
}
.contact-icon::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 80%;
    height: 2px;
    background: #0d808d;
    right: 0;
    margin: auto;
}
/*----------------------------------------*/
/* 26. Services Details area
/*----------------------------------------*/
.page-head-left {
    margin-right: 40px;
}
.single-page-head {
    margin-bottom: 30px;
}
.single-services-page p {
    color: #666;
    margin-bottom: 0px;
}
.left-contact h4 {
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 30px;
}
.left-menu li {
    display: block;
    margin: 2px 0px;
}
.build-img .page-img {
    padding-bottom: 0;
}
.left-menu ul li.active a {
    color: #0d808d;
    position: relative;
}
.left-menu ul li a:hover {
    color: #0d808d;
}
.left-menu ul li a {
    color: #333;
    display: block;
    font-size: 16px;
    padding: 13px 20px;
    position: relative;
    text-decoration: none;
    text-transform: capitalize;
    background: #f4f4f4;
}
.left-menu ul li a:hover::after,
.left-menu ul li.active a::after {
    position: absolute;
    right: 0;
    top: 0px;
    background: #0d808d;
    content: "";
    width: 3px;
    height: 100%;
}
.down-btn i {
    font-size: 24px;
    float: right;
}
.down-btn {
    border: 1px solid #f4f4f4;
    color: #444;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    margin-bottom: 15px;
    padding: 12px 15px;
    text-align: left;
    transition: all 0.4s ease 0s;
    z-index: 222;
    background: #fff;
    width: 100%;
    position: relative;
    border-radius: 2px;
}
.down-btn.apli {
    margin-bottom: 0px;
}
.down-btn:hover {
    color: #fff;
    background: #0d808d;
    border: 1px solid #0d808d;
}
.single-page-head .clients-testi {
    padding: 40px 30px;
    background: #f4f4f4;
}
.single-page-head .review-text {
    margin-top: 20px;
}
.clients-testi .review-text a,
.clients-testi .guest-rev {
    color: #444;
}
.clients-testi .single-review {
    border: none;
}
.review-text h4 {
    font-size: 16px;
    margin-bottom: 0px;
}
.single-page-head .review-text p {
    color: #333;
    font-size: 15px;
    margin-bottom: 10px;
}
.single-page-head .review-img {
    margin-top: 0px;
}
.single-page-head .review-img img {
    border-radius: 50%;
    width: 80px;
    height: auto;
}
.page-content h3 {
    font-weight: 600;
    padding: 15px 0 0;
}
.mar-well {
    margin-bottom: 40px;
}
.single-page {
    overflow: hidden;
}
.single-well h3 {
    margin-bottom: 15px;
}
.single-well.last-part p {
    margin-bottom: 0px;
}
.service-list li {
    display: block;
    position: relative;
    padding-left: 30px;
    color: #2a354e;
}
.service-list li::before {
    position: absolute;
    left: 0;
    content: "\f00c";
    font-family: fontawesome;
    top: 0;
    color: #0d808d;
}
.single-page-head .service-btn {
    width: 100%;
    margin: 20px 0px 0px 0px;
}
.marker-list li {
    color: #2a354e;
    padding-left: 35px;
    margin: 10px 0px;
    position: relative;
}
.marker-list li::after {
    text-align: center;
    position: absolute;
    content: "\e64c";
    left: 0;
    top: 3px;
    font-family: themify;
    background: #0d808d;
    width: 22px;
    height: 22px;
    font-size: 10px;
    color: #fff;
    border-radius: 50%;
    line-height: 22px;
}
.single-services-page .marker-list li {
    color: #2a354e;
}
.blog-details .blog-category {
    margin-bottom: 15px;
}
/*----------------------------------------*/
/* 27. Project Details page
/*----------------------------------------*/
.project-page-area .single-awesome-project {
    margin-bottom: 30px;
}
.hire-btn {
    background: #0d808d;
    padding: 10px 20px;
    margin-top: 10px;
    display: inline-block;
    color: #fff;
    font-size: 18px;
    transition: 0.4s;
    border-radius: 3px;
    border: 1px solid #0d808d;
}
.hire-btn:hover {
    transition: 0.4s;
    background: #fff;
    color: #0d808d;
}
.project-page-area .project-menu li a {
    color: #2a354e;
}
.project-2-column .project-single {
    float: left;
    width: 50%;
}
.project-4-column .project-single {
    float: left;
    width: 25%;
}
.project-new h4 {
    color: #444;
    font-size: 24px;
    line-height: 34px;
}
.project-details h3 {
    font-size: 30px;
}
.project-carousel-2.owl-carousel.owl-theme .owl-controls .owl-nav div {
    background: #0d808d;
    border: 1px solid #0d808d;
    border-radius: 0;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    height: 40px;
    line-height: 38px;
    position: relative;
    text-align: center;
    transition: all 0.5s ease 0s;
    width: 40px;
    border-radius: 50%;
}
.project-carousel-2.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev {
    top: 50%;
    position: absolute;
    left: 3%;
    margin-top: -30px;
}
.project-carousel-2.owl-carousel.owl-theme
    .owl-controls
    .owl-nav
    div.owl-prev:hover,
.project-carousel-2.owl-carousel.owl-theme
    .owl-controls
    .owl-nav
    div.owl-next:hover {
    background: #fff;
    border: 1px solid #0d808d;
    color: #0d808d;
    transition: all 0.5s ease 0s;
}
.project-carousel-2.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
    margin-top: -30px;
    position: absolute;
    right: 3%;
    top: 50%;
}
.project-history {
    background: #0d808d;
    padding: 30px;
    margin-bottom: 30px;
}
.project-details h4 {
    font-size: 22px;
}
.project-name ul li {
    color: #fff;
    font-size: 15px;
    line-height: 32px;
    margin: 10px 0px;
}
.project-name span {
    padding-right: 15px;
    min-width: 110px;
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
}
.project-inner {
    margin-bottom: 40px;
}
.project-details p {
    font-size: 15px;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
}
.new-project {
    background: #f4f4f4;
    padding: 30px 30px 40px;
    margin-bottom: 30px;
}
/*----------------------------------------
28. Login And Register page
----------------------------------------*/
.login-page {
    display: block;
    overflow: hidden;
    border: 1px solid #f9f9f9;
}
.login-area .slide-1 {
    background: #fff;
    height: 100vh;
}
.login-form {
    background: #fff;
    padding: 40px;
    overflow: hidden;
}
.login-image {
    width: 50%;
    float: left;
}
.login-image,
.log-inner img {
    height: 100%;
    max-height: 535px;
    object-fit: cover;
}
.login-area form#contactForm {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
}
.login-form .form-control {
    display: block;
    width: 100%;
    height: 44px;
    padding: 7px 15px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s,
        -webkit-box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    min-height: 36px;
    margin-bottom: 20px;
}
.login-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 40px;
}
.slide-btn.login-btn {
    border: 1px solid #0d808d;
    display: inline-block;
    font-weight: 600;
    margin: 0px;
    padding: 5px 10px;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.4s ease 0s;
    width: 100%;
    border-radius: 0px;
    background: #0d808d;
    color: #fff;
    height: 46px;
    font-size: 16px;
}
.slide-btn.login-btn:hover {
    border: 1px solid #0d808d;
    background: #fff;
    color: #0d808d;
    transition: all 0.4s ease 0s;
}
.flex-box {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}
.check-group {
    position: relative;
    margin: 10px 0px 20px;
}
.check-box {
    color: #444;
    font-weight: 300;
    letter-spacing: 0;
    margin-bottom: 0;
    outline: none;
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 0;
}
.check-box-input {
    position: absolute;
    left: 0px;
    top: 0px;
    min-height: 25px;
    height: 26px;
    margin: 0 !important;
    padding: 0 !important;
}
.remember-text {
    color: #444;
    font-weight: 300;
    font-size: 12px;
    left: 25px;
    position: absolute;
    top: 2px;
}
.text-muted {
    font-size: 12px;
    float: right;
    margin-top: 2px;
}
.separetor {
    margin-top: 20px;
}
.separetor span {
    background: #fff;
    position: relative;
    top: 10px;
    padding: 10px;
}
.sign-icon {
    display: block;
    overflow: hidden;
    margin-top: 40px;
    text-align: center;
}
.sign-icon ul li {
    display: inline-block;
    margin: 0px 5px;
}
.sign-icon ul li a {
    color: #fff;
    display: block;
    text-transform: uppercase;
    font-size: 15px;
    padding: 0px 20px;
    font-weight: 600;
}
.sign-icon ul li a.facebook {
    color: #3b5998;
}
.sign-icon ul li a.twitter {
    color: #00aced;
}
.sign-icon ul li a.google {
    color: #c32f10;
}
.acc-not {
    font-size: 13px;
    margin-top: 20px;
    font-weight: 600;
}
.signup-form .check-group {
    position: relative;
    margin: 0px 0px 20px;
}
.signup-page .login-image,
.signup-page .log-inner img {
    height: 100%;
    max-height: 588px;
    object-fit: cover;
}
/*--------------------------------*/
/* Animation
/*--------------------------------*/
.rotateme {
    animation-name: rotateme;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-webkit-keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    50% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    100% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}

@keyframes bounce {
    0% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    50% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    100% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}

@-webkit-keyframes zoom-inout {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes zoom-inout {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
/* ankit start css */
.clients-egt {
    border-radius: 12px;
}
.clients-info {
    background-color: #c4d7ff8f;
    padding: 30px;
}
.clients-image-egt {
    background-color: #bcccdc;
}
.row-egt {
    padding-right: 30px;
}
.row-egt-1 {
    padding-left: 30px;
}
.clients-info-o {
    padding: 25px;
    background-color: #c4d7ff8f;
}
.bg-color-ceo {
    background: "linear-gradient(45deg, red, pink, black, green)";
}
.ceo-info-egt {
    background-color: #fff;
    border-radius: 12px;
}
.author-info {
    display: flex;
}
.text-testimonial {
    font-weight: 610;
    margin-bottom: 0px;
}
.content-tesitmonial {
    margin-left: 20px;
}
.padding-test-egt {
    padding: 40px 10px;
}
.bg-egt {
    background:#1a7981ad;
}
.testimonial-egt {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ceo-info-egt {
    display: flex;
    align-items: center;
}
.quote-area {
    position: relative;
    background-image: url('{{ asset("frontend-assets/img/about/bg-footer.png") }}');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 50px 0;
    color: white;
}

.quote-area .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(21 44 46 / 36%); /* #0d808d with 80% opacity */
    z-index: 1;
}

.quote-area .container {
    position: relative;
    z-index: 2;
}
.our-partner-egt {
    margin-top: 30px;
    margin-bottom: 30px;
}
.about-border-right {
    border-right: 3px solid #1b6870;
}
.about-details {
    color: #0d808d;
    font-size: 20px;
    font-weight: 600;
}
.about-us-content-egt {
    margin-left: 50px;
}
.about-egt-who-we-serve {
    box-shadow: 0 25px 100px 0 rgba(0, 0, 0, 0.1490196078);
    z-index: 2;
    background: #fff;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    margin-bottom: 50px;
    margin-left: -95px;
    margin-top: 35px;
}
.about-egt-who-we-serve-right {
    box-shadow: 0 25px 100px 0 rgba(0, 0, 0, 0.1490196078);
    z-index: 2;
    background: #fff;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    margin-bottom: 50px;
    margin-right: -95px;
    margin-top: 35px;
}
.bg-color-career {
    background: #7d989b17;
}
.main-conatc-details {
}
.client h3 {
    color: white;
}
.contactlink h5 {
    margin-bottom: 30px;
}
.contactlink .button {
    padding: 12px 20px;
    border: 1px solid #0d808d;
    border-radius: 2px;
    background: #0d808d;
    color: #fff;
    transition: 0.4s;
    font-size: 15px;
    font-weight: 500;
}
.contactlink .button:hover {
    background-color: #0d808d;
    border-color: 1px solid #0d808d;
    color: #fff;
}
.parathree-img img {
    padding-left: 40px;
    padding-bottom: 30px;
}
.game-type {
    margin-top: -30px;
}
.game-typearea {
    padding: 30px 0px 20px;
    /*background-color: #cad2d5;*/
}
.single-gametype {
    z-index: 1;
    background: #fff;
    text-align:left;
    position:relative;
    overflow: hidden;
    border-radius: 2px;
    margin-bottom: 30px;
    position: relative;
    box-shadow: none;
    text-align: left;
    padding: 40px 40px;
    border: 1px solid rgba(48, 120, 251, 0.4);
    height:380px !important;
}
.single-gametype::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background: #0d808d;
    opacity: 0;
    transition: 0.4s;
    content: "";
    z-index: -1;
}
.single-gametype span {
    font-size: 60px;
    line-height: 60px;
    margin-bottom: 20px;
    display: inline-block;
    color: #0d808d;
}
.single-gametype h4 {
    display:inline-block;
    font-size:22px;
    margin-bottom:0;
    padding: 0 0 10px;
    /* text-transform: capitalize; */
    font-weight:500;
}
.single-gametype p {
    font-size:16px;
}
.game-area {
    position:relative;
}
.game-area h3 {
    font-weight:500;
    margin-bottom:40px;
}

.game-section h2 {
    margin-bottom:30px;
    font-weight:500;
}
.techlogo-content {
    text-align: center; /* Center-align logos */
}

.techlogo-items {
    display: flex; /* Arrange logos in a single row */
    align-items: center; /* Center logos vertically */
    animation: slide 90s linear infinite; /* Shortened time for faster sliding */
}

.single-techlogo-item {
    margin: 0px 15px; /* Spacing between logos */
}

.single-techlogo-item img {
    width: 60px;
    height: 60px;
    margin-left: 40px;
    margin-right: 140px;
}

/* Keyframes for sliding effect */
@keyframes slide {
    0% {
        transform: translateX(0); /* Start from the initial position */
    }
    100% {
        transform: translateX(
            -100%
        ); /* Move the entire container to the left */
    }
}

.techlogo-items {
    display: flex; /* Arrange logos in a single row */
    flex-wrap: nowrap; /* Ensure the logos don't wrap onto the next line */
}

.techlogo-items {
    display: flex;
    flex-wrap: nowrap;
    width: calc(
        100% * 5
    ); /* Make sure the width accommodates all logos and more */
}
.techtype-area {
    position: relative;
    margin-left: 70px;
    margin-right: 70px;
    background-color: #dae7ed8a;
    border-radius: 30px;
    margin-bottom: 30px;
    height: 300px;
}
.techtype-wrapper {
    margin-top: 60px;
    margin-left: -60px;
    padding-right: 130px;
}
.techtype-wrapper h3 {
    font-size: 32px;
    line-height: 40px;
}
.techtype-wrapper p {
    font-weight: 500;
}
.techtype-image {
    position: relative;
    border-radius: 5px;
}
.techtype-image img {
    border-radius: 5px;
    width: 410px;
    height: 200px;
    margin-top: 50px;
    margin-left: 50px;
    object-fit: cover;
}
.sub-head {
    margin-top: 50px;
}
.card {
    margin: 20px 0px 0px 20px;
    border-radius: 10px; /* Adds rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow around the card */
    overflow: hidden; /* Ensures that the content respects the rounded corners */
    background:#fff;
}
.card-content {
    background-color: white;
    padding: 10px;
    text-align: center;
}
.card h4 {
    font-weight: 600;
}

.card-img-top {
    height: 280px;
    object-fit: cover;
    cursor: pointer; /* Change cursor to indicate image is clickable */
}

.section-heading {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 30px;
}
.card p {
    margin-top: -9px;
    font-size: medium;
    font-weight: 500;
}
.webportfolio {
    margin-bottom: 20px;
    margin-top: 0;
}
.section-heading {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 10px;
}

.image-container {
    position: relative;
    overflow: hidden; /* Ensures the image stays within the container */
    margin-left: 20px;
    margin-right: 20px;
}

.image-container img {
    width: 100%; /* Ensure the image takes the full width of the container */
    height: 500px;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    transition: transform 1s ease; /* Slows down the zoom effect */
    /* Optional: border-radius: 10px; to round image corners */
}

.image-container:hover img {
    transform: scale(1.1); /* Zooms the image on hover */
}

.image1-container1 {
    position: relative;
    overflow: hidden; /* Ensures the image stays within the container */
    margin-left: 20px;
    margin-right: 20px;
}

.image1-container1 img {
    width: 100%; /* Ensure the image takes the full width of the container */
    height: 350px;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    transition: transform 1s ease; /* Slows down the zoom effect */
    /* Optional: border-radius: 10px; to round image corners */
}

.image1-container1:hover img {
    transform: scale(1.1); /* Zooms the image on hover */
}
.image2-container2 {
    position: relative;
    overflow: hidden; /* Ensures the image stays within the container */
    margin-left: 20px;
    margin-right: 20px;
}

.image2-container2 img {
    width: 100%; /* Ensure the image takes the full width of the container */
    height: 180px;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    transition: transform 1s ease; /* Slows down the zoom effect */
    /* Optional: border-radius: 10px; to round image corners */
}

.image2-container2:hover img {
    transform: scale(1.1); /* Zooms the image on hover */
}
html {
    scroll-behavior: smooth; /* Enable smooth scrolling */
}
#more-btn {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 8px 22px;
    border: 1px solid #0d808d;
    border-radius: 2px;
    background: #0d808d;
    color: #fff;
    transition: 0.4s;
    font-size: 18px;
    font-weight: 500;
}
.chooseuspara img {
    width:100%;
}
.topbar-left ul {
    margin-top: -20px;
}
.blogimg img {
    height: 415px;
    width: 554px;
    padding-left: 34px;
    border-radius: 10px;
}
.aboutimg img {
    height: 455px;
    width: 554px;
    padding-left: 34px;
    border-radius: 10px;
}
.flag img {
    height: 80px;
    width: 80px;
}
.contactusbg {
    background-color: #f5f5f59c;
    margin-left: 30px;
    margin-right: 30px;
    border-radius: 10px;
    margin-top: 40px;
}
.contactusform {
    margin-right: 80px;
}
.contact-left {
    padding-left:40px; /* Add some padding on the right side */
}

.contact-right {
    padding-left: 30px; /* Add some padding on the left side */
}
#blog1-btn {
    padding: 8px 22px;
    border: 1px solid #0d808d;
    border-radius: 2px;
    background: #0d808d;
    color: #fff;
    transition: 0.4s;
    font-size: 18px;
    font-weight: 500;
}
.seoimg img {
    width: 460px;
    height: 280px;
    margin-left: 50px;
}
.seoimgcontent {
    margin-left: 40px;
}
.seocontent {
    padding-right: 50px;
}
.seoparathree img {
    height: 370px;
    width: 600px;
}
#get-btn {
    margin-top: 3px;
    /* margin-bottom: 26px; */
    padding: 6px 14px;
    border: 1px solid #0d808d;
    /* border-radius: 2px; */
    background: #0d808d;
    color: #fff;
    transition: 0.4s;
    font-size: 14px;
    font-weight: 500;
}
.seoservice img {
    margin-left: 120px;
}
.seoservice-inner {
    text-align: center;
    align-items: center;
}
.seoservice-inner h4 {
    display: inline-block;
    font-size: 22px;
    margin-bottom: 0;
    padding: 0 0 15px;
    text-transform: capitalize;
    font-weight: 600;
    margin-top: 20px;
}
.seoservice-inner h5 {
    font-weight: 700;
}
.seoservice-inner p {
    font-weight: 500;
}
.seoservicetype {
    height: 320px;
    border-radius: 10px;
}
.custom-section {
    padding: 30px 40px 40px 40px;
    background-color: #f9f9f9;
    align-items: center;
    text-align: center;
}

.custom-section h1 {
    text-align: center;
    font-size: 36px;
    color: #333;
}

.custom-section h2 {
    text-align: center;
    font-size: 30px;
    color: solid black;
    font-weight: 500;
}

.custom-section p {
    text-align: center;
    font-size: 15px;
    color: #555;
    margin-top: 14px;
    padding-left: 100px;
    padding-right: 100px;
}

/* Outer Card Styles */
.packageouter-card {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 20px;
}

/* Inner Card Styles */
.packagecard {
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px; */
}

/* Card Header (Light Green Background) */
.packagecard-header {
    background-color: #0d808d;
    text-align: center;
    padding: 20px 15px 15px 15px;
}

/* Card Body */
.packagecard-body {
    /* padding: 20px; */
}

/* Social Media Links */
.packagesocials {
    margin-top: 10px;
}

/* .packagesocial {
    padding: 10px;
    border-left: 1px solid #ddd;
} */

.packagesocial:first-child {
    border-left: none;
}

/* Adding border after social media details */
.packagesocial {
    border-bottom: 1px solid gray;
}
.packagecardheading {
    border-bottom: 1px solid gray;
}
.packagecard-header p {
    color: white;
    /* text-align: center; */
    font-size: 16px;
    /* margin-top: 14px; */
    font-weight: 500;
    padding: 0px;
}
.packagecard-header h4 {
    font-weight: 500;
    color: black;
}
.packagecardheading h5 {
    margin-top: 10px;
    font-weight: 600;
}
.packagecardheading p {
    font-weight: 600;
    font-size: 15px;
}
.packagecardheading h6 {
    margin-top: -12px;
    font-weight: 600;
}
.packagecardheading ul {
    text-align: left;
    list-style: disc;
    font-weight: 400;
    font-size: 15px;
    margin-left: 10px;
}
.packagecardheading ul li::marker {
    color: black;
}
.packagesocial h5 {
    font-weight: 500;
    text-align: left;
    margin-top: 10px;
}
.packagesocial ul {
    text-align: left;
    list-style: disc;
    font-weight: 400;
    font-size: 15px;
    margin-left: 10px;
}
.packagesocial ul li::marker {
    color: black;
}
#getconnected {
    margin-top: 22px;
    padding: 6px 14px;
    border: 1px solid #0d808d;
    border-radius: 1px;
    background: #0d808d;
    color: #fff;
    transition: 0.4s;
    font-size: 14px;
    font-weight: 500;
}
.websitedevelopemntservicebox {
    height: 400px;
}
.websitedevelopmentservice img {
    margin-bottom: 25px;
}
.websiteservice img {
    height: 320px;
    width: 580px;
}
.margintop {
    margin-top: 0px;
}
.margintop img {
    height: 380px;
}
.softwaredevimgcontent ul {
    list-style: disc;
    color: #000;
}
.softwaredevimgcontent ul li strong {
    color: #000;
    font-weight: 600;
}

.softwaredevimgcontent ul h6 {
    font-weight: 600;
}
.margin-top1 img {
    height: 330px;
    width: 530px;
}
.websiteservice1 img {
    height: 330px;
    width: 530px;
}

.height1 {
    height: 405px;
}
.height2 {
    height: 415px;
}
.height3 {
    height: 440px;
}
.height4 {
    height: 390px;
}
.webdesign {
    padding-left: 15px;
    padding-right: 50px;
}
.webdesign img {
    height: 310px;
    width: 500px;
    margin-left: 30px;
}
.webdesign2 {
    padding-right: 50px;
}
.webdesign2 img {
    width: 560px;
    height: 350px;
}
.dynamicdesign img {
    height: 390px;
}
.logo-border-egt{
    background:#fff !important;
    border-radius: 10px !important;
}
.footerlist-one{
    width: 50% !important;
}
.techlogo-area {
    background-color: white;
    padding:10px 0px 10px 0px;
    overflow: hidden;
}
@media (max-width: 768px) {
    .custom-section p {
        padding-left: 20px;
        padding-right: 20px;
    }
}
/*csss start ankit*/

/*--------------------------------*/
/* .End CSS
/*--------------------------------*/