/*!
Theme Name: MilfFinderV2
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: milffinderv2
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

*/

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

@font-face {
    font-family: 'fgd';
    src: url('fonts/FranklinGothic-Demi.woff2') format('woff2'),
        url('fonts/FranklinGothic-Demi.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



body {
	margin: 0;
	color:#373737;
	font-family: "fg", sans-serif;
	font-size:14px;
	font-weight:300;
	 background: url(images/bg.webp) top center repeat-x #fff; 
	
}


a{  font-family: 'fgd', sans-serif; color:#373737;font-weight:400;}
img{max-width:100%;}
#page{margin:30px auto 0px auto;width:100%;height:100%;}
.wrap{width:100%;margin:0 auto;max-width:1080px;}

h1,h2,h3,h4,h5,h6{font-family: 'fgd', sans-serif; }

footer{width:100%;margin:0 auto; text-align:center;padding:0px 15px;background:#fff;}
/* Header Container (removes fixed height) */
.site-header {
  width: 100%;
border-top:15px solid #8f2d56;

}

.colink ,.pcity{color:#ffbc42;}
.page-title{font-family: "fgd", sans-serif; font-size:18px;color:#8f2d56;}

.header-container {
  display: grid;
  /* 3 equal columns: Left empty space, Center logo, Right menu */
  grid-template-columns: 1fr auto 1fr; 
  align-items: center;
 
  margin:0 auto;

  width:100%;
  max-width:1080px;
}

/* Empty left spacer to balance the grid */
.header-spacer {
  /* Keeps the left side balanced with the right side */
}

/* Centered Logo */
.site-logo {
  grid-column: 2; /* Forces logo into center column */
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.25rem;
  color: #333;
}

/* Logo Image - Set your desired width/height here */
.site-logo img {
  display: block;
  max-width: 100%;
  height: auto; /* Lets the natural or specified height expand the header */
}

/* Right-aligned Navigation */
.burger-nav {
  grid-column: 3; /* Puts burger nav in rightmost column */
  justify-self: end; /* Aligns to far right */
  position: relative;
  align-self: start;

  padding:20px;
}

/* Burger Button */
.burger-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 101;
}
.burger-nav.active{background:#373737;}
.burger-btn.active .bar {
	 background-color: #fff;
}
.burger-btn .bar {
  width: 100%;
  height: 3px;
  background-color: #000;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: calc(100% - 1px); /* Snaps dropdown right below the header height */
  right: -1px;
  width: 310px;
  background-color: #373737;
  border-radius: 0px;
list-style: none;
  padding: 8px 0;
  margin: 0;
  
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.dropdown-menu li{padding:10px 15px;}

.dropdown-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  display:block;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 10px;
  color: #fff;
  text-decoration: none;
 
  transition: background-color 0.2s;
}

.dropdown-menu li a:hover {
background:#373737;
  color: #fff;
}

.dropdown-menu li a.btn{color:#373737;background:#ffbc42;}
.btn{border: none;
  padding: 5px 15px;
  border-radius: 5px;font-size:16px;line-height:33px;width:100%;text-align:center;background:#ffbc42;color:#373737;font-family: 'fgd', sans-serif;}
.btn:hover{color:#373737;background:#ffbc42;}
.subheader{text-align:center;margin:0 auto;width:100%;max-width:1080px;}
.subheader h1{font-family: 'fgd', sans-serif;font-size: 46px;  line-height: 42px; }

.formtitle{font-size:19px;color:#ffbc42;text-align:center;font-family: 'fgd', sans-serif;margin-bottom: 25px;
}
#formsign{color:#fff;background:#8f2d56;padding:20px;border-radius:8px;-webkit-box-shadow: -1px 1px 6px -1px #000000; 
box-shadow: -1px 1px 6px -1px #000000;}
#formsign div *{

  align-items: center;
}
.box{background:#fff; padding:20px; border-radius:8px;-webkit-box-shadow: 0px 4px 10px 3px #868686;
  box-shadow: 0px 4px 10px 3px #868686;}
.sd{background:#218380;color:#fff;padding:20px;border-radius:8px;-webkit-box-shadow: 0px 4px 10px 3px #868686;
  box-shadow: 0px 4px 10px 3px #868686;}
.sd .page-title,.middleText .page-title{color:#ffbc42;}
.shout-box p{margin-bottom:0px;}
.chtlink{font-family:'fg',sans-serif;color:#ffbc42 !important;text-decoration:none;}
.shout-box a{color:#ffffff;font-weight:bold;}
.shout-box{
	  margin:10px auto;
	
	
}
.shout-div{
		 display:grid;
	 grid-template-columns:minmax(0, 95px) 1fr;
    gap:8px;
	text-align:left;

  align-content: center;
  justify-content: center;
  align-items: center;
  padding:8px 0px 8px 0px;

}
.shout-image{background:#fff;padding:5px; border:1px solid #a8a8a8;border-radius:8px;}
.shout-div a{font-weight:400;}
.shout-image img{width:100%;max-width:105px;border:1px solid #a8a8a8;}
.sidelinks{margin:10px auto;}
.sidelinks a{color:#ffbc42;font-weight:700;}

.shout-con{height:985px;overflow: hidden;position: relative;}
.shout-box{height:98px;}






.profiles{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:20px;
	padding:20px 0px;
}




.profile-item img.profthumb{aspect-ratio: 147 / 147;width: 100%;object-fit: cover;border:1px solid #a8a8a8;}




.profile-item,.doodle{position:relative;display:block;opacity:1;transition: opacity 0.3s ease-in-out;}
.doodle{padding:5px; background-color:#fff;border:1px solid #a8a8a8;border-radius:8px;}
.doodle,.profiles a{position:relative;}

.doodle:hover,.galact{opacity:.5;}
.galtitle a{text-decoration:none; color:#373737;}
.galtitle{text-align:center;font-size:16px;}
.chather{background:#218380;width:80%;max-width:125px; margin:0 auto;border-radius:8px;text-align:center;margin-top:10px;padding:5px 10px;font-size:12px;}
.chather a{color:#fff !important; text-decoration:none;}
.profile-item:hover::after {
  transform: translate(-40%, -55%);
	   z-index: 5;
}

.profile-item:hover::after,
.profile-item:hover::before {
    opacity: 1;
    visibility: visible;
}



.profile-icon{position: absolute;
  top: 30%;
  left: 29%;
  display:none;
   transition:display .3s ease;

  }


.profiles .active{display:block;}



/* pagination*/
/* Centered Container */
.profile-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 15px 0;
  width: 100%;

}

/* Base Rectangular Block (Normal State) */
.profile-navigation a.page-numbers,
.profile-navigation span.page-numbers {
  display: block;
  width: 12px;               /* Width of each rectangular bar */
  height: 12px;               /* Exact 8px height */
  background-color: #808080;  /* Normal background */
 /* Subtle outline to show white bars on light bg */
  border-radius: 50%;        /* Sharp rectangular corners */
  
  /* Hide all internal text, numbers, and arrows */
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: -9999px;
  overflow: hidden;
  
  transition: all 0.25s ease-in-out;
}

/* Hover State */
.profile-navigation a.page-numbers:hover {
  background-color: #8f2d56;
  border-color: #8f2d56;
  transform: translateY(-1px); /* Subtle lift on hover */
}

/* Active / Current Page State */
.profile-navigation span.page-numbers.current {
  background-color: #8f2d56;
  border-color: #8f2d56;
 
}

/*middle section */
.middleText{width:100%;background:#8f2d56;margin:30px auto;padding:0px 20px;}
.midsection{
	  display:grid;
grid-template-columns:minmax(0, 507px) 1fr;
    gap:20px;
	padding:0px 0px;
	
}
.mid-img{position: relative;}
.mid-img img{height: 108%;
  margin-top: -4%;
  width: 108%;}
.mid-text p{line-height:24px;}
.mid-text{padding-top:30px;color:#fff;}
.submiddleText{padding:20px;color:#373737;}
.submiddleText .page-title{color:#2cb2ba;}
.submiddleText p{line-height:24px;}

/* bubbbles */

.bubbles{
	 display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centering auto-aligns the last row */
  gap: 15px;
  margin:30px auto;
}
.bubble-box{
	position:relative;
	display: flex;
  flex-direction: column;
  height: 182px; 
  width:335px;
  box-sizing: border-box;
}
.bubble-img{
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
.bubble-text{
	position: relative;
  z-index: 2;
 

  width: 80%;
  font-family: "fgd",sans-serif;
  color: #373737;
  display: flex;
  margin: 0 auto;
  align-content: center;
  align-items: center;
  justify-content: center;
  height: 115px;
}
.bubble-author{flex-shrink: 0;margin-top: auto;margin-left:90px;position:relative;z-index:2;display:flex;gap:10px;grid-template-columns:1fr 1fr;	align-content:center;	align-items:center;}
.bname{color:#ffbc42; font-family: "fgd",sans-serif;}
.bname span{color:#fff; font-family: "fg",sans-serif;}
.bubbles .bubble-box:nth-child(7) {
  grid-column-start: 2;
}
.wantmore{width:100%;max-width:700px;margin:0 auto;}


/*bottom text*/

.bottomText {
  display: grid;
  /* Left & right take equal remaining space (1fr), middle is fixed 75px */
  grid-template-columns: 1fr 75px 1fr; 
  gap: 20px; /* Optional spacing */
  margin:30px auto;
}
.bot-text .page-title{font-size:24px; color:#2cb2ba;}
.features .page-title{font-size:18px; color:#8f2d56;}
.features{margin:30px auto;text-align:center;}
.divbg{display:table;margin:0 auto;margin-top: -39px;
  padding-left: 1px;}
.bot-img{position:relative;}
.bot-img::before {
  content: "";
  position: absolute;
  top: 68px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background-color: #343434; /* Border color */
}
@media (max-width: 1079px) {
	
	.midsection{
		grid-template-columns:minmax(0, 400px) 1fr;
		padding-bottom:30px;
	}
	.mid-img img {
	max-width:507px;
	margin:0 auto;
	  height: 100%;
	   width: 100%;
	}
	.shout-con{height:663px;}
	header,footer,#page,.wantmore{padding:10px;}
	.testimonials{margin:0px 10px;}
	
}

.profile-photo{

  background: #fff;
  padding: 5px;
  border: 1px solid #a8a8a8;
  border-radius: 8px;
}
.profile-photo img{ border: 1px solid #a8a8a8;}

@media (max-width: 991px) {
	.profbox{padding-top:20px;}
	.midsection{display:table;padding-bottom:30px;}
.mid-img img {
	max-width:507px;
	margin:0 auto;
  height: 100%;
 display:table;
  width: 100%;
}
.sd{margin-top:20px;}
.subheader h1 {
  font-family: 'fgd', sans-serif;
  font-size: 30px;
line-height: 35px;}

}


/* Hide middle column on screens 768px or smaller */
@media (max-width: 768px) {
	.site-logo{max-width: 220px;}
.subheader h1 {
  font-family: 'fgd', sans-serif;
  font-size: 22px;
line-height: 30px;}
  .bottomText {
    /* Switch layout to 2 equal columns */
    display:table;
	padding:15px;
	margin-bottom:0px;
	padding-bottom:0px;
  }

  /* Target the 2nd (middle) child div */
  .bottomText > div:nth-child(2) {
    display: none;
  }
  .divbg{margin:0 auto;padding:0px;}
  .shout-con{height:555px;}
}
footer a{color:#fff;}
footer{margin-top:30px;padding:20px;background:#8f2d56;width:100%;color:#fff;}



/* Center container and text */
.footer-links {
  text-align: center;
  width: 100%;
  padding: 15px 0;
}

/* Flexbox list for horizontal layout and wrapping */
.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;             /* Allows items to wrap neatly on smaller screens */
  justify-content: center;     /* Centers items horizontally */
  align-items: center;
  gap: 8px 0;                 /* Vertical gap when links wrap on mobile */
}
.disclaimer{}
.colink{}
.cpy{font-size:12px;}
.footer-nav li {
  display: inline-flex;
  align-items: center;
}
/* Style links */
.wrap2{width:100%;max-width:755px;margin:0 auto;}
.footer-nav .infolink {
  text-decoration: none;
  color: #fff;                 /* Adjust to fit your design */
  
  padding: 0 25px;
  transition: color 0.2s ease;
  text-decoration:underline;

}

.footer-nav .infolink:hover {
  color: #fff;
}

/* Vertical Line Dividers */
.footer-nav li:not(:last-child)::after {
  content: " ";
  background:url(images/star.webp) top center no-repeat;
  width:15px; height:15px;

  user-select: none;         
}

/* Respect the explicit 'nobg' class or last child */
.footer-nav li.nobg::after {
  content: none;
}

/* Responsive design for mobile screens */
@media (max-width: 600px) {
  .footer-nav li:not(:last-child)::after {
    display: none;             /* Hide vertical bars on small screens */
  }

  .footer-nav .infolink {
    padding: 6px 12px;         /* Larger tap targets for mobile fingers */
    font-size: 0.85rem;
  }
}

@media screen and (max-width: 768px) {
	.profiles{
    
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
	
}
}

@media screen and (max-width: 500px) {
	.btn{line-height:20px;}
}
@media screen and (max-width: 567px) {
	.profiles{
    
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
	
}
}
.profbox{line-height:30px;}
.profbox .colwt{font-family:"fgd",sans-serif;}