/* ==========================================================
   Sanvi Pharma Chem
   Pharmaceutical Company Website
   Part 1
==========================================================*/

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* =====================
   CSS VARIABLES
===================== */

:root{

    --primary:#005BAC;
    --secondary:#003B73;
    --accent:#19b394;
    --light:#F6FAFF;
    --dark:#1E293B;
    --white:#ffffff;
    --gray:#6b7280;
    --border:#e5e7eb;

    --shadow:0 10px 30px rgba(0,0,0,.10);

    --radius:12px;

    --transition:.35s ease;
}

/* =====================
   RESET
===================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    color:var(--dark);

    background:#fff;

    line-height:1.7;

    overflow-x:hidden;

}

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

}

/* =====================
   CONTAINER
===================== */

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}

/* =====================
   SECTION SPACING
===================== */

section{

    padding:90px 0;

}

h1{

    font-size:58px;

    font-weight:700;

    line-height:1.2;

}

h2{

    font-size:38px;

    margin-bottom:10px;

    color:var(--secondary);

}

h3{

    font-size:24px;

}

h5{

    color:var(--primary);

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:10px;

}

p{

    color:var(--gray);

}

/* =====================
   BUTTONS
===================== */

.btn{

    display:inline-block;

    padding:14px 34px;

    background:var(--primary);

    color:#fff;

    border-radius:50px;

    transition:.35s;

    font-weight:600;

    box-shadow:0 8px 25px rgba(0,91,172,.30);

}

.btn:hover{

    background:var(--secondary);

    transform:translateY(-3px);

}

.btn-outline{

    display:inline-block;

    padding:14px 34px;

    border:2px solid white;

    color:#fff;

    border-radius:50px;

    margin-left:15px;

    transition:.35s;

}

.btn-outline:hover{

    background:#fff;

    color:var(--primary);

}


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

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    transition:.35s;
    
    background: transparent;

}

header.scrolled{

    background:#fff;

    box-shadow:0 10px 20px rgba(0,0,0,.10);

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:85px;

}

.logo h2{

    margin:0;

    color:#fff;

    font-size:28px;

}

.logo span{

    color:#66d6ff;

}

header.scrolled .logo h2{

    color:var(--secondary);

}

nav ul{

    display:flex;

    gap:30px;

}

nav ul li a{

    color:#fff;

    font-weight:600;

    position:relative;

}

header.scrolled nav ul li a{

    color:var(--dark);

}

nav ul li a::after{

    content:"";

    position:absolute;

    width:0;

    height:2px;

    background:var(--accent);

    left:0;

    bottom:-6px;

    transition:.3s;

}

nav ul li a:hover::after{

    width:100%;


}

/* =========================================
   HEADER LOGO
========================================= */

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

.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    display: block;

    margin-top: -7px;
    margin-right: 7px;
    width: auto;
    height: 75px;

    max-width: 200px;

    object-fit: contain;
}


/* =========================================
   STICKY / SCROLLED HEADER
========================================= */

header.scrolled .logo img {
    height: 60px;
}


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

@media (max-width: 768px) {

    .logo img {
        height: 48px;
        max-width: 180px;
    }

    header.scrolled .logo img {
        height: 45px;
    }

}


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

@media (max-width: 480px) {

    .logo img {
        height: 42px;
        max-width: 160px;
    }

    header.scrolled .logo img {
        height: 40px;
    }

}




/* =====================
   HERO SECTION
===================== */

.hero{

    position:relative;

    height:100vh;

    display:flex;

    align-items:center;

    color:white;

    background:url("../images/hero.jpg") center center/cover no-repeat;

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

    90deg,

    rgba(0,32,71,.92),

    rgba(0,91,172,.60)

    );

}

.hero-content{

    position:relative;

    max-width:700px;

    z-index:2;

    margin-left:8%;

    animation:slideUp 1s ease;

}

.hero h4{

    color:#7ee0ff;

    font-size:18px;

    letter-spacing:2px;

    margin-bottom:20px;

}

.hero h1{

    margin-bottom:25px;

}

.hero p{

    color:#ecf4ff;

    font-size:18px;

    margin-bottom:40px;

}

.buttons{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

}

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

.slogan-card {
    position: absolute;

    right: -67%;
    top: 60%;

    transform: translateY(-50%);

    width: 450px;
    min-height: 270px;

    background-color: rgba(255, 255, 255, 0.75);

    border-radius: 24px;

    padding: 45px 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.20);

    z-index: 5;
}


/* SLOGAN TEXT */

.slogan-card h3 {

    margin: 0;

    font-size: 38px;

    line-height: 1.25;

    font-weight: 800;

    color: rgba(0,91,172, 20);

    letter-spacing: -0.5px;

}


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

@media (max-width: 992px) {

    .slogan-card {

        right: 4%;

        width: 360px;

        min-height: 150px;

        padding: 35px 25px;

    }

    .slogan-card h3 {

        font-size: 26px;

    }

}


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

@media (max-width: 768px) {

    .slogan-card {

        position: relative;

        top: auto;
        right: auto;

        transform: none;

        width: 90%;

        min-height: auto;

        margin: 35px auto 0;

        padding: 28px 20px;

        border-radius: 18px;

    }

    .slogan-card h3 {

        font-size: 23px;

        line-height: 1.3;

    }

    .slogan-card h3::after {

        width: 60%;

        height: 3px;

        margin-top: 14px;

    }

}


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

@media (max-width: 480px) {

    .slogan-card {

        width: 92%;

        padding: 25px 18px;

    }

    .slogan-card h3 {

        font-size: 20px;

    }

}

/* Floating Shape */

.hero::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(255,255,255,.06);

    right:-120px;

    top:120px;

    filter:blur(5px);

}

/* =====================
   ANIMATION
===================== */

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* =====================
   CUSTOM SCROLLBAR
===================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#f2f2f2;

}

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

@media(max-width:992px){

    h1{

        font-size:42px;

    }

    h2{

        font-size:32px;

    }

    nav{

        display:none;
    }

    .hero-content{

        margin:0 auto;

        text-align:center;

        padding:0 20px;

    }

    .buttons{

        justify-content:center;

    }

}

@media(max-width:576px){

    h1{

        font-size:34px;

    }

    .btn{

        width:100%;

        text-align:center;

        margin-bottom:15px;

    }

    .btn-outline{

        width:100%;

        margin-left:0;

        text-align:center;

    }

    .buttons{

        flex-direction:column;

    }

}


/* ==========================================================
   PART 2
   ABOUT | SERVICES | WHY CHOOSE US | EXPORT | CTA
==========================================================*/

/* =====================
   ABOUT SECTION
===================== */

.about{
    background:var(--light);
}

.about .grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.about img{
    background-color: #222;
    border-radius:20px;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.about img:hover{
    transform:scale(1.03);
}

.about p{
    margin-bottom:30px;
    text-align:justify;
}
.about h5{
    color:var(--primary);
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:10px;
}


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

.services{
    background: #003B73;
    text-align:center;
}

.cards{
    margin-top:50px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;
}

.card{

    background:linear-gradient(
    195deg,
    var(--secondary),
    var(--primary)
    );

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.35);

    border-radius:18px;

    padding:40px 30px;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 40px rgba(0,91,172,.18);

}

.card i{

    width:80px;

    height:80px;

    line-height:80px;

    border-radius:50%;

    font-size:45px;

    color:var(--accent);

    background:#fff;

    margin-bottom:25px;

}

.card h3{

    margin-bottom:15px;

    color:var(--light);

}

.services h2,h5{

    margin-bottom:15px;

    color:var(--light);

}

.card p{

    color:var(--gray);

}


/* =========================================
   SERVICE CARDS
========================================= */

.service-link {

    display: block;

    text-decoration: none;

    color: inherit;

    cursor: pointer;

    transition: all 0.3s ease;

}


.service-link:hover {

    transform: translateY(-8px);

    text-decoration: none;

}


.service-link i {

    transition: transform 0.3s ease;

}


.service-link:hover i {

    transform: scale(1.1);

}


.service-link h3 {

    color: #f2f2f2;

}


.service-link p {

    color: #fff;

}


.service-arrow {

    display: inline-block;

    margin-top: 15px;

    color: #fff;

    font-weight: 600;

    font-size: 14px;

    transition: transform 0.3s ease;

}


.service-link:hover .service-arrow {

    transform: translateX(5px);

}


/* =====================
   WHY CHOOSE US
===================== */

.why{

    background:linear-gradient(
    155deg,
    var(--border)
    );

    color:#003B73;
    border-color: var(--secondary);

    text-align:center;

}

.why h2{

    color:#0768b5;

}

.why h5{

    color:#003B73;

}

.features{

    margin-top:50px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.features div{

    background: #fff;

    backdrop-filter:blur(10px);

    padding:25px;

    border-radius:15px;

    font-size:18px;

    font-weight:500;

    transition:.35s;

}

.features div:hover{

    background:rgba(255,255,255,1);

    transform:translateY(-6px);

}

.features i{

    color:#0768b5;

    margin-right:10px;

    font-size:20px;

}


/* =========================================
   EXPORT MARKET SECTION
========================================= */

.export {
    padding: 90px 0;
    background: #f7f9fc;
}


.export-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;

}


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

.export-content h5 {

    margin: 0 0 12px;

    color: #0870bd;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.export-content h2 {

    margin: 0 0 22px;

    color: #0d2d52;

    font-size: 40px;

    line-height: 1.2;

    max-width: 550px;

}


.export-content p {

    margin: 0 0 15px;

    max-width: 560px;

    color: #606b76;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================
   KNOW MORE BUTTON
========================================= */

.export-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 15px;

    padding: 14px 25px;

    background: #0870bd;

    color: #ffffff;

    text-decoration: none;

    border-radius: 7px;

    font-size: 15px;

    font-weight: 600;

    transition: all 0.3s ease;

}


.export-btn span {

    font-size: 20px;

    line-height: 1;

    transition: transform 0.3s ease;

}


.export-btn:hover {

    background: #075a99;

    transform: translateY(-2px);

}


.export-btn:hover span {

    transform: translateX(5px);

}


/* =========================================
   EXPORT IMAGE
========================================= */

.export-image {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}


.export-image img {

    width: 100%;

    max-width: 600px;

    height: auto;

    display: block;

    object-fit: contain;

}


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

@media (max-width: 900px) {

    .export {

        padding: 70px 0;

    }

    .export-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .export-content {

        text-align: center;

    }

    .export-content h2,
    .export-content p {

        margin-left: auto;

        margin-right: auto;

    }

    .export-image {

        order: 2;

    }

}


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

@media (max-width: 576px) {

    .export {

        padding: 55px 0;

    }

    .export-grid {

        gap: 30px;

    }

    .export-content h5 {

        font-size: 12px;

    }

    .export-content h2 {

        font-size: 28px;

        line-height: 1.3;

    }

    .export-content p {

        font-size: 14px;

        line-height: 1.7;

    }

    .export-btn {

        padding: 13px 22px;

        font-size: 14px;

    }

    .export-image img {

        width: 100%;

    }

}


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

.cta{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
    );

    text-align:center;

    color:#fff;

}

.cta::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    left:-120px;

    top:-150px;

}

.cta::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    right:-90px;

    bottom:-120px;

}

.cta .container{

    position:relative;

    z-index:2;

}

.cta h2{

    color:#fff;

    margin-bottom:20px;

}

.cta p{

    color:#e8f3ff;

    max-width:700px;

    margin:0 auto 35px;

    font-size:18px;

}

.cta .btn{

    background:#fff;

    color:var(--primary);

    box-shadow:none;

}

.cta .btn:hover{

    background:var(--accent);

    color:#fff;

}

/* =====================
   SECTION ANIMATION
===================== */

.about,
.services,
.why,
.export,
.cta{

    animation:fadeIn .8s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

.about .grid{

    grid-template-columns:1fr;

}

.features{

    grid-template-columns:repeat(2,1fr);

}

}

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

@media(max-width:768px){

.features{

    grid-template-columns:1fr;

}

.cards{

    grid-template-columns:1fr;

}

.countries{

    gap:12px;

}

.countries span{

    width:100%;

}

.about{

    text-align:center;

}

.about p{

    text-align:left;

}

}


/* ==========================================================
   PART 3
   FOOTER | MOBILE NAVIGATION | UTILITIES | RESPONSIVE
==========================================================*/


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

.site-footer {

    background: #082b4c;

    color: #ffffff;

    padding: 65px 0 0;

}


/* FOOTER GRID */

.footer {
    display: grid;
    grid-template-columns: 2fr 1fr 1.3fr 1.3fr;
    gap: 40px;
    align-items: start;
}


/* FOOTER LOGO */

.footer-logo img {

    width: auto;

    max-width: 250px;

    height: 125px;

    object-fit: contain;

    margin-bottom: 20px;

    margin-left: 100px;

    border-radius: 10px;

}


/* FOOTER DESCRIPTION */

.footer-description {

    max-width: 400px;

    color: #c7d4df;

    line-height: 1.8;

    font-size: 16px;

}


/* TAGLINE */

.footer-tagline {

    margin-top: 15px;

    color: #ffffff;

    font-weight: 800;

    font-size: 20px;

    font-style: italic;

}


/* HEADINGS */

.footer-col h3 {

    color: #ffffff;

    font-size: 24px;

    margin-bottom: 22px;

}


/* QUICK LINKS */

.footer-links {

    list-style: none;

    padding: 0;

    margin: 0;

}

.footer-links li {

    margin-bottom: 12px;

}

.footer-links a {

    color: #c7d4df;

    text-decoration: none;

    font-size: 16px;

    transition: .3s;

}

.footer-links a:hover {

    color: #ffffff;

    padding-left: 5px;

}


/* CONTACT */

.footer-contact {

    list-style: none;

    padding: 0;

    margin: 0;

}

.footer-contact li {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 17px;

    color: #c7d4df;

    font-size: 16px;

    line-height: 1.6;

}

.footer-contact i {

    color: #ffffff;

    width: 18px;

    margin-top: 3px;

}

.footer-contact a {

    color: #c7d4df;

    text-decoration: none;

}

.footer-contact a:hover {

    color: #ffffff;

}


/* SOCIAL */

.footer-social {

    display: flex;

    gap: 10px;

    margin-top: 25px;

}

.footer-social a {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,.3);

    border-radius: 50%;

    color: #ffffff;

    text-decoration: none;

    transition: .3s;

}

.footer-social a:hover {

    background: #ffffff;

    color: #082b4c;

}


/* FOOTER BOTTOM */

.footer-bottom {

    margin-top: 50px;

    padding: 20px 0;

    border-top: 1px solid rgba(255,255,255,.15);

    display: flex;

    justify-content: space-between;

    gap: 20px;

}

.footer-bottom p {

    margin: 0;

    color: #aebdca;

    font-size: 13px;

}


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

@media (max-width: 900px) {

    .footer {

        grid-template-columns: repeat(2, 1fr);

        gap: 40px;

    }

}


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

@media (max-width: 600px) {

    .site-footer {

        padding-top: 50px;

    }

    .footer {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .footer-logo img {

        height: 50px;

    }

    .footer-bottom {

        flex-direction: column;

        text-align: center;

        gap: 8px;

    }

}


/* ==========================
   MOBILE MENU ICON
========================== */

.menu-toggle{
    display:none;
    font-size:28px;
    cursor:pointer;
    color:#fff;
}

header.scrolled .menu-toggle{
    color:var(--dark);
}

/* ==========================
   BACK TO TOP BUTTON
========================== */

#topBtn {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 50px;
    height: 50px;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 50%;

    background: var(--primary);
    color: #fff;

    font-size: 20px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.20);

    z-index: 99999;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease,
        background 0.3s ease;
}


/* SHOW BUTTON */

#topBtn.show {
    opacity: 1;
    visibility: visible;
}


/* ICON */

#topBtn i {
    margin: 0;
    padding: 0;

    line-height: 1;

    display: block;

    color: #fff;
}


/* HOVER */

#topBtn:hover {
    background: var(--secondary);

    transform: translateY(-4px);
}


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

@media (max-width: 768px) {

    #topBtn {
        right: 15px;
        bottom: 15px;

        width: 45px;
        height: 45px;

        font-size: 18px;
    }

    #topBtn i {
        font-size: 18px;
    }

}


/* ==========================
   SCROLL ANIMATION
========================== */

.reveal{
    opacity:0;
    transform:translateY(60px);
    transition:all .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* ==========================
   UTILITIES
========================== */

.text-center{
    text-align:center;
}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}

/* ==========================
   HOVER EFFECTS
========================== */

img{
    transition:.4s ease;
}

img:hover{
    transform:scale(1.02);
}

.btn,
.card,
.countries span{
    transition:.35s ease;
}

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

@media(max-width:992px){

.menu-toggle{
    display:block;
}

nav{

    position:absolute;

    top:85px;

    left:0;

    width:100%;

    background:#fff;

    display:none;

    box-shadow:0 10px 25px rgba(0,0,0,.10);

}

nav.active{
    display:block;
}

nav ul{

    flex-direction:column;

    gap:0;

}

nav ul li{
    border-bottom:1px solid #ececec;
}

nav ul li a{

    display:block;

    padding:18px 25px;

    color:var(--dark);

}

header .btn{
    display:none;
}

}

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

@media(max-width:900px){

.footer{
    grid-template-columns:1fr;
    text-align:center;
}

.hero{
    height:auto;
    padding:150px 0 100px;
}

.hero-content{
    max-width:100%;
}

}

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

@media(max-width:600px){

section{
    padding:70px 0;
}

.container{
    width:92%;
}

.hero h1{
    font-size:32px;
}

.hero p{
    font-size:16px;
}

h2{
    font-size:28px;
}

.card{
    padding:30px 22px;
}

.footer h3{
    font-size:20px;
}

}

/* ==========================
   LARGE SCREENS
========================== */

@media(min-width:1400px){

.container{
    max-width:1320px;
}

.hero h1{
    font-size:70px;
}

.hero p{
    font-size:20px;
    max-width:650px;
}

}




/*=========================
 PAGE BANNER
=========================*/

.page-banner{

    position:relative;

    height:600px;
    
    width:100%;

    background:url("../images/about-company1.png") center center/cover no-repeat;

    display:flex;

    align-items:center;

}

.page-banner .overlay{

    position:absolute;

    inset:0;

    background:rgba(0,50,100,.70);

}

.page-banner-content{

    position:relative;

    z-index:2;

    color:#fff;

    max-width:500px;

}

.page-banner-content h1{

    color:#fff;

    margin-top: 75px;

    margin-bottom:15px;

}

.page-banner-content h2{

    color: #fff;

    font-size:28px;

}

.page-banner-content p{

    color:#fff;

    font-size:24px;

}

@media(max-width:768px){

.page-banner{

    height:320px;

}

.page-banner-content h1{

    font-size:34px;

}

}



/* ===========================
NAVBAR DROPDOWN
=========================== */

nav ul li{

    position:relative;

}

.dropdown-menu{

    position:absolute;

    top:100%;

    left:0;

    min-width:270px;

    background:#fff;

    box-shadow:0 15px 30px rgba(0,0,0,.15);

    display:none;

    border-radius:8px;

    padding:10px 0;

    z-index:999;

}

.dropdown:hover .dropdown-menu{

    display:block;

}

.dropdown-menu li{

    position:relative;

}

.dropdown-menu a{

    display:block;

    padding:12px 20px;

    color:#222;

    white-space:nowrap;

}

.dropdown-menu a:hover{

    background:#005BAC;

    color:white;

}

.submenu{

    position:absolute;

    left:100%;

    top:0;

    min-width:250px;

    background:#fff;

    display:none;

    border-radius:8px;

    box-shadow:0 15px 30px rgba(0,0,0,.15);

}

.dropdown-sub:hover .submenu{

    display:block;

}







/* =========================================================
   Sanvi Pharma Chem
   MOBILE + TABLET RESPONSIVE CSS
   ========================================================= */


/* =========================================================
   GLOBAL RESPONSIVE FIXES
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    margin: 0;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.container,
.wrap {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}


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

header,
.site-header,
.navbar {
    width: 100%;
}

.navbar .container,
.navbar .wrap,
header .container,
header .wrap {
    width: 90%;
    max-width: 1200px;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

@media (max-width: 900px) {

    .nav-toggle {
        display: block;
    }

    nav ul {
        gap: 0;
    }

}


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

@media (max-width: 768px) {

    /* ---------- GLOBAL ---------- */

    .container,
    .wrap {
        width: 92%;
    }


    /* ---------- SECTIONS ---------- */

    .section {
        padding: 60px 0;
    }


    /* ---------- HEADINGS ---------- */

    h1 {
        font-size: 34px;
        line-height: 1.2;
    }

    h2 {
        font-size: 30px;
        line-height: 1.25;
    }

    h3 {
        font-size: 23px;
    }

    p {
        font-size: 15px;
        line-height: 1.7;
    }


    /* ---------- PAGE BANNER ---------- */

    .page-banner {
        padding: 90px 20px;
    }

    .page-banner h1 {
        font-size: 36px;
    }

    .page-banner p {
        font-size: 16px;
        max-width: 600px;
    }


    /* ---------- SECTION TITLE ---------- */

    .section-title {
        margin-bottom: 40px;
    }

    .section-title h2 {
        font-size: 30px;
    }

    .section-title p {
        font-size: 15px;
    }


    /* ---------- TWO COLUMN SECTIONS ---------- */

    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 35px;
    }


    /* ---------- SERVICE CARDS ---------- */

    .service-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }


    /* ---------- PROCESS ---------- */

    .process-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }


    /* ---------- COUNTRY GRID ---------- */

    .country-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }


    /* ---------- COUNTRY CARD ---------- */

    .country-card {
        min-width: 0;
        padding: 15px;
    }

    .country-card img {
        width: 45px;
        height: 32px;
    }

    .country-name {
        font-size: 14px;
    }


    /* ---------- CONTACT FORM ---------- */

    .row {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    .contact-form {
        padding: 25px;
    }


    /* ---------- MAP ---------- */

    .map-container iframe {
        height: 350px;
    }


    /* ---------- CTA ---------- */

    .cta {
        padding: 65px 20px;
    }

    .cta h2 {
        font-size: 30px;
    }

}


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

@media (max-width: 576px) {

    /* ---------- GLOBAL ---------- */

    .container,
    .wrap {
        width: 92%;
    }


    /* ---------- BODY ---------- */

    body {
        font-size: 15px;
    }


    /* ---------- HEADER ---------- */

    header {
        width: 100%;
    }

    .brand {
        font-size: 20px;
    }


    /* ---------- NAVIGATION ---------- */

    nav ul {
        width: 100%;
    }

    nav li {
        width: 100%;
    }

    nav a {
        display: block;
        width: 100%;
    }


    /* ---------- HERO ---------- */

    .hero {
        min-height: 600px;
        padding: 80px 0;
    }

    .hero h1 {
        font-size: 34px;
        line-height: 1.15;
    }

    .hero h2 {
        font-size: 24px;
    }

    .hero p {
        font-size: 15px;
        line-height: 1.7;
    }


    /* ---------- PAGE BANNER ---------- */

    .page-banner {
        padding: 75px 15px;
    }

    .page-banner h1 {
        font-size: 30px;
        line-height: 1.2;
    }

    .page-banner p {
        font-size: 14px;
        line-height: 1.7;
    }


    /* ---------- SECTION ---------- */

    .section {
        padding: 50px 0;
    }


    /* ---------- SECTION TITLE ---------- */

    .section-title {
        margin-bottom: 35px;
    }

    .section-title span {
        font-size: 12px;
    }

    .section-title h2 {
        font-size: 27px;
        line-height: 1.25;
    }

    .section-title p {
        font-size: 14px;
    }


    /* ---------- ABOUT ---------- */

    .about-grid {
        display: flex !important;
        flex-direction: column;
        gap: 25px;
    }

    .about-grid > div {
        width: 100%;
    }

    .about-grid h3 {
        font-size: 24px;
    }

    .about-grid img {
        width: 100%;
        border-radius: 10px;
    }


    /* ---------- SERVICE GRID ---------- */

    .service-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px;
    }

    .service-card {
        width: 100%;
        padding: 28px 20px;
    }

    .service-card i {
        font-size: 42px;
    }

    .service-card h3 {
        font-size: 21px;
    }

    .service-card p {
        font-size: 14px;
    }


    /* ---------- PROCESS GRID ---------- */

    .process-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px;
    }

    .process-box {
        width: 100%;
        padding: 25px 20px;
    }

    .process-box h4 {
        font-size: 20px;
    }


    /* ---------- COUNTRY GRID ---------- */

    .country-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px;
    }


    /* ---------- COUNTRY CARD ---------- */

    .country-card {
        width: 100%;
        min-height: 70px;

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: flex-start;

        gap: 14px;

        padding: 14px 16px;

        text-align: left;
    }

    .country-card img {
        width: 48px;
        height: 32px;
        object-fit: cover;
        flex-shrink: 0;
    }

    .country-name {
        font-size: 15px;
        line-height: 1.3;
    }


    /* ---------- WORLD MAP ---------- */

    .world-map {
        width: 100%;
        overflow: hidden;
    }

    .world-map img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }


    /* ---------- PRODUCTS ---------- */

    .product-table-wrapper,
    .table-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 650px;
    }


    /* ---------- PRODUCT BUTTONS ---------- */

    .category-buttons,
    .main-categories,
    .subcategory,
    .subcategory-buttons {
        width: 100%;
        overflow-x: auto;
        display: flex;
        gap: 8px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .category-buttons button,
    .main-categories button,
    .subcategory button,
    .subcategory-buttons button {
        flex-shrink: 0;
        white-space: nowrap;
    }


    /* ---------- SEARCH ---------- */

    .search-box {
        width: 100%;
    }

    .search-box input {
        width: 100%;
        font-size: 15px;
    }


    /* ---------- CONTACT ---------- */

    .contact-grid {
        display: flex !important;
        flex-direction: column;
        gap: 25px;
    }

    .contact-info,
    .contact-form {
        width: 100%;
    }

    .contact-form {
        padding: 22px 18px;
    }

    .contact-form form {
        gap: 15px;
    }

    .row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        width: 100%;
        font-size: 15px;
    }

    .contact-form button,
    .contact-form .btn {
        width: 100%;
    }


    /* ---------- INFO BOX ---------- */

    .info-box {
        width: 100%;
        padding: 18px;
    }

    .info-box h3 {
        font-size: 18px;
    }

    .info-box p {
        font-size: 14px;
    }


    /* ---------- MAP ---------- */

    .map-container {
        width: 100%;
        border-radius: 10px;
    }

    .map-container iframe {
        width: 100%;
        height: 300px;
    }


    /* ---------- FAQ ---------- */

    .faq {
        width: 100%;
    }

    .faq summary {
        padding: 18px 40px 18px 18px;
        font-size: 15px;
    }

    .faq p {
        padding: 0 18px 18px;
        font-size: 14px;
    }


    /* ---------- BUTTON ---------- */

    .btn {
        width: 100%;
        text-align: center;
        padding: 13px 20px;
    }


    /* ---------- CTA ---------- */

    .cta {
        padding: 60px 18px;
    }

    .cta h2 {
        font-size: 27px;
        line-height: 1.3;
    }

    .cta p {
        font-size: 14px;
    }


    /* ---------- FOOTER ---------- */

    footer {
        width: 100%;
    }

    .foot-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    footer .wrap {
        width: 92%;
    }

}


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

@media (max-width: 380px) {

    .container,
    .wrap {
        width: 94%;
    }

    .hero h1 {
        font-size: 29px;
    }

    .page-banner h1 {
        font-size: 27px;
    }

    .section-title h2 {
        font-size: 24px;
    }

    .country-card {
        padding: 12px;
    }

    .country-card img {
        width: 42px;
        height: 29px;
    }

    .country-name {
        font-size: 14px;
    }

    .service-card {
        padding: 24px 16px;
    }

    .process-box {
        padding: 22px 16px;
    }

}


/* =========================================================
   PREVENT HORIZONTAL OVERFLOW
   ========================================================= */

@media (max-width: 768px) {

    .hero,
    .page-banner,
    .section,
    .cta,
    footer {
        max-width: 100%;
        overflow-x: hidden;
    }

    .row,
    .about-grid,
    .contact-grid,
    .service-grid,
    .process-grid,
    .country-grid {
        max-width: 100%;
    }

}