/*
Theme Name: Al Rehmat Container Terminal
Theme URI: https://alrehmatterminal.com
Author: Hamza Raj
Author URI: https://www.linkedin.com/in/h-m-hamza/
Description: Theme For Al Rehmat Container Terminal
Version: 1.7.6
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: al-rehmat-terminal-theme
*/

:root {
    --black:#000;
    --white:#fff;
    --bg:#FAFAFA;
    --text:#7A7A7A;
    --accent:#FFBD2B;
    --accent-2:#022A68;
    --card-bg:#F1F1F1;
    --overlay:#B4B4B4;
    --art-font-family-heading:'Montserrat',sans-serif;
    --art-font-family-body:'Lato',sans-serif;
    --art-font-body-d:16px;
    --art-font-h1-d:48px;
    --art-font-h2-d:36px;
    --art-font-h3-d:28px;
    --art-font-h4-d:22px;
    --art-font-h5-d:18px;
    --art-font-h6-d:16px;
    --art-font-body-t:16px;
    --art-font-h1-t:40px;
    --art-font-h2-t:32px;
    --art-font-h3-t:26px;
    --art-font-h4-t:20px;
    --art-font-h5-t:17px;
    --art-font-h6-t:15px;
    --art-font-body-m:15px;
    --art-font-h1-m:36px;
    --art-font-h2-m:28px;
    --art-font-h3-m:24px;
    --art-font-h4-m:18px;
    --art-font-h5-m:16px;
    --art-font-h6-m:14px;
    --art-pad-top-d:60px;
    --art-pad-bottom-d:60px;
    --art-pad-left-d:0px;
    --art-pad-right-d:0px;
    --art-pad-top-t:50px;
    --art-pad-bottom-t:50px;
    --art-pad-left-t:0px;
    --art-pad-right-t:0px;
    --art-pad-top-m:30px;
    --art-pad-bottom-m:30px;
    --art-pad-left-m:20px;
    --art-pad-right-m:20px
}
*,*::before,*::after {
    margin:0;
    padding:0;
    box-sizing:border-box
}
html {
    width:100%;
    overflow-x:clip
}
body {
    width:100%;
    min-width:0;
    background:var(--bg);
    font-family:var(--art-font-family-body);
    color:var(--text);
    font-size:var(--art-font-body-d);
    line-height:1.7
}
.main-header,.main-header .navbar {
    width:100%
}
.container {
    width:100%;
    max-width:1340px;
    margin-left:auto;
    margin-right:auto;
    padding-left:15px;
    padding-right:15px
}
h1,h2,h3,h4,h5,h6 {
    font-family:var(--art-font-family-heading);
    color:var(--black);
    font-weight:700;
    line-height:1.3
}
h1 {
    font-size:var(--art-font-h1-d)
}
h2 {
    font-size:var(--art-font-h2-d)
}
h3 {
    font-size:var(--art-font-h3-d)
}
h4 {
    font-size:var(--art-font-h4-d)
}
h5 {
    font-size:var(--art-font-h5-d)
}
h6 {
    font-size:var(--art-font-h6-d)
}
p {
    font-size:var(--art-font-body-d);
    line-height:1.75;
    margin-bottom:10px
}
.p-lg {
    font-size:calc(var(--art-font-body-d)+2px)
}
.p-sm {
    font-size:calc(var(--art-font-body-d) - 2px)
}
a {
    color:var(--accent-2);
    text-decoration:none;
    transition:color 0.3s ease
}
a:hover {
    color:var(--accent)
}
section {
    padding-top:var(--art-pad-top-d);
    padding-bottom:var(--art-pad-bottom-d)
}
section.art-hero,section.art-svc-hero,section.art-archive-hero,section.art-reviews,section.art-biz,section.art-hub-section,section.art-archive-loop-section,section.art-single-post__layout-section {
    padding-left:0;
    padding-right:0
}
.card-custom {
    background:var(--card-bg);
    padding:25px;
    border-radius:8px
}
.custom-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 24px;
    font-weight:600;
    font-size:14px;
    border-radius:6px;
    border:none;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    transition:transform 0.25s ease,color 0.3s ease
}
.custom-btn span,.custom-btn i,.custom-btn svg {
    position:relative;
    z-index:2
}
.custom-btn:hover {
    transform:translateY(-3px)
}
.custom-btn::before {
    content:"";
    position:absolute;
    inset:0;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform 0.4s ease;
    z-index:-1
}
.custom-btn:hover::before {
    transform:scaleX(1)
}
.btn-accent {
    background:var(--accent);
    color:var(--white)
}
.btn-accent::before {
    background:var(--accent-2)
}
.btn-accent:hover {
    color:var(--white)
}
.btn-accent2 {
    background:var(--accent-2);
    color:var(--white)
}
.btn-accent2::before {
    background:var(--accent)
}
.btn-accent2:hover {
    color:var(--white)
}
.btn-accent-white {
    background:var(--accent);
    color:var(--white)
}
.btn-accent-white::before {
    background:var(--white)
}
.btn-accent-white:hover {
    color:var(--black)
}
.btn-accent2-white {
    background:var(--accent-2);
    color:var(--white)
}
.btn-accent2-white::before {
    background:var(--white)
}
.btn-accent2-white:hover {
    color:var(--black)
}
.btn-border-white-accent {
    background:transparent;
    color:var(--white);
    border:2px solid var(--white)
}
.btn-border-white-accent::before {
    background:var(--accent)
}
.btn-border-white-accent:hover {
    color:var(--white);
    border-color:var(--accent)
}
.btn-border-white-accent2 {
    background:transparent;
    color:var(--white);
    border:2px solid var(--white)
}
.btn-border-white-accent2::before {
    background:var(--accent-2)
}
.btn-border-white-accent2:hover {
    color:var(--white);
    border-color:var(--accent-2)
}
.btn-glass {
    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    color:var(--white);
    border:1px solid rgba(255,255,255,0.35);
    box-shadow:0 4px 20px rgba(0,0,0,0.12)
}
.btn-glass::before {
    background:var(--accent)
}
.btn-glass:hover {
    color:var(--white);
    border-color:var(--accent)
}
.section-heading {
    color:var(--accent-2);
    line-height:1.25;
    margin:0 0 1rem;
    font-size:var(--art-font-h2-d);
    font-family:var(--art-font-family-heading)
}
.section-badge {
    display:inline-block;
    font-size:10px;
    font-weight:700;
    font-family:var(--art-font-family-heading);
    letter-spacing:0.12em;
    text-transform:uppercase;
    border-radius:20px;
    margin-bottom:10px;
    background:var(--accent);
    color:var(--white);
    padding:10px 20px;
    animation:floating 3s ease-in-out infinite
}
@keyframes floating {
    0%,100% {
        transform:translateY(0)
    }
    50% {
        transform:translateY(-6px)
    }

}
.section-badge.dark {
    background:var(--accent);
    color:var(--white)
}
.section-badge.light {
    background:rgba(255,255,255,0.12);
    color:var(--accent);
    border:1px solid rgba(255,189,43,0.35)
}
.section-badge--on-dark {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.22);
    color:var(--white);
    padding:8px 18px;
    border-radius:30px;
    font-size:10px;
    font-weight:700;
    font-family:var(--art-font-family-heading);
    letter-spacing:0.12em;
    text-transform:uppercase;
    margin-bottom:1rem
}
.section-badge__dot {
    width:8px;
    height:8px;
    background:var(--accent);
    border-radius:50%;
    flex-shrink:0
}
.art-biz .section-heading,.art-reviews .section-heading,.art-reviews h2.art-reviews__heading {
    color:var(--white)
}
.art-hero .art-hero__heading,.art-svc-hero .art-svc-hero__heading {
    font-weight:800;
    color:var(--white);
    line-height:1.1
}
@media (max-width:1024px) {
    h1 {
        font-size:var(--art-font-h1-t)
    }
    h2 {
        font-size:var(--art-font-h2-t)
    }
    h3 {
        font-size:var(--art-font-h3-t)
    }
    h4 {
        font-size:var(--art-font-h4-t)
    }
    h5 {
        font-size:var(--art-font-h5-t)
    }
    h6 {
        font-size:var(--art-font-h6-t)
    }
    body {
        font-size:var(--art-font-body-t)
    }
    .section-heading {
        font-size:var(--art-font-h2-t)
    }
    section {
        padding-top:var(--art-pad-top-t);
        padding-bottom:var(--art-pad-bottom-t)
    }
    .container {
        max-width:95%
    }

}
@media (max-width:767px) {
    h1 {
        font-size:var(--art-font-h1-m)
    }
    h2 {
        font-size:var(--art-font-h2-m)
    }
    h3 {
        font-size:var(--art-font-h3-m)
    }
    h4 {
        font-size:var(--art-font-h4-m)
    }
    h5 {
        font-size:var(--art-font-h5-m)
    }
    h6 {
        font-size:var(--art-font-h6-m)
    }
    body {
        font-size:var(--art-font-body-m)
    }
    .section-heading {
        font-size:var(--art-font-h2-m)
    }
    section {
        padding-top:var(--art-pad-top-m);
        padding-bottom:var(--art-pad-bottom-m)
    }
    p {
        margin-bottom:0;
        font-size:var(--art-font-body-m)
    }
    .custom-btn {
        padding:10px 18px
    }

}