/* =====================================================
   SHREE ALUMINIUM - HEADER CSS
   Color Theme: Blue + Red + Silver
===================================================== */

/* ========== GOOGLE FONT ========== */
body{

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

    font-size:16px;

    font-weight:400;

    line-height:1.8;

    margin:0;

    padding:0;

    overflow-x:hidden;

}

h1,
h2,
h3,
h4,
h5,
h6{

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

    font-weight:700;

    margin-bottom:15px;

    line-height:1.3;

}

p{

    margin-bottom:18px;

}

a{
    text-decoration: none;
}

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

.top-header{
    background: #0D47A1;
    padding: 10px 0;
}

.top-header a{
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
}

.top-header i{
    color: #E53935;
    margin-right: 6px;
}

.social a{
    margin-left: 14px;
    transition: 0.3s ease;
}

.social a:hover{
    color: #E53935;
}

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

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

#header{
    position: sticky;
    top:0;
    z-index:999;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

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

.header-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
}

/*======================================
        MENU
=======================================*/

.menu{
    display:flex;
    align-items:center;
    gap:45px;
    list-style:none;
    margin:0;
    padding:0;
}

.menu a{
    color:#1A1A1A;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    text-transform:uppercase;
    transition:.3s;
    position:relative;
}

.menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:#E53935;
    transition:.3s;
}

.menu a:hover::after{
    width:100%;
}

.menu a:hover{
    color:#0D47A1;
}

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

.logo img{
    height:85px;
}

/*======================================
            HERO SLIDER
=======================================*/

.hero-slider{
    position:relative;
    width:100%;
    height:90vh;
    overflow:hidden;
}

.slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .8s ease;
}

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

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

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

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

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

.content{
    position:absolute;
    top:50%;
    left:10%;
    transform:translateY(-50%);
    color:#fff;
    max-width:650px;
    z-index:5;
}

.content h1{
    font-size:60px;
    font-weight:700;
    margin-bottom:20px;
}

.content p{
    font-size:18px;
    margin-bottom:30px;
}

.theme-btn{
    display:inline-block;
    padding:14px 34px;
    background:#E53935;
    color:#fff;
    border-radius:4px;
    text-decoration:none;
    transition:.3s;
}

.theme-btn:hover{
    background:#0D47A1;
    color:#fff;
}

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

.prev,
.next{

    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border:none;
    cursor:pointer;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-size:28px;
    backdrop-filter:blur(6px);
    z-index:10;
    transition:.3s;

}

.prev:hover,
.next:hover{
    background:#E53935;
}

.prev{
    left:25px;
}

.next{
    right:25px;
}

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

@media(max-width:768px){

.content{
left:30px;
right:30px;
}

.content h1{
font-size:36px;
}

.hero-slider{
height:75vh;
}

}

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

.about-section{
    background:#fff;
}

/*======================================
        ABOUT IMAGE
======================================*/

.about-img{
    overflow:hidden;
    border-radius:12px;

}

.about-img img{
    width:100%;
    transition:.5s;
        height: 473px;
}

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

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

.section-subtitle{
    color:#E53935;
    font-size:15px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
}

.section-title{
    font-size:42px;
    font-weight:700;
    color:#0D47A1;
    margin:10px 0 20px;
}

.about-section p{
    color:#666;
    line-height:1.9;
}

/*======================================
        ABOUT LIST
======================================*/

.about-list{
    list-style:none;
    padding:0;
    margin:0;
}

.about-list li{
    margin-bottom:15px;
    font-weight:500;
}

.about-list i{
    color:#E53935;
    margin-right:10px;
}

/*======================================
        BUTTON
======================================*/

.theme-btn{
    display:inline-block;
    padding:14px 30px;
    background:#0D47A1;
    color:#fff;
    border-radius:5px;
    text-decoration:none;
    transition:.3s;
}

.theme-btn:hover{
    background:#E53935;
    color:#fff;
}

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

@media (max-width:991px){

    .about-section{
        padding:70px 0;
    }

    .section-title{
        font-size:34px;
    }

    .about-img{
        margin-bottom:20px;
    }

}

@media (max-width:767px){

    .about-section{
        text-align:center;
        padding:60px 0;
    }

    .section-title{
        font-size:28px;
    }

    .section-subtitle{
        font-size:14px;
    }

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

    .about-list{
        margin-top:20px;
    }

    .about-list li{
        justify-content:center;
        display:flex;
        align-items:center;
    }

    .theme-btn{
        margin-top:25px;
    }

}

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

.company-content{
    background:#f8f9fa;
}

.company-content .section-title{
    margin-bottom:20px;
}

.company-content p{
    font-size:16px;
    line-height:1.9;
    color:#555;
    margin-bottom:20px;
}

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

@media(max-width:991px){

    .company-content{
        padding:70px 0;
    }

}

@media(max-width:767px){

    .company-content{
        padding:60px 0;
    }

    .company-content .section-title{
        font-size:28px;
    }

    .company-content p{
        font-size:15px;
        line-height:1.8;
    }

}

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

.why-choose{
    background:#fff;
}

.section-desc{
    max-width:700px;
    margin:auto;
    color:#666;
}

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

.choose-card{
    background:#fff;
    padding:40px 30px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.4s;
    height:100%;
}

.choose-card:hover{
    transform:translateY(-10px);
    box-shadow:0 15px 40px rgba(0,0,0,.15);
}

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

.choose-icon{
    width:80px;
    height:80px;
    margin:0 auto 25px;
    background:#0D47A1;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    transition:.4s;
}

.choose-card:hover .choose-icon{
    background:#E53935;
    transform:rotateY(180deg);
}

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

.choose-card h4{
    font-size:22px;
    font-weight:600;
    margin-bottom:15px;
    color:#0D47A1;
}

.choose-card p{
    color:#666;
    line-height:1.8;
    margin:0;
}

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

@media(max-width:991px){

    .choose-card{
        padding:35px 25px;
    }

}

@media(max-width:767px){

    .section-desc{
        font-size:15px;
    }

    .choose-card{
        padding:30px 20px;
    }

    .choose-card h4{
        font-size:20px;
    }

}

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

.services{
    background:#f8f9fa;
}

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

.service-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    transition:.4s;
    height:100%;
}

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

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

.service-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.5s;
}

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

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

.service-content{
    padding:25px;
}

.service-content h4{
    color:#0D47A1;
    margin-bottom:15px;
    font-size:22px;
    font-weight:600;
}

.service-content p{
    color:#666;
    line-height:1.8;
}

.service-content a{
    color:#E53935;
    font-weight:600;
    text-decoration:none;
}

.service-content a i{
    margin-left:6px;
    transition:.3s;
}

.service-content a:hover i{
    margin-left:12px;
}

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

@media(max-width:767px){

    .service-card img{
        height:220px;
    }

    .service-content{
        padding:20px;
    }

    .service-content h4{
        font-size:20px;
    }

}

/*======================================
        OUR PROJECTS
======================================*/

.projects{
    background:#fff;
}

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

.project-card{
    position:relative;
    overflow:hidden;
    border-radius:12px;
}

.project-card img{
    width:100%;
    height:300px;
    object-fit:cover;
    transition:.5s;
}

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

.project-overlay{

    position:absolute;
    inset:0;
        background: rgba(13, 71, 161, 0.25);

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

    color:#fff;
    opacity:0;
    transition:.4s;

}

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

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

.project-overlay h4{
    font-size:24px;
    margin-bottom:10px;
}

.project-overlay p{
    margin:0;
}

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

@media(max-width:767px){

.project-card img{
height:240px;
}

.project-overlay h4{
font-size:20px;
}

}

/*======================================
        WORK PROCESS
======================================*/

.work-process{
    background:#f8f9fa;
}

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

.process-card{
    position:relative;
    background:#fff;
    padding:40px 25px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    transition:.3s;
    overflow:hidden;
    height:100%;
}

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

/*======================================
        NUMBER
======================================*/

.process-number{
    position:absolute;
    top:15px;
    right:20px;
    font-size:42px;
    font-weight:700;
    color:rgba(13,71,161,.08);
}

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

.process-icon{
    width:80px;
    height:80px;
    background:#0D47A1;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    margin:0 auto 25px;
    transition:.3s;
}

.process-card:hover .process-icon{
    background:#E53935;
    transform:rotate(360deg);
}

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

.process-card h4{
    color:#0D47A1;
    margin-bottom:15px;
    font-weight:600;
}

.process-card p{
    color:#666;
    line-height:1.8;
    margin:0;
}

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

@media(max-width:767px){

.process-card{
padding:30px 20px;
}

.process-number{
font-size:34px;
}

.process-icon{
width:70px;
height:70px;
font-size:26px;
}

}

/*======================================
        TESTIMONIAL
======================================*/

.testimonial-section{
    background:#f8f9fa;
}

.testimonial-slider{
    padding-bottom:70px;
}

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

.testimonial-card{

    background:#fff;
    padding:35px;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    transition:.3s;
    height:320px;

      display:flex;
    flex-direction:column;
    justify-content:space-between;

}

.testimonial-card:hover{

    transform:translateY(-8px);

}

.quote{

    color:#E53935;
    font-size:35px;
    margin-bottom:20px;

}

.testimonial-card p{

    color:#666;
    line-height:1.8;

}

/*======================================
        CLIENT
======================================*/

.client{

    display:flex;
    align-items:center;
    margin-top:25px;

}

.client img{

    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    margin-right:15px;

}

.client h5{

    margin:0;
    color:#0D47A1;

}

.client span{

    font-size:14px;
    color:#888;

}

/*======================================
        SWIPER
======================================*/

.swiper-button-next,
.swiper-button-prev{

    color:#0D47A1;

}

.swiper-pagination-bullet-active{

    background:#E53935;

}

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

@media(max-width:767px){

.testimonial-card{

   height:auto;
        min-height:300px;
        padding:25px;

}

.client img{

width:50px;
height:50px;

}

}

/*======================================
        SWIPER BUTTON
======================================*/

.testimonial-slider{
    position:relative;
    overflow:hidden;
    padding-bottom:70px;
}

.swiper-button-next,
.swiper-button-prev{

    width:50px;
    height:50px;
    background:transparent;
    border-radius:50%;
    
    color:#0D47A1;
    top:50%;
    transform:translateY(-50%);
}

.swiper-button-prev{
    left:0;
}

.swiper-button-next{
    right:0;
}

.swiper-button-next::after,
.swiper-button-prev::after{
    font-size:20px;
    font-weight:700;
}

.swiper{
    overflow: hidden;
}

/*======================================
            FAQ SECTION
======================================*/

.faq-section{
    background:#f8f9fa;
}

.accordion-item{

    border:none;
    margin-bottom:20px;
    border-radius:10px !important;
    overflow:hidden;
    box-shadow:0 5px 18px rgba(0,0,0,.08);

}

.accordion-button{

    font-size:18px;
    font-weight:600;
    color:#0D47A1;
    padding:20px;
    background:#fff;

}

.accordion-button:not(.collapsed){

    background:#0D47A1;
    color:#fff;

}

.accordion-button:focus{

    box-shadow:none;

}

.accordion-body{

    padding:20px;
    line-height:1.8;
    color:#666;

}

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

@media(max-width:767px){

.accordion-button{

font-size:16px;
padding:18px;

}

.accordion-body{

font-size:15px;

}

}


/*======================================
        CALL TO ACTION
======================================*/

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

.cta-section{
    padding:90px 0;
    background:#f8f9fa;
}

.cta-wrapper{

    background:linear-gradient(135deg,#0D47A1,#184DB8);

    border-radius:20px;

    padding:60px;

    position:relative;

    overflow:hidden;

}

.cta-wrapper::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

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

    border-radius:50%;

    top:-120px;
    right:-80px;

}

.cta-tag{

    display:inline-block;

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

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    margin-bottom:20px;

}

.cta-wrapper h2{

    color:#fff;

    font-size:40px;

    margin-bottom:20px;

}

.cta-wrapper p{

    color:#ddd;

    line-height:1.9;

}

.cta-features{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:25px;

}

.cta-features span{

    color:#fff;

    font-weight:500;

}

.cta-features i{

    color:#E53935;

    margin-right:8px;

}

/*======================================
        BUTTON
======================================*/

.cta-btn,
.cta-btn2{

    display:block;

    padding:16px;

    margin:12px auto;

    width:220px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.cta-btn{

    background:#E53935;

    color:#fff;

}

.cta-btn:hover{

    background:#fff;

    color:#0D47A1;

}

.cta-btn2{

    background:#fff;

    color:#0D47A1;

}

.cta-btn2:hover{

    background:#E53935;

    color:#fff;

}

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

@media(max-width:991px){

.cta-wrapper{

padding:40px 25px;

text-align:center;

}

.cta-features{

justify-content:center;

}

}

@media(max-width:767px){

.cta-wrapper h2{

font-size:28px;

}

.cta-features{

flex-direction:column;

gap:10px;

}

.cta-btn,
.cta-btn2{

width:100%;

max-width:280px;

}

}

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

.footer{

    background:#081F4D;

    color:#fff;

    padding-top:80px;

}

.footer-logo{

    width:180px;

    margin-bottom:20px;

}

.footer-text{

    color:#d9d9d9;

    line-height:1.9;

    margin-bottom:30px;

}

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

.footer h4{

    color:#fff;

    margin-bottom:25px;

    font-size:22px;

    position:relative;

}

.footer h4::after{

    content:"";

    width:50px;

    height:3px;

    background:#E53935;

    display:block;

    margin-top:10px;

}

/*======================================
        LINKS
======================================*/

.footer ul{

    padding:0;

    margin:0;

    list-style:none;

}

.footer ul li{

    margin-bottom:15px;

}

.footer ul li a{

    color:#d9d9d9;

    text-decoration:none;

    transition:.3s;

}

.footer ul li a:hover{

    color:#E53935;

    padding-left:8px;

}

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

.contact-info li{

    display:flex;

    gap:12px;

    color:#d9d9d9;

}

.contact-info i{

    color:#E53935;

    margin-top:5px;

}

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

.social-links{

    display:flex;

    gap:15px;

}

.social-links a{

    width:45px;

    height:45px;

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

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.social-links a:hover{

    background:#E53935;

    border-color:#E53935;

}

/*======================================
        COPYRIGHT
======================================*/

.footer-bottom{

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

    margin-top:60px;

    padding:22px 0;

    color:#cfcfcf;

}

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

@media(max-width:991px){

.footer{

text-align:center;

}

.social-links{

justify-content:center;

}

.contact-info li{

justify-content:center;

}

}

@media(max-width:767px){

.footer{

padding-top:60px;

}

.footer h4{

margin-top:15px;

}

.footer-bottom{

font-size:14px;

}

}

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

.page-banner{

   background: url("../image/abou-bann.jpg") center center/cover no-repeat;

    position:relative;

    padding:140px 0;

}

.page-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.65);

}

.banner-content{

    position:relative;

    z-index:2;

    text-align:center;

}

.banner-content h1{

    color:#fff;

    font-size:55px;

    font-weight:700;

    margin-bottom:15px;

}

.banner-content nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

.banner-content nav a{

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.banner-content nav a:hover{

    color:#E53935;

}

.banner-content nav span{

    color:#fff;

}

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

@media(max-width:991px){

.page-banner{

padding:110px 0;

}

.banner-content h1{

font-size:42px;

}

}

@media(max-width:767px){

.page-banner{

padding:90px 0;

}

.banner-content h1{

font-size:32px;

}

.banner-content nav{

font-size:15px;

}

}

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

.page-banner{
    animation:bannerZoom 12s ease-in-out infinite alternate;
}

@keyframes bannerZoom{

    from{
        background-size:100%;
    }

    to{
        background-size:110%;
    }

}

/*======================================
        WHO WE ARE
======================================*/

.who-we-are{
    background:#fff;
}

.who-image{
    overflow:hidden;
    border-radius:15px;
}

.who-image img{
    width:100%;
    transition:.5s;
}

.who-image:hover img{
    transform:scale(1.08);
}

/*======================================
        INFO BOX
======================================*/

.info-box{

    background:#f8f9fa;

    padding:25px;

    border-left:4px solid #E53935;

    border-radius:10px;

    text-align:center;

    transition:.3s;

}

.info-box:hover{

    transform:translateY(-5px);

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

}

.info-box h3{

    color:#0D47A1;

    font-size:40px;

    margin-bottom:8px;

    font-weight:700;

}

.info-box span{

    color:#666;

    font-weight:500;

}

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

@media(max-width:991px){

    .who-we-are{
        text-align:center;
    }

    .who-image{
        margin-bottom:20px;
    }

}

@media(max-width:767px){

    .info-box{
        margin-bottom:20px;
    }

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

}

/*======================================
        MISSION & VISION
======================================*/

.mission-vision{
    background:#f8f9fa;
}

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

.mv-card{

    background:#fff;

    padding:45px 35px;

    border-radius:15px;

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

    transition:.4s;

    height:100%;

    text-align:center;

    border-top:4px solid #0D47A1;

}

.mv-card:hover{

    transform:translateY(-8px);

    border-top:4px solid #E53935;

}

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

.mv-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#0D47A1;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    transition:.4s;

}

.mv-card:hover .mv-icon{

    background:#E53935;

    transform:rotate(360deg);

}

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

.mv-card h3{

    color:#0D47A1;

    margin-bottom:18px;

    font-size:28px;

    font-weight:700;

}

.mv-card p{

    color:#666;

    line-height:1.9;

    margin:0;

}

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

@media(max-width:767px){

    .mv-card{

        padding:35px 25px;

    }

    .mv-card h3{

        font-size:24px;

    }

    .mv-icon{

        width:75px;
        height:75px;
        font-size:28px;

    }

}

/*======================================
        CORE VALUES
======================================*/

.core-values{
    background:#fff;
}

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

.value-card{

    background:#f8f9fa;
    padding:40px 30px;
    border-radius:15px;
    text-align:center;
    transition:.4s;
    height:100%;
    border-bottom:4px solid transparent;

}

.value-card:hover{

    transform:translateY(-8px);
    border-bottom:4px solid #E53935;
    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.value-card i{

    width:80px;
    height:80px;

    background:#0D47A1;
    color:#fff;

    border-radius:50%;

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

    font-size:30px;

    margin:0 auto 25px;

    transition:.4s;

}

.value-card:hover i{

    background:#E53935;
    transform:rotate(360deg);

}

.value-card h4{

    color:#0D47A1;
    margin-bottom:15px;
    font-weight:600;

}

.value-card p{

    color:#666;
    line-height:1.8;
    margin:0;

}

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

@media(max-width:767px){

.value-card{

padding:30px 20px;

}

.value-card i{

width:70px;
height:70px;
font-size:26px;

}

}

/*======================================
        TRUST SECTION
======================================*/

.trust-section{
    background:#f8f9fa;
}

.trust-image{
    overflow:hidden;
    border-radius:15px;
}

.trust-image img{
    width:100%;
    transition:.5s;
}

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

/*======================================
        TRUST LIST
======================================*/

.trust-list{
    margin-top:30px;
}

.trust-item{

    display:flex;
    align-items:center;

    margin-bottom:18px;

    background:#fff;

    padding:16px 20px;

    border-radius:8px;

    transition:.3s;

}

.trust-item:hover{

    transform:translateX(10px);

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

}

.trust-item i{

    color:#E53935;

    font-size:20px;

    margin-right:15px;

}

.trust-item span{

    color:#333;

    font-weight:500;

}

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

@media(max-width:991px){

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

    .trust-item{
        justify-content:flex-start;
    }

    .trust-image{
        margin-top:20px;
    }

}

@media(max-width:767px){

    .trust-item{

        padding:14px 16px;

    }

    .trust-item span{

        font-size:15px;

    }

}

/*======================================
        ACHIEVEMENT SECTION
======================================*/

.achievement-section{

    padding:90px 0;

    background:linear-gradient(rgba(13,71,161,.90),rgba(13,71,161,.90)),
    url(images/counter-bg.jpg);

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

}

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

.achievement-box{

    color:#fff;

    padding:30px 20px;

}

.achievement-box i{

    font-size:50px;

    color:#E53935;

    margin-bottom:20px;

}

.achievement-box h2{

    font-size:48px;

    font-weight:700;

    margin-bottom:10px;

}

.achievement-box p{

    font-size:18px;

    margin:0;

    color:#ddd;

}

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

@media(max-width:991px){

.achievement-box{

margin-bottom:40px;

}

}

@media(max-width:767px){

.achievement-section{

padding:70px 0;

}

.achievement-box h2{

font-size:38px;

}

.achievement-box i{

font-size:40px;

}

}

/*======================================
        OUR WORKSPACE
======================================*/

.workspace-section{
    background:#f8f9fa;
}

.workspace-img{

    height:260px;

    overflow:hidden;

    border-radius:15px;

}

.workspace-img.large{

    height:544px;

}

.workspace-img img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s;

}

.workspace-img:hover img{

    transform:scale(1.08);

}

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

@media(max-width:991px){

.workspace-img.large{

height:260px;

}

}

@media(max-width:767px){

.workspace-img{

height:220px;

}

}

/*======================================
        WHY SHREE ALUMINIUM
======================================*/

.why-shree{
    background:#fff;
}

.why-image{
    overflow:hidden;
    border-radius:15px;
}

.why-image img{
    width:100%;
    transition:.5s;
}

.why-image:hover img{
    transform:scale(1.08);
}

/*======================================
        FEATURE BOX
======================================*/

.feature-box{

    display:flex;

    gap:18px;

    padding:22px;

    background:#f8f9fa;

    border-radius:12px;

    transition:.3s;

    height:100%;

}

.feature-box:hover{

    transform:translateY(-6px);

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

}

.feature-box i{

    width:60px;

    height:60px;

    background:#0D47A1;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:22px;

    flex-shrink:0;

}

.feature-box h5{

    color:#0D47A1;

    margin-bottom:8px;

}

.feature-box p{

    margin:0;

    color:#666;

    line-height:1.7;

}

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

@media(max-width:767px){

.feature-box{

padding:18px;

}

.feature-box i{

width:50px;
height:50px;
font-size:18px;

}

}

/*======================================
        OUR COMMITMENT
======================================*/

.commitment-section{

    background:#f8f9fa;

}

.commitment-card{

    background:#fff;

    border-radius:15px;

    padding:40px 30px;

    text-align:center;

    transition:.4s;

    height:100%;

    border:1px solid #eee;

}

.commitment-card:hover{

    transform:translateY(-10px);

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

}

.commitment-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    background:#0D47A1;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

    transition:.4s;

}

.commitment-card:hover .commitment-icon{

    background:#E53935;

    transform:rotate(360deg);

}

.commitment-card h4{

    color:#0D47A1;

    margin-bottom:15px;

}

.commitment-card p{

    color:#666;

    line-height:1.8;

    margin:0;

}

@media(max-width:767px){

.commitment-card{

padding:30px 20px;

}

.commitment-icon{

width:75px;

height:75px;

font-size:28px;

}

}

/*======================================
        DROPDOWN MENU
======================================*/

.dropdown-menu{

    border:none;

    border-radius:10px;

    padding:10px 0;

    min-width:240px;

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

    margin-top:12px;

}

.dropdown-item{

    padding:12px 22px;

    font-size:15px;

    transition:.3s;

}


/*======================================
        DESKTOP HOVER
======================================*/

@media(min-width:992px){

.dropdown:hover>.dropdown-menu{

display:block;

opacity:1;

visibility:visible;

margin-top:0;

}

.dropdown-menu{

display:block;

opacity:0;

visibility:hidden;

transition:.3s;

}

}

.navbar{
    overflow: visible !important;
}

.header{
    overflow: visible !important;
}

.dropdown-toggle::after{

    display:inline-block;

    margin-left:8px;

    vertical-align:middle;

}

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

.dropdown-toggle::after{
    display:none !important;
}

.nav-link{

    display:flex !important;

    align-items:center;

    gap:6px;

}

.dropdown-icon{

    font-size:12px;

    transition:.3s;

}

.dropdown:hover .dropdown-icon{

    transform:rotate(180deg);

}

/*======================================
        SERVICE BANNER
======================================*/

.service-banner{

    position:relative;

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

    padding:170px 0 120px;

}

.service-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(8,31,77,.72);

}

.banner-content{

    position:relative;

    z-index:2;

    max-width:700px;

    color:#fff;

        margin: 0px auto;


}

.banner-subtitle{

    display:inline-block;

    background:#E53935;

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    letter-spacing:1px;

    margin-bottom:20px;

}

.banner-content h1{

    font-size:58px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}

.banner-content p{

    font-size:18px;

    line-height:1.8;

    color:#e5e5e5;

    margin-bottom:35px;

}

.banner-btn{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.theme-btn{

    background:#E53935;

    color:#fff;

    padding:14px 34px;

    border-radius:50px;

    text-decoration:none;

    transition:.3s;

}

.theme-btn:hover{

    background:#fff;

    color:#081F4D;

}

.outline-btn{

    border:2px solid #fff;

    color:#fff;

    padding:14px 34px;

    border-radius:50px;

    text-decoration:none;

    transition:.3s;

}

.outline-btn:hover{

    background:#fff;

    color:#081F4D;

}

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

@media(max-width:991px){

.service-banner{

padding:140px 0 100px;

}

.banner-content{

text-align:center;
margin:auto;

}

.banner-content h1{

font-size:42px;

}

.banner-btn{

justify-content:center;

}

}

@media(max-width:767px){

.service-banner{

padding:120px 0 80px;

}

.banner-content h1{

font-size:32px;

}

.banner-content p{

font-size:16px;

}

.theme-btn,
.outline-btn{

width:100%;
text-align:center;

}

}


/*======================================
        ALUMINIUM BANNER
======================================*/

.aluminium-banner{

    position:relative;

    padding:180px 0 130px;

    background:url(../image/baneeee-1.jpg) center center/cover no-repeat;

    overflow:hidden;

}

.aluminium-banner::before{

    content:"";

    position:absolute;

    inset:0;

     background: linear-gradient(90deg, rgb(8 48 126 / 72%) 15%, rgb(28 82 189 / 24%) 55%, rgba(8, 31, 77, .35) 100%);

}

.aluminium-banner-content{

    position:relative;

    z-index:2;

    max-width:650px;

}

.aluminium-banner-subtitle{

    display:inline-block;

    padding:8px 20px;

    background:#E53935;

    color:#fff;

    border-radius:30px;

    font-size:14px;

    letter-spacing:1px;

    margin-bottom:20px;

}

.aluminium-banner-title{

    font-size:60px;

    font-weight:700;

    color:#fff;

    line-height:1.2;

    margin-bottom:20px;

}

.aluminium-banner-text{

    color:#e5e5e5;

    line-height:1.9;

    font-size:17px;

    margin-bottom:35px;

}

.aluminium-banner-btn{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

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

@media(max-width:991px){

.aluminium-banner{

padding:150px 0 100px;

text-align:center;

}

.aluminium-banner-content{

margin:auto;

}

.aluminium-banner-title{

font-size:44px;

}

.aluminium-banner-btn{

justify-content:center;

}

}

@media(max-width:767px){

.aluminium-banner{

padding:120px 0 80px;

}

.aluminium-banner-title{

font-size:32px;

}

.aluminium-banner-text{

font-size:15px;

}

.aluminium-banner-btn a{

width:100%;

text-align:center;

}

}

/*======================================
        ALUMINIUM OVERVIEW
======================================*/

.aluminium-overview{

    background:#fff;

}

.aluminium-overview-image{

    overflow:hidden;

    border-radius:15px;

}

.aluminium-overview-image img{

    width:100%;

    transition:.5s;

}

.aluminium-overview-image:hover img{

    transform:scale(1.08);

}

.aluminium-overview-text{

    color:#666;

    line-height:1.9;

    margin-top:20px;

}

/*======================================
        ALUMINIUM FEATURE
======================================*/

.aluminium-feature{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 18px;

    background:#f8f9fa;

    border-radius:10px;

    transition:.3s;

    height:100%;

}

.aluminium-feature:hover{

    background:#0D47A1;

    transform:translateY(-5px);

}

.aluminium-feature:hover span{

    color:#fff;

}

.aluminium-feature i{

    width:34px;

    height:34px;

    background:#E53935;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    flex-shrink:0;

}

.aluminium-feature span{

    font-weight:600;

    color:#333;

    transition:.3s;

}

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

@media(max-width:991px){

.aluminium-overview{

text-align:center;

}

.aluminium-overview-image{

margin-bottom:20px;

}

}

@media(max-width:767px){

.aluminium-feature{

padding:14px;

}

}

/*======================================
        ALUMINIUM CONTENT
======================================*/

.aluminium-content{

    background:#f8f9fa;

}

.aluminium-content-box{

    background:#fff;

    padding:50px;

    border-radius:15px;

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

}

.aluminium-content-box p{

    color:#666;

    line-height:2;

    margin-bottom:20px;

    text-align:justify;

}

.aluminium-highlight{

    background:#081F4D;

    color:#fff;

    padding:25px 30px;

    border-left:5px solid #E53935;

    border-radius:10px;

    font-size:20px;

    font-style:italic;

    line-height:1.8;

    margin:35px 0;

}

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

@media(max-width:767px){

.aluminium-content-box{

padding:30px 20px;

}

.aluminium-highlight{

font-size:17px;

padding:20px;

}

.aluminium-content-box p{

text-align:left;

}

}

/*======================================
        ALUMINIUM PROJECT SHOWCASE
======================================*/

.aluminium-showcase{

    background:#f8f9fa;

}

.aluminium-showcase-card{

    position:relative;

    overflow:hidden;

    border-radius:15px;

    height:300px;

}

.aluminium-large{

    height:420px;

}

.aluminium-showcase-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.aluminium-showcase-card:hover img{

    transform:scale(1.1);

}

.aluminium-showcase-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:25px;

    background:linear-gradient(to top,
    rgba(8,31,77,.92),
    transparent);

    color:#fff;

}

.aluminium-showcase-overlay h5{

    margin-bottom:5px;

    font-weight:700;

}

.aluminium-showcase-overlay p{

    margin:0;

    color:#ddd;

}

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

@media(max-width:991px){

.aluminium-large{

height:300px;

}

}

@media(max-width:767px){

.aluminium-showcase-card{

height:250px;

}

.aluminium-large{

height:250px;

}

}

/*======================================
        ALUMINIUM BENEFITS
======================================*/

.aluminium-benefits{

    background:#fff;

}

.aluminium-benefits-text{

    color:#666;

    line-height:1.9;

    margin-bottom:20px;

}

.aluminium-benefits-gallery{

    position:relative;

    min-height:500px;

}

.aluminium-benefits-gallery img{

    position:absolute;

    border-radius:15px;

    object-fit:cover;

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

    transition:.4s;

}

.aluminium-benefits-gallery img:hover{

    transform:scale(1.05);

}

.img-one{

    width:300px;
    height:380px;

    top:0;
    left:0;

}

.img-two{

    width:220px;
    height:240px;

    right:0;
    top:40px;

}

.img-three{

    width:260px;
    height:220px;

    right:30px;
    bottom:0;

}

@media(max-width:991px){

.aluminium-benefits-gallery{

min-height:auto;
display:grid;
grid-template-columns:1fr;
gap:20px;

}

.aluminium-benefits-gallery img{

position:static;
width:100%;
height:280px;

}

}

/*======================================
        ALUMINIUM MARQUEE
======================================*/

.aluminium-marquee{

    background:#fff;

    overflow:hidden;

}

.aluminium-marquee-wrapper{

    overflow:hidden;

    width:100%;

}

.aluminium-marquee-track{

    display:flex;

    gap:25px;

    width:max-content;

    animation:aluminiumScroll 35s linear infinite;

}

.aluminium-marquee-wrapper:hover .aluminium-marquee-track{

    animation-play-state:paused;

}

.aluminium-marquee-track img{

    width:340px;

    height:250px;

    object-fit:cover;

    border-radius:15px;

    transition:.4s;

    cursor:pointer;

    flex-shrink:0;

}

.aluminium-marquee-track img:hover{

    transform:scale(1.06);

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

}

@keyframes aluminiumScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

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

@media(max-width:991px){

.aluminium-marquee-track img{

width:280px;
height:210px;

}

}

@media(max-width:767px){

.aluminium-marquee-track{

gap:15px;

}

.aluminium-marquee-track img{

width:220px;
height:170px;

}

}

/*======================================
        GALLERY BANNER
======================================*/

.gallery-banner{

    position:relative;

    padding:180px 0 130px;

    background:url(../image/upvc.webp) center center/cover no-repeat;

    overflow:hidden;

}

.gallery-banner::before{

    content:"";

    position:absolute;

    inset:0;

      background: linear-gradient(90deg, rgb(8 48 126 / 72%) 15%, rgb(28 82 189 / 24%) 55%, rgba(8, 31, 77, .35) 100%);

}

.gallery-banner-content{

    position:relative;

    z-index:2;

    max-width:700px;

}

.gallery-banner-subtitle{

    display:inline-block;

    padding:8px 22px;

    background:#E53935;

    color:#fff;

    border-radius:30px;

    font-size:14px;

    letter-spacing:1px;

    margin-bottom:20px;

    font-weight:600;

}

.gallery-banner-title{

    font-size:60px;

    color:#fff;

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}

.gallery-banner-text{

    color:#f1f1f1;

    line-height:1.9;

    font-size:17px;

    margin-bottom:35px;

}

.gallery-banner-btn{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

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

@media(max-width:991px){

.gallery-banner{

padding:150px 0 100px;

}

.gallery-banner-content{

text-align:center;

margin:auto;

}

.gallery-banner-title{

font-size:44px;

}

.gallery-banner-btn{

justify-content:center;

}

}

@media(max-width:767px){

.gallery-banner{

padding:120px 0 80px;

}

.gallery-banner-title{

font-size:32px;

}

.gallery-banner-text{

font-size:15px;

}

.gallery-banner-btn a{

width:100%;

text-align:center;

}

}

/*======================================
        GALLERY FILTER
======================================*/

.gallery-filter{

    background:#fff;

}

.gallery-filter-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}

.gallery-filter-buttons button{

    border:none;

    padding:13px 28px;

    background:#f5f5f5;

    color:#222;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.gallery-filter-buttons button:hover,
.gallery-filter-buttons button.active{

    background:#0D47A1;

    color:#fff;

}

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

@media(max-width:767px){

.gallery-filter-buttons{

gap:10px;

}

.gallery-filter-buttons button{

width:100%;

padding:14px;

}

}

/*======================================
        GALLERY MASONRY
======================================*/

.gallery-masonry{

    background:#f8f9fa;

}

.gallery-grid{

    display:grid;

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

    gap:20px;

    grid-auto-flow:dense;

}

.gallery-item{

    overflow:hidden;

    border-radius:15px;

    height:280px;

    cursor:pointer;

}

.gallery-item.tall{

    grid-row:span 2;

    height:580px;

}

.gallery-item.wide{

    grid-column:span 2;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

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

@media(max-width:991px){

.gallery-grid{

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

}

.gallery-item.tall{

height:420px;

}

}

@media(max-width:767px){

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-item,
.gallery-item.tall{

height:280px;

}

.gallery-item.wide{

grid-column:span 1;

}

}
.gallery-grid{

    display:grid;

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

    gap:20px;

}

.gallery-item{

    overflow:hidden;

    border-radius:15px;

    height:320px;

    position:relative;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

/* Remove These */

.gallery-item.tall{

    grid-row:unset;

    height:320px;

}

.gallery-item.wide{

    grid-column:unset;

}

/*======================================
        GALLERY EXPERIENCE
======================================*/

.gallery-experience{

    background:#ffffff;

}

.gallery-experience-image{

    overflow:hidden;

    border-radius:18px;

}

.gallery-experience-image img{

    width:100%;

    transition:.4s;

}

.gallery-experience-image:hover img{

    transform:scale(1.08);

}

.gallery-experience-text{

    color:#666;

    line-height:1.9;

    margin-bottom:20px;

}

.gallery-experience-list{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-top:30px;

}

.gallery-experience-list div{

    font-weight:600;

    color:#222;

}

.gallery-experience-list i{

    color:#E53935;

    margin-right:10px;

}

@media(max-width:991px){

.gallery-experience{

text-align:center;

}

.gallery-experience-list{

align-items:center;

}

}

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

.contact-banner{

    position:relative;

    padding:180px 0 130px;

    background:url("../image/baneee-1.jpg") center center/cover no-repeat;

    overflow:hidden;

}

.contact-banner::before{

    content:"";

    position:absolute;

    inset:0;

   background: linear-gradient(90deg, rgb(8 48 126 / 72%) 15%, rgb(28 82 189 / 24%) 55%, rgba(8, 31, 77, .35) 100%);

}

.contact-banner-content{

    position:relative;

    z-index:2;

    max-width:700px;

}

.contact-banner-subtitle{

    display:inline-block;

    padding:8px 20px;

    background:#E53935;

    color:#fff;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:20px;

}

.contact-banner-title{

    font-size:58px;

    color:#fff;

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}

.contact-banner-text{

    color:#f2f2f2;

    font-size:17px;

    line-height:1.9;

    margin-bottom:35px;

}

.contact-banner-btn{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

/*======================================
        CONTACT BANNER RESPONSIVE
======================================*/

@media(max-width:991px){

.contact-banner{

padding:150px 0 100px;

}

.contact-banner-content{

text-align:center;

margin:auto;

}

.contact-banner-title{

font-size:42px;

}

.contact-banner-btn{

justify-content:center;

}

}

@media(max-width:767px){

.contact-banner{

padding:120px 0 80px;

}

.contact-banner-title{

font-size:32px;

}

.contact-banner-text{

font-size:15px;

}

.contact-banner-btn a{

width:100%;

text-align:center;

}

}


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


.contact-info-card{

    background:#fff;

    border-radius:18px;

    padding:40px 25px;

    text-align:center;

    height:100%;

    transition:.35s;

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

}

.contact-info-card:hover{

    transform:translateY(-8px);

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

}

.contact-info-icon{

    width:75px;

    height:75px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#0D47A1;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    transition:.35s;

}

.contact-info-card:hover .contact-info-icon{

    background:#E53935;

    transform:rotate(360deg);

}

.contact-info-card h4{

    color:#0D47A1;

    font-weight:700;

    margin-bottom:15px;

}

.contact-info-card p{

    color:#666;

    line-height:1.8;

    margin:0;

}

@media(max-width:767px){

.contact-info-card{

padding:30px 20px;

}

.contact-info-icon{

width:65px;

height:65px;

font-size:24px;

}

}

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

.contact-form-section{

    background:#ffffff;

}

.contact-form-box{

    background:#fff;

    padding:45px;

    border-radius:18px;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.contact-form-box .form-control,
.contact-form-box .form-select{

    height:55px;

    border-radius:10px;

    border:1px solid #ddd;

    box-shadow:none;

}

.contact-form-box textarea{

    height:auto !important;

    resize:none;

    padding-top:15px;

}

.contact-form-box .form-control:focus,
.contact-form-box .form-select:focus{

    border-color:#0D47A1;

    box-shadow:none;

}

.contact-map-box{

    overflow:hidden;

    border-radius:18px;

    height:100%;

    min-height:540px;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.contact-map-box iframe{

    width:100%;

    height:100%;

    border:0;

}

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

@media(max-width:991px){

.contact-map-box{

min-height:400px;

margin-top:20px;

}

}

@media(max-width:767px){

.contact-form-box{

padding:30px 20px;

}

.contact-map-box{

min-height:320px;

}

}

.footer-bottom a{

    color:#ffffff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.footer-bottom a:hover{

    color:#E53935;

}


#header{
background:#fff;
position:relative;
z-index:999;
}

.header-wrapper{
display:flex;
align-items:center;
justify-content:space-between;
}


.logo img{
width:120px;
}


.menu{
display:flex;
align-items:center;
gap:25px;
list-style:none;
margin:0;
padding:0;
}


.menu li a{
text-decoration:none;
color:#111;
font-size:14px;
text-transform:uppercase;
}



/* Dropdown */

.dropdown{
position:relative;
}


.dropdown-menu{
position:absolute;
top:30px;
left:0;
background:#fff;
width:220px;
padding:10px;
display:none;
box-shadow:0 5px 15px rgba(0,0,0,.1);
}


.dropdown:hover .dropdown-menu{
display:block;
}


.dropdown-menu li{
padding:8px;
}



/* Mobile */

.menu-toggle{
display:none;
background:none;
border:0;
font-size:25px;
}



@media(max-width:768px){


.top-header{
display:none;
}


.header-wrapper{
padding:10px 0;
}


.logo img{
width:100px;
}


.menu-toggle{
display:block;
}


.navbar-menu{

position:absolute;
top:70px;
left:0;
width:100%;
background:#fff;
display:none;

}


.navbar-menu.active{
display:block;
}


.menu{

flex-direction:column;
align-items:flex-start;
gap:0;
padding:20px;

}


.menu li{
width:100%;
padding:12px 0;
border-bottom:1px solid #eee;
}



.dropdown-menu{
position:static;
display:none;
width:100%;
box-shadow:none;
}


.dropdown:hover .dropdown-menu{
display:none;
}



}


@media (max-width: 767px) {

    .footer {
        text-align: left;
    }

    .footer .col-lg-4,
    .footer .col-lg-2,
    .footer .col-lg-3 {
        text-align: left;
    }

    .footer-logo {
        margin-left: 0;
    }

    .social-links {
        justify-content: flex-start;
    }

    .footer-bottom .text-center {
        text-align: left !important;
    }

}

/* ===========================
   Floating Call Button
=========================== */

.vip-call-fixed{
    position:fixed;
    left:25px;
    bottom:30px;
    z-index:9999;
}

.vip-call-fixed a{

    width:65px;
    height:65px;

    background:#007bff;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    text-decoration:none;

    font-size:28px;

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

    animation:vipPulse 1.8s infinite;
}


/* ===========================
   Floating WhatsApp Button
=========================== */

.vip-whatsapp-fixed{

    position:fixed;

    right:25px;

    bottom:30px;

    z-index:9999;
}

.vip-whatsapp-fixed a{

    width:65px;
    height:65px;

    background:#25D366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    text-decoration:none;

    font-size:34px;

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

    animation:vipPulse 1.8s infinite;
}


/* Hover */

.vip-call-fixed a:hover{

    transform:scale(1.1);

    color:#fff;
}

.vip-whatsapp-fixed a:hover{

    transform:scale(1.1);

    color:#fff;
}


/* Pulse Animation */

@keyframes vipPulse{

    0%{

        transform:scale(1);

        box-shadow:0 0 0 0 rgba(37,211,102,.6);
    }

    70%{

        transform:scale(1.08);

        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }

    100%{

        transform:scale(1);

        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }

}


/* Mobile */

@media(max-width:768px){

.vip-call-fixed{
    left:15px;
    bottom:20px;
}

.vip-whatsapp-fixed{
    right:15px;
    bottom:20px;
}

.vip-call-fixed a,
.vip-whatsapp-fixed a{

    width:55px;
    height:55px;

    font-size:24px;
}

}

.contact-map-box{
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
}

.contact-map-box iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/* Mobile */
@media (max-width: 991px){

    .menu-toggle{
        display: block;
        background: none;
        border: none;
        font-size: 28px;
        cursor: pointer;
    }

    .navbar-menu{
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
    }

    .navbar-menu.active{
        display: block;
    }

    .menu{
        flex-direction: column;
    }

    .dropdown-menu{
        position: static;
        display: none;
    }

    .dropdown.active .dropdown-menu{
        display: block;
    }
}

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

.navbar-menu .dropdown {
    position: relative;
}


/* ==========================================
   MAIN DROPDOWN
========================================== */

.navbar-menu .dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;

    width: 270px;
    padding: 10px 0;
    margin: 0;

    background: #ffffff;
    border: none;
    border-radius: 12px;

    list-style: none;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.14);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition: all 0.25s ease;

    z-index: 9999;
}


/* Main dropdown show on hover */

.navbar-menu .dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ==========================================
   MAIN DROPDOWN ITEMS
========================================== */

.navbar-menu .dropdown-menu > li {
    position: relative;
    width: 100%;
}


/* Main dropdown links */

.navbar-menu .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 14px 20px;

    color: #222222;
    background: transparent;

    text-decoration: none;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;

    transition: all 0.25s ease;
}


/* Hover effect */

.navbar-menu .dropdown-menu > li > a:hover {
    color: #1f5fae;
    background: #f5f7fa;
    padding-left: 25px;
}


/* Arrow */

.navbar-menu .dropdown-menu > li > a i {
    font-size: 11px;
    transition: transform 0.25s ease;
}


/* Arrow rotate */

.navbar-menu .sub-dropdown:hover > a i {
    transform: translateX(4px);
}


/* ==========================================
   SECOND LEVEL DROPDOWN
========================================== */

.navbar-menu .sub-dropdown-menu {

    position: absolute;

    top: -10px;
    left: calc(100% + 8px);

    width: 250px;

    padding: 10px 0;
    margin: 0;

    background: #ffffff;

    border-radius: 10px;

    list-style: none;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.14);

    opacity: 0;
    visibility: hidden;

    transform: translateX(10px);

    transition: all 0.25s ease;

    z-index: 10000;
}


/* Second dropdown show */

.navbar-menu .sub-dropdown:hover > .sub-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}


/* ==========================================
   SECOND LEVEL LINKS
========================================== */

.navbar-menu .sub-dropdown-menu li {
    width: 100%;
}


.navbar-menu .sub-dropdown-menu li a {

    display: block;

    width: 100%;

    padding: 13px 20px;

    color: #222222;

    text-decoration: none;

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

    font-size: 13px;
    font-weight: 500;

    transition: all 0.25s ease;
}


/* Second level hover */

.navbar-menu .sub-dropdown-menu li a:hover {

    color: #1f5fae;

    background: #f5f7fa;

    padding-left: 26px;
}


/* ==========================================
   FALSE CEILING NORMAL LINK
========================================== */

.navbar-menu .dropdown-menu > li:not(.sub-dropdown) > a {
    justify-content: flex-start;
}


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

@media (max-width: 991px) {

    /* Main navbar */

    .navbar-menu {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        background: #ffffff;

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

        display: none;

        z-index: 9999;
    }


    .navbar-menu.active {
        display: block;
    }


    /* Main menu */

    .navbar-menu .menu {
        display: block;

        width: 100%;

        padding: 0;
        margin: 0;
    }


    .navbar-menu .menu > li {
        width: 100%;
    }


    /* Services dropdown */

    .navbar-menu .dropdown-menu {

        position: static;

        width: 100%;

        padding: 0;
        margin: 0;

        background: #f8f9fa;

        border-radius: 0;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        display: none;
    }


    /* Services active */

    .navbar-menu .dropdown.active > .dropdown-menu {
        display: block;
    }


    /* Main dropdown item */

    .navbar-menu .dropdown-menu > li > a {

        padding: 14px 25px;

        border-bottom: 1px solid #eeeeee;

        font-size: 14px;
    }


    .navbar-menu .dropdown-menu > li > a:hover {

        padding-left: 30px;

        background: #f1f3f5;
    }


    /* ======================================
       MOBILE SECOND DROPDOWN
    ====================================== */

    .navbar-menu .sub-dropdown-menu {

        position: static;

        width: 100%;

        padding: 0;

        margin: 0;

        background: #eeeeee;

        border-radius: 0;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        display: none;
    }


    /* Sub dropdown active */

    .navbar-menu .sub-dropdown.active > .sub-dropdown-menu {
        display: block;
    }


    /* Sub links */

    .navbar-menu .sub-dropdown-menu li a {

        padding: 12px 45px;

        font-size: 13px;

        border-bottom: 1px solid #dddddd;
    }


    .navbar-menu .sub-dropdown-menu li a:hover {

        padding-left: 50px;

        background: #e8e8e8;
    }


    /* ======================================
       DISABLE DESKTOP HOVER ON MOBILE
    ====================================== */

    .navbar-menu .dropdown:hover > .dropdown-menu {
        display: none;
    }


    .navbar-menu .dropdown.active:hover > .dropdown-menu {
        display: block;
    }


    .navbar-menu .sub-dropdown:hover > .sub-dropdown-menu {
        display: none;
    }


    .navbar-menu .sub-dropdown.active:hover > .sub-dropdown-menu {
        display: block;
    }

}