@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&family=Noto+Serif:wght@400;700&family=Roboto:wght@700;900&display=swap');
html {scroll-behavior: smooth;}
body { font-family: 'Inter', sans-serif;; line-height: 1.8; font-weight: 300; transition: ease-in-out all 0.3s; overflow-x: hidden; margin: 0; padding: 0; }
P { margin: 0 0 10px 0;font-size: 15px; color: #3b3b3b;}
a { text-decoration: none; outline: none;}
h1 { font-size: 46px;}
.heading h2 {font-size: 32px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 30px 0; }
.heading h3 {font-size: 24px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 30px 0; }
.custom-btn { display: inline-block; padding: 14px 52px; border-radius: 30px; background: #19355A; color: #fff;font-weight: 400; letter-spacing: 2px; font-size: 14px; text-transform: uppercase;} 

/*======================== Navigation Menu (Animated X) ====================*/
.navbar-toggler.x { border: none; position: relative; z-index: 2  ;}
.navbar-toggler.x:focus { outline: none !important; box-shadow: none !important;}
.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(1) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(50deg); -webkit-transform-origin: 10% 10%; -ms-transform-origin: 10% 10%; transform-origin: 10% 10%;}
.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(2) { opacity: 0;}
.navbar-toggler.x[aria-expanded=true] .icon-bar:nth-of-type(3) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-50deg); -webkit-transform-origin: 10% 90%; -ms-transform-origin: 10% 90%; transform-origin: 10% 90%;}
.navbar-toggler.x .icon-bar { width: 25px; display: block; height: 2px; background-color: #1C1C1C; border-radius: 5px; -webkit-transition: all 0.2s; transition: all 0.2s;}
.navbar-toggler.x .icon-bar:nth-child(2) { width: 18px; margin-left: 7px;}
.navbar-toggler.x .icon-bar + .icon-bar {margin-top: 6px;}
.navbar-toggler.x .icon-bar:nth-of-type(1) {-webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0);}
.navbar-toggler.x .icon-bar:nth-of-type(2) { opacity: 1; filter: alpha(opacity=100);}
.navbar-toggler.x .icon-bar:nth-of-type(3) { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0);}
.navbar-toggler { padding: 0;}  

.navbar { background: rgba(25, 46, 74, .4); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.navbar .navbar-brand{ font-size: 32px; font-weight: 700; letter-spacing: 1px; color: #fff; text-transform: uppercase; font-family: 'Noto Serif', serif;}
.navbar .nav-item .nav-link { color: #fff; letter-spacing: 2px; margin: 0 0 0 40px; font-size: 15px; font-weight: 500; text-transform: uppercase;}
.navbar .nav-item .nav-link:hover { color: #19355A;}
.navbar.scrolled { transition: all 400ms; box-shadow: 0px 12px 32px 0px rgba(140, 140, 140, .1); padding: 0; background: #192E4A;}
.dropdown:hover>.dropdown-menu { display: block;}
.dropdown-menu { left: 20px;  width: 300px; margin: 0; padding: 0; border: 0;}
.dropdown-menu a{ font-size: 14px; padding: 12px 15px; border-bottom: 1px solid #ddd; margin: 0;}
.dropdown-menu li:last-child a{ border-bottom: 0;}
.dropdown-menu a:hover{ background: none ; font-weight: 600;}

.banner { width: 100%; height: 740px; margin-top: -84px; background-image: url('../images/banner.jpg');}
.banner .text { padding: 23% 0 20% 0;}
.banner .text h1 {font-family: 'Roboto', sans-serif; font-size: 82px; text-transform: uppercase; font-weight: 900; letter-spacing: 3px; word-spacing: 8px; margin: 0 0 20px 0; color: #fff; -webkit-text-stroke: 2px #000;}
.banner .text h1:first-child { opacity: 0; animation: fadeInLeft 0.8s ease forwards;}
.banner .text h1:nth-child(2) { opacity: 0; animation: fadeInRight 0.8s ease forwards;}

@keyframes fadeInLeft { 
    0%{ opacity: 0; transform: translateX(-50px); }
    100% { opacity: 1; transform:  translateX(0px);}
} 
@keyframes fadeInRight { 
    0%{opacity: 0; transform: translateX(50px); }
    100% { opacity: 1; transform:  translateX(0px);}
} 

.brands { padding: 4% 0;}
.brands .slide { margin: 10px 25px;}
.brands .slide img { padding: 10px;}

.about-section { padding: 5% 0; background-color: #f6f5f5;}
.about-section .pic { position: relative;}
.about-section .img-1 img { width: 60%; height: 300px; object-fit: cover; position: relative; z-index: 2; border-radius: 30px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.about-section .img-2 img { width: 56%; height: 310px; object-fit: cover; margin-left: 50%; margin-top: -150px; border-radius: 30px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.about-section h4 { font-size: 21px; font-weight: 500; color: #19355A; margin: 0 0 20px 0;}
.about-section p { font-size: 21px;}

.product-section { padding: 5% 0;}
.product-section .slide { position: relative; margin: 15px;}
.product-section .slide img { width: 100%; height: 320px; object-fit: cover; border-radius: 20px;}
.product-section .slide .text { position: absolute; width: 100%; bottom: 0; background-image: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, .7)); border-radius: 0 0 20px 20px; padding: 20px;}
.product-section .slide .text h4 { color: #fff; font-size: 21px; letter-spacing: 1.5px; margin: 0;}
.owl-dots span { background: #000 !important; margin-top: 10px !important;}
.owl-dot.active span{ background: transparent !important; border: 2px solid #000; padding: 5px;}
.product-section .view-btn { color: #212121; font-weight: 600; font-size: 19px; margin: 0 15px 0 0;}
.product-section .view-btn span { font-size: 24px; margin: 0 0 0 5px;}

.testimonial { padding: 5% 0; background: #F6F5F5;}
.testimonial .pic { position: relative;}
.testimonial .pic .icon img {position: absolute; width: 50px; height: 50px; border-radius: 50%; padding: 12px; left: 84%; top: 20px; background: #4C5C70;}
.testimonial .pic img{ width: 90%; height: 400px; object-fit: cover; border-radius: 20px; object-position: top;}
.testimonial .testimonial-slide p { font-size: 24px; margin: 0 0 20px 0;}
.testimonial .testimonial-slide h5 { color: #19355A; margin: 0 0 20px 0;}

footer { padding: 4% 0 0 0; background: #192E4A;}
footer .logo a{ font-size: 32px; font-weight: 700; letter-spacing: 1px; color: #fff; text-transform: uppercase; font-family: 'Noto Serif', serif;}
footer h4 { font-size: 19px; font-weight: 500; margin: 0 0 26px 0; color: #cecece; text-transform: uppercase; letter-spacing: 1.5px;}
footer p { font-size: 14px; }
footer p, footer p a {letter-spacing: .3px; font-size: 14px; color: #cecece;}
footer p a:hover { color: #fff;}
.footer-bottom { padding: 10px 0; margin: 5% 0 0 0; border-top: 1px solid #6a6a6a;}
.footer-bottom p, .footer-bottom p a { margin: 0; letter-spacing: .3px; font-size: 14px; color: #8e8e8e;}
.footer-bottom p a:hover { margin: 0;}

.product-banner { padding: 10% 0 6% 0; background-image: url('../images/product-banner.jpg'); background-size: cover; margin-top: -90px;}
.product-banner h1, .contact-banner h1 { color: #fff; text-transform: uppercase; font-size: 47px; font-weight: 700; text-shadow: 2px 2px 6px rgba(0,0,0,0.45);}
.mobile-bg { background-image: url('../images/mobile-banner.jpg');}
.laptop-bg { background-image: url('../images/laptop-banner.jpg');}

.call-icon { position: fixed; left: 94.5%; bottom: 18px; z-index: 2;}
.call-icon a { display: inline-block; width: 54px; height: 54px; color: #fff; background: #19355A; text-align: center; border-radius: 50%; font-size: 18px; line-height: 2.8; margin: 6px 0; box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;}

.contact-banner { background-image: url('../images/product-banner.jpg'); padding: 15% 0 13% 0; margin-top: -90px;}
.contact-info { margin: -6% 0 5% 0;}
.contact-info .info { background: #fff; border-radius: 30px; padding: 37px; box-shadow: 0px 10px 50px 0px rgb(12 21 41 / 10%); min-height: 160px;}
.contact-info .info .icon i{ background: rgba(25, 46, 74, .1); text-align: center; width: 60px; height: 60px; border-radius: 50%; color: #19355A; font-size: 21px; line-height: 2.7; }
.contact-info .info p { margin: 0; font-size: 15px;} 
.contact-info h5 { font-size: 19px; font-weight: 600; margin: 0 0 10px 0;}
.contact-info p a { color: #868686; font-size: 15px; margin: 0;}
.contact-info p a:hover { color: #19355A;}

.form-section { padding: 2% 0 5% 0;}
.contact-form .form-control { padding: 16px 24px; border-radius: 30px;margin: 0 0 24px 0;}

.category { padding: 5% 0;}

@media (min-width:320px) and (max-width:767px){
    P { margin: 0 0 10px 0;font-size: 14px;}
    .heading h2 {font-size: 24px; margin: 0 0 20px 0;}
    .heading h3 {font-size: 18px; margin: 0 0 20px 0; }
    .custom-btn { padding: 10px 32px;letter-spacing: 1px; font-size: 13px;}

    .navbar { background-color: #fff; margin: 0; padding: 0; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
    .navbar .navbar-brand{ font-size: 24px; position: relative; z-index: 2; color: #192E4A;}
    .navbar .nav-item .nav-link { margin: 0 0 0 14px; font-size: 14px;}
    .navbar .nav-item:last-child { border-bottom: 0;}
    .navbar .nav-item:first-child {  margin: 60px 0 0 0;}
    .navbar-collapse { background: #fff; position: absolute; left: 0; right: 0; top: 0px;}
    .navbar.scrolled .navbar-brand{ transition: all 400ms; color: #fff; } 

    .banner { height: 260px; margin-top: 0px; background-position: center;}
    .banner .text { padding: 25% 0;}
    .banner .text h1 { font-size: 38px; font-weight: 700; letter-spacing: .5px; word-spacing: 5px; margin: 0 0 10px 0; opacity: 0; -webkit-text-stroke: 1px #000;}
    
    .brands { padding: 7% 0 5% 0;}
    .brands .slide { margin: 0px 5px;}
    .brands .slide img { padding: 10px;}

    .about-section { padding: 8% 0;}
    .about-section .img-1 img { width: 56%; height: 200px;}
    .about-section .img-2 img { width: 50%; height: 200px; object-fit: cover; margin-left: 50%; margin-top: -120px;}
    .about-section h4 { font-size: 15px; margin: 0 0 10px 0;}
    .about-section p { font-size: 15px;}

    .product-section { padding: 8% 0;}
    .product-section .view-btn { color: #212121; font-weight: 600; font-size: 15px; margin: 0 15px 0 0;}
    .product-section .view-btn span { font-size: 24px; margin: 0 0 0 5px;}

    .testimonial { padding: 8% 0;}
    .testimonial .testimonial-slide p { font-size: 16px; margin: 0 0 20px 0;}
    .testimonial .testimonial-slide h5 { color: #19355A; margin: 0; font-size: 15px;}

    footer { padding: 6% 0 0 0;}
    footer .logo a{ font-size: 24px;}
    footer h4 { font-size: 15px; font-weight: 400; margin: 16px 0;}
    footer p, footer p a {letter-spacing: .3px; font-size: 14px;}
    .footer-bottom { padding: 10px 0; margin: 5% 0 0 0; }
    .footer-bottom p { margin: 0; letter-spacing: .3px; font-size: 14px;}
    .footer-bottom p a:hover { margin: 0;}

    .product-banner { padding: 10% 0; margin-top: 0px; background-position: center;}
    .product-banner h1, .contact-banner h1 { font-size: 24px; font-weight: 700; text-shadow: 2px 2px 6px rgba(0,0,0,0.45);}

    .call-icon { position: fixed; left: 80%; bottom: 10px; z-index: 2;}
    .call-icon a { width: 48px; height: 48px; font-size: 17px;}

    .contact-banner { padding: 15% 0 26% 0; margin-top: 0px;}
    .contact-info { margin: -18% 0 5% 0;}
    .contact-info .info { padding: 30px; margin: 0 0 20px 0; min-height: 120px;}
    .contact-info .info .icon i{ width: 54px; height: 54px; font-size: 18px; line-height: 2.9; }
    .contact-info h5 { font-size: 18px;}
    .contact-info p a{ font-size: 15px;}

    .form-section { padding: 5% 0 7% 0;}
    .contact-form .form-control { padding: 14px 24px; border-radius: 30px;margin: 0 0 18px 0;}


}
@media (min-width:768px) and (max-width:991px){
    
}

@media (min-width:992px) and (max-width:1200px){
    
}