@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900&display=swap'); 
body {padding: 0; margin: 0; font-family: 'Nunito', sans-serif;}
a {text-decoration: none !important; } a:hover {text-decoration: none !important; } 
a:focus {outline: 0px auto -webkit-focus-ring-color !important; outline-offset: 0px !important; } 
.side-info__logo img {background-color: #fff;}
.carousel-control-prev-icon, .carousel-control-next-icon {width: 45px; background-color: #273445; height: 50px; }
.carousel-control-prev, .carousel-control-next {position: absolute; top: 0;  bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 40px; padding: 0; color: #fff; text-align: center; background: none; border: 0; opacity: 0.8; transition: opacity 0.15s ease; }
.carousel-caption {position: absolute; right: 5% !important; bottom: 80px; left: 0; left: 0% !important; z-index: 10; padding-top: 20px; padding-bottom: 10px; color: #fff; text-align: right; }
.carousel-control-prev, .carousel-control-next:focus{outline: none !important;}
/* Header CSS Start */
.header-section {background: #0759C9;padding: 10px 0 10px 0px;}
.header-section .header-widget ul {padding-left: 0;margin-bottom: 0;list-style: none;}
.header-section .header-widget ul li {font-size: 15px;padding-right: 30px;margin-right: 15px;color: #ffffff;float: left;}
.header-section .header-widget ul li::before {position: absolute;content: '';background: #ffffff;width: 4px;height: 23px;right: 0;top: 0px;}
.header-section .header-widget ul li i {margin-right: 5px;font-size: 18px;top: 1px;position: relative;}
.header-section .header-widget ul li a {color: #ffffff; font-weight:500;}
.header-section .header-widget ul :nth-child(2)::before {display: none;}
.header-section .header-social ul {padding-left: 0;margin-bottom: 0;}
.header-section .header-social ul li{ text-decoration:none; list-style:none; float: right;}
.header-section .header-social ul li a i {color: #056839;background: #ffffff;width: 25px;height: 25px;border-radius:5px;display: inline-block;text-align: center;line-height: 28px;margin-left: 5px;position: relative;z-index: 0;-webkit-transition: .5s;transition: .5s;}
.header-section .header-social ul li a i::after {position: absolute;content: '';width: 0;height: 0;background: #249846;top: 0;left: 0;border-radius: 5px;z-index: -1;-webkit-transition: .5s;transition: .5s;}
.header-section .header-social ul li a i:hover::after {width: 100%;height: 100%;}
.header-section .header-social ul li a i:hover {color: #ffffff;}

/* =========================================================
   BRAMHANI INDUSTRIES - WELCOME SECTION
========================================================= */

.bi-welcome-section {position: relative; padding: 110px 0 80px; background: #f6f9fc; overflow: hidden; font-family: "Poppins", Arial, sans-serif;}
.bi-welcome-section::before {content: ""; position: absolute; width: 500px; height: 500px; right: -250px; top: -200px; border-radius: 50%; background: rgba(0, 174, 239, 0.06);}
.bi-container {width: 90%; max-width: 1250px; margin: auto;}

/* GRID */

.bi-welcome-grid {display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; align-items: center;}


/* =========================================================
   LEFT CONTENT
========================================================= */

.bi-welcome-content {position: relative; z-index: 2;}
.bi-section-label {display: flex; align-items: center; gap: 12px; color: #008ed3; font-size: 13px; font-weight: 700; letter-spacing: 2px; margin-bottom: 22px;}
.bi-section-label span {width: 38px; height: 3px; background: linear-gradient(90deg, #008ed3, #00c8ff); display: inline-block;}
.bi-welcome-content h2 {margin: 0 0 25px; font-size: 48px; line-height: 1.12; font-weight: 700; color: #082b4c; letter-spacing: -1px;}
.bi-welcome-content h2 strong {color: #009fe3; display: block;}
.bi-welcome-content p {color: #647586; font-size: 15px; line-height: 1.9; margin: 0 0 14px;}
.bi-welcome-content .bi-intro {font-size: 16px;}
.bi-welcome-content b {color: #123b5d;}


/* =========================================================
   SERVICES
========================================================= */

.bi-service-list {display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 32px 0;}
.bi-service-item {display: flex; align-items: center; gap: 13px; padding: 15px; background: #ffffff; border: 1px solid #e5edf4; transition: all 0.3s ease;}
.bi-service-item:hover {transform: translateY(-4px); border-color: #00a9e8; box-shadow: 0 12px 30px rgba(0, 91, 145, 0.10);}
.bi-service-icon {min-width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: #082f52; color: #ffffff; font-size: 11px; font-weight: 700;}
.bi-service-item h4 {margin: 0 0 3px; color: #123b5d; font-size: 14px;}
.bi-service-item p {margin: 0; font-size: 11px; line-height: 1.5;}


/* BUTTON */

.bi-about-btn {display: inline-flex; align-items: center; gap: 18px; padding: 15px 24px; background: #082f52; color: #ffffff; text-decoration: none; font-size: 13px; font-weight: 600; transition: all 0.3s ease;}
.bi-about-btn span {font-size: 20px; line-height: 10px; color: #00b9f2;}
.bi-about-btn:hover {background: #009fe3; color: #ffffff; transform: translateY(-3px);}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.bi-welcome-visual {min-height: 560px; position: relative; display: flex; align-items: center; justify-content: center;}
.bi-visual-bg {position: absolute; width: 390px; height: 470px; right: 20px; top: 40px; background: linear-gradient(
        145deg,
        #062d50,
        #075b8c 55%,
        #00aeea
    ); clip-path: polygon(
        18% 0,
        100% 0,
        100% 82%,
        78% 100%,
        0 100%,
        0 18%
    );}


/* INDUSTRIAL CARD */

.bi-industrial-card {position: relative; z-index: 3; width: 390px; min-height: 390px; padding: 40px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 25px 70px rgba(0, 43, 75, 0.18); border-left: 5px solid #00a9e8;}
.bi-card-top {display: flex; align-items: center; gap: 10px; color: #6b7c8c; font-size: 10px; font-weight: 700; letter-spacing: 2px;}
.bi-card-line {width: 30px; height: 2px; background: #00a9e8;}
.bi-big-title {margin-top: 35px; font-size: 95px; line-height: 0.9; font-weight: 800; color: #082f52; letter-spacing: -5px;}
.bi-industrial-card > p {color: #657889; font-size: 13px; line-height: 1.7; max-width: 280px; margin: 20px 0 30px;}


/* PROCESS */

.bi-process {display: flex; align-items: center; gap: 7px;}
.bi-process-step {text-align: center;}
.bi-process-circle {width: 42px; height: 42px; border: 2px solid #00a9e8; color: #008ac8; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 10px; font-weight: 700; margin: auto;}
.bi-process-step span {display: block; margin-top: 7px; font-size: 8px; font-weight: 700; color: #244760;}
.bi-process-line {width: 20px; height: 1px; background: #9fc6d9; margin-top: -17px;}


/* EXPERIENCE */

.bi-experience-card {position: absolute; z-index: 5; left: -5px; top: 65px; display: flex; align-items: center; gap: 12px; padding: 15px 20px; background: #ffffff; box-shadow: 0 15px 35px rgba(0, 43, 75, 0.15);}
.bi-experience-number {font-size: 38px; line-height: 1; font-weight: 800; color: #009fe3;}
.bi-experience-number span {font-size: 22px;}
.bi-experience-text {display: flex; flex-direction: column;}
.bi-experience-text strong {color: #082f52; font-size: 13px;}
.bi-experience-text small {color: #758898; font-size: 9px;}


/* LOCATION */

.bi-location-card {position: absolute; z-index: 5; right: 5px; bottom: 35px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #082f52; color: #ffffff; box-shadow: 0 15px 35px rgba(0, 43, 75, 0.20);}
.bi-location-icon {width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; border: 1px solid #00b9f2; border-radius: 50%; color: #00b9f2; font-size: 20px;}
.bi-location-card small {display: block; font-size: 8px; letter-spacing: 1.5px; color: #8bb6ce;}
.bi-location-card strong {display: block; font-size: 11px; margin-top: 3px;}


/* DOTS */

.bi-dots {position: absolute; width: 80px; height: 80px; background-image: radial-gradient(#00a9e8 1.5px, transparent 1.5px); background-size: 10px 10px; opacity: 0.7;}
.bi-dots-one {right: -15px; top: 15px;}
.bi-dots-two {left: 10px; bottom: 20px;}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .bi-welcome-grid {grid-template-columns: 1fr;     gap: 60px;}
.bi-welcome-content {max-width: 750px;}
.bi-welcome-visual {max-width: 600px;     width: 100%;     margin: auto;}
.bi-highlights {grid-template-columns: 1fr 1fr;     row-gap: 25px;}
.bi-highlight:nth-child(2) {border-right: 0;}

}

@media (max-width: 600px) {

    .bi-welcome-section {padding: 70px 0 50px;}
.bi-container {width: 92%;}
.bi-welcome-content h2 {font-size: 36px;}
.bi-service-list {grid-template-columns: 1fr;}
.bi-welcome-visual {min-height: 500px;}
.bi-visual-bg {width: 90%;     right: 5%;     height: 420px;}
.bi-industrial-card {width: 82%;     padding: 28px;     min-height: 340px;}
.bi-big-title {font-size: 70px;}
.bi-experience-card {left: 0;     top: 30px;}
.bi-location-card {right: 0;     bottom: 15px;}
.bi-process {gap: 3px;}
.bi-process-line {width: 8px;}
.bi-process-circle {width: 34px;     height: 34px;     font-size: 8px;}
.bi-highlights {grid-template-columns: 1fr;}
.bi-highlight {border-right: 0;     border-bottom: 1px solid #dce6ed;     padding: 15px 0;}
.bi-highlight:last-child {border-bottom: 0;}
}

/* =========================================================
   BRAMHANI INDUSTRIES - WELCOME SECTION
========================================================= */

/* =========================================================
   BRAMHANI INDUSTRIES
   CORE STRENGTHS SECTION
========================================================= */

.bi-strength-section {position: relative; padding: 100px 0; background: #062c4d; overflow: hidden; font-family: "Poppins", Arial, sans-serif;}


/* BACKGROUND DESIGN */

.bi-strength-section::before {content: ""; position: absolute; width: 600px; height: 600px; right: -250px; top: -250px; border-radius: 50%; border: 1px solid rgba(0, 190, 245, 0.18);}
.bi-strength-section::after {content: ""; position: absolute; width: 450px; height: 450px; left: -280px; bottom: -250px; border-radius: 50%; border: 1px solid rgba(0, 190, 245, 0.15);}
.bi-strength-container {width: 90%; max-width: 1250px; margin: auto; position: relative; z-index: 2;}


/* =========================================================
   HEADING
========================================================= */

.bi-strength-heading {text-align: center; max-width: 720px; margin: 0 auto 55px;}
.bi-strength-label {display: flex; justify-content: center; align-items: center; gap: 14px; color: #08b9f2; font-size: 11px; font-weight: 700; letter-spacing: 3px; margin-bottom: 17px;}
.bi-strength-label span {width: 35px; height: 2px; background: #08b9f2;}
.bi-strength-heading h2 {margin: 0; color: #ffffff; font-size: 46px; line-height: 1.15; font-weight: 700;}
.bi-strength-heading h2 strong {color: #08b9f2;}
.bi-strength-heading p {margin: 18px auto 0; max-width: 600px; color: #9db7c8; font-size: 14px; line-height: 1.8;}


/* =========================================================
   GRID
========================================================= */

.bi-strength-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;}


/* =========================================================
   CARD
========================================================= */

.bi-strength-card {position: relative; display: flex; align-items: center; min-height: 105px; padding: 20px 25px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.09); transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease; overflow: hidden;}
.bi-strength-card::before {content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #08b9f2; transform: scaleY(0); transform-origin: bottom; transition: transform 0.3s ease;}
.bi-strength-card:hover {background: rgba(0, 177, 235, 0.10); border-color: rgba(0, 190, 245, 0.35); transform: translateY(-4px);}
.bi-strength-card:hover::before {transform: scaleY(1);}


/* NUMBER */

.bi-strength-number {position: absolute; right: 15px; top: 10px; color: rgba(255, 255, 255, 0.07); font-size: 40px; font-weight: 800; line-height: 1;}


/* =========================================================
   ICON
========================================================= */

.bi-strength-icon {position: relative; z-index: 2; width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(8, 185, 242, 0.45); background: rgba(8, 185, 242, 0.08); color: #08b9f2; font-size: 19px; transition: all 0.3s ease;}
.bi-strength-card:hover .bi-strength-icon {background: #08b9f2; color: #062c4d; border-color: #08b9f2;}


/* CONTENT */

.bi-strength-content {position: relative; z-index: 2; padding-left: 18px; padding-right: 35px;}
.bi-strength-content h3 {margin: 0 0 5px; color: #ffffff; font-size: 14px; font-weight: 600;}
.bi-strength-content p {margin: 0; color: #8ea9bb; font-size: 11px; line-height: 1.5;}


/* =========================================================
   MANUFACTURING FLOW
========================================================= */

.bi-strength-process {margin-top: 55px; padding: 28px 35px; display: flex; align-items: center; justify-content: space-between; gap: 30px; background:
        linear-gradient(
            100deg,
            rgba(0, 169, 229, 0.13),
            rgba(255, 255, 255, 0.04)
        ); border: 1px solid rgba(8, 185, 242, 0.20);}
.bi-process-title {min-width: 250px;}
.bi-process-title span {display: block; color: #08b9f2; font-size: 9px; font-weight: 700; letter-spacing: 2px; margin-bottom: 7px;}
.bi-process-title strong {display: block; color: #ffffff; font-size: 14px; font-weight: 500;}


/* FLOW */

.bi-process-flow {display: flex; align-items: center; justify-content: flex-end; gap: 13px;}
.bi-flow-item {text-align: center;}
.bi-flow-item span {width: 35px; height: 35px; margin: auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #08b9f2; color: #062c4d; font-size: 9px; font-weight: 800;}
.bi-flow-item b {display: block; margin-top: 7px; color: #dcecf4; font-size: 9px; letter-spacing: 0.5px;}
.bi-process-flow > i {color: #087fae; font-size: 12px;}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .bi-strength-grid {grid-template-columns: 1fr 1fr;}
.bi-strength-process {flex-direction: column;     align-items: flex-start;}
.bi-process-flow {width: 100%;     justify-content: space-between;}

}


@media (max-width: 650px) {

    .bi-strength-section {padding: 70px 0;}
.bi-strength-heading h2 {font-size: 36px;}
.bi-strength-grid {grid-template-columns: 1fr;}
.bi-strength-card {min-height: 95px;}
.bi-strength-process {padding: 25px 20px;}
.bi-process-flow {flex-wrap: wrap;     justify-content: center;     gap: 15px;}
.bi-process-flow > i {display: none;}

}


@media (max-width: 420px) {

    .bi-strength-content h3 {font-size: 13px;}
.bi-strength-content p {font-size: 10px;}
.bi-strength-icon {width: 45px;     height: 45px;     font-size: 16px;}
.bi-strength-content {padding-left: 13px;}

}

/* =========================================================
   BRAMHANI INDUSTRIES
   CORE STRENGTHS SECTION
========================================================= */

/* =====================================================
   BRAMHANI INDUSTRIES
   PRODUCTS / CAPABILITIES SECTION
===================================================== */

.bi-products-section {position: relative; padding: 105px 0 100px; background: #f5f8fb; overflow: hidden; font-family: "Poppins", Arial, sans-serif;}


/* BACKGROUND DECORATION */

.bi-products-section::before {content: ""; position: absolute; width: 450px; height: 450px; left: -250px; top: -200px; border-radius: 50%; background: rgba(0, 166, 229, 0.055);}
.bi-products-section::after {content: ""; position: absolute; width: 300px; height: 300px; right: -150px; bottom: -130px; border-radius: 50%; background: rgba(0, 166, 229, 0.06);}
.bi-products-container {width: 90%; max-width: 1250px; margin: auto; position: relative; z-index: 2;}


/* =====================================================
   SECTION HEADER
===================================================== */

.bi-products-header {text-align: center; max-width: 720px; margin: 0 auto 55px;}
.bi-products-label {display: flex; align-items: center; justify-content: center; gap: 13px; color: #009fe3; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; margin-bottom: 16px;}
.bi-products-label span {width: 35px; height: 2px; background: #00b7ef;}
.bi-products-header h2 {margin: 0; color: #082f52; font-size: 45px; line-height: 1.2; font-weight: 700;}
.bi-products-header h2 strong {color: #009fe3;}
.bi-products-header p {max-width: 650px; margin: 17px auto 0; color: #718394; font-size: 14px; line-height: 1.8;}


/* =====================================================
   PRODUCT GRID
===================================================== */

.bi-products-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px;}


/* =====================================================
   PRODUCT CARD
===================================================== */

.bi-product-card {background: #ffffff; border: 1px solid #e2eaf0; box-shadow: 0 10px 35px rgba(4, 49, 78, 0.06); transition: all 0.4s ease; overflow: hidden;}
.bi-product-card:hover {transform: translateY(-8px); border-color: #00a9e8; box-shadow:
        0 20px 50px rgba(3, 62, 96, 0.14);}


/* =====================================================
   PRODUCT IMAGE
===================================================== */

.bi-product-image {position: relative; height: 235px; overflow: hidden; background:
        linear-gradient(
            135deg,
            #dfeaf1,
            #f8fbfd
        );}
.bi-product-image img {width: 100%; height: 100%; object-fit: cover; display: block; transition:
        transform 0.6s ease,
        filter 0.6s ease;}
.bi-product-card:hover .bi-product-image img {transform: scale(1.08); filter: brightness(0.82);}


/* NUMBER */

.bi-product-number {position: absolute; top: 18px; left: 18px; width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; background: #062f51; color: #ffffff; font-size: 11px; font-weight: 700; z-index: 3;}
.bi-product-number::after {content: ""; position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border-right: 2px solid #00b7ef; border-bottom: 2px solid #00b7ef;}


/* =====================================================
   IMAGE OVERLAY
===================================================== */

.bi-product-overlay {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2, 43, 72, 0.48); opacity: 0; transition: 0.4s ease;}
.bi-product-card:hover .bi-product-overlay {opacity: 1;}
.bi-product-arrow {width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; background: #00afea; color: #ffffff; text-decoration: none; border-radius: 50%; font-size: 16px; transform: translateY(15px); transition: 0.4s ease;}
.bi-product-card:hover .bi-product-arrow {transform: translateY(0);}
.bi-product-arrow:hover {background: #ffffff; color: #008fce;}


/* =====================================================
   PRODUCT INFORMATION
===================================================== */

.bi-product-info {display: flex; gap: 17px; padding: 25px 23px 27px;}
.bi-product-icon {width: 45px; height: 45px; min-width: 45px; display: flex; align-items: center; justify-content: center; background: #e8f7fc; color: #009fe3; font-size: 17px; transition: 0.3s ease;}
.bi-product-card:hover .bi-product-icon {background: #009fe3; color: #ffffff;}
.bi-product-info h3 {margin: 0 0 7px; color: #123b5d; font-size: 16px; font-weight: 700;}
.bi-product-info p {margin: 0; color: #788a99; font-size: 11px; line-height: 1.65;}


/* =====================================================
   FEATURED CARD
===================================================== */

.bi-product-featured {border-bottom: 3px solid #00a9e8;}


/* =====================================================
   BOTTOM CTA
===================================================== */

.bi-products-bottom {margin-top: 55px; padding: 28px 35px; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: #062f51; position: relative; overflow: hidden;}
.bi-products-bottom::after {content: ""; position: absolute; width: 250px; height: 250px; right: -80px; top: -130px; border-radius: 50%; border: 1px solid rgba(0, 190, 245, 0.3);}
.bi-products-bottom span {color: #00b8f0; font-size: 9px; font-weight: 700; letter-spacing: 2px;}
.bi-products-bottom h3 {margin: 7px 0 0; color: #ffffff; font-size: 19px; font-weight: 500;}


/* CTA BUTTON */

.bi-products-btn {position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 15px; padding: 14px 21px; background: #00a9e8; color: #ffffff; text-decoration: none; font-size: 11px; font-weight: 600; white-space: nowrap; transition: 0.3s ease;}
.bi-products-btn i {font-size: 11px;}
.bi-products-btn:hover {background: #ffffff; color: #062f51; transform: translateX(4px);}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .bi-products-grid {grid-template-columns: repeat(2, 1fr);}
.bi-products-bottom {flex-direction: column;     align-items: flex-start;}

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {

    .bi-products-section {padding: 70px 0;}
.bi-products-header h2 {font-size: 35px;}
.bi-products-grid {grid-template-columns: 1fr;}
.bi-product-image {height: 240px;}
.bi-products-bottom {padding: 25px 22px;}
.bi-products-bottom h3 {font-size: 17px;}
.bi-products-btn {width: 100%;     justify-content: center;}

}

/* =========================================
   MANUFACTURING PROCESS SECTION
========================================= */

.manufacturing-process {position: relative; padding: 100px 20px; background: #f5f7fa; overflow: hidden;}
.manufacturing-process::before {content: ""; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: rgba(20, 73, 128, 0.05); top: -250px; right: -150px;}
.manufacturing-process::after {content: ""; position: absolute; width: 350px; height: 350px; border-radius: 50%; background: rgba(20, 73, 128, 0.04); bottom: -180px; left: -120px;}
.process-container {max-width: 1250px; margin: auto; position: relative; z-index: 2;}


/* =========================================
   HEADING
========================================= */

.process-heading {text-align: center; margin-bottom: 75px;}
.process-subtitle {display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 3px; color: #118CC6; margin-bottom: 12px;}
.process-heading h2 {margin: 0; font-size: 42px; line-height: 1.2; font-weight: 800; color: #172333;}
.process-heading h2 strong {color: #14528c;}
.process-heading p {margin-top: 15px; font-size: 17px; color: #697586;}


/* =========================================
   PROCESS TIMELINE
========================================= */

.process-timeline {display: grid; grid-template-columns: repeat(4, 1fr); gap: 55px 30px; position: relative;}


/* Horizontal connecting line */
.process-timeline::before {content: ""; position: absolute; top: 55px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, #14528c, #118CC6, #14528c); opacity: 0.25;}


/* =========================================
   PROCESS STEP
========================================= */

.process-step {position: relative; text-align: center; z-index: 2;}
.step-number {position: absolute; top: -18px; right: 22%; font-size: 11px; font-weight: 800; color: #14528c; background: #ffffff; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); z-index: 5;}
.step-icon {width: 110px; height: 110px; margin: auto; border-radius: 50%; background: #ffffff; border: 2px solid #e7edf4; display: flex; align-items: center; justify-content: center; color: #14528c; font-size: 34px; box-shadow: 0 12px 35px rgba(25, 55, 90, 0.10); transition: all 0.35s ease;}
.process-step:hover .step-icon {background: #14528c; color: #ffffff; border-color: #14528c; transform: translateY(-8px); box-shadow: 0 18px 40px rgba(20, 82, 140, 0.25);}
.step-content {margin-top: 22px; padding: 0 8px;}
.step-content h3 {margin: 0; font-size: 16px; line-height: 1.45; font-weight: 700; color: #172333;}
.step-content span {display: block; margin-top: 7px; font-size: 12px; font-weight: 600; color: #118CC6; text-transform: uppercase; letter-spacing: 1px;}


/* =========================================
   FINISHED COMPONENT
========================================= */

.finished-component {width: fit-content; min-width: 360px; margin: 70px auto 0; padding: 18px 32px; display: flex; align-items: center; gap: 18px; background: #14528c; color: #ffffff; border-radius: 12px; box-shadow: 0 18px 45px rgba(20, 82, 140, 0.25);}
.finished-icon {width: 52px; height: 52px; border-radius: 50%; background: #ffffff; color: #14528c; display: flex; align-items: center; justify-content: center; font-size: 23px;}
.finished-component span {font-size: 10px; font-weight: 700; letter-spacing: 2px; opacity: 0.75;}
.finished-component h3 {margin: 4px 0 0; font-size: 22px; letter-spacing: 1px;}


/* =========================================
   DESCRIPTION
========================================= */

.process-description {max-width: 850px; margin: 35px auto 0; text-align: center;}
.process-description p {margin: 0; color: #626f7e; font-size: 16px; line-height: 1.8;}
.process-description strong {color: #172333;}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .process-heading h2 {font-size: 34px;}
.process-timeline {grid-template-columns: repeat(2, 1fr);     gap: 50px 25px;}
.process-timeline::before {display: none;}

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .manufacturing-process {padding: 70px 15px;}
.process-heading {margin-bottom: 50px;}
.process-heading h2 {font-size: 28px;}
.process-heading p {font-size: 15px;}
.process-timeline {grid-template-columns: 1fr;     gap: 28px;}
.process-step {display: flex;     align-items: center;     text-align: left;     padding: 12px 15px;     background: #ffffff;     border-radius: 12px;     box-shadow: 0 8px 25px rgba(20, 40, 70, 0.07);}
.step-icon {width: 70px;     height: 70px;     min-width: 70px;     margin: 0 18px 0 0;     font-size: 25px;}
.step-number {top: 5px;     right: auto;     left: 66px;     width: 24px;     height: 24px;     font-size: 9px;}
.step-content {margin-top: 0;}
.step-content h3 {font-size: 15px;}
.step-content span {font-size: 10px;}
.finished-component {min-width: 0;     width: 100%;     margin-top: 45px;     padding: 15px 18px;}
.finished-component h3 {font-size: 18px;}
.process-description {margin-top: 25px;}
.process-description p {font-size: 14px;}
}

/* =========================================
   WHY BRAMHANI INDUSTRIES
========================================= */

.why-bramhani {position: relative; padding: 110px 20px; background: #ffffff; overflow: hidden;}
.why-bramhani::before {content: ""; position: absolute; width: 450px; height: 450px; border-radius: 50%; background: #f2f6fa; top: -220px; right: -180px;}
.why-bramhani::after {content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: #f7f9fb; bottom: -160px; left: -120px;}
.why-container {max-width: 1250px; margin: auto; position: relative; z-index: 2;}


/* =========================================
   HEADING
========================================= */

.why-heading {max-width: 850px; margin: 0 auto 70px; text-align: center;}
.why-heading > span {display: inline-block; margin-bottom: 13px; color: #118CC6; font-size: 13px; font-weight: 800; letter-spacing: 3px;}
.why-heading h2 {margin: 0; color: #172333; font-size: 42px; line-height: 1.2; font-weight: 800;}
.why-heading h2 strong {color: #14528c;}
.why-heading p {max-width: 720px; margin: 18px auto 0; color: #697586; font-size: 16px; line-height: 1.8;}


/* =========================================
   MAIN AREA
========================================= */

.why-main {display: grid; grid-template-columns: 350px 1fr; gap: 35px; align-items: stretch;}


/* =========================================
   EXPERIENCE BOX
========================================= */

.experience-box {position: relative; overflow: hidden; padding: 40px 35px; min-height: 100%; border-radius: 18px; background: #14528c; color: #ffffff; box-shadow: 0 20px 50px rgba(20, 82, 140, 0.20);}
.experience-box::before {content: ""; position: absolute; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; right: -100px; bottom: -80px;}
.experience-box::after {content: ""; position: absolute; width: 130px; height: 130px; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; right: 25px; bottom: 25px;}
.experience-top {position: relative; z-index: 2; display: flex; align-items: center; gap: 12px;}
.experience-top i {width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; font-size: 18px;}
.experience-top span {font-size: 11px; font-weight: 700; letter-spacing: 2px;}
.experience-number {position: relative; z-index: 2; margin-top: 45px; font-size: 105px; line-height: 0.9; font-weight: 900; letter-spacing: -6px;}
.experience-number span {color: #118CC6; font-size: 60px; vertical-align: top; letter-spacing: 0;}
.experience-box h3 {position: relative; z-index: 2; margin: 20px 0 0; font-size: 23px; line-height: 1.35;}
.experience-box p {position: relative; z-index: 2; margin-top: 18px; color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.7;}
.experience-line {position: relative; z-index: 2; width: 55px; height: 3px; margin-top: 30px; background: #118CC6;}
.experience-bottom {position: relative; z-index: 2; margin-top: 22px;}
.experience-bottom span {display: block; color: rgba(255,255,255,0.55); font-size: 9px; letter-spacing: 2px;}
.experience-bottom strong {display: block; margin-top: 5px; font-size: 13px;}


/* =========================================
   CARDS GRID
========================================= */

.why-cards {display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;}


/* =========================================
   WHY CARD
========================================= */

.why-card {position: relative; display: flex; align-items: flex-start; gap: 18px; padding: 25px; background: #f7f9fb; border: 1px solid #e8edf2; border-radius: 14px; transition: all 0.35s ease; overflow: hidden;}
.why-card::before {content: ""; position: absolute; width: 4px; height: 0; left: 0; top: 0; background: #118CC6; transition: all 0.35s ease;}
.why-card:hover {background: #ffffff; transform: translateY(-6px); border-color: #d9e3ec; box-shadow: 0 15px 35px rgba(30, 55, 80, 0.10);}
.why-card:hover::before {height: 100%;}


/* =========================================
   ICON
========================================= */

.why-icon {width: 55px; height: 55px; min-width: 55px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #ffffff; color: #14528c; font-size: 21px; box-shadow: 0 7px 20px rgba(20, 40, 70, 0.08); transition: all 0.35s ease;}
.why-card:hover .why-icon {background: #14528c; color: #ffffff; transform: rotate(-5deg);}


/* =========================================
   CARD CONTENT
========================================= */

.why-card-content {flex: 1;}
.why-card-content > span {display: block; margin-bottom: 5px; color: #118CC6; font-size: 10px; font-weight: 800; letter-spacing: 1px;}
.why-card-content h3 {margin: 0; color: #172333; font-size: 17px; line-height: 1.3; font-weight: 750;}
.why-card-content p {margin: 8px 0 0; color: #697586; font-size: 13px; line-height: 1.55;}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .why-main {grid-template-columns: 280px 1fr;}
.experience-number {font-size: 80px;}
.experience-number span {font-size: 45px;}
.why-card {padding: 20px;}

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .why-bramhani {padding: 75px 15px;}
.why-heading {margin-bottom: 45px;}
.why-heading h2 {font-size: 30px;}
.why-heading p {font-size: 14px;}
.why-main {grid-template-columns: 1fr;     gap: 25px;}
.experience-box {min-height: auto;     padding: 30px;}
.experience-number {margin-top: 30px;     font-size: 80px;}
.why-cards {grid-template-columns: 1fr;}
.why-card {padding: 22px;}

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 450px) {

    .why-heading h2 {font-size: 26px;}
.experience-number {font-size: 70px;}
.experience-number span {font-size: 40px;}
.experience-box h3 {font-size: 20px;}
.why-card-content h3 {font-size: 16px;}

}

/* =========================================
   INDUSTRIES MODERN SECTION
========================================= */

.industries-modern {padding: 90px 20px; background: #f5f7fa;}
.industries-wrap {max-width: 1200px; margin: auto;}
.industries-title {text-align: center; max-width: 750px; margin: 0 auto 50px;}
.industries-title span {color: #118CC6; font-size: 11px; font-weight: 800; letter-spacing: 3px;}
.industries-title h2 {margin: 10px 0; color: #172333; font-size: 38px; font-weight: 800;}
.industries-title h2 strong {color: #14528c;}
.industries-title p {margin: 0; color: #788493; font-size: 15px; line-height: 1.7;}
.industry-list {display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #e3e8ed; border-left: 1px solid #e3e8ed;}
.industry-item {position: relative; min-height: 105px; padding: 20px 18px; display: flex; align-items: center; gap: 15px; border-right: 1px solid #e3e8ed; border-bottom: 1px solid #e3e8ed; background: #ffffff; transition: all 0.3s ease;}
.industry-item::before {content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: #118CC6; transition: width 0.3s ease;}
.industry-item:hover::before {width: 100%;}
.industry-item:hover {background: #f8fafc;}


/* =========================================
   ICON
========================================= */

.industry-icon {width: 48px; height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #eef4f8; color: #14528c; font-size: 18px; transition: all 0.3s ease;}
.industry-item:hover .industry-icon {background: #14528c; color: #ffffff; transform: scale(1.08);}


/* =========================================
   TEXT
========================================= */

.industry-text {padding-right: 20px;}
.industry-text small {display: block; margin-bottom: 4px; color: #118CC6; font-size: 9px; font-weight: 800; letter-spacing: 1px;}
.industry-text h3 {margin: 0; color: #263442; font-size: 14px; line-height: 1.35; font-weight: 700;}


/* =========================================
   ARROW
========================================= */

.industry-go {position: absolute; right: 18px; color: #a8b2bd; font-size: 11px; transition: all 0.3s ease;}
.industry-item:hover .industry-go {color: #118CC6; transform: translateX(4px);}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .industry-list {grid-template-columns: repeat(2, 1fr);}
.industries-title h2 {font-size: 32px;}

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .industries-modern {padding: 70px 15px;}
.industries-title {margin-bottom: 35px;}
.industries-title h2 {font-size: 27px;}
.industries-title p {font-size: 14px;}
.industry-list {grid-template-columns: 1fr;}
.industry-item {min-height: 82px;     padding: 15px;}
.industry-icon {width: 42px;     height: 42px;     min-width: 42px;     font-size: 16px;}
.industry-text h3 {font-size: 13px;}

}



/***********Whatsapp here**************/
.whatsapp_btn{position: fixed;bottom: 100px;right: 10px;width: 50px;height: 50px;z-index:100;}
.whatsapp_btn .icon_logo{position: relative;z-index:150;padding: 5px;}
.whatsapp_btn .icon_logo > a > img{width: 100%;}
.whatsapp_btn .circle_waves{border-radius: 50%;background-color: #3cc04e;width: 50px;height: 50px;position: absolute;opacity: 0;bottom: 1px;left: 0px;z-index:120;animation: waves 4s infinite cubic-bezier(.36, .11, .89, .32);}
@keyframes waves {from {transform: scale(.55, .55);opacity: .6;}
to {transform: scale(1.8, 1.8);opacity: 0;}}
/***********Whatsapp here**************/


 /* =========================================
    BRAMHANI INDUSTRIES FOOTER
 ========================================= */
.flogo {background-color: #fff; border-radius: 5px; padding: 10px; width: 100%; height: auto;}
.flogo img {width: 100%; height: auto;}
.bramhani-footer {position: relative; background: #101d2b; color: #ffffff; overflow: hidden;}


/* Decorative Background */

.bramhani-footer::before {content: ""; position: absolute; width: 500px; height: 500px; border: 1px solid rgba(255,255,255,0.04); border-radius: 50%; top: -280px; right: -120px;}
.bramhani-footer::after {content: ""; position: absolute; width: 350px; height: 350px; border: 1px solid rgba(255,255,255,0.03); border-radius: 50%; bottom: -220px; left: -120px;}
.footer-container {max-width: 1250px; margin: auto; padding: 75px 20px 0; position: relative; z-index: 2;}


/* =========================================
   FOOTER MAIN
========================================= */

.footer-main {display: grid; grid-template-columns: 1.5fr 0.8fr 1fr 1.2fr; gap: 55px; padding-bottom: 60px;}


/* =========================================
   COMPANY
========================================= */

.footer-company {max-width: 330px;}


/* Logo */

.footer-logo {display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: #ffffff;}
.logo-mark {width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #14528c; color: #ffffff; border-radius: 10px; font-size: 22px;}
.logo-text {display: flex; flex-direction: column;}
.logo-text strong {font-size: 23px; line-height: 1; letter-spacing: 1px;}
.logo-text small {margin-top: 5px; color: #118CC6; font-size: 10px; font-weight: 700; letter-spacing: 3px;}
.footer-company > p {margin: 25px 0; color: #9ba8b6; font-size: 14px; line-height: 1.8;}


/* Experience */

.footer-experience {display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.09);}
.footer-experience strong {color: #118CC6; font-size: 38px; line-height: 1;}
.footer-experience span {color: #aab4bf; font-size: 11px; line-height: 1.4;}


/* =========================================
   FOOTER COLUMNS
========================================= */

.footer-column h3,
.footer-contact h3 {position: relative; margin: 4px 0 25px; padding-bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: 2px;}
.footer-column h3::after,
.footer-contact h3::after {content: ""; position: absolute; left: 0; bottom: 0; width: 35px; height: 2px; background: #118CC6;}


/* Links */

.footer-column ul {list-style: none; padding: 0; margin: 0;}
.footer-column ul li {margin-bottom: 13px;}
.footer-column ul li a {display: inline-flex; align-items: center; gap: 9px; color: #9ba8b6; text-decoration: none; font-size: 13px; transition: all 0.3s ease;}
.footer-column ul li a i {color: #118CC6; font-size: 9px; transition: transform 0.3s ease;}
.footer-column ul li a:hover {color: #ffffff; transform: translateX(4px);}
.footer-column ul li a:hover i {transform: translateX(3px);}


/* =========================================
   CONTACT
========================================= */

.contact-item {display: flex; align-items: flex-start; gap: 13px; margin-bottom: 20px;}
.contact-icon {width: 38px; height: 38px; min-width: 38px; border-radius: 8px; background: rgba(20,82,140,0.35); display: flex; align-items: center; justify-content: center; color: #118CC6; font-size: 14px;}
.contact-item span {display: block; margin-bottom: 4px; color: #697989; font-size: 9px; font-weight: 800; letter-spacing: 1.5px;}
.contact-item p,
.contact-item a {margin: 0; color: #aab4bf; text-decoration: none; font-size: 13px; line-height: 1.5;}
.contact-item a:hover {color: #ffffff;}


/* =========================================
   SOCIAL
========================================= */

.footer-social {display: flex; gap: 8px; margin-top: 25px;}
.footer-social a {width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #aab4bf; text-decoration: none; font-size: 13px; transition: all 0.3s ease;}
.footer-social a:hover {background: #14528c; border-color: #14528c; color: #ffffff; transform: translateY(-3px);}


/* =========================================
   FOOTER BOTTOM
========================================= */

.footer-bottom {min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,0.09);}
.footer-bottom p {margin: 0; color: #748291; font-size: 11px;}
.footer-bottom p strong {color: #aab4bf;}
.footer-bottom-links {display: flex; align-items: center; gap: 10px;}
.footer-bottom-links a {color: #748291; text-decoration: none; font-size: 11px;}
.footer-bottom-links span {color: #3e4b58;}
.footer-bottom-links a:hover {color: #ffffff;}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .footer-main {grid-template-columns: repeat(2, 1fr);     gap: 45px 35px;}
.footer-company {max-width: 100%;}

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .footer-container {padding: 55px 20px 0;}
.footer-main {grid-template-columns: 1fr;     gap: 40px;     padding-bottom: 45px;}
.footer-company {max-width: 100%;}
.footer-bottom {padding: 20px 0;     flex-direction: column;     text-align: center;     gap: 10px;}
.footer-bottom-links {justify-content: center;     flex-wrap: wrap;}

}