html{
font-size: 62.5%;
}
*{
padding : 0;
margin : 0;
box-sizing: border-box;
}
header{
background-color : goldenrod;
}
.welcomeimages{
/* max-width: 980px; */
width : 98%;
margin : auto;
}
.welcomeimages img{
margin : 0 auto;
max-width : 70vh;
}
.navlist{
list-style : none;
}
a{
color : white;
text-decoration: none;
}
.navbar{
min-height: 70px;
display: flex;
justify-content: space-between;
align-items : center;
padding : 0 24px;
}
.site-name{
font-size : 2.3rem;
color : white;
font-weight: 700;
}
.nav-menu{
display : flex;
justify-content : space-between;
align-items : center;
gap : 40px;
}
.nav-link{
transition: 0.7s ease;
font-size : 1.5rem;
}
.nav-link:hover{
color: dodgerblue;
}
.hamburger{
display: none;
cursor: pointer;
}
.bar{
display : block;
width : 25px;
height : 3px;
margin : 5px auto;
--webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: white;
}
/* Main Content */
.container{
width :100%;
max-width : 980px;
padding :0;
/* border : solid red; */
}
img{
/* max-width : 100%; */
margin-top : 0;
width : 100%;
margin :0;
}
/* END */
.columns{
display : flex;
margin: 1em 0;
align-items: flex-start;
padding : 1em;
/* border : solid brown; */
width : 100%;
}
.col1{
width : 90%;
justify-content: space-between;
/* margin : 0 auto; */
padding : 2rem;
}
.col2{
width : 15%;
justify-content: space-between;
margin : 0 auto;
}
.bg-color{
background-color: greenyellow;
margin : 0;
padding : 2rem;
}
.bg-color-blue{
background-color: #fff5ee;
margin : 0;
padding : 2rem
}
.white{
background-color: #f5f5f5;
margin : 0;
padding : 2rem;
}
.h1welmgs{
font-size: 3rem;
color: black;
margin-bottom : 1em;
}
.h3forallmainContent{
font-size: 2rem;
margin-top : 1.5em;
}
.allparagraph{
font-size : 2rem;
line-height: 2rem;
}
.col2{
width : 45%;
/* border : solid purple; */
margin-left : 3rem;
margin-right : 3rem
}
.footer-section{
width : 100%;
background-color : goldenrod;
padding : 1rem;
}
.footer-list{
display : flex;
font-weight: 700;
}
/* Footer Design */
.footer-item{
padding : 2rem;
list-style: none;
font-size : 1.5rem;
margin-right : 1.5rem;
/* color : #fff; */
}
/* End of Content Area */
@media(max-width: 768px){
.hamburger{
display: block;
}
.hamburger.acive .bar:nth-child(2){
opacity: 0;
}
.hamburger.acive .bar:nth-child(1){
transform:translateY(8px) rotate(45deg);
}
.hamburger.acive .bar:nth-child(3){
transform:translateY(-8px) rotate(-45deg);
}
.nav-menu{
position : fixed;
left: -100%;
top : 70px;
gap : 0;
flex-direction : columns;
width: 100%;
background-color : goldenrod;
text-align: center;
transition: 0.3s;
}
.nav-item{
margin: 16px 0;
}
.nav-menu.active{
left: 0;
display : block;
}
}