/*Mobile first*/
/* import google fonts */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,700&family=Inter&display=swap");

:root {
	/* Set up the basic color and font styles */
	/* Colors: */
	--primary: #084298;
	--accent-green: #e22121;
	--body-text-color: #000000;
	--headling-text-color: #031633;
	--link-hover: #194c99;
	--bg: white;
	--surface: #dee5ed;

	/* Font/text values */

	/*    font-family, find the values from google fonts website*/
	--headings-font-family: "DM Sans", sans-serif;
	--body-font-family: "Inter", sans-serif;
	--link-font: "DM Sans", sans-serif;
	--button-font: "DM Sans", sans-serif;

	/* font-weight: ; */
	--headline-font-weight: 700;
	--body-font-weight: 400;
	--link-font-weight: 400;
	--button-font-weight: 400;
}

html {
	font-size: 16px;
}

body {
	background-color:var(--bg) ;
	font-family:var(--body-font-family);
	font-weight:var(--body-font-weight) ;
	/*  Convert px to rem:  1rem = 16px*/
	font-size: 1.32rem;
	/*    line-height is 130%- 150% of the font size*/
	line-height: 1.7;
	color: var(--body-text-color);
}

p {
	font-size: 1.2rem;
	margin-bottom: 1.3rem;
}

/*this is a group selection, selecting all the headlines h1-h4 and set a standard style*/
h1,h2,h3,h4 {
	color: var(--headling-text-color);
	/*    font-family*/
	font-family: var(--headings-font-family);
	/*    font-weight*/
	font-weight: var(--headline-font-weight);
	line-height: 1.3;
}

/*Set a unique style to a specific tag element*/
h1 {
	margin-top: 1rem;
	font-size: 3rem;
}

h2 {
	margin-top: 0;
	font-size: 2.25rem;
    margin-bottom: 2rem;
}

h3 {
	font-size: 1.777rem;
}

h4 {
	margin-top: 2rem;
	font-size: 1.333rem;
}

/*Interactive elements*/

/* link*/

a {
	font-family: var(--link-font);
	font-weight: var(--link-font-weight);
	color: var(--primary);
}

a:hover {
	color: var(--link-hover);
	/*    text-decoration: none;*/
}

/*button style*/
/*solid button style*/
.btn-primary {
	font-family: var(--button-font);
	font-size: 1rem;
	letter-spacing: 0.1rem;
	line-height: 1.5;
	/*    border-radius*/
	border-radius: 200px;
	/*    top:0.75 right:1.25 bottom:0.75 left:1.25*/
	/*    the size of button*/
	padding: 0.75rem 1.25rem;
	background-color: var(--primary);
	color: white;
	border: none;
	margin-top: 1rem;
	transition: all 0.5s;
}

.btn-primary:hover {
	color: white;
	background-color: var(--link-hover);
	opacity: 0.8;
}

/*outline button style*/
.btn-outline-primary {
	font-family: var(--button-font);
	font-size: 1rem;
	letter-spacing: 0.1rem;
	line-height: 1.375rem;
	/*    border-radius*/
	border-radius: 200px;
	padding: 0.75rem 1.25rem;
	margin-top: 1rem;
	color: var(--primary);
	background-color: transparent;
	border: 1px var(--primary) solid;
	transition: all 0.5s;
}

.btn-outline-primary:hover {
	color: var(--bg);
	background-color: var(--link-hover);
	border-color: var(--primary);
}

/* custom class */
/*home page*/
.header .btn {
	width: 100%;
}
.header {
	background: none;
	height: auto;
}

.logos{margin-top: 2rem;}
.logo p{margin-bottom: 0rem;}
.logos img {
	display: inline-block;
	margin-right: 0.5rem;
}

.thumbs{margin-bottom: 2rem;}
.proximity .thumbs{text-align: center;}
.proximity .thumbs img{
    /* width:100%;
    margin-right: 0;
    margin-bottom: 1rem; */

}


/*about page*/

/*screen that is larger than the mobile view, Large Screen*/
@media only screen and (min-width: 480px) {
	h1 {
		/* margin-top: 0; */
		font-size: 3.75rem;
	}
	
	.header .btn {
		width: auto;
	}

	/* background setting */
 .header{background:transparent url(../img/background.jpg) center center no-repeat;
	height: 100vh;
}
    .proximity .thumbs{text-align: left;}

    .proximity .thumbs img{
        width:auto;
        margin-right: 1rem;
    }
}