@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

* {
	font-family: Poppins;
	scroll-behavior: smooth;
}

.navbar-nav li a {
	position: relative;
}

.navbar-nav li a:after {
	content: '';
	height: 2px;
	width: 0;
	position: absolute;
	left: 0;
	bottom: 8px;
	transition: 0.5s;
}
.navbar-nav li a:hover:after {
	width: 100%;
	background-color: #264699;
}

@media (max-width: 400px) {
	.sec-1 {
		margin-top: -30px;
	}		
}

.sec-1 h3 {
	font-size: 43px;
	font-weight: 700;
	color: #000000;
}
@media (max-width: 400px) {
	.sec-1 h3 {
		font-size: 32px;
	}
}

.sec-1 h1 {
	font-size: 46px;
	font-weight: 700;
	color: #0039A8;
}
@media (max-width: 400px) {
	.sec-1 h1 {
		font-size: 35px; 
	}

}

.sec-1 p {
	font-size: 20px;
	font-weight: 500;
}
@media (max-width: 400px) {
	.sec-1 p {
		font-size: 16px;
	}
}

.sec-1 .btn1 {
	font-weight: 600;
	color: white;
	background-color: #264699;
	border-radius: 50px;
	transition: 0.3s;
}
.sec-1 .btn1:hover {
	background-color: #132963;
}
@media (max-width: 576px) {
	.sec-1 .btn1 {
		width: 100%;
	}
}
@media (max-width: 400px) {
	.sec-1 .btn1 {
		width: 100%;
		font-size: 15px;
		padding: 8px;
		margin-top: 18px;
	}
}

.sec-1 .btn2 {
	color: #264699;
	font-weight: 600;
	background-color: white;
	border-radius: 50px;
	border-color: #264699;
	border-width: 2px;
	transition: 0.3s;
}
.sec-1 .btn2:hover {
	color: white;
	background-color: #132963;
	border-color: #132963;
}
@media (max-width: 576px) {
	.sec-1 .btn2 {
		width: 100%;
		margin-top: 9px;
	}
}
@media (max-width: 400px) {
	.sec-1 .btn2 {
		width: 100%;
		font-size: 15px;
		padding: 8px;
		margin-top: 9px;
	}
}





/*style sec-2*/
.sec-2 {
	background-color: #E0EBFF;
}

.sec-2 h3 {
	font-size: 22px;
}
@media (max-width: 400px) {
	.sec-2 h3 {
		font-size: 18px;
	}
}

.sec-2 hr {
	width: 60px;
	padding-top: 1px;
	background-color: #006BB9;
	color: #006BB9;
}
@media (max-width: 400px) {
	.sec-2 hr {
		width: 40px;
	}
}

.sec-2 .col-lg-6 img {
	width: 450px;
	transition: 0.5s;

}

.sec-2 .col-lg-6 img:hover {
	transform: translateY(-20px);
}
.sec-2 .col-lg-6 .card{
	background-color: #C4C4C4;
}

.sec-2 .parafsm {
	color: black;
	font-weight: 500;
	text-decoration: underline;
}
.sec-2 .parafsm:hover {
	font-weight: 700;
}

/*style sec-3*/
@media (max-width: 400px) {
	.sec-3 {
		background-image: unset !important;
	}
}

.sec-3 h3 {
	font-size: 22px;
}
@media (max-width: 400px) {
	.sec-3 h3 {
		font-size: 18px;
	}
}

.sec-3 hr {
	width: 60px;
	padding-top: 1px;
	background-color: #006BB9;
	color: #006BB9;
}
@media (max-width: 400px) {
	.sec-3 hr {
		width: 40px;
	}
}

.sec-3 h5 {
	font-size: 18px;
}
.sec-3 .paraf1 {
	font-weight: 500;
}
.sec-3 .paraf2 {
	font-weight: 500;
}

.sec-3 .btn-cv {
	background-color: #284CA7;
	color: white;
}

@media (max-width: 400px) {
	.sosialmedia .iconsosmed {
		width: 25px;
	}
}

/*style sec-4*/
.sec-4 h3 {
	font-size: 22px;
}
@media (max-width: 400px) {
	.sec-4 h3 {
		font-size: 18px;
	}
}

.sec-4 hr {
	width: 60px;
	padding-top: 1px;
	background-color: #006BB9;
	color: #006BB9;
}
@media (max-width: 400px) {
	.sec-4 hr {
		width: 40px;
	}
}

.sec-4 .card {
	border-radius: 15px;
	border-width: 1px;
	border-color: grey;
	transition: transform 0.5s;
}
.sec-4 .card:hover {
	cursor:pointer;
	transform: translateY(-10px);
}

.sec-4 h4 {
	font-size: 20px;
}

.sec-4 p {
	font-weight: 500;
	font-size: 15px;
}

/*style footer */
footer {
	background-color: #001623;
}

footer h4 {
	font-size: 16px;
}

footer ul li {
	font-size: 14px;
}

.footer .copyright {
	font-size: 13px;
	margin-top: 15px;
	margin-bottom: 1px;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
   /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  /* Some padding */
  border-radius: 50%; /* Rounded corners */
  font-size: 30px; /* Increase font size */
}

#myBtn:hover {
 /* Add a dark-grey background on hover */
}