/* Dran Engineers – overrides on top of Bootstrap 5 (layout comes from container / row / col-*) */
:root{--red:#f23a3a;--dark:#2f2f2f;--bs-body-font-family:'Poppins',sans-serif;--bs-body-font-weight:300;--bs-body-color:#222;--bs-body-font-size:1.25rem;--bs-body-line-height:1.8}
body{overflow-x:hidden}
img{height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
h1,h2,h3,h4{font-family:'Oswald',sans-serif;margin:0}
@media(min-width:1600px){.container{max-width:1560px}}

/* header / navbar */
.site-header{background:#fff;border-top:4px solid var(--red);box-shadow:0 2px 12px rgba(0,0,0,.08);z-index:1030}
.site-header .navbar{padding:0;min-height:87px}
.navbar-brand{padding:8px 0;margin:0}
.navbar-brand img{width:288px}
.navbar-nav .nav-link{font-family:'Oswald',sans-serif;font-weight:300;font-size:1.125rem;text-transform:uppercase;color:#222;padding:.7rem 1rem;margin-left:.25rem;line-height:1.3}
.navbar-nav .nav-link.active,.navbar-nav .nav-link.cta,.navbar-nav .nav-link.show{background:var(--red);color:#fff}
.dropdown-toggle::after{margin-left:.5em;vertical-align:.15em}
.dropdown-menu{border:0;border-top:2px solid var(--red);border-radius:0;box-shadow:0 8px 20px rgba(0,0,0,.12);padding:.5rem 0;margin-top:0;min-width:14rem}
.dropdown-menu.dropdown-wide{width:16.5rem}
.dropdown-item{font-family:'Oswald',sans-serif;font-weight:300;font-size:1rem;text-transform:uppercase;padding:.7rem 1.5rem;white-space:normal;line-height:1.3}
.dropdown-item:hover,.dropdown-item:focus{background:transparent;color:var(--red)}
.navbar-toggler{border:0;padding:.5rem}
.navbar-toggler:focus{box-shadow:none}
@media(min-width:992px){.navbar .dropdown:hover>.dropdown-menu{display:block}}
@media(max-width:1199.98px){.navbar-brand img{width:220px}.navbar-nav .nav-link{padding:.6rem .55rem;font-size:.95rem}}
@media(max-width:991.98px){
 .navbar-collapse{max-height:80vh;overflow:auto;border-top:1px solid #eee}
 .navbar-nav .nav-link{margin:0;padding:.85rem 1.25rem;font-size:1rem}
 .dropdown-menu,.dropdown-menu.dropdown-wide{box-shadow:none;border-top:0;background:#f7f7f7;width:100%}
 .dropdown-item{padding-left:2.25rem}
 .navbar-brand img{width:190px}
}

/* hero + carousels */
.hero .carousel-item img{height:41vw;min-height:260px;max-height:800px;object-fit:cover}
.carousel-indicators [data-bs-target]{width:14px;height:14px;border-radius:50%;border:1px solid #fff;background:transparent;opacity:1;margin:0 3px}
.carousel-indicators .active{background:#fff}
.hero .carousel-control-prev,.hero .carousel-control-next{display:none}
.product-carousel{overflow:hidden;background:#ffb347;margin-bottom:3.5rem}
.product-carousel .carousel-indicators{position:static;margin:0;padding:.9rem 0;background:#fff;border-bottom:1px solid #ccc}
.product-carousel .carousel-indicators [data-bs-target]{background:#777;border:0;width:12px;height:12px}
.product-carousel .carousel-indicators .active{background:#111}
.product-carousel .carousel-control-prev,.product-carousel .carousel-control-next{top:0;bottom:3rem;width:9%}
@media(max-width:767.98px){.hero .carousel-item img{height:52vw;min-height:150px}}

/* page banner / breadcrumb */
.page-banner{background:#f9f9f9;padding:54px 0 52px}
.page-banner h1{font-weight:300;font-size:2.875rem;text-transform:uppercase;color:#444;line-height:1.2}
.breadcrumb{margin:1.25rem 0 0;font-size:1.125rem;--bs-breadcrumb-divider:'/'}
.breadcrumb a{color:#000}
.breadcrumb-item.active{color:#555}
@media(max-width:991.98px){.page-banner{padding:34px 0 30px}.page-banner h1{font-size:2.25rem}}
@media(max-width:575.98px){.page-banner h1{font-size:1.9rem}.breadcrumb{font-size:1rem}}

/* content */
.main{padding:50px 0 60px}
.content h1{font-weight:700;font-size:2.75rem;line-height:1.45;color:#000;margin-bottom:1rem}
.content h2{font-weight:300;font-size:2.25rem;color:#000;margin:1.6rem 0 .9rem}
.content p{text-align:justify}
.content b,.content strong{font-weight:600}
.content ul{padding-left:1.6rem;margin-bottom:1rem}
.content li{margin-bottom:.2rem}
@media(max-width:1399.98px){.content h1{font-size:2.4rem}}
@media(max-width:991.98px){.content h1{font-size:2rem}.content h2{font-size:1.9rem}}
@media(max-width:575.98px){.content h1{font-size:1.65rem}.content h2{font-size:1.6rem}.content p{text-align:left}}
.sidebar h3{font-weight:300;font-size:1.5rem;color:#000;position:relative;padding-bottom:.75rem;margin-bottom:1.25rem}
.sidebar h3:after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--red)}
.check li{position:relative;padding-left:1.7rem;margin-bottom:1rem;line-height:1.7}
.check li:before{content:"";position:absolute;left:.4rem;top:.55em;width:5px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(40deg)}
@media(max-width:1199.98px){body{--bs-body-font-size:1.1rem}}

/* gallery */
.gallery{margin:1.5rem 0}
.gallery figure{margin:0;text-align:center}
.card-photo{background:#fff;border-radius:3px;box-shadow:0 0 12px rgba(0,0,0,.18);padding:.9rem}
.card-photo img{width:100%;aspect-ratio:4/3;object-fit:contain}
.gallery figcaption{font-size:1.1rem;line-height:1.7;margin-top:.6rem}

/* buttons / forms */
.btn-dran{background:var(--red);color:#fff;font-weight:400;font-size:1.125rem;padding:.95rem 2.4rem;border-radius:3px;border:0}
.btn-dran:hover,.btn-dran:focus{background:#d62c2c;color:#fff}
.quote-wrap{margin-top:2.75rem}
.dran-form{max-width:760px}
.dran-form .form-label{font-weight:400;font-size:1rem}
.dran-form .form-control{font-size:1rem;padding:.75rem .9rem;border-radius:3px}
.hint{font-size:1rem;color:#555}
.ratio-map{width:100%;height:340px;border:0}

/* home */
.welcome{padding:60px 0 20px}
.welcome h2{font-weight:300;font-size:2.75rem;color:#000;margin-bottom:.9rem}
.welcome h2.up{text-transform:uppercase;margin-top:2.75rem}
.welcome p{text-align:justify}
.welcome b{font-weight:600}
.cards{padding:3.5rem 0 2.5rem}
@media(min-width:1200px){.cards{padding-left:1.75rem;padding-right:1.75rem}}
.pcard{border:1px solid #ddd;border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.12);background:#fff;font-family:'Times New Roman',serif;font-weight:400;color:#000;height:100%}
.pcard .t{background:linear-gradient(#f4f4f4,#e8e8e8);border-bottom:1px solid #ddd;text-align:center;padding:.9rem .5rem;font-size:1.3rem}
.pcard .b{padding:1.25rem 1.25rem .9rem}
.pcard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pcard a.more{font-size:1.125rem;display:block;margin-top:.4rem}
.logos{padding:1rem 0 4.5rem}
.brand-logo{max-height:120px;width:auto;mix-blend-mode:multiply}
@media(max-width:575.98px){.welcome p{text-align:left}.welcome h2{font-size:1.9rem}}

/* accordion (customers) */
.accordion{--bs-accordion-border-color:transparent;--bs-accordion-btn-focus-box-shadow:none;--bs-accordion-active-bg:#e8e8e8;--bs-accordion-active-color:#e00;--bs-accordion-btn-color:#e00}
.accordion-item{border:0;margin-bottom:.4rem;background:transparent}
.accordion-button{background:#e8e8e8;color:#e00;font-family:Arial,Helvetica,sans-serif;font-size:1.2rem;padding:1.35rem 1.9rem;border-radius:3px!important}
.accordion-button:not(.collapsed){box-shadow:none}
.accordion-body{border:1px solid #ddd;border-top:0;background:#fff}

/* footer */
.site-footer{background-color:var(--dark);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='2' height='2' fill='%23383838'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23282828'/%3E%3C/svg%3E");border-top:4px solid var(--red);color:#fff;padding:52px 0 70px}
.site-footer h4{font-weight:300;font-size:1.75rem;text-transform:uppercase;margin-bottom:1.5rem;line-height:1.2}
.site-footer .check li{font-weight:400;margin-bottom:.6rem}
.site-footer p{margin:0;font-weight:400;line-height:1.7}
.site-footer p.mail{margin-top:.9rem}
.fmap{height:162px;width:100%;border:0;background:#e5e3df}
.copy{text-align:center;font-size:1.05rem;color:#555;padding:2px 15px 4px}
.copy b{font-weight:400;color:#000}
.copy i{font-style:normal;margin:0 .9rem;color:#333}
@media(max-width:575.98px){.site-footer h4{font-size:1.5rem}.copy{font-size:.9rem}.copy i{margin:0 .35rem}}

/* back to top */
#top{position:fixed;right:30px;bottom:30px;width:52px;height:52px;background:#111;border:0;cursor:pointer;display:none;z-index:1040;font-size:0}
#top:after{content:"";position:absolute;left:19px;top:22px;width:11px;height:11px;border-left:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg)}
#top.show{display:block}
@media(max-width:575.98px){#top{right:14px;bottom:14px;width:44px;height:44px}#top:after{left:16px;top:18px}}