/***************************** Initialise *****************************/
/* https://www.joshwcomeau.com/css/custom-css-reset/ */
*, *::before, *::after {box-sizing: border-box;}
* {margin: 0;}

:root {
    --white-color:#FFFFFF;      /* Main background */
    --dkblu-color:#1D469A;      /* Dark blue from logo text */
    --gnblu-color:#378993;      /* Menu green/blue */
    --mdblu-color:#355DAB;      /* Text blue */
    --ltgrn-color:#DDEFBC;      /* Light green background */
    --dkgrn-color:#369281;      /* Text green */
    --ltblu-color:#D8E6F1;      /* Light blue background */ }
.clr-white {color:var(--white-color);}
.bdr-white {border:solid var(--white-color);}
.bdr-gnblu {border:solid var(--gnblu-color);}

body {display:grid; place-content:center; grid-template-columns:1fr; place-items:center; margin:0; padding:0; color:var(--mdblu-color); background-color:var(--white-color); font-family:"Raleway", sans-serif; font-style:normal; line-height:2; -webkit-font-smoothing: antialiased;}
img, picture, video, canvas, svg {display:block; max-width:100%;}
input, button, textarea, select {font:inherit;}
p, h1, h2, h3, h4, h5, h6 {overflow-wrap:break-word;}
a {color:var(--mdblu-color);}
#root, #__next {isolation:isolate;}

.flwdthshad {-webkit-box-shadow:0px; -moz-box-shadow:0px; box-shadow:0px;}
/*.flwdthshad {-webkit-box-shadow: 0px 0px 46px -30px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 46px -30px rgba(0,0,0,0.75); box-shadow: 0px 0px 46px -30px rgba(0,0,0,0.75);}*/

.handwriting {font-family:"Courgette", cursive; font-weight:400; font-style:normal; font-size:3em;}

.material-symbols-outlined {font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}

.arrow {border-width:0 3px 3px 0; display:inline-block; padding:3px; margin:0 0 4px 8px;}
.right {transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
.left {transform:rotate(135deg); -webkit-transform:rotate(135deg);}
.up {transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
.down {transform:rotate(45deg); -webkit-transform:rotate(45deg);}

.undrln {padding-bottom:10px; border-bottom:1px dotted; border-color:var(--mdblu-color); margin-bottom:20px;}

.smllp {font-weight:normal; font-size:0.85em; margin-left:105px !important;}
/**********************************************************************/


/********************************* Top section *********************************/
section.white-flwdth {display:grid; place-content:center; grid-template-columns:1fr; place-items:center; max-width:100%; background-color:var(--white-color);}
section.topsection div.mainbox {gap:2rem;}
div#languageSwitcher {display:flex;}
div#languageSwitcher a {padding:0 0 10px 0; margin-right:10px; cursor:pointer; background-color:transparent;}
.langoff {border-bottom: 2px solid var(--white-color); transition:all .5s;}
.langon {border-bottom: 2px solid var(--ltblu-color) !important; transition:all .5s;}
div.topnav {min-width:300px; display:flex; flex-direction:column; justify-content:space-between;}
div.topnav p img {vertical-align:middle; margin-right:0px; display:inline-block;}
div.toplogo {flex-grow:8;}
div.toplogo img {max-width:400px; width:100%;}
div.langmob {display:flex; justify-content:space-between; margin-top:10px;}
div.langmob a {text-decoration:none; padding-bottom:10px; font-weight:bold;}
div.langmob a:hover {border-bottom:2px solid var(--ltblu-color);}
div.topnav ul.navul {list-style:none; padding:0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:2em;}
div.topnav ul.navul li a {text-decoration:none; color:var(--gnblu-color); font-weight:bold; font-size:1.2em; text-transform:uppercase;}
div.topnav ul.navul li a:hover {color:var(--mdblu-color); transition:all .5s;}
ul.navul li ul.navsub {display:none; list-style:none; position:absolute; z-index:100; margin:0 0 0 -10px; padding:0; margin-top:0px; -webkit-box-shadow: 5px 6px 11px -4px rgba(0,0,0,0.75); -moz-box-shadow: 5px 6px 11px -4px rgba(0,0,0,0.75); box-shadow: 5px 6px 11px -4px rgba(0,0,0,0.75);}
ul.navul li ul.navsub li {background-color:var(--white-color); padding:0 20px; margin:0px; font-size:0.80em; border-left:2px solid var(--white-color);}
ul.navul li ul.navsub li:hover {border-left:2px solid var(--gnblu-color);}
ul.navul li ul.navsub li:last-of-type {border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
ul.navul li:hover ul.navsub {display:block;}
/*ul.navul li ul.navsub li:hover::before {content:url('../images/arrow-right.png'); position:absolute; left:5px; top:5px;}*/
/*******************************************************************************/


/***************************** Menu section *****************************/
section, .mainbox {max-width:1100px; width:100%; padding:1rem 1rem; margin-top:3rem;}
section.sectnotopmarg {margin-top:0 !important;}
section.sectnotopmarg div.mainbox {margin-top:0;}
/************************************************************************/


/***************************** Home Banner section *****************************/
section.homebnr-flwdth {background-image:url('../images/bgnd01.jpg'); background-position:center center; display:grid; place-content:center; grid-template-columns:1fr; place-items:center; align-content:flex-end; max-width:100%; background-size:cover; background-repeat:no-repeat; height:500px;}
p.strapline {text-shadow: 2px 2px 2px rgba(206,89,55,0.5); line-height:150%;}
/********************************************************************************/


/************************ Insurance Page Banner section *************************/
section.insbnr-flwdth {background-position:center center; display:grid; place-content:center; grid-template-columns:1fr; place-items:center; align-content:flex-end; max-width:100%; background-size:cover; background-repeat:no-repeat; height:280px;}
section.insbnr-home {background-image:url('../images/bgnd01.jpg');}
section.insbnr-vehicle {background-image:url('../images/insbnr-vehicle.jpg');}
section.insbnr-health {background-image:url('../images/insbnr-health.jpg');}
section.insbnr-pet {background-image:url('../images/insbnr-pet.jpg');}
section.insbnr-borrower {background-image:url('../images/insbnr-borrower.jpg');}
section.insbnr-legal {background-image:url('../images/insbnr-legal.jpg');}
section.insbnr-travel {background-image:url('../images/insbnr-travel.jpg');}
section.insbnr-funeral {background-image:url('../images/insbnr-funeral.jpg');}
section.insbnr-art {background-image:url('../images/insbnr-art.jpg');}
section.insbnr-savings {background-image:url('../images/insbnr-savings.jpg');}
section.insbnr-business {background-image:url('../images/insbnr-business.jpg');}
section.insbnr-prof {background-image:url('../images/insbnr-prof.jpg');}
section.insbnr-income {background-image:url('../images/insbnr-income.jpg');}
section.insbnr-expat {background-image:url('../images/insbnr-expat.jpg');}
section.insbnr-life {background-image:url('../images/insbnr-life.jpg');}
/********************************************************************************/


/***************************** Introduction section *****************************/
section.introsect div.mainbox {margin-top:0; gap:2rem;}
div.introlgo img {max-width:200px; margin-top:0px;}
/********************************************************************************/


/***************************** Insurance Box section *****************************/
section.ltgrn-flwdth {display:grid; place-content:center; grid-template-columns:1fr; place-items:center; max-width:100%; background-color:var(--ltgrn-color);}
section.insbxsect div.mainbox {gap:2rem;}
div.insboxctr {display:flex; justify-content:space-between; flex-wrap:nowrap;}
#insboxttl {text-align:center; line-height:130%;}
div.insbxs {display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;}
div.insbxs > div {color:var(--dkgrn-color); background-color:var(--white-color); padding:0.85em 1em 1em 1em; margin:0 1em 1em 0; border-radius:0.5em; box-shadow:4px 5px 25px -12px rgba(0,0,0,1); transition:box-shadow .5s; font-size:1em; cursor:pointer; text-align:center; max-width:25%; min-width:290px;}
div.insbxs div p {line-height:135%; margin-bottom:10px;}
div.insbxs div span {vertical-align:middle; margin:-6px 6px 0 0;}
div.insbox img {display:block; max-width:36px; max-height:36px; margin:0 auto;}
div.insbxs div:hover {box-shadow:2px 3px 22px -14px rgba(0,0,0,1);}
div.insbxs div span {vertical-align:middle; margin:-5px 5px 0 0;}
div.insbxs div div.cfm {background-color:var(--dkgrn-color); font-weight:bold; text-align:center; max-width:150px; margin:5px auto; border-radius:1em; padding:1px 12px 0 12px; text-transform:uppercase; font-size:0.85em; line-height:160%;}
div.insbxs div div.cfm a {color:var(--white-color); text-decoration:none; }
div.insbox h3 {display:inline-block; line-height:1.2em; margin-top:10px;}
div.insbox span {margin-bottom:2px;}

div#anyqs {flex-grow:3; text-align:center;}
div#anyqs div.git {padding:20px; margin-top:1.5em; text-align:center; text-transform:uppercase; line-height:120%; font-weight:bold; font-size:1.3em; border-radius:3em; background-color:var(--dkblu-color); cursor:pointer; max-width:250px; display:inline-block;}
div#anyqs div.git a {color:var(--white-color); text-decoration:none;}
div#anyqs div.git:hover a {color:var(--ltgrn-color) !important;}
div#anyqs div.git:hover i.bdr-white {border-color:var(--ltgrn-color) !important;}
/**********************************************************************************/


/***************************** Partners Box section *****************************/
div.partners {display:flex; flex-wrap:wrap; align-content:space-between; gap:2.5em; justify-content:center;}
div.partners div.splide div.splide__track ul.splide__list li.splide__slide div {max-width:180px; max-height:150px;}
li.splitem {display:flex; flex-wrap:wrap; gap:2em; justify-content:center;}
/*********************************************************************************/


/***************************** CEO Message section *****************************/
section.pdgsect div.mainbox {margin-top:0; gap:4rem;}
section.pdgsect div img.imgpdg {border-radius:20px;}
/*section.pdgsect div img.imgpdg {margin-top:20px; -webkit-box-shadow: 10px 10px 34px -10px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 34px -10px rgba(0,0,0,0.75); box-shadow: 10px 10px 34px -10px rgba(0,0,0,0.75);}*/
/*********************************************************************************/


/**************************** History & Broker's Role ****************************/
div.history {margin-left:-10%;}
img.historyimg {display:inline-block; margin:0 0 -5px 15px; max-height:32px;}
div.history img {max-width:250px; max-height:250px;}
h2#brokh2 {margin-top:2em;}
img.brokimg {display:inline-block; margin:0 0 0 15px; max-width:40px;}
/*********************************************************************************/


/***************************** Insurance Page styling *****************************/
div#getaq {flex-grow:3; text-align:center;}
div#getaq div#gaq {padding:20px; margin:1.5em 0 1em 0; text-align:center; text-transform:uppercase; line-height:120%; font-weight:bold; font-size:1.3em; border-radius:3em; background-color:var(--dkblu-color); cursor:pointer; display:inline-block;}
div#getaq div#gaq {color:var(--white-color); text-decoration:none; letter-spacing:1.5px;}
div#getaq div#gaq:hover {color:var(--ltgrn-color) !important;}
div#getaq div#gaq:hover i.bdr-white {border-color:var(--ltgrn-color) !important;}
img.institle-icon {display:inline-block; max-width:34px; max-height:34px; margin:0 8px -2px 0;}

/**********************************************************************************/

.legtitle {font-weight:bold; margin:25px 0 15px 0;}

/***************************** Footer section *****************************/
section.ltblu-flwdth {display:grid; place-content:center; grid-template-columns:1fr; place-items:center; max-width:100%; background-color:var(--ltblu-color);}
section.sectftr div.mainbox {padding-top:0;}
div.ftcontct {font-weight:bold; flex-grow:1; white-space:nowrap;}
div.ftcontct div img {float:left; margin:0 20px 60px 0;}
div.ftcontct p:first-of-type {font-size:1.8em; margin:0;}
div.ftcontct p {margin:5px 0;}
div.ftcontct p span {font-weight:normal;}
div.ftcontct p img {vertical-align:middle; margin-right:15px; display:inline-block;}
div.ftnav {display:flex; flex-wrap:wrap; flex-direction:row; gap:0;}
div.ftnav ul {list-style:none; font-size:0.85em; white-space:nowrap; padding:0 0 0 20px;}
div.ftnav ul a {color:var(--gnblu-color); text-decoration:underline; transition:all .5s;}
div.ftnav ul a:hover {text-decoration:none;}
/***************************************************************************/

@media (max-width:1300px) {
    div.history {margin-left:-5%;}
}
@media (max-width:1150px) {
    div.history {margin-left:0;}
}
@media (max-width:1000px) {
    section.insbxsect div.mainbox {flex-direction:column;}
    div#anyqs div.git {margin-top:0.5em;}
}
@media (max-width:900px) {
    div.topnav ul.navul {gap:1em;}
    section.homebnr-flwdth {background-size:cover; height:400px;}
    section, .mainbox {margin-top:2rem;}
    section.sectftr div.mainbox {flex-direction:column; gap:1em !important; flex-wrap:wrap; align-content:center;}
    div.ftnav {padding-left:85px;}
}
@media (max-width:850px) {
    div.topnav ul.navul {gap:0em;}
}
@media (max-width:750px) {
    div.introlgo img {max-width:160px;}
    section.homebnr-flwdth {height:300px;}
    div.ftcontct div img {margin-bottom:100px;}
}
@media (max-width:650px) {
    section.topsection div.mainbox {flex-direction:column;}
    section, .mainbox {margin-top:1rem;}
    div.introlgo {display:none;}
    div.history {display:none;}
    div.histbrok {gap:0;}
}
@media (max-width:550px) {
    div.ftcontct p.emailp {font-size:0.8em;}
    div.ftcontct p.emailp img {display:none;}
}
@media (max-width:470px) {
    div.ftcontct div img {display:none;}
    div.ftnav {margin-left:0;}
    div.ftnav ul {padding-left:0;}
    .smllp {margin-left:0px !important;}
}
