:root {
    /* font */
    --articulatCF: articulatCF, sans-serif;
    /* --estern: EastmanTrial, sans-serif; */
    --raleway: "Raleway", sans-serif;
    --eimessiri: "El Messiri", sans-serif;
    --rammetto: "Rammetto One", sans-serif;
    --roboto: "Roboto", sans-serif; 
    /* transition */
    --transition-3s: all 0.3s ease-in-out;
    /* color */
    --primary: #EA8433;
    --secondary: #111622;
    --white: #FFF;
    --black: #000;
    --light-black: #1F2024;
    --darkestblack: #101320;
    --lgreen: #00A87B;
    --vermilion: #F94745;

    --kesprimary: #EA8433;
    --darkkesprimary: #DE7934;


    --shark: #212225;
    --codGray: #1c1c1c;
    --hintofRed: #f6f3f3;
    --boulder: #7d7d7d40;
    --azure: #35639f;
    --zest: #e57f32;
    --shark-2: #1f2023;
    --white: #fff;
    --indigo: #427dcb;
    --mineShaft: #404040;
    --vulcan: #111622;
    --jaffa: #ea8433;
    --keppel: #399fa1;
    --blazeOrange: #ff6600;
    --valencia: #d43d3a;
    --veniceBlue: #0b639f;
    --alabaster: #f8f8f880;
    --codGray1: #161616;
    --provincialPink: #fdf4f0;
    --trinidad: #ea4803;
    --naturalGray: #8c8680;
    --silverChalice: #acacac;
    --gray: #828282;
    --jaffa2: #ed8732;
    --crail: #b55238;
    --silver: #bbb;
    --pineGreen: #006d72;
    --blueStone: #006065;
    --persianGreen: #009198;
    --black-6: #0000000f;
    --vulcan1: #101320;
    --black: #000000;
    --alabaster-1: #f8f8f8;
    --black-4: #00000073;
    --shark-3: #1F2024;
    --black-5: #00000052;
    --shark-4: #212529;
    --tango: #E57314;
}

html {
    scroll-behavior: smooth;
    line-height: 1.15;
}

.container-fluid {
    max-width: 1920px;
    margin: auto;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: inherit;
    font-family: var(--articulatCF);
}

body {
    background-color: var(--hintofRed);
  /*   max-width: 1920px; */
    margin: auto;
}

/* scrollbar none */
.scrollbar-none,
.scrollbar-none * {
    scrollbar-width: none;
}

.scrollbar-none::-webkit-scrollbar,
.scrollbar-none *::-webkit-scrollbar {
    display: none;
}

/* img, svg, video */
img,
svg,
video {
    vertical-align: middle;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-position: center;
    object-fit: contain;
}

.video {
    position: relative;
    width: 100%;
    height: auto;
}

.video::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: 56.25%;
}

.video video {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

b {
    font-weight: 700;
}

/* ul ol */
ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.show-list ul {
    list-style: disc;
    padding-left: 20px;
}

.show-list ol {
    list-style-type: decimal;
    padding-left: 20px;
}

/* anchor teg */
a {
    text-decoration: unset;
    color: inherit;
}

a:hover {
    color: inherit;
}

/* button */
.button,
button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


@media (min-width:1620px) {
    .thank-you-message .container,
    .hero-thank-you .container,
    .excel-project-undertake .container,
    .need-of-roof .container,
    .copyright .container,
    .footer-top .container,
    .intrest-payment-section .container,
    .home .hero-section-wrapper .container,
    .sps-discount-wrapper .container {
        max-width: 1580px;
    }

    .excellence-service .container {
        max-width: 1590px;
    }

    .membership-comparison .container,
    .areas-docs .container,
    .why-choose-us .container,
    .sps-work-home .container {
        max-width: 1600px;
    }

    .home-service-wrapper .container {
        max-width: 1534px;
    }
}

@media(min-width:1400px) {
    .why-choose-us.why-choose-us-areas .container {
        max-width: 1320px;
    }
}

h2 {
    color: var(--vulcan);
}

h2 span {
    color: var(--jaffa);
}

.title-70 {
    font-size: 70px;
    font-weight: 700;
    line-height: 66.85px;
    letter-spacing: -0.04em;
    text-align: center;

}

.title-64 {
    font-size: 64px;
    font-weight: 700;
    line-height: 71.1px;
    letter-spacing: -0.02em;
    text-align: center;
}

@media (max-width: 992px) {

    .title-64,
    .title-70 {
        font-size: 34px;
        line-height: 37.77px;
        letter-spacing: -0.02em;
    }
}