/* Theme Name: Repair Pro AE Theme URI: https://example.com/repair-pro-ae Author: Jawad Ali Description: Responsive one-page appliance repair theme for Dubai and Abu Dhabi. Version: 1.0.0 Requires at least: 6.2 Requires PHP: 7.4 Text Domain: repair-pro-ae */
 :root{
    --rp-red:#d8171f;
    --rp-red-dark:#a7070d;
    --rp-ink:#07131d;
    --rp-green:#20aa48;
    --rp-paper:#f7f7f5;
    --rp-line:#dadddf;
    --rp-max:1180px
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    color:#111820;
    background:#fff;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif
}
.rp-site a{
    color:inherit;
    text-decoration:none
}
.rp-wrap{
    width:min(var(--rp-max),calc(100% - 40px));
    margin-inline:auto
}
.rp-hero{
    position:relative;
    min-height:625px;
    overflow:hidden;
    background:linear-gradient(110deg,#fbfbfa 0 46%,#e8eae8 73%,#fafafa 100%)
}
.rp-hero:before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 57% 52%,#fff 0 12%,transparent 34%);
    pointer-events:none
}
.rp-topbar{
    position:relative;
    z-index:3;
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.rp-brand{
    display:flex;
    align-items:center;
    gap:12px
}
.rp-brand-mark{
    width:48px;
    height:48px;
    border:8px solid var(--rp-ink);
    border-radius:50%;
    position:relative;
    box-shadow:6px 0 0 -1px var(--rp-red)
}
.rp-brand-mark:after{
    content:"";
    position:absolute;
    inset:8px;
    border-radius:50%;
    background:var(--rp-red)
}
.rp-brand b{
    display:block;
    font-size:24px;
    line-height:1;
    font-weight:950
}
.rp-brand em{
    font-style:normal;
    color:var(--rp-red)
}
.rp-brand small{
    display:block;
    margin-top:5px;
    font-size:10px;
    letter-spacing:.09em;
    font-weight:800
}
.rp-serving{
    font-size:19px;
    font-weight:900
}
.rp-serving i{
    color:var(--rp-red);
    font-style:normal;
    font-size:24px
}
.rp-serving strong{
    color:var(--rp-red)
}
.rp-hero-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.06fr .72fr .83fr;
    align-items:end;
    gap:18px;
    min-height:532px
}
.rp-hero-copy{
    align-self:center;
    padding:28px 0 48px
}
.rp-kicker{
    margin:0 0 8px;
    color:var(--rp-red);
    font-size:12px;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase
}
.rp-hero h1{
    margin:0;
    font-size:clamp(50px,5.1vw,68px);
    line-height:.89;
    letter-spacing:-.055em;
    font-weight:950
}
.rp-hero h1 span,.rp-hero h2 span{
    color:var(--rp-red)
}
.rp-hero h2{
    margin:20px 0 0;
    font-size:18px;
    line-height:1.25;
    font-weight:900
}
.rp-appliances{
    display:flex;
    margin:25px 0 24px
}
.rp-appliances div{
    width:90px;
    text-align:center;
    padding:0 9px;
    border-right:1px solid #c8ccce
}
.rp-appliances div:last-child{
    border:0
}
.rp-appliances b{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    margin:auto;
    border:3px solid #15212a;
    border-radius:6px;
    font-size:19px
}
.rp-appliances small{
    display:block;
    margin-top:7px;
    font-size:8px;
    font-weight:900;
    text-transform:uppercase
}
.rp-actions{
    display:flex;
    gap:14px
}
.rp-action{
    min-width:194px;
    height:62px;
    padding:8px 14px;
    border-radius:8px;
    color:#fff!important;
    display:grid;
    grid-template-columns:46px 1fr;
    grid-template-rows:1fr 1.2fr;
    box-shadow:0 7px 17px #0002
}
.rp-action i{
    grid-row:1/3;
    display:grid;
    place-items:center;
    font-size:27px;
    font-style:normal
}
.rp-action small{
    align-self:end;
    font-size:11px;
    font-weight:900
}
.rp-action strong{
    font-size:19px
}
.rp-call{
    background:linear-gradient(135deg,#e41e25,var(--rp-red-dark))
}
.rp-wa{
    background:linear-gradient(135deg,#2abc50,#108b2c)
}
.rp-tech{
    height:480px;
    position:relative;
    align-self:end
}
.rp-tech img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    border-radius:140px 140px 0 0;
    filter:saturate(.82) contrast(1.03)
}
.rp-tech:after{
    content:"DUMMY IMAGE";
    position:absolute;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    padding:6px 10px;
    border-radius:4px;
    background:#07131dcc;
    color:#fff;
    font-size:9px;
    letter-spacing:.12em;
    white-space:nowrap
}
.rp-book{
    align-self:center;
    margin-bottom:18px;
    padding:0 18px 18px;
    border-radius:14px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 16px 45px #0003
}
.rp-book header{
    margin:0 -18px 15px;
    padding:18px 22px;
    background:var(--rp-ink);
    color:#fff
}
.rp-book h3{
    margin:0;
    font-size:27px;
    line-height:1
}
.rp-book header p{
    margin:4px 0 0;
    color:#ff4248;
    font-size:15px;
    font-weight:900
}
.rp-field{
    height:45px;
    margin:10px 0;
    border:1px solid var(--rp-line);
    border-radius:6px;
    display:flex;
    align-items:center;
    padding:0 11px;
    color:#6a7277
}
.rp-field span{
    width:26px
}
.rp-field input,.rp-field select{
    width:100%;
    height:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#5d6468;
    font:inherit;
    font-size:13px
}
.rp-book button{
    width:100%;
    height:49px;
    border:0;
    border-radius:6px;
    background:linear-gradient(#e51f26,#c70b12);
    color:#fff;
    font-size:16px;
    font-weight:950;
    cursor:pointer
}
.rp-notice{
    padding:9px 12px;
    margin-bottom:10px;
    border-radius:5px;
    background:#e7f7eb;
    color:#126d2c;
    font-size:12px
}
.rp-trust{
    background:var(--rp-ink);
    color:#fff;
	padding: 15px 0;
}
.rp-trust-grid{
    min-height:76px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    align-items:center
}
.rp-trust-grid>div{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    border-right:1px solid #ffffff1c
}
.rp-trust-grid>div:last-child{
    border:0
}
.rp-trust i{
    font-style:normal;
    font-size:31px;
    color:#fff
}
.rp-trust b{
    font-size:13px;
    line-height:1.25
}
.rp-section{
    padding:34px 0
}
.rp-section-title{
    margin:0 0 25px;
    text-align:center;
    font-size:30px;
    font-weight:950
}
.rp-section-title span{
    color:var(--rp-red)
}
.rp-services{
    background:#fafafa
}
.rp-services .rp-wrap{
	width:100% !important;
}
.rp-service-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:12px
}
.rp-card{
    overflow:hidden;
    border:1px solid #d8dcde;
    border-radius:12px;
    background:#fff;
    text-align:center;
    box-shadow:0 4px 14px #0000000b
}
.rp-card img{
    display:block;
    width:100%;
    height:155px;
    object-fit:cover;
    filter:grayscale(.12)
}
.rp-card h3{
    margin:14px 8px 7px;
    font-size:18px;
    text-transform:uppercase
}
.rp-card p{
    margin:0 12px 16px;
    color:#3c4449;
    font-size:16px;
    line-height:1.5
}
.rp-why{
    background:linear-gradient(90deg,#eeeeec,#fff 28% 72%,#eeeeec)
}
.rp-benefits{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:26px
}
.rp-benefit{
    text-align:center
}
.rp-benefit i{
    display:grid;
    place-items:center;
    width:68px;
    height:68px;
    margin:auto;
    border:2px solid var(--rp-red);
    border-radius:50%;
    background:#fff;
    font-size:30px;
    font-style:normal
}
.rp-benefit h3{
    margin:10px 0 5px;
    font-size:18px
}
.rp-benefit p{
    margin:0;
    font-size:14px;
    line-height:1.5
}
.rp-area-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    max-width:870px;
    margin:auto
}
.rp-area{
    display:grid;
    grid-template-columns:145px 1fr;
    gap:16px;
    align-items:center;
    padding:14px;
    border:1px solid var(--rp-line);
    border-radius:13px
}
.rp-area img{
    width:100%;
    height:92px;
    object-fit:cover;
    border-radius:8px
}
.rp-area h3{
    margin:0 0 5px;
    color:var(--rp-red);
    font-size:19px
}
.rp-area:nth-child(2) h3{
    color:var(--rp-green)
}
.rp-area p{
    margin:0;
    font-size:12px;
    line-height:1.55
}
.rp-lower{
    display:grid;
    grid-template-columns:.92fr 1.08fr;
    margin-top:8px
}
.how-it-work{
	width:100% !important;
}
.rp-process{
    padding:28px 30px;
    border-radius:0 15px 0 0;
    background:var(--rp-ink);
    color:#fff
}
.rp-process>h2{
    margin:0;
    font-size:24px
}
.rp-process>p{
    margin:2px 0 18px;
    color:#f23b40;
    font-weight:900
}
.rp-steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:27px
}
.rp-step{
    position:relative
}
.rp-step:not(:last-child):after{
    content:"→";
    position:absolute;
    right:-21px;
    top:9px;
    font-size:28px
}
.rp-step i{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--rp-red);
    font-style:normal;
    font-size:22px;
    font-weight:900
}
.rp-step h3{
    margin:10px 0 5px;
    font-size:16px
}
.rp-step p{
    margin:0;
    color:#e3e6e7;
    font-size:14px;
    line-height:1.5
}
.rp-faq{
    padding:9px 0 26px 44px
}
.rp-faq h2{
    margin:0 0 12px;
    font-size:23px
}
.rp-faq details{
    margin:7px 0;
    border:1px solid var(--rp-line);
    border-radius:7px;
    background:#fff
}
.rp-faq summary{
    display:flex;
    justify-content:space-between;
    padding:9px 12px;
    cursor:pointer;
    list-style:none;
    font-size:16px
}
.rp-faq summary b{
    color:var(--rp-red);
    font-size:17px
}
.rp-faq details p{
    margin:0;
    padding:0 12px 12px;
    color:#566067;
    font-size:14px;
    line-height:1.5
}
.rp-footer{
    background:linear-gradient(100deg,#ad080e,#e0171e,#a7070d);
    color:#fff
}
.rp-footer-grid{
    min-height:100px;
    display:grid;
    grid-template-columns:1.25fr 1fr 1fr;
    align-items:center
}
.rp-footer-lead{
    display:flex;
    align-items:center;
    gap:17px;
    font-size:17px
}
.rp-footer-lead i{
    font-size:40px;
    font-style:normal
}
.rp-footer a{
    display:flex;
    flex-direction:column;
    padding-left:28px;
    border-left:1px solid #ffffff40
}
.rp-footer small{
    font-size:12px;
    font-weight:850
}
.rp-footer strong{
    font-size:28px;
    letter-spacing:.02em
}
.rp-credit{
    text-align:center;
    background:#07131d;
    color:#aeb7bd;
    font-size:16px;
    padding:15px
}
.screen-reader-text{
    position:absolute!important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.faq-section .rp-wrap{
	width: 100% !important;
}
 @media(max-width:1020px){
    .rp-hero-grid{
        grid-template-columns:1.18fr .82fr
    }
    .rp-tech{
        display:none
    }
    .rp-service-grid{
        grid-template-columns:repeat(3,1fr)
    }
    .rp-book{
        margin-bottom:35px
    }
    .rp-hero h1{
        font-size:54px
    }
}
 @media(max-width:760px){
    .rp-wrap{
        width:min(100% - 24px,var(--rp-max))
    }
    .rp-topbar{
        padding:13px 0;
        align-items:flex-start
    }
    .rp-brand b{
        font-size:18px
    }
    .rp-brand-mark{
        width:38px;
        height:38px;
        border-width:6px
    }
    .rp-serving{
        max-width:125px;
        text-align:right;
        font-size:11px
    }
    .rp-hero-grid{
        display:block;
        min-height:0
    }
    .rp-hero-copy{
        padding:38px 0 25px
    }
    .rp-hero h1{
        font-size:45px
    }
    .rp-hero h2{
        font-size:14px
    }
    .rp-appliances{
        flex-wrap: wrap;
        justify-content: center;
    }
    .rp-appliances div{
        min-width: 50%;
        width: 50%;
        margin-bottom: 20px;
        border: none;
    }
    .rp-appliances b {
		width: 90px;
		height: 90px;
		font-size: 26px;
	}
    .rp-appliances small {
		font-size: 14px;
		font-weight: 600;
		
	}
    .rp-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:9px
    }
    .rp-action{
        min-width:0;
        height:58px;
        grid-template-columns:36px 1fr;
        padding-right:7px
    }
    .rp-action strong{
        font-size:14px
    }
	 
    .rp-book{
        margin:5px 0 25px
    }
    .rp-trust-grid{
        grid-template-columns:1fr 1fr;
        padding:10px 0;
        gap:7px
    }
    .rp-trust-grid>div{
        justify-content:flex-start;
        padding:7px;
        border:0
    }
    .rp-trust b{
        font-size:10px
    }
    .rp-section-title{
        font-size:23px
    }
    .rp-service-grid{
        grid-template-columns:1fr 1fr
    }
    .rp-card img{
        height:135px
    }
    .rp-benefits{
        grid-template-columns:1fr 1fr;
        gap:26px 15px
    }
    .rp-benefit:last-child{
        grid-column:1/3
    }
    .rp-area-grid,.rp-lower{
        grid-template-columns:1fr
    }
    .rp-area{
        grid-template-columns:110px 1fr
    }
    .rp-process{
        padding:24px 18px;
        border-radius:0
    }
    .rp-faq{
        padding:28px 0
    }
    .rp-footer-grid{
        grid-template-columns:1fr;
        padding:18px 0;
        gap:13px
    }
    .rp-footer a{
        padding:12px 0 0;
        border-left:0;
        border-top:1px solid #ffffff42
    }
    .rp-footer strong{
        font-size:24px
    }
	 .rp-services, .rp-faq{
		 padding-left:15px;
		 padding-right:15px;
	 }
}
 @media(max-width:410px){
    .rp-hero h1{
        font-size:39px
    }
    .rp-service-grid,.rp-actions,.rp-benefits{
        grid-template-columns:1fr
    }
    .rp-benefit:last-child{
        grid-column:auto
    }
    .rp-area{
        grid-template-columns:1fr
    }
    .rp-steps{
        gap:14px
    }
    .rp-step:not(:last-child):after{
        display:none
    }
}