:root{
    --background: #292b37;
    --primary: #5F7E78;
    --secondary: #E3A53E;
    --tertiary: #B8D6D0;
    --text: #eeeeee;
    --text-alt: #323234;
    --subtext: #c0bdbd;
    --footer_text: #e6e6ea;
    --white: #FFFFFF;
    --black: #000000;
    --link: #f1ead7;
    --link_hover: #d4be83;
    --divider: #bdbdbd;
    --copyright_bg: #4a4a54;
    --copyright_text: #8e8eab;

    --body-font: 'Libre Franklin', Arial, Helvetica, sans-serif;
    --heading-font: 'Noto Serif Display', 'Times New Roman', Times, serif;
}

/* Fonts */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/libre-franklin/libre-franklin-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Libre Franklin';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/libre-franklin/libre-franklin-v18-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/libre-franklin/libre-franklin-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Libre Franklin';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/libre-franklin/libre-franklin-v18-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Serif Display';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/noto-serif/noto-serif-display-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Serif Display';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/noto-serif/noto-serif-display-v24-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

*{ margin: 0; padding: 0; box-sizing: border-box; }
html, body{ min-height: 100%; }
body{ background-color: var(--background); font-family: var(--body-font); color: var(--text); }
#sitewrap{ display: flex; flex-direction: column; height: 100%; }
.container{ margin: 0 auto; }

p, li, table, tbody, tr, th, td{ line-height: 1.6; }
h1, h2, h3, h4, h5, h6, p{ margin: 0; padding: 0 0 18px 0; }
h1, h2, h3, h4, h5, h6{ font-family: var(--heading-font); line-height: 1.4; font-weight: 500; }
h1{ font-size: 2.5rem; }
h2{ font-size: 2.188rem; }
h3{ font-size: 1.875rem; }
h4, h5, h6{ font-size: 1.5rem; }
strong, b{ font-weight: 700; }
em, i{ font-style: italic; }
a{ color: var(--link); transition: all .2s ease; }
a:hover, #header #sitenav .menu > .menuitem:hover a, #header #sitenav .menu > .menuitem:hover a:hover{ color: var(--link_hover); }
.container{ position: relative; max-width: 1750px; }
.container.narrow{ position: relative; max-width: 1450px; }
.container.wide{ position: relative; max-width: 100%; }
.row{ display: flex; flex-wrap: wrap; }

.btn{ display: inline-block; width: fit-content; padding: 10px 25px; line-height: 1.5; border-radius: 100px; text-decoration: none; font-weight: 700; font-family: var(--body-font); text-align: center; border: solid 2px transparent; transition: all .15s ease-in-out; margin-top: .5rem; }
.btn:hover{ text-decoration: none; }
.btn.btn-primary{ background-color: transparent; color: var(--tertiary); border-color: var(--tertiary); }
.btn.btn-primary:hover{ background-color: var(--tertiary); color: var(--background); }
.btn.btn-secondary{ background-color: transparent; color: var(--link_hover); border-color: var(--link_hover); }
.btn.btn-secondary:hover{ background-color: var(--link_hover); color: var(--background); }

@media only screen and (min-width: 1350px){
    .container{ padding: 0 100px; }
    #mainbody .container.body-container, #footer #footer_main .container{ padding: 75px 100px; }
}
@media only screen and (min-width: 1024px) and (max-width: 1349px){
    .container{ padding: 0 75px; }
    #mainbody .container.body-container, #footer #footer_main .container{ padding: 75px; }
}
@media only screen and (min-width: 800px) and (max-width: 1023px){
    .container{ padding: 0 50px; }
    #mainbody .container.body-container, #footer #footer_main .container{ padding: 50px; }
}
@media only screen and (max-width: 799px){
    .container{ padding: 0 30px; }
    #mainbody .container.body-container, #footer #footer_main .container{ padding: 50px 30px; }
}

/* Header */
#header .container{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
/* Logo */
#header #sitelogo{ width: fit-content; }
/* Hamburger */
#header .toggle-menu{ width: 50px; }
#header .toggle-menu .menutoggle{ position: relative; width: 50px; height: 50px; cursor: pointer; display: block; }
#header .toggle-menu .menutoggle #menu-check{ display: block; width: 100%; height: 100%; position: relative; cursor: pointer; z-index: 2; -webkit-touch-callout: none; position: absolute; opacity: 0; border: none; margin: 0; }
#header .toggle-menu .menutoggle .button.burger{ margin: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 22px; height: 12px; }
#header .toggle-menu .menutoggle .button.burger .bar{ position: absolute; display: block; width: 100%; height: 2px; background-color: var(--bar-bg, #FFFFFF); border-radius: 1px; transition: all 0.1s cubic-bezier(0.1, 0.82, 0.76, 0.965); }
#header .toggle-menu .menutoggle .button.burger .bar:first-of-type{ top: 0; }
#header .toggle-menu .menutoggle .button.burger .bar:last-of-type{ bottom: 0; }
#header .toggle-menu .menutoggle .button.burger.active .bar:first-of-type, #header .toggle-menu .menutoggle #menu-check:checked + .button.burger .bar:first-of-type{ transform: rotate(45deg); top: 5px; }
#header .toggle-menu .menutoggle .button.burger.active .bar:last-of-type, #header .toggle-menu .menutoggle #menu-check:checked + .button.burger .bar:last-of-type{ transform: rotate(-45deg); bottom: 5px; }
/* Menu */
#header #sitenav .menu, #header #sitenav .submenu{ list-style: none; margin: 0; padding: 0; }
#header #sitenav .menu .menuitem{ position: relative; }
#header #sitenav .menu .menuitem .navlink{ display: block; padding: 0 9px; text-decoration: none; position: relative; }
#header #sitenav .menu > .menuitem > .navlink{ line-height: 50px; }
#header #sitenav .menu > .menuitem > .navlink.book-now{ background-color: var(--primary); padding: 0 15px; }
#header #sitenav .menu > .menuitem > .navlink.book-now:hover{ color: var(--background); background-color: var(--white); }
#header #sitenav .menu > .menuitem > .submenu .navlink{ padding: 8px 15px; color: var(--background); }
#header #sitenav .menu > .menuitem > .submenu .navlink:hover{ background-color: var(--primary); color: var(--link); }
/* Mobile Menu */
@media only screen and (min-width: 1350px){
    #header{ padding: 40px 0; }
    #header #sitelogo img{ height: 60px; }
    #header #sitelogo .dt{ display: block; }
    #header #sitelogo .mo{ display: none; }
    #header .toggle-menu{ display: none; }
    #header #sitenav .menu{ text-align: right; }
    #header #sitenav .menu > .menuitem{ display: inline-block; }
    #header #sitenav .menu > .menuitem > .submenu{ position: absolute; z-index: 1; width: 225px; top: 50px; left: 50%; transform: translateX(-50%); background-color: var(--white); box-shadow: 0 2px 5px rgba(0,0,0,.25); border-top: solid 3px var(--secondary); text-align: left; display: none; }
    #header #sitenav .menu > .menuitem > .submenu::before{ content: ""; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid var(--secondary); }
    #header #sitenav .menu > .menuitem:hover > .submenu{ display: block; }
}
@media only screen and (min-width: 1024px) and (max-width: 1349px){
    #header{ padding: 40px 0; }
    #header #sitelogo img{ height: 60px; }
    #header #sitelogo .dt{ display: block; }
    #header #sitelogo .mo{ display: none; }
    #header .toggle-menu{ display: none; }
    #header #sitenav .menu{ text-align: right; }
    #header #sitenav .menu > .menuitem{ display: inline-block; }
    #header #sitenav .menu > .menuitem > .submenu{ position: absolute; z-index: 1; width: 225px; top: 50px; left: 50%; transform: translateX(-50%); background-color: var(--white); box-shadow: 0 2px 5px rgba(0,0,0,.25); border-top: solid 3px var(--secondary); text-align: left; display: none; }
    #header #sitenav .menu > .menuitem > .submenu::before{ content: ""; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid var(--secondary); }
    #header #sitenav .menu > .menuitem:hover > .submenu{ display: block; }
}
@media only screen and (min-width: 800px) and (max-width: 1023px){
    #header{ padding: 30px 0; }
    #header #sitelogo img{ height: 50px; }
    #header #sitelogo .dt{ display: none; }
    #header #sitelogo .mo{ display: block; }
    #header .toggle-menu{ display: block; }
    #header #sitenav{ display: none; width: 100%; padding: 18px 0 0; }
    #header #sitenav .menu > .menuitem.has-children > .navlink{ padding: 0 72px 0 9px; }
    #header #sitenav .menu > .menuitem.has-children > .navlink::after{ content: "\ea26"; font-family: 'siddique-cars'; position: absolute; right: 0; line-height: 50px; width: 50px; text-align: center; }
    #header #sitenav .menu > .menuitem > .submenu{ background-color: var(--white); border-left: solid 5px var(--secondary); display: none; }
}
@media only screen and (max-width: 799px){
    #header{ padding: 30px 0; }
    #header #sitelogo img{ height: 50px; }
    #header #sitelogo .dt{ display: none; }
    #header #sitelogo .mo{ display: block; }
    #header .toggle-menu{ display: block; }
    #header #sitenav{ display: none; width: 100%; padding: 18px 0 0; }
    #header #sitenav .menu > .menuitem.has-children > .navlink{ padding: 0 72px 0 9px; }
    #header #sitenav .menu > .menuitem.has-children > .navlink::after{ content: "\ea26"; font-family: 'siddique-cars'; position: absolute; right: 0; line-height: 50px; width: 50px; text-align: center; }
    #header #sitenav .menu > .menuitem > .submenu{ background-color: var(--white); border-left: solid 5px var(--secondary); display: none; }
}

/* Footer */
#footer #footer_copy{ background-color: var(--copyright_bg); color: var(--subtext); }
#footer #footer_copy .container{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 30px; }
#footer #footer_copy .container p{ font-size: 0.9125rem; padding: 5px 0; margin: 0; line-height: 1.6; text-align: center; }
#footer #footer_main .container{ display: flex; flex-wrap: wrap; }
#footer #footer_main .footer_contacts img{ margin: 0 0 36px; width: 200px; }
#footer #footer_main .footer_contacts .footer-text{ color: var(--link); padding: 0 0 10px; }
#footer #footer_main .footer_contacts .socials{ list-style: none; margin: 0; padding: 18px 0 0; }
#footer #footer_main .footer_contacts .socials .network{ display: inline-block; margin: 0 4px 8px 0; width: 58px; height: 58px; }
#footer #footer_main .footer_contacts .socials .network .social-link{ display: block; width: 58px; height: 58px; border-radius: 50%; background-color: var(--copyright_bg); color: var(--background); text-decoration: none; text-align: center; }
#footer #footer_main .footer_contacts .socials .network .social-link:hover{ background-color: var(--white); }
#footer #footer_main .footer_contacts .socials .network .social-link span{ line-height: 58px; font-size: 1.5rem; }
#footer #footer_main .footer_menu .footer-menu{ padding: 0 0 0 12px; margin: 0; }
#footer #footer_main .footer_menu .footer-menu .menuitem{ padding: 0 0 0 8px; }
#footer #footer_main .footer_menu .footer-menu .menuitem::marker{ content: "\ea2d"; font-family: 'siddique-cars'; font-size: 0.875rem; color: var(--link); }
#footer #footer_main .footer_payment .cards{ display: flex; margin: 0; padding: 8px 0 0; list-style: none; flex-wrap: wrap; gap: 8px; }
#footer #footer_main .footer_payment .cards .card img{ width: 100%; }
@media only screen and (min-width: 1350px){
    #footer #footer_main .container{ gap: 50px; }
    #footer #footer_main .footer_contacts, #footer #footer_main .footer_menu{ width: 23%; }
    #footer #footer_main .footer_payment{ flex: 1; }
    #footer #footer_main .footer_payment .cards .card{ width: 100px; }
}
@media only screen and (min-width: 1024px) and (max-width: 1349px){
    #footer #footer_main .container{ gap: 40px; }
    #footer #footer_main .footer_contacts, #footer #footer_main .footer_menu{ width: 30%; }
    #footer #footer_main .footer_payment{ flex: 1; }
    #footer #footer_main .footer_payment .cards .card{ width: 80px; }
}
@media only screen and (min-width: 800px) and (max-width: 1023px){
    #footer #footer_main .container{ gap: 40px; flex-direction: column; }
    #footer #footer_main .footer_payment .cards .card{ width: 100px; }
}
@media only screen and (max-width: 799px){
    #footer #footer_main .container{ gap: 30px; flex-direction: column; }
    #footer #footer_main .footer_payment .cards .card{ width: 80px; }
}
.go-to-top{ position: fixed; bottom: 50px; right: 50px; width: 64px; height: 64px; border-radius: 50%; color: #FFF; background-color: var(--link_hover); overflow: hidden; display: flex; align-items: center; justify-content: center; transition: all .35s ease; border: solid 2px var(--link_hover); text-decoration: none; opacity: 0; }
.go-to-top.hidden{ display: none; }
.go-to-top.active{ opacity: 1; }
.go-to-top:hover{ background-color: var(--white); color: var(--black); text-decoration: none; }
.go-to-top i{ display: block; font-size: 1.3rem; }
.go-to-top span{ display: none; }

/* Main Body */
#mainbody{ flex: 1; }

/* Front Page */
/* Hero Image */
#mainbody #heroblock{ background: url('../images/hero_bg.jpg') center center no-repeat; background-size: cover; display: flex; flex-direction: column; justify-content: end; }
#mainbody #heroblock .container{ width: 100%; }
#mainbody #heroblock .subtitle{ padding: 0; }
@media only screen and (min-width: 1350px){
    #mainbody #heroblock{ height: 75vh; padding: 70px 0; }
    #mainbody #heroblock .title{ font-size: 4rem; }
    #mainbody #heroblock .subtitle{ font-size: 1.5rem; }
}
@media only screen and (min-width: 1024px) and (max-width: 1349px){
    #mainbody #heroblock{ height: 65vh; padding: 70px 0; }
    #mainbody #heroblock .title{ font-size: 3.4rem; }
    #mainbody #heroblock .subtitle{ font-size: 1.35rem; }
}
@media only screen and (min-width: 800px) and (max-width: 1023px){
    #mainbody #heroblock{ height: 60vh; padding: 50px 0; }
    #mainbody #heroblock .title{ font-size: 2.75rem; }
    #mainbody #heroblock .subtitle{ font-size: 1.25rem; }
}
@media only screen and (max-width: 799px){
    #mainbody #heroblock{ height: 75vh; padding: 50px 0; }
    #mainbody #heroblock .title{ font-size: 2.4rem; }
    #mainbody #heroblock .subtitle{ font-size: 1.125rem; }
}
/* Intro Banner */
#mainbody #home_intro .container{ display: flex; flex-direction: row; }
#mainbody #home_intro .intro-widget{ flex: 1; display: flex; flex-direction: column; }
#mainbody #home_intro .intro-widget:nth-of-type(1), #mainbody #home_intro .intro-widget:nth-of-type(3){ background-color: var(--tertiary); }
#mainbody #home_intro .intro-widget:nth-of-type(2){ background-color: var(--white); }
#mainbody #home_intro .intro-widget .widget-content{ padding: 30px; color: var(--text-alt); flex: 1; }
#mainbody #home_intro .intro-widget .widget-content p:last-of-type{ padding: 0; }
#mainbody #home_intro .intro-widget .readmore{ display: block; text-align: center; padding: 22px 15px; text-align: center; text-decoration: none; background-color: var(--primary); font-size: 1.125rem; }
#mainbody #home_intro .intro-widget .readmore:hover{ background-color: var(--white); color: var(--background); }
@media only screen and (min-width: 1350px){
    #mainbody #home_intro .container{ gap: 50px }
}
@media only screen and (min-width: 1024px) and (max-width: 1349px){
    #mainbody #home_intro .container{ gap: 30px }
}
@media only screen and (min-width: 800px) and (max-width: 1023px){
    #mainbody #home_intro .container{ flex-direction: column; gap: 40px }
}
@media only screen and (max-width: 799px){
    #mainbody #home_intro .container{ flex-direction: column; gap: 30px }
}
/* Contact Details */
#mainbody #home_contact{ background: url('../images/contact_bg.jpg') center center no-repeat; background-size: cover; position: relative; }
#mainbody #home_contact::before{ position: absolute; content: ""; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.3); z-index: 0; }
#mainbody #home_contact .container{ display: flex; flex-direction: row; }
#mainbody #home_contact .contact-widget{ flex: 1; text-align: center; position: relative; }
#mainbody #home_contact .contact-widget:nth-of-type(1)::before, #mainbody #home_contact .contact-widget:nth-of-type(2)::before{ content: ""; background-color: var(--secondary); position: absolute; }
#mainbody #home_contact .contact-widget .widget-title{ color: var(--tertiary); padding: 0 0 8px; }
#mainbody #home_contact .contact-widget .widget-content, #mainbody #home_contact .contact-widget .widget-content .widget-link{ text-decoration: none; color: #FFF; }
@media only screen and (min-width: 1350px){
    #mainbody #home_contact .container{ gap: 50px }
    #mainbody #home_contact .contact-widget::before{ right: -24px; width: 2px; top: 0; bottom: 0; }
    #mainbody #home_contact .contact-widget{ padding: 50px 0; }
    #mainbody #home_contact .contact-widget .widget-title{ font-size: 1.4rem; }
    #mainbody #home_contact .contact-widget .widget-content{ font-size: 2rem; }
}
@media only screen and (min-width: 1024px) and (max-width: 1349px){
    #mainbody #home_contact .container{ gap: 50px }
    #mainbody #home_contact .contact-widget::before{ right: -24px; width: 2px; top: 0; bottom: 0; }
    #mainbody #home_contact .contact-widget{ padding: 50px 0; }
    #mainbody #home_contact .contact-widget .widget-title{ font-size: 1.4rem; }
    #mainbody #home_contact .contact-widget .widget-content{ font-size: 2rem; }
}
@media only screen and (min-width: 800px) and (max-width: 1023px){
    #mainbody #home_contact .container{ flex-direction: column; gap: 40px }
    #mainbody #home_contact .contact-widget::before{ bottom: -19px; width: 300px; height: 2px; left: 50%; transform: translateX(-50%); }
    #mainbody #home_contact .contact-widget{ padding: 20px 0; }
    #mainbody #home_contact .contact-widget .widget-title{ font-size: 1.4rem; }
    #mainbody #home_contact .contact-widget .widget-content{ font-size: 2rem; }
}
@media only screen and (max-width: 799px){
    #mainbody #home_contact .container{ flex-direction: column; gap: 30px }
    #mainbody #home_contact .contact-widget::before{ bottom: -14px; width: 100%; max-width: 300px; height: 2px; left: 50%; transform: translateX(-50%); }
    #mainbody #home_contact .contact-widget{ padding: 20px 0; }
    #mainbody #home_contact .contact-widget .widget-title{ font-size: 1.25rem; }
    #mainbody #home_contact .contact-widget .widget-content{ font-size: 1.6rem; }
}
/* Services */
#mainbody #home_service .container{ display: flex; flex-direction: row; }
#mainbody #home_service .service-widget { text-align: center; position: relative; background-color: var(--secondary); color: var(--white); }
#mainbody #home_service .service-widget .icon{ display: block; text-align: center; border: solid 5px var(--primary); color: var(--primary); border-radius: 50%; }
#mainbody #home_service .service-widget .content{ padding: 0; }
@media only screen and (min-width: 1350px){
    #mainbody #home_service .container{ gap: 50px; }
    #mainbody #home_service .service-widget{ padding: 80px 50px; width: calc( calc( 100% / 3 ) - 20px ); }
    #mainbody #home_service .service-widget .icon{ margin: 0 auto 24px; width: 92px; height: 92px; }
    #mainbody #home_service .service-widget .icon > i{ line-height: 82px; font-size: 2rem; }
}
@media only screen and (min-width: 1024px) and (max-width: 1349px){
    #mainbody #home_service .container{ gap: 30px; }
    #mainbody #home_service .service-widget{ padding: 50px; width: calc( calc( 100% / 3 ) - 20px ); }
    #mainbody #home_service .service-widget .icon{ margin: 0 auto 24px; width: 92px; height: 92px; }
    #mainbody #home_service .service-widget .icon > i{ line-height: 82px; font-size: 2rem; }
    #mainbody #home_service .service-widget .widget-title{ font-size: 1.8rem; }
}
@media only screen and (min-width: 800px) and (max-width: 1023px){
    #mainbody #home_service .container{ flex-direction: column; gap: 40px }
    #mainbody #home_service .service-widget{ padding: 50px 20px; }
    #mainbody #home_service .service-widget .icon{ margin: 0 auto 24px; width: 92px; height: 92px; }
    #mainbody #home_service .service-widget .icon > i{ line-height: 82px; font-size: 2rem; }
}
@media only screen and (max-width: 799px){
    #mainbody #home_service .container{ flex-direction: column; gap: 30px }
    #mainbody #home_service .service-widget{ padding: 50px 20px; }
    #mainbody #home_service .service-widget .icon{ margin: 0 auto 18px; width: 72px; height: 72px; }
    #mainbody #home_service .service-widget .icon > i{ line-height: 62px; font-size: 1.6rem; }
    #mainbody #home_service .service-widget .widget-title{ font-size: 1.8rem; }
}
/* Photo Gallery */
#mainbody #home_photos{ background-color: var(--link); }
#mainbody #home_photos .container{ display: grid; width: 100%; }
#mainbody #home_photos .photo{ background-color: #ddd; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; font-size: 1.2em; }
#mainbody #home_photos .photo-1{ background-image: url('../images/gallery_photo1.jpg'); }
#mainbody #home_photos .photo-2{ background-image: url('../images/gallery_photo2.jpg'); }
#mainbody #home_photos .photo-3{ background-image: url('../images/gallery_photo3.jpg'); }
#mainbody #home_photos .photo-4{ background-image: url('../images/gallery_photo4.jpg'); }
#mainbody #home_photos .photo-5{ background-image: url('../images/gallery_photo5.jpg'); }
@media only screen and (min-width: 1350px){
    #mainbody #home_photos .container{ grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 40px; height: 800px; }
    #mainbody #home_photos .photo-1{ grid-row: 1 / span 2; grid-column: 1 / span 1; }
    #mainbody #home_photos .photo-2{ grid-row: 1 / span 1; grid-column: 2 / span 2; }
    #mainbody #home_photos .photo-3{ grid-row: 1 / span 1; grid-column: 4 / span 1; }
    #mainbody #home_photos .photo-4{ grid-row: 2 / span 1; grid-column: 2 / span 1; }
    #mainbody #home_photos .photo-5{ grid-row: 2 / span 1; grid-column: 3 / span 2; }
}
@media only screen and (min-width: 1024px) and (max-width: 1349px){
    #mainbody #home_photos .container{ grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 40px; height: 650px; }
    #mainbody #home_photos .photo-1{ grid-row: 1 / span 2; grid-column: 1 / span 1; }
    #mainbody #home_photos .photo-2{ grid-row: 1 / span 1; grid-column: 2 / span 2; }
    #mainbody #home_photos .photo-3{ grid-row: 1 / span 1; grid-column: 4 / span 1; }
    #mainbody #home_photos .photo-4{ grid-row: 2 / span 1; grid-column: 2 / span 1; }
    #mainbody #home_photos .photo-5{ grid-row: 2 / span 1; grid-column: 3 / span 2; }
}
@media only screen and (min-width: 800px) and (max-width: 1023px){
    #mainbody #home_photos .container{ grid-template-columns: 1fr; grid-template-rows: repeat(5, 300px); gap: 30px; }
    #mainbody #home_photos .photo{ grid-column: 1; height: 300px; }
}
@media only screen and (max-width: 799px){
    #mainbody #home_photos .container{ grid-template-columns: 1fr; grid-template-rows: repeat(5, 200px); gap: 20px; }
    #mainbody #home_photos .photo{ grid-column: 1; height: 200px; }
}
/* Reviews */
#mainbody .reviews-panel .section-title{ text-align: center; }
#mainbody .reviews-panel #reviews{ position: relative; padding: 0; }
#mainbody .reviews-panel .reviews{ position: relative; padding: 24px 0 72px; }
#mainbody .reviews-panel #reviews .review{ max-width: 1080px; margin: 0 auto; padding: 80px 120px; background-color: var(--text); color: var(--text-alt); text-align: center; }
#mainbody .reviews-panel #reviews .review .stars{ padding: 0 0 24px; font-size: 1.65rem; }
#mainbody .reviews-panel #reviews .review .stars span{ padding: 0 3px; }
#mainbody .reviews-panel #reviews .review .stars .gold{ color: var(--secondary); }
#mainbody .reviews-panel #reviews .review .stars .grey{ color: #CCC; }
#mainbody .reviews-panel #reviews .review .review-text{ padding: 0 0 24px; }
#mainbody .reviews-panel #reviews .review .review-text p{ font-size: 1.12rem; }
#mainbody .reviews-panel #reviews .review .review-text p:last-of-type{ padding: 0; }
#mainbody .reviews-panel #reviews .review .photo{ width: 82px; height: 82px; border-radius: 50%; background-color: #CCC; margin: 0 auto 18px; background-position: center; background-size: cover; background-repeat: no-repeat; }
#mainbody .reviews-panel #reviews .review .review-name{ font-weight: 700; font-size: 1.2rem; font-family: var(--heading-font); padding: 0 0 10px; margin: 0; }
#mainbody .reviews-panel #reviews .review .review-time{ color: var(--copyright_bg); }
#mainbody .reviews-panel #reviews .review .google-logo .logo{ width: 100px; vertical-align: bottom; margin: 0 auto; }
/* Slick Slider */
#mainbody .reviews-panel #reviews .slick-slide{ margin: 0px; background-position: center; background-repeat: no-repeat; background-size: contain; }
#mainbody .reviews-panel #reviews .slick-slider{ position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
#mainbody .reviews-panel #reviews .slick-list{ position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
#mainbody .reviews-panel #reviews .slick-list:focus{ outline: none; }
#mainbody .reviews-panel #reviews .slick-list.dragging{ cursor: pointer; cursor: hand; }
#mainbody .reviews-panel #reviews .slick-slider .slick-track, #mainbody .reviews-panel #reviews .slick-slider .slick-list{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
#mainbody .reviews-panel #reviews .slick-track{ position: relative; top: 0; left: 0; display: block; }
#mainbody .reviews-panel #reviews .slick-track:before, #mainbody .reviews-panel #reviews .slick-track:after{ display: table; content: ''; }
#mainbody .reviews-panel #reviews .slick-track:after{ clear: both; }
#mainbody .reviews-panel #reviews .slick-loading .slick-track{ visibility: hidden; }
#mainbody .reviews-panel #reviews .slick-slide{ float: left; min-height: 1px; }
[dir='rtl'] #mainbody .reviews-panel #reviews .slick-slide{ float: right; }
#mainbody .reviews-panel #reviews .slick-slide img{ display: block; }
#mainbody .reviews-panel #reviews .slick-slide.slick-loading img{ display: none; }
#mainbody .reviews-panel #reviews .slick-slide.dragging img{ pointer-events: none; }
#mainbody .reviews-panel #reviews .slick-initialized .slick-slide{ display: block; }
#mainbody .reviews-panel #reviews .slick-loading .slick-slide{ visibility: hidden; }
#mainbody .reviews-panel #reviews .slick-vertical .slick-slide{ display: block; height: auto; border: 1px solid transparent; }
#mainbody .reviews-panel #reviews .slick-dots{ position: absolute; z-index: 5; left: 50%; bottom: -34px; transform: translateX(-50%); list-style: none; margin: 0; padding: 0; }
#mainbody .reviews-panel #reviews .slick-dots li{ display: inline-block; margin: 0 4px; }
#mainbody .reviews-panel #reviews .slick-dots li button{ font-size: 0; height: 4px; width: 30px; border: none; border-radius: 2px; background-color: var(--copyright_text); }
#mainbody .reviews-panel #reviews .slick-dots li.slick-active button{ background-color: var(--tertiary); }
#mainbody .reviews-panel #reviews .slick-arrow.slick-hidden{ display: none; }
#mainbody .reviews-panel #reviews .slick-arrow{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 56px; height: 56px; --slick_pos: calc( 50% - 508px ); font-size: 0; border-radius: 50%; border: none; background-color: var(--copyright_bg); color: var(--white); }
#mainbody .reviews-panel #reviews .slick-arrow::before{ color: #FFF; width: 56px; height: 56px; line-height: 56px; text-align: center; font-size: 1.3rem; font-family: 'siddique-cars'; }
#mainbody .reviews-panel #reviews .slick-prev::before{ content: "\ea2c"; padding: 0 2px 0 0; }
#mainbody .reviews-panel #reviews .slick-next::before{ content: "\ea2d"; padding: 0 0 0 2px; }
@media only screen and (min-width: 1220px){
    #mainbody .reviews-panel #reviews .slick-prev{ left: var(--slick_pos); }
    #mainbody .reviews-panel #reviews .slick-next{ right: var(--slick_pos); }
}
@media only screen and (min-width: 800px) and (max-width: 1219px){
    #mainbody .reviews-panel #reviews .slick-prev{ left: 32px; }
    #mainbody .reviews-panel #reviews .slick-next{ right: 32px; }
}
@media only screen and (max-width: 799px){
    #mainbody .reviews-panel #reviews .slick-arrow{ display: none !important; }
    #mainbody .reviews-panel #reviews .review{ padding: 60px 40px; }
    #mainbody .reviews-panel #reviews .slick-dots{ width: 100%; text-align: center; }
    #mainbody .reviews-panel #reviews .slick-dots li{ margin: 0 4px 7px; }
    #mainbody .reviews-panel #reviews .slick-dots li button{ width: 18px; }
}
/* Quote Form */
.cta.get-a-quote{ background-color: var(--primary); }
.cta.get-a-quote .container{ display: flex; align-items: center; }
.cta.get-a-quote #quote_form{ display: flex; flex-wrap: wrap; }
.cta.get-a-quote #quote_form .form-label{ display: none; }
.cta.get-a-quote #quote_form .form-field{ width: 100%; font-size: 1.1rem; line-height: 45px; }
.cta.get-a-quote #quote_form .form-field.text-field{ padding: 0 15px; border: solid 1px var(--subtext); outline: none; background-color: var(--text); }
.cta.get-a-quote #quote_form .form-field.text-field:active, .cta.get-a-quote #quote_form .form-field.text-field:focus{ background-color: var(--white); }
.cta.get-a-quote #quote_form .form-field.button-field{ background-color: var(--background); color: var(--white); transition: all .2s ease; border: none; padding: 1px 15px; cursor: pointer; }
.cta.get-a-quote #quote_form .form-field.button-field:hover{ color: var(--background); background-color: var(--link); }
.cta.get-a-quote .form-header h2{ font-size: 1.5rem; padding: 0 0 10px; }
.cta.get-a-quote .form-header p{ padding: 0; }
@media only screen and (min-width: 1350px){
    .cta.get-a-quote .container{ gap: 50px; }
    .cta.get-a-quote .form-header{ width: 40%; }
    .cta.get-a-quote #quote_form{ gap: 20px; }
    .cta.get-a-quote #quote_form .form-item{ width: calc( 50% - 15px ); }
    .cta.get-a-quote .form-content{ flex: 1; }
}
@media only screen and (min-width: 1024px) and (max-width: 1349px){
    .cta.get-a-quote .container{ gap: 50px; }
    .cta.get-a-quote .form-header{ width: 50%; }
    .cta.get-a-quote #quote_form{ gap: 20px; }
    .cta.get-a-quote #quote_form .form-item{ width: calc( 50% - 15px ); }
    .cta.get-a-quote .form-content{ flex: 1; }
}
@media only screen and (min-width: 800px) and (max-width: 1023px){
    .cta.get-a-quote .container{ padding: 50px 30px; gap: 40px; flex-direction: column; }
    .cta.get-a-quote #quote_form{ gap: 20px; }
    .cta.get-a-quote #quote_form .form-item{ width: calc( 50% - 15px ); }
}
@media only screen and (max-width: 799px){
    .cta.get-a-quote .container{ padding: 50px 30px; gap: 20px; flex-direction: column; }
    .cta.get-a-quote #quote_form{ gap: 10px; }
    .cta.get-a-quote #quote_form .form-item{ width: 100%; }
}

/* Contact Form */
.form .field .label{ font-family: var(--heading-font); color: var(--white); font-size: 0.875rem; display: block; padding: 0 0 12px; }
.form .field .form-field, .form .buttons .button-field, .form .iti__search-input, .cta.get-a-quote #quote_form .iti__search-input, .form .field .select { width: 100%; font-size: 1.1rem; line-height: 50px; padding: 0 15px; border: solid 1px var(--subtext); outline: none; background-color: var(--text); font-family: var(--body-font); }
.form .field .form-field:active, .form .field .form-field:focus, .form .iti__search-input:active, .form .iti__search-input:focus, .cta.get-a-quote #quote_form .iti__search-input:active, .cta.get-a-quote #quote_form .iti__search-input:focus{ background-color: var(--white); }
.form .field .select select { background-clip: border-box; transition: all .15s ease-in-out; appearance: none; border: none; color: #333; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23ced1da" d="M2 0L0 2h4zM2 5l2-2H0z"/></svg>'); background-repeat: no-repeat; background-position: right 1rem center; background-size: 10px; cursor: pointer; }
.form .field .select select:focus { box-shadow: 0 0 0 0.2rem rgba(241,149,178,.2); }
.form .field .select { position: relative; padding: 0; }
.form .field .select select ::-ms-expand { display: none; }

.form .buttons .button-field{ background-color: var(--background); color: var(--white); transition: all .2s ease; border: none; padding: 1px 15px; cursor: pointer; width: fit-content; padding: 0 30px; }
.form .buttons .button-field:hover{ color: var(--background); background-color: var(--link); }
.form .form-row{ margin-bottom: 22px; }
.form .fields-two{ display: flex; flex-wrap: wrap; gap: 30px; }
.form .field-one .field, .form .telno .iti, .cta.get-a-quote #quote_form .iti, .cta.get-a-quote #quote_form .intlTelInput{ width: 100%; }
.form .fields-two .field{ width: calc( 50% - 15px ); }
.form .field-one .field .textarea-field{ height: 250px; }
.contact-form .form{ padding: 65px; background-color: rgba(255,255,255,.2); }
.iti--inline-dropdown .iti__country-list{ color: var(--text-alt); }

/* Single Page */
#mainbody .page-title{ padding: 4.5rem 0; text-align: center; margin: 0; background: linear-gradient(135deg, rgba(95,126,120,.7), rgba(0,0,0,.2)), url('../images/header-image.jpg') no-repeat center center; background-size: cover; position: relative; }
#mainbody .page-title h1{ padding: 4rem 1rem; color: #FFF; font-size: 4.5rem; }

#mainbody .body-content{ padding: 70px 0; }

/* About Page */
#mainbody .intro{ gap: 50px; align-items: center; }
#mainbody .intro .image{ width: 32.5%; }
#mainbody .intro .image img{ width: 100%; }
#mainbody .intro .content{ flex: 1; }
#mainbody .why-choose .why{ width: calc( 100% + 30px ); gap: 30px; flex-wrap: wrap; }
#mainbody .why-choose .why .reason{ width: calc( ( 100% / 3 ) - 20px ); padding: 35px; color: var(--text-alt); }
#mainbody .why-choose .why .reason .number{ font-size: 3.75rem; font-weight: 500; font-family: var(--heading-font); color: #9ba2a7; line-height: 1.2; }
#mainbody .why-choose .why .reason:nth-of-type(odd){ background-color: var(--white); }
#mainbody .why-choose .why .reason:nth-of-type(even){ background-color: var(--tertiary); }

/* Services */
#services-list .list{ gap: 80px; }
#services-list .list .service{ width: calc( 50% - 40px ); }
#services-list .list .service .link{ position: relative; overflow: hidden; display: block; text-decoration: none; }
#services-list .list .service img{ width: 100%; }
#services-list .list .service .link-content{ position: absolute; left: 0; bottom: 0; width: 100%; z-index: 1; height: 100%; padding: 45px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: end; transform: translateY(50%); transition: all .25s ease; color: var(--text-alt); background: rgb(184,214,208); background: linear-gradient(0deg, rgba(184,214,208,1) 25%, rgba(184,214,208,0) 85%); opacity: 0; }
#services-list .list .service .link:hover .link-content{ transform: translateY(0); opacity: 1; }
#services-list .list .service .link-content p{ padding: 0; margin: 0; }

@media only screen and (max-width: 800px){
    #mainbody .page-title{ padding: 3rem 0; }
    #mainbody .page-title h1{ font-size: 2.4rem; padding: 1rem 0.25rem; }
    #mainbody .why-choose .why, #mainbody .why-choose .why .reason{ width: 100%; }
    #mainbody .why-choose .why .reason{ padding: 30px; }
    #mainbody .why-choose .why .reason .number{ font-size: 2.5rem; }
    #mainbody .why-choose .why .reason .why-reason{ font-size: 1.45rem; }
    #mainbody .intro{ flex-direction: column-reverse; gap: 50px; }
    #mainbody .intro .image{ width: 100%; }
    #services-list .list{ gap: 30px; flex-direction: column; }
    #services-list .list .service{ width: 100%; }
    #services-list .list .service .link-content{ position: relative; transform: unset; opacity: 1; background: unset; color: var(--white); padding: 30px 10px; }
    .contact-form .form{ padding: 30px; }
    .form .fields-two{ flex-direction: column; }
    .form .fields-two .field{ width: 100%; }
}