/*------------------------------------------------------------------------------------------------------------
                    DECKSTOP MEDIA CSS
----------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width:1930px) {

	section.ed_section { max-width:2200px; margin-inline:auto; }
	section.cs-sep3-similrctgr.ed_section { max-width:100%; }


 	.hm-week-row2 { width: calc(100% - 10%); margin-left: auto; }
   	

}


@media only screen and (min-width:992px) and (max-width:1700px) {

}



@media only screen and (max-width:1580px) {
    
/*-------- | Home Page CSS | -----------*/
	.hm-iconbx-iner { width: calc(100% - 50px) !important; }
	.bng-sec-babynamegnrt .container {  margin-top: -420px !important; }
}


@media only screen and (max-width:1300px) {
    
	.bng-sec-babynamegnrt .container {
		margin-top: -360px !important;
	}
	
}


/*---------------------------------------------------------------------------------------------------------------
                    MOBILE AND TABLATE MEDIA CSS
----------------------------------------------------------------------------------------------------------------*/


@media only screen and (max-width:1200px) {

	.bng-babnmgrt-inner .generator-title { font-size: 60px; }

/*-------- | CSS | -----------*/
	.hm-week-row2 { width: calc(100% - 20px); }
	.category-posts-section {
	    display: grid;
	    grid-template-columns: repeat(3, 1fr);
	    grid-gap: 20px;
	}

}


@-moz-document url-prefix() {
	.category-posts-section {
	    scrollbar-width: 100%; /* thin, auto, none */
	   scrollbar-color: #5264f5 , #fff; /* (thumb color, track color) */
	} 
}


@media only screen and (max-width:1024px) {

	h2:not(.elementor-element h2) { font-size: 40px; }

/*-------- | CSS | -----------*/
 	.category-posts-section {
        display: flex;
        grid-gap: 20px;
        overflow: hidden;
        overflow-x: auto;
        padding-bottom: 20px;
    }
    .category-post-item { width: 100%; min-width: 35%; }

   	.hm-iconbx-iner { width: calc(100% - 0px) !important;  margin : 0; }
		
   	/* WebKit Browsers (Chrome, Edge, Safari, Opera) */
    .category-posts-section::-webkit-scrollbar {
	    height: 12px;
	    width: 100%;
	    background-color: #fff;
	    border: solid 1px #000000;
	    border-radius: 12px;
	}
	.category-posts-section::-webkit-scrollbar-track {
	    border-radius: 12px;
	    border: solid 1px #000;
	}
	.category-posts-section::-webkit-scrollbar-thumb {
	    background-color: #5264f5;
	    border-radius: 12px;
	    border: solid 1px #000;
	}
	.hm-wekbox .elementor-widget-text-editor p { font-size: 20px; }
	

/*--------- |-- Show only search icon on mobile --| ---------*/
    .desktop-search { display: none; }
    .mobile-search-icon {
        display: inline-block;
        padding: 10px !important;
        margin: auto; background: transparent !important;
    }
   	.mobile-search-popup button.search-submit {
	    color: #5264f5; font-size: 16px;  font-weight: 600;
	}
    .custom-search-container {
        position: relative; text-align: right;
    }
    .mobile-search-popup button.close-search {
        position: absolute;
        top: -80px;
        z-index: 111111;
        right: 20px;
        padding: 6px 8px !important;
        font-size: 18px;
        background: #ff1414;
    }

/*--------- |--  Baby name generator --| ---------*/
	
	.custom-baby-step-3 { padding: 20px 0; }

	.bng-babnmgrt-inner .generator-title { font-size: 50px; }

	.bng-sec-babynamegnrt { position: relative; padding-bottom: 80px; }
    .bng-sec-babynamegnrt .container { margin-top: -300px!important; }

    .baby-name-generator { margin-top: 30px; }
		
	.baby-name-generator .generator-section { margin-bottom: 40px; }
	.baby-name-generator .generator-section:last-of-type {
	    margin-bottom: 20px;
	}
	.generator-form .generator-section h2 { margin-bottom: 13px; }
	.button-group .filter-btn { 
		font-size: 19px; line-height: 1.2; 
	}
	
	.cs-simlrctr-inner .wrap-only-results {
	    display: grid;
	    grid-template-columns: repeat(3, 1fr);
	    margin: 20px 0 0;
	}

	.gender-group .filter-btn::before { width: 32px; height: 24px; }
	.gender-group .filter-btn { padding-left: 43px; }
	
	.gender-group .filter-btn:nth-child(3) { padding-left: 54px; }

}



@media only screen and (max-width:993px) {
	
/*--------- |--  Baby name generator --| ---------*/
	.baby-name-generator { padding:0 40px; }

	.bng-babnmgrt-inner .generator-title { font-size: 50px; }
	.category-grid { grid-gap: 20px; }
	.category-item { font-size: 19px; }

	.category-item input[type="checkbox"] {
	    margin-right: 10px;
    	width: 25px; height: 25px;
	}
	.category-item input[type="checkbox"]:checked::after {
	    width: 11px; height: 11px;
	}
    .generator-form a.generate-button {
    	font-size: 20px;  
/* 		bottom: -55px; */
	    line-height: 1.1;
    }
    .wrap-only-results {
	    display: grid; grid-template-columns: 1fr 1fr;
	}

}	


@media only screen and (max-width:880px) {
	.category-post-item { min-width: 45%; }

/*--------- |--  Baby name generator --| ---------*/
	.bng-babnmgrt-inner .generator-title { font-size: 40px; }
	.bng-sec-babynamegnrt .container {
        margin-top: -280px !important;
    }
	
	
}


@media only screen and (max-width:820px) {
	
    .cs-simlrctr-inner .wrap-only-results {
	    display: grid;
	    grid-template-columns: repeat(2, 1fr);
	}
	.baby-name-generator {
        padding: 0 30px;
    }

}



@media only screen and (max-width:768px) {
	
	.hm-wekbox .elementor-widget-text-editor p { font-size: 18px; }

/*--------- |--  Baby name generator --| ---------*/
	.button-group .filter-btn {
        font-size: 18px; line-height: 1;
    }
    
}



@media only screen and (max-width:767px) {
	.category-post-item {  min-width: 50%; }

	h1:not(.elementor-element h1) {
	    font-size: 36px; line-height: 1;
	}
    h2:not(.elementor-element h2) { font-size: 28px; }

/*--------- |--  Baby name generator --| ---------*/ 	
	.bng-sec-babynamegnrt {
	    position: relative;
	    background: #fce6f2;
	    padding: 60px 0;
        padding-inline: 20px;
	}
	.bng-sec-babynamegnrt .container {
		margin-top: 0px!important;
		padding-inline: 0;
	}
	.bng-babnmgrt-inner .generator-title {
	    color: #000000; font-size: 36px;
	}
	.bng-babnmgrt-inner .generator-description {
		color: #000000;
	}
	.wrap-only-results {
	    display: grid;
	    grid-template-columns: 1fr 1fr;
	}
	.name-results { padding: 25px; }

}


@media only screen and (max-width:660px) {

/*--------- |--  Baby name generator --| ---------*/
	.baby-name-generator { padding:0 20px ; }
	.pagination-info { font-size: 22px; }

	.wrap-result-pagination { overflow: hidden; }
	.pagination-controls {
       	margin: 30px 0 0;
        overflow-x: auto;
        padding-bottom: 10px;
        padding-left: 10px;
        gap: 0;
	}	
	.pagination-controls button.page-previus {
	    margin-right: 35px; margin-left: -40px;
	}
	.pagination-controls button .dashicons {
    	font-size: 19px;
    }
	.pagination-controls button {
	    padding: 5px 8px;
	    font-size: 17px; line-height: 1;
	}
	

}


@media only screen and (max-width:580px) {


/*-------- | Home page CSS | -----------*/
	.pst-categry-inner { padding: 20px 15px 20px; }
	.category-post-item { min-width: 100%; }
	.tnp-subscription form .tnp-submit { 
	    position:relative; margin-bottom:-15px;
	}
	.tnp-subscription form .tnp-field {
	    position: relative; top: -20px;
	}
	.mobile-search-popup { top: 90px; }
	.pst-title h3 {
		font-size:20px;
	}
/*--------- |--  Baby name generator --| ---------*/
	.bng-sec-babynamegnrt { padding: 40px 20px 60px; }
	.generator-section .button-group { grid-gap: 12px; }
	.button-group .filter-btn {
        font-size: 16px; 
        padding: 10px 16px 12px;
    }	
    .gender-group .filter-btn { 
        position: relative;
        padding-left: 34px;
    }
    .gender-group .filter-btn::before { 
		width: 24px;
        height: 20px;
        left: 15px;
	}
	.gender-group .filter-btn:nth-child(3) {
        padding-left: 45px;
    }

	.generator-form .generator-section h2 {
	    font-size: 20px;
        line-height: 1.1;
        margin-bottom: 10px;
	}
	.baby-name-generator .generator-section {
	    margin-bottom: 25px;
	}
	.bng-babnmgrt-inner .generator-title {
	    font-size: 26px;
	}
	.name-results-header h3 { font-size: 22px; }
	.name-results-content p {
	    font-size: 17px;
	    font-weight: 400;
	    margin: 12px 0 0;
	}
	.name-results-footer a { font-size:14px; }
	.category-grid {
        grid-gap: 15px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0 10px;
    }
    .category-item { font-size: 17px; }
    .category-item input[type="checkbox"] {
        margin-right: 10px;
        width: 20px;
        height: 20px;
    }
    .category-item input[type="checkbox"]:checked::after {
        width: 8px; height: 8px;
    }	
    .generator-form a.generate-button {
        font-size: 18px;
		/* bottom: -50px; */
        line-height: 1;
        padding: 9px 18px 12px;
    }
/*     .toggle-sec {
		right: 20px;
        top: 20px;
        left: 0;
        margin: 0 auto;
    } */
	
	.toggle-sec {
        right: 0;
        top: 20px;
        left: 0;
        margin: 0 auto;
        position: relative;
		justify-content: center;
    }
	
	.toggle-sec a.wishlist:after {
		width: 24px;
		height: 24px;
		background-size:contain;
	}
	.toggle-sec a.wishlist {
		width: 40px;
    	height: 40px;
	}
	
	.name-generator-container .generator-form { padding: 40px 0 0px; }
	div#names-results {
		padding: 40px 0 0;
	}

    .cs-simlrctr-inner .wrap-only-results {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    section.cs-sep3-similrctgr {
	    background: #FFC8E3;
	    padding: 130px 20px 60px;
	}
	.cs-sep3-babyname { padding: 60px 20px 70px; }

	.single-post .site-content {
		margin: 40px auto;
    	box-shadow: 0 0 10px -5px #838383;
    	border-radius: 8px;
    	width: 90%;
	}

	.latest-posts-section .latest-post-item:nth-child(n+5) {
        display:none!important;			
	}

	button.toggle-form-btn { padding: 8px; }
	button.toggle-form-btn .dashicons {
    	width: 24px;
    	height: 24px;
	}
	button.toggle-form-btn .dashicons::after { background-size: contain; }
	
	.wrap-only-results { margin-top: 25px; }
	
	#names-results .wrap-result-pagination {
		padding-bottom: 30px;
	}
	
}
   


@media only screen and (max-width:480px) {
 	
/*--------- |--  Baby name generator --| ---------*/
	.wrap-only-results {
	    grid-gap: 15px;
	    grid-template-columns: 1fr;
	}
	/*.button-group .filter-btn {
	    font-size: 16px;
		padding:7px 20px 9px;
	}*/
	.pagination-info { font-size: 18px; }
	
	.pst-title h3 { font-size:18px; }
	
}