/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Template: oceanwp
Author: OceanWP
Author URI: https://oceanwp.org/about-oceanwp/
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
Version: 4.1.5.1779089283
Updated: 2026-05-18 12:58:03

*/


.content-area, .content-left-sidebar .content-area{
	margin-bottom: 0px;
}


.header-cta-section{
	
    display: flex;
    align-items: center;
    gap: 30px;

}

.header-cta-section .footer-contact-row svg {
    color: rgb(8 29 56);
    margin-top: 3px;
    flex-shrink: 0;
}

.header-cta-section .footer-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.header-cta-section .footer-contact-label {
    font-size: 15px;
    line-height: 1.5;
    color: rgb(8 29 56);
    text-decoration: none;
    transition: var(--transition-smooth);
    font-weight: 600;
}

@media (max-width:768px){
	.header-cta-section {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-direction: column;
}
}

#top-bar-wrap{
	display:none;
}

#site-header{
	display:none;
}

.page-header{
	display:none;
}

a:focus {
    outline: solid 0px !important;
}

#main #content-wrap{
	padding-top:0;
	padding-bottom:0;
}

.content-area{
	width: 100%;
    padding-right: 0px;
}

#footer-widgets{
	display:none;
}

#footer-bottom{
	display:none;
}


    /* ==========================================
       1. DESIGN SYSTEM & CSS VARIABLES
       ========================================== */
   :root {
      --primary-red: #bd1a21;
      --primary-red-hover: #9c1319;
      --primary-blue: #0a58ca;
      --nav-blue: #1363df;
      --dark-navy: #081d38;
      --overlay-gradient: linear-gradient(90deg, rgba(8, 29, 56, 0.95) 0%, rgba(8, 29, 56, 0.85) 45%, rgba(8, 29, 56, 0.3) 75%, rgba(8, 29, 56, 0.1) 100%);
      --text-dark: #1e293b;
      --text-light: #ffffff;
      --text-muted: #cbd5e1;
      --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
      --box-shadow-premium: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: var(--font-family);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      background-color: #f8fafc;
      overflow-x: hidden;
      color: var(--text-dark);
    }

    /* ==========================================
       2. REUSABLE COMPONENTS (MODAL)
       ========================================== */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(8, 29, 56, 0.7);
      backdrop-filter: blur(8px);
      z-index: 1000;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: var(--transition-smooth);
    }

    .modal-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-box {
      background: var(--text-light);
      padding: 40px;
      border-radius: 20px;
      max-width: 500px;
      width: 90%;
      position: relative;
      transform: scale(0.9) translateY(20px);
      transition: var(--transition-smooth);
      box-shadow: var(--box-shadow-premium);
      text-align: center;
    }

    .modal-overlay.active .modal-box {
      transform: scale(1) translateY(0);
    }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      background: #f1f5f9;
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 19px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition-smooth);
    }

    .modal-close:hover {
      background: #e2e8f0;
      color: var(--primary-red);
    }

    .modal-title {
      font-size: 29px;
      color: var(--dark-navy);
      font-weight: 700;
      margin-bottom: 16px;
    }

    .modal-desc {
      color: #64748b;
      line-height: 1.6;
      margin-bottom: 32px;
    }

    .modal-btn {
      background: var(--primary-red);
      color: white;
      border: none;
      padding: 13px 32px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 50px;
      cursor: pointer;
      transition: var(--transition-smooth);
    }

    .modal-btn:hover {
      background: var(--primary-red-hover);
      transform: translateY(-2px);
    }

    /* ==========================================
       3. TOP ACCENT BAR & HEADER
       ========================================== */
    .top-accent-bar {
/*       height: 40px; */
      background-color: var(--nav-blue);
      width: 100%;
    }

    header {
      background-color: var(--text-light);
      box-shadow: 0 4px 20px rgba(0,0,0,0.04);
      position: relative;
      z-index: 100;
      transform: translateY(-15px); /* Creates the overlapping effect shown in wireframe */
      max-width: 1400px;
      margin: 0 auto;
      border-radius: 8px;
    }

    .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 13px 32px;
    }

    /* Logo Styling matching 3C perfectly */
    .logo-link {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
    }

    .logo-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .logo-svg-wrapper {
      height: 48px;
      width: auto;
    }

    .logo-subtext {
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: var(--dark-navy);
      text-transform: uppercase;
      margin-top: -4px;
    }

    /* Navigation styling */
    nav {
      display: flex;
      align-items: center;
      gap: 24px;
	 width: 65%;
    justify-content: space-between;
    }

    .nav-links {
      display: flex;
      align-items: center;
      list-style: none;
      gap: 32px;
    }

    .nav-item a {
      text-decoration: none;
      font-size: 16px;
      font-weight: 600;
      color: rgb(8 29 56);
      transition: var(--transition-smooth);
      position: relative;
    }

    .nav-item a::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 0;
      height: 2px;
      background-color: var(--primary-red);
      transition: var(--transition-smooth);
    }

    .nav-item a:hover::after,
    .nav-item.active a::after {
      width: 100%;
    }

    .nav-item.active a {
      color: var(--primary-red);
    }

    .btn-header-contact {
      background-color: var(--primary-red);
      color: var(--text-light);
      border: none;
      padding: 12px 28px;
      border-radius: 8px;
      font-weight: 700;
      cursor: pointer;
      transition: var(--transition-smooth);
      font-size: 14px;
     
    }

    .btn-header-contact:hover {
      background-color: var(--primary-red-hover);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(189, 26, 33, 0.35);
    }

    /* Mobile Menu Toggle button */
    .menu-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      flex-direction: column;
      gap: 6px;
      padding: 5px;
      z-index: 200;
    }

    .menu-toggle span {
      display: block;
      width: 25px;
      height: 3px;
      background-color: var(--dark-navy);
      border-radius: 3px;
      transition: var(--transition-smooth);
    }


@media (max-width:768px){
	header{
		top:10px;
	}
}

    /* ==========================================
       4. HERO CONTAINER & CAROUSEL
       ========================================== */
    .hero-section {
      position: relative;
      width: 100%;
      height: 650px;
      margin-top: -15px; /* Alignment shift back from header offset */
      overflow: hidden;
      background-color: var(--dark-navy);
    }

    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      background-size: cover;
      background-position: center right;
    }

    .slide::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--overlay-gradient);
      z-index: 1;
    }

    .slide.active {
      opacity: 1;
      z-index: 2;
    }

    /* Main Hero content block */
    .hero-content {
      position: relative;
      z-index: 10;
      max-width: 1400px;
      width: 100%;
      margin: 0 auto;
      padding: 0 32px;
      transform: translateY(-30px);
    }

    .hero-text-wrap {
      max-width: 650px;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s;
    }

    .slide.active .hero-text-wrap {
      opacity: 1;
      transform: translateY(0);
    }

    .hero-title {
      font-size: 56px;
      font-weight: 800;
      line-height: 1.15;
      color: var(--text-light);
      margin-bottom: 24px;
    }

    .hero-description {
      font-size: 18px;
      line-height: 1.6;
      color: var(--text-muted);
      margin-bottom: 40px;
      max-width: 520px;
    }

    /* Buttons block */
    .hero-actions {
      display: flex;
      gap: 19px;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 30px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 16px;
      text-decoration: none !important;
      transition: var(--transition-smooth);
      cursor: pointer;
    }

    .btn-red {
      background-color: var(--primary-red);
      color: var(--text-light);
      border: 2px solid var(--primary-red);
    }

    .btn-red:hover {
      background-color: var(--primary-red-hover);
      border-color: var(--primary-red-hover);
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(189, 26, 33, 0.3);
    }

    .btn-white {
      background-color: var(--text-light);
     
      border: 2px solid var(--text-light);
    }

    .btn-white:hover {
      background-color: rgba(255, 255, 255, 0.9);
     
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(255, 255, 255, 0.15);
    }

    .btn-arrow {
      margin-left: 8px;
      font-size: 18px;
      transition: var(--transition-smooth);
    }

    .btn:hover .btn-arrow {
      transform: translateX(4px);
    }

    /* Slider Controls (Next / Prev) */
    .slider-controls {
      position: absolute;
      bottom: 160px;
      right: 5%;
      display: flex;
      gap: 16px;
      z-index: 20;
    }

    .slider-arrow {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition-smooth);
    }

    /* Prev Button (Light Blue) */
    .arrow-prev {
      background-color: #e0f2fe;
      color: var(--nav-blue);
    }

    .arrow-prev:hover {
      background-color: #bae6fd;
      transform: translateX(-4px);
    }

    /* Next Button (Darker Blue) */
    .arrow-next {
      background-color: var(--nav-blue);
      color: var(--text-light);
    }

    .arrow-next:hover {
      background-color: #0d4cb5;
      transform: translateX(4px);
    }

    /* ==========================================
       5. FLOATING STATS SECTION
       ========================================== */
    .stats-section {
      position: relative;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px;
      z-index: 30;
      margin-top: -65px; /* Perfectly floats stats card over the boundary */
      margin-bottom: 80px;
    }

    .stats-card {
      background-color: var(--dark-navy);
      border-radius: 24px;
      padding: 40px 32px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      box-shadow: var(--box-shadow-premium);
      border: 1px solid rgba(255,255,255,0.08);
      flex-wrap: wrap;
      gap: 32px;
    }

    .stat-item {
      display: flex;
      align-items: center;
      gap: 19px;
      flex: 1;
      min-width: 220px;
      justify-content: center;
      transition: var(--transition-smooth);
    }

    .stat-item:hover {
      transform: translateY(-5px);
    }

    .stat-item:not(:last-child) {
      border-right: 1px solid rgba(255, 255, 255, 0.15);
    }

    .stat-icon {
      width: 60px;
      height: 60px;
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-light);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: var(--transition-smooth);
    }

    .stat-item:hover .stat-icon {
      background-color: var(--primary-red);
      color: var(--text-light);
      border-color: var(--primary-red);
    }

    .stat-info {
      display: flex;
      flex-direction: column;
    }

    .stat-number {
      font-size: 37px;
      font-weight: 800;
      color: var(--text-light);
      line-height: 1;
      margin-bottom: 5px;
    }

    .stat-label {
      font-size: 15px;
      color: var(--text-muted);
      font-weight: 500;
    }

   

/* ==========================================
       6. ABOUT US SECTION
       ========================================== */
    .about-section {
      position: relative;
      padding: 100px 0;
      background-color: #ffffff;
      overflow: hidden;
    }

    .about-container {
      position: relative;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 80px;
      align-items: center;
      z-index: 5;
    }

    /* Staggered dynamic 3-image grid layout */
    .about-images-grid {
      display: flex;
      gap: 24px;
      align-items: center;
      position: relative;
    }

    .about-img-col-left {
      flex: 1.1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: 40px;
    }

    .about-img-col-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .about-img {
      width: 100%;
/*       object-fit: cover; */
      border-radius: 28px;
      box-shadow: 0 15px 35px rgba(0,0,0,0.07);
      transition: var(--transition-smooth);
    }

    .about-img:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 50px rgba(0,0,0,0.12);
    }

    .about-img.tall {
/*       height: 460px; */
    }

    .about-img.medium {
/*       height: 280px; */
    }

    .about-img.short {
/*       height: 180px; */
    }

    /* Content details styling */
    .about-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
    }

.about-content a{
	background: #f5f5f5;
}

    .about-tag {
      font-size: 16px;
      font-weight: 700;
      color: var(--dark-navy);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 16px;
      position: relative;
      padding-left: 12px;
    }

    .about-tag::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 16px;
      background-color: var(--primary-red);
      border-radius: 2px;
    }

    .about-title {
      font-size: 46px;
      font-weight: 800;
      color: var(--nav-blue); /* Title matches color pattern from image */
      line-height: 1.2;
      margin-bottom: 24px;
    }

    .about-title .highlight-red {
      color: var(--primary-red);
    }

    .about-desc {
      font-size: 16px;
      line-height: 1.7;
      color: #515b6f;
      margin-bottom: 36px;
    }

    /* Faint background vector line illustrations */
    .vector-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      opacity: 0.65;
    }

@media (max-width:768px){
	.about-desc{
		font-size: 15px;
	}
}

/* ==========================================
       7. SERVICES / SOLUTIONS SLIDER SECTION
       ========================================== */
    .services-section {
      padding: 100px 0;
      background-color: #ffffff;
      overflow: hidden;
      position: relative;
    }

    .services-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px;
      position: relative;
    }

    .services-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 48px;
    }

    .services-title-wrap {
      max-width: 750px;
    }

    .services-tag {
      font-size: 16px;
      font-weight: 700;
      color: var(--dark-navy);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 16px;
      position: relative;
      padding-left: 12px;
      display: inline-block;
    }

    .services-tag::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 16px;
      background-color: var(--primary-red);
      border-radius: 2px;
    }

    .services-title {
      font-size: 46px;
      font-weight: 800;
      color: var(--nav-blue);
      line-height: 1.2;
    }

    .services-title .highlight-red {
      color: var(--primary-red);
	  display:block;
    }

    /* Carousel navigation controls (aligned inline on right) */
    .services-controls {
      display: flex;
      gap: 16px;
      margin-bottom: 8px;
    }

    .services-control-btn {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition-smooth);
    }

    .services-control-btn.btn-prev {
      background-color: #e0f2fe;
      color: var(--nav-blue);
    }

    .services-control-btn.btn-prev:hover {
      background-color: #bae6fd;
      transform: translateX(-3px);
    }

    .services-control-btn.btn-next {
      background-color: var(--nav-blue);
      color: var(--text-light);
    }

    .services-control-btn.btn-next:hover {
      background-color: #0d4cb5;
      transform: translateX(3px);
    }

    /* Slider viewports & tracks */
    .services-slider-viewport {
      overflow: visible; /* Allows beautiful shadows to not be cut off */
      margin: 0 -20px;
      padding: 20px;
    }

    .services-track {
      display: flex;
      gap: 24px;
      transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Elegant, Rounded Cards matching image_b10fc0.jpg */
    .service-card {
      position: relative;
      height: 540px;
      border-radius: 36px;
      overflow: hidden;
      background-color: var(--dark-navy);
      flex: 0 0 calc((100% - 48px) / 3); /* default 3 cards on desktop */
      box-shadow: 0 15px 35px rgba(0,0,0,0.06);
      transition: var(--transition-smooth);
    }

    .service-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition-smooth);
      opacity: 0.95;
    }

    .service-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    }

    .service-card:hover .service-card-img {
      transform: scale(1.06);
    }

    /* Overlapping white text block overlay */
    .service-card-info {
      position: absolute;
      bottom: 24px;
      left: 20px;
      right: 20px;
      background: #ffffff;
      border-radius: 28px;
      padding: 32px 24px;
      text-align: center;
      box-shadow: 0 10px 30px rgba(8, 29, 56, 0.08);
      z-index: 10;
      transition: var(--transition-smooth);
      border: 1px solid rgba(241, 245, 249, 0.8);
    }

    .service-card-title {
      font-size: 22px;
      font-weight: 700;
      color: var(--nav-blue);
      margin-bottom: 0px;
      transition: var(--transition-smooth);
		
    }

    .service-card:hover .service-card-title {
      color: var(--primary-red);
    }

    .service-card-desc {
      font-size: 14px;
      line-height: 1.6;
      color: #515b6f;
	  margin:0;
    }

    /* Footer / Bottom Centered CTA button */
    .services-footer {
      display: flex;
      justify-content: center;
      margin-top: 60px;
    }

@media (max-width:768px){
	 .service-card-info {

      padding: 15px;

    }
	  .service-card-title {
      font-size: 16px;
		
    }

}

  /* ==========================================
       8. PARALLAX GALLERY SECTION (image_b1266a.jpg & image_b18bc4.jpg)
       ========================================== */
    .gallery-parallax-section {
      position: relative;
      padding: 100px 0 160px 0; /* Extra bottom padding for card overlap */
      background-image: linear-gradient(rgba(8, 29, 56, 0.90), rgba(8, 29, 56, 0.95)), url('https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?auto=format&fit=crop&w=1600&q=80');
      background-attachment: fixed; /* Parallax effect */
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }

    .gallery-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px;
      position: relative;
      z-index: 5;
    }

    .gallery-header-center {
      text-align: center;
      margin-bottom: 48px;
    }

    .gallery-tag-center {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-light);
      text-transform: uppercase;
      letter-spacing: 2px;
      position: relative;
      display: inline-block;
      padding-bottom: 12px;
    }

    .gallery-tag-center::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 25%;
      width: 50%;
      height: 3px;
      background-color: var(--primary-red);
      border-radius: 2px;
    }

    /* Gallery Carousel viewport showing column tracks */
    .gallery-slider-viewport {
      overflow: visible;
      margin-bottom: 50px;
    }

    .gallery-track {
      display: flex;
      gap: 10px;
      transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Column layouts for Staggered Gallery Grid */
    .gallery-column {
      display: flex;
      flex-direction: column;
      gap: 10px;
      height: 380px; /* Base height for all columns in carousel */
      flex: 0 0 calc((100% - 48px) / 3); /* Default 3 columns displayed on desktop */
      transition: var(--transition-smooth);
    }

    /* Tall column has a single full-height card */
    .gallery-column-tall .gallery-card {
      height: 100%;
    }

    /* Split column has two stacked half-height cards */
    .gallery-column-split .gallery-card {
      height: calc(50% - 4px);
    }

    /* Card styling inside columns */
    .gallery-card {
      position: relative;
      border-radius: 0px;
      overflow: hidden;
      width: 100%;
      box-shadow: var(--box-shadow-premium);
      transition: var(--transition-smooth);
    }

    .gallery-card:hover {
      transform: translateY(-8px);
    }

    .gallery-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition-smooth);
    }

    .gallery-card:hover .gallery-card-img {
      transform: scale(1.06);
    }

    /* Text slogan gallery cards */
    .gallery-text-card {
      background-color: rgba(13, 99, 223, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(12px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      text-align: center;
    }

    .gallery-card-title-text {
      font-size: 26px;
      font-weight: 800;
      color: var(--text-light);
      line-height: 1.3;
    }

    /* Mid-Gallery text banner */
    .gallery-banner-content {
      text-align: center;
      max-width: 850px;
      margin: 60px auto 0 auto;
    }

    .gallery-banner-text {
      font-size: 24px;
      font-weight: 600;
      color: var(--text-muted);
      line-height: 1.5;
      margin-bottom: 32px;
    }

    /* Gallery Sliding controls on the bottom-center */
    .gallery-controls-center {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 40px;
    }

@media (max-width:768px){
	.gallery-card-title-text{
		font-size: 20px;
	}
}


    /* ==========================================
       9. WHY CHOOSE US SECTION (image_b1266a.jpg)
       ========================================== */
    .why-choose-section {
      position: relative;
      background-color: #ffffff;
      padding: 0 0 50px 0;
      z-index: 10;
    }

    .why-choose-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 60px;
      align-items: start;
    }

    /* Left big red text block */
    .why-choose-left {
      position: sticky;
      top: 50px;
      padding-top: 60px;
    }

    .why-choose-title {
      font-size: 64px;
      font-weight: 900;
      color: var(--primary-red);
      line-height: 1.1;
      letter-spacing: -1px;
    }

    /* Right 2x2 grid of offset cards */
    .why-choose-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      /* Shifts the first row upward to overlap with the parallax banner */
      margin-top: -100px; 
    }

    /* Clean Card Layout with micro elevation details */
    .why-card {
      background: #ffffff;
      border-radius: 28px;
      padding: 40px 32px;
      position: relative;
      border: 1px solid rgba(226, 232, 240, 0.8);
      box-shadow: 0 15px 45px rgba(8, 29, 56, 0.06);
      transition: var(--transition-smooth);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .why-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 60px rgba(8, 29, 56, 0.12);
      border-color: rgba(19, 99, 223, 0.2);
    }

    /* Number tag header with integrated SVG icon badge */
    .why-card-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }

    .why-card-number {
      font-size: 44px;
      font-weight: 300;
      color: #cbd5e1;
      line-height: 1;
    }

    .why-card-icon-badge {
      width: 48px;
      height: 48px;
      background-color: var(--nav-blue);
      color: var(--text-light);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition-smooth);
    }

    .why-card:hover .why-card-icon-badge {
      background-color: var(--primary-red);
    }

    .why-card-title {
      font-size: 20px;
      font-weight: 800;
      color: var(--nav-blue);
      line-height: 1.3;
      margin-bottom: 16px;
      transition: var(--transition-smooth);
    }

    .why-card:hover .why-card-title {
      color: var(--primary-red);
    }

    .why-card-desc {
      font-size: 14px;
      line-height: 1.6;
      color: #64748b;
    }


  /* ==========================================
       10. MAIN FOOTER SYSTEM (image_b1a249.png)
       ========================================== */
    .footer-wrapper {
      background-color: #ffffff;
      width: 100%;
      border-top: 1px solid #e2e8f0;
    }

    /* White Footer Social/Branding Bar */
    .footer-social-bar {
      max-width: 1400px;
      margin: 0 auto;
      padding: 24px 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .footer-social-links {
      display: flex;
      gap: 20px;
      align-items: center;
    }

    .social-icon-btn {
      color: var(--dark-navy);
      transition: var(--transition-smooth);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .social-icon-btn:hover {
      color: var(--primary-red);
      transform: translateY(-3px);
    }

    /* Dark Blue Core Footer Main container */
    .footer-main-dark {
      background-color: var(--dark-navy);
      padding: 80px 0;
      color: var(--text-light);
    }

    .footer-main-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 40px;
    }

    .footer-col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;
    }

    /* Vertical Separators */
    .footer-col:not(:last-child)::after {
      content: '';
      position: absolute;
      right: -20px;
      top: 10px;
      height: 85%;
      width: 1px;
      background-color: rgba(255, 255, 255, 0.15);
    }

    .footer-col-title {
      font-size: 24px;
      font-weight: 700;
      color: var(--text-light);
      margin-bottom: 30px;
      letter-spacing: 0.5px;
    }

    /* Link list item patterns */
    .footer-links-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }

    .footer-links-list li a,
    .footer-links-list li span {
      font-size: 15px;
      color: var(--text-muted);
      text-decoration: none;
      transition: var(--transition-smooth);
      cursor: pointer;
      display: inline-block;
    }

    .footer-links-list li a:hover {
      color: var(--text-light);
      transform: translateX(4px);
    }

    /* Contact Details parameters */
    .footer-contact-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 24px;
      width: 100%;
    }

    .footer-contact-icon {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      background-color: var(--text-light);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--dark-navy);
      margin-top: 2px;
    }

    .footer-contact-text {
      font-size: 15px;
      line-height: 1.5;
      color: var(--text-muted);
      text-decoration: none;
      transition: var(--transition-smooth);
    }

    a.footer-contact-text:hover {
      color: var(--text-light);
    }


    /* ==========================================
       11. RESPONSIVE DESIGN & MEDIA QUERIES
       ========================================== */
    @media (max-width: 1200px) {
      .hero-title {
        font-size: 45px;
      }
      .stat-item:not(:last-child) {
        border-right: none;
      }
      .stats-card {
        padding: 32px 16px;
      }
      .about-container {
        gap: 40px;
      }
      .about-title {
        font-size: 38px;
      }
      .services-title {
        font-size: 38px;
      }
      .service-card {
        height: 500px;
      }
      .gallery-column {
        height: 340px;
      }
      .why-choose-title {
        font-size: 52px;
      }
      .footer-main-container {
        gap: 30px;
      }
    }

    @media (max-width: 991px) {
      .header-container {
        padding: 13px 24px;
      }
      nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background-color: var(--text-light);
        box-shadow: -10px 0 30px rgba(0,0,0,0.1);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 96px 32px 32px 32px;
        gap: 40px;
        transition: var(--transition-smooth);
        z-index: 150;
      }

      nav.open {
        right: 0;
      }

      .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 29px;
      }

      .nav-item a {
        font-size: 18px;
      }

      .btn-header-contact {
        width: 100%;
        text-align: center;
      }

      .menu-toggle {
        display: flex;
      }

      /* When Menu is Open, transform burger into X */
      .menu-toggle.open span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
      }
      .menu-toggle.open span:nth-child(2) {
        opacity: 0;
      }
      .menu-toggle.open span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -7px);
      }

      .hero-section {
        height: auto;
        min-height: 580px;
        padding-top: 48px;
        padding-bottom: 128px;
      }

      .hero-content {
        transform: translateY(0);
      }

      .slider-controls {
        bottom: 120px;
      }

      /* About Section Mobile Responsive adjustments */
      .about-container {
        grid-template-columns: 1fr;
        gap: 60px;
      }

      .about-img-col-left {
        padding-top: 0;
      }

      .about-img.tall {
        height: 380px;
      }

      .about-img.medium {
        height: 240px;
      }

      .about-img.short {
        height: 160px;
      }

      /* Dynamic Sliding layout for medium devices */
      .service-card {
        flex: 0 0 calc((100% - 24px) / 2); /* 2 cards visible */
      }
      .services-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
      }
      .services-controls {
        align-self: flex-end;
      }

      /* Gallery viewports medium */
      .gallery-column {
        flex: 0 0 calc((100% - 24px) / 2);
      }

      /* Why Choose Us medium */
      .why-choose-container {
        grid-template-columns: 1fr;
        gap: 50px;
      }
      .why-choose-left {
        position: static;
        padding-top: 30px;
        text-align: center;
      }
      .why-choose-grid {
        margin-top: -40px;
      }

      /* Footer medium */
      .footer-main-container {
        grid-template-columns: 1fr;
        gap: 50px;
      }
      .footer-col:not(:last-child)::after {
        display: none;
      }
    }

    @media (max-width: 768px) {
      .hero-title {
        font-size: 35px;
      }
      .hero-description {
        font-size: 16px;
      }
      .stats-section {
        margin-top: 0px;
        padding: 20px 16px;
      }
      .stats-card {
        border-radius: 18px;
        gap: 24px;
      }
      .stat-item {
        min-width: 45%;
        justify-content: flex-start;
      }
      .slider-controls {
        bottom: 30px;
        right: 50%;
        transform: translateX(50%);
      }
      .about-title {
        font-size: 30px;
      }
      .services-title {
        font-size: 30px;
      }
      .gallery-banner-text {
        font-size: 18px;
      }
      .why-choose-title {
        font-size: 30px;
      }
      .footer-social-bar {
        flex-direction: column;
        gap: 20px;
        text-align: center;
      }
		.about-section{
			padding: 30px 0;
		}
		.about-img{
	       border-radius: 5px;
		}
    }

    @media (max-width: 480px) {
      .hero-title {
        font-size: 30px;
      }
      .hero-actions {
        flex-direction: column;
        width: 100%;
      }
      .btn {
        width: 100%;
      }
      .stat-item {
        min-width: 100%;
      }
      .stats-card {
        padding: 24px;
      }
      .about-images-grid {
        gap: 12px;
      }
      .about-img-col-right {
        gap: 12px;
      }
      .about-img.tall {
        height: 310px;
		object-fit: cover;
      }
      .about-img.medium {
        height: 180px;
      }
      .about-img.short {
        height: 120px;
      }
      /* Dynamic Sliding layout for mobile devices */
      .service-card {
        flex: 0 0 100%; /* 1 card visible */
      }
      .gallery-column {
        flex: 0 0 100%;
      }
      .why-choose-grid {
        grid-template-columns: 1fr;
        margin-top: -20px;
      }
      .why-card {
        padding: 30px 24px;
      }
    }

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

.inner-banner-section{
	background:url(https://3cpower.in/wp-content/uploads/2026/06/solar-panel-product-image.webp);
	background-size:cover;
	height:250px;
	background-position-y: center;
	background-attachment: fixed;
}

.inner-banner-overlay{
	
    height: 100%;
    background: #c3161ca1;

}

.inner-banner-overlay .container{
	
    height: 100%;

}

.inner-banner-content{
	
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}

.inner-banner-content h2{
	
    color: #fff;
    font-size: 35px;
    margin-bottom: 0;

}


/* Section Container Layout */
.cpower-contact-wrapper {
    background-color: #ffffff;
    padding: 50px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.cpower-contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 50px;
    align-items: center;
}

/* Left Content Column Styling */
.cpower-contact-content-column {
    flex: 1.1;
    display: flex;
    flex-direction: column;
}

.cpower-contact-title {
    font-size: 42px;
    color: #002b49;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.cpower-contact-subtitle {
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 40px 0;
}

/* Cards Row styling using display flex */
.cpower-contact-cards-row {
    display: flex;
    gap: 20px;
}

.cpower-contact-info-card {
    flex: 1;
    background-color: #eef9f1;
    border-radius: 24px;
    padding: 40px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cpower-contact-icon-circle {
    width: 65px;
    height: 65px;
    background-color: #ffffff;
    color: #0089d0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 25px;
}

.cpower-contact-card-title {
    font-size: 18px;
    color: #002b49;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.cpower-contact-card-detail {
    font-size: 16px;
    color: #475569;
    margin: 4px 0;
}

.cpower-contact-card-detail a{
	text-decoration:none!important;
}


/* Right Form Card Layout */
.cpower-contact-form-column {
    flex: 0.9;
    display: flex;
    justify-content: flex-end;
}

.cpower-contact-form-card {
    background-color: #ffffff;
    width: 100%;
    max-width: 500px;
    border-radius: 4px;
    padding: 45px;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

.cpower-contact-form-heading {
    font-size: 30px;
    color: #002b49;
    font-weight: 700;
    margin: 0 0 30px 0;
}

/* Internal WordPress Mock Styles / Native Elements Layout */
.cpower-contact-wp-plugin-placeholder {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cpower-contact-input-field-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.cpower-contact-input-field-wrapper p{
	width:100%;
	display:flex;
	align-items:center;
}

.cpower-contact-input-element {
    width: 100%;
    background-color: #eef9f1;
    border: none;
    border-radius: 6px;
    padding: 16px 45px 16px 20px;
    font-size: 14px;
    color: #334155;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.cpower-contact-input-element::placeholder {
    color: #64748b;
}

/* Native Select Arrow Removal styling */
.cpower-contact-select-element {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 20px) center;
}

.cpower-contact-textarea-element {
    min-height: 120px;
    resize: none;
}

.cpower-contact-field-icon {
    position: absolute;
    right: 20px;
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}

.cpower-contact-textarea-element ~ .cpower-contact-field-icon {
    top: 18px;
}

/* Call to action element */
.cpower-contact-submit-btn {
    background-color: #72b043;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 18px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 10px;
}

.cpower-contact-submit-btn:hover {
    background-color: #619637;
}

/* Responsive Fluid Adjustments */
@media (max-width: 992px) {
    .cpower-contact-container {
        flex-direction: column;
        gap: 60px;
    }
    
    .cpower-contact-content-column,
    .cpower-contact-form-column {
        flex: none;
        width: 100%;
    }
    
    .cpower-contact-form-card {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .cpower-contact-cards-row {
        flex-direction: column;
    }
    .cpower-contact-title {
        font-size: 32px;
    }
	.ngg-galleryoverview.default-view .ngg-gallery-thumbnail img {
    margin: 0 !important;
    box-shadow: none;
    cursor: pointer;
    width: 100% !important;
}
}

/* redesigned footer css */

.redesigned-footer {
      background-color: #04142d;
      color: #ffffff;
      padding-top: 80px;
      font-family: var(--font-family);
      position: relative;
      overflow: hidden;
    }

    /* Subtle blueprints/circuit solar panel pattern inside the dark canvas */
    .redesigned-footer::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.04;
      pointer-events: none;
      background-image: radial-gradient(circle, #ffffff 1px, transparent 1px),
                        linear-gradient(to right, #ffffff 1px, transparent 1px),
                        linear-gradient(to bottom, #ffffff 1px, transparent 1px);
      background-size: 40px 40px;
    }

    .footer-grid-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: 1.3fr 1fr 1.1fr 0.9fr;
      gap: 48px;
      position: relative;
      z-index: 2;
    }

    .footer-block {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;
    }

    /* Vertical separators exactly as seen in improvised-footer-section.png */
    .footer-block:not(:last-child)::after {
      content: '';
      position: absolute;
      right: -24px;
      top: 10px;
      height: 85%;
      width: 1px;
      background-color: rgba(255, 255, 255, 0.12);
    }

    .footer-brand-text {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.7);
      margin-top: 20px;
      margin-bottom: 28px;
      max-width: 320px;
    }

    /* Circular Outline Social Media Buttons */
    .footer-social-row {
      display: flex;
      gap: 12px;
    }

    .social-circle-btn {
      width: 40px;
      height: 40px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.8);
      transition: var(--transition-smooth);
      background: transparent;
      cursor: pointer;
    }

    .social-circle-btn:hover {
      background-color: var(--primary-red);
      border-color: var(--primary-red);
      color: #ffffff;
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(189, 26, 33, 0.4);
    }

    .footer-block-title {
      font-size: 18px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 28px;
      letter-spacing: 0.5px;
    }

    /* Contact Block items */
    .footer-contact-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%;
    }

    .footer-contact-row {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }

    .footer-contact-row svg {
      color: rgba(255, 255, 255, 0.8);
      margin-top: 3px;
      flex-shrink: 0;
    }

    .footer-contact-label {
      font-size: 14px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.75);
      text-decoration: none;
      transition: var(--transition-smooth);
    }

    a.footer-contact-label:hover {
      color: var(--primary-red);
    }

    /* Navigation / Service Links list style */
    .footer-nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
      width: 100%;
	 margin-left: 0;
    }

    .footer-nav-list li span,
    .footer-nav-list li a {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      transition: var(--transition-smooth);
      cursor: pointer;
      display: inline-block;
    }

    .footer-nav-list li span:hover,
    .footer-nav-list li a:hover {
      color: #ffffff;
      transform: translateX(4px);
    }

    /* Bottom Copyright Row */
    .footer-bottom-bar {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      margin-top: 60px;
      padding: 28px 0;
    }

    .footer-bottom-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.5);
    }

    .footer-policy-links {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .footer-policy-links a {
      color: rgba(255, 255, 255, 0.5);
      text-decoration: none;
      transition: var(--transition-smooth);
    }

    .footer-policy-links a:hover {
      color: #ffffff;
    }

    /* Responsive adjusts for layout */
    @media (max-width: 1200px) {
      .footer-grid-container {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
      }
      .footer-block:not(:last-child)::after {
        display: none;
      }
    }

    @media (max-width: 768px) {
      .footer-grid-container {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .footer-bottom-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
    }

/* redesigned footer css */