/*

Theme Name: Litesite 3

Author: JE Consulting

Author URI: https://www.je-consulting.co.uk/

Version: 1.0.0

*/



/* Header Styles */







.contactBarContainer {

  background-color: var(--dark-blue);

  display: flex;

  justify-content: center;

}



.contactBar {

  background-color: var(--dark-blue);

  display: flex;

  justify-content: space-between;

  padding: 10px 20px;

  max-width: 1519px;

  width: 100%;

}



.socialIcons {

  display: flex;

  gap: 10px;

}



.socialIcons i {

  padding: 10px;

  background-color: var(--white);

  border-radius: 50%;

  cursor: pointer;

  height: 38px;

  width: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

}
.socialIcons a  {
	    color: var(--dark-blue);
}
.socialIcons a:hover  {
	    color: #55acee;
}

.phoneNumber {

  color: var(--white);

  font-weight: 700;

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 28px;

}
.phoneNumber a {
	color: #fff;
}
.phoneNumber a:hover {
	color: #55acee;
}

.menuContainer {

  background-color: var(--white);

}



.menuWrapper {

  display: flex;

  justify-content: space-between;

  padding: 20px;

}



.menu * {

  color: var(--dark-blue);

  font-size: 20px;

  font-weight: bold;

}



.menu-main-menu-container {

  display: flex;

  justify-content: space-around;

  align-items: center;

}



#menu-main-menu {

  display: flex;

  justify-content: space-around;

}



.menu-item {

  position: relative;

  padding: 10px 20px;

}



.sub-menu {

  display: none;

  position: absolute;

  top: 100%;

  left: 0;

  background-color: var(--white);

  padding: 10px;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



.sub-menu li {

  border-top: 3px solid var(--yellow);

}



.menu li:hover,

.sub-menu li:hover {

  background-color: var(--dark-blue) !important;

}



.menu li:hover > a {

  color: var(--white);

}



.sub-menu li:hover a {

  color: var(--white) !important;

}



.hamburger {

  display: none;

}



.headerContent {

  background-image: linear-gradient(

      to bottom right,

      rgba(0, 0, 0, 0.3),

      rgba(255, 209, 0, 0.3)

    ),

    url(https://litesite3.lite-site.co.uk/wp-content/uploads/2024/09/Header-img-e1725531229692.png);

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

  width: 100%;

  height: calc(100vw * 288 / 640);

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 20px;

}



.pageTitle {

  background-image: linear-gradient(

    to right,

    rgba(255, 209, 0, 0.8) 0%,

    rgba(255, 209, 0, 0.8) 60%,

    transparent 60%,

    transparent 100%

  );

  padding: 40px 0;

}

.pageTitle h1 p {
	font-size: 55px;
    color: var(--white);
    line-height: 60px;
}

.pageSubtitle h3 {

  color: var(--white);

  font-weight: 400;

  max-width: 45%;

}



/* Main Content Styles */



.intro-section,

.services-section,

.specialisms-section {

  text-align: center;

  padding: 100px 310px;

}



.intro-section .button {

  margin-top: 10px;

}



.services-section,

.specialisms-section {

  padding: 100px 0px;

}



.featuredItemsContainer {

  display: flex;

  justify-content: space-between;

  margin-top: 40px;

  flex-wrap: wrap;

}



.featuredItem {

  min-width: 180px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  flex: 1;

  gap: 20px;

}



.featuredItem .imageContainer {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 124px;

  width: 130px;

}



.featuredItem .textContainer {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 50px;

}



.specialisms-section h2,

.specialisms-section p,

.specialisms-section h5 {

  color: var(--white);

}

.specialisms-section .textContainer h5 a {

  color: var(--white);

}

.fifty-fifty {

  background-image: linear-gradient(

    to right,

    var(--white) 0%,

    var(--white) 50%,

    var(--blue) 50%,

    var(--blue) 100%

  );

}



.fifty-fifty > .container {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  grid-template-rows: 100%;

}



.insights-section {

  padding: 70px 0;

}



.featured-insights {

  max-width: 570px;

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.webinars-section {

  padding: 70px 0 70px 20px;

  max-width: 570px;

}



.webinars-section h2 {

  color: var(--yellow);

}



.webinars-section h5,

.webinars-section p {

  color: var(--white);

}



.featured-webinar {

  display: flex;

  flex-direction: column;

  gap: 30px;

}



/* Footer Styles */



/* Form */



.footer .dark-section {

  padding: 100px 50px;

}



.footer h2 {

  color: var(--yellow);

  text-align: center;

  margin-bottom: 30px;

}



.footer .container > p {

  color: var(--white);

  text-align: center;

  max-width: 1000px;

  margin: auto;

  margin-bottom: 30px;

}



.formContainer {

  max-width: 1200px;

  margin: auto;

}



.formContainer form {

  display: grid;

  grid-template-columns: repeat(5, 5fr);

  grid-template-rows: repeat(4, 50px);

  grid-gap: 15px;

}



.formContainer input[type="text"] {

  border-radius: 25px;

  border: none;

  padding-left: 25px;

  font-family: 'Montserrat';

}



.formContainer #name {

  grid-column: 1/3;

  grid-row: 1/2;

}



.formContainer #email {

  grid-column: 1/3;

  grid-row: 2/3;

}



.formContainer #phone {

  grid-column: 1/3;

  grid-row: 3/4;

}



.formContainer #enquiry {

  grid-column: 3/6;

  grid-row: 1/4;

  border-radius: 25px;

  border: none;

  padding: 25px;

  font-family: 'Montserrat';

  resize: none;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

  -ms-overflow-style: none;

}



.formContainer::-webkit-scrollbar {

  display: none;

}



.gform-theme--foundation .gfield input.large, .gform-theme--foundation .gfield textarea.small {
	    border-radius: 25px;
    border: none;
    padding: 25px 25px;
}

.footer p {
	color: #fff;
}
.footer .gform-theme--foundation .gform_footer input[type="submit"]#gform_submit_button_2.gform_button {
	border: none;
    max-width: 200px;
    width: 200px;
    background-color: var(--yellow);
    padding: 15px 35px;
    color: var(--dark-blue);
    font-weight: 400;
    display: inline-block;
    border-radius: 25px;
    font-size: 20px;
}


.footer .gform_fields {
  grid-row-gap: 15px !important;
}

.footer .gform-body {
	position: relative;
}
.footer .gfield--type-text, .footer .gfield--type-email, .footer .gfield--type-phone {
    width: 35%;
}
.footer .gfield--type-textarea {
   right: 0;
    position: absolute;
    width: 62%;
}

.footer .gform-theme--foundation .gfield textarea.small {
    height: 179px;
}

.footer .gfield--input-type-html p {
	font-size: 18px;
}



.formContainer p {

  grid-column: 1/4;

  grid-row: 4/5;

  font-size: 18px;

  text-align: left;

  color: var(--white);

}



.formContainer a {

  font-size: 18px;

}



.formContainer input[type="submit"] {

  grid-column: 5/6;

  grid-row: 4/5;

  border-radius: 25px;

  border: none;

  max-width: 200px;

  width: 200px;

  margin-left: auto;

}



.visually-hidden {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}



/* Logos */



.footerLogos {

  display: flex;

  flex: 1;

  justify-content: space-around;

  padding: 50px 20px;

  flex-wrap: wrap;

  max-width: 100%;

  gap: 20px;

}



.footerLogos img {

  max-height: 100px;

  width: auto;

}



/* Links */



.footerLinks {

  background-color: var(--footer);

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  padding: 50px 20px;

}



.footerLinks a {

  color: var(--white);

  font-size: 17px;

  border-right: 1px solid var(--white);

  padding: 0 20px;

  transition: font-weight 0.2s ease;

}



.footerLinks a:last-child {

  border-right: none;

}



.footerLinks a:hover {

  font-weight: 600;

}



.footer .socialIcons {

  display: none;

}


.webinarLoop, .pastWebinarLoop, .teamloop {
	    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
	margin-top: 50px;
}

.webinarItem, .pastWebinar {
	    background-color: var(--grey);
    padding: 30px;
    border-radius: 30px;
}


p.webinarDesc  {
	    font-size: 22px;
    line-height: 28px;
}
.webinarDateTime {
	    font-size: 20px;
    line-height: 28px;
	margin-bottom: 20px;
}

hr {
	margin: 60px 0;
}


.teamloop .teamProfile {
	    background-color: var(--grey);
    padding: 30px;
    border-radius: 30px;
}

.teamProfile .socialMediaIcon, .memberInfo .socialMediaIcon {
	font-size: 25px;
	    margin-right: 5px;
}



.teamMemberBanner .memberPhoto {
	float: right;
    padding: 0 0 20px 20px;
}

.backToTeamPage {
	    margin: 50px 0;
    display: block;
}


.memberContactInfo {
	font-size: 20px;
    line-height: 26px;
    margin-bottom: 20px;
}

h2#memberTitle {
	font-size: 40px;
}
.teamMemberBanner .socialMedia {
	    margin: 20px 0;
}


.textContainer h5 a {
	color: var(--dark-blue);
}




/* Resonsive Code */

@media only screen and (max-width: 1400px) {

  .pageTitle {

    background-image: linear-gradient(

      to right,

      rgba(255, 209, 0, 0.8) 0%,

      rgba(255, 209, 0, 0.8) 75%,

      transparent 75%,

      transparent 100%

    );

  }

}



@media only screen and (max-width: 1300px) {

  .intro-section {

    padding: 100px 250px;

  }

}



@media only screen and (max-width: 1248px) {

  .featured-insights {

    max-width: calc(100% - 20px);

  }

}



@media only screen and (max-width: 1120px) {

  .pageTitle {

    background-image: linear-gradient(

      to right,

      rgba(255, 209, 0, 0.8) 0%,

      rgba(255, 209, 0, 0.8) 85%,

      transparent 85%,

      transparent 100%

    );

  }



  .pageSubtitle h3 {

    max-width: 60%;

  }

}



@media only screen and (max-width: 1200px) {

  .menu-main-menu-container {

    display: none;

  }



  .hamburger {

    display: flex;

    align-items: center;

    cursor: pointer;

    font-size: 30px;

    color: var(--dark-blue);

  }



  .menuWrapper {

    justify-content: space-between;

  }



  .menu-main-menu-container {

    display: flex;

    flex-direction: column;

    position: fixed;

    top: 0;

    right: -300px;

    width: 300px;

    height: 100%;

    background-color: var(--white);

    padding: 20px;

    transition: right 0.3s ease-in-out;

    z-index: 1000;

    justify-content: flex-start;

    padding-top: 100px;

  }



  .menu-main-menu-container.open {

    right: 0;

    max-height: 100vh;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    -ms-overflow-style: none;

  }



  .menu-main-menu-container.open::-webkit-scrollbar {

    display: none;

  }



  #menu-main-menu {

    flex-direction: column;

    width: 100%;

  }



  .sub-menu {

    position: static;

    display: none;

    padding: 10px 0;

    box-shadow: none;

  }



  .menu-item.open > .sub-menu {

    display: block;

  }



  .menu-item > a {

    display: block;

    width: 100%;

  }



  .menu li a {

    text-align: center;

    padding: 16.5px 0;

  }



  .chevron {

    position: absolute;

    top: 23px;

    right: 10px;

    padding: 10px;

    background-color: var(--yellow);

    cursor: pointer;

  }



  .menu-close-icon {

    position: absolute;

    top: 50px;

    right: 20px;

    font-size: 30px;

    cursor: pointer;

  }
.webinarLoop, .pastWebinarLoop, .teamloop {
 

    grid-template-columns: repeat(2, 1fr);

}
	
	
	
	
	
	
}



@media only screen and (max-width: 1031px) {

  .footerLinks {

    flex-direction: column;

    align-items: flex-start;

  }



  .footerLinks a {
padding: 5px 20px;
    border-right: none;
text-align: center;
  }

}



@media only screen and (max-width: 1000px) {

  .headerContent {

    background-size: cover;

    background-color: var(--dark-blue);

    height: auto;

    padding: 50px 0;

  }



  .pageTitle {

    background-image: linear-gradient(

      to right,

      rgba(255, 209, 0, 0.8) 0%,

      rgba(255, 209, 0, 1) 100%

    );

  }



  .intro-section {

    padding: 100px 0;

  }



  .fifty-fifty {

    background-image: none;

  }



  .fifty-fifty > .container {

    display: block;

    max-width: 100%;

    padding: 0;

    margin: 0;

  }



  .insights-section {

    background-color: var(--white);

    padding: 70px 20px;

    margin: 0 auto;

  }



  .insights-section h2,

  .webinars-section h2 {

    text-align: center;

  }



  .featured-insights {

    margin: auto;

  }



  .featured-insight {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

  }



  .webinars-section {

    background-color: var(--blue);

    max-width: 100%;

    padding: 70px 20px;

    margin: 0 auto;

  }



  .webinars-section img {

    max-width: 500px;

    width: 100%;

    margin: auto;

  }



  .webinar-description {

    text-align: center;

  }



  .formContainer form {

    display: flex;

    flex-direction: column;

  }



  .formContainer form input {

    height: 75px;

  }



  .formContainer input[type="submit"] {

    height: 60px;

  }



  .footerLinks {
        align-items: stretch;
    padding: 50px 20px 10px;

  }



  .footer .socialIcons {

    display: flex;

    background-color: var(--footer);

    padding: 10px 20px 50px;
        justify-content: center;
  }

}
@media only screen and (max-width: 830px) {
	.webinarLoop, .pastWebinarLoop, .teamloop {

    grid-template-columns: repeat(1, 1fr);
 
}
	.footer .gfield--type-textarea {
		    position: relative;
    width: 100%;
	}
	.footer .gfield--type-text, .footer .gfield--type-email, .footer .gfield--type-phone {
    width: 100%;
}
	.featured-webinar {
   
    text-align: center;
}
}


@media only screen and (max-width: 520px) {
.pageTitle h1 p {
    font-size: 32px;
 
    line-height: 40px;
}
  .menu-main-menu-container {

    padding-top: 70px;

  }



  .header .socialIcons {

    display: none;

  }



  .menu-close-icon {

    top: 30px;

  }



  h1.container {

    font-size: 42px;

  }



  .pageSubtitle h3 {

    max-width: 100%;

  }



  .formContainer input[type="submit"] {

    margin: auto;

  }



  .footer .dark-section {

    padding: 100px 0;

  }

}