* {
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: auto;
  /* font-family: sans-serif; */
}

textarea {
  width: 100%;
  vertical-align: top;
  overflow: auto;
}

input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], textarea {
  padding: 1rem;
  font-family: lato,sans-serif;
  color: #333;
  border: 1px solid #ccc;
}

button, input[type=button], input[type=reset], input[type=submit] {
  padding: 1em 2em;
  font-size: 16px;
  font-size: 1rem;
  font-family: lato;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  background: #3c3c3c;
  background: #3d3d3d;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  -webkit-appearance: button;
}


.site-content{
  width: 70%;
  margin: auto;
}

.container, .container-2, .container-3, .container-4 {    
  display: flex;
  /* flex-wrap: wrap; */
  width: 100%;
  gap: 5px;
  margin: auto;
}

.container-2 { 
  margin-top: 2em;
  /* flex-direction: column;  */
}
  
.container-3, .container-4 { flex-wrap: wrap; height: 45vh; }
.container-3 .title, .container-4 .title { margin-left: 0.3em; width: 99%; margin-top: 1.5em; }

.column { padding: 5px; }
.column0 { 
  display: flex;
  flex: 1 1 30%; 
}

.column1, .column2 { 
  flex: 1 1 33%; 
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.column3, .column4, .column5 {
  display: flex;
  flex: 1 1 33%; 
  flex-direction: column;
  gap: 10px;
}

.column6, .column7 { 
  display: flex;
  justify-content: space-between;
  margin: auto;
  gap: 10px;
}

.column6 h3, .column7 h3 { font-size: 1.1em; margin-top: 0.5em; }

.card-inner-0 {
  display: flex;
  gap: 0px;
  flex-direction: column;
}

/* .card-inner-6 { width: 50%; } */

/* .card-inner-0 .content-image { width: 100%; }  */
.card-inner-0 .card-content {
  /* width: 100%; */
  margin-top: 0.5rem;
}

.card-inner-0 .card-content h3 { font-size: 1.2rem; } 
.card-inner-0 .card-content p { margin-top: -0.5rem; }

.card-inner-0 img {
  height: 100%;
  width: 100%; 
  object-fit: cover;
  border-radius: 4px; 
}

.card-inner-1, .card-inner-2, .card-inner-3, .card-inner-4, .card-inner-5 {
  display: flex;
  gap: 10px;
  background: white;
  border-radius: 8px;
  /* overflow: hidden; */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  height: 12vh;
}
.card-inner-1 img, .card-inner-2 img, 
.card-inner-3 img, .card-inner-4 img, 
.card-inner-5 img, .card-inner-6 img,
.card-inner-7 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.card-inner-1 .content-image, .card-inner-2 .content-image,
.card-inner-3 .content-image, .card-inner-4 .content-image,
.card-inner-5 .content-image { width: 40%; }

.card-inner-1 .card-content, .card-inner-2 .card-content,
.card-inner-3 .card-content, .card-inner-4 .card-content,
.card-inner-5 .card-content { 
  width: 60%; 
  white-space: normal;
  word-break: break-word;
  /* overflow-wrap: break-word; WORD BREK SE THODA ALAG H */ }

.card-content h3 { font-size: 1rem; }

.card-inner-6, .card-inner-7 { width: 50%; }
.card-inner-6 .content-image, .card-inner-7 .content-image { height: 37%; }
.card-inner-6 h3, .card-inner-7 h3 { font-size: 1.2rem; }

.title {
  border-bottom: 1.5px solid rgb(211, 184, 184);
  margin-bottom: 0rem;
}
.title h2 { margin-bottom: 1rem; }

.webstories {
  background: #7d5d5d;
  border-radius: 8px;
  margin: 2em 0;
}

.webstories .column7 {
  width: 99%;
  margin-bottom: 1.3em;
}




/* footer */
/* .copyright {
text-align: center;
color: #999;
padding-top: 50px;
} */

/* .social-links {
  margin-top: 1em;
} */




/* ======footer======= */