*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;


}
:root{
    --main-color:#4834d4;
    --red:#e74c3c;
    --orange:#f39c12;
    --black:#34495e;
    --white:#fff;
    --light-bg:#f5f5f5;
    --light-color:#999;
    --border:.2rem solid var(--black);
    --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
 }
 

.topbar{background: #2b97a2; color: white;
padding: 20px 0;
display: flex;
justify-content: center;
align-items: center;

}

.flex{display: flex; align-items: center; }

.flex h3{font-size: 16px;}

.topbar input{

padding: 10px;

}

.topbar input{margin:0 5px;}

.button{background: black; color: white;
padding: 5px 80px;
border:0;
border-radius:8px;
animation:.5s infinite pop;
}

@keyframes pop{
    
0%{transform:scale(1)}    
    50%{transform:scale(1.1)}
    100%{transform:scale(1)}
}



.header{padding: 20px; display: flex; justify-content: space-between;}

.leftside{display: flex; align-items: center; }

.call{margin-left: 15px;}
.rightside ul li{display: inline-block; padding: 5px 15px;}

.rightside ul li a{text-decoration: none; color: black;}

.banner{display: flex;}
.caption{width: 50%; padding: 20px;}
.bannerimg{width: 50%; padding: 20px;}

.bannerimg img{width: 100%;}

.caption span{color: #2b97a2;}

.caption p {font-size: 30px; font-weight: 100;}

.caption h1{font-size: 50px;}

.buttons{display: flex;}
.btn{padding: 12px; background: #8cbe3f; margin: 15px 5px;
border-radius: 8px; color: aliceblue; font-weight: bolder;
}
.cyan{background: #2b97a2;;}
section{padding: 40px 0;}

.sidebar{width:200px; height:65px; background: #2b97a2; text-align:center; transform:rotate(-90deg);
color:white;
line-height:45px; position:fixed; top:300px !important; right:-90px; }

.article h2{text-align: center; font-size: 43px;}
.article p{text-align: center;  margin-bottom:40px;}


.article2{width:100%;  display:flex;  flex-wrap:wrap; justify-content:center;}

.card{width:30%;  min-height:320px; margin:10px;  text-align:center;  padding-bottom: 20px; background: rgba(236, 236, 236, 0.425);}

.card img{width:100%; height: 300px;}

section {
    padding: 2rem;
    margin: 0 auto;
    max-width: 1200px;
}


.box-container .box {
    border: var(--border);
    box-shadow: var(--box-shadow);
    border-radius: 0.5rem;
    background-color: var(--white);
    padding: 2rem;
    overflow: hidden;
}


.read-more-btn {
    background: linear-gradient(to right, #3a3a3a, #2f2f2f);
    padding: 10px 30px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    display: inline-block;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0px 8px 15px rgba(0,0,0,0.1);
}
.read-more-btn:hover {
    background: linear-gradient(to right, #2f2f2f, #3a3a3a);
    transform: translateY(-2px);
}

.read-more-btn:nth-of-type(1) {
	background-color: #ffb400;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}
.read-more-btn:nth-of-type(2) {
	background-color: #7dbaff;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}
.read-more-btn:nth-of-type(3) {
	background-color: #ff6a00;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}

.post-title, .post-content{padding: 10px 0;}