/**
 * Theme Name:     Marram Law Theme
 * Author:         Studio Louise
 * Description:    Marram Law - Working with clients globally, providing legal advice to those in the creative and financial services sectors.
 * Template:       twentytwentyone
 * Text Domain:	   twenty-twenty-one-child
 */


 @charset "utf-8";
 :root, [data-bs-theme=light] {
	--color1: 255, 255, 255;
	--color2: 0, 0, 0;
	   /* --color3: 255, 255, 255;
	   --color4: 0, 0, 0; */
	--ff1: 'Cormorant Garamond', serif;
	--ff2: 'Cormorant Garamond Bold Italic', serif;
	--ff3: 'Cormorant Garamond Bold', serif;
}

@font-face {
font-family: 'Cormorant Garamond';
src: url('fonts/CormorantGaramond-Bold.woff2') format('woff2'),
       url('fonts/CormorantGaramond-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Cormorant Garamond';
src: url('fonts/CormorantGaramond-Regular.woff2') format('woff2'),
       url('fonts/CormorantGaramond-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Cormorant Garamond Bold Italic';
src: url('fonts/CormorantGaramond-BoldItalic.woff2') format('woff2'),
       url('fonts/CormorantGaramond-BoldItalic.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

* {
	box-sizing: border-box
}

img {
	max-width: 100%;
	height: auto
}

* {
	padding: 0;
	margin: 0
}

*, ::before, ::after {
	box-sizing: border-box
}

html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0,0,0,0)
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
	display: block
}

a {
	text-decoration: none;
	color: inherit
}

.container-fluid {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto
}

.row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px
}

.text-center {
	text-align: center!important
}

.text-left {
	text-align: left!important
}

.text-right {
	text-align: right!important
}

.pull-left {
	float: left!important
}

.pull-right {
	float: right!important
}

.no-gutters {
	margin-right: 0;
	margin-left: 0
}

.no-gutters>.col, .no-gutters>[class*=col-] {
	padding-right: 0;
	padding-left: 0
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
	position: relative;
	width: 100%;
	padding-right: 15px;
	padding-left: 15px
}

.col {
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%
}

.col-auto {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: auto;
	max-width: 100%
}

.col-1 {
	-ms-flex: 0 0 8.333333%;
	flex: 0 0 8.333333%;
	max-width: 8.333333%
}

.col-2 {
	-ms-flex: 0 0 16.666667%;
	flex: 0 0 16.666667%;
	max-width: 16.666667%
}

.col-3 {
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%
}

.col-4 {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%
}

.col-5 {
	-ms-flex: 0 0 41.666667%;
	flex: 0 0 41.666667%;
	max-width: 41.666667%
}

.col-6 {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%
}

.col-7 {
	-ms-flex: 0 0 58.333333%;
	flex: 0 0 58.333333%;
	max-width: 58.333333%
}

.col-8 {
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%
}

.col-9 {
	-ms-flex: 0 0 75%;
	flex: 0 0 75%;
	max-width: 75%
}

.col-10 {
	-ms-flex: 0 0 83.333333%;
	flex: 0 0 83.333333%;
	max-width: 83.333333%
}

.col-11 {
	-ms-flex: 0 0 91.666667%;
	flex: 0 0 91.666667%;
	max-width: 91.666667%
}

.col-12 {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%
}

.order-first {
	-ms-flex-order: -1;
	order: -1
}

.order-last {
	-ms-flex-order: 13;
	order: 13
}

.order-0 {
	-ms-flex-order: 0;
	order: 0
}

.order-1 {
	-ms-flex-order: 1;
	order: 1
}

.order-2 {
	-ms-flex-order: 2;
	order: 2
}

.order-3 {
	-ms-flex-order: 3;
	order: 3
}

.order-4 {
	-ms-flex-order: 4;
	order: 4
}

.order-5 {
	-ms-flex-order: 5;
	order: 5
}

.order-6 {
	-ms-flex-order: 6;
	order: 6
}

.order-7 {
	-ms-flex-order: 7;
	order: 7
}

.order-8 {
	-ms-flex-order: 8;
	order: 8
}

.order-9 {
	-ms-flex-order: 9;
	order: 9
}

.order-10 {
	-ms-flex-order: 10;
	order: 10
}

.order-11 {
	-ms-flex-order: 11;
	order: 11
}

.order-12 {
	-ms-flex-order: 12;
	order: 12
}

.flex-row {
	-ms-flex-direction: row!important;
	flex-direction: row!important
}

.flex-column {
	-ms-flex-direction: column!important;
	flex-direction: column!important
}

.flex-row-reverse {
	-ms-flex-direction: row-reverse!important;
	flex-direction: row-reverse!important
}

.flex-column-reverse {
	-ms-flex-direction: column-reverse!important;
	flex-direction: column-reverse!important
}

.flex-wrap {
	-ms-flex-wrap: wrap!important;
	flex-wrap: wrap!important
}

.flex-nowrap {
	-ms-flex-wrap: nowrap!important;
	flex-wrap: nowrap!important
}

.flex-wrap-reverse {
	-ms-flex-wrap: wrap-reverse!important;
	flex-wrap: wrap-reverse!important
}

.flex-fill {
	-ms-flex: 1 1 auto!important;
	flex: 1 1 auto!important
}

.flex-grow-0 {
	-ms-flex-positive: 0!important;
	flex-grow: 0!important
}

.flex-grow-1 {
	-ms-flex-positive: 1!important;
	flex-grow: 1!important
}

.flex-shrink-0 {
	-ms-flex-negative: 0!important;
	flex-shrink: 0!important
}

.flex-shrink-1 {
	-ms-flex-negative: 1!important;
	flex-shrink: 1!important
}

.justify-content-start {
	-ms-flex-pack: start!important;
	justify-content: flex-start!important
}

.justify-content-end {
	-ms-flex-pack: end!important;
	justify-content: flex-end!important
}

.justify-content-center {
	-ms-flex-pack: center!important;
	justify-content: center!important
}

.justify-content-between {
	-ms-flex-pack: justify!important;
	justify-content: space-between!important
}

.justify-content-around {
	-ms-flex-pack: distribute!important;
	justify-content: space-around!important
}

.align-items-start {
	-ms-flex-align: start!important;
	align-items: flex-start!important
}

.align-items-end {
	-ms-flex-align: end!important;
	align-items: flex-end!important
}

.align-items-center {
	-ms-flex-align: center!important;
	align-items: center!important
}

.align-items-baseline {
	-ms-flex-align: baseline!important;
	align-items: baseline!important
}

.align-items-stretch {
	-ms-flex-align: stretch!important;
	align-items: stretch!important
}

.align-content-start {
	-ms-flex-line-pack: start!important;
	align-content: flex-start!important
}

.align-content-end {
	-ms-flex-line-pack: end!important;
	align-content: flex-end!important
}

.align-content-center {
	-ms-flex-line-pack: center!important;
	align-content: center!important
}

.align-content-between {
	-ms-flex-line-pack: justify!important;
	align-content: space-between!important
}

.align-content-around {
	-ms-flex-line-pack: distribute!important;
	align-content: space-around!important
}

.align-content-stretch {
	-ms-flex-line-pack: stretch!important;
	align-content: stretch!important
}

.align-self-auto {
	-ms-flex-item-align: auto!important;
	align-self: auto!important
}

.align-self-start {
	-ms-flex-item-align: start!important;
	align-self: flex-start!important
}

.align-self-end {
	-ms-flex-item-align: end!important;
	align-self: flex-end!important
}

.align-self-center {
	-ms-flex-item-align: center!important;
	align-self: center!important
}

.align-self-baseline {
	-ms-flex-item-align: baseline!important;
	align-self: baseline!important
}

.align-self-stretch {
	-ms-flex-item-align: stretch!important;
	align-self: stretch!important
}

.form-group {
	width: 100%;
	margin-bottom: 20px
}

.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto
}

.slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
	width: 100%
}

.slick-list {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0
}

.slick-list:focus {
	outline: none
}

.slick-list.dragging {
	cursor: pointer;
	cursor: hand
}

.slick-slider .slick-track, .slick-slider .slick-list {
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0)
}

.slick-track {
	position: relative;
	top: 0;
	left: 0;
	display: block;
	margin-left: auto;
	margin-right: auto
}

.slick-track:before, .slick-track:after {
	display: table;
	content: ''
}

.slick-track:after {
	clear: both
}

.slick-loading .slick-track {
	visibility: hidden
}

.slick-slide {
	display: none;
	float: left;
	height: 100%;
	min-height: 1px
}

[dir='rtl'] .slick-slide {
	float: right
}

.slick-slide img {
	display: block
}

.slick-slide.slick-loading img {
	display: none
}

.slick-slide.dragging img {
	pointer-events: none
}

.slick-initialized .slick-slide {
	display: block
}

.slick-loading .slick-slide {
	visibility: hidden
}

.slick-vertical .slick-slide {
	display: block;
	height: auto;
	border: 1px solid transparent
}

.slick-arrow.slick-hidden {
	display: none
}

html {
	scroll-behavior: smooth;
}

/* Scroll padding */

html {
	scroll-padding-top: 10rem;
}

body {
	font-size: 24px;
	line-height: 1.25;
	font-family: var(--ff1);
	font-weight: 400;
	background: rgba(var(--color1));
	color: rgba(var(--color2));
}

.container {
	max-width: 1320px;
	width: 100%;
	margin: auto;
}

p:not(:last-child) {
	margin: 0 0 20px;
}

a:hover {
	text-decoration: none;
	color: #8e8e8e;
}

.about-sec1 a {
	text-decoration: none;
	color: #000;
}

.about-sec1 a:hover {
	text-decoration: none;
	color: #8e8e8e;
}

.home-sec1 {
	position: relative;
	display: flex;
	gap: 0.55vw;
	flex-direction: column;
	background: rgba(var(--color2));
	color: rgba(var(--color2));
	padding: 0.55vw;
	position: relative;
}

.home-sec1 .image-blocks {
	display: flex;
	gap: 0.55vw;
}

.home-sec1 .image-block {
	width: calc(16.666% - 0.458vw);
}

.home-sec1 .image-block img {
	width: 100%; 
	   /* aspect-ratio: 1.5;  */
	   /* height: ; */
	height: calc(20vh - 0.6vw);
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	cursor: pointer;
}

.home-sec1 .image-block:hover img {
	opacity: 1;
}

.home-sec1 .logo-block {
	width: calc(33.332% - 0.458vw);
	height: calc(20vh - 0.6vw);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.home-sec1 .logo-block img {
	width: 100%;
}

.home-sec1 .logo-block a {
	width: 93%;
	display: block;
}

.home-sec2 {
	padding: 50px 0;
	text-align: center;
}

.home-sec2 .enter {
	position: relative;
	line-height: 1.8;
	display: inline-block;
}

.home-sec2 .enter::after {
	content: "";
	width: 50%;
	height: 2px;
	background: currentColor;
	position: absolute;
	left: 0;
	bottom: 0;
}

footer {
	padding: 50px 0 0;
}

footer .content {
	color: #8e8e8e;
	font-weight: 400;
}

footer .content:not(:last-child) {
	margin: 0 0 25px;
}

footer .content a {
	color: #8e8e8e;
}

footer .content a:hover {
	text-decoration: none;
	color: #000;
}

footer h5 {
	color: #8e8e8e;
	margin: 0 0 25px;
	position: relative;
}

footer h5::after {
	position: absolute;
	left: 0;
	bottom: -13px;
	content: "";
	width: 20px;
	height: 2px;
	background: currentColor;
}

footer .col-3 {
	-ms-flex: 0 0 30%;
	flex: 0 0 30%;
	max-width: 30%;
}

footer .col-3:nth-child(1), footer .col-3:nth-child(4) {
	-ms-flex: 0 0 20%;
	flex: 0 0 20%;
	max-width: 20%;
}

.footerbottom {
	background: rgba(var(--color2));
	color: rgba(var(--color1));
	padding-block: 1vw;
	margin-top: 3vw;
	text-align: right;
	font-size: 60%;
	font-weight: bold;
}

header {
	padding: 50px 0;
	position: sticky;
	top: 0;
	background: rgba(var(--color1));
	z-index: 5;
	transition: all 0.4s ease-in-out;
}

header .menuIcon {
	float: right;
	cursor: pointer;
}

.about-sec1 {
	padding-block: 60px;
	font-size: 115%;
}

.about-sec1 .container {
	padding-inline: calc(20% - 15px);
}

.about-sec2 {
	/*padding-block: 60px;*/
	padding: 0 0 60px;
}

.about-sec2 h4 {
	font-size: 115%;
	font-weight: normal;
	margin: 0 0 100px;
	position: relative;
}

.about-sec2 h4::after {
	position: absolute;
	left: 0;
	bottom: -13px;
	content: "";
	width: 20px;
	height: 2px;
	background: currentColor;
}

.about-sec2 .container {
	padding-inline: calc(20% - 15px) 15px;
}

.about-sec2 .policyUl {
	list-style: none;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0;
	display: flex;
	font-size: 70%;
}

body.home header {
	display: none;
}

.teamSec1 {
	padding: 50px 0;
}

.teamSec1 .block {
	display: flex;
	gap: 30px;
}

.teamSec1 .block {
	border-bottom: 1px solid currentColor;
	padding-bottom: 40px;
	margin-bottom: 40px;
}

.teamSec1 .block .content {
	width: calc(74% - 30px);
}

.teamSec1 .block .teamImg {
	width: 26%;
	aspect-ratio: 0.85;
	background: #D9D9D9;
}

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

.teamSec1 .block .teamInfoUl {
	margin: 0 0 20px;
	font-size: 80%;
	padding: 0;
	list-style: none;
}

.teamSec1 .block .teamInfoUl li:not(:last-child) {
	margin-bottom: 5px;
}

.teamSec1 .container {
	padding-inline: calc(20% - 15px) 15px;
}

.contactSec {
	padding: 50px 0;
}

.contactSec .container {
	padding-inline: calc(11% - 15px);
}

.contactSec iframe {
	width: 100%;
	aspect-ratio: 1.5;
	height: auto !important;
	border: none;
	filter: grayscale(1);
}

.headerMenu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.headerMenu a {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
}

.headerMenu a::before {
	content: "";
	width: 0;
	height: 1px;
	background: currentColor;
	margin-right: 10px;
	transition: width 0.4s ease-in-out;
	display: block;
}

.headerMenu a:hover:before {
	width: 50px;
}

header .row {
	align-items: center;
}

header .col-9 {
	align-items: center;
	display: flex;
	justify-content: end;
	flex-direction: row;
}

.headerMenu {
	/* transform: translateY(-200%); */
	width: 200px;
	transition: transform 0.4s ease-in-out;
}

header.isOpen .headerMenu {
	display: flex;
	flex-direction: column;
	margin-left: auto;
	  
	  /* transform: translateY(0%); */
} 
/* body.openMenu header{ background: rgba(var(--color2)); color: rgba(var(--color1)); padding: 20px 0; }  */

/* body.openMenu .menuIcon{ display: none; } */

header.isOpen .col-9 {
	align-items: start;
}

header.isOpen .col-3 img {
	filter: brightness(0) invert(1);
}

header.isOpen {
	background: rgba(var(--color2));
	color: rgba(var(--color1));
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	transform: translateY(-100%);
	transition: all 0.4s ease-in-out;
	padding: 25px 0;
}

body.openMenu header.isOpen {
	transform: translateY(0%);
}

.about-sec1 h2 {
	margin: 35px 0;
	font-family: var(--ff3);
	font-weight: 400;
	font-size: 90%;
	position: relative;
}

.about-sec1 h2::after {
	position: absolute;
	left: 0;
	bottom: -13px;
	content: "";
	width: 20px;
	height: 2px;
	background: currentColor;
}

.about-sec1 h3 {
	margin: 0 0 10px;
	font-family: var(--ff3);
	font-weight: 400;
	font-size: 100%;
	font-weight: 400;
	position: relative;
}

.about-sec1 h4 {
	margin: 35px 0 10px;
	font-family: var(--ff2);
	font-weight: 400;
	font-size: 100%;
	font-weight: 400;
	position: relative;
}

.about-sec1 ul {
	margin-left: 40px;
}

.about-sec1 ol {
	margin-left: 40px;
}

.about-sec1 li:not(:last-child) {
	margin-bottom: 10px;
}

.about-sec1 ul:not(:last-child) {
	margin-bottom: 30px;
}

.about-sec1 ol:not(:last-child) {
	margin-bottom: 30px;
}

@media (max-width: 1024px) and (min-width:481px) {
	.home-sec1 .image-block:first-child {
		display: none;
	}
	
	.home-sec1 .image-block:last-child {
		display: none;
	}
	
	.home-sec1 .image-block {
		width: calc(25% - 0.412vw);
	}
	
	.home-sec1 .logo-block {
		width: calc(50% - 0.458vw);
	}
}

@media (min-width:481px) {
	.hod {
		display: none !important;
	}
}
@media (max-width:480px) {
	.hom {
		display: none !important;
	}
	
	.mobileImagesBlock {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(100vh - 10vw);
	}
	
	.mobileImagesBlock .imageBlock img {
		height: 33vh;
		width: 100%;
		object-fit: cover;
		display: block;
	}
	
	.home-sec1 {
		gap: 0vw;
		padding: 5vw;
	}
	
	.home-sec1 .logo-block {
		width: 100%;
	}
	
	.home-sec1 .logo-block {
		width: calc(100% - 10vw);
	}
	
	.home-sec1 .logo-block a {
		width: 100%;
		display: block;
	}
	
	footer .col-3:not(:last-child) {
		margin-bottom: 40px;
	}
	
	footer .col-3 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	
	footer .col-3:nth-child(1), footer .col-3:nth-child(4) {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	
	.footerbottom {
		padding-block: 20px;
		margin-top: 30px;
		font-size: 70%;
	}
	
	.about-sec1 .container, .about-sec2 .container, .teamSec1 .container, .contactSec .container {
		padding-inline: 15px;
	}
	
	.about-sec2 .policyUl {
		flex-direction: column;
	}
	
	.about-sec2 .policyUl {
		font-size: 85%;
	}
	
	.teamSec1 .block {
		flex-direction: column-reverse;
	}
	
	.teamSec1 .block .content {
		width: 100%;
	}
	
	.teamSec1 .block .teamImg {
		width: 100%;
		max-width: 200px;
	}
	
	header .col-3, header .col-9 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	
	.headerMenu a:hover::before {
		width: 30px;
	}
}