*, *::after, *::before{margin: 0; padding: 0; box-sizing: border-box;}

body{/* font-family: 'Open Sans', sans-serif; */font-family: 'Roboto', sans-serif; font-size: 14px;color: #4A4B4C;font-family: 400;}



a{transform: 0.3s ease-in-out; text-decoration: none; font-family: 'Open Sans', sans-serif; color: #4A4B4C;}

ul{list-style: none;}

.text-center{text-align: center;}
.container{width: 1024px;margin: auto;}

.t-menu{display: none; background: transparent; outline: 0; border: 0; cursor: pointer; position: absolute; right: 10px;}
.t-menu span{width: 20px; height: 2px; background: #8B0000; margin: 5px; display: block;}
.t-close{ background: transparent; outline: 0; border: 0; cursor: pointer; position: absolute; right: 5px; color: #fff; text-transform: capitalize; font-weight: 600; font-size: 16px; border: 1px solid #fff; padding: 5px; top: 5px;}
#mobNav{position: fixed; width: 100%; height: 100%; background: #9F1014; top:0; left: 0; opacity: 0; pointer-events: none; transition: 00.3s ease-in-out; z-index: 99;}
#mobNav.show{pointer-events: all; opacity: 1;}

section.nav{box-shadow: 0 2px 5px rgb(0 0 0 / 20%);}
nav.desktop{display: flex; padding: 10px;}
nav.desktop ul{list-style: none; display: flex; flex-wrap: wrap;}
nav.desktop ul li{padding: 10px 15px;}

nav.desktop a{color: #F15A29; text-decoration: none; font-weight: 600; font-family: 'Roboto', sans-serif;}
nav.desktop a:hover, nav.desktop a.active{color: #9F1014;}
nav.desktop h1 a{color: #8B0000; font-weight: 400; }
nav.desktop h1{margin-bottom: 5px; padding-left: 13px;}
nav.desktop .left{padding-right: 10px; flex: 1;}
nav.desktop .right a{color: #fff; background:#F15A29; padding: 10px; font-weight: 400; display: inline-block; font-family: 'Roboto', sans-serif;}
nav.desktop .right a:hover{background:#9F1014; }


nav.desktop .left li{position: relative;}

nav.desktop .left li .dropdown{position: absolute; background: #9F1014; padding: 0; z-index: 1; transition: 0.3s ease-in-out; display: grid; grid-template-columns: repeat(2, max-content); opacity: 0; pointer-events: none; padding: 5px 15px;} 
nav.desktop .left li:hover .dropdown{opacity: 1; pointer-events: auto}
nav.desktop .left li .dropdown ul{display: block}
nav.desktop .left li .dropdown ul li{padding: 5px 0;}
nav.desktop .left li .dropdown a{color: #fff; font-weight: 400;}
nav.desktop .left li .dropdown a:hover{color: #fbab21;}

p{
    text-align: left;
}

footer{
    position: relative;
    padding: 20px 10px 10px;
}
footer::before{
    content: "";
    width: 100%;
    height: 10px;
    background: rgb(250,168,25);
    background: linear-gradient(90deg, rgba(250,168,25,1) 0%, rgba(144,10,13,1) 100%);
    position: absolute;
    top:0;
    left: 0;
}
footer .container{padding: 0 0 0 25px;}
footer h2{margin-bottom: 25px;}
footer .col-row{display: flex; flex-wrap: wrap; margin-top: 15px;}
footer .col-row .col{flex-basis: 25%; position: relative; text-align: center; padding: 0 14px 0 10px; }
footer .col-row .col > div{display: flex; flex-wrap: wrap; justify-content: center; margin-top: 10px;}
footer .col-row .col h3{flex-basis: 100%;}
footer .col-row .col > div a{margin: 0 2px; transition: 0.3s ease-in-out;}
footer .col-row .col > div a:hover{transform: rotateY(180deg);}
footer .col-row .col::after{position: absolute; content: ""; width: 4px; height: 100%; background: red; right: 0; top:0; background: rgb(247,141,30);
    background: linear-gradient(180deg, rgba(247,141,30,1) 0%, rgba(255,255,255,1) 56%);}
footer .col-row .col:nth-child(2){flex-basis: 18%;}
footer .col-row .col:nth-child(3){flex-basis: 20%;}
footer .col-row .col:nth-child(4){flex-basis: 37%; padding-right: 10px;}
footer .col-row .col:nth-child(4)::after{display: none;}
.foo-card{border: 3px solid #f26822; padding: 10px; border-radius: 10px; margin-top: -15px !important; }
.foo-card a{display: block; font-size: 16px; flex-basis: 100%; padding: 5px 0;}
.foo-card a:hover{transform: none !important; opacity: 0.8 ;}

.foot-links{padding: 10px !important;  border-top: 3px dotted #f78d1e; margin-top: 10px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.container.foot-img{padding-left: 10px;}

@media only screen and (max-width: 1023px) {
    .container{width: 100%; padding: 10px}

}

@media only screen and (max-width: 767px) {

    nav.desktop ul{display: none;}
    nav.desktop .left {order: 2; position: relative; padding-right: 40px;}
    nav.desktop .right {order: 1;}
    .t-menu{display: block; }
    nav.desktop{align-items: center;}
    #mobNav{padding: 20px;}
    #mobNav>ul>li>a{color: #fff; font-weight: 400; position: relative; display: block;}
    #mobNav>ul>li>a span{position: absolute; right: 0;}
    #mobNav>ul>li>a span img{width: 12px; transform: rotate(90deg);  transition: 0.3s ease-in-out;}
    #mobNav>ul>li>a.ac span img{width: 12px; transform: rotate(-90deg); }
    #mobNav>ul>li{width: 100%; text-align: center; padding: 10px;}
    #mobNav>ul>li .dropdown{display: none;}
    #mobNav>ul>li .dropdown a{pointer-events: auto; color:#fbab21; padding: 5px; display: inline-block}

    footer .col-row{display: block;}
    footer .col-row .col{padding: 15px; border-bottom: 3px dotted #f78d1e;}
    footer .col-row .col::after{display: none;}
    .foo-card{margin-top: 0!important;}
    .foot-links{border: none; }

}

@media only screen and (max-width: 644px) {
    .foot-links{text-align: center;}
    .foot-links a{flex-basis: 50%;}
    .foot-links span{display: none;}
}