/* body
{
    margin: 0;
    background: #15151E;
} */

html{
    scroll-behavior: smooth;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;
	outline: inherit;
}
body {
    width: 100%;
    height: 100%;
    position: relative;
    background: #15151E;
}
img {
    max-width: 100%;
}

a
{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    /* identical to box height, or 24px */
    color: #D8D7EB;
}

p, .tab-content
{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    /* identical to box height, or 27px */
    }

h1
{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-size: 70px;
    line-height: 120%;
    /* identical to box height, or 84px */

    letter-spacing: 0.02em;

    /* blue */

    color: #1D1B56;
    margin: 0;
}

h2
{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-size: 48px;
    line-height: 120%;
    /* identical to box height, or 58px */

    letter-spacing: 0.02em;
    margin: 0;
}

h3
{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-size: 31px;
    line-height: 120%;
    /* or 37px */

    letter-spacing: 0.02em;
    margin: 0;
    color: #1D1B56;
}

h4
{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-size: 25px;
    line-height: 120%;
    /* identical to box height, or 30px */

    letter-spacing: 0.02em;
    margin: 0;
}

header
{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(21, 21, 30, 0.9);
    width: 95%;
    /* yellow */
    padding: 10px 40px 20px 240px;
    border-bottom: 2px solid #FCD704;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    /* Note: backdrop-filter has minimal browser support */
    border-radius: 0px 0px 50px 0px;
    display: flex;
    flex-direction: row;
}

.header-logo{
    position: absolute;
    bottom: -115px;
    filter: drop-shadow(10px 0px 24px rgba(0,0,0,0.66));
}

.header-frame
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
}

.header-right
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
}

.header-top
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 30px;
}

.header-bottom
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    color: #D8D7EB;
    
}

.header-bottom > a
{
    text-decoration: none;
}

.header-top-content
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

.link-wrap{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.customer-center-lnk {
    color:#FCD704
}

.contact-us-btn
{
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    gap: 10px;
    background: #FCD704;
    border-radius: 25px;

    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    /* identical to box height, or 30px */
    border: none;
}

.contact-us-btn > a
{
    text-decoration: none;
    color: #1D1B56 !important;
}

.contact-us-btn:hover
{
    background: #49485B;
    cursor: pointer;
    transition: 200ms ease-in;
}

.contact-us-btn a:hover
{
    color: #FCD704 !important;
}



.banner
{
    background: url(../assets/banners/propane-truck.webp) no-repeat bottom center;
    background-size: cover;
    margin-left: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 200px 50px 500px;
    gap: 10px;
    border-bottom: 2px solid #FCD704;
    /* image shadow bottom left */
    filter: drop-shadow(-10px 10px 20px rgba(0, 0, 0, 0.25));
    border-radius: 0px 0px 0px 200px;
}

.banner a
{
    display: flex;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    color: #1D1B56;

}

main
{
    margin: 0px 240px;
}

.main-content
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 120px;
    gap: 50px;
}

/* *************************CSS FOR MAIN HEADINGS************************* */

.content-head
{
    display: flex;
    flex-direction: row;
    padding: 0px;
    gap: 20px;
}

.content-head h2, .prod-display h3
{
    color: #FCD704;
}

.content-head h4, .prod-display p, .carousel-item p
{
    color: #D8D7EB;
}

/* *********************CSS FOR CUSTOMER COMMITMENT SECTION******************** */

.content-list
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

/* Body D0 */
.header-bottom a, .content-list-item a, .prod-right a, .carousel-content a, .tab-question label, .footer-contact-left p, .footer-contact-right p /*this includes product text, carousel text, faq question text, and footer subheadings*/
{
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    color: #D8D7EB;
}

.content-list-item
{
    display: flex;
    flex-direction: row;
    align-items: center;
    /* width: 466.67px;
    height: 100px; */
    width: 100%;
    gap: 10px;
    padding: 5%;
    background: #15151E;
    border-left: 2px solid #FCD704;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: 2px 20px 20px 20px;
}

/* *****************CSS FOR PRODUCTS LIST******************** */

.prod-content
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
}

.prod-left
{
    padding-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prod-right
{
    padding-top: 25px;
    padding-left: 50px;
    border-left: 1px solid #49485B;
}

.prod-list
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.prod-list > .content-list-item
{
    width: 180px;
    height: auto;
    margin: 10px 15px 0 0;
    padding: 10px 5px;
}

.prod-left img
{
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
    border-radius: 10px 10px 10px 0px;
}

/* **************CSS FOR CAROUSEL******************** */

.carousel-content
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin: 100px 240px 0 240px;
}

.carousel-sub{
    /* position: relative; */
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 1fr;
}

.swiper-slide img
{
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
    border-radius: 10px 10px 10px 0px;
}

/*SWIPER CAROUSEL*/

.swiper-wrap-unique
{
    max-width: 100%;
    overflow: hidden !important;
}
.swiper
{
    margin-top: 20px;
    padding: 0px 240px !important;
}

.swiper-slide
{
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 650px !important;
}

.swiper-slide:hover
{
    cursor: pointer;
}

.swiper-slide p
{
    color: #D8D7EB;
}

/****************CAROUSEL BUTTONS**************/

.swiper-btn-wrapper{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
}

.swiper-button-next-unique:hover, .swiper-button-prev-unique:hover{
    cursor: pointer;
}


/***************** FAQ *******************/

.faq-frame
{
    display: grid;
    grid-template-columns: 3fr 4fr;
    align-items: flex-start;
    margin-top: 100px;
    padding: 0 0 0 240px;
    gap: 100px;
}

.faq-frame > img
{
    height: 532px;
    min-height: 100%;
    width: 100%;
    border-bottom: 2px solid #FCD704;
    filter: drop-shadow(-10px 10px 20px rgba(0, 0, 0, 0.25));
    border-radius: 20px 0px 0px 100px;
    object-fit: cover;
}

.faq-left
{
    padding: 50px 0px;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 20px;
}

/*RAUL BARRER ACCORDION*/

input 
{
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.tabs {
border-radius: 8px;
overflow: hidden;
padding: 0 10px 16px 0;
}

.tab {
gap: 10px;
border-bottom: 2px solid #49485B;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
border-radius: 0px 0px 20px 0px;
color: white;
overflow: hidden;
}

.tab-question
{
    display: flex;
    flex-direction: row;
}

.tab-question > .tab-label
{
    display: flex;
    justify-content: space-between;
    padding: 1em;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
}

.tab-content-container > .tab-content
{
    max-height: 0;
    padding: 0 1em;
    color: #D8D7EB;
    transition: all 0.35s;
}

input:checked ~ .tab-content-container
{
    border-radius: 0px 0px 20px 0px;
    border-bottom: 2px solid #FCD704;
    transition: 200ms ease-in;
}

input:checked ~ .tab-question > label
{
    color: #FCD704;
    transition: 200ms ease-in;
}

input:checked ~ .tab-question > img
{
    content: url(../assets/icons/remove.svg);
    transition: 200ms ease-in;
}

input:checked ~ .tab-content-container > .tab-content 
{
    max-height: 100vh;
    padding: 1em;
}

/**********************FOOTER***********************/

.footer-contact-form
{
    margin: 100px 0 0 0;
    padding: 100px 240px 50px 848px;
    background: #1D1B56;
}

.footer-contact-form h3
{
    color: #FCD704;
}

.footer-contact-info
{
    padding: 59px 0 60px 848px;
    display: flex;
    flex-direction: row;
    grid-gap: 100px;
    position: relative;
}

.footer-contact-left, .footer-contact-right
{
    display:grid;
    grid-template-columns: auto;
}

.footer-contact-left p, .footer-contact-right p
{
    margin: 0;
}

.footer-contact-left
{
    grid-gap: 10px;
}

.footer-contact-content
{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.footer-copyright
{
    padding: 19px 240px 21px 240px;
    background: #1D1B56;
    display: flex;
    justify-content: space-between;
}

.footer-img
{
    width: 467px;
    position: relative;
    position: absolute;
    left: 240px;
    bottom: 0px;
}

.footer-img img
{
    filter: drop-shadow(10px -10px 20px rgba(0, 0, 0, 0.25));
    border-radius: 20px 100px 0px 0px;
    height: 715px;
    object-fit: cover;
}

.footer-img > h2
{
    position: absolute;
    display: flex;
    height: auto;
    width: 338px;
    left: 70px;
    bottom: 50px;
    color: #FCD704;
}

.footer-img-gradient
{
    background: linear-gradient(180deg, rgba(21, 21, 30, 0) 0%, rgba(21, 21, 30, 0.6) 46.35%, #15151E 100%);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 300px;
}

.footer-copyright .rd-icon {
    height: 30px;
    display: block;
    margin-left: 20px;
}

/*******************RESPONSIVE CSS***********************/

@media (max-width: 1500px){
    .header-logo{
        bottom: -130px;
    }
}

@media (min-width: 250px) and (max-width: 900px)
{
    h1{
        font-size: 48px;
    }

    h2{
        font-size: 36px;
    }

    h3{
        font-size: 31px;
    }

    h4{
        font-size: 24px;
    }
    
    header{
        position: absolute;
        padding: 10px 10px 20px 10px;
        height: 100px;
        width: 100%;
        margin-right: 40px !important;
    }

    .header-top-content, .header-bottom{
        display: none;
    }

    .banner{
        background: url(../assets/banners/propane-truck.webp) no-repeat bottom center;
        background-size: cover;
        margin: 0px 10px 20px 10px;
        display: flex;
        flex-direction: column;
        padding: 200px 50px 500px 10px;
    }
    
    main{
        margin: 0 20px;
    }

    .main-content{
        width: 100%;
        padding: 0px;
        gap: 10px;
    }

    .content-head{
        display: grid;
        grid-template-columns: auto;
    }

    .content-head-left img{
        width: 30px;
    }

    .content-list{
        display: flex;
        flex-direction: column;
        margin-bottom: 50px;
        width: 100%;
    }

    .content-list-item{
        width: 100%;
    }

    .prod-content{
        display: flex;
        flex-direction: column;
        grid-gap: 20px; 
    }

    .prod-display{
        width: 100%;
    }

    .prod-left img{
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .prod-right
    {
        padding: 0px;
        border: none;
        /* width: 100%; */
        margin-bottom: 60px;
    }

    .prod-list{
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 10px;
    }

    .prod-list > .content-list-item{
        width: 100%;
    }

    .carousel-content{
        margin: 0px 20px;
    }

    .swiper-slide{
        width: 100% !important;
    }

    .swiper-slide img{
        width: 100%;
        height: 100%;
        object-fit:cover;
    }
    .swiper{
        padding: 0px 20px !important;
    }

    .faq-frame{
        padding: 0;
        margin: 0 20px;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .faq-left{
        display: flex;
        flex-direction: column;
    }

    .tabs{
        padding: 0px !important;
    }

    .tab-label
    {
        padding: 0px;
    }

    .faq-frame > img{
        display: none;
    }

    .footer-contact-form{
        margin: 0;
        padding: 20px;
    }

    .footer-img
    {
        display: none;
    }

    .footer-contact-info{
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .footer-copyright{
        padding: 30px 20px;
    }

}

@media (min-width: 901px) and (max-width: 1500px)
{
    header{
        padding: 20px;
        position: absolute;
    }

    /* .header-frame{
        justify-content: center;
    } */

    .header-top-content{
        display: none;
    }

    .banner{
        margin-left: 20px;
        padding: 200px 100px 500px 20px;
    }

    main{
        margin: 0 40px;
    }

    .content-list{
        width: 100%;
        display:grid;
        grid-template-columns: 1fr 1fr;
    }

    .prod-display{
        width: 100%;
    }

    .prod-content{
        grid-gap: 20px;
    }

    .prod-right{
        padding-left: 20px;
    }

    .prod-content{
        display: grid;
        grid-template-columns: 2fr 1fr;
    }

    .prod-list{
        display: grid;
        grid-template-columns: 1fr;
    }

    .swiper{
        padding: 0px 40px !important;
    }

    .carousel-content{
        margin: 100px 40px 0 40px;
    }

    .faq-frame{
        padding-left: 40px;
        display: grid;
        grid-template-columns: 2fr 1fr;
    }

    .footer-img{
        display: none;
    }

    .footer-contact-form{
        width: 100%;
        padding: 20px 40px;
    }

    .footer-contact-info
    {
        margin: 0px;
        padding: 40px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .footer-copyright{
        padding: 20px 40px;
        width: 100%;
    }
}