/* ===========================================
ROTHE HOMEPAGE CSS
PART 1
=========================================== */

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

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

.rp-container{
    width:100%;
    max-width:1320px;
    margin:auto;
    padding:0 20px;
}

/* ==========================
COMMON TYPOGRAPHY
========================== */

.rp-section-title{
    text-align:center;
    max-width:760px;
    margin:0 auto 45px;
}

.rp-section-title span{
    display:block;
    color:#F4B400;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:8px;
    text-transform:uppercase;
}

.rp-section-title h2{
    font-family:Raleway,sans-serif;
    font-size:22px;
    font-weight:600;
    color:#000;
    line-height:31px;
    margin-bottom:10px;
}

.rp-section-title p{

    font-family:Roboto,sans-serif;
    font-size:16px;
    line-height:27px;
    color:#666;
    text-align:center;

}

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

.rp-home-hero{

    min-height:600px;

    background:url("../images/Rothe-Web-Banner.webp") center center no-repeat;

    background-size:cover;

    display:flex;

    align-items:center;

    position:relative;
}

.rp-overlay{

    position:absolute;

    inset:0;

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

}

.rp-home-content{

    width:50%;

    color:#222;

}

.rp-tagline{

    display:block;

    font-size:14px;

    letter-spacing:2px;

    color:#21266B;

    font-weight:600;

    margin-bottom:15px;

}

.rp-home-content h1{

    font-size:46px;

    line-height:1.15;

    font-weight:700;

    margin-bottom:20px;

}

.rp-home-content p{

    font-size:18px;

    line-height:32px;

    color:#444;

    margin-bottom:35px;

}

.rp-btn-primary{

    display:inline-block;

    padding:15px 35px;

    background:#F4B400;

    color:#000;

    text-decoration:none;

    border-radius:4px;

    font-weight:600;

    margin:0;

}

.rp-btn-primary:hover{

    background:#21266B;

    color:#fff;

}

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

.rp-about-section{

    padding:70px 0;

    background:#fff;

}

.rp-grid-2{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.rp-about-img{

    border-radius:10px;

}

.rp-small-title{

    color:#F4B400;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:10px;

    display:block;

}

.rp-about-section h2{

    font-family:Raleway,sans-serif;

    font-size:22px;

    font-weight:600;

    color:#000;

    line-height:31px;

    margin-bottom:15px;

}

.rp-about-section p{

    font-family:Roboto,sans-serif;

    font-size:16px;

    line-height:27px;

    color:#666;

    margin-bottom:15px;

}

.rp-about-list{

    list-style:none;

    padding:0;

    margin-top:18px;

}

.rp-about-list li{

    margin-bottom:10px;

    font-size:16px;

    color:#555;

}

.rp-btn-dark{

    display:inline-block;

    margin-top:20px;

    background:#21266B;

    color:#fff;

    padding:14px 28px;

    border-radius:5px;

    text-decoration:none;

}

.rp-btn-dark:hover{

    background:#F4B400;

    color:#000;

}

/* ===========================================
ROTHE HOMEPAGE CSS
PART 2
Products + Why Choose + Industries
=========================================== */


/* ==========================
PRODUCTS
========================== */

.rp-products-section{

    padding:70px 0;

    background:#f8f8f8;

}

.rp-product-grid{

    display:grid;

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

    gap:25px;

}

.rp-product-card{

    background:#fff;

    padding:30px;

    border-radius:10px;

    text-align:center;

    transition:.35s;

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

}

.rp-product-card:hover{

    transform:translateY(-8px);

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

}

.rp-product-card img{

    width:100%;

    margin:auto;

    margin-bottom:20px;

}

.rp-product-card h3{

    font-family:Raleway,sans-serif;

    font-size:22px;

    font-weight:600;

    color:#000;

    line-height:31px;

    margin-bottom:12px;

}

.rp-product-card a{

    color:#21266B;

    font-weight:600;

    text-decoration:none;

}

.rp-product-card a:hover{

    color:#F4B400;

}



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

.rp-why-section{

    padding:70px 0;

    background:#fff;

}

.rp-why-grid{

    display:grid;

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

    gap:25px;

}

.rp-why-card{

    background:#fff;

    padding:25px;

    border-radius:10px;

    text-align:center;

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

    transition:.3s;

}

.rp-why-card:hover{

    transform:translateY(-8px);

}

.rp-why-card img{

    width:90px;

    height:90px;

    object-fit:contain;

    margin:auto;

    margin-bottom:18px;

}

.rp-why-card h3{

    font-family:Raleway,sans-serif;

    font-size:22px;

    font-weight:600;

    color:#000;

    line-height:31px;

    margin-bottom:10px;

    text-align:center;

}

.rp-why-card p{

    font-family:Roboto,sans-serif;

    font-size:16px;

    line-height:27px;

    color:#666;

    text-align:center;

}



/* ==========================
INDUSTRIES
========================== */

.rp-industries-section{

    padding:70px 0;

    background:#f8f8f8;

}

.rp-industries-grid{

    display:grid;

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

    gap:25px;

}

.rp-industry-card{

    background:#fff;

    padding:25px;

    text-align:center;

    border-radius:10px;

    transition:.3s;

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

}

.rp-industry-card:hover{

    transform:translateY(-8px);

}

.rp-industry-card img{

    width:75px;

    height:75px;

    object-fit:contain;

    margin:auto;

    margin-bottom:15px;

}

.rp-industry-card h3{

    font-family:Raleway,sans-serif;

    font-size:22px;

    font-weight:600;

    color:#000;

    line-height:31px;

    text-align:center;

}



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

@media(max-width:991px){

.rp-product-grid{

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

}

.rp-why-grid{

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

}

.rp-industries-grid{

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

}

}



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

@media(max-width:767px){

.rp-products-section,
.rp-why-section,
.rp-industries-section{

padding:50px 0;

}

.rp-product-grid,
.rp-why-grid,
.rp-industries-grid{

grid-template-columns:1fr;

gap:20px;

}

.rp-product-card,
.rp-why-card,
.rp-industry-card{

padding:20px;

}

.rp-product-card img{

max-width:140px;

}

.rp-why-card img{

width:70px;

height:70px;

}

.rp-industry-card img{

width:60px;

height:60px;

}

.rp-product-card h3,
.rp-why-card h3,
.rp-industry-card h3{

font-size:20px;

line-height:28px;

}

}

/* ===========================================
ROTHE HOMEPAGE CSS
PART 3
Clients + CTA + Global Responsive
=========================================== */


/* =====================================
CLIENTS
===================================== */

.rp-clients-section{

    padding:70px 0;

    background:#ffffff;

}

.rp-client-grid{

    display:grid;

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

    gap:25px;

}

.rp-client-box{

    background:#fff;

    border:1px solid #eee;

    border-radius:10px;

    padding:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:120px;

    transition:.3s;

}

.rp-client-box:hover{

    transform:translateY(-6px);

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

}

.rp-client-box img{

    max-width:150px;

    max-height:80px;

    object-fit:contain;

}



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

.rp-cta-section{

    background:#21266B;

    padding:70px 20px;

    text-align:center;

}

.rp-cta-section h2{

    font-family:Raleway,sans-serif;

    font-size:32px;

    font-weight:600;

    color:#fff;

    margin-bottom:15px;

}

.rp-cta-section p{

    max-width:700px;

    margin:0 auto 30px;

    font-family:Roboto,sans-serif;

    font-size:16px;

    line-height:27px;

    color:#ddd;

}

.rp-cta-btn{

    display:inline-block;

    padding:14px 35px;

    background:#F4B400;

    color:#000;

    border-radius:5px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.rp-cta-btn:hover{

    background:#fff;

    color:#21266B;

}



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

@media(max-width:991px){

.rp-container{

    padding:0 25px;

}

.rp-home-hero{

    min-height:500px;

}

.rp-home-content{

    width:60%;

}

.rp-home-content h1{

    font-size:38px;

}

.rp-home-content p{

    font-size:16px;

    line-height:28px;

}

.rp-grid-2{

    grid-template-columns:1fr;

    gap:40px;

}

.rp-about-img{

    margin:auto;

}

.rp-client-grid{

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

}

}



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

@media(max-width:767px){

.rp-container{

    padding:0 18px;

}


/* Hero */

.rp-home-hero{

    height:350px;

    text-align:center;

    justify-content:center;

}

.rp-home-content{

    max-width:100%;

}

.rp-home-content h1{

    font-size:28px;

    line-height:1.3;

}

.rp-home-content p{

    font-size:15px;

    line-height:25px;

    margin-bottom:20px;

}


/* Hero Button */

.rp-btn-primary{

    display:inline-block;

    width:auto;

    margin:15px auto 0;

    padding:12px 25px;

}


/* About */

.rp-about-section{

    padding:50px 0;

}

.rp-grid-2{

    grid-template-columns:1fr;

    gap:25px;

}

.rp-about-img{

    width:100%;

}

.rp-about-list li{

    font-size:15px;

}


/* Clients */

.rp-clients-section{

    padding:50px 0;

}

.rp-client-grid{

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

    gap:15px;

}

.rp-client-box{

    min-height:90px;

    padding:12px;

}

.rp-client-box img{

    max-width:100px;

}


/* CTA */

.rp-cta-section{

    padding:50px 15px;

}

.rp-cta-section h2{

    font-size:24px;

}

.rp-cta-section p{

    font-size:15px;

    line-height:25px;

}

.rp-cta-btn{

    width:100%;

    text-align:center;

}

}



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

@media(max-width:480px){

.rp-home-hero{

     min-height:250px;

}

.rp-home-content h1{

    font-size:20px;

}

.rp-home-content p{

    display:none;

}

.rp-btn-primary{
    padding:10px 10px;
    font-size:12px;
    margin-top:150px;

}

.rp-client-grid{

    grid-template-columns:1fr;

}

.rp-cta-section h2{

    font-size:20px;

}

}



/* =====================================
EXTRA IMPROVEMENTS
===================================== */

/*html{*/

/*    scroll-behavior:smooth;*/

/*}*/


/*body{*/

/*    overflow-x:hidden;*/

/*}*/

a{

    transition:.3s;

}

section{

    position:relative;

}

.rp-product-card,
.rp-why-card,
.rp-industry-card,
.rp-client-box{

    height:100%;

}