/*!
Theme Name: 	Jurislocator
Theme URI: 		https://www.immifocus.ca
Description: 	A dedicated theme developed for Canadian immigration practitioners.
Version: 		0.0.1
Author: 		Immifocus Themes
Author URI: 	https://www.immifocus.ca
Text Domain: 	i-see-you
Tags: 			Canadian immigration, Canada immigration, immigration Canada, Canadian immigration consultant, Canadian immigration lawyers, Canadian immigration practitioners
*/
@font-face {
  font-family: "Roboto-Regular";
  src: url("fonts/Roboto-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto-Condensed";
  src: url("fonts/Roboto-Condensed.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto-Condensed";
  src: url("fonts/Roboto-Condensed.ttf") format("truetype");
}

:root {
  /* ================================
     Typography
  ================================== */
  --theme-font-1: "Roboto", sans-serif;
  --theme-font-2: "Roboto Condensed", sans-serif;
  --theme-font-3: "Roboto Condensed", sans-serif;

  /* ================================
     Refined Color Palette
     Inspired by rose-gold & soft luxury
  ================================== */
  --color-01: #4B3E32;
  --color-02: #D9B88F;
  --color-03: #D9B596;
  --color-04: #D9C9BA;
  --color-05: #F1ECE4;

  /* ================================
     Layout & Spacing
  ================================== */
  --lg-padding: 50px 0;

  /* ================================
     Optional Gradients
  ================================== */
  --gradient-gold-1: linear-gradient( 135deg, rgb(255, 238, 200) 0%, rgb(224, 191, 130) 45%, rgba(218, 179, 118, 0.85) 100% ););
--gradient-gold-2: linear-gradient(
  135deg,
  rgba(231, 205, 177, 0.30) 0%,   /* Light Rose Gold */
  rgba(210, 163, 111, 0.40) 50%,  /* Brushed Gold */
  rgba(153, 113, 72, 0.50) 100%   /* Deep Warm Gold */
);
--gradient-gold-3: linear-gradient(
  135deg,
  rgba(255, 238, 210, 0.25) 0%,   /* Soft Pearl Gold */
  rgba(181, 140, 90, 0.40) 55%,   /* Classic Gold */
  rgba(120, 90, 50, 0.50) 100%    /* Royal Deep Gold */
);

}
html {
  scroll-behavior: smooth;
}
body {
  background-image: url("images/i-see-you-background.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: cover;
  background-color: var(--color-01);
}
a{
	color: var(--color-01);
}
a:hover{
	color: var(--color-03);
}
.editIcon{
	color: var(--color-01);
	background-color: #D9B88F8A;
	padding: 5px 9px;
	border-radius: 50%;
	border: 1px solid var(--color-02);
	opacity: 0.7;
}
.editIcon{
	opacity: 1;
}
.btn-white {
  border: 1px solid #D9C9BA;
  color: var(--color-01);
  background: #D9C9BA;
  background-size: 200% 200%;
  transition:
    background 0.6s ease-in-out,
    background-position 2s ease,
    color 0.4s ease,
    border-color 0.4s ease;
}

.btn-white i {
  color: var(--color-01);
}
.btn-white:hover,
.btn-white:focus {
  color: var(--color-01);
  border-color: #826449;
  background: linear-gradient(
    135deg,
    var(--color-03) 0%,
    var(--color-04) 50%,
    var(--color-07) 100%
  );
  background-size: 250% 250%;
  background-position: 100% 0;
  transition:
    background 1.2s ease-in-out,
    background-position 4s ease,
    color 0.4s ease,
    border-color 0.4s ease;
  animation: gradientFlow 6s ease-in-out infinite;
}
@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.btn-white:hover i,
.btn-white:focus i{
	color: var(--color-01);
}
.btn-dark {
 border: 1px solid var(--color-01);
  color: var(--color-04);
  background: var(--color-01);
  transition:
    background 0.6s ease-in-out,
    background-position 2s ease,
    color 0.4s ease,
    border-color 0.4s ease;
}

.btn-dark i {
  color: var(--color-02);
}
.btn-dark span{
	color: var(--color-03);
}
/* Smooth darker gradient hover */
.btn-dark:hover,
.btn-dark:focus {
	color: var(--color-01);
  border-color: var(--color-01);
  background: var(--color-03);
  background-size: 250% 250%;
  background-position: 100% 0;
  transition:
    background 0.5s ease-in-out;
}
.btn-dark:hover i,
.btn-dark:focus i{
color: var(--color-05);
}
.btn-dark:hover span,
.btn-dark:focus span{
color: var(--color-05);
}
.btn-dark:hover small,
.btn-dark:focus small{
color: var(--color-05);
}
/* Shared shimmer animation for subtle motion */
@keyframes gradientFlowDark {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (max-width: 575px) {

  /* Reduce spacing between buttons */
  .hero-buttons {
    gap: 0.75rem !important; /* smaller gap than gap-3 */
    margin-top: 2rem !important; /* optional: reduce top margin */
  }

  /* Remove the extra empty line caused by <br> inside buttons */
  .hero-buttons a br {
    display: none;
  }

  /* Make buttons slightly slimmer vertically */
  .hero-buttons a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

}



.header{
	width:100%;
	position:fixed;
	z-index: 999;
}
.section{
	padding:80px 0px;
	background-color:var(--color-05);
}
.section-heading h2{
	color:var(--color-01);
	font-size:50px;
	
}

.section-heading h2{
	color: rgb(106, 90, 68) !important;
}

.section-heading h2 span {
  background: linear-gradient(90deg, var(--color-01) 0%, var(--color-03) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----------------------------------

			Main Navigation
   
---------------------------------- */

.navBarMain .navbar-nav{
	background-color: #C09E75;
  	padding: 5px 20px;
	border-radius: 5px;
}
.navBarMain .navbar-nav li a {
  position: relative;
  color: var(--color-01);
  transition: color 0.3s ease;
}

.navBarMain .navbar-nav li a:hover {
  color: var(--color-05);
}
@media (min-width: 992px) {
  .navBarMain .navbar-nav li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background: var(--color-01);
    transition: width 0.3s ease;
  }
  .navBarMain .navbar-nav li a:hover::after {
    width: 100%;
  }
}

/* Mobile & tablet (< 992px)
   Disable underline completely */
@media (max-width: 991px) {
  .navBarMain .navbar-nav li a::after {
    display: none;
  }
}


.navBarMain .navbar-expand-lg .container{
	position: relative;
}


/* ----------------------------------
   HERO SECTION COLORS & POSITIONING
---------------------------------- */

/* Make hero text lighter for contrast */
.hero-section .hero-text-box h1,
.hero-section .hero-text-box h2 {
  color: var(--color-01);
  font-weight: 700;
  font-size:80px
}

.hero-section .hero-text-box p {
  color: #826449; /* Rose-Gold accent */
  font-size: 1.1rem;
  line-height: 1.6;
}

.progressiveText{
	color: #5e452f;
}

.progressiveText span {
  opacity: 0;
  transform: translateY(20px);
  display: inline-block;
  filter: blur(4px);
  transition: all 0.8s ease-out;
  margin-left:5px;
}

/* Active class applied by JS */
.progressiveText span.show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Optional: soft golden glow for emotional impact */
.secOne.show,
.secTwo.show,
.secThree.show {
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25),
    0 0 12px var(--color-04);
}
/* ----------------------------------
   FIX "Scroll to explore" AT BOTTOM CENTER
---------------------------------- */
.hero-section .scroll-hint {
  position: absolute;
  bottom: 30px;
  transform: translateX(-50%);
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-3);
  opacity: 0.8;
  animation: fadeInUp 1.8s ease forwards, bounce 2s infinite 2s;
  pointer-events: none; /* prevents accidental clicks */
}

/* Hover shimmer for elegance */
.hero-section .scroll-hint::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  margin: 8px auto 0;
  background: var(--color-03);
  border-radius: 2px;
  animation: pulseLine 2.5s ease-in-out infinite;
}

/* Gentle glow animation under line */
@keyframes pulseLine {
  0%, 100% { opacity: 0.3; transform: scaleX(0.8); }
  50% { opacity: 1; transform: scaleX(1); }
}

/* Maintain mobile readability */
@media (max-width: 768px) {
  .hero-section .hero-text-box p {
    font-size: 1rem;
  }
  .hero-section .scroll-hint {
    font-size: 0.8rem;
    bottom: 20px;
  }
}
/* Right-align button group */
.hero-buttons {
  margin-right: 0; 
  padding-right: 0;
}

/* Keep equal spacing between buttons */
.hero-buttons .btn {
  flex-shrink: 0;
}

/* On mobile: center them again for better balance */
@media (max-width: 767.98px) {
  .hero-buttons {
    justify-content: center !important;
  }
}

/*------------ Video Section--------------*/
.music-video-section{
  background: var( --color-05);
}

.music-video-section{
	color: var(--color-01);
}
.music-video-section h2{
	font-size: 40px;
    font-weight: 700;
}

.music-video-section p{
	font-size: 18px;
	color: var(--color-01);
}

/* Tabs (layout kept as you had it) */
.music-video-section .videoTabs li {
  width: auto;
  flex: 1 1 auto;
  min-width: 120px; /* prevent too small tabs */
  background-color: var(--color-04);
}

/* Make buttons look like tabs but keep your styles */
.music-video-section .videoTabs .btn.nav-link{
  padding: 10px;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: var(--color-01);
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}

/* Hover/focus feedback */
.music-video-section .videoTabs .btn.nav-link:hover,
.music-video-section .videoTabs .btn.nav-link:focus{
  background-color: rgba(0,0,0,.04);
}

/* ACTIVE state (Bootstrap toggles .active on .nav-link) */
.music-video-section .videoTabs .btn.nav-link.active{
  background-color: var(--color-03); /* your rose-gold highlight */
  color: #fff;
  border: 0;            /* keeps it flat */
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* Optional: show a subtle divider line under the tab list */
.music-video-section .videoTabs{
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Correct scope: tab-content is sibling of .videoTabs, not inside it */
.music-video-section .tab-content{
  position: relative;
}

/* Iframe fill */
.music-video-section .tab-content iframe{
  width:100% !important;
  height:100% !important;
  display:block;
  border:0;
}

/* -------------------------
   CSS3 Animations
-------------------------- */

/* Fade & slide for pane entrance */
@keyframes mv-fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slight zoom for the video container */
@keyframes mv-zoomIn {
  from { transform: scale(0.985); }
  to   { transform: scale(1); }
}

/* Apply on the pane when it becomes visible */
.music-video-section .tab-pane.show.active {
  animation: mv-fadeUp .35s ease-out both;
}

/* Animate the 16:9 wrapper for subtle polish */
.music-video-section .tab-pane.show.active .ratio {
  animation: mv-zoomIn .35s ease-out both;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .music-video-section .videoTabs .btn.nav-link,
  .music-video-section .tab-pane.show.active,
  .music-video-section .tab-pane.show.active .ratio{
    transition: none !important;
    animation: none !important;
  }
}

/*--------------------------------------------

				Story Section

---------------------------------------------*/

.story-section{
	background-color: var(--color-04);
	color: var(--color-01);
}

.story-section h2{
	font-size: 40px;
    font-weight: 700;
	text-align: center;
}
.story-section .card{
	background-color: var(--color-05);	
}
/*--------------------------------------------

				Campaign Timeline

---------------------------------------------*/

.campaign-timeline-section{
	background-color: #4B3E3269;
	color: var(--color-03);
}
.campaign-timeline-section h2{
	font-size: 40px;
    font-weight: 700;
}
.campaign-timeline-section p{
	font-size: 18px;
}
.campaign-timeline-section h2, .campaign-timeline-section p{
	color:var(--color-03);
}
.campaign-timeline-section .card{
	background-color: #D9C9BAE5;
}
.campaign-timeline-section .card i{
	color: var(--color-05);
}
.campaign-timeline-section .card small{
	color:var(--color-01);
}
.campaign-timeline-section .card p{
	color:var(--color-01);
}

/*--------------------------------------------

				Campaign Resources 

---------------------------------------------*/
.downloads{
background-color: var(--color-05);
  color: var(--color-01);
  min-height: 500px;
  margin-top: 20px;
}
.downloads h2{
	font-size: 40px;
    font-weight: 700;
}

.downloads p{
	font-size: 18px;
}

.downloads h2, .downloads p{
	color:var(--color-01);
}
.downloads .card{
	background-color: var(--color-04);
	color: var(--color-01);
}

/*--------------------------------------------

			Support Section

---------------------------------------------*/
.support{
	background-color: var(--color-05);
	color: var(--color-01);
}
.support h2, .support p{
	color:var(--color-01);
}

.support h2{
	font-size: 40px;
    font-weight: 700;
}

.support p{
	font-size: 18px;
	color:var(--color-01) !important;
}
.support #supportTabs{
	
}
.support .tab-content{
	background-color: var(--color-04);
	padding: 10px;
	border-radius: 20px;
}
.support .nav-tabs .nav-link{
	color: var(--color-01);
	background-color: var(--color-05);
	border: 1px solid var(--color-04);
}
.support .nav-tabs .nav-link.active, .support .nav-tabs .nav-link:hover, .support .nav-tabs .nav-link:focus {
  color: var(--color-01);
  background-color: var(--color-04);
  border: 1px solid var(--color-04);
}
.support .card{
	background-color: var(--color-05);
	color: var(--color-01);
	min-height: 218px;
}

/*--------------------------------------------

			Get Involved

---------------------------------------------*/
.get-involved{
	background-color: var(--color-02);
	color: var(--color-01);
}

.get-involved .card i{
padding: 25px;
  font-size: 40px;
  color: var(--color-03);
}

.get-involved .card{
	background-color: var(--color-05);
}

/*--------------------------------------------

				Share Your Story 

---------------------------------------------*/
.your-story{
	background-color: #D9B88F82;
}

.your-story i{
  font-size: 40px;
  color: var(--color-03);
}
.your-story .wpcf7 p{
	margin-bottom:0px;
}
.your-story .wpcf7 .wpcf7-form-control:focus{
	outline: none;
  border: 1px solid var(--color-02);
  box-shadow: none;
}

/*--------------------------------------------

					Footer

---------------------------------------------*/
.footer{
	background-color: var(--color-01);
	color: var(--color-02);
}
.footer .menu-social-media-container{
	text-align:center;
}
.footer .menu-social-media-container ul {
  list-style: none;        /* remove bullets */
  margin: 0;
  padding: 0;
}

.footer .menu-social-media-container ul li {
  display: inline-block;
  margin-right:10px;
}

.footer .menu-social-media-container ul li a {
  text-decoration: none;
  font-size: 20px;
  color: inherit;
}
.footer .menu-social-media-container ul li a:hover, .footer .menu-social-media-container ul li a:focus{
  color: var(--color-04);
}
.footer .textwidget{
	margin-top:15px
}
.footer .textwidget p{
	margin-bottom:3px;
}
.footer .textwidget small{
	font-size:12px;
	margin-bottom:3px;
}
/*------------------------------

		Translate 
	
-------------------------------*/

.gt_float_switcher {
  font-size: 14px;
  background: var(--color-03);
}
.gt_float_switcher .gt-selected {
  background-color: var(--color-02);
}

.get-involved h2{
	font-size: 40px !important;
    font-weight: 700 !important;
}

.get-involved p{
	font-size: 18px;
}

.mainLogo{
	width: 40%;
}

@media (max-width: 991px) {
  .mx-auto {
    width: 100% !important;
  }
	
	.involved-card{
		margin-bottom: 15px;
	}
	
	.header {
	  background-color: var(--color-02);
	}
	.mainLogo {
	  width: 56%;
	}
	#navbarNav{
	 position: absolute;
	  top: -8px;
	  left: 0;
	  width: 100%;
	  z-index: 999;
	  margin-top: 56px;
	}
	
	
.navBarMain .navbar-nav{
	background-color: #C09E75;
  	padding: 5px 20px;
	position: absolute;
    width: 100%;
}
	
	.navbar-toggler:focus{
		
	}
}
	
	
@media (max-width: 575px) {
  .hero-buttons .btn {
   width: 100%;
  }
	.section{
		padding: 50px 0px;
	}
	
	.story-section .video-actions-content{
		text-align: justify;
	}
	.mainLogo {
	  width: 70%;
	}
	.story-section .mx-auto p{
		text-align: justify;
	}
}

.text-gold-gradient {
  background: linear-gradient(90deg, #D9B88F 0%, #C09E75 100%);
    background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #ffb900;
  background-color: #f8dc92;
  border-radius: 10px;
  padding: 10px;
}
.wpcf7 form.sent .wpcf7-response-output{
	border-color: #3fa800;
	background-color: #d6f5c1;
	border-radius: 10px;
	padding: 10px;
}