@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body 
{
font-family:"Lato",sans-serif;
margin:0;
padding:0;
}

a
{
text-decoration:none;
}

header
{

}


footer
{
background:purple;
}





/* divs */
.innercont
{
width:95%;
max-width:1200px;
margin:auto;
}

#menucont
{
width:100%;
background-color:#4C0082;
}

.col2
{
width:47%;
display:inline-block;
border:0px solid grey;
}

.col3
{
width:32%;
display:inline-block;
vertical-align:top;
}

.next
{
display:inline-block;
vertical-align:top;
}





/* img */
#usericon
{
object-fit:cover;
height:40px;
width:40px;
border:1px solid black;
border-radius:50%;
}

#proicon
{
object-fit:cover;
height:80px;
width:80px;
border:2px solid black;
border-radius:50%;
}


@media screen and (max-width:600px) 
{
#logo
{
height:50px;
}
}




.ofc100
{
object-fit:cover;
height:100px;
width:100px;
}


.client
{
transition:transform .2s;
}

.client:hover
{
transform:scale(1.15); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}








/* sidenav */
#sidenav
{
display:none;
}
/* Fixed sidenav, full height */
.sidenav 
{


height:100%;
width:200px;
position:fixed;
z-index:1;
top:0;
left:0;
background-color:#111;
overflow-x:hidden;
padding-top:20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a,.dropdown-btn 
{
padding:6px 8px 6px 16px;
text-decoration:none;
font-size:20px;
color:#818181;
display:block;
border:none;
background:none;
width:100%;
text-align:left;
cursor:pointer;
outline:none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover 
{
color: #f1f1f1;
}

/* Main content???? */
.mainxxx
{
margin-left:200px;/* Same as the width of the sidenav */
font-size:20px;/* Increased text to enable scrolling */
padding:0px 10px;
}

/* Add an active class to the active dropdown button */
.active 
{
background-color:green;
color:white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container 
{
display:none;
background-color:#262626;
padding-left:8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down 
{
float: right;
padding-right: 8px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) 
{
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}







/* menu */
ul {
list-style-type: none;
margin:0;
padding:0;
overflow:hidden;
background-color:#4C0082;
  
font-size:20px;
}

li 
{
float: left;
}

li a, .dropbtn 
{
display:inline-block;
padding:12px;
color:white;
text-align:center;

text-decoration:none;
}

li a:hover, .dropdown:hover .dropbtn 
{
background-color: red;
}

li.dropdown 
{
display: inline-block;
}

li>a:after 
{ 
content:' ▼'; 
}

li>a:only-child:after 
{ 
content:''; 
}






/* menu dd*/
.dropdown-content 
{
display: none;
position: absolute;
background-color: #4C0082;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a 
{
color:white;
padding:12px 16px;
text-decoration:none;
display:block;
text-align:left;
}

.dropdown-content a:hover 
{
background-color: red;
}

.dropdown:hover .dropdown-content 
{
display: block;
}








/* input */
input
{
padding:9px;
border-radius:5px;
border:2px solid black;
}

select
{
padding:9px;
border-radius:5px;
border:2px solid black;
}

textarea
{
padding:9px;
border-radius:5px;
border:2px solid black;
}

input[type=radio]
{

height:2em;
}




/* text */
.w
{
color:white;
}

.poppins2
{
font-family:Poppins;
font-weight:700;
font-size:2vw;
}

.detail
{
color:grey;
font-size:0.8vw;
}
@media screen and (max-width:600px) 
{
.detail
{
font-size:4vw;
}
}



/* buttons */
.blackbutton
{
display:inline-block;
background:black;
color:white;
padding:9px;
}

.redbutton
{
display:inline-block;
background:red;
color:white;
padding:9px;
}