@charset "UTF-8";

@font-face {
    font-family: 'Gyst Variable';
    src: url('fonts/Gyst-MediumItalic.woff2') format('woff2');
    font-weight: normal;       
    font-style: normal;
}

@font-face {
    font-family: 'Gyst Variable';
    src: url('fonts/Gyst-MediumItalic.woff') format('woff2');
    font-weight: 100 900;
    font-style: normal;
}


/*--------------------General CSS--------------------*/
:root {

    --white : white;
    --black: black;

    --cyan: #76D5E0;

    --light-blue : #E5F6F8;
    
	--dark-blue : #00263E;

    --light-green: #F2FFBD;

    --light-pink: #FFD6E0;

    --miniSectionSpacer: 40px;
	--sectionSpacer: 90px;
    --bigSectionSpacer: 110px;
	--megaSectionSpacer: 180px;

    --smallerSectionSpacer: 20px;
	--primaryFont: 'Poppins', Arial, sans-serif;
	--secondaryFont: 'Gyst Variable', 'Poppins', sans-serif;
    
    --row1-h: clamp(180px, 24vw, 280px); 
    --row2-h: clamp(200px, 28vw, 320px); 

    --containerMobile: 92%;
}



.gform-theme--api,
.gform-theme--framework {
    /* gf stuff */
    --gf-color-primary: var(--dark-blue) !important;
     --gf-color-primary-rgb: 0,40,80 !important;
      --gf-color-primary-darker:var(--light-blue) !important;
      --gf-color-primary-lighter: var(--cyan) !important;
    
      --gf-radius:0px !important;
      --gf-radius-max-sm:0px !important;
      --gf-radius-max-md:0px !important;
      --gf-radius-max-lg:0px !important;
    
    --gf-color-secondary:var(----dark-blue) !important;
  --gf-color-secondary-rgb: var(----light-blue) !imporant;
    
    
    --gf-color-success: green !important; 
  --gf-color-success-rgb:91,208, 230;
  --gf-color-success-contrast:#fff;
  --gf-color-success-contrast-rgb:91,208, 230;
	
	--gf-form-success-bg-color: rgba(57,159,75,1) !important;
   
  --gf-color-in-ctrl-primary:var(--gf-color-primary) !important;
 
  --gf-padding-x: 16px !important;
  --gf-padding-y:42px !important;

  --gf-ctrl-size:var(--gf-ctrl-size-lg) !important;
 
  --gf-ctrl-btn-size-md:var(--gf-ctrl-size-lg) !important;
	 --gf-ctrl-border-color: var(--cyan) !important;
	
	--gf-form-validation-heading-color: var(--white) !important;
	--gf-form-validation-bg-color: rgba(255,255,255,0.3) !important;
	--gf-form-validation-heading-icon-border-color: var(--white) !important;
	--gf-ctrl-desc-color-error: rgba(255,255,255,0.6) !important;
}

.gform-theme--framework .gform-field-label {
	--gf-local-color: var(--white) !important;
	--gf-ctrl-color: var(--cyan) !important;
}

.gform-theme--framework input:not([type="submit"]), .gform-theme--framework textarea {
	--gf-local-shadow: none !important;
	--gf-local-color: var(--dark-blue) !important;

}

.gform-theme--framework textarea {
	padding: 16px !important;
}

.gform-theme--framework .gfield_required.gfield_required_text {
	color: var(--light-green);	
}


html, body {
    overflow-x: hidden;
    font-family: 'Poppins', Arial, sans-serif;
    color: #00263E;
}

.container.edgetoedge {
	width: 100%;
}

.container.narrower {
    width: 32%;
}

.container.narrowest {
    width: 20%;
}

.container.wider {
    width: 95%;
}

.flex {
    display: flex;
}

.flex-end {
    align-self: flex-end;
}

.flex.column {
    flex-direction: column;
}

.space-between {
	justify-content: space-between;
}

.nowrap {
    flex-wrap: nowrap;
}

.row-reverse {
    flex-direction: row-reverse;
}

.section, section {
    position: relative;
	margin: var(--sectionSpacer) 0;
}

.section.nobottom, section.nobottom, .nobottom {
	margin-bottom: 0 !important;
}

.section.mega, section.mega {
	margin: var(--megaSectionSpacer) 0 var(--megaSectionSpacer) 0;
}

.section.megatop, section.megatop {
	margin-top: var(--megaSectionSpacer);
}

.section.megabottom, section.megabottom {
	margin-bottom: var(--megaSectionSpacer);
}

.section.minitop, section.minitop {
	margin-top: calc(var(--sectionSpacer)/2);
}

.section.minibottom, section.minibottom {
	margin-bottom: calc(var(--sectionSpacer)/2);
}

.section.notop, section.notop, .notop {
	margin-top: 0 !important;
}

.topmargin {
	margin-top: var(--sectionSpacer);
}

.bottommargin {
	margin-bottom: var(--sectionSpacer);
}

section.margin_to_padded, .margin_to_padded {
	margin: 0 !important;
	padding: var(--sectionSpacer) 0;
}

section.margin_to_padded.notop, .margin_to_padded.notop {
     padding-top: 0;   
}

section.margin_to_padded.nobottom, .margin_to_padded.nobottom {
     padding-bottom: 0;   
}

section.margin_to_padded.mega, .margin_to_padded.mega {
	padding: var(--megaSectionSpacer) 0;
}

.section.margin_to_padded.minitop, section.margin_to_padded.minitop {
	padding-top: calc(var(--sectionSpacer)/2);
}

.section.margin_to_padded.minibottom, section.margin_to_padded.minibottom {
	padding-bottom: calc(var(--sectionSpacer)/2);
}

.spacer {
	padding-top: var(--sectionSpacer);
}

.gapsmall {
    gap: 10px;
}

.gap {
    gap: 20px;
}

.gapbig {
    gap: 50px;
}

.gapbiggest {
    gap: 50px;
}

.section h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 50px;
    font-size: 45px;
    letter-spacing: 1%;
}

/*.section p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 25px;
    color: #444;
}

.section p {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    line-height: 30px;
    color: var(--dark-blue);
}
*/

.section.content_area {
    padding: 0;
}

.section{
    margin: 0;
}
.section p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 25px;
    color: var(--dark-blue);
}

.info_section_container .section p{
    font-size: 35px;
}

.section em {
    font-family: "Gyst Variable", 'Inter';
    font-variation-settings: 'wght' 500;
    font-size: 45px;
    letter-spacing: -5%; 
}

.section {
    margin: 0;
}

.heading_section.section {
    padding: 120px;
}

.sticky {
    position: sticky;
    top: 0;
}

.darkbg{
    background-color: var(--dark-blue);
}

.lightgreenbg {
    background-color: var(--light-green);
}

.lightbluebg {
	background-color: var(--light-blue);
	color: var(--dark-blue);
}

.bigbutton.solid.pink, a.bigbutton.solid.pink {
	border: 3px solid var(--light-pink);
	background: var(--light-pink); 
	color: #00263E;
}

.bigbutton.solid.pink:hover, a.bigbutton.solid.pink:hover {
	border: 3px solid var(--light-green);
	background: var(--light-green);
	color: #00263E;
}

.buttoncontainer.pink {
    background-color: var(--light-pink);
    border-radius: 40px;
}

.bigbutton.hollow.blue:hover, a.bigbutton.hollow.blue:hover {
	border: 3px solid var(--cyan);
	background-color: var(--cyan);
	color: #00263E;
}

.gform_footer .gform_button.button {
    border: none !important;
    background: var(--cyan) !important;
    color: var(--dark-blue) !important;
}

.gform_footer .gform_button.button:hover {
    border: none !important;
    background: var(--light-green) !important;
    color: var(--dark-blue) !important;
}

.gfield_description {
    color: var(--cyan) !important;
}

.tablet_portrait, .tablet_landscape, .mobile {
	display: none;
}

.desktop {
	display: block;
}

.heading_section.section {
    margin: 0;
}

a {
    display: block;
}

.content_area .sectionspacer, .content_area .sectionspacer:first-of-type {
    margin: 80px 0;
}

.sectionspacer.mega, .content_area .sectionspacer.mega:first-of-type {
    margin: 160px 0;
}

/*----------biggest button-------------*/

.biggestbutton, a.biggestbutton, input.biggestbutton {
    display: block;       
    width: 100%;
    padding: 20px 0;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    border-radius: 50px;
    background: transparent;
    color: #00263E;
    transition: all 0.2s ease-out;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
}


/*--------------------General End--------------------*/

/*--------------------Video--------------------

.video_section {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 20 / 10;
    height: auto;
}

.video-container {
    position: relative;
    width: 100%;
    height: 113%;
    overflow: hidden;
}

.video {
    height: 100%; 
    width: 100%; 
    z-index: 0; 
    position: absolute; 
    overflow: hidden; 
    inset: 0px; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center;
}

.video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.video.hidden {
    display: none;
}

#player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

#player iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;

    pointer-events: none;
    border: 0;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important; 
    object-fit: cover;
    object-position: center;
}

.video-background-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.video-background-controls .play-toggle {
	background-color: #fff;
	padding: 0px;
	font-size: 50px;
	border: none;
	color: var(--light-green);
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	border-radius: 150px;
	line-height: 50px;
	position: absolute;
	right: 100px;
	bottom: 240px;
	
	-webkit-transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1);
	-moz-transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1);
	-o-transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1);
	transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1);

}

.video-background-controls .play-toggle:hover {
	color: var(--dark-blue);
	cursor: pointer;
}

.video-background-controls .play-toggle.paused {
	position: absolute;
	right: calc(50% - 50px);
	bottom: calc(40vh + 140px);
	
	font-size: 80px;
}

.video-background-controls .mute-toggle {
	background-color: var(--light-green);
	padding: 10px 12px;
	font-size: 24px;
	border: none;
	color: var(--white);
	
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	border-radius: 150px;
	
	position: absolute;
	right: 40px;
	bottom: 85px;
	
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

.video-background-controls .mute-toggle:hover {
	background-color: var(--light-green);
	cursor: pointer;
}

.play-toggle, .mute-toggle {
    font-size: 40px;
    background: var(--white);
    border: none;
    border-radius: 50%;
    padding: 10px;
    margin-left: 10px;
    cursor: pointer;
}

.custom-play-btn {
    position: absolute;
    bottom: 142px; 
    right: 90px;
    width: 60px;
    height: 60px;
    background-color: var(--light-green);
    border: none;
    border-radius: 50%;
    color: var(--dark-blue);
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: background-color 0.3s ease;
}


.custom-play-btn:hover {
    background-color: var(--dark-blue);
    color: var(--white);
}

.mute-toggle {
    background-color: var(--light-green);
    color: var(--dark-blue);
    font-size: 24px;
    border: none;
    border-radius: 50%;
    padding: 10px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 142px;
    right: 15px;
    z-index: 20;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.mute-toggle:hover {
    background-color: var(--dark-blue);
    color: var(--light-green);
}
*/

.sectionspacer.nicetables.content_area p {
    width: 50%;
    font-family: var(--primaryFont);
    font-size: 16px;
    font-weight: 300;
    line-height: 22px;
}

/* Video section  - content creator */



.video_content_area .videospacer {
	padding: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.video_content_area .embed-youtube {
    overflow: hidden;
    position: relative;
    max-width: 100%;
    height: auto;
    padding-bottom: 43.25%;
	background-color: #000;
}

.video_content_area .container.narrowest .embed-youtube {
    padding-bottom: 56.25%;
}

.video_content_area .embed-youtube.map {
    padding-bottom: 0;
    min-height: 450px;
    height: 60vh;
}

.video_content_area .embed-youtube.square {
    overflow: hidden;
    position: relative;
    max-width: 100%;
    height: auto;
    padding-bottom: 100%;
	background-color: #000;
}

.video_content_area .embed-youtube iframe,
.video_content_area .embed-youtube object,
.video_content_area .embed-youtube embed,
.video_content_area .embed-youtube video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- background video controls --- */


.video_content_area .video_section {
    height: calc(100vh - 120px);
    overflow: hidden;
	position: relative;
	border-radius: var(--roundedCorners);
}

.video_content_area  .container.edgetoedge .video_section {
	border-radius: 0;
}

.video_content_area .video-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video_content_area .video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

.video_content_area .video-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video_content_area .video-poster.hidden {
    display: none;
}

.video_content_area #player {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.video_content_area .video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important; 
    object-fit: cover;
}

.video_content_area .video-background-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.video_content_area .video-background-controls .play-toggle {
	background-color: #fff;
	padding: 0px;
	font-size: 50px;
	border: none;
	color: var(--cyan);
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	border-radius: 150px;
	line-height: 50px;
		position: absolute;
	right: 100px;
	bottom: 240px;
	
	-webkit-transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1);
	-moz-transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1);
	-o-transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1);
	transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1);

}

.video_content_area .video-background-controls .play-toggle:hover {
	color: var(--dark-blue);
	cursor: pointer;
}

.video_content_area .video-background-controls .play-toggle.paused {
	position: absolute;
	
	
	font-size: 80px;
}

.video_content_area .video-background-controls .mute-toggle {
	background-color: var(--cyan);
	padding: 10px 12px;
	font-size: 24px;
	border: none;
	color: var(--white);
	
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	border-radius: 150px;
	
	position: absolute;
	right: 40px;
	bottom: 240px;
	
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

.video_content_area .video-background-controls .mute-toggle:hover {
	background-color: var(--dark-blue);
	cursor: pointer;
}

.video_content_area .play-toggle, .mute-toggle {
    font-size: 40px;
    background: white;
    border: none;
    border-radius: 50%;
    padding: 10px;
    margin-left: 10px;
    cursor: pointer;
}

.video_content_area .custom-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: var(--cyan);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: background-color 0.3s ease;
}

.video_content_area .custom-play-btn:hover {
    background-color: var(--dark-blue);
}container {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
  }

  .video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important; 
  transform: translateY(0); /* Ensure starting position is 0 */
  object-fit: cover;
  }


  .video_content_area .video-background-controls {
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

.video_content_area .video-background-controls .play-toggle {
	background-color: #fff;
	padding: 0px;
	font-size: 50px;
	border: none;
	color: var(--cyan);
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	border-radius: 150px;
	line-height: 50px;
		position: absolute;
	right: 100px;
	bottom: 40px;
	
	-webkit-transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1);
	-moz-transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1);
	-o-transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1);
	transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1);

}

.video_content_area .video-background-controls .play-toggle:hover {
	color: var(--dark-blue);
}
/*
.video-background-controls .play-toggle.paused {
	position: absolute;
	right: calc(50% - 50px);
	bottom: calc(50vh - 145px);
	
	font-size: 80px;
} */

.video_content_area .video-background-controls .mute-toggle {
	background-color: var(--cyan);
	padding: 13px 12px;
	font-size: 24px;
	border: none;
	color: var(--white);
	
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	border-radius: 150px;
	
	position: absolute;
	right: 40px;
	bottom: 40px;
	
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

.video_content_area .video-background-controls .mute-toggle:hover {
	background-color: var(--dark-blue);
	cursor: pointer;
}

.video_section {
    margin-top: 0;
}
/*--------------------Video End--------------------*/

/*--------------------Marketing--------------------*/

.banner-text {
    margin: auto;
    color: var(--dark-blue);
    margin-top: 50px;

}

.marketing-solutions.whitetext .banner-text {
    color: var(--white);
}

.marketing-solutions {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.marketing-solutions.topspacer {
    margin-top: 5%;
}

.marketing-solutions.bottomspacer {
    margin-bottom: 5%;
}

.spacer {
    flex: 0.5;
}

.gro-logo{
    height: 100px;
    /*width: clamp(60px, 5vw, 100px);
    width: clamp(100px, 10vw, 192px);*/
}

.marketing-solutions p {

    font-size: 45px;
    font-weight: 600;
    align-self: center;
    letter-spacing: -1%;
    color: var(--dark-blue);

    font-size: clamp(35px, 2vw, 45px);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gro-logo, .marketing-solutions p, .marketing-solutions span {
    flex-shrink: 1;
    /*min-width: 20%;*/
}

.marketing-solutions span {
    align-self: center;
    font-family: 'Gyst Variable', 'Inter';
    font-variation-settings: 'wght' 550;
    font-style: italic;
    font-size: 45px;
    color: var(--dark-blue);

    font-size: clamp(40px, 2vw, 50px);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.marketing-solutions.whitetext span {
    color: var(--white);
}

.marketing-slogan {
    justify-content: center;
    align-items: center;
    text-align: center;
    /*margin-top: 70px;*/
    color: var(--dark-blue);
}

.marketing-solutions.whitetext .marketing-slogan {
    color: var(--white);
}

.marketing-solutions .cd-headline .cd-words-wrapper b span.poppins {
    font-family: var(--secondaryFont) !important;
    color: var(--white);
}

.cd-headline.rotate-2 i.out {
    animation: cd-rotate-2-out 0s forwards;
}

/* .cd-headline.rotate-2 i.in {
    animation: cd-rotate-2-in 0.1s forwards;
} */

.captions {
    align-items: center;
}

span.static-your {
    font-family: var(--primaryFont);
    font-style: normal;
    font-weight: 600;
    color: var(--dark-blue);
    font-size: 45px;
}

.marketing-solutions.whitetext span.static-your{
    color: var(--white);
}
/*--------------------Marketing End--------------------*/

/*--------------------Three steps--------------------*/

.step {
    border-right: 1px solid var(--light-pink);
    flex:1;
}

.step:last-child {
    border-right: none;
}

.step-number {
    font-family: 'Poppins', sans-serif;
    font-size: 150px;
    font-weight: 100;
    color: var(--light-pink);
    
}

.step-desc {
    color: var(--white);
    width: 92%;
}

.three-steps span {
    align-self: center;
    font-family: "Gyst Variable", 'Inter';
    font-weight: normal;
    font-style: normal;
    font-size: 35px;
}

.three-steps p {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 30px;
    align-self: center;
}

/*--------------------Three steps End--------------------*/

/*--------------------Our Services--------------------*/

/*pre-existing class in stylesheet.css*/
.info_section_container {
	background-color: rgba(255, 255, 255, 0.3);
    margin-left: auto;
    margin-right: auto;
    border-bottom: none;
}

.info_section .services_container .iconpart {
	background-color: var(--dark-blue);
	color: var(--light-green);
	font-size: 38px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 55px;
	height: 50px;
	border-radius: 50%;
	aspect-ratio: 1 / 1;

	margin: 0 auto;

	-webkit-text-stroke: 0.5px var(--light-green);
	-webkit-text-fill-color: var(--light-green);
}

.columns-5, column-6 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.columns-5 .column {
	width: 19%;
	margin-bottom: 30px;
	text-align: center;
}

.columns-6 .column {
    width: 14.5%;
}

.info_section .services_container .contentpart {
    text-transform: uppercase;
	font-family: "Poppins", sans-serif;
	font-variation-settings: 'wght' 400;
	font-size: 14px;
	line-height: 18px;
	padding: 0 8px;
	margin-top: 20px;
	text-align: center;
    letter-spacing: 8%;
}

.info_section .column {
    border-top: 0px;
    margin-top: 0;
}

.info_section h1 {
    color: var(--white);
}

.info_section h2 {
    color: var(--white);
    width: 70%;
    font-family: 'Poppins';
    font-weight: 300;
    letter-spacing: -1%;
}

/*.info_section span {
    font-family: 'League Spartan', sans-serif; 
    font-weight: 500;
    font-size: 45px;
    letter-spacing: -5%;
}*/

.info_section span {
    font-family: "Gyst Variable", 'Inter';
    font-variation-settings: 'wght' 500;
    font-style: italic;
    font-size: 45px;
    letter-spacing: -5%; 
}


.info_section .services_container .contentpart {
    color: var(--white);
    letter-spacing: 5%;
}

.columns-5 .column {
    width: 16.5%;
} 

.info-section .buttoncontainer {
    margin: 20px 0;
}
/*--------------------Our Services End--------------------*/

/*--------------------Brands Section--------------------*/

.twothirds h1{
    font-family: 'Poppins', sans-serif;
    font-weight: 600; 
    font-size: 34px;
    line-height: 40px;
    letter-spacing: -5%;
    color: var(--dark-blue);
    margin-bottom: 20px;
}


/*--------------------Brands Section End--------------------*/

/*--------------------Testimonials Section-------------------*/

.testimonials.section {
    margin: 0;
}

.testimonials .slider_container {
	margin-top: 115px;
}

.testimonials .commabg {
	font-size: 95px;
    color: var(--cyan);
    opacity: 1;
    position: absolute;
    left: 0;
    top: -115px;
}

.testimonials h1{
    color: var(--dark-blue);
}

.testimonials .testimonial_container p{
	color: var(--dark-blue);
}

.testimonials .testimonial_container{
	color: var(--dark-blue);
}

.bigbutton.solid.lightblue, a.bigbutton.solid.lightblue, .footer .gform_button[type=submit] {
	border: 3px solid var(--cyan);
	background: var(--cyan);
	color: var(--dark-blue);
}

.bigbutton.solid.lightblue, a.bigbutton.solid.lightblue, .footer .gform_button[type=submit]:hover {
	border: 3px solid var(--light-green);
	background: var(--light-green);
	color: var(--dark-blue);
}


.bigbutton.solid.white, a.bigbutton.solid.white, .bigbutton.white.slick-arrow, a.bigbutton.white.slick-arrow {
    border: 3px solid var(--white);
    background: var(--white);
    color: var(--dark-blue);
}

.testimonials .testimonial_container .testimonial_profile .testimonial_details .namesurname {
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: -20px;
}

.testimonials .testimonial_container .testimonial_profile .testimonial_details .business {
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 35px;
    text-align: left;
}

.testimonials .buttoncontainer {
    margin: 0;
}

.bigbutton.solid.white:hover, a.bigbutton.solid.white:hover {
    background-color: var(--dark-blue);
    color: var(--white);
}

/*--------------------Testimonials Section End--------------------*/

/*--------------------Contact Section End--------------------*/

.footer h1 {
    color: var(--light-green);
}

.footer .third {
    width: 46.3%;
}

.footer .forty {
    width: 39%;
}

.footer .forty .rightspacer {
    text-align: left;
}

.footer .forty .rightspacer p {
    color: white;
    text-align: left;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
}

/* .footer.contactfooter.footerdetails .contactdetails, 
.footer.contactfooter .footerdetails .contactdetails a {
    display: inline-flex;
    font-size: 14px;
    line-height: 22px;
    font-weight: 300;
} */

.footer.contactfooter .footerdetails strong {
    font-weight: 700;
}

.footer.contactfooter .sixty, .footer.contactfooter .forty {
    padding-top: 90px;
    padding-bottom: 90px;
}

.footer.contactfooter .footerdetails .twothirds .inline.flex.gap {
    gap: 10px;
}

/*--------------------Contact Section End--------------------*/

/*--------------------Services Page--------------------*/

.info_section_heading p, .info_section_heading em {
    color:var(--white);
}

.info_section_heading p {
    font-size: 45px;
}

.info_section_container h2 {
    text-wrap: balance;
}

.services-slogan .slogan-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; 
    font-size: 34px;
    line-height: 40px;
    letter-spacing: -1%; 
    text-align: center;
    color: var(--dark-blue);
}

.info_section_heading em,
.info_section_heading i {
    font-family: "Gyst Variable", 'Inter';
    font-variation-settings: 'wght' 500;
    font-size: 45px;
    letter-spacing: -5%; 
    color: var(--white);
    font-style: normal;
}

.our-work .flex {
    width: 90%;
}

.our-work .img-holder {
    flex: 1;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.our-work .service {
    width: 100%;
    height: 250.36px;
    display: block;
    border-bottom: none;
    padding: 0;
    z-index: 100;
    object-fit: cover;
    object-position: center;
}

.our-work .buttoncontainer {
    margin-left: -40px;
    z-index: 150;
}

.plan-section {
    text-align: left;
}

.plan-section .flex.step {
    /* align-items: flex-start; */
}

.plan-section .toprow {
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.plan-section .first-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 35px;
    color: var(--dark-blue);
}

.plan-section .sixty .step-info {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 22px;
    color: var(--dark-blue);
    margin-top: 20px;
}

.plan-section h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 45px;
    line-height: 50px;
    letter-spacing: -1%; 
    color: var(--cyan);
}

.plan-section .stacked-steps-desc {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 35px;
}


.plan-section .plan-title {
    margin-top: 0;
}
.forty .stacked-steps-desc{
    width: 80%;
}

.plan-section .step-number {
    display: block; 
    line-height: 0.75;
}   

.plan-section .bottomrow .first-title {
    width: 70%;
}

.plan-section .bottomrow .step-number {
    margin-bottom: 35px;
}

.plan-section .forty .buttoncontainer {
    margin: 50px 0;
}

.plan-section .toprow {
    border-bottom: 2px solid var(--dark-blue);
}

.plan-section .step-desc {
    color: var(--dark-blue);
}

.plan-section .step{
    border-right: none;
}

.plan-section .flex.three-steps {
    flex-direction: column;
}

.leftstep, .rightstep {
    flex: 1;
}

.step .leftstep {
    border-right: 2px solid var(--dark-blue);
    padding-right: 20px;
    padding-top: 40px;
}

.step .rightstep {
    padding-top: 40px;
}
/*.rightstep{
    margin-left: 50px;
}*/

.toprow .step-number {
    color: var(--cyan);
}

.bottomrow .rightstep .step-number {
    color: var(--cyan);
}


.content_area ul:not(.gform_fields) li {
    letter-spacing: 0;
}
/*--------------------testimonials --------------------*/

.testimonials .forty h1:not(:has(+ .buttoncontainer)) {
    font-size: 35px; 
}

/*--------------------Careers Page--------------------*/

.banner-heading {
	background-position: center center;
	background-size: cover;
}

section.margin_to_padded.banner-heading{
    padding: var(--bigSectionSpacer) 0;
}

.banner-heading h1{
    font-family: 'Poppins', sans-serif;
    font-weight: 600; 
    font-size: 45px;
    line-height: 50px;
    letter-spacing: -1%;
    text-align: center;
    margin: 0;
}

.aboutus-text {
    text-align: center;
    font-size: 34px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: -1%;
    color: var(--dark-blue);
}


/* GRID */


.images-grid .desktop-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;   
    grid-template-rows: auto;          
    grid-template-areas:
    "pic1 pic2 pic3"
    "pic4 pic4 pic5";
    gap: 9px;
}

.item1 { grid-area: pic1; height: 480px; } 
.item2 { grid-area: pic2; height: 480px; }  
.item3 { grid-area: pic3; height: 646px; } 
.item4 { grid-area: pic4; height: 674px; }  
.item5 { grid-area: pic5; height: 509px; }  

.images-grid .desktop-grid > div {
    position: relative;
    overflow: hidden;
}

.images-grid .desktop-grid img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
}

.images-grid .item4 {
    margin-top: -165px;
}

.grid-img {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/*-------------------------Opportunities Section-----------------------------*/

.circlebutton, a.circlebutton {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;          
    height: 36px;
    border-radius: 50%;
    background: #ffffff; 
    color: #00263E;       
    font-size: 14px;      
    cursor: pointer;
    transition: background 0.2s ease-out, border-color 0.2s ease-out;
    border: 2px solid #ffffff;
    text-decoration: none;
    margin: auto 15px auto 0;
}

.circlebutton:hover {
    background: #F2FFBD;
    border-color: #F2FFBD;
    color: #00263E;
}

.opportunities-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; 
    font-size: 34px;
    line-height: 40px;
    letter-spacing: -1%; 
    text-align: center;
    color: var(--dark-blue);
}

.opportunities p {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
    margin: 30px 0 55px 0;
    color: var(--black);
}

.no-careers-msg {
    font-family: var(--secondaryFont) !important;
    width: 70%;
    margin: auto !important;
    padding: 20px;
}

.opportunities a.buttoncontainer {
    text-decoration: none;
}

.opportunities a.buttoncontainer:hover {
	background: var(--light-green);
	color: #00263E;
}

.opportunities .buttoncontainer{
    margin: 15px;
}

.opportunities .buttoncontainer>.bigbutton.blue {
    margin-top: 40px;
}

.opportunities .biggestbutton {
    text-align: left;
    margin-left: 20px;
    font-weight: 600;
}

.opportunities .fa-arrow-right {
    font-size: 20px;
}
/*-------------------------Opportunities Section End-----------------------------*/

/*--------------------Careers Page End--------------------*/


/*--------------------Blog Page--------------------*/

/*-------------Blog posts-------------------*/

/* --- ff fix --- */

.inner-blog-content .container {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

.inner-blog-content {
	flex: 1;
}

.inner-blog-content .sectionspacer.nicetables.content_area  p {
	width: 100%;	
}

/* --- end ff fix --- */

.blog-text {
    flex: 2;
    margin: auto 0;
    width: 90%;
}

.blog-text p {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;              
    font-style: normal;           
    font-size: 16px;
    line-height: 22px;
    color: var(--black);
    width: 90%;
    text-align: left;
}

.big-blog-posts .blog-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;              
    font-style: normal;           
    font-size: 20px;
    line-height: 28px;
    color: var(--dark-blue);
    width: 90%;
    display: block;
}

.big-blog-posts a {
    width: 28%;
    cursor: pointer;
}

.blog-desc {
    margin-top: 40px;
    width: 80%;
}

.blog-desc, .blog-date {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 22px;
}

.blog-date {
    font-size: 14px;
    color: var(--dark-blue);
}

/*img.blog-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    flex: 1;
    flex-shrink: 0;
}*/

/*--------------Blog flex--------------------*/

.blog-section .flex {
    flex-wrap: wrap;
}

.blog-section .small-blog-posts {
    width: 24%;
}

.blog-section .small-blog-posts .img.blog-img {
    min-height: 130px;
}

/*--------------------Blog Page End--------------------*/

/*--------------Inside Blog Page ----------------------*/

section .inside-blog {
    color: var(--dark-blue);
}
section .inside-blog p {
    color: var(--dark-blue);
}
section .inside-blog h1 {
    color: var(--dark-blue);
}
section .inside-blog h2 {
    color: var(--dark-blue);
}
section .inside-blog h3 {
    color: var(--dark-blue);
}
section .inside-blog h4 {
    color: var(--dark-blue);
}
section .inside-blog h5 {
    color: var(--dark-blue);
}
section .inside-blog h6 {
    color: var(--dark-blue);
}

.inside-blog .videocontainer {
    margin-top: 23.94px;
}

.inside-blog .videospacer {
	padding: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.inside-blog .embed-youtube {
    overflow: hidden;
    position: relative;
    height: auto;
	background-color: #000;
	margin-left: auto;
	margin-right: auto;
}

.inside-blog .embed-youtube iframe,
.inside-blog .embed-youtube object,
.inside-blog .embed-youtube embed,
.inside-blog .embed-youtube video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.inside-blog .blog-title {
    width: 70%;
}

.blog-textbox {
    flex:2;
    margin-bottom: 50px;
    text-align: left;
}

.blog-img {
    width: 100%; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 3 / 2;
    max-height: 400px;
}

.inside-blog .blog-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
    max-height: 300px;
    max-width: 500px;
    flex: 1.5;
}

.inside-blog .blog-img.mobile {
    width: 100%;
    height: 400px;
    max-width: 100%;
}

.inside-blog h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;       
    font-size: 45px;
    line-height: 50px;
    letter-spacing: -1%; 
    color: var(--dark-blue);
}

.inside-blog .blog-date {
    margin-bottom: -28px;
}

.inside-blog h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;        
    font-size: 18px;
    line-height: 25px;
    letter-spacing: -1%;
    color: var(--dark-blue);
}

.inside-blog h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;        
    font-size: 18px;
    line-height: 25px;
    letter-spacing: -1%;
    color: var(--dark-blue);
}

.inside-blog p, .inside-blog span {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;         
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0; 
    color: var(--dark-blue);
}



.inside-blog .sub-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;             
    font-size: 15px;
    line-height: 100%;           
    letter-spacing: 3%;       
    text-transform: uppercase;
    color: var(--dark-blue);
    margin-top: 50px;
    margin-bottom: -10px;
}

.inside-blog strong {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;          
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0; 
    color: var(--dark-blue);
    margin-bottom: 10px;
}

/*
.inside-blog span {
    font-family: 'Gyst Variable', 'Inter';
    font-variation-settings: 'wght' 550;           
    font-style: italic;             
    font-size: 18px;
    line-height: 50px;
    letter-spacing: -1%;
    color: var(--cyan);
}
*/

.inside-blog span {                   
    line-height: 50px;
    letter-spacing: -1%;
    color: var(--dark-blue);
}

.inside-blog a {        
    font-size: 16px;
    display: inline;
}

.inside-blog h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;        
    font-size: 18px;
    line-height: 25px;
    letter-spacing: -1%;
    color: var(--dark-blue);
}

.inside-blog ul {
    /*list-style-type: disc;*/
    padding-left: 20px;
}

.inside-blog li, .inside-blog p {
    color: var(--dark-blue);
    font-size: 14px;

    font-family: 'Poppins', sans-serif;
    font-weight: 300;         
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0; 
    margin-bottom: 5px;
}

/*
.inside-blog em,
.inside-blog i {
    font-family: "Gyst Variable", 'Inter';
    font-variation-settings: 'wght' 500;
    font-size: 18px;
    letter-spacing: -1%; 
    color: var(--cyan);
}
*/


.inner-blog-title em,
.inner-blog-title i {
    font-family: "Gyst Variable", 'Inter';
    font-variation-settings: 'wght' 500;
    font-size: 45px;
    letter-spacing: -1%; 
    color: var(--cyan);
}


.blog-articles {
    margin-bottom: 50px;
}

.blog-articles:nth-last-child() {
    margin-bottom: 0;
}


.small-blog-posts {
    margin-bottom: 20px;
}

/*--------------Inside Blog Page End----------------------*/

/*--------------Vaacancy Page ----------------------*/

.vacancy-title {
    margin-top: 15px;
    margin-bottom: 60px;
}

.vacancy h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;            
    font-size: 45px;
    line-height: 50px;
    letter-spacing: -1%;
    color: var(--dark-blue);
}

.vacancy span {
    font-family: 'Gyst Variable', 'Inter';
    font-variation-settings: 'wght' 550;           
    font-style: italic;             
    font-size: 45px;
    line-height: 50px;
    letter-spacing: -1%;
    color: var(--cyan);
}

.vacancy h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;        
    font-size: 18px;
    line-height: 25px;
    letter-spacing: -1%;
    color: var(--dark-blue);
}

.vacancy ul {
    list-style-type: disc;
    padding-left: 20px;
}

.vacancy li, .vacancy p {
    color: var(--dark-blue);
    font-size: 14px;

    font-family: 'Poppins', sans-serif;
    font-weight: 300;         
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0; 
    margin-bottom: 5px;
}

.vacancy .blog {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;          
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0; 
    color: var(--dark-blue);
    margin-bottom: 10px;
}

.vacancy .buttoncontainer {
    margin-top: 45px;
}

.key-points {
    margin-top: 30px;
}
/*--------------Vacancy Page End----------------------*/

/*----------------Project Page---------------------------*/
.project-image {
    overflow: hidden;
    margin: var(--sectionSpacer) 0;
}

.project-img {
    width: 100%;
    height: 600px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /*margin-top: 95px;*/
}

.project-img.fullsize {
    height: 100vh;
}

.project-half .leftside {
    flex: 1;
}

.project-half .leftside p {
    text-align: left;
    font-weight: 300;
}

.project-half .rightside {
    flex: 2;
}

.project-title {
    color: var(--cyan);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;          
    font-size: 45px;
    line-height: 50px;
    letter-spacing: -1%; 
    text-align: left;
    width: 70%;
    margin-bottom: 50px;
}

.project-slogan {
    font-family: Poppins;
    font-weight: 300;
    font-size: 14px;
    line-height: 22px;
    color: var(--dark-blue);
}

.project-slogan ul li:before {
    display: none;
}

.content_area .project-slogan ul li {
    color: var(--dark-blue);
}


.project-desc {
    font-family: Poppins;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0%;
    color: var(--dark-blue);
    width: 90%;
}

/*.project-media {
    margin: var(--sectionSpacer) 0;
} */

img.project-media {
    height: auto;
    width: 100%;;
    margin-left: auto;
    margin-right: auto;
}

.project-page p {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;         
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0; 
    color: var(--dark-blue);
    margin-bottom: 50px;
}

.casestudy2 {
    width: 100%;
    height: 100%;
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;
    aspect-ratio: 5/2;
}


.rightside.fullsize {
    min-height: 600px;
}

#about_section .rightside.fullsize {
    min-height: 715px;
}

.project-half.text-img .casestudy2 {
    height: 100%;
    margin-bottom: 10px;
}

.casestudy2.fullsize {
    aspect-ratio: 3/3;
}

.project-half.text-img .casestudy2.fullsize {
    height: 100%;
}


.project-half.text-img .project-half.halfimg .casestudy2 {
    margin-bottom: 0;
}

.casestudy1 {
    width: 100%;
    height: 100%;
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;
    /*object-fit: cover;
    object-position: center;
    aspect-ratio: 4/4;*/
    position: absolute;
    top: 0;
    right: 0;
}

.casestudy2.sidebyside {
    width: 100%;
    height: auto;
}

.project-half.margin_to_padded {
    padding: var(--miniSectionSpacer) 0;
}

.project-half.text-img .leftside {
    flex:1;
    align-content: center;
}

.project-half.text-img .rightside {
    flex:1;
    align-content: center;
    position: relative;
    /*min-height: 600px;*/
}

.project-half.halfimg {
    margin:  var(--sectionSpacer) 0;
}

/*----------------Project Page End---------------------------*/


    /*-------------------- Project Inside  Page-------------------------------*/
    
    .inside-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 600; 
        font-size: 45px;
        line-height: 50px;
        letter-spacing: -1%; 
        text-align: center;
        color: var(--dark-blue);
        margin-bottom: 30px;
    }

    .inside-links {
        font-family: 'Poppins', sans-serif;
        font-weight: 600; 
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0%; 
        color: var(--cyan);
        column-gap: 10px;
        justify-content: center;
    }

    .inside-links a:hover {
        color: var(--dark-blue);
        text-decoration: none;
    }

    .inside-links .filter.active {
        color: var(--dark-blue);
        text-decoration: underline;
    }

    .client-project-name {
        font-family: 'Poppins', sans-serif;
        font-weight: 300; 
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0%; 
        color: var(--dark-blue);
        margin: 10px 0;
    }

      
      
    .card-holder {
        gap:20px;
        flex-wrap: wrap;
        opacity: 1;
        transition: opacity 0.35s ease-in-out; 
    } 
    
    .card-holder.fade-out {
        opacity: 0;
    }

    /* if featured is enabled, card width should be 33.3%, otherwise card width should be 25%*/
    .card {
        flex: 1 1 calc(33.3% - 20px);
        max-width: calc(33.3% - 20px);
        box-sizing: border-box;
        transition: all 0.3s ease;
    }

    .card.featured {
        flex: 1 1 calc(66.6% - 20px);
        max-width: calc(66.6% - 20px);
    }

    .card-image {
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        padding-top: 66%;
    }

    .portfolio-image {
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        min-height: 300px;
        position: relative;
    }

    .view-portfolio .buttoncontainer {
        position:absolute;
        bottom: -35px;
        right: 20px;
    }

/*--------------------- Project Inside Page-------------------------------*/

/*--------------------- About Us Page-------------------------------*/

.text-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; 
    font-size: 45px;
    line-height: 50px;
    letter-spacing: -1%; 
    text-align: left;
    color: var(--dark-blue);
    margin-bottom: 30px;
}

.about-us .project-half .leftside p {
    text-align: left;
    width: 70%;
}

.about-us-desc {
    width: 80%;
    font-weight: 300;
    font-size: 16px;
}

.about-us-desc p {
    font-size: 16px;
}

.about-us-desc + .buttoncontainer, .about-us-desc + .buttoncontainer .bigbutton {
    margin-bottom: 0;
}

.section .about-us-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 50px;
    font-size: 45px;
    letter-spacing: 1%;
}

.section .about-us-content p {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    line-height: 25px;
    font-size: 18px;
    letter-spacing: -1%;
    text-align: left;
}

.about-us-heading {
    margin-bottom: 50px;
}

/*--------------------- About us Page End-------------------------------*/

.half.rightside .padded {
    padding: 100px 160px;
}


.testimonials .testimonial_container p {
    padding-right: 180px;
    text-align: left;
}

.footer a {
    display: inline-block;
}

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

    /*------------Slider----------------*/

    .item1 {
        height: 380px;
    }
    .item2 {
        height: 380px;
    }
    .item3 {
        height: 546px;
    }
    .item4 {
        height: 517px;
    }
    .item5 {
        height: 352px;
    }
}

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

	.desktop, .tablet_portrait, .tablet_landscape, .mobile {
		display: none;
	}
	
	.tablet_landscape {
		display: block;
	}
    
    /* ---------- */
	.marketing-solutions .spacer{
        flex: 0;
    }
    
}

@media screen and (max-width: 900px) {
	
	.desktop, .tablet_portrait, .tablet_landscape, .mobile {
		display: none;
	}
	
	.tablet_portrait {
		display: block;
	}
	
	/* ---------- */

    #panel > .marketing-solutions  {
        margin-top: 95px !important;
    }

    .wrapper > .marketing-solutions.margin_to_padded  {
        margin-top: 95px !important;
    }

    #panel + .video_section {
        margin-top: 95px;
    }

    .sectionspacer.nicetables.content_area p {
        width: 100%;
    }

    .video_content_area .video_section {
        height: 33vh;
    }

    .blog-section {
        margin-top: -41px;
        padding-top: 40px;
    }

    .section h1 {
        font-size: 30px;
        line-height: 35px;
        font-weight: 600;
    }

    .section p {
        font-weight: 300;
        font-size: 18px;
        line-height: 25px;
        letter-spacing: -1%;
    }

    .section .project-half p {
        font-size: 16px;
    }

    .heading_section.section {
        padding: 70px;
    }

    .heading_section {
        margin-top: 95px !important;
    }

    .mobilemenubar .rightbutton .icon {
        background-color: var(--cyan);
    }

    .mobilemenubar .logocontainer img {
        margin: auto;
    }


    .marketing-solutions h1 {
        margin-top: 0;
        font-size: 25px;
        font-weight: 600;
        line-height: 40px;
        letter-spacing: -1%;
    }

    section.marketing-solutions {
        margin: calc(var(--sectionSpacer) - 20px) 0;
    }

    .marketing-slogan p{
        font-size: 25px;
    }

    .marketing-slogan span{
        font-size: 25px;
    }

    .marketing-solutions .container.narrower {
        width: 70%;
    }
	
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .our-work .img-holder {
        flex: 100%;
        width: 100%;
        margin-bottom: 20px;
    }

    .our-work .buttoncontainer {
        bottom: 10px;
    }
    
    .card-holder {
        flex-direction: column;
        row-gap: 20px;
    }


    .card, .card.featured {
        flex: 1;
    }

    .card {
        flex: 1 1 calc(100% - 20px);
        max-width: calc(100%);
        /* max-width: calc(100% - 20px); */
        box-sizing: border-box;
        transition: all 0.3s ease;
        height: auto;
        width: 100%;
        margin-bottom: 20px;
    }

    .card.featured {
        flex: 1 1 calc(100% - 20px);
        max-width: calc(100%);
        /* max-width: calc(100% - 20px); */
    }

    section.view-portfolio  {
        margin: var(--miniSectionSpacer) 0;
    }

    .project-inside .inside-title {
        text-align: left ;
        margin-top: calc(var(--sectionSpacer)*1.5);
    }

    .project-inside .inside-links {
        flex-direction: column;
        row-gap: 20px;
    }

    .project-inside, .project-grid {
        margin: var(--miniSectionSpacer) 0;
    }


        /*--------------Our Services----------------*/

        .info_section {
            padding-bottom: 150px;
           
        }


        .info_section_container {
            background-color: transparent;
            /* services removed - position: absolute; */
            z-index: 100;
            top: 0;
            margin: 0;
            margin-top: 0;
        }
    
        .info_section_heading p {
            font-size: 40px;
            line-height: 35px;
            letter-spacing: -1%;
            text-align: center;
        }
        
        .info_section_heading em,
        .info_section_heading i {
            font-family: "Gyst Variable", 'Inter';
            font-variation-settings: 'wght' 500;
            font-size: 45px;
            letter-spacing: -5%; 
            color: var(--white);
            font-style: normal;
        }
    
        .info_section {
            position: relative;
        }

    
        .info_section span{
            font-size: 35px;
            line-height: 100%;
            font-variation-settings: 'wght' 550;
        }
    
        .info_section h2 {
            font-family: 'Poppins';
            font-weight: 300;
            font-size: 18px;
            line-height: 28px;
            letter-spacing: 1%;
            text-align: left;
    
            width: 100%;
        }

        
    
        .info_section .columns-5 .column:nth-child(5), .info_section .columns-5 .column:nth-child(6), .info_section .columns-5 .column:nth-child(7), .info_section .columns-5 .column:nth-child(8),
        .info_section .columns-5 .column:nth-child(9), .info_section .columns-5 .column:nth-child(10) {
            display: none;
        }
    
        .info_section .columns-5 {
            text-align: left;
            margin-top: 40px;
        }

        .columns-6 {
            margin-left: -12px
        }    

        .info_section .services_container .iconpart {
            font-size: 35px;
            padding: 5px 20px;
            width: 40px;
            text-align: center;
            margin-left: 0px;
        }


        .info_section .services_container .contentpart {
            text-align: left;
            font-size: 13px;
            margin-left: -9px;
        }
    
        /*services removed - .about .mobile_image, .info_section .mobile_image {
            height: 75vh;
            z-index: -50;
            position: relative;
        }*/

        .about .mobile_image, .info_section .mobile_image { 
            height: 0;
        }
    
        .info_section.nobutton .mobile_image {
            height: 80vh;
            z-index: -50;
            position: relative;
        }
    
        .info_section .services_container {
            margin-top: 25px;
            padding-bottom: 15px;
        }
    
        .columns-6 .column {
            width: 45%;
        }
    
        .info_section .column:nth-child(-n+5) {
            padding-top: 0;
            border-top: none;
            margin-bottom: 35px;
        }
    
        .info_section .services_container .iconpart {
            font-size: 30px;
            padding: 5px 10px;
        }
    
        .info_section .buttoncontainer {
            position: absolute;
        }  

        .info_section .mobile_image::has( + .about) {
            height: 109vh;
        }
    
        /*--------------Services Section End-----------------*/


            /*-------------Three steps section----------------*/

    .three-steps {
        padding: var(--smallerSectionSpacer) 0 !important;
    }                                                                                                                                                                                                                                                                                                                                                                                         

    .three-steps .flex {
        flex-direction: column;
    }

    .step {
        border-right: none;
        border-top: 1px solid var(--light-pink);
        margin-left: 10px;
        margin-bottom: 20px;
        padding-top: 30px;
    }

    .step:first-child {
        border-top: none;
    }

    .step-number {
        font-family: 'Poppins', sans-serif;
        font-weight: 275;          
        font-style: normal;        
        font-size: 50px;
        line-height: 100%;
    }

    .step-desc {
        width: 98%;
        margin-left: 0;
    }

    .three-steps p { 
        font-variation-settings: 'wght' 400;
        font-size: 21px;
    }

    .three-steps span {
        font-variation-settings: 'wght' 550;
        font-size: 25px;
    }

    .three-steps .step {
        margin-bottom: 0;
    }

    .plan-section .bottomrow .first-title {
        width: 100%;
    }

    .plan-section .bottomrow .step-number {
        margin-bottom: 30px;
    }
    /*---------Services Page-----------*/
    .plan-section {
        margin: var(--miniSectionSpacer) 0;
    }

    .services-slogan h1 {
        text-align: left;
        font-size: 28px;
    }

    .our-work {
        margin-bottom: 0;
    }

    .our-work .container {
        width: 100%;
    }

    .our-work .flex {
        width: 100%;
    }

    .flex.steps {
        flex-direction: column;
    }

    .flex.three-steps {
        flex-direction: column;
    }

    .bottomrow.flex {
        flex-direction: column;
    }

    .plan-section .toprow {
        border-bottom: none;
    }

    .three-steps .step {
        padding-top: 30px;
    }

    .plan-section .step {
        border-top: none;
    }

    .step .leftstep {
        border-right: none;
    }
    
    .leftstep .step-number {
        color: var(--cyan);
    }
    .rightstep{
        margin-left: 0;
        width: 100%
    }

    .gapbig {
        gap: 0;
    }

    .step{
        padding-top: 0;
    }

    .toprow .step-number {
        color: var(--cyan);
    }

    .bottomrow .rightstep .step-number{
        color: var(--cyan);
    }

    .plan-section .step-desc {
        border-bottom: 2px solid var(--cyan);
    }

    .plan-section .rightstep .step-desc {
        border-bottom: none;
    }


    .plan-section .step {
        margin-bottom: 0;
    }

    .bottomrow .leftstep{
        margin-bottom: 20px;
        width: 100%;
    }

    .plan-section .forty {
        width: 100%;
    }

    .forty .stacked-steps-desc {
        width: 100%;
        font-size: 25px;
    }

    .plan-section .sixty {
        width: 100%;
        margin-top: 30px;
    }

    .plan-section .first-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 300;            
        font-size: 20px;
        line-height: 25px;    
        letter-spacing: 0%;
        color: var(--dark-blue);        
    }

    .plan-section .step-info {
        padding-bottom: 45px;
    }

    .plan-section .three-steps .step {
        padding-top: 0;
    }

    .plan-section .plan-title {
        font-size: 35px;
    }

    .plan-section .step-desc {
        margin-left: 0;
    }

    .plan-section .bottomrow .step-desc {
        margin-top: 0;
    }

    .casestudy1 {
        position: inherit;
        margin-left:  25%;
    }

    .project-img {
        height: 450px;
    }

    /*--------------Blog Page ----------------------*/

    .big-blog-posts .flex {
        flex-direction: column-reverse;
    }

    .big-blog-posts a {
        width: 100%;
    }

    .big-blog-posts .blog-desc {
        display: none;
    }

    .big-blog-posts .blog-title {
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 0%;
        width: 100%;
    }
    

    .big-blog-posts .blog-date {
        font-size: 10px;
    }

    .big-blog-posts + .blog-section {
        margin-top: 0;
    }

    .big-blog-posts:has(+ .blog-section) {
        margin-bottom: 0;
    }

    .big-blog-posts .blog-title, .blog-section .blog-title {
        margin-top: 15px;
    }

    .inside-blog .flex {
        flex-direction: column-reverse;
    }

    .inside-blog .blog-textbox {
        margin-bottom: 10px;
    }

    .inside-blog h1 {
        font-size: 30px;
        line-height: 35px;
        letter-spacing: -1%;
        margin-bottom: 50px;
    }

    .inside-blog .blog-date {
        font-size: 15px;
        line-height: 24px;
        margin-top: 40px;
        margin-bottom: 10px;
    }

    .blog-img.mobile.tablet_portrait {
        width: 100%;
        height: 400px;
    }

    .blog-section .small-blog-posts {
        width: 100%;
    }

    section .inside-blog h4 {
        font-size: 18px;
    }
    
    .project-half.title-desc {
        margin: var(--miniSectionSpacer) 0;
    }

    .project-half.title-desc .project-desc{
        font-size: 18px;
        line-height: 35px;
        width: 100%;
    }

    .project-half.title-desc .leftside {
        flex:2;
    }
    
    .project-half.title-desc .project-desc {
        font-size: 18px;
        line-height: 24px;
    }

    .project-half.margin_to_padded {
        padding: var(--miniSectionSpacer) 0;
    }

    #panel > .project-half.margin_to_padded {
        padding-top: 150px;
    }


    .project-half.text-img .flex {
        flex-direction: column-reverse;
    }

    .project-half.text-img .flex.gapbiggest {
        gap: 50px;
    }

    .project-half.text-img.who-we-are .casestudy1 {
        width: 100%;
        height: 400px;
        margin-left: 0;
    }

    .project-half.text-img.who-we-are .text-title {
        font-size: 30px;
        line-height: 35px;
    }

    .project-half.text-img.who-we-are .about-us-desc {
        font-size: 18px;
        line-height: 25px;
        width: 100%;
    }

    .project-half + .section .buttoncontainer {
        margin: 0 auto;
    }

    .project-half.halfimg .flex  {
        flex-direction: column;
        row-gap: 25px;
    }

    .inside-blog .inner-blog-title em,
    .inside-blog .inner-blog-title i {
        font-family: "Gyst Variable", 'Inter';
        font-variation-settings: 'wght' 500;
        font-size: 30px;
        line-height: 35px;
        letter-spacing: -1%; 
        color: var(--cyan);
    }

    .half.rightside .padded {
        padding: 50px;
    }

    .testimonials .testimonial_container p {
        padding: 0;
    }
    .testimonials .flex {
        flex-direction: column;
    }

    .testimonials .forty, .testimonials .sixty {
		position: relative;
	}

    .testimonials .buttoncontainer {
        display: block;
        position: absolute;
        left: 0;
    }

    .testimonials .sixty {
        text-align: left;
        font-size: 35px;
        line-height: 35px;
        font-weight: 600;
        width: 80%;
    }

    .testimonials .slider_container {
        /*margin-top: 241px;*/
        margin-top: 152px;
    }

    .testimonials .thetestimonials {
        padding-top: 0;
    }
    .testimonials .testimonial_container .testimonial_profile .testimonial_details .business {
        font-size: 20px;
    }

    .testimonials .sixty {
        width: 100%;
    }
    
    .testimonial_container {
        width: 400px;
    }

    .testimonials .slider_container {
        margin-top: 250px;
    }
    

    .section .testimonials p {
        font-weight: 300;
        font-size: 18px;
        line-height: 28px;
    }

    .testimonials .testimonials_nav {
        text-align: left;
    }

    /*-------------Brands Section-----------------*/

    .brands.margin_to_padded {
        padding: var(--miniSectionSpacer) 0;
    }

    .brands .twothirds h1 {
        text-align: left;
    }
    
    .brands .third {
        position: relative;
        height: 90px;
    }

    .brands .third .buttoncontainer {
        position: absolute;
        left: 0;
    }

    .brands .bigbutton {
        margin-top: 20px;
    }


    .brands .twothirds, .brands .third {
        text-align: left;
    }

    .brands .buttoncontainer {
        text-align: left !important;
    }

    /*-------------Brands Section End-----------------*/

    .images-grid {
        margin: var(--miniSectionSpacer) 0;
    }
    .carousel-img {
        width: 100%;
        height: auto;
        padding: 6%;
        padding-top: 6%;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    /*-------------Service images--------------*/

    .our-work .img-holder:nth-child(1), .our-work .img-holder:nth-child(2) {
        display: none;
    }

    .our-work .serviceimg3 {
        width: 100vw;
    }

    /*--------- about us -------*/

    #about_section .rightside.fullsize {
        min-height: 400px;
    }

    /*-------------Footer--------------*/
    .footer .footerdetails.flex {
        flex-direction: column;
        row-gap: 15px;
    }

    .footer .footerdetails .twothirds .inline.last {
        display: flex;
        margin-top: 0;
    }

}

@media screen and (max-device-width: 1680px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi), (max-width: 1440px) {
    .container.narrow { 
        width: var(--containerMobile) !important;
    }
}

@media screen and (max-width: 1300px) {
    .footer .footerdetails .twothirds .inline {
        display: flex;
    }
    .inline {
        display: inline-flex;
    }
    .footer .footerdetails .footernotes {
        margin-top: 0;
    }

    .footer.contactfooter h1 {
        font-size: 30px;
    }
    .footer.contactfooter .footerdetails .twothirds .inline:nth-child(1) {
        display: flex;
    }

    .footer.contactfooter .footerdetails .twothirds {
        text-align: left;
        font-size: 14px;
    }

    .footer.contactfooter .footerdetails .contactdetails {
        font-size: 14px;
        line-height: 20px;
    }

    .footer.contactfooter .sixty {
        padding-top: 0;
    }

    .footer.contactfooter .forty {
        padding-bottom: 0;
    }

    .contactfooter .footerdetails {
        padding-top: 10px;
    }

    .footer.contactfooter .twothirds.gap {
        gap: 30px;
    }

}

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


    .heading_section {
        margin-top: 93px !important;
    }

    .banner-text {
        margin-top: 11px;
    }

    .banner-text, .marketing-slogan{
        text-align: left;
    }

    .marketing-slogan {
        justify-content: left;
        margin-top: 30px;
    }

    /*.gro-logo {
        width: clamp(160px, 5vw, 100px);
    }*/

    .info_section_heading p {
        text-align: left;
    }

    .services-page + .plan-section {
        margin-top: 0;
    }

    .plan-section .toprow {
        padding-bottom: 30px;
    }

    .step .leftstep, .step .rightstep {
        padding-top: 30px;
    }

    .mute-toggle {
        width: 50px;
        height: 50px;
    }
 
    /*------------half half Section----------------*/


    .project-half.text-img .rightside {
        min-height: auto;
    }

    /*----------opportunities Section--------------*/

    .opportunities-title, .opportunities p {
        text-align: left;
    }

    .no-careers-msg {
        text-align: left;
        margin: 0 !important;
    }

    .opportunities .buttoncontainer {
        text-align: left;
    }

    .opportunities p {
        margin-bottom: 30px;
    }

    /*----------About Section--------------*/
    .about {
        margin-left: 0;
        margin-top: 0;
    }

    .about .buttoncontainer.nobottom {
       margin: 35px 0; 
    }
    
    .about .half, .about .half.sideimage {
        margin: auto;
    }

    .half.rightside .padded {
        padding: 20px 15px;
    }

    .section .about-us-heading {
        font-size: 30px;
        line-height: 35px;
    }

    .footer .forty {
        width: 100%;
    }


    .footer.contactfooter .forty {
        padding-top: 50px;
    }


    .footer.contactfooter .sixty {
        padding-bottom: 50px;
    }

    .footer.contactfooter.section.contactfooter {
        padding-top: 120px;
    }

    .footer .footerdetails .twothirds .mobile .inline {
        display: inline-flex;
    }

    .footerdetails .twothirds.flex {
        flex-direction: column;
        align-items: center;
        row-gap: 15px;
        margin: 10px 0;
    }

    .footer .logocontainer {
        margin-bottom: 15px;
    }

    .footer .footerdetails .inline  {
        display: flex;
        justify-content: center;
    }

    .footer .footerdetails .inline:nth-child(3), .footer .footerdetails .inline:nth-child(4) {
        display: none;
    }

    .footer .footerdetails .inline.last{
        display: block;
        margin-top: 10px;
    }

    .footer.contactfooter {
        padding: 15px 0;
    }
}


@media screen and (max-width: 600px) {
	
	.desktop, .tablet_portrait, .tablet_landscape, .mobile {
		display: none;
	}
	
	.mobile {
		display: block;
	}
	
	/* ---------- */

    .container.narrower {
        width: var(--containerMobile);
    }

    .container.narrow {
        width: var(--containerMobile) !important;
    }

    img, video {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .section .section h4 {
        font-size: 18px;
        line-height: 28px;
    }

    .video_content_area .video-background-controls .mute-toggle {
        padding: 0 !important;
    }

    /*-----------------Video Section--------------------*/
    .video-section {
        height: 17vh;
    }

    .custom-play-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
        margin-right: -25px;
    }

    .mute-toggle {
        font-size: 20px;
    }

    /*------------Marketing Section----------------*/

    .gro-logo {
        height: 60px;
    }

    .marketing-solutions p {
        font-size: 30px;
    }
    
    .marketing-solutions span {
        font-size: 30px;
    }

    .marketing-solutions + .project-half {
        padding-top: 0;
    }

    
    /*----------Services Section--------------*/

    .info_section .column:nth-child(-n+5) {
        margin-bottom: 20px;
    }

    .info_section_container {
        padding: 20px 5% !important;
    }

    /*----------Services Section End--------------*/

    /*--------------------Testimonials Section----------------------------*/

    .testimonials.section.double {
        padding: 50px 0;
    }
    /*--------------------Testimonials Section End----------------------------*/

    /*--------------------Footer Section----------------------------*/

    .footer h1{
        text-align: left;
    }

    .footer .forty p {
        text-align: left;
    }

    .footer.contactfooter .footerdetails .inline {
        margin-bottom: 0;
    }


    /*--------------------Footer Section End----------------------------*/
    


    .forty p {
        width: 100%;
        font-size: 18px;
    }
    /*---------Services Page-----------*/

    /*-------------Careers Page------------------*/
    

    .opportunities{
        margin: var(--miniSectionSpacer) 0;
    }


    .opportunities-title {
        font-size: 25px;
    }

    .opportunities p {
        font-size: 18px;
        padding: 20px 10px;
    }

    .circlebutton {
        margin: auto 15px auto 0;
    }
    .opportunities .biggestbutton {
        width: 85%;
        text-align: left;
        margin-left: 15px;
    }

    .aboutus-text {
        font-size: 20px;
        letter-spacing: 0;
        line-height: 28px;
    }
    
    /*-------------Careers Page End------------------*/

    /*--------------Blog Page----------------------*/

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-section .flex {
        flex-direction: row;
        justify-content: flex-start;
    }

    /*--------------Blog Page End----------------------*/

    
    /*--------------Inside Blog Page End----------------------*/

    /*--------------------Vacancy Page---------------------------*/

    .vacancy .blog-date {
        font-size: 10px;
    }

    .vacancy h1 {
        font-size: 30px;
        margin-top: -5px;
        margin-bottom: 50px;
    }

    .vacancy span {
        font-size: 35px;
    }

    .footerdetails .twothirds.flex {
        align-items: flex-start;
        row-gap: 5px;
    }

    .footer .footerdetails .inline {
        justify-content: flex-start;
    }

    .footer .footerdetails .inline {
        text-align: left;
    }

    /*--------------------Vacancy Page End---------------------------*/

    /*--------------------Project Inside Page---------------------------*/
   

    /*--------------------Project Inside Page End---------------------------*/

    /*----------------Footer------------------*/


}