/* fonts for the page  */
@font-face {
    font-family: "Kalnia";
    src: url(/fonts/Kalnia/static/Kalnia-Regular.ttf) format('ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "DancingScript";
    src: url(/fonts/DancingScript/Dancing_Script/static/DancingScript-Medium.ttf) format('ttf');
}

.customStyleNav {
    border-bottom: 1px solid #93191a;
    margin: 0 5em;
}

.navCarLogoImg{
    width: 60px;
    height: 40px;
}

.custom-dropdown-style {
    margin-right:-1000px;
}

.custom-dropdown-style > li {
    display: inline-block;
}
#navbarLinks {
    font-family: "Kalnia", Verdana, Geneva, Tahoma, sans-serif;
}

#custom-headerimage-style>img {
    max-height: 80px;
}

/*carousel image gallery styling */
.gallery {
    margin: 13em auto;
    cursor: pointer;
    height: 120px;
}

.image_gallery {
    display: flex;
    align-items: center;
    position: relative;
    height: 300px;
    margin: 0 auto;
    max-width: 900px;
}

.automoblox_car {
    position: absolute;
    height: 200px;
    opacity: 0;
    width: 330px;
    z-index: 0;
    border-radius: 15px;
    background-size: contain;
    transition: all 0.3s ease-in-out;
}

.car1 {
    left: 15%;
    opacity: 0.4;
    transform: translateX(-50%);

}

.car2,
.car4 {
    height: 250px;
    opacity: 0.8;
    width: 380px;
    z-index: 1;
}

.car2 {
    left: 30%;
    transform: translateX(-50%);

}

.car3 {
    box-shadow: -2px 5px 44px 6px rgba((0), 0, 0, 0.3);
    height: 300px;
    opacity: 0.9;
    left: 50%;
    transform: translateX(-50%);
    width: 430px;
    z-index: 2;
}

.car4 {
    left: 70%;
    transform: translateX(-50%);
}

.car5 {
    left: 85%;
    opacity: .4;
    transform: translateX(-50%);

}

.slogan {
    font-family: "DancingScript", cursive;

}

.slogan>h2 {
    color: #93191a;
}

/* grid styling starts here  */
body {
    display: grid;
    grid-template-areas:
        "header"
        "main"
        "article"
        "footer"
    ;
}

header {
    grid-area: header;
}

/* sub grid for main  */
main {
    grid-area: main;
    display: grid;
    grid-template-areas:
        "gallery"
        "mainSection";
}

main .gallery {
    grid-area: gallery;
}

main .mainSection {
    grid-area: mainSection;
    border-bottom: 1px solid #93191a;
    margin: 20px 5em;
}

/* subb grid for article  */
article {
    grid-area: article;
    display: grid;
    grid-template-areas:
        "trendingHead"
        "articleSection";
    /* background: rgb(252,252,254);
    background: linear-gradient(90deg, rgba(252,252,254,1) 20%, rgba(158,29,30,0.8) 55%, rgba(0,0,0,0.4) 99%); */
}

article .trendingHead {
    grid-area: trendingHead;
    margin-top: 9em;
}

article>section {
    grid-area: articleSection;
    display: grid;
    gap: 20px;
    grid-template-areas:
        "policeCar rescueTruck";
    grid-template-columns: 1fr 1fr;
}

article>section>div:nth-child(1) {
    grid-area: policeCar;
    padding: 20px;
    color: #fff;
    transition: 1s ease-in-out;
    margin: 20px;
    cursor: pointer;
}

article>section>div:nth-child(1):hover,
article>section>div:nth-child(2):hover {
    color: #000;
    transform: translate(5%);
}

article>section>div:nth-child(1)>h3,
article>section>div:nth-child(2)>h3 {
    color: #000;
    color: #93191a;
    /* background color generated online */
    background: rgb(252, 252, 254);
    background: linear-gradient(90deg, rgba(252, 252, 254, 1) 20%, rgba(158, 29, 30, 0.8) 55%, rgba(0, 0, 0, 0.4) 99%);
    padding: 10px;
}

article>section>div:nth-child(2) {
    grid-area: rescueTruck;
    padding: 20px;
    color: #fff;
    transition: 1s ease-in-out;
    margin: 20px;
    cursor: pointer;
}

/* image sizing */
article section div img {
    width: 400px;
    height: 230px;
    margin: 20px;
    padding: 20px;
    transform: translateX(10%);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 1s ease-in-out, box-shadow 0.3s ease-in-out;
    filter: grayscale(30%);
    opacity: 0.9;
}

article section div img:hover {
    transform: translateX(33%);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    opacity: 1;
}


article .trendingHead {
    margin: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.1em;
    background: linear-gradient(90deg, rgba(252, 252, 254, 1) 20%, rgba(158, 29, 30, 0.6) 55%, rgba(0, 0, 0, 0.4) 99%);
    color: rgba(172, 30, 30, 1);
    transition: 2s ease-in-out;
    background-size: 250% 200%;
    background-position: 0 0;
}

.trendingHead:hover {
    background-position: 100% 0;
    color: #5b2121;
    cursor: pointer;
}

figure {
    margin-top: 1em;
}

footer {
    grid-area: footer;
    border-top: 1px solid #93191a;
    margin: 20px 5em;
}

footer .originalLink li a {
    text-decoration: none;
    color: #93191a;
}

footer .originalLink li {
    list-style: none;
}

footer>div.flex-row.text-center>a {
    padding: 5px;
}

/* main page styling finished here */

/* styling for car pages */
/* for A9  */
.A9ContainerMain {
    height: 800px;
    color: rgba(207, 109, 23, 0.6);
}

.A9carStyle {
    border-bottom: 1px solid #cf6d17;
    margin: 0 5em;
    cursor: pointer;
}

.customTableStyleA9 {
    margin: 30px;
}

.customTableStyleA9 th {
    background: linear-gradient(90deg, rgba(252, 252, 254, 1) 20%, rgb(207, 109, 23, 0.6) 55%);
}

.customTableStyleA9 td {
    background: linear-gradient(90deg, rgba(207, 109, 23, 0.6) 10%, rgba(252, 252, 254, 1) 55%);
}

/* for X9  */
.X9ContainerMain {
    height: 800px;
    color: rgba(67, 31, 84, 0.6);
}

.X9carStyle {
    border-bottom: 1px solid #431f54;
    margin: 0 5em;
    cursor: pointer;
}

.customTableStyleX9 {
    margin: 30px;
}

.customTableStyleX9 th {
    background: linear-gradient(90deg, rgba(252, 252, 254, 1) 20%, rgb(67, 31, 84, 0.6) 55%);
}

.customTableStyleX9 td {
    background: linear-gradient(90deg, rgba(67, 31, 84, 0.6) 10%, rgba(252, 252, 254, 1) 55%);
}

/* for C9  */
.C9ContainerMain {
    height: 800px;
    color:rgba(147, 25, 26, 0.6);
}

.C9carStyle {
    border-bottom: 1px solid #93191a99;
    margin: 0 5em;
    cursor: pointer;
}

.customTableStyleC9 {
    margin: 30px;
}

.customTableStyleC9 th {
    background: linear-gradient(90deg, rgba(252, 252, 254, 1) 20%, rgb(147, 25, 26, 0.6) 55%);
}

.customTableStyleC9 td {
    background: linear-gradient(90deg, rgba(147, 25, 26, 0.6) 10%, rgba(252, 252, 254, 1) 55%);
}

/* for M9  */
.M9ContainerMain {
    height: 800px;
    color:rgba(77, 161, 186, 0.6);
}

.M9carStyle {
    border-bottom: 1px solid #4da1ba;
    margin: 0 5em;
    cursor: pointer;
}

.customTableStyleM9 {
    margin: 30px;
}

.customTableStyleM9 th {
    background: linear-gradient(90deg, rgba(252, 252, 254, 1) 20%, rgb(77, 161, 186, 0.6) 55%);
}

.customTableStyleM9 td {
    background: linear-gradient(90deg, rgba(77, 161, 186, 0.6) 10%, rgba(252, 252, 254, 1) 55%);
}

/* for T9  */
.T9ContainerMain {
    height: 800px;
    color:rgba(54, 136, 58, 0.6);
}

.T9carStyle {
    border-bottom: 1px solid #36883a;
    margin: 0 5em;
    cursor: pointer;
}

.customTableStyleT9 {
    margin: 30px;
}

.customTableStyleT9 th {
    background: linear-gradient(90deg, rgba(252, 252, 254, 1) 20%, rgb(54, 136, 58, 0.6) 55%);
}

.customTableStyleT9 td {
    background: linear-gradient(90deg, rgba(54, 136, 58, 0.6) 10%, rgba(252, 252, 254, 1) 55%);
}

/* styling for about starts here  */
#aboutUsSection{
    background: linear-gradient(90deg, rgba(252, 252, 254, 0.8) 20%, rgba(158, 29, 30, 0.4) 55%, rgba(0, 0, 0, 0.2) 99%);
    margin: 3em;

}
.textHeadAbout{
    color: linear-gradient(90deg, rgba(252, 252, 254, 0.8) 20%, rgba(158, 29, 30, 0.4) 55%, rgba(0, 0, 0, 0.2) 99%);
    border-bottom: 1px solid #93191a;
    margin: 0 5em;
}
.textParaAbout{
    margin: 2em;
}

/* form styling contacts  */

.formStyle{
    background: linear-gradient(90deg, rgba(252, 252, 254, 0.8) 20%, rgba(158, 29, 30, 0.4) 55%, rgba(0, 0, 0, 0.2) 99%);
}

/* responsiveness  */
/* for nav bar  */
@media only screen and (max-width: 360px){
    body .container{
        display: grid;
        grid-template-areas:
        "header"
        "main"
        "article"
        "footer";
        
    }
    header{
        grid-area: header;
        
    }
    .customStyleNav{
        max-width: 335px;
       
    }
    header > .navbar{
      display: flex;
      justify-content: space-between;
      width: 95vw;
      margin: 0;
    }
    #custom-headerimage-style > img{
        width: 35%;
        margin-right: 100px;
    }
    .navLinkContainer{
        position: relative;
        right: -100px;     
    }
    #navbarLinks{
        font-size: 10px; 
    }

    .custom-dropdown-style{
       margin-right: 140px;
        font-size: 10px;
        background-color: transparent;
        cursor: pointer;  
    }

    .custom-dropdown-style img{
        width: 20px;
        height: 20px;
    }
/* //responsive for main sectioon */
    main{
        grid-area: main;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        position: relative;
    }
    main .gallery{  
        height: fit-content;
        margin-bottom: none;
        padding-bottom: none;
        
    }
    main .gallery img{
        width: 200px;
        height: auto;
        margin-top: -100px;
        
    }

    main section{
        display: flex;
        flex-wrap: wrap;
        font-size: 10px;
        width: 90%;
        position: absolute;
        top: 250px;
        padding: 10px 15px 5px 0;
    }
   main section h2{
    font-size: 20px;
   }

   /* responsivef article  */

    article{
        grid-area: article;
        width: 95vw;
        margin: 0;
    }
    article h1,h2,h3,h4 {
        font-size: 20px; 
        text-align: center;
    }
    article p{
        font-size: 10px;
    }

    body > div > article > section{
        display: grid;
        grid-template-areas: 
        "sec1"
        "sec2";
        grid-template-rows: 1fr 1fr;
    }
    article div{
       width: 90vw;
       max-height: 400px;
    }
    article section div{
        width: 80vw;
        height: 310px;
    }
    article section div:nth-child(2){
        height: 350px;
    }
    
    article section img{
        max-width: 60%;
        max-height: 33%; 
    }
    body > div > article > section > div:nth-child(1){
        grid-area: sec1;
        
    }
    body > div > article > section > div:nth-child(2){
        grid-area: sec2;
    }

     /* responsive footer  */
    footer{
        grid-area: footer;
        width: 95vw;
        margin: 0;
    }
    footer figure{
        margin-bottom: 5px;
        align-items: center;
    }
    footer figure img{
        width: 180px;
    }
    body > div > footer > div:nth-child(2) p{
        margin: 0;
        padding: 0;
    }
    body > div > footer > div:nth-child(2) ul {
        margin: 0;
        padding: 0;
    }
    .originalLink ul li{
        margin: 0;
        padding: 0;
        text-align: center;
    }
    footer p, a{
        font-size: 9px;
        text-align: center;
    }



}