/* Project: BritishGuardianship -- Author: StudyFirst Group -- Author URL: https://studyfirstgroup.com */

body { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-style: normal; color: #252525; background-color: #faf9f6 !important; }
h1, .fs-h1 { font-size: 3.052rem; }
h2, .fs-h2 { font-size: 2.441rem; }
h3, .fs-h3 { font-size: 3.052rem; }
h4, .fs-h4 { font-size: 1.563rem; }
h5, .fs-h5 { font-size: 1.25rem; } 
h6, .fs-h6 { font-size: 1.15rem; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; font-family: "Exo", sans-serif;}
p { font-size: 1rem; }
.fs-xs { font-size: 0.75rem; }

.bg-bgsdark { background-color: #202744; }
.bg-bgsgrey { background-color: #eeeeee; }
.bg-bgsblue { background-color: #46c8f5; }
.bg-bgswhite { background-color: #faf9f6; }
.txt-bgsdark { color: #202744; }
.txt-bgsgrey { color: #eeeeee; }
.txt-bgsblue { color: #46c8f5; }
.brt-50 { border-top-left-radius: 50px; border-top-right-radius: 50px; }
.brb-50 { border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; }
.br-50 { border-radius: 50px }
.br-25 { border-radius: 25px }
.br-12 { border-radius: 12.5px }
.mt-6 { margin-top: 3.5rem !important; }

/* Universal Buttons */

.btn-md-blue { height: 40px; line-height: 40px; padding: 0 24px; font-family: "Exo", sans-serif; font-weight: 700; color: #faf9f6; border: 0; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 0.9rem !important; background-color: #46c8f5; transition: background-color 0.3s ease}
.btn-md-blue:hover, .btn-md-blue:focus, .btn-md-blue:active { background-color: #202744; color: #faf9f6; }
.btn-md-dark { height: 40px; line-height: 40px; padding: 0 24px; font-family: "Exo", sans-serif; font-weight: 700; color: #faf9f6; border: 0; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 0.9rem !important; background-color: #202744; transition: background-color 0.3s ease}
.btn-md-dark:hover, .btn-md-dark:focus, .btn-md-dark:active { background-color: #46c8f5; color: #faf9f6; }

/* Header & Menu */
header { position: relative; }
.btn {  }
.btn-apply-container { z-index: 5; position: fixed; top: 20px; right: 20px; }
.btn-apply { border: 0; padding: 12px 22px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 1.15rem !important; color: #faf9f6; background-color: #46c8f5; box-shadow: rgba(0,0,0,0.1) 0px 4px 12px; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.btn-apply:hover, .btn-apply:focus, .btn-apply:active { background-color: #202744; box-shadow: none; color: #faf9f6; }
.bgs-header { position: fixed; top: 0; left: 0; right: 0; min-height: 70px; padding: 10px 0; display: block; z-index: 20; }
.bgs-header .dropdown-menu { border: 0; border-radius: 25px; box-shadow: rgba(0,0,0,0.1) 0px 4px 12px; overflow: hidden; background-color: #faf9f6; }.bgs-buttons { gap: 10px; }
.bgs-menu-wrap { position: fixed; top: 90px; left: 0; right: 0; z-index: 10; }
.bgs-menu { background-color: #faf9f6; border-radius: 50px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; height: 70px; display: flex; align-items: center; justify-content: space-between; }
.bgs-menu nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; gap: 50px; }
.bgs-menu nav ul li { font-weight: 700; }
.bgs-menu nav ul li a { text-decoration: none; font-family: "Exo", sans-serif; font-weight: 700; color: #202744; }
.bgs-search input { height: 40px; font-size: 0.8rem; border: 1px solid #ddd; border-radius: 50px; padding: 6px 16px; outline: none; width: 250px; }
.bgs-logo img { display: block; width: auto; max-height: 50px;}
.btn-dropdown { text-align: center; margin-left: 5px; height: 40px; width: 40px; padding: 5px; border-radius: 50px; border: 0; background-color: #faf9f6; align-items: center; }
.btn-dropdown img { border-radius: 50%; object-fit: cover; }
.dropdown-menu .dropdown-item img { border-radius: 50%; object-fit: cover; }
.dropdown-item { font-size: 0.75rem; }
.bgs-nav-compact ul { list-style: none; margin: 0; padding: 0; }
.bgs-nav-compact ul li a { font-family: "Exo", sans-serif; font-weight: 700; color: #202744; text-decoration: none; }
.bgs-burger { color: #202744; vertical-align: middle; width: 25px; height: 20px; border: 0; background: transparent; display: inline-flex; flex-direction: column; justify-content: space-between; cursor: pointer; }
.bgs-burger span { display: block; height: 3px; width: 100%; background-color: #202744; border-radius: 3px; }
.bgs-offcanvas { width: 300px; }
.bgs-offcanvas-nav { list-style: none; margin: 0; padding: 0; }
.bgs-offcanvas-nav li a { display: block; padding: 12px 0; font-family: "Exo", sans-serif; font-weight: 700; color: #202744; text-decoration: none; border-bottom: 1px solid #eee; }
/* Mega Menu (desktop pill only) */
.bgs-menu nav { height: 100%; }
.bgs-menu nav > ul { height: 100%; align-items: center; }
.bgs-menu nav > ul > li { height: 100%; display: flex; align-items: center; position: relative; }
.bgs-has-dropdown > a { display: inline-flex; align-items: center; gap: 7px; }
.bgs-has-dropdown > a::after { content: ""; width: 5px; height: 5px; border-right: 1px solid #202744; border-bottom: 1px solid #202744; transform: rotate(45deg); margin-top: -4px; transition: transform 0.2s ease; }
.bgs-has-dropdown:hover > a::after, .bgs-has-dropdown:focus-within > a::after { transform: rotate(-135deg); margin-top: 2px; }
.bgs-dropdown { position: absolute; top: 100%; left: 0; padding-top: 16px; z-index: 30; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; }
.bgs-dropdown.bgs-dropdown-end { left: auto; right: 0; }
.bgs-has-dropdown:hover > .bgs-dropdown, .bgs-has-dropdown:focus-within > .bgs-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.bgs-dropdown-inner { display: flex; gap: 40px; background-color: #faf9f6; border-radius: 25px; box-shadow: rgba(0,0,0,0.1) 0px 4px 12px; padding: 24px 28px; }
.bgs-dropdown .bgs-dd-col { min-width: 210px; }
.bgs-dropdown .bgs-dd-title { display: block; font-family: "Exo", sans-serif !important; font-weight: 700 !important; font-size: 1rem !important; color: #46c8f5;margin-top: 0 !important;padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid #eee; text-decoration: none; }
.bgs-dropdown .bgs-dd-col ul { list-style: none; margin: 0; padding: 0; display: block; gap: 0; }
.bgs-dropdown .bgs-dd-col a { display: block; font-family: "Inter", sans-serif; font-weight: 500; font-size: 0.9rem; color: #202744; text-decoration: none; padding: 7px 0; white-space: nowrap; transition: color 0.2s ease; }
.bgs-dropdown .bgs-dd-col a:hover { color: #46c8f5; }

/* Main */
main { position: relative; }
.hero { margin-top: 160px; } 

/* Footer */
.footer-mark { display:inline-block; width: 40px; height: 40px; }
.footer-type { display:inline-block; height: 40px;}
footer h6 { color: #202744; }
footer ul { list-style-type: none; margin: 0; padding: 0; }
footer ul li { line-height: 30px; font-weight: 700; }
footer ul li a { font-size: 0.75rem; color: #202744; text-decoration: none; border-bottom: 2px solid rgba(70, 200, 245, 0); transition: border 300ms;}
footer ul li a:hover { color: #46c8f5; border-bottom: 2px solid rgba(70, 200, 245, 1); } 
.socials img { width: 30px; height: 30px; }
.copyright { color: #faf9f6; }
.copyright p { text-align: center; margin-bottom: 0; font-size: 0.75rem; }
.copyright a { color: #faf9f6; text-decoration: none; font-weight: 700; }
.scrolltotop { cursor: pointer; z-index: 10; height: 52px !important; width: 52px !important; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; border-radius: 25px; }
.scrolltotop img { height: 52px !important; width: 52px !important; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }
#scrolltotop { position: fixed; bottom: 20px; right: 20px; display: none; }
.wa { z-index: 10 !important; position: fixed; left: 20px; bottom: 20px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; border-radius: 25px; }
.wa img { width: 200px; height: 52px; }
.wa-animation { animation: wa-animation 4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; will-change: transform; }
	@keyframes wa-animation {
		0%      { transform: translateY(0); }
		4.5%    { transform: translateY(-22px); } /* snap up 1 (high + fast) */
		9%      { transform: translateY(0); }     /* hard drop 1 */
		14%     { transform: translateY(-12px); } /* snap up 2 (smaller) */
		19%     { transform: translateY(0); }     /* hard drop 2 */
		22%     { transform: translateY(-4px); }  /* tiny micro-hop */
		25%     { transform: translateY(0); }     /* settle */
		100%    { transform: translateY(0); }
	}
.mark-animation { animation: mark-animation 20s linear infinite; }
	@keyframes mark-animation {
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

/* Responsive Views */
@media (max-width: 575.9999px) /* XS */ { 
	.bgs-offcanvas { width: 100%; }
	.bgs-buttons { justify-content: flex-start; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
	.bgs-header { height: auto !important; padding-bottom: 12px; margin: 0 auto;} 
	.bgs-burger { }
	.brt-50 { border-top-left-radius: 25px; border-top-right-radius: 25px; }
	.brb-50 { border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; }
	.bgs-floatbuttons { float: left; }
	.bgs-floatburger { float: right; }
}

@media (min-width: 576px) and (max-width: 767.9999px) /* SM */{ 
	.bgs-floatbuttons { float: left; }
	.bgs-floatburger { float: right; }
	.bgs-buttons { justify-content: flex-start; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
	
}

@media (min-width: 768px) and (max-width: 991.9999px) /* MD */{ 
	.bgs-menu nav ul { gap: 13px !important; }
	.bgs-floatbuttons .btn-md-blue, .bgs-floatbuttons .btn-md-dark { padding: 0 16px; }
	.bgs-has-dropdown > a::after { margin-left: -3px !important; }
	.bgs-dropdown-wide { left: -90px; }
	.bgs-dropdown-inner { gap: 30px; }
	.bgs-dropdown .bgs-dd-col { min-width: 190px !important; max-width: 190px !important; }
	.bgs-dropdown .bgs-dd-col a { white-space: normal !important; }
}
	
@media (min-width: 992px) and (max-width: 1199.9999px) /* LG */{ 
	.bgs-menu nav ul { gap: 25px !important; }
	.bgs-search input { width: 150px; }
}

@media (min-width: 1200px) and (max-width: 1399.9999px) /* XL */{  
	.bgs-search input { width: 180px; }
}

@media (min-width: 1400px) /* XXL */{ 
	.bgs-floatbuttons .bgs-buttons { float: right; }
}