/*
Theme Name: ssfd2022
Version: 2022.12
*/

/*VARS*/
:root {
    --mainColor: #136FB7;
    --SiteGrey: #dbdbdb;
    /* --Product: #00A6E2; */
    --Product: #054F8C;
    --LightBlue: #789EAC;
    --BtnOrange: #D67C49;
    --FooterBkg: #3D463C;
    --Mastbkg: #010101;
    --MainBlue: #3740F4;
    --DarkBlue: #1D1D3D;
    --MainGreen: #58B04C;
    --LtGreen: #d2eecf;
    --MainOrange: rgb(233, 89, 28);
    --MainOrangeHov: #ee9016;
    --OffWhite:#f5f8fa;

}

/* html, body{
   overflow-x: hidden; 
  } */

html { scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    background-color: var(--OffWhite);
}

p { 
    font-weight: 500;
    line-height: 1.4rem;
    font-size:1rem;
}

.title {text-decoration: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word; /* or break-all if needed */
}

h1, h2, h3, h4, h5, h6 {color: var(--MainOrange);margin-bottom: 20px;font-weight: 700;}

h3 {font-size:1.35rem}

strong {font-weight:bold;}

.homepagelist ul {list-style-type: none;}
.highlighttxt {color:var(--MainOrange);}

/* Make long links wrap and break if needed */
a {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all; /* only if really needed */
}


li { 
    font-size:1rem;
    font-weight: 600;
    line-height: 1.7em;
}

ul.homepagelist {text-align: left;}
ul.homepagelist li {
    margin-bottom: 1rem;
    font-size: initial;
    color: var(--MainOrange);
}

.furtherpoints > h2 {font-size:1.4rem}
.furtherpoints > ol > li {font-weight: normal;font-size:1rem}
.furtherpoints > ol > li > ul > li  {font-weight: normal;font-size:1rem}
.furtherpoints > ol > li > ul > li > ul > li   {font-weight: normal;font-size:1rem}

.wordwrap {word-wrap: break-word;}

blockquote.blockquote p {color: var(--DarkBlue);
}


/* header#header {background-color: var(--MainBlue);} */
.page-id-156 header, .page-id-156 nav.navbar, .page-id-156 footer#footer {
    display: none;
}


.smtxt {font-size:0.7rem}
.lgetxt {font-size:1.3rem}
.headercolor {background-color: white;}

.SiteBlack {background-color:#ffffff;}
.SiteLtGreen {background-color:var(--LtGreen);}
.SiteGrey {background-color:var(--SiteGrey);}
.SiteBlue {background-color:var(--MainOrange);}
.SiteBlueGrad {background: rgb(233, 89, 28); background: linear-gradient(180deg, rgba(233,89,28,1) 0%, rgb(230, 170, 7) 85%, rgba(230, 170, 7,1) 100%);}

.TxtOrange {color:var(--MainOrange);}
.text-black {color:black}
.no-bold {font-weight:normal}


.hmboxtitle {color:var(--DarkBlue);}

/* #header a {
    color: var(--MainBlue);
    text-transform: uppercase;    
    font-size:1rem;
}
#header a:hover {
    color: var(--MainBlue);
    text-decoration: none;
} */

.navbar {background-color: white!important;}


/* ============ desktop view ============ */
@media all and (min-width: 992px) {    
    .navbar .nav-item a {text-align: left;}
    .navbar .nav-item .nav-link {padding: 0.2rem 1rem;}
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .nav-link{ color:var(--MainOrange);  }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
    .navbar .nav-item:hover .dropdown-menu {
        background-color:var(--SiteGrey);
        padding: 1rem 0rem;
        /* margin-left: -3.3rem; */
        font-size: 1rem;
        border: none;
        border-radius: 0;
        /* width:100%; */
    }
    .navbar .nav-item:hover .dropdown-menu > li > a:hover {
        background-color: var(--mainColor);  
        color:white;    
    }
}
/* ============ desktop view .end// ============ */

li.menu-item {padding-right:3rem;}
li.menu-item a {color: rgba(0,0,0,.55); text-decoration: none;}
li.menu-item a:hover {color:var(--MainOrange); text-decoration: none;}
li.menu-item.current-menu-item a {color:var(--MainOrange);}


.HeaderLogo {width: 400px;
    height: auto;}

.navilogo {display:none}

.icons {color:var(--mainColor);}

.contact a {color:white;text-decoration: none;}
.contact a:hover {color:white;text-decoration:underline;}

button.navbar-toggler {
    margin-left: auto;
    margin-right: auto;
}

.borderbluebtm {border-bottom: 1px solid var(--MainOrange);}

li.menu-item>a:hover:after {
    width: 100%;
    left: 0;
    background:  var(--MainOrange);
}
li.menu-item>a:after {
    content: '';
    position: relative;
    width: 0;
    height: 3px;
    display: block;
    margin-top: 5px;
    right: 0;
    /* background: #fff; */
    transition: width .2s ease;
    -webkit-transition: width .2s ease;
    padding: 0rem 1rem;
}

.wpforms-form button[type=submit] {
    background-color:  var(--MainOrange)!important;
    border-color:  var(--MainOrange)!important;
    color: #fff !important;
}
 
.wpforms-form button[type=submit]:hover {
    background-color:  var(--Product)!important;
    border-color:  var(--Product)!important;
}

.btn-brand {
	color: white;
	border-radius: 0!important;
	background-color: var(--MainOrange);
	border-color: var(--MainOrange);
    padding: 0.8rem 2rem;
}
.btn-brand:hover {	background-color: var(--Product);
	border-color: var(--Product);
color:white!important;
}
.btn-orange {
	color: white;
	border-radius: 0!important;
	background-color: var(--MainOrange);
	border-color: var(--MainOrange);
    padding: 0.8rem 2rem;
}
.btn-orange:hover {	background-color: var(--MainOrangeHov);
	border-color: var(--MainOrangeHov);
color:white!important;
}


hr.wp-block-separator {
    color: var(--MainOrange)!important;
    background-color:  var(--MainOrange)!important;
}

a.faqtitle {text-decoration: none;}
a.faqtitle:hover {text-decoration: none;color:var(--Product);}

a.faqtitle h3 {color:black}
a.faqtitle:hover h3 {color:#919191}




/* Change the color in the stroke property of the image data */
.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }
  
  .custom-toggler.navbar-toggler {
    border-color: rgb(255,255,255);
  } 

  a.nav-link {
    text-align: center;
}


.bodybkground {
    position: relative;
    top: 0px;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    background-image: url('');
    background-attachment: fixed;
}

.darkbkg {background-color: rgba(0, 0, 0, 0.6);}
.lightbkg {background-color: rgba(255, 255, 255, 0.3);}

.biog-image img {
    /* box-shadow: 17px 17px 0 0 #136FB7; */
    padding: 1.3rem;
    background-color: var(--mainColor);
}

.wp-block-image img {
max-width: 100%;
height: auto;
}


/* testimonial slider */
.testimonial-slider .carousel-indicators button {
    width: 10px;
    height: 10px;
    background-color: var(--MainOrange);
    border-radius: 100%;
}
.testimonial-slider {
    padding: 10px 0px 10px;
}




/* flipcard */

.flipcard {
	perspective: 1000px;
	margin-bottom: 0.5rem;
}

.flipcard .flipcard-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}

.flipcard .card-front, .flipcard .card-back {
	width: 100%;
	height: 100%;
	position: relative;
	backface-visibility: hidden;
	transition: all .3s;
}

.flipcard .card-front {
	z-index: 2;
}

.flipcard .card-front.card-title {
	height: 400px;
	background: var(--SiteBlue);
	color: var(--light);
	display: flex;
	justify-content: center;
}

.flipcard .card-front::after {
	content: "";
	display: block;
	width: 0;
	position: absolute;
	bottom: -1px;
	right: -1px;
	border-width: 16px 16px 0 0;
	border-style: solid;
	border-color: #999 #fff;
	border-radius: .25rem 0 0 0;
}

.flipcard .card-back {
	position: absolute;
	top: 0;
	text-align: left;
	z-index: 1;
	transform: rotateY(180deg);
	overflow-y: auto;
    background-color: black;
    color: white;
}
.flipcard > div > div.card.card-back > div > p {font-size:0.5rem}
p.flipcardsubtitle {font-size:0.8rem}

.flipcard:hover .flipcard-wrap {
	transform: rotateY(-180deg);
}


/* back to top */

#backtotop {
	display: inline-block;
	color: var(--SiteGrey);
	width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 4px;
	position: fixed;
	bottom: 30px;
	right: 15px;
	transition: background-color .3s, opacity .5s, visibility .5s;
	opacity: 0;
	visibility: hidden;
	z-index: 1000;
}

#backtotop svg, #backtotop i {
	width: 100%;
	height: 100%;
}

#backtotop:hover {
	cursor: pointer;
	color: #aaa;
}

#backtotop:active {
	color: #aaa;
}

#backtotop.show {
	opacity: 1;
	visibility: visible;
}



footer#footer {background-color: black;}
footer#footer p {font-size: 0.875rem;}
footer#footer a {color:white;text-decoration: none;}
footer#footer a:hover {color:white;text-decoration:underline;}
footer#footer h2 {color:white}
hr.footer {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }