@font-face {
            font-family: 'Roboto';
            src: url('../font/roboto/Roboto-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal; 
} 
@font-face {
            font-family: 'RobotoBold';
            src: url('../font/roboto/Roboto-Bold.ttf') format('truetype');
            font-weight: normal;
            font-style: normal; 
} 
@font-face {
            font-family: "Carlito";
            src: url("carlito/Carlito-Regular.ttf") format('truetype'); 
          font-weight: normal;
            font-style: normal; 
}  
* {
    margin: 0;padding: 0;box-sizing: border-box;
}
html{
height:100%;position:relative;
}        
body{
  padding:0;margin:0;min-height:100vh;position:relative; 
  font-family: Arial, Helvetica, sans-serif;
}
/* #nav{
    position:relative; width:100%;height:200px;margin-bottom:100px; 
} */
#nav-overlay{
     height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.8);
  overflow-y: hidden;
  transition: 0.5s;
}
#nav #nav-menu-logo-container, #nav #nav-logo-container{
  padding:10px 0; text-align:center;
}

#nav-logo-icon{
  width:100px;height:100px; object-fit:contain;
}
main{
    width:100%;min-height:75vh;
}
#column-template{
     display:none; 
}
#column-template #second-col{
position:relative;
}
#column-template #template-logo{
    position: absolute;top: 20%;left: 50%;transform: translate(-50%);
}
#column-template #template-logo-icon{
     max-width:350px;max-height:250px;object-fit: cover;border-radius:8px; transform:scale(1);animation-name: logoAnimation;animation-timing-function: ease-in-out;animation-duration: 2s;
    animation-iteration-count: infinite;animation-direction: alternate;  
}
#circle-bg{ 
    position:absolute;top:-140px;right:-140px;width:280px;height:280px; background-color:#99CC33;border-radius:50%;z-index:-10;
 }

.columns{
    padding:0;margin:0;display:flex;flex-direction:column;z-index:-1;min-height:75vh /* min-height:100vh; */
}     
.column{
   flex:1;display:flex;flex-direction: column;
   padding:5px;width:100%
}
.column#left-column{
    align-items:center;  
}
.column #left-column-content #logo-bg{   
    display:none; 
}
.column #left-column-content{
    position:relative;
}
.column #left-column-content #logo-icon{   
    width:auto;
}
.column #left-column-content #logo-bg .title{   
 display:none; 
}

#first-column-content::before{
    content: "";background-image: url("../imgs/logo-md.png");background-size:contain;background-repeat:no-repeat;background-position: center; 
        position: absolute;top: 0;right: 0;bottom: 0;left: 0;
        opacity: 0.2; 
    }
.columns #right-column{
    position:relative; background-color:#3399cc; margin-top:100px;margin-bottom:20px;
}
.columns #right-column #main-section{
    text-align:center;
}
.columns #logo-container{
    padding-top:150px; 
    padding-bottom:150px;
}
.columns #right-column #main-section #logo-icon{
   width:200px; object-fit: cover;border-radius:8px; transform:scale(1);animation-name: logoAnimation;animation-timing-function: ease-in-out;animation-duration: 2s;
    animation-iteration-count: infinite;animation-direction: alternate;  
}
#container-tagline{
    margin-top:20px;
}
.columns .logo-tagline{
font-family:Verdana; font-size: 2.5rem;font-weight: bold;text-align: center;color: white;text-transform:capitalize ;letter-spacing:-1px;
}
.columns .logo-tagline:nth-child(2){
    color: rgb(242, 154, 46);
}
#footer{
    background-color:rgb(155, 14, 14);padding:5px;color:white;min-height:200px;background-image: linear-gradient(to bottom, #f64949, #ad0b0b);
}    
#footer-contact{
   margin-top:70px;
   margin-bottom:70px;
}

#footer #footer-contact-primary{
    text-align:center;
}
#footer #footer-contact-primary > *{
    margin-bottom:25px;color:white;text-decoration:none;display:inline-block;
}
#footer #footer-contact-primary .icon{
   padding:0 5px;
}
#footer-phone{
   font-size:1.8rem;
}
#footer-contact-secondary{
    display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;column-gap:20px;margin-top:20px;
}
.footer-contact-link{
    padding:5px 10px;border:1px solid #e6dcdc; border-radius:5px;
}      
.footer-contact-link:hover .icon{
    color:yellow;transform:scale(1.2);transition:.2s ease-in-out;
    
}
#footer-contact-primary > *:hover .icon{
    color:yellow;transform:scale(1.2);transition:.2s ease-in-out;

}
.footer-contact-link .icon{
    color:white;padding:0 5px;
} 

#nav #menu-container{
    /*   position:fixed;width:min(700px,100%);top:0;left:-100%;z-index:10; visibility: hidden;opacity: 0;transition:0.2s ease-in-out;  background-image: linear-gradient(#bfbdbd, #ebe8e8);border-bottom-left-radius:10px;border-bottom-right-radius:10px; box-shadow: 2px 2px 2px #a9a7a7; */
}
#nav #menu-container.menu-container-visible{
  visibility: visible;opacity:1;left:0;
}
#nav-overlay.nav-visible{
    height:100%;
}
#nav #nav-overlay-content{
 border-bottom-left-radius:10px;border-bottom-right-radius:10px; box-shadow: 2px 2px 2px #a9a7a7;
 position:relative;background-image: linear-gradient(#f9f9f3, #f5f5dd);
}
#nav #menu{ 
    margin:0 auto; display:flex;flex-direction:column;justify-content: space-around;align-items:center;
 row-gap:20px;padding:80px 0;margin:0;
}
#nav #menu li{
    list-style:none;
}
#nav #menu li a{
     text-decoration:none; color:#3366CC;font-weight:bold;font-size:20px;transition:0.2s ease-in-out;padding:10px;border-radius:10px;
}
#nav #menu li a:hover, #nav #menu li a.active{
    color:black; background-color: #ffff;font-size:23px;color:#193d8c
}

#menu-btn{
 margin-top:20px;
 margin-bottom:20px;
 width:100%;
 padding:0;
 font-size:2rem;
}
#nav #menu-btn-icon{
   font-size:1.5rem;
}
.nav-title{
    font-weight:bold; margin:4px; color:#474848
}
#nav #close-menu-btn{
    margin:10px;position: absolute;right: 0;top: 0;
}
.container {
    padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;
}

.page-title{
    font-weight:bold;font-size:2rem;margin:10px 0;text-transform: uppercase;line-height:1;letter-spacing: -0.32px;font-family:"RobotoBold"
}
.page-subtitle{
    font-weight:bold; 
}
.section {
    margin-bottom: 20px;                 
}
.section-title{
    font-weight:bold;
}
.section-subtitle{
    font-weight:bold;
}
.center-text{
    text-align:center;
}
.btn{
    display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: 400;
    line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;-ms-touch-action: manipulation;
    touch-action: manipulation;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;
    user-select: none;background-image: none;border: 1px solid transparent;border-radius: 4px;
}
.btn-sm{
    padding: 5px 10px;font-size: 12px;line-height: 1.5;border-radius: 3px;
}
.btn-primary{
    color: #fff;background-color: #337ab7;border-color: #2e6da4;
}
.btn-danger{
    color: #fff;background-color: #d9534f;border-color: #d43f3a;
}
.checkmark-css {
    display: inline-block;width: 10px;height: 20px;border-bottom: solid 3px white;border-right: solid 3px white;transform: rotate(45deg);
   
}
.text-primary{
    color:#1d1b1b;
}
.text-secondary{
    color:rgb(46, 46, 46);
}
.h1{font-size:3.81rem;line-height:1;letter-spacing:normal}
.h2{font-size:3.05rem;line-height:1.1;letter-spacing:normal}
.h3{font-size:2.44rem;letter-spacing:normal}
.h4{font-size:1.95rem;line-height:1.3;letter-spacing:normal}
.h5{font-size:1.56rem;letter-spacing:normal}
.h6{font-size:1.25rem;letter-spacing:normal}
.text-center{text-align:center}
   /* <------ MEDIA QUERIES ------>*/
@media screen and (min-width:500px) {
    #nav{
        visibility: visible;opacity:1;
    }
    #nav #menu-container{
       position:absolute;background-image:unset;border-bottom-left-radius:unset;    border-bottom-right-radius:unset;box-shadow:unset;
    }
   /*   #nav #menu-btn,#close-menu-btn{
        display:none; 
     } */
     #menu-btn{
        display:none;
     }
     #close-menu-btn{
        display:none;
     }
    #nav #menu-container{
       /*  bottom: 0;left: 50%;transform: translateX(-50%);visibility: visible;opacity: 1; */
          position:relative;width:min(100%,750px);margin:0 auto; margin-bottom:100px;
    }
    #nav #menu{  
        height:auto;margin:0 auto; display:flex;flex-direction:row;justify-content: space-around;align-items:center;flex-wrap:wrap;
        opacity: 0.7;border-radius:10px;background-image: linear-gradient(#bfbdbd, #ebe8e8);padding:10px;
        margin:0; margin-top:20px
   }
   .container {
       padding-right: 15px !important; padding-left: 15px !important;margin-right: auto !important;margin-left: auto !important;
    }
    .columns{
        flex-direction: column;
    }
      #circle-bg{
       top:-140px;right:-140px;
     }  
      #nav #nav-logo-container{
        display:none;
      }
      .columns .logo-tagline{
         font-size:3.5rem;
      }
      .page-title{
        font-size:2.4rem; 
      }
    #nav-overlay{
     height: auto;
     width: 100%;
     position: relative;
     background-color: transparent;
     overflow-y:visible
    }
    #nav #nav-overlay-content{
 background-image: unset;border-bottom-left-radius:unset;border-bottom-right-radius:unset; box-shadow: unset;
 position:relative;



}
}
@media screen and (min-width:768px) {
    .container {
        width: 750px;
    }
    .column #left-column-content #logo-icon{   
        width:580px;
    }
}
@media screen and (min-width:992px) {
    .container {
        width: 970px;
    }
}

@media screen and (min-width:1000px) {
    #column-template{
        position:absolute;top:0;left:0;padding:0;margin:0;display:flex;flex-direction:column;z-index:-1;width:100%;height:100%;overflow:hidden;
        flex-direction:row;
    }
    #column-template #first-col,#second-col{
        flex:1;height:auto !important; 
    }
    #column-template #second-col{
        background-color:#3399cc;
    }
    #column-template #circle-bg{
        z-index:1;top:-140px;right:-140px;
    }
    #nav #nav-logo-container{
        display:none; 
    }
    .columns #left-column{
        justify-content:flex-start;
    }
    .columns{
        flex-direction: row; 
    }
    .columns #right-column #main-section #logo-icon{
        width:auto; 
    }
    .columns .logo-tagline{
        font-size:4rem;
    }
    .page-title{
        font-size:2.5rem; 
    }
    .columns #right-column{
      margin-top:initial
    }
#footer #footer-contact > *{
    font-size:1.2rem;
}
}
@media screen and (min-width:1200px) {
.container {
    width: 1170px;
}
}
                                                  
@keyframes logoAnimation {
  from {transform:scale(1);}
  to {transform:scale(1.1);}
}