/* HEADER SECTION  */
body{
    -webkit-font-smoothing:antialiased;
    font-family: 'Times New Roman', Times, serif;
     scroll-behavior: smooth;
}

.container {
    width:100%;
    padding: 0px 3.1rem;
    margin:0 auto;
 
}

#top_detail .cont-detail .top-link img{
    width: 1.5rem;
    margin: 0 .7rem;

}

#top_detail .cont-detail .top-link{
    text-decoration: none;
    color: black;
}
#top_detail .cont-detail .top-link span{
    font-size: 1.5rem;
    letter-spacing: .2rem;
}
#top_detail .cont-detail > div{
    padding: 0 1.5rem;
    
}
header.topbar .container .icons img{
    height: 3rem;
    margin-right: 2rem;
}
header.topbar .container .icons img:hover{
   filter: invert(0.20);
}
header.topbar {
    max-width: 100%;
    /* background: rgb(124 204 234 / 95%); */
    
}

header.topbar .logo img{
    margin-top: .4rem;
    height: 5.3rem;
    border-radius: 3rem;
    padding: 0.25rem;
}
/* .comp_name{
    text-align: center;
} */
header.topbar .container .comp_name h1{
    color: #e6720e;
    font-variant: small-caps;
    font-size: 3rem;
}
header.topbar .container .comp_name h4{
   font-family: serif;
   /* background-color: yellow; */
   font-size: 1.65rem;
   margin-bottom: inherit !important;
}


/* .nav-bar{
    padding-bottom: 0;
} */
#menu-bar{
    display: none;
}
.nav-bar label{
    /* position: relative;
    right: 3rem;
    top: 2rem; */
    margin: 0 3rem 0 0;
    float: right;
    font-size: 3rem;
    line-height: 5rem;
    cursor: pointer;
    display: none;
    /* visibility: hidden; */
}

.menubar{
    float: right;
    margin: 1rem;
    z-index: 1000;
}

ul .menubar li {
    font-size: 1.7rem;
    padding: 0 2rem;
    list-style: none;

}

ul .menubar li .sub-menu{
    position: absolute;
    background: #ade1eced;
    width: 100%;
    left: 0;
    top: 9rem;
    padding: 2.5rem 1.5rem;
    display: flex;
    justify-content: space-evenly;
    line-height: 25px;
    visibility: hidden;
    box-shadow: 0 8px 16px 0px rgba(131, 131, 131, 0.2);
    z-index: 25;
}
ul .menubar li .sub-menu .col{
    padding: 0 1rem;
    line-height: 3rem;
    letter-spacing: .2rem;
    width: 20%;

}
ul .menubar li .sub-menu .col > a{
    padding-top: 1rem;
    font-size: 1.6rem;
    text-decoration: none;
    color: black;
}
ul .menubar li .sub-menu .col li{
    font-size: 1.6rem;
}
ul .menubar li .sub-menu .col > a:hover{
    border-bottom: .2rem solid whitesmoke;
}
ul li > a{
    font-size: 2rem;
    color: black;
    padding: 2rem 2rem;
    text-decoration: none;
}

ul li > a:hover{
    /* margin-top: 5rem; */
    color:whitesmoke;
    background-color:black;
}

ul li:hover .sub-menu{

    visibility: visible;
}





/* FOOTER SECTION  */
footer.footer-section{
    max-width: 100%;
    height: 100%;
    background: #4a5d7c;
    color: #FEFEFE;
}
.footer-section .container .contact-footer{
    width: 25%;
    padding: 1rem 0;
}

.footer-section .container .contact-footer h3 a{
    text-decoration: none;
    color: white;
  
}
.footer-section .container .contact-footer > div > div{
    padding-top: 1rem;
}
.footer-section .container .contact-footer .contact_us-footer > div > div > img{
    max-height: 2.3rem;
    width: 3rem;
    margin-top: 1.8rem;
    margin-right: 1.5rem;
}
.footer-section .container .contact-footer .contact_us-footer> div > div > div{
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: .8rem;
    letter-spacing: .2rem;
}
.footer-section .container .contact-footer .contact_us-footer span{
    font-size: 1.5rem;
}
.footer-section .container .contact-footer .contact_us-footer > div > div > div span:first-child{
    margin-bottom:0.25rem;
}
.footer-section .container .abt-us-footer{
    width: 25%;
    padding-top: 1rem;
}
.footer-section .container .abt-us-footer .abt-content p{
    font-size: 1.8rem;
    padding-top: 1rem;
    padding-left: 1rem;
    word-spacing: .2rem;
    line-height: 2.5rem;
    letter-spacing: .1rem;

}
.footer-section .container .social-media{
    margin: .5rem;
    height: 3rem;
    position: relative;
    top: 12.5rem;
}
.footer-section .container .social-media .social-logo a img{
    padding: .2rem .3rem;
    height: 2.5rem;
    width: 3rem;
    /* transition: width .2s, height .2s; */
}
.footer-section .container .social-media .social-logo a img:hover{
    height: 2.7rem;
    width: 3.2rem;
}
.footer-section .container .location{
    width: 30%;
    padding-top: 1rem;
    align-items: center;
    margin-left: 2rem;
}

.footer-section .container .location .ico img{    
    width: 5rem;
    height: 5rem;
}
.footer-section .container .location .text{
    font-size: 2rem;
    margin-left: 1rem;

}
.footer-section .container .location .text p{
    letter-spacing: .2rem;
    line-height: 2.5rem;
}



footer.copyright{
    padding:1rem 0;
    background: #38465c;
    color:#FEFEFE;
    text-align: center;
    font-size: 1.4rem;
}
footer.copyright a{
    color:#EEBF00;
    text-decoration: none;
}








@media only screen and (max-width:299px){
    html{
        font-size: 20%;
    }
    .container{
        max-width:200px;
        padding: 0px;
        
    }
}
@media (min-width:300px) and (max-width:499px){
    html{
        font-size: 28%;
    }
    .container{
        max-width:260px;
        padding: 0px;
        
    }
}
@media (min-width:500px){
    html{
        font-size: 35%;
    }
    .container{
        padding: 0;
        max-width:420px;
        
    }
    
}
@media (min-width: 650px) {
    /* #nav-bar .menubar{

    } */
    html{
        font-size: 39%;
    }
    .container {
        padding: 0 1.5rem;
        max-width: 90rem;
    }
  }
@media (min-width: 768px) {
    html{
        font-size: 42%;
    }
   
    .container {
      /* max-width: 800px; */
      max-width: 96rem;

    }
  }
  
  @media (min-width: 992px) {
    html{
        font-size: 55%;
    }
    .container {
        padding: 0;
      /* max-width: 920px; */
      max-width: 100rem;

    }
  }
  
  @media (min-width: 1200px) {
     
    .container {
      max-width: 1300px;
    }
    
  }
  @media (min-width: 1350px) {
    .container {
      max-width: 95%;
    }
    
  }






@media only screen and (max-width:299px){
    .nav-bar label{
        display: initial;
        /* visibility: visible; */
    }
    .nav-bar .menubar{
        position: absolute;
        top: 6%;
        left: 0;
        right: 0;
        color: #fff;
        border: .1rem solid rgba(0, 0, 0, .1);
        display: none;
        padding-top: .5rem;
    }
    /* #nav-bar .container .menubar > li{
        display: block;
    } */
    #menu-bar:checked ~ .menubar{
        display: initial;
    }

    .nav-bar ul .menubar > li{
        background: #ffff;
        border: .1rem solid #64c7ecb8;
        font-size: 3rem;
        padding: 2rem;
        text-align: center;
        /* position: relative;
        left: 7rem;
        top: 2rem; */
    }

    .nav-bar ul li > a{
        padding: 1rem;
    }
    .nav-bar ul li > a:hover{
        color:whitesmoke;
        background-color: lightblue;
    }
    .nav-bar ul .menubar li .sub-menu{
        display: none;

    }



    
    .footer-section .container {
        display: block;

    }
    .footer-section .container .contact-footer{
        float: right;
        width: 13.5rem;
    }
    .footer-section .container .contact-footer .contact_us-footer span{
        font-size: 1rem;
    }
    .footer-section .container .contact-footer .contact_us-footer .respo-flex{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer-section .container .abt-us-footer, .footer-section .container .location{
        display: none
    }
    .footer-section .container .social-media {
        width: 6.5rem;
        float: left;
        position: relative;
        top: 3.5rem;
    }
    .footer-section .container .social-media .social-logo{
        display: flex;
        flex-wrap: wrap;
    }
    .footer-section{
        content: "";
        clear: both;
        display: table;
        width: 100%;
    }
}


@media (min-width:300px) and (max-width:499px) {
    .nav-bar label{
        display: initial;
        /* visibility: visible; */
    }
    .nav-bar .menubar{
        position: absolute;
        top: 5%;
        left: 0;
        right: 0;
        color: #fff;
        border: .1rem solid rgba(0, 0, 0, .1);
        display: none;
        padding-top: .5rem;
    }
    /* #nav-bar .container .menubar > li{
        display: block;
    } */
    #menu-bar:checked ~ .menubar{
        display: initial;
    }

    .nav-bar ul .menubar > li{
        background: #ffff;
        border: .1rem solid #64c7ecb8;
        font-size: 3rem;
        padding: 2rem;
        text-align: center;
        /* position: relative;
        left: 7rem;
        top: 2rem; */
    }

    .nav-bar ul li > a{
        padding: 1rem;
    }
    .nav-bar ul li > a:hover{
        color:whitesmoke;
        background-color: lightblue;
    }
    .nav-bar ul .menubar li .sub-menu{
        display: none;

    }
    .footer-section .container {
        display: block;

    }
    .footer-section .container .contact-footer{
        float: right;
        width: 13.5rem;
        position: relative;
        right: 6.5rem;
    }
    .footer-section .container .contact-footer .contact_us-footer span{
        font-size: 1.5rem;
    }
    .footer-section .container .contact-footer .contact_us-footer .respo-flex{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer-section .container .abt-us-footer,.footer-section .container .location{
        display: none
    }
    .footer-section .container .social-media {
        width: 10rem;
        float: left;
        position: relative;
        top: 15rem;
    }
    .footer-section .container .social-media .social-logo{
        display: flex;
        flex-wrap: wrap;
    }
    .footer-section{
        content: "";
        clear: both;
        display: table;
        width: 100%;
    }

}


@media (min-width:500px) and (max-width:767px) {
    .nav-bar label{
        display: initial;
        /* visibility: visible; */
    }
    .nav-bar .menubar{
        position: absolute;
        top: 6%;
        left: 0;
        right: 0;
        color: #fff;
        border: .1rem solid rgba(0, 0, 0, .1);
        display: none;
        padding-top: .5rem;
    }
    /* #nav-bar .container .menubar > li{
        display: block;
    } */
    #menu-bar:checked ~ .menubar{
        display: initial;
    }

    .nav-bar ul .menubar > li{
        background: #ffff;
        border: .1rem solid #64c7ecb8;
        font-size: 3rem;
        padding: 2rem;
        text-align: center;
        /* position: relative;
        left: 7rem;
        top: 2rem; */
    }

    .nav-bar ul li > a{
        padding: 1rem;
    }
    .nav-bar .menubar > li > a{
        display: block;
    }
    .nav-bar ul li > a:hover{
        color:whitesmoke;
        background-color: lightblue;
    }
    .nav-bar ul .menubar li .sub-menu{
        display: none;

    }




    .footer-section .container {
        display: block;

    }
    .footer-section .container .contact-footer{
        float: right;
        width: 13.5rem;
        position: relative;
        right: 5rem;
    }
    .footer-section .container .contact-footer .contact_us-footer span{
        font-size: 1.5rem;
    }
    .footer-section .container .contact-footer .contact_us-footer .respo-flex{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer-section .container .abt-us-footer, .footer-section .container .location{
        display: none
    }
    .footer-section .container .social-media {
        width: 10rem;
        float: left;
        position: relative;
        top: 15rem;
    }
    .footer-section .container .social-media .social-logo{
        display: flex;
        flex-wrap: wrap;
    }
    .footer-section{
        content: "";
        clear: both;
        display: table;
        width: 100%;
    }
  
}


@media (min-width: 768px) and (max-width: 1000px){

    
    .footer-section .container .abt-us-footer{
        width: 30%;
        padding-top: 1rem;
    }
    .footer-section .container .contact-footer{
        width: 20%;
        padding: 1rem 0;
        position: relative;
        right: 2rem;
    }
    .footer-section .container .contact-footer .heading{
       text-align: unset;

    }
    .footer-section .container .contact-footer .contact_us-footer{
        display: flex;
        flex-direction: row;
    }
    .footer-section .container .contact-footer .contact_us-footer .respo-flex{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer-section .container .social-media {
        position: relative;
        top: 19rem;
    }

}


@media (min-width: 1001px) and (max-width: 1200px){

    .footer-section .container .social-media {
        position: relative;
        top: 12.5rem;
    }

}