/*   
Theme Name: SHNAPP
Theme URI: https://www.creativeclicks.co.uk
Description: default theme 
Author: Creative Clicks 
Version: 1.0
*/
@import 'css/nav.css';
body {
font-family: "roboto", sans-serif;
font-weight:400;
font-style: normal;
color:#0B0B0B;
text-align: left; 
font-size:17px;
line-height:1.4em;
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
height: 100%;
}
*{box-sizing: border-box;}
strong {
font-weight:700; 
}
.center {
margin:auto !important;
text-align:center;
}
iframe {width:100%}
p {
max-width:860px;
padding-bottom:0.5em;
margin-block-start:0;
margin-block-end:0;
}
.logo {
display: block;
}
header {
width:100%;
margin:0;
background:#141414;
transition: background-color 0.3s ease-in-out, height 0.3s ease-in-out;
z-index:2001;
position: fixed;
top: 0;
}
.header-small {
padding:0;
background:rgba(20,20,20,0.9);
}

.headerInner {
display: flex;
max-width:1360px;
width:100%;
margin:0 auto 0 auto;
padding:1em 2em 1em 2em; 
align-items:center;
color:white;
text-transform: uppercase;
}
.headerInner div {
flex:1;
}
.headerInner div:nth-of-type(3) {
text-align:right;
}

.wrapper.top {
margin:4em 0 0 0;
/*background:rgba(204,0,102,1);*/
background: radial-gradient(circle at center, #ff007f 0%, #cc0066 60%, #99004d 100%);
color:white;
position:sticky;
top:75px;
z-index:1001;
}
.wrapper.top .inner{
padding:2em 2em 2em 2em;

}
.wrapper {
max-width:100%;
}
.inner {
max-width: 1360px;
margin:auto;
padding:4em 2em 4em 2em;
}
.twocol {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
height: -webkit-fill-available;
gap:6rem;
}
.fourcol {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: start;
gap: 3rem;
}
.flexible-blocks .wrapper:nth-of-type(1) .left-column  {
padding:2em; 
background: white;
border-radius:30px;
}


.flexible-blocks .wrapper:first-child,
.flexible-blocks .wrapper:last-child {
background: rgba(217, 197, 162, 0.2);
}
/*Image Gallery*/
.imagegallery ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto;
  padding: 0;
  width: 100%;
  gap: 2em;
  box-sizing: border-box;
}
.imagegallery li {
  width: calc(31%);
  box-sizing: border-box;
}

.imagegallery li {
  width: calc(33% - 25px);
  box-sizing: border-box;
}
.imagegallery img {
  width: 100%;
  display: block;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
/*Gallery End*/
p {
max-width:960px;
}
.center p {
margin:auto;
text-align:center;
}
.center a.button {
margin: 15px auto 0 auto;
}
h1,h2,h3,h4 {
line-height: 1em;
padding:0; margin:0;
max-width:860px;
}
.center h1, .center h2, .center h3, .center h4 {
margin:auto;
text-align:center;
display: inherit;
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.top h1 {
text-shadow:
    -0.5px -0.5px 0 #333,
     0.5px -0.5px 0 #333,
    -0.5px  0.5px 0 #333,
     0.5px  0.5px 0 #333;
}
h1 {
font-family: "ellograph-cf", monospace;
font-style: normal;
font-weight:400;
font-size: clamp(2rem, 5vw, 2.5rem);
text-transform:inherit;
display: inline-block;
padding:0 0 0.5em 0;
}
h2{
font-size: clamp(1.2rem, 1.5vw, 1.6rem);
font-weight:600;
margin-bottom:1rem !important;
}
h3 {
font-size: clamp(1.2rem, 2.8vw, 1.6rem);
font-weight:600;
margin:2rem 0 1rem 0 !important;
}
h4 {
font-size: clamp(1rem, 1.2vw, 1.3rem);
font-weight:500;
margin:0.5rem 0 0.5rem 0;
color:#CC0066;
}
h5 {
font-weight: 400;
font-style: normal;
font-size: clamp(1.5rem, 1.8vw, 2rem);
margin:1rem 0 1rem 0;
}
.wrapper .imagegallery ul {
list-style-type: none;
padding:0 0 0 10px;
}
.wrapper ul {
list-style-type:disc;
list-style-position:outside;
padding:0 0 0 10px;
}
.wrapper li {
max-width:400px;
}
.wrapper ul li p {
font-weight:400;
}

.pull-quote {
font-size: clamp(1rem, 1.2vw, 1.6rem);
position: relative;
padding-top:80px; 
padding-bottom:0;
margin:auto;
max-width:960px;
text-align: center;
font-style: italic;
font-family: "roboto", sans-serif;
font-weight:700;
line-height:1.6em;
background: url("images/quote-mark.svg");
background-position: left -20px;
background-repeat: no-repeat;
}
blockquote {
text-align:left;
/*border-left:8px solid #00A2DA;*/
}
a.button, .gform_button {
border-radius:50px;
margin: 15px 0 0 0 ;
padding:1rem 2rem 1rem 2rem;
border:1px solid white;
text-decoration:none;
transition: 0.3s ease-in-out;
display: block;
width:fit-content;
background:#CC0066;
color: white !important;
}
a.button.white {
background:#fff;
color:black;
}
a.button:hover, .gform_button:hover {
background:white !important;
border:1px solid #CC0066;
color:#000 !important;
cursor: pointer;
}
.gform_wrapper.gravity-theme .gfield_required .gfield_required_text {
font-style:normal !important;
}
.copyright a:link , .copyright a:visited {
color:#000; text-decoration:none;
transition: 0.3s ease-in-out;
}
.copyright a:hover, .copyright a:visited:hover {
transition: 0.3s ease-in-out;
color:rgba(19,60,108,1);
}
a:link, a:visited {
color:#0099CC;
transition: 0.2s;
}
a:hover, a:visited:hover {
color:#000;
transition: 0.2s;
}
header a:hover,header a:visited:hover {
color:#ccc;
transition: 0.2s;
}
footer {
display: flex;
font-size: 13px;
max-width: 100%;
text-align: left;
padding:4em 1em 4em 1em; 
color:#444;
}
.footerInner {
max-width: 1360px;
width:100%;
margin:auto;
display: flex;
}
.footerInner div {
flex:1;
width:33.33%;
}
.copyright {
font-family: "roboto", sans-serif;
font-weight: 300;
font-style: normal;
font-size:13px;
max-width: 1360px;
width:100%;
margin:auto;
display: flex;
align-items:flex-end;
}
.copyright div{
flex:1;
padding: 30px 0 30px 0;
}
.copyright div:nth-of-type(2) {
text-align: right;
}
/*Enquiry form*/
.formLeft,.formRight {
flex:1;
}
.formLeft {
display: flex;
flex-direction: column;
justify-content: center;
padding-right:3em !important;
}
.formRight {
background:white;
border-radius:6px;
padding:2em !important;
box-shadow: 0 0 3px #ccc;
}
.gform_wrapper {
padding:0;
}
.ginput_container_consent {
display: flex;
align-items: center;
font-size:15px;
}
label, legend {
color:#333;
}
input, textarea, select {
border-radius:6px;
border:1px solid #ccc;
padding: 12px 20px;
min-height:60px;
}
input[type="checkbox"] {
padding:1em;
width:20px;
height:20px;
background:grey;
}
input:focus {
background-color:#FDF9E1;
}
/* Accordion */
.accordion {
padding-top: 10px;
max-width:90%; 
margin:auto;
}
div.set {
    padding: 0;
}
article.content p {
    max-width: 860px;
    font-size: 16px;
    padding: 10px 20px 0 15px;
}
.set a:link, .set a:visited {
    text-decoration: none;
}
.set h4 i {
    float: right;
    margin: 2px 0 0 auto;
}
.set h4 {
    font-weight: 700;
    padding: 0 0 20px 0;
    margin: 0;
    font-size: clamp(1.1rem, 2vw, 1.2rem);
    display: flex;
    width: 100%;
    font-family: bio-sans, sans-serif;
    background: none;
    color: #333;
	max-width: 100%;
}
/*Accordion End*/

@keyframes fadeInUp {
from {opacity: 0; transform: translateY(60px);}
to {opacity: 1; transform: translateY(0);}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
.inview {
opacity: 0;
}
.fadeInUp {
animation: fadeInUp 1s ease-out forwards;
}
.fadeIn {
animation: fadeIn 2s ease-out 1s forwards;
}

/*Slider*/
.tns-nav {
display:none;
}
.tns-outer {
text-align: center;
margin: auto;
width: 60vw;
max-width: 55rem;
}
.slider-prev, .slider-next {
background-color:white;
width:3rem;
height:3rem;
cursor: pointer;
z-index: 1;
border: 1px solid black;
border-radius: 50%;
}
.controls {
display: block;
margin-top: 80px;
text-align: center;
}
.slide article span {
font-size: 2rem;
font-weight: 800;
display: inline-block;
}
#tns1 > .tns-item {
font-size: 17px;
}
/*Tab Content*/
.core-beliefs-container {
display: flex;
flex-direction: column;
align-items: center;
padding:3rem;
border-radius: 6px;
background-color:white;
}

/* Tabs centered on top */
.tab {
background-color:var(--yellow-color);
}
.tabs {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.tab-card {
border-bottom: 1px solid rgba(0,0,0,0.4);
padding: 10px;
margin: 0 10px;
cursor: pointer;
font-weight: 700;
}
/* Tab Content Styles */
.tab-content {
display: none;
padding: 20px;
width: 100%;
max-width: 800px; 
}
/* Active Tab Styling */
.activeTab {
color:var(--red-color);
background-color:var(--yellow-color);
}
.activeContent {
display: block;
}
/*Tab Content End*/