/*
Theme Name: Water Law Theme
Theme URI: https://www.tulanewater.org/
Author: Norward Sears
Version: 1.0
Author URI: https://www.tulanewater.org/
Tags: Water Law, Law School, Tulane University, Green Wave, New Orleans
Description: Welcome to our brand new Tulanw Water Law Template! Each part of the template is custom to our day to day needs of post confidential information to faculty, staff and law school students.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licensesgpl-2.0.html
Text Domain: water
*/


@charset "UTF-8";
/* 
$content-width will be the max width of the content within the navigation bar. 
$breakpoint determines at which width the media query breakpoint will take effect.
*/
/*
body {
  background-color: #63D6E0;
}
*/

/*Homepage CSS below*/

:root {
  --bg:#3c3b6e;
  --fg:#F5F5F0;
  --gold:#C5A059;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 4px;
}

/* Decorative outline stroke */
.text-stroke {
  -webkit-text-stroke: 1px rgba(197, 160, 89, 0.55);
  color: rgba(245, 245, 240, 0.05);
  text-shadow: 0 0 18px rgba(197, 160, 89, 0.1);
  opacity: 0.75;
}

.img-container {
  overflow: hidden;
}

.img-container img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.img-container:hover img {
  transform: scale(1.1);
}

/* Loader */
.loader {
  position: fixed;
  inset: 0;
  background: #3c3b6e;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-text {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem,5vw,3rem);
  color: var(--gold);
  opacity: 0;
  transform: translateY(10px);
  text-align: center;
}

/* Initial reveal */
.reveal-on-load {
  opacity: 0;
  transform: translateY(14px);
}

/* Utility fallbacks for Tailwind brand classes */
.text-brand-gold {
  color: var(--gold) !important;
}

.bg-brand-gold {
  background-color: var(--gold) !important;
}

.border-brand-gold {
  border-color: var(--gold) !important;
}

.bg-brand-dark {
  background-color: var(--bg) !important;
}

.bg-brand-gray {
  background-color: #2A2A2A !important;
}

/* Focus visibility */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Glass + showcase helpers */
.glass-panel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.showcase-frame {
  position: relative;
  border: 1px solid rgba(197, 160, 89, 0.25);
  background: radial-gradient(700px circle at 20% 20%, rgba(197, 160, 89, 0.18), transparent 60%), radial-gradient(600px circle at 80% 30%, rgba(255, 255, 255, 0.06), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.15));
  overflow: hidden;
}

.showcase-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 14px);
  opacity: 0.35;
  pointer-events: none;
}

.showcase-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
}

/*Homepage CSS Above*/



nav {
  float: right;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  float: left;
  position: relative;
  z-index: 100;
}

nav ul li a {
  display: block;
  padding: 0 20px;
  line-height: 104px;
  background: #ffffff;
  color: #463f3f;
  text-decoration: none;
  /*
  The full path of this code is nav ul li a:not(:only-child):after. This means that the code will apply to any a tag in our nav list that is NOT an only child, aka any dropdown. The :after means it comes after the output of the tag. I’ve decided that to specify any nav item as a dropdown, it will be followed by a unicode arrow – ▾ (#9662).
  */
}

nav ul li a:hover {
  background: #f2f2f2;
  color: #fb5958;
}

nav ul li a:not(:only-child):after {
  padding-left: 4px;
  content: " ▾";
}

nav ul li ul li {
  min-width: 190px;
}

nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}

.nav-dropdown {
position: absolute;
  z-index: 1;
  /* Guarantees that the dropdown will display on top of any content. */
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  display: none;
}

.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  height: 70px;
  width: 70px;
}

@media only screen and (max-width: 800px) {
  .nav-mobile {
    display: block;
  }

  nav {
    width: 100%;
/*    padding: 70px 0 15px;*/
  }

  nav ul {
    display: none;
  }

  nav ul li {
    float: none;
  }

  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }

  nav ul li ul li a {
    padding-left: 30px;
  }
}
#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #463f3f;
  position: absolute;
  display: block;
  content: "";
  transition: all 300ms ease-in-out;
}

#nav-toggle span:before {
  top: -10px;
}

#nav-toggle span:after {
  bottom: -10px;
}

#nav-toggle.active span {
  background-color: transparent;
}

#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}

#nav-toggle.active span:before {
  transform: rotate(45deg);
}

#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

@media screen and (min-width: 800px) {
  .nav-list {
    display: block !important;
  }
}
/* 
.navigation – the outer wrapper for the navbar. Specifies the height and color, and will stretch the full width of the viewport.
*/
.navigation {
  height: 70px;
  background: #ffffff;
}

/*
.nav-container – the inner wrapper for the navbar. Defines how far the actual content should stretch.
*/
.nav-container {
  max-width: 1000px;
  margin: 0 auto;
}

.brand {
/*    position: absolute;*/
    padding-left: 20px;
    float: left;
    line-height: 70px;
    text-transform: uppercase;
    font-size: 1.4em;
	width: 34%;
}

.brand a,
.brand a:visited {
  color: #463f3f;
  text-decoration: none;
}
/*Menu Core CSS End*/

/*Custom CSS Begins*/

button,hr,input{overflow:visible}
audio,canvas,progress,video{display:inline-block}
progress,sub,sup{vertical-align:baseline}
html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

/*Top Homepage Video Banner Buttons*/
.vid-button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 22px;
  margin: 4px 2px;
  cursor: pointer;
}

.vid-button1 {background-color: #185440;} /* Green */


/*Top Homepage Video Banner Buttons END Norward Sears*/

.layout--onecol div .block-type-basic {
    padding: 0 0%;
}

.font-serif {
    font-family: bookmania__bold;
}

.mt-10 {
    margin-top: 0rem;
}

ul li {
    line-height: 33px;
}

.after\:border-b-\[10px\]::after {
    content: var(--tw-content);
    border-right-width: 0px;
    border-bottom-width: 0px;
}

a .ns-top-button{
	width: 21%;
}

.showcase
{
  position: relative;
  right: 0;
  width: 100%;
  min-height: 100vh; /*80vh*/
  padding: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #111;
  transition: 0.5s;
  z-index: 2;
}
.showcase.active
{
  right: 300px;
}

.showcase video
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*opacity: 0.8;*/
}
.overlay
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2a543e00;   /*#21543f*/
  mix-blend-mode: overlay;
}
.text
{
  position: relative;
  z-index: 10;
  width: 100%;
}

.text h2
{
  font-size: 5em;
  font-weight: 800;
  color: #fff;
  line-height: 1em;
  /*text-transform: uppercase;*/
}
.text h3
{
  font-size: 3em;
  font-weight: 700;
  color: #fff;
/*  line-height: 2.5em;*/
  /*text-transform: uppercase;*/
}
.text p
{
  font-size: 1.1em;
  color: #fff;
  margin: 20px 0;
  font-weight: 400;
  max-width: 700px;
}
.text a
{
  display: inline-block;
  font-size: 1.5em;
    background: #00BCD4; /*Just in Case #94C9EE*/
    padding: 10px 30px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    margin-top: 10px;
    color: #ffffff;
  letter-spacing: 2px;
  transition: 0.2s;
}
.text a:hover
{
  letter-spacing: 6px;
color:#000;
}

.leading-8 {
    line-height: 2.5rem;
    text-decoration: none;
    font-family: 'bookmania';
}

.leading-none {
    line-height: 1.2;
    font-family: 'bookmania';
}

@media (max-width: 991px)
{
	
	.showcase
{
  
  min-height: 40vh; /*100vh 60vh*/
  
}
	
	
  .showcase,
  .showcase header
  {
    padding: 40px;
  }
  .text h2
  {
    font-size: 1.8em; /*2.6em - 3em*/
  }
  .text h3
  {
    font-size: 1.6em; /*2em*/
  }
}


/*Green Buttons*/

.auto-grid {
  --auto-grid-min-size: 24rem;
  
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: 0.23rem;
  margin-left: 0px;
}

@media (max-width: 1547px){
	
	.auto-grid {
  --auto-grid-min-size: 19rem;
}
}

/* Presentational styles */

/*body {
  background: #efefef;
  padding: 0rem;
  line-height: 1.4;
  font-family: sans-serif;
}*/

.auto-grid li {
  padding: 5rem 1rem;
  text-align: center;
  font-size: 1.2rem;
/*  background: #eb4d4b;*/
  color: #ffffff;
  text-align-last: center;
  display: inherit;
}

.block-type-basic ul {
    margin-left: 0px;
    font-size: 0px;
}

.auto-grid a:hover{
	background: #11A361;
	text-decoration: none;
	color: #ffffff;
}
.auto-grid a:link{
	background: #1e6344;
	text-decoration: none;
	color: #ffffff;
}

/**/

/* Box sizing rules */

* {
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: inherit;
}

/* Remove margin and padding from elements */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
dd,
figure,
figcaption,
dl,
dd,
dt {
  margin: 0px;
  padding: 0px;
}

/* Inherit colors */
h1,
h2,
h3,
h4,
p,
li,
dt,
dd {
  color: currentColor;
}

body {
  /* Hide persistent scrollbar in IE (10/11) and Edge */
  -ms-overflow-style: -ms-autohiding-scrollbar;

  /* Anchor links will transition rather than skip */
  scroll-behavior: smooth;

  /* Reset font size to 1rem, in case it has a pixel value */
/*  font-size: 1rem;*/

  min-height: 100vh;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration: none;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  cursor: pointer;
}
/* Turn off the recent search in WebKit. */
::-webkit-search-decoration {
  display: none;
}

/* Normalise form field line-height in WebKit */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
  line-height: normal;
}

/* Make a search box appear like a text box */
input[type='search'] {
  -webkit-appearance: textfield;
}

/* Make images responsive */
img {
  max-width: 100%;
}

/* Remove _all_ animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  body {
    scroll-behavior: auto;
  }

  * {
    -webkit-animation: none !important;
            animation: none !important;
    transition: none !important;
  }
}
/**/

/*Green Buttons END*/

/*Clinic donate btn*/

.big-background{

	background-image: url(https://dev-tu-law-d9.pantheonsite.io/sites/default/files/2023-06/Law-School-top3.png);
	width: 100%;
	height: 100vh; 
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	
	}
	
	.donate-btn-clinic-bkgd{
	/*	background-color: #3c5986;*/
	width: 100%;
	height: auto;
	padding: 50px;
	background-image: -webkit-linear-gradient(270deg,rgba(60,89,134,1.00) 28.19%,rgba(69,92,139,0.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(60,89,134,1.00) 28.19%,rgba(69,92,139,0.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(60,89,134,1.00) 28.19%,rgba(69,92,139,0.00) 100%);
	background-image: linear-gradient(180deg,rgba(60,89,134,1.00) 28.19%,rgba(69,92,139,0.00) 100%);
	}

./*layout--fourcol-section .layout__region, .layout--threecol-section .layout__region {
    padding: 62px;
}*/


/**/

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';
@import 'https://fonts.googleapis.com/css?family=Raleway:100,600';
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300';

html,
body {
  width: 100%;
  height: 100%;
}

/*
body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  color: #999;
  background-color: #fff;
}
*/

/*
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 20px 0;
  text-transform: none;
  color: rgba(254, 82, 76, 1);
  font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.5;
}

a:link,
a:active,
a:visited{
  color:rgba(255,255,255,1);
}

a:hover{
  color:rgba(255,255,255,0.6);
}
*/


.gray {
  color: #a5a5a5;
}

.team{
  margin:40px;
}

.team-member {
  margin: 15px 0;
  padding: 0;
}

.team-member figure {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.team-member figure img {
  min-width: 100%;
}

.team-member figcaption p {
  font-size: 16px;
}

.team-member figcaption ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.team-member figcaption ul {
  visibility: visible;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.team-member figcaption ul li {
  display: inline-block;
  padding: 10px;
}

.team-member h4 {
  margin: 10px 0 0;
  padding: 0;
}

.team-member figcaption {
  padding: 50px;
  color: transparent;
  background-color: transparent;
  position: absolute;
  z-index: 996;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.team-member figure:hover figcaption {
  visibility: visible;
  color: #fff;
  background: rgba(24 84 64 / 80%);
  /* Primary color, can be changed via colors.css */
  
  height: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.team-member figure:hover figcaption ul li a:hover {
  color: rgba(49, 49, 49, .97);
}

.team-member figure img {
  -webkit-transform: scale(1) rotate(0) translateY(0);
  -moz-transform: scale(1) rotate(0) translateY(0);
  -o-transform: scale(1) rotate(0) translateY(0);
  -ms-transform: scale(1) rotate(0) translateY(0);
  transform: scale(1) rotate(0) translateY(0);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.team-member figure:hover img {
  -webkit-transform: scale(1.1) rotate(1deg) translateY(12px);
  -moz-transform: scale(1.1) rotate(1deg) translateY(12px);
  -o-transform: scale(1.1) rotate(1deg) translateY(12px);
  -ms-transform: scale(1.1) rotate(1deg) translateY(12px);
  transform: scale(1.1) rotate(1deg) translateY(12px);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

/******* Common Element CSS Start ******/
* {
  margin: 0px;
  padding: 0px;
}
body {
  font-family: "Roboto", sans-serif;
  font-size: 20px; /*16px*/
}
.clear {
  clear: both;
}
img {
	max-width: 100%;
	border: 0px;
	border-bottom-left-radius: 0px;
}
ul,
ol {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
  outline: none;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
a:focus,
a:active,
a:visited,
a:hover {
  text-decoration: none;
  outline: none;
}
a:hover {
  color: #e73700;
}
h2 {
/*  padding-bottom: 16px;*/
  
  font-weight: 700;
/*  position: relative;*/
/*  text-transform: capitalize;*/
}
h3 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 36px;
}
button {
  outline: none !important;
}
/******* Common Element CSS End *********/

/* -------- title style ------- */
.line-title {
	font-size: 3rem;
/*
  position: relative;
  width: 400px;
*/
}
.line-title::before,
.line-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  border-radius: 2px;
}
.line-title::before {
  width: 100%;
  background: #f2f2f2;
}
.line-title::after {
  width: 32px;
  background: #e73700;
}

/******* Middle section CSS Start ******/
/* -------- Landing page ------- */
.game-section {
	padding: 60px 50px;
	background: #255c4e;
	margin-left: 7%;
	border: 12px solid #255C4E;
	margin-right: 7%;
	margin-bottom: 7%;
    margin-top: 7%;
	border-radius: 24px;
}
.game-section .owl-stage {
  margin: 15px 0;
  display: flex;
  display: -webkit-flex;
}
.game-section .item {
  margin: 0 15px 60px;
  width: 320px;
  height: 400px;
  display: flex;
  display: -webkit-flex;
  align-items: flex-end;
  -webkit-align-items: flex-end;
  background: #343434 no-repeat center center / cover;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  cursor: pointer;
}
.game-section .item.active {
  width: 500px;
  box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25);
}
.game-section .item:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}
.game-section .item-desc {
  padding: 0 24px 12px;
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transform: translateY(calc(100% - 54px));
  -webkit-transform: translateY(calc(100% - 54px));
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
.game-section .item.active .item-desc {
  transform: none;
  -webkit-transform: none;
}
.game-section .item-desc p {
  opacity: 0;
  -webkit-transform: translateY(32px);
  transform: translateY(32px);
  transition: all 0.4s ease-in-out 0.2s;
  -webkit-transition: all 0.4s ease-in-out 0.2s;
}
.game-section .item.active .item-desc p {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.game-section .owl-theme.custom-carousel .owl-dots {
  margin-top: -20px;
  position: relative;
  z-index: 5;
}
/******** Middle section CSS End *******/

/***** responsive css Start ******/

@media (min-width: 992px) and (max-width: 1199px) {
  h2 {
    margin-bottom: 32px;
  }
  h3 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 32px;
  }

  /* -------- Landing page ------- */
  .game-section {
    padding: 50px 30px;
  }
  .game-section .item {
    margin: 0 12px 60px;
    width: 260px;
    height: 360px;
  }
  .game-section .item.active {
    width: 400px;
  }
  .game-section .item-desc {
    transform: translateY(calc(100% - 46px));
    -webkit-transform: translateY(calc(100% - 46px));
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  h2 {
    margin-bottom: 32px;
  }
  h3 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 32px;
  }
  .line-title {
    width: 330px;
  }

  /* -------- Landing page ------- */
  .game-section {
    padding: 50px 30px 40px;
  }
  .game-section .item {
    margin: 0 12px 60px;
    width: 240px;
    height: 330px;
  }
  .game-section .item.active {
    width: 360px;
  }
  .game-section .item-desc {
    transform: translateY(calc(100% - 42px));
    -webkit-transform: translateY(calc(100% - 42px));
  }
}

@media (max-width: 767px) {
	
  .brand {

	width: 60%;
}
	
	.box-sbs {
	
	min-height: 26vh; /*50vh*/
	
}
	
  body {
    font-size: 14px;
  }
  h2 {
    margin-bottom: 20px;
  }
  h3 {
    margin: 0 0 8px;
    font-size: 19px;
    line-height: 24px;
  }
  .line-title {
    width: 250px;
  }

  /* -------- Landing page ------- */
  .game-section {
    padding: 30px 15px 20px;
  }
  .game-section .item {
    margin: 0 10px 40px;
    width: 200px;
    height: 280px;
  }
  .game-section .item.active {
    width: 270px;
    box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25);
  }
  .game-section .item-desc {
    padding: 0 14px 5px;
    transform: translateY(calc(100% - 42px));
    -webkit-transform: translateY(calc(100% - 42px));
  }
}


/*In The Media Section*/

body, html {
  height: 100%;
  background-color: white;
}

.h-100 {
    height: 34% !important; /*60%*/
}

.container2 {
  overflow: hidden;
}
.container2 .slider {
  animation: slidein 30s linear infinite;
  white-space: nowrap;
}
.container2 .slider .logos {
  width: 100%;
  display: inline-block;
  margin: 0px 0;
}
.container2 .slider .logos .fab {
  width: calc(100% / 5);
  animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*Side by Side Divs*/

.container-sbs {
  display: flex;
  flex-wrap: wrap; /* Ensures responsiveness */
  gap: 10px; /* Optional spacing between boxes */
  margin-right: 7%;
  margin-left: 7%;	
  padding-bottom: 100px;	
 
}

.box-sbs {
	flex: 1 1 45%; /* Adjusts width and allows wrapping */
	min-width: 200px; /* Ensures a minimum width */
	padding: 20px;
	text-align: left;
	
	border-radius: 24px;
	border-collapse: collapse;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 50vh;
	background-position: center 0%;
}

.join-our-newsletter{
	font-size: 4.2rem;
	line-height: 70px;
	color: #00BCD4;
	
}



/*footer*/

.pg-footer {
  font-family: 'Roboto', sans-serif;
}


.footer {
    background-color: #004658;
    color: #fff;
}
.footer-wave-svg {
    background-color: transparent;
    display: block;
    height: 30px;
    position: relative;
    top: -1px;
    width: 100%;
}
.footer-wave-path {
    fill: #ffffff;
}

.footer-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1230px;
    padding: 40px 15px 450px;
    position: relative;
	
}

.footer-content-column {
    box-sizing: border-box;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    color: #fff;
}

.footer-content-column ul li a {
  color: #fff;
  text-decoration: none;
}

.footer-logo-link {
    display: inline-block;
}
.footer-menu {
    margin-top: 30px;
}

.footer-menu-name {
    color: #fffff2;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .1em;
    line-height: 18px;
    margin-bottom: 0;
    margin-top: 0;
    text-transform: uppercase;
}
.footer-menu-list {
    list-style: none;
    margin-bottom: 0;
    margin-top: 10px;
    padding-left: 0;
}
.footer-menu-list li {
    margin-top: 5px;
}

.footer-call-to-action-description {
    color: #fffff2;
    margin-top: 10px;
    margin-bottom: 20px;
}
.footer-call-to-action-button:hover {
    background-color: #fffff2;
    color: #00bef0;
}
.button:last-of-type {
    margin-right: 0;
}
.footer-call-to-action-button {
    background-color: #027b9a;
    border-radius: 21px;
    color: #fffff2;
    display: inline-block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    line-height: 18px;
    padding: 12px 30px;
    margin: 0 10px 10px 0;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .2s;
    cursor: pointer;
    position: relative;
}
.footer-call-to-action {
    margin-top: 30px;
}
.footer-call-to-action-title {
    color: #fffff2;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .1em;
    line-height: 18px;
    margin-bottom: 0;
    margin-top: 0;
    text-transform: uppercase;
}
.footer-call-to-action-link-wrapper {
    margin-bottom: 0;
    margin-top: 10px;
    color: #fff;
    text-decoration: none;
}
.footer-call-to-action-link-wrapper a {
    color: #fff;
    text-decoration: none;
}





.footer-social-links {
    bottom: 0;
    height: 54px;
    position: absolute;
    right: 0;
    width: 236px;
}

.footer-social-amoeba-svg {
    height: 54px;
    left: 0;
    display: block;
    position: absolute;
    top: 0;
    width: 236px;
}

.footer-social-amoeba-path {
    fill: #027b9a;
}

.footer-social-link.linkedin {
    height: 26px;
    left: 3px;
    top: 11px;
    width: 26px;
}

.footer-social-link {
    display: block;
    padding: 10px;
    position: absolute;
}

.hidden-link-text {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    top: 50%;
}

.footer-social-icon-svg {
    display: block;
}

.footer-social-icon-path {
    fill: #fffff2;
    transition: fill .2s;
}

.footer-social-link.twitter {
    height: 28px;
    left: 62px;
    top: 3px;
    width: 28px;
}

.footer-social-link.youtube {
    height: 24px;
    left: 123px;
    top: 12px;
    width: 24px;
}

.footer-social-link.github {
    height: 34px;
    left: 172px;
    top: 7px;
    width: 34px;
}

.footer-copyright {
    background-color: #3C3B6E;
    color: #fff;
    padding: 15px 30px;
  text-align: center;
}

.footer-copyright-wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}

.footer-copyright-text {
  color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 0;
    margin-top: 0;
}

.footer-copyright-link {
    color: #fff;
    text-decoration: none;
}







/* Media Query For different screens */
@media (min-width:320px) and (max-width:479px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
  .footer-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1230px;
    padding: 40px 15px 1050px;
    position: relative;
  }
}
@media (min-width:480px) and (max-width:599px)  { /* smartphones, Android phones, landscape iPhone */
  .footer-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1230px;
    padding: 40px 15px 1050px;
    position: relative;
  }
	
}
@media (min-width:500px) and (max-width: 800px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
  .footer-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1230px;
    padding: 40px 15px 1050px;
    position: relative;
  }
	
.box-sbs {
	flex: 1 1 45%; /* Adjusts width and allows wrapping */
	min-width: 100%; /* Ensures a minimum width */
	padding: 20px;
	text-align: center;
	
	min-height: 50vh; /*50vh*/
	background-position: center 0%;
}
	
	
}
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */
	
	

}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */

}
@media (min-width:1281px) { /* hi-res laptops and desktops */

}




@media (min-width: 760px) {
  .footer-content {
      margin-left: auto;
      margin-right: auto;
      max-width: 1230px;
      padding: 40px 15px 450px;
      position: relative;
  }

  .footer-wave-svg {
      height: 50px;
  }

  .footer-content-column {
      width: 24.99%;
  }
}
@media (min-width: 568px) {
  /* .footer-content-column {
      width: 49.99%;
  } */
}

/*---------- BANNER / ARTICLE CSS BELOW ----------*/
/*---------- VARIABLES ----------*/
/*---------- COLORS ----------*/
/*---------- GENERAL ----------*/
body {
  background: #fff;
  color: #5b5b5b;
  /*font: 300 1em/1.5em "Lato", sans-serif;*/
  margin: 0;
}

a {
  color: #3498db;
  text-decoration: none;
}
a:hover {
  color: #217dbb;
}

article {
  display: block;
}

h2 {
  font-size: 2em;
  line-height: 1.25em;
  margin: 0 0 0.25em 0;
}

h3 {
  font-size: 1.5em;
  line-height: 1.33em;
  margin: 0 0 0.33em 0;
}

h4 {
  font-size: 1em;
  line-height: 1.5em;
  margin: 0 0 0.5em 0;
}

p {
  margin: 0 0 0.5em 0;
}

/*---------- UTILITIES ----------*/
.clearfix, .nav-main ul, .container {
  *zoom: 1;
}
.clearfix:before, .nav-main ul:before, .container:before, .clearfix:after, .nav-main ul:after, .container:after {
  content: " ";
  display: table;
}
.clearfix:after, .nav-main ul:after, .container:after {
  clear: both;
}

/*---------- GRID ----------*/
.container {
  margin: 0 auto;
/*  width: 940px;*/
}

/*---------- HEADER ----------*/
.header {
  padding: 1em 0;
}

/*---------- MAIN ----------*/
.main {
  margin-top: 3em;
}

/*---------- NAVIGATIONS ----------*/
.nav-main {
  float: right;
}
.nav-main ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-main li {
  float: left;
  margin: 0 0.5em;
}
.nav-main li.first {
  margin-left: 0;
}
.nav-main li.last {
  margin-right: 0;
}
.nav-main a {
  color: #5b5b5b;
  display: inline-block;
}

/*---------- POSTS ----------*/
.post {
  margin-bottom: 2em;
}

/*---------- BANNER ----------*/
/* INFO
   Banner Graphic must be at least the height of .banner + height of parent element (in this case the header)
   e.g.  .banner { height: 22em }
         .header { height: 3.5em }
         22em + 3.5em = 25.5em
         25.5em * 16px = 408px
         => Banner Graphic must be at least 408px height!

Graphic: http://unsplash.com/post/81123587039/download-by-wojtek-witkowski
*/
.banner {
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-image: url(img/law-house-cropped3.png);
	background-attachment: fixed;
	height: 22em;
	position: relative;
	overflow: hidden;
	width: 100%;
	background-color: #3C3B6E;
}

.banner-text {
  color: #fff;
  font-size: 1.25em;
  left: 0;
  position: absolute;
  top: 37%; /*75%*/
  text-align: center;
  text-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
  width: 100%;
}

/*Hrishi Kabra Grid*/

.container-hk {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 20px;
}

.grid-hk {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

@media (min-width: 640px) {
  .grid-hk {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-hk {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card-hk {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.card-hk:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-image-hk {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background-color: #e5e7eb;
}

.card-image-hk img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-content-hk {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-title-hk {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-description-hk {
  font-size: 13px;
  color: #666;
  margin-bottom: 16px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
}

.card-footer-hk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.author-hk {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.avatar-hk {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background-color: #e5e7eb;
}

.author-info-hk {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.author-name-hk {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date-hk {
  font-size: 11px;
  color: #999;
  white-space: nowrap;
}

.bookmark-hk {
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.bookmark-hk:hover {
  color: #333;
}

.bookmark-hk svg {
  display: block;
}