/*!
 * Theme Name: 		   OceanWP
 * Text Domain: 	   oceanwp
 * Version:            4.1.5
 * Tested up to:       6.9.1
 * Requires at least:  5.6
 * Requires PHP:       7.4
 * Author:             OceanWP
 * Author URI:         https://oceanwp.org/about-oceanwp/
 * Theme URI:          https://oceanwp.org/
 * Description:        OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/
 * Tags:               two-columns, right-sidebar, footer-widgets, blog, news, custom-background, custom-menu, post-formats, rtl-language-support, sticky-post, editor-style, threaded-comments, translation-ready, buddypress, custom-colors, featured-images, full-width-template, theme-options, e-commerce, block-styles, wide-blocks, accessibility-ready
 *
 * License: GNU General Public License v2.0 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 *
 * All files, unless otherwise stated, are released under the GNU General Public
 * License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

 * This theme, like WordPress, is licensed under the GPL.
 * Use it to make something cool, have fun, and share what you've learned
 * with others.
 *
 * DO NOT ADD YOUR CSS TO THIS FILE - IT WILL BE LOST
 * To add your own CSS, use a child theme: https://github.com/oceanwp/oceanwp-child-theme
 *
 * CSS file is in "assets/css"
 */


h1, h2, h3, h4, h5, h6 {
    font-family: "Exo", sans-serif !important;
}
.site-footer {
    display: none;
}
header.page-header {
    display: none;
}
p {
    font-family: "Rubik", sans-serif !important;
	color: var(--brand-para)!important;
	font-weight: 400!important;
}


/*  header css start*/

:root {
  --brand-red: #e61b1b;
--brand-dark: #050c3f;
--brand-head: #000000;
--brand-para:#39393a;
 }

 

.header-top-bar {
    background-color: var(--brand-red);
	padding: 10px 0px;
} 

.header-top-bar-inner {
    display: flex;
}
.header-top-left {
    display: flex;
    gap: 20px;
    width: 70%; 
}
.header-right {
    width: 30%;
    /* align-items: end; */
    justify-content: end;
    display: flex;
}
.header-top-left {
    color: white;
    font-family: 'Rubik';
    font-weight: 400;
    font-size: 13px;
}
.header-top-left a {
    color: white;
    font-family: 'Rubik';
    font-weight: 400;
    font-size: 13px;
}
.header-right i.fa-brands {
    color: white;
    font-size: 16px;
}
.soi-ico {
    display: flex;
    gap: 14px;
}
.header-bottom {
    background: #e61b1b;
}
.header-bottom-inner {
    display: flex;
}

.header-bottom-left {
    width: 20%;
    background: var(--brand-dark);
    border-radius: 0px 0px 0px;
 clip-path: polygon(0% 0%, 105% -55%, 91% 101%, -4% 100%);
    padding: 20px 0px 20px 127px;
}
.header-bottom-left img {
    width: 80%;
}
.header-bottom-right {
    width: 80%;
    background: white;
    clip-path: polygon(0% 126%, 111% 100%, 142% 0%, 3% 0);
	display: flex;
    justify-content: space-between;
    padding-right: 154px;
}
a.mega-menu-link {
    color: var(--brand-dark) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    font-family: exo !important;
}
.header-menu {
    width: 80%;
    display: flex;
    justify-content: flex-start;
    padding-left: 116px;
	align-items:center;
}
.header-btn {
    width: 20%;
    display: flex;
    justify-content: end;
	align-items:center;
}
.header-btn a {
    background: var(--brand-red);
   padding: 5px 33px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Exo';
}
    #mega-menu-wrap-topbar_menu #mega-menu-topbar_menu > li.mega-menu-item > a.mega-menu-link:hover    {
		     color: #e61b1b !important;
}

/*  end*/

/* home abt sec */
/* .section-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 100px 24px;
        } */
section.home-abt-sec1 {
    padding: 50px 0px;
}
        /* TOP HEADER SECTION */
        .header-flex-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 60px;
        }

        .badge-column {
            flex: 0 0 30%;
        }

        .content-column {
            flex: 0 0 65%;
        }

      .tag-label {
    background-color: var(--brand-dark);
    color: #ffffff;
    padding: 6px 14px;
    font-size: 15px;
    font-weight: 400;
    display: inline-block;
    text-transform: lowercase;
    font-family: 'Rubik';
}

        .hero-title {
    font-size: 45px;
    font-weight: 700;
    line-height: 56px;
    color: var(--brand-red);
    margin: 0 0 24px 0;
}
.hero-paragraph {
    max-width: 70%;
    font-size: 15px;
    line-height: 26px;
    color: var(--brand-para);
    margin-bottom: 24px;
    font-weight: 400;
}

       .cta-link {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 17px;
    gap: 10px;
    cursor: pointer;
    color: var(--brand-dark);
    text-decoration: none !important;
    transition: all 0.3s ease;
    font-family: 'Exo'; 
}

        .cta-link:hover {
            gap: 15px;
            color: #c8102e;
        }

        /* GRID CARDS SECTION */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 80px;
        }

        .project-card {
            position: relative;
            height: 420px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 28px;
            color: #ffffff;
        }

        .card-background-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .project-card:hover .card-background-img {
            transform: scale(1.08);
        }

        .card-gradient-overlay {
            position: absolute;
            inset: 0;
               background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgb(5 12 63) 100%);
            z-index: 2;
			display:none;
        }
.card-gradient-overlay1 {
	    position: absolute;
    inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgb(5 12 63) 100%);
    z-index: 2;
}
        .card-inner-content {
            position: relative;
            z-index: 3;
        }

        .card-main-title {
            font-size: 20px;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 30px;
			color:white;
        }

        .card-sub-text {
            font-size: 13px;
            line-height: 1.5;
            color: rgba(255, 255, 255, 0.9)!important;
            margin: 0;
        }

        /* STATISTICS SECTION */
        .statistics-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
            border-top: 1px solid #e5e5e5;
            padding-top: 50px;
        }

        .stat-box-item {
            display: flex;
            flex-direction: column;
        }
.stat-box-title {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    color: var(--brand-dark);
}

        .stat-box-description {
            font-size: 13px;
            line-height: 1.5;
            color: #666666;
            margin: 0 0 25px 0;
        }

        .stat-value-display {
          
    font-size: 45px;
    font-weight: 800;
    color: var(--brand-red);
    margin: 0;
    line-height: 1;
    font-family: 'Exo';
        }

        /* RESPONSIVENESS */
        @media (max-width: 1024px) {
            .header-flex-wrapper { flex-direction: column; }
            .badge-column, .content-column { flex: 0 0 100%; width: 100%; }
            .hero-title { font-size: 42px; }
            .projects-grid { grid-template-columns: repeat(2, 1fr); }
            .statistics-container { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 640px) {
            .projects-grid { grid-template-columns: 1fr; }
            .statistics-container { grid-template-columns: 1fr; }
            .hero-title { font-size: 32px; }
  } 

/* end */

/* service section */
.service-section {
    background: #f4f4f4;
    padding: 70px 0px;
}
 .services-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 50px;
        }

        .services-subtitle {
              color: var(--brand-red);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

        .services-main-title {
          font-size: 45px;
    font-weight: 700;
    line-height: 56px;
    color: var(--brand-head);
    margin: 0 0 24px 0;
			width:70%;
        }
a.all-services-btn {
    display: none;
}
        .all-services-btn {
            border: 1px solid #ff5e14;
            color: #ff5e14;
            padding: 12px 24px;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .all-services-btn:hover {
            background-color: #ff5e14;
            color: white;
        }

        .tabs-layout {
            display: grid;
            grid-template-columns: 320px 1fr;
            gap: 30px;
        }

        .tabs-sidebar {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .tab-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 18px 24px;
            background-color:#ffffff;
            border: 1px solid #ffffff;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
            font-size: 15px;
            color: #444;
			 font-family: 'Exo';
        }

        .tab-item svg {
             color: var(--brand-red);
            width: 24px;
            height: 24px;
        }

        .tab-item.active {
    background-color: var(--brand-red);
    color: #fff;
    border-color: var(--brand-red);
    font-family: 'Exo';
    font-weight: 600;
}
        .tab-item.active svg {
            fill: white;
        }

        .tab-content-panel {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            background: #fff;
            padding: 0;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .panel-image-wrapper {
            height: 100%;
            overflow: hidden;
            border-radius: 4px;
        }

        .panel-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .panel-text-content {
            padding: 20px;
			    display: flex;
    flex-direction: column;
    justify-content: center;
        }

        .panel-title {
            font-size: 25px;
    font-weight: 500;
    color: black;
    margin-bottom: 20px;
    line-height: 33px;
        }

        .panel-description {
            font-size: 15px;
            color: #666;
            line-height: 1.7;
            margin-bottom: 30px;
        }

        .check-list {
            list-style: none;
            padding: 0;
            margin: 0 0 35px 0;
        }

        .check-item {
          
         display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 400;
    color: #444;
    margin-bottom: 6px;
    font-family: 'Rubik';
        }

        .check-icon {
             color: #e61b1b;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e61b1b;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    padding: 2px;
}
.read-more-link {
    font-weight: 600;
     color: var(--brand-dark);
    text-decoration: none;
    display: inline-flex;
    gap: 8px;
    /* border-bottom: 2px solid #ff5e14; */
    padding-bottom: 4px;
    text-decoration: unset !important;
    font-family: 'Exo';
}
.read-more-link:hover {
    color: unset!iimportant;
    color: unset !important;
    padding-left: 10px;
    transition: 0.3s lienar;
}
       

        /* RESPONSIVENESS */
        @media (max-width: 1024px) {
            .tabs-layout { grid-template-columns: 1fr; }
            .tab-content-panel { grid-template-columns: 1fr; }
            .panel-image-wrapper { height: 350px; }
            .services-header { flex-direction: column; align-items: flex-start; gap: 20px; }
        }

/* end */


/* projects section */
/*    .recent-services-section {
        position: relative;
        background-color: #fcfcfc;
        padding: 100px 0;
        overflow: hidden;
    } */
.project-section {
	padding: 50px 0px;}

    .recent-header {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 60px;
        align-items: end;
        margin-bottom:
            60px;
    }

    .recent-subtitle {
            color: var(--brand-red);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;

    }

    .recent-subtitle::after {
        content: "";
        height: 2px;
        width: 40px;
        background-color: #ff5e14;
    }

    .recent-title {
font-size: 45px;
    font-weight: 700;
    line-height: 56px;
    color: var(--brand-head);
    margin: 0 0 0px 0;
/*     width: 70%; */
    }

    .recent-intro-text {
        font-size: 15px;
        color: #777;
        line-height: 1.7;
        padding-top: 10px;
		margin:0px;
    }

    /* Carousel Wrapper */
    .carousel-outer-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .carousel-track {
        display: flex;
        transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
        gap: 24px;
        padding: 10px 0;
    }

    /* Fixed Column Rules */
    .carousel-slide {
        flex: 0 0 calc(33.333% - 16px);
        /* Default Desktop: 3 Columns minus gap portion */
        min-width: calc(33.333% - 16px);
        position: relative;
    }

    /* CARD HOVER FEATURE */
    .service-box {
        position: relative;
        height: 480px;
        overflow: hidden;
        cursor: pointer;
        border-radius: 4px;
    }

    .service-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5,
                1);
    }

    .service-box:hover img {
        transform: scale(1.1);
    }

    .box-overlay {
       position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgb(230 27 27) 0%, rgb(230 27 27 / 40%) 40%, rgba(255, 94, 20, 0) 70%);
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    color: white;
    z-index: 5;
    }
.content-over-box {
    display: flex;
    /* flex-direction: column-reverse; */
    gap: 20px;
    flex-direction: row-reverse;
    align-items: end;
}
p.box-text span {
    font-size: 20px;
    font-family: 'Exo';
    font-weight: 600;
    color: white;
}
p.box-text {
    color: #ffffffd1 !important;
    font-weight: 400 !important;
}
.reveal-arrow svg {
    fill: #e61b1b !important;
}
    .service-box:hover .box-overlay {
        opacity: 1;
        transform: translateY(0);
    }
.side-scroll-container {
    display: none;
}
    .reveal-arrow {
        width: 30px;
        height: 30px;
        background-color: #fff;
        color: #ff5e14;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom: 20px;
        transform: scale(0);
        transition:
            transform 0.4s ease 0.2s;
    }

    .service-box:hover .reveal-arrow {
        transform: scale(1);
    }

    .box-text {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.6;
        transform: translateY(20px);
        opacity: 0;
        transition:
            all 0.4s ease 0.3s;
    }

    .service-box:hover .box-text {
        transform: translateY(0);
        opacity: 1;
    }

    /* CAROUSEL CONTROLS */
    .carousel-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        margin-top: 50px;
    }

    .nav-btn {
        width: 50px;
        height: 50px;
        border: 1px solid #ddd;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        background: transparent;
    }

    .nav-btn:hover {
        background-color: var(--brand-red);
    border-color: var(--brand-red);
        color: white;
    }
.side-scroll-container {
    display: none!important;
}

    .carousel-dots {
        display: flex;
        gap: 10px;
    }

    .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ddd;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .dot.active {
        background-color:  var(--brand-red);
        width: 25px;
        border-radius: 10px;
    }

    /* SCROLL INDICATOR */
    .side-scroll-container {
        position: absolute;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        z-index: 10;
    }

    .scroll-label {
        writing-mode: vertical-lr;
        transform: rotate(180deg);
        font-size: 12px;
        font-weight: 700;
        color: #444;
        letter-spacing: 1px;
    }

    .scroll-bar-bg {
        width: 2px;
        height: 120px;
        background-color: #eee;
        position: relative;
    }

    .scroll-bar-fill {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 40px;
        background-color: #ff5e14;
        transition: top 0.3s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* RESPONSIVENESS */
    @media (max-width: 1024px) {
        .carousel-slide {
            flex: 0 0 calc(50% - 12px);
            min-width: calc(50% - 12px);
        }

        .tabs-layout {
            grid-template-columns: 1fr;
        }

        .recent-header {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .side-scroll-container {
            display: none;
        }
    }

    @media (max-width: 640px) {
        .carousel-slide {
            flex: 0 0 100%;
            min-width: 100%;
        }

        .carousel-track {
            gap: 0;
        }

        .recent-title {
            font-size: 32px;
        }
    } 
.carousel-track{
display:flex;
transition:transform 0.5s ease;
gap:24px;
}
p.recent-intro-text svg {
    height: 30px;
    width: 30px;
    fill: white;
}
p.recent-intro-text a {
    display: inline-flex;
    justify-content: end;
    align-items: center;
    background: #050c3f;
    padding: 4px 25px;
	color: white;
    font-size: 16px;
    text-decoration: unset !important;
    font-family: 'Exo';
    font-weight: 600;
	gap:10px;
}
p.recent-intro-text {
    display: flex;
    justify-content: end;
}
.carousel-slide{
min-width:28.33%;
}

@media(max-width:1024px){
.carousel-slide{
min-width:50%;
}
}

@media(max-width:640px){
.carousel-slide{
min-width:100%;
}
}
/* end */


  .client-logo-item {
            background: white;
            border: 1px solid #eee;
            height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            transition: all 0.3s ease;
        }
        .client-logo-item:hover {
            border-color: #ff5e14;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }
        .client-logo-item img {
            max-width: 100%;
            max-height: 100%;
            filter: grayscale(1);
            opacity: 0.6;
            transition: all 0.3s ease;
        }
        .client-logo-item:hover img {
            filter: grayscale(0);
            opacity: 1;
        }