/*
Theme Name: India Seatrade
Theme URI: https://indiasetrade.com
Author: Your Name
Author URI: https://indiasetrade.com
Description: Custom WordPress theme for India Seatrade
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: india-seatrade
*/

/* --------------------------------------------
	Column
-------------------------------------------- */

.column {
	margin: 0;
	text-align: center;
}

.one-column {
	float: left;
	padding: 0 15px 30px;
	text-align: left;
}
 
.two-column, 
.three-column, 
.four-column {
	padding: 0 15px 30px;
	display: inline-block;
	text-align: left;
	margin-right: -4px;
	vertical-align: top;
}

.two-column-full-width,
.four-column-full-width {
	float: left;
	padding: 0;
}

.one-column,
#primary .two-column {
	width:100%;
}

.two-column,
.two-column-full-width,
#primary .three-column,
#primary .four-column-full-width,
#primary .four-column {
	width: 50%;
}

.three-column,
.boxed-layout-small .four-column-full-width,
.three-column-full-width {
	width: 33.33%;
}

.four-column,
.four-column-full-width {
	width: 25%;
}

.boxed-layout-small .four-column-full-width:nth-child(4n+5) {
 	clear: none;
}

.four-column-full-width:nth-child(4n+5),
.boxed-layout-small .four-column-full-width:nth-child(3n+4) {
 	clear: both;
}

.wrap {	
	margin: 0 auto;
	max-width: 95%;
	padding: 0;
	position: relative;
}

/* ----- Header Image ----- */
.header-image {
	width: 100%;
	height: auto;
}

/* Header Image*/
.custom-header-content {
	position: absolute;
	top: 50%;
	left: 15%;
	-ms-transform: translateX(0) translateY(-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
	width: 40%;
	z-index: 2;
}

.design-1 .custom-header-content {
	top: 55%;
}

.header-image-title {
	color: #fff;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 50px;
	font-weight: 700;
}

.header-image-sub-title {
	color: #fff;
	font-size: 26px;
	display: block;
	margin-bottom: 10px;
}

/* ----- Header Media ----- */
.custom-header {
	display: block;
	height: auto;
	position: relative;
	width: 100%;
}

.custom-header-wrap {
 	position: relative;
}

.about-box {
	background-color: #ffffff;
}

.about-box-bg {
	background-repeat: no-repeat;
	background-position: -25px -50px;
	background-size: calc(100% + 50px);
	padding: 120px 0 80px;
	position: relative;
}

.about-content {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.about-content-column {
	display: inline-block;
	margin-right: -4px;
	width: 50%;
	text-align: left;
	vertical-align: middle;
}

.about-box .box-header {
	text-align: center;
}

.about-content-wrap {
	padding: 0 30px;
}

.about-title:after {
	background-color: #f80068;
	content: "";
	display: block;
	height: 2px;
	margin-top: 25px;
	width: 15%;
}

.about-title,
.about-title a {
	font-size: 40px;
	font-weight: 700;
	line-height: 30px;
	position: relative;
	line-height: 1.5;
	color: #222;
	text-decoration: none;
}

.about-work-icon {
	display: inline-block;
	float: left;
	height: 40px;
	margin-right: 20px;
	width: 40px;
}

.about-work-text {
	float: left;
	font-family: "Montserrat";
}

.about-image img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

/* Flip Image and Content */

.flip-content .about-content-column {
	float: right;
	margin: 0;
}


/* New Event Box
================================================== */
.uc-event-box {
	position: relative;
	width: 100%;
	z-index: 1;
}

.uc-event-bg {
	background-color: #fbeef5;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding: 80px 0 50px;
}

.uc-event-content {
	position: relative;
}

.uc-img {
	display: block;
	margin-bottom: 10px;
	overflow: hidden;
	position: relative;
}

.uc-img img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.uc-img .event-overlay {
	background: rgba(0, 0, 0, 0.3);
	bottom: 20px;
	left: 20px;
	position: absolute;
	right: 20px;
	text-align: center;
	top: 20px;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	z-index: 1;
}

.uc-img:hover .event-overlay,
.uc-img a:focus .event-overlay  {
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
}

.uc-img .new-uc-img .event-overlay .uc-img-link {
	display: table;
	height: 100%;
	width: 100%;
}

.uc-img .new-uc-img .event-overlay .uc-img-link:before {
	color: #ffffff;
	content: '\f0c1';
	display: table-cell;
	font-family: 'Font Awesome 6 Free';
	font-size: 60px;
	font-weight: 900;
	opacity: 0.8;
	-moz-opacity: 0.8;
	filter:alpha(opacity=80);
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	vertical-align: middle;
}

.uc-img:hover .new-uc-img .event-overlay .uc-img-link:before,
.uc-img a:focus .new-uc-img .event-overlay .uc-img-link:before {
	font-size: 30px;
}

.uc-event-title,
.uc-event-title a {
	margin-bottom: 0;
	text-align: left;
	font-size: 20px;
	line-height: 1.467;
	color: #222;
	text-decoration: none;
}

a.more-link {
	display: inline-block;
	font-family: "Source Sans Pro",sans-serif;
	font-size: 12px;
	margin-left: 10px;
	position: relative;
	text-align: center;
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
	text-transform: capitalize;
	text-decoration: none;
}

a.more-link:hover {
	color: #222;
}

.uc-content p,
.uc-content a.more-link {
	font-size: 14px;
	color: #444;
}

/* Section Title
================================================== */
.box-header {
	text-align: center;
}

.box-title {
	color: #333;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.267;
	margin-bottom: 50px;
	position: relative;
}

.box-title span {
	margin-left: 10px;
}

.box-title span:first-child {
	margin-left: 0;
}

.box-title:before {
	background-color: #f80068;
	content: " ";
	display: block;
	height: 7px;
	margin: 0 auto;
	width: 7px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	transform: rotate(45deg);
}

.box-title:after {
	background-color: #333;
	content: " ";
	display: block;
	height: 1px;
	margin: 30px auto 0;
	width: 120px;
}

.box-sub-title {
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 40px;
	margin-top: -25px;
	float: left;
	width: 100%;
}

.word_1 {
	color: #f80068;
}



/* Portfolio Box
================================================== */
.portfolio-box {
	background-color: #fff8fb;
}

.portfolio-box .box-header {
	padding-top: 60px;
}

.portfolio-box .box-title {
	display: inline-block;
	border: 1px solid #333;
	padding: 15px 25px;
}

.portfolio-box .box-title:after {
	content: none;
}

.portfolio-box .box-title:before {
	bottom: -4px;
}

.portfolio-img,
.portfolio-image-inner {
	position: relative;
}

.portfolio-image-inner img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.portfolio-image-inner {
	margin: 0;
}

.portfolio-box .portfolio-link {
	display: block;
}

.portfolio-overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	opacity: 0;
	display: table;
	text-align: center;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	top: 0;
}

.portfolio-overlay:before {
	background-color: #f80068;
	position: absolute;
	content: '';
	right: 0px;
	top: 0px;
	width: 100%;
	height: 0%;
	display: block;
	opacity: 0;
	text-align: center;
	-webkit-transform: scaleY(0);
	-moz-transform: scaleY(0);
	-ms-transform: scaleY(0);
	-o-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: top;
	-moz-transform-origin: top;
	-ms-transform-origin: top;
	-o-transform-origin: top;
	transform-origin: top;
	-ms-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.portfolio-img:hover .portfolio-overlay:before,
.portfolio-img a:focus .portfolio-overlay:before {
	opacity: 0.7;
	-webkit-transform: scaleY(1);
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
	transform: scaleY(1);
	height: 100%;
}

.portfolio-img:hover .portfolio-overlay,
.portfolio-img a:focus .portfolio-overlay {
	opacity: 1;
}

.portfolio-overlay .portfolio-title {
	color: #fff;
	display: table-cell;
	font-size: 18px;
	line-height: 1.5;
	margin-bottom: 0;
	padding: 0 10px;
	opacity: 0;
	-webkit-transform: translateY(20px);
	-moz-transform: translateY(20px);
	-ms-transform: translateY(20px);
	-o-transform: translateY(20px);
	transform: translateY(20px);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
	vertical-align: middle;
}

.portfolio-img:hover .portfolio-title,
.portfolio-img a:focus .portfolio-title {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-transition-delay: 300ms;
	-moz-transition-delay: 300ms;
	-ms-transition-delay: 300ms;
	-o-transition-delay: 300ms;
	transition-delay: 300ms;
}

.entry-thumb img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.ist-content {
	background-color: #f6f6f6;
	padding: 40px 0px;
}

.ist-container {
	background: #fff;
	padding: 20px;
}

/* Responsive Styles
================================================== */

/* All size smaller than 1301 */
@media only screen and (max-width: 1300px) {
	.wrap,
	.boxed-layout #page,
	.boxed-layout-small #page {
		max-width: 94%;
	}

	.boxed-layout .wrap,
	.boxed-layout-small .wrap {
		max-width: 94%;
	}

	.four-column-full-width {
		width: 33.33%;
	}

	.four-column-full-width:nth-child(4n+5) {
		clear: none;
	}

	.four-column-full-width:nth-child(3n+4) {
		clear: both;
	}

	.header-image-title {
		font-size: 40px;
	}

	.about-box-bg {
		padding: 70px 0 30px;
	}
}

/* All size smaller than 1024
================================================== */
@media only screen and (max-width: 1023px) {
	.boxed-layout #page,
	.boxed-layout-small #page {
		overflow: hidden;
	}

	.header-image-title {
		font-size: 26px;
	}

	.header-image-sub-title {
		font-size: 18px;
	}

	/* ----- Column ----- */
	.column {
		margin: 0 -15px;
	}

	.two-column,
	.three-column,
	.four-column {
		padding: 0 15px 40px;
	}

	.two-column,
	.four-column,
	.three-column,
	.four-column-full-width,
	.business-sidebar .three-column,
	.boxed-layout-small .four-column-full-width {
		width: 50%;
	}

	.four-column-full-width:nth-child(3n+4),
	.boxed-layout-small .four-column-full-width:nth-child(3n+4),
	.column-2:nth-child(2n+3),
	.column-3:nth-child(3n+4),
	.column-4:nth-child(4n+5) {
 		clear: none;
	}

	.four-column-full-width:nth-child(2n+3),
	.boxed-layout-small .four-column-full-width:nth-child(2n+3) {
 		clear: both;
	}
}

/* All size smaller than 981px
================================================== */
@media only screen and (max-width: 980px) { 
/* ----- Responsive Navigation ----- */
	.custom-header-content {
		left: 7%;
		width: 50%;
	}

	.box-title,
	.box-title a,
	.about-title,
	.about-title a{
		font-size: 30px;
	}
}

/* All Mobile Screen ( smaller than 768px )
================================================== */
@media only screen and (max-width: 767px) {
	/* ----- Column ----- */
	.column {
		margin: 0;
	}
	
	.boxed-layout-small .four-column-full-width,
	#primary .three-column, 
	#primary .four-column-full-width, 
	#primary .four-column {
		margin: 0;
		width: 100%;
	}
	
	.four-column {
		padding: 0 10px 30px;
		width: 50%;
	}
	
	.three-column-post .post-container,
	.four-column-post .post-container {
		width: 50%;
	}
	
	.entry-title {
		font-size: 20px;
	}

	.custom-header-content {
		width: 60%;
	}

	.header-image-title {
		font-size: 18px;
		margin-bottom: 0;
	}

	.header-image-sub-title {
		font-size: 13px;
	}

	.box-title,
	.box-title a,
	.about-title,
	.about-title a {
		font-size: 24px;
	}

	.about-content-column,
	.flip-content .about-content-column {
		width: 100%;
		margin: 0 0 20px;
	}

	.about-content-wrap {
		padding: 0;
	}
}

/* All Mobile Screen ( smaller than 481px )
================================================== */
@media only screen and (max-width: 480px) {
	/* ----- Column ----- */
	.column {
		margin: 0;
	}

	.two-column-full-width,
	.four-column-full-width {
		margin: 0;
		width: 100%;
	}
	
	.two-column,
	.three-column,
	.four-column {
		padding: 0 0 30px;
		margin-right: 0;
		width: 100%;
	}
	
	.two-column-post .post-container,
	.three-column-post .post-container,
	.four-column-post .post-container {
		width: 100%;
	}
}

/* All Mobile ( smaller than 320px )
================================================== */
@media only screen and (max-width: 319px) {
	.wrap,
	.boxed-layout #page,
	.boxed-layout .wrap,
	.boxed-layout-small #page,
	.boxed-layout-small .wrap {
		width: 96%;
	}
}

/* Voice of ladies page design*/
.justify-text {
	text-align: justify;
}
/*
 * for hiding the div in mobile*/
@media screen and (max-width: 768px) {
  .my-hide-on-mobile-div {
    display: none; /* This hides the div */
  }
}

.font-for-all{
	font-family: normal 400 1em/1 "Font Awesome 6 Free";
}

.flash:hover {
  opacity: 1;
  -webkit-animation: flash 3s;
  animation: flash 3s;
}

@-webkit-keyframes flash {
  0% {  opacity: .3;  }
  100% { opacity: 1; }
}
@keyframes flash {
  0% { opacity: .3; }
  100% { opacity: 1;  }
}
/*card design here*/
.container_VOL{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 10px;
    margin: 0 auto;
  }
.card{
    position: relative;
    width: 300px;
    height: 250px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 15px 60px rgba(0,0,0, .5);
    border-radius: 15px;
  }
  
  .card .face{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .card .face.face1{
    box-sizing: border-box;
    padding: 20px;
  }
  
  .card .face.face1 h2{
    margin: 0;
    padding: 0;
  }
  
  .card .face.face1 .content{
    
		font-family: italic 500 2em/1 "Font Awesome 6 Free";
		text-align: center;
    margin:0;
    padding:0 0 1em 0;
    font-size:1.2em;
		font-weight:500;
  }
  
  .card .face.face2{
    background: #111;
    transition: 0.5s;
  }
  
  .card:nth-child(1) .face.face2{
    background: linear-gradient(45deg, #3503ad, #f7308c);
    border-radius: 15px;
  }
  
  .card:nth-child(2) .face.face2{
   background: linear-gradient(45deg, #f7308c, #3503ad);
    border-radius: 15px;
  }
  
  .card:nth-child(3) .face.face2{
   background: linear-gradient(45deg, #3503ad, #f7308c);
    border-radius: 15px;
  }
.card:nth-child(4) .face.face2{
   background: linear-gradient(45deg, #f7308c, #3503ad);
    border-radius: 15px;
  }
  .card:nth-child(5) .face.face2{
   background: linear-gradient(45deg, #3503ad, #f7308c);
    border-radius: 15px;
  }
  
  .card:hover .face.face2{
    height: 60px;
    border-radius: 0 0 15px 15px;
  }
  
  .card .face.face2:before{
    content:'';
    position: absolute;
    top:0;
    left:0;
    width: 50%;
    height: 100%;
    background: rgba(255,255,255, 0.1);
    border-radius: 15px 0 0 15px;
  }
  
  .card .face.face2 h2{
    margin: 0;
    padding: 0;
    font-size: 3em;
    color: #fff;
    transition: 0.5s;
    text-shadow: 0 2px 5px rgba(0,0,0, .2);
  }
  
  .card:hover .face.face2 h2{
    font-size: 2em;
  }
/*card effect end here

 * flip box start  here
*/


// base
.speaker_flip {
  
    position: relative;
    >.Speaker_front,
    >.Speaker_back {
      
      box-sizing: border-box; 
        display: block;
        transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
        transition-duration: 3s;
        transition-property: transform, opacity;
    }
    >.Speaker_front {
        transform: rotateY(0deg);
    }
    >.Speaker_back {
        position: absolute;
        opacity: 0;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        transform: rotateY(-180deg);
    }
    &:hover {
        >.Speaker_front {
            transform: rotateY(180deg);
        }
        >.Speaker_back {
            opacity: 1;
            transform: rotateY(0deg);
        }
    }
    &.flip-vertical {
        >.Speaker_back {
            transform: rotateX(-180deg);
        }
        &:hover {
            >.Speaker_front {
                transform: rotateX(180deg);
            }
            >.Speaker_back {
                transform: rotateX(0deg);
            }
        }
    }
}

// custom
.speaker_flip {
    position: relative;
    display: inline-block;
    margin-right: 2px;
    margin-bottom: 1em;
    width: 250px;
    >.Speaker_front,
    >.Speaker_back {
      display: block;
      color: white;
      width: inherit;
      background-size: cover!important;
      background-position: center!important;
      height: 250PX;
      padding: 1em 2em;
      background: #313131;
      border-radius: 10px;
      p {
        font-size: 20px;
        line-height: 100%;
        color: #999;
      }
    }
}


/*new flip test*/


.flipper-container{
  position:relative;

  perspective:1000;
  width:200px;
  height:200px;
}
.flip{
  height:100%;
  width:100%;
  transform-style:preserve-3d;
  transition:all 1s;
}
.flipper-container:hover .flip{
  transform:rotateY(180deg);
  box-shadow: 0px 2px 2px #aaa;
}
.face{
  position:absolute;
  height:100%;
  width:100%;
  backface-visibility:hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  color: #000;
  text-align: center;
  background-color:white;
}
.back h3{
  padding:20px 5px 0px 5px; 
  letter-spacing:0.5px;
  font-size:25px;
	font-family:"Source Sans Pro", sans-serif;
}
.back p{
  padding:5px 5px 0px 5px; 
  letter-spacing:0.5px;
  font-size:15px;
	font-family:"Source Sans Pro", sans-serif;
}

/*fireflies css start here*/

@keyframes firefly-path {
	0% {
		offset-distance: 0%;
	}
	100% {
		offset-distance: 100%;
	}
}

@keyframes firefly-blink {
	0%,
	20%,
	40%,
	60%,
	80%,
	100% {
		opacity: 0.2;
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		opacity: 1;
	}
}

#firefly1,
#firefly2,
#firefly3,
#firefly4 {
	animation: firefly-path 15s infinite both linear paused,
		firefly-blink 3s infinite both ease-in-out paused;
}

#firefly1 {
	offset-path: path(
		"M174.861,470.63C163.013,463.216 44.417,389.007 117.567,305.587C138.726,281.457 282.417,231.552 297.887,123.297C313.953,10.877 88.48,93.758 151.219,171.357C169.159,193.546 234.197,227.148 318.28,155.317C333.743,142.107 432.687,36.277 502.872,96.506C562.662,147.814 528.177,288.09 391.786,250.647C183.799,193.548 316.925,-20.928 381.508,76.981C433.547,155.873 324.398,426.058 368.529,502.066C410.229,573.887 533.309,526.973 524.928,417.633C520.979,366.112 428.795,253.557 260.055,417.986C201.927,474.628 185.584,472.173 177.658,471.003"
	);
}

#firefly2 {
	offset-path: path(
		"M320.147,471.419C240.084,319.439 169.256,446.706 141.517,401.828C101.806,337.581 435.97,270.744 507.723,303.829C510.783,305.24 543.803,317.17 527.711,339.108C480.685,403.219 164.177,347.015 134.149,320.014C120.003,307.295 69.688,233.191 323.319,175.945C478.135,141.003 636.644,194.324 578.615,268.28C526.415,334.808 158.716,362.732 88.03,162.774C68.717,108.143 117.113,91.197 123.284,89.037C141.283,82.735 204.996,71.123 227.275,83.936C245.146,94.214 302.612,145.89 292.513,196.824C274.77,286.305 89.001,364.377 96.999,470.438C99.174,499.285 151.268,531.444 274.769,561.387C302.894,568.206 299.961,474.435 320,472.562"
	);
}

#firefly3 {
	offset-path: path(
		"M199.284,473.091C142.01,464.746 114.93,372.598 73.964,381.884C38.298,389.969 26.232,509.188 96.414,559.71C155.45,602.208 299.377,615.743 339.354,547.021C355.818,518.718 377.318,453.952 417.796,407.861C438.908,383.823 466.202,333.728 516.807,345.843C572.54,359.186 582.413,493.276 536.936,530.422C530.744,535.479 501.69,559.211 437.219,537.034C358.789,510.054 329.089,379.202 316.736,348.203C299.413,304.735 305.145,301.749 282.352,272.238C277.881,266.448 223.011,183.451 219.875,177.681C216.277,171.063 169.474,55.718 94.052,74.784C43.361,87.598 62.812,144.012 128.472,130.209C188.826,117.521 230.925,47.254 198.627,36.155C174.678,27.926 167.697,84.433 218.02,95.414C258.077,104.155 301.286,58.489 269.604,40.929C249.979,30.051 221.371,87.447 281.049,113.493C331.752,135.621 372.571,85.729 344.718,69.872C338.111,66.111 322.567,71.44 318.789,94.331C309.852,148.489 323.797,153.851 320.285,278.981C319.074,322.146 320.281,354.962 320.033,388.995C319.988,395.207 315.458,403.177 334.359,418.014C398.712,468.531 532.979,406.887 538.777,319.749C539.721,305.561 548.154,246.048 292.913,268.917C268.486,271.106 135.358,286.678 108.548,320.393C96.932,335.002 86.156,412.941 195.819,402.961C272.129,396.017 309.236,342.122 372.691,366.125C405.737,378.625 444.18,446.905 294.56,465.372C287.366,466.26 257.396,469.959 204.214,472.214"
	);
}

#firefly4 {
	offset-path: path(
		"M332.139,314.317C496.415,457.594 620.642,501.16 589.017,560.51C576.623,583.772 530.745,593.206 493.437,542.624C466.567,506.195 445.771,468.547 400.781,517.091C396.99,521.181 345.261,593.834 282.964,586.293C245.222,581.725 201.614,540.408 173.455,515.89C163.896,507.567 126.982,448.417 79.44,478.427C12.9,520.429 63.142,625.106 165.126,545.076C220.059,501.968 268.813,404.345 190.028,358.641C156.69,339.302 52.743,349.152 71.38,271.723C85.433,213.341 208.82,160.974 232.198,285.188C244.669,351.45 201.047,462.873 105.704,393.341C46.563,350.21 32.48,276.155 78.88,277.52C120.631,278.748 128.39,356.376 96.463,408.446C76.296,441.336 36.78,477.637 122.216,536.345C202.722,591.665 248.433,547.474 272.348,524.797C292.699,505.498 411.924,353.462 455.697,292.586C500.278,230.587 619.208,107.969 570.741,64.929C525.625,24.865 412.659,57.889 456.187,124.712C489.164,175.336 594.871,139.024 595.225,209.446C595.351,234.375 535.132,283.463 439.869,177.56C432.097,168.919 328.075,22.229 250.996,101.266C208.4,144.944 266.103,195.784 370.913,266.013C416.679,296.679 418.889,292.527 464.89,323.1C541.73,374.169 581.265,356.887 579.237,431.409C578.381,462.872 555.143,552.831 399.984,489.149C359.883,472.69 228.836,421.238 226.068,319.038C225.587,301.255 247.046,257.137 294.589,290.779C308.738,300.791 308.048,301.533 323.357,309.549"
	);
}


.card-holder {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 5em;
	place-content: center;
}

.card {
	position: relative;
	width: 220px;
	
	aspect-ratio: 1 / 1;

	&:hover,
	&:focus {
		outline: none;

		.card-details {
			box-shadow: 1px 1px 10px inset var(--glow);
			outline-color: var(--glow);
		}

		.card-design {
			opacity: 1;
		}

		#firefly1,
		#firefly2,
		#firefly3,
		#firefly4 {
			animation-play-state: running;
			opacity: 1;
			stroke: var(--glow);
		}
	}

	.card-details {
		display: flex;
		flex-direction: column;
		position: relative;
		width: 100%;
		height: 100%;
		background-color: var(--color-dark-25);
		background-image: var(--texture-noise);
		color: var(--color-light);
		padding: 1em;
		border-radius: 0.5em;
		box-shadow: 1px 1px 5px inset var(--color-light-50);
		backdrop-filter: blur(20px);

		will-change: box-shadow, outline-color;
		transition: box-shadow 0.5s ease-in-out, outline-color 0.5s ease-in-out;

		z-index: 1;

		p:first-of-type {
			margin-top: 1em;
		}

		p {
			margin-top: 0.5em;
		}
	}

	.card-design {
		pointer-events: none;
		position: absolute;
		align-items:center;
		top: -160px;
		left: -160px;
		opacity: 0;
		will-change: opacity;
		transition: opacity 0.5s ease-in;
		overflow: visible;
		/* z-index: 2; */

		svg {
			fill: var(--glow);
		}
	}
}

/*firefly card css ends here
 * 
 * Voice of ladies circle data start here*/

.void {
	--rotate-speed: 60;
	--count: 1; /* Default count, the DOM element should override this */
	--easeInOutSine: cubic-bezier(0.37, 0, 0.63, 1);
	--easing: cubic-bezier(0.000, 0.37, 1.000, 0.63);
	width: 100%;
	max-width: 1316px;
	margin: auto;
	position: relative;
	aspect-ratio: 1 / 1;
}
ul:hover * {
	animation-play-state: paused;
}

.rotate_anim {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
 	/*outline: 2px dashed cyan; */
	width: 100%;
	animation: rotateCW calc(var(--rotate-speed) * 1s) var(--easing) infinite;
}
.card_rotate{
	width: 27%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 16px 24px;
	gap: 8px;
	background: #FFFFFF;
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0px 16px 32px rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	font-family: 'Inter', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #535062;
	animation: rotateCCW calc(var(--rotate-speed) * 1s) var(--easing) infinite;
}
a {
	text-decoration: none;
	color: unset;
}
.model-name {
	font-weight: 500;
	font-size: 18px;
	line-height: 150%;
	color: #401656;
	display: block;
}

.ist-content svg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.rotate_anim:nth-child(2), .rotate_anim:nth-child(2) .card_rotate {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -1s);
}
.rotate_anim:nth-child(3), .rotate_anim:nth-child(3) .card_rotate {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -2s);
}
.rotate_anim:nth-child(4), .rotate_anim:nth-child(4) .card_rotate {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -3s);
}
.rotate_anim:nth-child(5), .rotate_anim:nth-child(5) .card_rotate {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -4s);
}
.rotate_anim:nth-child(6), .rotate_anim:nth-child(6) .card_rotate {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -5s);
}
.rotate_anim:nth-child(7), .rotate_anim:nth-child(7) .card_rotate {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -6s);
}
.rotate_anim:nth-child(8), .rotate_anim:nth-child(8) .card_rotate {
	animation-delay: calc((var(--rotate-speed)/var(--count)) * -7s);
}

@keyframes rotateCW {
	from {
		transform: translate3d(0px, -50%, -1px) rotate(-45deg);
	}
	to {
		transform: translate3d(0px, -50%, 0px) rotate(-315deg);
	}
}
@keyframes rotateCCW {
	from {
		transform: rotate(45deg);
	}
	to {
		transform: rotate(315deg);
	}
}
@keyframes pulseGlow {
	from {
		background-size: 60%;
	}
	to {
		background-size: 100%;
	}
}

.center-circle {
	position: absolute;
	width: 230px;
	aspect-ratio: 1 / 1;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #FFFFFF;
	box-shadow: 0px 18px 36px -18px rgba(12, 5, 46, 0.3), 0px 30px 60px -12px rgba(12, 5, 46, 0.25);
	border-radius: 50%;
	align-content: center;
	text-align: center;
}
.second-circle {
	position: absolute;
	width: 40%;
	aspect-ratio: 1 / 1;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #F5F4FE;
	opacity: 0.5;
	box-shadow: 0px 18px 36px -18px rgba(12, 5, 46, 0.3), 0px 30px 60px -12px rgba(12, 5, 46, 0.25);
	border-radius: 50%;
}
.last-circle {
	position: absolute;
	width: 66%;
	aspect-ratio: 1 / 1;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #F5F4FE;
	opacity: 0.25;
	box-shadow: 0px 18px 36px -18px rgba(12, 5, 46, 0.3), 0px 30px 60px -12px rgba(12, 5, 46, 0.25);
	border-radius: 50%;
}
.crop {
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1));
}
.mask {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 50%;
	animation: pulseGlow 5s linear infinite alternate;
	background-position: 100% 50%;
	background-repeat: no-repeat;
	background-image: radial-gradient(100% 50% at 100% 50%, rgba(60, 26, 229, 0.25) 0%, rgba(60, 26, 229, 0.247904) 11.79%, rgba(59, 26, 229, 0.241896) 21.38%, rgba(58, 26, 229, 0.2324) 29.12%, rgba(57, 26, 229, 0.219837) 35.34%, rgba(55, 26, 229, 0.20463) 40.37%, rgba(53, 26, 229, 0.1872) 44.56%, rgba(51, 26, 229, 0.16797) 48.24%, rgba(48, 26, 229, 0.147363) 51.76%, rgba(46, 26, 229, 0.1258) 55.44%, rgba(44, 26, 229, 0.103704) 59.63%, rgba(41, 26, 229, 0.0814963) 64.66%, rgba(39, 26, 229, 0.0596) 70.88%, rgba(36, 26, 229, 0.038437) 78.62%, rgba(34, 26, 229, 0.0184296) 88.21%, rgba(32, 26, 229, 0) 100%);
}
.mask:after {
	content: "";
	position: absolute;
	width: 1px;
	height: 100%;
	right: 0;
	display: block;
	background-image: linear-gradient(180deg, rgba(60, 26, 229, 0) 0%, #3C1AE5 50%, rgba(60, 26, 229, 0) 100%);
}

/**
 * new image effect
 * */

.img_effect {
  --_g: 10%/45% 45% no-repeat conic-gradient(#000 0 0);
  mask: 
    left   var(--_i,) top    var(--_g),
    bottom var(--_i,) left   var(--_g),
    top    var(--_i,) right  var(--_g),
    right  var(--_i,) bottom var(--_g);
  filter: grayscale();
  transition: .3s linear;
  cursor: pointer;
}
.img_effect:hover {
  --_i: 10%;
  filter: grayscale(0);
}

/*==================================
    TIMELINE
==================================*/

/*-- GENERAL STYLES
------------------------------*/
.timeline {
	line-height: 1.4em;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	h1, h2, h3, h4, h5, h6 {
		line-height: inherit;
	}
}

/*----- TIMELINE ITEM -----*/

.timeline-item {
	padding-left: 40px;
	position: relative;
	&:last-child {
		padding-bottom: 0;
	}
}

/*----- TIMELINE INFO -----*/

.timeline-info {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3px;
	margin: 0 0 .5em 0;
	text-transform: uppercase;
	white-space: nowrap;
}
/*----- TIMELINE MARKER -----*/

.timeline-marker {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 15px;
	&:before {
		background: $primary-color;
		border: 3px solid transparent;
		border-radius: 100%;
		content: "";
		display: block;
		height: 15px;
		position: absolute;
		top: 4px; left: 0;
		width: 15px;
		transition: background 0.3s ease-in-out,
			border 0.3s ease-in-out;
	}
	&:after {
		content: "";
		width: 3px;
		background: #CCD5DB;
		display: block;
		position: absolute;
		top: 24px; bottom: 0; left: 6px;
	}
	.timeline-item:last-child &:after {
		content: none;
	}
}
.timeline-item:not(.period):hover .timeline-marker:before {
	background: transparent;
	border: 3px solid $primary-color;
}

/*----- TIMELINE CONTENT -----*/

.timeline-content {
	padding-bottom: 40px;
	p:last-child {
		margin-bottom: 0;
	}
}

/*----- TIMELINE PERIOD -----*/

.period {
	padding: 0;
	.timeline-info {
		display: none;
	}
	.timeline-marker {
		&:before {
			background: transparent;
			content: "";
			width: 15px;
			height: auto;
			border: none;
			border-radius: 0;
			top: 0;
			bottom: 30px;
			position: absolute;
			border-top: 3px solid #CCD5DB;
			border-bottom: 3px solid #CCD5DB;
		}
		&:after {
			content: "";
			height: 32px;
			top: auto;
		}
	}
	.timeline-content {
		padding: 40px 0 70px;
	}
	.timeline-title {
		margin: 0;
	}
}

/*----------------------------------------------
MOD: TIMELINE SPLIT
----------------------------------------------*/

.timeline-split {
	@media (min-width: 768px) {
		.timeline {
			display: table;
		}
		.timeline-item {
			display: table-row;
			padding: 0;
		}
		.timeline-info,
		.timeline-marker,
		.timeline-content,
		.period .timeline-info {
			display: table-cell;
			vertical-align: top;
		}
		.timeline-marker {
			position: relative;
		}
		.timeline-content {
			padding-left: 30px;
		}
		.timeline-info {
			padding-right: 30px;
		}
		.period .timeline-title {
			position: relative;
			left: -45px;
		}
	}
}

.event-program .elementor-widget-container > p {
	margin-bottom: 0px;
}