/* ==========================================================================
   Project:     Sunoco - Cardless - Coming Soon
   Date:        10/27/25 - File created	
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

/* ==========================================================================
     Layout
========================================================================== */

/* Header */
.ccs-header {position: absolute; z-index: 1; top: 15px; left: 0px; width: 100%;font-family: "Roboto Condensed",sans-serif; font-weight: 700; text-transform: uppercase;}
.ccs-mainmenu {position: relative;}
.ccs-mainmenu li {position: relative; z-index: 1} 
.ccs-mainmenu a {text-decoration: none; color: var(--black);}
.ccs-mainmenu a:hover, .ccs-mainmenu a:focus {text-decoration: underline;}
.ccs-mainmenu::before {content: ""; position: absolute; z-index: 0; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 175%; height: 150px;opacity: 0.8;background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);;}

/* Hero */
.ccs-hero {position: relative;color: var(--black)}
.ccs-hero::before {content:""; position: absolute; top: 0px; left: 0px; height: calc(100% + 1px); z-index: 0; background: linear-gradient(90deg, #FFF 0.16%, rgba(255, 255, 255, 0.58) 57.19%, rgba(255, 255, 255, 0.00) 99.85%);}
.ccs-hero .container {position: relative; z-index: 0;}
.ccs-hero h1 {max-width: 400px}
.ccs-hero-img {position: absolute; z-index: -1; inset: 0; height: 100%; width: 100%; object-fit: cover; }

/* Form */
.ccs-form .form-control {font-weight: 600;color: var(--black)}
.ccs-form ::placeholder {color: var(--body);font-weight:600}

/* ==========================================================================
     Components
========================================================================== */

.rounded-xl {border-radius: 20px}

/* ==========================================================================
     Media Queries
========================================================================== */

@media (min-width: 0px) {
     /* Hero */
     .ccs-hero-img {object-position: 55% top;}
     .ccs-hero .container {padding-top: 160px}
     .ccs-hero::before {width: 100%; }
     
     /* Icons */
     .ccs-icons {padding-top: 50px;}
}

@media (min-width: 768px) {
     /* Hero */
	.ccs-hero {height: 900px;}
     .ccs-hero-img {object-position: 50% top;}
     .ccs-hero .container {padding-top: 150px}
     .ccs-hero::before {width: 60%; }

     /* Icons */
     .ccs-icons {padding-top: 130px;}

     /* Components */
     .arrow-row .col-md-3 {position: relative;}
	.arrow-row .col-md-3:not(:last-child)::after {content:""; height: 18px;width: 45px;background: url(/img/icon-arrow.png) no-repeat;background-size: contain;position: absolute; right: -20px; position: absolute; top: 50px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}

     /* Thanks */
     .ccs-thanks .ccs-hero {height:auto}
     .ccs-thanks .ccs-icons {padding-top: 50px}
}

@media (min-width: 1200px) {
     /* Hero */
     .ccs-hero-img {object-position: 40% top;}
}

@media (min-width: 1500px) {
     /* Reset container width (set in main.css) */
     .container {max-width: 1140px}
}

@media (min-width: 1600px) {
     /* Hero */
     .ccs-hero-img {object-position: left top;}
     .ccs-hero::before {width: 70%; }
}