/*

1. Logo



 */
@import url("bootstrap.css");
@import url("custom-style.css");

/****** Header *****/

.header{
	display: block;
	width: 100%;
	position: relative;
	z-index: 99;
	padding: 100px 00px;
    transition: all .3s ease;
     background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url(../images/about-me-banner1920.webp);
        background-position-x: center;
        background-position-y: -460px;
}
.header .logo{
	text-align: center;
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 80px;
}

.header-content {
	color: var(--black);
	text-align: center;
	max-width: 800px;
	margin: auto;
}
.header-content p {
	color: var(--black);
	text-align: center;
	
}
.header-btn  {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
}

@media screen and (max-width: 991px) {
  .header{
        background-position: center center;
        background-size: cover;
	padding: 50px 0;
}
  .header-item .logo {padding-top: 10px;}
  .header-item .logo img {max-width: 180px;}

}


section {
  padding: 50px 0;
  display: block;
  border-bottom: 0px solid var(--gray-light);
}


[class*='bg-img-'] {
	background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("../images/bg/bg-1.jpg") center center fixed no-repeat;
	width: 100%;
	padding: 70px 50px;
	background-size: cover;
}

[class*='bg-img-'] * {
	color: var(--white);
}

.bg-img-1  {background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("../images/bg/bg-1.jpg") center top fixed no-repeat; background-size: cover;}
.bg-img-2  {background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("../images/bg/bg-2.jpg") center top fixed no-repeat; background-size: cover;}
.bg-img-3  {background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("../images/bg/bg-3.jpg") center top fixed no-repeat; background-size: cover;}
.bg-img-4  {background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("../images/bg/bg-4.jpg") center top fixed no-repeat; background-size: cover;}
.bg-img-5  {background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("../images/bg/bg-5.jpg") center top fixed no-repeat; background-size: cover;}
.bg-img-6  {background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("../images/bg/bg-6.jpg") center top fixed no-repeat; background-size: cover;}
.bg-img-7  {background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("../images/bg/bg-7.jpg") center top fixed no-repeat; background-size: cover;}
.bg-img-8  {background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("../images/bg/bg-8.jpg") center top fixed no-repeat; background-size: cover;}
.bg-img-9  {background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("../images/bg/bg-9.jpg") center top fixed no-repeat; background-size: cover;}
.bg-img-10 {background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("../images/bg/bg-10.jpg") center top fixed no-repeat; background-size: cover;}
.bg-img-11 {background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("../images/bg/bg-11.jpg") center top fixed no-repeat; background-size: cover;}

/*********** Content Top ***********/

.content-top {
    display: flex;
    flex-flow: column;
}
.content-top .content-top-text {
	padding: 50px 0;
}

.theme-btn {
    text-decoration: none;
    font-size: 18px;
    color: var(--black);
    display: inline-block;
    transition: color 0.3s ease;
    border-radius: 10px;
    padding: 10px 20px;
    border: 2px solid var(--gray-dark-2);
    height: 50px;
    margin-top: 10px;
	font-weight: 600;
}
.theme-btn:hover {
    color: var(--white);
	background: var(--gray-dark-2);
	text-decoration: none;
}


.social-media {
    margin-top: 0px;
    text-align: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.social-media p{
	margin-bottom: 5px;
}

.social-media ul {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 0;
	padding: 0;
}

.social-media li {
	margin: 5px;
	list-style-type: none;
}

.social-media li a{
	padding: 5px;
	background: var(--white);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--black);
	font-size: 18px;
	transition: all .3s ease;
	text-decoration: none;
}


.social-media li a:hover{
	background: var(--gray-dark-4);
	color: var(--white);
}

/*********** In The News ***********/

.box-rounded {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	grid-gap: 20px;
    margin: 30px 0 0;
}

@media screen and (max-width: 480px) {
	.box-rounded {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		grid-gap: 20px;
	}
}
.box-rounded > div {
	border: 1px solid var(--gray);
    background: #FFFFFF;
    padding: 15px;
    border-radius: 10px;
    transition: all .3s ease;
	text-align: center;
	box-shadow: 00px 08px 08px -08px rgba(0,0,0,.5);
}

.box-rounded > div h3, .box-rounded > div h2 {
    background: var(--bg-red-3);
    margin: -13px -13px 15px -13px;
    border-radius: 8px 8px 0 0;
    display: block;
    padding: 15px 20px;
    text-align: center;
    color: #FFFFFF !important;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-rounded > div p {
	color: #000000 !important;
	text-align: center;
}

.box-rounded > div ul li {
    padding: 0 0 8px 30px !important;
    margin: 0 !important;
   list-style-type: none;
  position: relative;
}
.box-rounded > div ul li:before {
    content: "\f00c";
    padding: 00px 00px 00px 10px;
		list-style-type: none;
		position: absolute;
		left: -10px !important;
		top: 00px;
		z-index: 9;
		font-family: 'FontAwesome';
		font-size: 15px;
		color: #000000;
}

/*********** Footer ***********/

#footer {
	background: var(--gray-2);
	padding: 50px 0px;
	color: var(--black);
	text-align: center;
}


#footer .footer-logo {
	margin-bottom: 50px;
}

#footer p {
	font-size: 15px;
	margin: 0;
}

#footer h3 {
	font-size: 22px;
	padding-bottom: 0px;
}

#footer h4 {
	margin-bottom: 10px;
}


#footer .copyright {
	/* border-top: 1px dashed var(--white);
	margin-top: 20px; */
	padding: 20px 00px;
}
#footer .copyright p {
	text-align: center;
}
#footer .copyright a {
	color: var(--black);
}
#footer .copyright a:hover {
	text-decoration: underline;
}




/********* Back to Top *********/

#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background: var(--blue);
    display:flex;
	justify-content: center;
	align-items: center;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
	color: var(--white);
	text-decoration: none;
}

#scroll:hover {
    background: var(--red);
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}