*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Poppins',sans-serif;color:#292929}
a{text-decoration:none}

.site-header{height:92px;background:#fff;border-bottom:1px solid #eee;position:relative;z-index:999;transition:.3s}
.header-inner{max-width:1350px;height:100%;margin:auto;padding:0 25px;display:flex;align-items:center;justify-content:space-between}
.site-logo{display:flex;align-items:center}
.site-logo img{width:78px;height:auto;display:block}
.main-nav{display:flex;align-items:center;gap:38px;height:100%}
.main-nav a{position:relative;height:100%;display:flex;align-items:center;color:#14212b;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.2px;transition:.3s}
.main-nav a:after{content:"";position:absolute;left:0;bottom:25px;width:0;height:2px;background:#ff6335;transition:.3s}
.main-nav a:hover{color:#ff6335}
.main-nav a:hover:after{width:100%}

.menu-toggle{display:none;border:0;background:#005365;padding:10px 11px;border-radius:3px;cursor:pointer}
.menu-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:.3s}

.hero-slider{height:650px;position:relative;overflow:hidden;background:#003f4d}
.hero-slides,.hero-slide{position:absolute;inset:0}
.hero-slide{background:center/cover no-repeat;opacity:0;transform:scale(1.05);transition:opacity .8s ease,transform 6s ease}
.hero-slide.active{opacity:1;transform:scale(1)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,35,45,.88),rgba(0,45,55,.48),rgba(0,0,0,.12))}
.hero-content{position:relative;z-index:2;max-width:1200px;margin:auto;padding:175px 30px;color:#fff}
.hero-content span{display:block;color:#ff7043;font-size:14px;font-weight:700;letter-spacing:2px;margin-bottom:18px}
.hero-content h1{font-size:58px;line-height:1.12;font-weight:400;margin:0 0 22px;max-width:750px}
.hero-content h1 b{color:#ff7043;font-weight:600}
.hero-content p{font-size:17px;line-height:1.8;max-width:600px;margin:0 0 30px;color:#eee}
.hero-btn{display:inline-flex;align-items:center;gap:15px;padding:15px 25px;background:#ff7043;color:#fff;text-decoration:none;font-size:13px;font-weight:700}
.hero-btn i{transition:.3s}
.hero-btn:hover i{transform:translateX(5px)}
.hero-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid rgba(255,255,255,.5);border-radius:0;background:rgba(0,50,60,.5);color:#fff;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
.hero-arrow:hover{background:#ff7043;border-color:#ff7043}
.hero-prev{left:30px}
.hero-next{right:30px}
.hero-dots{position:absolute;z-index:5;left:50%;bottom:35px;transform:translateX(-50%);display:flex;gap:9px}
.hero-dots span{width:28px;height:3px;background:rgba(255,255,255,.45);cursor:pointer;transition:.3s}
.hero-dots span.active{width:50px;background:#ff7043}

/* About */
.about-section {    padding: 90px 0;    background: #fff;}
.about-wrap {    display: grid;    grid-template-columns: 1fr 1fr;    gap: 70px;    align-items: center;}
.section-tag {    display: block;    margin-bottom: 12px;    color: #2875b9;    font-size: 12px;    font-weight: 700;    letter-spacing: 2px;}
.about-content h2, .section-heading h2 {    margin: 0 0 25px;    color: #172b3a;    font-size: 44px;    font-weight: 400;}
.about-content h2 span, .section-heading h2 span {    color: #2875b9;    font-weight: 600;}
.about-content p {    margin: 0 0 18px;    color: #555;    font-size: 15px;    line-height: 1.85;}
.about-image {    height: 500px;    overflow: hidden;    position: relative;}
.about-image img {    width: 100%;    height: 100%;    display: block;    object-fit: cover;    transition: .5s;}
.about-image:hover img {    transform: scale(1.04);}
/* Mission & Vision */
.mission-vision-section {    padding: 90px 0;    background: #f5f8fa;}
.section-heading {    max-width: 650px;    margin: 0 auto 50px;    text-align: center;}
.section-heading p {    margin: 0;    color: #666;    font-size: 15px;    line-height: 1.7;}
.mv-grid {    display: grid;    grid-template-columns: repeat(2, 1fr);    gap: 30px;}
.mv-card {    position: relative;    padding: 45px;    background: #fff;    border: 1px solid #e5e9ed;    overflow: hidden;    transition: .35s;}
.mv-card:before {    content: "";    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 4px;    background: #2875b9;}
.vision-card:before {    background: #ff7043;}
.mv-card:hover {    transform: translateY(-6px);    box-shadow: 0 18px 40px rgba(0, 40, 70, .10);}
.mv-icon {    width: 58px;    height: 58px;    margin-bottom: 22px;    display: flex;    align-items: center;    justify-content: center;    background: #eaf3fa;    color: #2875b9;    font-size: 22px;}
.vision-card .mv-icon {    background: #fff0eb;    color: #ff7043;}
.mv-number {    position: absolute;    top: 35px;    right: 40px;    color: #e6ebee;    font-size: 45px;    font-weight: 700;}
.mv-card h3 {    margin: 0 0 20px;    color: #172b3a;    font-size: 29px;    font-weight: 500;}
.mv-card p {    margin: 0 0 16px;    color: #555;    font-size: 15px;    line-height: 1.8;}
.mv-card p:last-child {    margin-bottom: 0;}

.services-section {
    position: relative;
    padding: 90px 0;
    background: url("../images/services-bg.jpg") center/cover no-repeat;
    overflow: hidden;
}

.services-overlay {    position: absolute;    inset: 0;    background: rgba(8, 55, 105, .88);}
.services-section .container {    position: relative;    z-index: 2;}
.services-heading {    max-width: 650px;    margin: 0 auto 50px;    text-align: center;    color: #fff;}
.section-tag {    display: block;    margin-bottom: 12px;    color: #ff7043;    font-size: 12px;    font-weight: 700;    letter-spacing: 2px;}
.services-heading h2 {    margin: 0 0 18px;    font-size: 44px;    font-weight: 400;}
.services-heading h2 span {    color: #ff7043;    font-weight: 600;}
.services-heading p {    margin: 0;    color: rgba(255,255,255,.8);    font-size: 15px;    line-height: 1.7;}
.services-grid {    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 25px;}
.service-card {    position: relative;    padding: 38px 35px;    background: #fff;    border-radius: 4px;    overflow: hidden;    transition: .35s;}
.service-card:before {    content: "";    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 4px;    background: #2875b9;    transition: .35s;}
.service-card:hover {    transform: translateY(-8px);    box-shadow: 0 20px 45px rgba(0,0,0,.18);}
.service-card:hover:before {    background: #ff7043;}
.service-top {    display: flex;    align-items: center;    justify-content: space-between;    margin-bottom: 25px;}
.service-icon {    width: 58px;    height: 58px;    display: flex;    align-items: center;    justify-content: center;    background: #edf5fb;    color: #2875b9;    font-size: 22px;    transition: .35s;}
.service-card:hover .service-icon {    background: #ff7043;    color: #fff;}
.service-top > span {    color: #dfe6eb;    font-size: 40px;    font-weight: 700;}
.service-card h3 {    margin: 0;    color: #172b3a;    font-size: 24px;    font-weight: 600;}
.service-line {    width: 45px;    height: 3px;    margin: 18px 0;    background: #ff7043;}
.service-card p {    min-height: 185px;    margin: 0;    color: #666;    font-size: 14px;    line-height: 1.8;}
.service-card a {    display: inline-flex;    align-items: center;    gap: 10px;    margin-top: 25px;    color: #2875b9;    font-size: 13px;    font-weight: 700;    text-decoration: none;}
.service-card a i {    transition: .3s;}
.service-card a:hover i {    transform: translateX(5px);}




/* About Hero */
.about-hero {    height: 430px;    position: relative;    background: url("../images/about-banner.jpg") center/cover no-repeat;}
.about-hero-overlay {    position: absolute;    inset: 0;    background: linear-gradient(90deg, rgba(7,48,78,.9), rgba(7,48,78,.45));}
.about-hero-content {    position: relative;    z-index: 2;    padding-top: 145px;    color: #fff;}
.about-hero-content span,.section-tag {    color: #ff7043;    font-size: 12px;    font-weight: 700;    letter-spacing: 2px;}
.about-hero h1 {    margin: 12px 0;    font-size: 58px;    font-weight: 300;}
.about-hero h1 strong {    color: #ff7043;    font-weight: 600;}
.about-hero p {    margin: 0;    color: #e5edf2;    font-size: 16px;}
/* About Company */
.about-company {    padding: 95px 0;    background: #fff;}
.about-company-grid {    display: grid;    grid-template-columns: 1fr 1fr;    gap: 75px;    align-items: center;}
.about-company-content h2,.section-heading h2,.why-content h2 {    margin: 15px 0 25px;    color: #172b3a;    font-size: 43px;    font-weight: 400;}
.about-company-content h2 strong,.section-heading h2 strong,.why-content h2 strong {    color: #2875b9;    font-weight: 600;}
.about-company-content p,.why-content p {    margin: 0 0 17px;    color: #555;    font-size: 15px;    line-height: 1.85;}
.about-company-image {    height: 500px;    position: relative;}
.about-company-image img {    width: 100%;    height: 100%;    object-fit: cover;    display: block;}
.experience-box {    position: absolute;    left: -30px;    bottom: 30px;    padding: 22px 30px;    background: #2875b9;    color: #fff;}
.experience-box strong {    display: block;    font-size: 35px;}
.experience-box span {    font-size: 12px;    text-transform: uppercase;    letter-spacing: 1px;}
.about-highlight {    display: flex;    align-items: center;    gap: 18px;    margin-top: 28px;    padding-top: 22px;    border-top: 1px solid #e5e9ed;}
.about-highlight strong {    color: #2875b9;    font-size: 25px;}
.about-highlight span {    color: #666;    font-size: 13px;}
/* Mission Vision */
.mission-vision {    padding: 95px 0;    background: #f5f8fa;}
.section-heading {    max-width: 680px;    margin: 0 auto 50px;    text-align: center;}
.section-heading p {    margin: 0;    color: #666;    font-size: 15px;    line-height: 1.7;}
.mv-grid {    display: grid;    grid-template-columns: 1fr 1fr;    gap: 28px;}
.mv-card {    position: relative;    padding: 45px;    background: #fff;    border: 1px solid #e2e8ec;    overflow: hidden;    transition: .35s;}
.mv-card:before {    content: "";    position: absolute;    left: 0;    top: 0;    width: 5px;    height: 100%;    background: #2875b9;}
.mv-card.vision-card:before {    background: #ff7043;}
.mv-card:hover {    transform: translateY(-7px);    box-shadow: 0 20px 45px rgba(0,40,70,.1);}
.mv-icon {    width: 58px;    height: 58px;    display: flex;    align-items: center;    justify-content: center;    background: #eaf3fa;    color: #2875b9;    font-size: 22px;    margin-bottom: 22px;}
.vision-card .mv-icon {    background: #fff0eb;    color: #ff7043;}
.mv-number {    position: absolute;    top: 30px;    right: 35px;    color: #e8edf0;    font-size: 48px;    font-weight: 700;}
.mv-card h3 {    margin: 0 0 20px;    color: #172b3a;    font-size: 29px;}
.mv-card p {    margin: 0 0 16px;    color: #555;    font-size: 15px;    line-height: 1.8;}
/* Why Dwivsonchem */
.why-dwivson {    padding: 95px 0;    background: #fff;}
.why-grid {    display: grid;    grid-template-columns: 1fr 1fr;    gap: 80px;    align-items: center;}
.why-features {    display: grid;    grid-template-columns: 1fr 1fr;    gap: 18px;}
.why-item {    padding: 28px;    background: #f5f8fa;    border: 1px solid #e5eaed;    transition: .3s;}
.why-item:hover {    background: #2875b9;    transform: translateY(-5px);}
.why-item i {    margin-bottom: 18px;    color: #ff7043;    font-size: 25px;}
.why-item:hover i,.why-item:hover h3,.why-item:hover p {    color: #fff;}
.why-item h3 {    margin: 0 0 8px;    color: #172b3a;    font-size: 17px;}
.why-item p {    margin: 0;    color: #777;    font-size: 13px;    line-height: 1.6;}
/* Values */
.business-values {    padding: 90px 0;    background: #f5f8fa;}
.values-grid {    display: grid;    grid-template-columns: repeat(4, 1fr);    gap: 20px;}
.value-box {    padding: 35px 25px;    background: #fff;    text-align: center;    border: 1px solid #e4e9ed;    transition: .3s;}
.value-box:hover {    transform: translateY(-6px);    box-shadow: 0 15px 35px rgba(0,40,70,.08);}
.value-box i {    color: #2875b9;    font-size: 27px;    margin-bottom: 20px;}
.value-box h3 {    margin: 0 0 12px;    color: #172b3a;    font-size: 17px;}
.value-box p {    margin: 0;    color: #666;    font-size: 13px;    line-height: 1.7;}

/* Products Hero */

.products-hero {
    height: 420px;
    position: relative;
    background: url("../images/products-banner.jpg") center/cover no-repeat;
}

.products-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(7, 48, 78, .92),
        rgba(7, 48, 78, .48)
    );
}

.products-hero-content {
    position: relative;
    z-index: 2;
    padding-top: 140px;
    color: #fff;
}

.products-hero-content span {
    color: #ff7043;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.products-hero-content h1 {
    margin: 12px 0;
    font-size: 58px;
    font-weight: 300;
}

.products-hero-content h1 strong {
    color: #ff7043;
    font-weight: 600;
}

.products-hero-content p {
    max-width: 560px;
    margin: 0;
    color: #e4edf2;
    font-size: 16px;
    line-height: 1.7;
}


/* Products Section */

.products-section {
    padding: 95px 0;
    background: #f6f9fb;
}

.products-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 50px;
}

.products-heading h2 {
    margin: 15px 0 0;
    color: #172b3a;
    font-size: 42px;
    font-weight: 400;
}

.products-heading h2 strong {
    color: #2875b9;
    font-weight: 600;
}

.products-heading p {
    max-width: 430px;
    margin: 0 0 4px;
    color: #666;
    font-size: 14px;
    line-height: 1.8;
}


/* Product Grid */

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

.product-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e9ed;
    transition: .35s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    border-color: #d5e1e8;
    box-shadow: 0 18px 40px rgba(0, 40, 70, .10);
}


/* Product Image */

.product-image {
    height: 290px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 18px;
    background: #fff;
}

.product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transition: .45s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}


/* Image Overlay */

.product-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 48, 78, .72);
    opacity: 0;
    transition: .35s ease;
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.product-view {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 20px;
    border: 0;
    background: #ff7043;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

.product-view:hover {
    background: #fff;
    color: #2875b9;
}


/* Product Information */

.product-info {
    padding: 22px 24px 25px;
    border-top: 1px solid #edf0f2;
}

.product-info span {
    display: block;
    margin-bottom: 8px;
    color: #ff7043;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.product-info h3 {
    margin: 0 0 16px;
    color: #172b3a;
    font-size: 18px;
    font-weight: 600;
}

.product-info a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2875b9;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: .3s;
}

.product-info a i {
    font-size: 11px;
    transition: .3s;
}

.product-info a:hover {
    color: #ff7043;
}

.product-info a:hover i {
    transform: translateX(4px);
}


/* Product Lightbox */

.product-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(4, 22, 35, .92);
    opacity: 0;
    visibility: hidden;
    transition: .3s ease;
}

.product-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-inner {
    width: min(850px, 100%);
    position: relative;
    padding: 30px;
    background: #fff;
}

.lightbox-inner img {
    width: 100%;
    max-height: 650px;
    display: block;
    object-fit: contain;
}

.lightbox-close {
    width: 42px;
    height: 42px;
    position: absolute;
    top: -20px;
    right: -20px;
    z-index: 3;
    border: 0;
    border-radius: 50%;
    background: #ff7043;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.lightbox-title {
    padding-top: 20px;
    text-align: center;
}

.lightbox-title span {
    color: #ff7043;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.lightbox-title h3 {
    margin: 7px 0 0;
    color: #172b3a;
    font-size: 22px;
}

body.lightbox-open {
    overflow: hidden;
}
/* Contact Hero */

.contact-hero {
    height: 420px;
    position: relative;
    background: url("../images/contact-banner.jpg") center/cover no-repeat;
}

.contact-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(7, 48, 78, .93),
        rgba(7, 48, 78, .50)
    );
}

.contact-hero-content {
    position: relative;
    z-index: 2;
    padding-top: 140px;
    color: #fff;
}

.contact-hero-content span {
    color: #ff7043;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.contact-hero-content h1 {
    margin: 12px 0;
    font-size: 58px;
    font-weight: 300;
}

.contact-hero-content h1 strong {
    color: #ff7043;
    font-weight: 600;
}

.contact-hero-content p {
    max-width: 540px;
    margin: 0;
    color: #e5edf2;
    font-size: 16px;
    line-height: 1.7;
}


/* Contact Section */

.contact-section {
    padding: 95px 0;
    background: #f6f9fb;
}

.contact-heading {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.contact-heading h2 {
    margin: 15px 0 18px;
    color: #172b3a;
    font-size: 42px;
    font-weight: 400;
}

.contact-heading h2 strong {
    color: #2875b9;
    font-weight: 600;
}

.contact-heading p {
    margin: 0;
    color: #666;
    font-size: 15px;
    line-height: 1.8;
}


/* Contact Cards */

.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 25px;
    max-width: 1000px;
    margin: auto;
}

.contact-card {
    min-height: 245px;
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 40px;
    background: #fff;
    border: 1px solid #e2e9ed;
    transition: .35s ease;
}

.contact-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 40px rgba(0, 40, 70, .10);
}

.contact-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf3fa;
    color: #2875b9;
    font-size: 21px;
}

.contact-card-content span {
    display: block;
    margin-bottom: 10px;
    color: #ff7043;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.contact-card-content h3 {
    margin: 0 0 15px;
    color: #172b3a;
    font-size: 21px;
    font-weight: 600;
}

.contact-card-content p {
    margin: 0;
    color: #555;
    font-size: 15px;
    line-height: 1.9;
}

.contact-card-content a {
    color: #2875b9;
    font-size: 15px;
    text-decoration: none;
    word-break: break-word;
}

.contact-card-content a:hover {
    color: #ff7043;
}


/* Contact Note */

.contact-note {
    max-width: 1000px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 30px auto 0;
    padding: 25px 30px;
    background: #092b3b;
    color: #fff;
}

.contact-note > i {
    color: #ff7043;
    font-size: 28px;
}

.contact-note strong {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
}

.contact-note p {
    margin: 0;
    color: #b8c8cf;
    font-size: 13px;
    line-height: 1.6;
}

.site-footer {    background: #092b3b;    color: #fff;}
.footer-main {    padding: 70px 0 55px;}
.footer-grid {    display: grid;    grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;    gap: 55px;}
.footer-logo {    display: inline-block;    margin-bottom: 22px;}
.footer-logo img {    width: 130px;    height: auto;}
.footer-about p {    max-width: 360px;    margin: 0 0 25px;    color: #b8c8cf;    font-size: 14px;    line-height: 1.8;}
.footer-social {    display: flex;    gap: 10px;}
.footer-social a {    width: 38px;    height: 38px;    display: flex;    align-items: center;    justify-content: center;    border: 1px solid #365563;    color: #fff;
    text-decoration: none;    transition: .3s;}
.footer-social a:hover {    background: #ff7043;    border-color: #ff7043;}
.footer-grid h3 {    position: relative;    margin: 5px 0 25px;    padding-bottom: 12px;    font-size: 17px;    font-weight: 600;}
.footer-grid h3:after {    content: "";    position: absolute;    left: 0;    bottom: 0;    width: 35px;    height: 2px;    background: #ff7043;}
.footer-links ul {    margin: 0;    padding: 0;    list-style: none;}
.footer-links li {    margin-bottom: 13px;}
.footer-links a {    color: #b8c8cf;    font-size: 14px;    text-decoration: none;    transition: .3s;}
.footer-links a:hover {    color: #ff7043;    padding-left: 5px;}
.contact-item {    display: flex;    align-items: flex-start;    gap: 14px;    margin-bottom: 18px;    color: #b8c8cf;    font-size: 14px;    line-height: 1.6;}
.contact-item i {    width: 18px;    margin-top: 3px;    color: #ff7043;}
.contact-item a {    color: #b8c8cf;    text-decoration: none;}
.contact-item a:hover {    color: #ff7043;}
.footer-bottom {    border-top: 1px solid #234653;    padding: 20px 0;}
.footer-bottom .container {    display: flex;    justify-content: space-between;    gap: 20px;}
.footer-bottom p {    margin: 0;    color: #8fa5ae;    font-size: 12px;}