@import url('https://fonts.googleapis.com/css2?family=Platypi:ital,wght@0,300..800;1,300..800&display=swap');



/*  custome property*/
:root {


    /*  baground color*/

    --bg-dark-purple: hsla(260, 62%, 11%, 1);
    --bg-russian-violate: hsla(259, 61%, 14%, 1);
    --bg-vivid-violate: hsla(273, 100%, 55%, 1);
    --bg-sunglow: hsla(43, 100%, 61%, 1);
    --bg-blue-jeans: hsla(202, 100%, 50%, 1);
    --bg-white-alpha-10: hsla(0, 0%, 100%, 0.5);
    --bg-white-alpha-1: hsla(0, 0%, 0%, 0.1);



    /*                   text colours           */

    --tex-white: hsla(0, 0%, 100%, 1);
    --tex-black: hsla(0, 0%, 0%, 1);
    --tex-sunglow: hsla(43, 100%, 61%, 1);
    --tex-white-alpha-60: hsla(0, 0%, 100%, 0.6);


    /*      border color        */

    --border-blue-jeans: hsla(202, 100%, 50%, 1);
    --border-white-alpha-10: hsla(0, 0%, 100%, 0.1);


    /*            Typography      */

    /*     font size          */

    --fontfamily-open-sans: 'open sans', sans-serif;
    --fontsize-1: 4rem;
    --fontsize-2: 3.2rem;
    --fontsize-3: 2.4rem;
    --fontsize-4: 2rem;
    --fontsize-5: 1.8rem;
    --fontsize-6: 1.6rem;
    --fontsize-7: 1.4rem;

    /*             font weight         */

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;


    /*         Shadow       */

    --shadodw-1: drop-shadow(0 20px 30px hsal(0, 0%, 0%, 0.1));
    --shadodw-2: drop-shadow(0 20px 30px hsal(0, 0%, 0%, 0.2));


    /*           transition       */

    --transition-1: 205ms ease;
    --transition-2: 500ms ease;
    --cubic-out: cubic-bezier(0, 1, 0.5, 1);

}




*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    transition: .2s linear;
}

li {
    list-style: none;
}

a,
img,
span,
button {
    display: block;
}

a {
    color: initial;
    text-decoration: none;
    cursor: pointer;
}

img {
    height: auto;
}

input,
button {
    background: initial;
    border: none;
    font: initial;
}

input {
    width: 100%;
    outline: none;
}

button {
    cursor: pointer;
}

address {
    font-style: normal;
}

.full-truck-lode-section{
    display:block;
    background: var(--bg-white-alpha-10);
}

.full-truck-lode-header{
    border-top:1px solid black;
    display:block;
    padding:10px;

}


.full-truck-lode-header h1{
    text-align:center;
    font-size: var(--fontsize-3);
}


.full-truck-lode-contant{
    display:block;
    padding:20px 0px;
}

.full-truck-contant-block{
    width: 70%;
    display: block;
    margin: auto;
    border-radius: 10px;    
    background: var(--bg-white-alpha-1);
    margin-bottom: 20px;
    transition: 1s;
}   

.full-truck-contant-block:hover{
    border-radius: 50px;    
    background: var(--bg-blue-jeans);
    transform: scale(1.20);
}

.full-truck-contant-block h2{
        font-size: var(--fontsize-7);
        padding: 10px 0px;
        list-style-type: square;
        display: list-item;
        margin: auto;
        width: 90%;
}



@media screen and (min-width: 0px) and (max-width: 500px){
    
    
.full-truck-lode-header h1{
    text-align:center;
    font-size: var(--fontsize-6);
}

}