/*
 Theme Name:   Friendzone
 Theme URI:    http://example.com/friendzone
 Description:  Child theme of Twenty Twenty-One
 Author:       Your Name
 Author URI:   http://example.com/
 Template:     twentytwentyone
 Version:      1.0.0
*/

@import url('https://fonts.cdnfonts.com/css/poppins?styles=20394,170442,20397,170447,20387,170436,20390,170435,20392,170448,20395,170439,20383,170445,20385,170450,20381,170437');
/* font-family: 'Archivo', sans-serif;
font-family: 'Inconsolata', monospace;
font-family: 'Merriweather', serif;
font-family: 'Poppins', sans-serif;

font-family: 'Signika', sans-serif; */
:root { --web-font-family:'Poppins', sans-serif; --background-color: rgb(252, 251, 251); --font-color: rgb(0, 0, 0); --secod-font-color: rgb(101, 101, 101); --secondary-font-color: rgb(179, 179, 179); --background-on-hover: rgb(215, 214, 214); }
.dark-mode { --background-color: #000; --font-color: rgb(254, 252, 252); --secod-font-color: rgb(197, 195, 195); --secondary-font-color: rgb(108, 106, 106); --background-on-hover: rgba(52, 51, 51, 0.834); }
* { margin: 0; padding: 0; box-sizing: border-box; }
p {  }
.container { display: flex; /* gap: 10px; */ /* overflow-x: hidden; */ }
.middle-section { display: flex; justify-content: center; width: 100%; }
a { text-decoration: none; color: var(--font-color);font-size: 0.9rem; font-weight: 400; }
body { background-color: var(--background-color); overflow-x: hidden; /* border: 1px solid red; */ min-height: 100vh; width: 100vw; overflow-x: hidden; font-family: var(--web-font-family); }
input { padding: 12px 14px; border: 1px solid #cccccc; border-radius: 8px; width: 100%; box-sizing: border-box;   }       
input::placeholder { color: #000000; }
/* styling navbar section  */
.navbar { display: flex; flex-direction: column; gap: 20px; height: 94.5vh; width: 325px; /* justify-content: space-between; */ background-color: #34333363; padding-top: 50px; padding-bottom: 10px; padding-inline: 10px; border-right: 0px solid rgba(76, 75, 75, 0.737); position: sticky; top: 20px; border-radius: 26px; margin: 20px; padding-left: 35px;padding-right: 35px; }
.sub-section::focus-visible {outline: none;}
.sub-section span {font-size: 20px;}
.header-trigger {
  height: 1px;
}
@media (max-width:750px) {
    .container .navbar { flex-direction: row; background-color: var(--background-color); position: fixed; z-index: 1000; height: 80px; bottom: auto; top: 0; gap: 0; border-right: none; width: 100vw; justify-content: space-around; align-items: center; padding: 0; box-shadow: -1px 14px 20px 4px #000000; margin: 0 20px; }
    .middle-section .post-section { padding: 40px 5px; }
    .navbar a { display: none; }
    .navbar .sub-section { padding: 5px; }
	.middle-section {padding-top: 80px;}
	.profile-section .header-content, .place-post-sec .page-header {padding-top: 0 !important;}
	.place-post-sec {padding-top: 110px;padding-inline: 15px;}
	.mb-zero h1 {padding-top: 30px !important;}
	.sub-section a {padding: 0;}
    #hidden { display: none; }
    #hidden1 { display: none; }
    #hidden2 { display: none; }
	.sub-section a svg, .sub-section a img { width: 20px; height: 20px;object-fit: cover;}
    .menu-section { padding: 5px 5px !important; }
    .menu-section i { font-size: 17px !important; }
    .sub-section a svg { object-fit: contain; }
    .sub-section a img { object-fit: cover;}
	.instagram-text-logo img {max-width: 150px !important;}
	.sub-section a {padding: 0;}
	.container .navbar {margin-left: 0 !important;}
    .menu-section { position: relative; }
    .add a { display: block; opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 99; }
}
@media (max-width:1198px) {
    .navbar .sub-section span { display: none; }
    .navbar .menu-section span { display: none; }
    .navbar .sub-section { gap: 0; }
    .navbar { width: 150px; padding-left: 15px; padding-right: 15px; padding-top: 10px; align-items: center; }
    .add a { display: block; opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 99; }
	.sub-section a {padding-inline: 0 !important;}
    .menu-section { position: relative; }
}
@media (max-width:1003px) {
    .follow-section { display: none; }
    .middle-section .post-area { padding-inline: 0; }
}
@media (max-width:690px) {
    .post-section .story-section { justify-content: space-evenly; }
    .story-section #story-7 { display: none; }
}
@media (max-width:562px) {
    .story-section #story-6 { display: none; }
}
@media (max-width:482px) {
    .story-section #story-5 { display: none; }
}
@media (max-width:402px) {
    .story-section #story-4 { display: none; }
}
@media (max-width:323px) {
    #story-3 { display: none; }
}
@media (max-width:259px) {
    #story-2 { display: none; }
}
.page-header h1 { font-size: 18px; color: var(--font-color); font-family: var(--web-font-family); padding-bottom: 20px; margin-bottom: 30px; border-bottom: 1px solid #70707063; font-weight: 500; padding-left:10px; padding-right:10px; }
.instagram-text-logo {margin: 15px 0px 20px; cursor: pointer; width: 100%; }
.insta-box .instagram-text-logo img {max-width: 265px;width: 100%;object-fit: contain;/* filter: brightness(5); */margin-bottom: 40px;}
.instagram-text-logo img {max-width: 200px;width: 100%;object-fit: contain;/* filter: brightness(5); */}
.sub-section a { display: flex; align-items: center; gap: 25px; border-radius: 5px; cursor: pointer; padding: 10px 20px; transition: all 0.2s ease; }
.sub-section:hover { background-color: #2b2b2b; }
.sub-section:hover i { transform: scale(1.07); transition: all 0.2s ease; }
.sub-section:hover span {color: #baa16b;}
.sub-section:hover .profile-img { transform: scale(1.07); transition: all 0.2s ease; }
.sub-section img { width: 35px; color: var(--font-color); transition: all 0.2s ease; }
.menu-section a {font-size: 20px;}
/*.profile-img { width: 22px; transition: all 0.2s ease; cursor: pointer; }*/
.profile-img img {border-radius: 50%; }
.menu-section { display: flex; gap: 25px; align-items: center; /* position: absolute; bottom: 10px; */border-radius: 5px; cursor: pointer; padding: 10px 20px; transition: all 0.3s ease; }
.menu-section:hover { background-color: var(--background-on-hover); }
.menu-section:hover i { transform: scale(1.07); transition: all 0.2s ease; }
.menu-section i { color: var(--font-color); font-size: 26px; transition: all 0.2s ease; }
/* post section started frome here */
.insta-new-post-form { gap: 0 !important; margin-top: 0 !important; }
.post-section {  padding: 0px 0px; background-color: #000; max-width: 600px; width: 100%; }
.bg-change { border: 1px solid #937f53;  border-radius: 8px; }
.post-upload-footer { text-align: right; padding: 20px 30px; }
.post-upload-footer .insta-btn { background: #baa06a; color: #ffffff; padding: 6px 20px; border: none; border-radius: 20px; font-weight: 600; cursor: pointer; }
.flex-col { flex-direction: column; align-items: center;  margin-top: 0px; margin-bottom: 50px; }
.middle-section.flex-col {background-color: #000;}
.page-header { max-width: 700px; width: 100%; }
.post-upload-body textarea { background: #0d0d0d; width: 100%; min-height: 150px; border: none; padding: 10px; border-radius: 10px; color: #5d5d5d;}
.story-section { display: flex; gap: 10px; justify-content: center; /* flex-wrap: wrap; */ /* width: 100%; overflow:scroll; */ /* overflow-x: auto; */ }
.story { overflow: hidden; display: flex; gap: 10px; flex-direction: column; justify-content: center; align-items: center; }
.story-image { /* height: 60px;  width: 55px; */ background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); border-radius: 50%; display: flex; justify-content: center; align-items: center; height: 65px; width: 65px; background-image: cover; }
.story-image img { width: 90%; height: 90%; border: 2px solid var(--background-color); border-radius: 50%; background-image: cover; background-position: center; background-size: cover; }
.story span { color: var(--font-color); font-size: 0.8rem; font-weight: 500; }
.middle-section .profile-img img { width: 100%; }
/*.post-area { margin-top: 50px; padding-inline: 80px; margin-bottom: 50px; } */
.post-main { color: var(--font-color); }
.post-image { width: 40px; height: 40px; background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.post-image img { width: 90%; height: 90%; border: 2px solid var(--background-color); border-radius: 50%; }
.main-area-text { background: #101010; padding: 30px 0px; border-radius: 8px; }
.main-area-text .profile-img { width: 40px; margin-bottom: 20px; }
.post-username { color: var(--font-color); font-size: 0.8rem; }
.one-day { font-size: 0.8rem; color: var(--secod-font-color); }
.post-header { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-inline: 5px; }
.post-header i { color: var(--font-color); cursor: pointer; transition: all 0.2s ease;display: none; }
.post-header i:hover { color: var(--secondary-font-color); }
.post-left-header { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.post-left-header i { color: rgb(85, 85, 250); }
.post-left-header i:hover { color: rgb(30, 30, 150); }
.post-main-image {margin-top: 10px; width: 100%; height:auto; max-height: 624px; display: flex; align-items: center; border: 1px solid #80808045; border-radius: 5px; justify-content: center; overflow: hidden; margin-bottom:20px;}
.post-main-image img { width: 100%; border-radius: 1px; }
.post-fotter { display: flex; justify-content: space-between; margin-top: 7px; padding-inline: 5px; }


/*upload-page*/
.dis-fx { display: flex; flex-direction: row-reverse; padding: 20px; gap: 20px; }

.bg-second { background: #000000; }
.full-img .post-main-image img {/* max-width: 100% !important; max-height: 550px; min-height: 550px;*/ height: 100% !important; }
.profile-small { width: 40px !important; height: 40px !important; }
.comment-item { display: flex; gap: 20px; margin-bottom: 10px; align-items: center; }
.comment-right { font-size: 0.7rem; }
.comment-left img { border-radius: 50%; }
.comments-list { margin-top: 10px; }
.post-fotter i { font-size: 1.2rem; cursor: pointer; /* font-weight: 2000; */ transition: all 0.2s ease; }
.post-fotter i:hover { color: var(--secondary-font-color); }
.post-fotter-left { display: flex; gap: 20px; align-items: center; }
.post-description { margin-block: 3px; padding-inline: 5px; }
.post-liked { margin-block: 7px; font-size: 0.8rem; color: var(--secod-font-color); cursor: pointer; }
.title { font-size: 0.9rem; color: var(--secod-font-color); cursor: pointer; }
.title span { color: var(--font-color); font-weight: bold; }
.comments { margin-block: 5px; font-size: 0.8rem; color: var(--secod-font-color); cursor: pointer; }
.comment-box form {}

/* profile follow section startted fome here */

.profile-follow-image { width: 100px; height: 100px; }
.profile-follow-image img { width: 100%; border-radius: 50%; height: 100%; }
.profile-deta { color: #ffffff; }
.bg-black { background-color: #000000 !important; }
.bg-black .post-section { background-color: #000000 !important; }
.profile-mail-btn a { font-size: 12px; padding: 10px 20px; background: #101010;  border-radius: 20px; }
.profile-deta h2 { font-size: 20px; margin-bottom: 7px; }
.sex-age { display: flex; gap: 18px; }
.sex-age p { font-size: 14px; }
.sex-age span { color: #545454; }
.text-cl { color: #545454; }
.profile-deta p { font-size: 14px; margin-bottom: 7px; }
.gap-10 { gap: 10px !important; }
.doen-text { width: 90%; margin: 20px auto; }
.doen-text p { font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.mb-zero h1 { margin-bottom: 0 !important; padding-top: 75px;}
.width-cal {  width: calc(100% - 50px); }

.profile-follow-content { color: var(--font-color) }
.profile-follow-left { display: flex; gap: 20px; cursor: pointer; justify-content: space-between;flex-wrap: wrap; }
.profile-follow { display: flex; justify-content: space-between; align-items: center; margin-block: 7px; }
.profile-follow-content { display: flex; flex-direction: column; justify-content: center; }
.follow { color: rgb(19, 85, 240); font-weight: 20; font-size: 0.7rem; font-weight: 550; line-height: 0.1; transition: all 0.1s ease; }
.follow:hover { color: var(--font-color); }
.profile-id { color: var(--font-color); font-size: 0.8rem; font-weight: 550; }
.profile-name { color: var(--secod-font-color); font-size: 0.7rem; margin-top: 5px; font-weight: 100; }
.suggestion { color: var(--secod-font-color); font-size: 0.9rem; font-weight: 500; }
.see-all { color: var(--secod-font-color); font-size: 0.8rem; transition: all 0.1s ease; }
.see-all:hover { color: var(--secondary-font-color); }
.follow-section {  margin-top: 46px; width: 320px; padding: 10px 20px; }
.suggestion-follow { display: flex; justify-content: space-between; color: var(--font-color); margin-block: 10px; }
.copyrights { color: var(--secod-font-color); font-size: 0.9rem; margin-top: 50px; text-align: center; }
.profile-foolow-hovering { padding: 5px; cursor: pointer; border-radius: 5px; transition: all 0.1s ease-in-out; }
.profile-foolow-hovering:hover { background-color: var(--background-on-hover); }
.nav-hidden { display: none; }
.nav-hidden i { font-size: 1.4rem; cursor: pointer; color: var(--font-color); transition: all 0.2s ease; }
.nav-hidden i:hover { color: var(--secondary-font-color); }
.nav-hidden-logo { width: 136px; cursor: pointer; }
.nav-hidden-logo img { width: 100%; }
.nav-hide-2 { display: flex; gap: 30px; }
/* Profile page */
.page-template-post-upload .post-section { width: 100%; }
.page-template-post-upload .post-area { padding-inline: 0px; }
.avatar-upload { position: relative; max-width: 100%; margin: 0px auto; }
.avatar-upload .avatar-edit { position: absolute; right: 0px; z-index: 1; top: 0px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.avatar-upload .avatar-edit input { display: none; }
.avatar-upload .avatar-edit input + label { display: inline-block; width: 100px; height: 100px; margin-bottom: 0; border-radius: 0; cursor: pointer; font-weight: normal; transition: all 0.2s ease-in-out; background-position: center; background-repeat: no-repeat; background-size: contain; }
.avatar-upload .avatar-preview { width: 100%; height: 500px; position: relative; border-radius: 0%; border: 1px solid #707070; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); background: #222222;}
.avatar-upload .avatar-preview > div { width: 100%; height: 100%; border-radius: 0%; background-size: cover; background-repeat: no-repeat; background-position: center; }

@media (max-width:750px) {
	/*.nav-hidden { width: 100%; display: flex; justify-content: space-between; padding-inline: 10px; align-items: center; }*/
	.middle-section .post-section { padding: 20px; padding-bottom: 50px; }
}

/* sign up page and account section css start (AINA) */
.sign-up-section,
.login-sec-form { background-color: #000;  display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 0px; padding-left:0px; padding-right:0px; min-height: 100vh; }
.sign-up-content,
.login-content { display: flex; justify-items: center; gap: 140px;padding-bottom: 0%; max-width: 2000px; width:100%; }
.form-step.active h3, .form-step.active p { color: #ffffff;  }

/* left side */
.left-side {display: flex;flex-direction: column; justify-content: center; width: 50%; color: white; padding-left: 40px; }
.left-side-text {display: flex;flex-direction: column;align-items: center;gap: 0px;}
.left-side h1 {font-size: 3.8rem;font-weight: 600;letter-spacing: 2px;margin: 0;text-align: center;line-height: 70px; text-transform:capitalize; }
.left-side h1 .highlight {color: #caa76a; }
.left-side-text .main-img {width: 100%;max-width: 600px;height: auto;border-radius: 15px;box-shadow: 0 0px 0px rgba(0,0,0,0.4);}
.login-content .left-side {display: none;}     
/* right side start */
.right-side {width: 46%;background-color: #34333363;padding: 100px;padding-top: 1%;height: 100vh;display: flex;flex-direction: column;justify-content: center;}
.right-container { display: flex; align-items: center;gap: 0px; margin-top: 30px; margin-bottom: 60px; justify-content: center; }
.rounded-dot {width: 30px;height: 30px; background-color: #f0e7e7; border-radius: 50%;}
.form-step { display: none; }
.form-step input {margin-bottom: 30px;color: #000;font-family: 'Poppins';}
.insta-footer {max-width: 510px;margin: 10px auto 0;width: 100%;border: 1px solid #ffffff52;padding: 16px;}
.form-step.active { display: block; }
.rounded-dot.active {background-color: #caa76a;}
.horizontal-line { width: 170px; height: 2px; background-color: #caa76a;}
form {display: flex;flex-direction: column;gap: 30px;margin-top: 30px;width: 100%;max-width: 510px;margin: 0 auto;}
.gender { display: flex; gap: 20px; width: 100%;}
.gender .gender-info {width: 50%; }  
.gender select.gender-info { margin-bottom: 30px !important; color: rgb(101, 101, 101) !important; font-family: 'Poppins' !important; padding: 12px 14px !important; border: 1px solid #cccccc !important; border-radius: 8px !important; box-sizing: border-box !important;}
.account-form select#gender { padding: 10px; border-radius: 20px;  outline: none; background-color: #0d0d0d; width: 100%; margin-top: 5px; color: #5d5d5d; border: none;}
.next-step, .submit {padding: 10px; border-radius: 5px;background-color: #caa76a;width: 50%;border: none;margin-top: 80px;cursor: pointer;}


@media (max-width: 767px){
	.left-side { padding-left: 0px; }
	.instagram-text-logo { text-align:center; margin: 0px 0px 0px; width: max-content; }
	.left-side-text { display: none;}
/* 	.container{ display: none; } */
	.sign-up-content { display: flex; justify-items: center; flex-direction: column; gap: 0; justify-content: space-between;}
	.right-side { width: 100%; display: flex; flex-direction: column; padding: 0px 20px 30px 20px; margin-left: 0px;}
	form{ gap: 40px; }
	input{ width: 100%; padding: 15px }
	.gender .gender-info { width: 100%; }
	.gender { display: flex; flex-direction: column; width: 100%; gap: 0px; }
	.next-step { width: 100%; padding: 15px; margin-top: 100px; text-align: center;}
	/*.sign-up-section{ height: 100vh; }*/
	.sign-up-section{ padding-left:20px; padding-right:20px; }
}


/* account section */
.account-form{ background-color: black; display: flex; flex-direction: column; gap: 30px; padding: 50px 30px; width: 60%; }
.account-form .title{ font-size: 18px; color: #ffffff; font-weight: 600; border-bottom:1px solid #70707063; padding-bottom: 20px; }
.profile-image img{ width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
.account-form label{ color: #ffffff; font-size: 15px; font-weight:500; }
.account-form form { display: flex; flex-direction: column; gap: 23px; width:100%; margin-top: 10px; }
.account-form input { padding: 10px; border-radius: 20px; background-color: #0d0d0d; width: 100%; margin-top: 5px; color: #5d5d5d; border: none; }
.account-form input:focus-visible { outline: none; }
input::placeholder{ color: gray; font-size: 14px; }
.account-form form label { margin-left: 10px; }
.account-form textarea:focus-visible { outline: none; }
.account-form textarea{ background-color: #0d0d0d; border: none; padding: 20px 10px; width: 100%; border-radius: 20px; min-height: 150px; color: #5d5d5d; }
#number{ margin-bottom: 20px; }
#save-btn{ padding: 8px; border-radius:50px; background-color:#ffffff; width: 35%; border: none; }

@media (max-width: 1024px) {
  .account-form { width: 80%; padding: 40px 20px; gap: 20px; }
  .account-form form { width: 90%; }
  #save-btn { width: 50%; }
}

.payment-warning-bar { background: #ff3333; color: #ffffff; text-align: center; padding: 10px 15px; font-size: 15px; font-weight: 500; display: flex; justify-content: center; align-items: center; gap: 10px; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; box-shadow: 0 2px 5px rgba(0,0,0,0.15); }
.payment-warning-bar .pay-now-btn { background: #ffffff; color: #ff3333; padding: 6px 12px; border-radius: 5px; font-weight: 600; text-decoration: none; transition: all 0.2s ease; }
.payment-warning-bar .pay-now-btn:hover { background: #ffeaea; }
/*body {
  padding-top: 50px; 
}*/
form.wc-block-components-form.wc-block-checkout__form { font-family: 'Poppins', sans-serif; }
header.entry-header.alignwide { display: none; }
header#masthead { display: none; }
.wc-block-components-title.wc-block-components-title { font-weight: 300; }
.wc-block-components-checkout-step__description { font-family: 'Poppins', sans-serif; }
input#email { font-size: 15px; }
.wc-block-components-sidebar-layout .wc-block-components-main { box-sizing: border-box; margin: 0; padding-right: 4.5283018868%; width: 64% !important; background-color:#ffffff; padding: 20px; border-radius: 10px; }
fieldset#contact-fields { margin-bottom: 0px !important; }
.wp-block-woocommerce-checkout-shipping-method-block { display: none; }
.wp-block-woocommerce-checkout-pickup-options-block { display: none; }
.wc-block-components-address-card { align-items: flex-start; border: 1px solid hsl(0deg 0% 7%); border-radius: 4px; display: flex; font-size: 1em; justify-content: flex-start; margin: 0; padding: 0.5em !important; font-family: 'poppins', sans-serif; font-size: 14px; }
.woocommerce-checkout { background-color: #000000; }
.wc-block-components-text-input.wc-block-components-address-form__email label { font-size: 14px; }
.wc-block-components-checkout-step__description { font-weight: 300; color: #000000; font-size: 0.675em !important; }
.wc-block-components-title.wc-block-components-title { font-size: 1em !important; font-family: 'Poppins'; color: #000000; font-weight: 500; }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] { height: 1.2em !important; min-height: 1.2em !important; min-width: 1.2em !important; width: 1.2em !important; }
span.wc-block-components-checkbox__label { font-weight: 300; color: #000000; }
.theme-twentytwentyone .wc-block-components-radio-control .wc-block-components-radio-control__input:checked { border-width: 1px !important; }
.wc-block-components-radio-control .wc-block-components-radio-control__input { height: 1.2em !important; min-height: 15px !important; min-width: 15px !important; width: 1.2em !important; }
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option { margin: 0; padding: .675em .875em .675em 2.5em !important; background-color: #fff !important; }
span.wc-block-checkout__shipping-option--free { font-size: 15px !Important; }
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked:before { height: .65em !important; min-height: 15px !important; min-width: 12px !important; width: .75em !important; }
button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained { background-color: #000000 !important; padding: 10px !important; font-family: 'Poppins' !important; width: 200px !important; border-radius: 7px !important; }
.wc-block-components-sidebar { background-color: #fff !important; padding: 20px !important; border-radius: 10px !important; font-family: 'Poppins' !important; }
.wc-block-components-sidebar-layout { gap: 10px !important; }
.wc-block-components-totals-wrapper { border-top: 1px solid hsla(0, 0%, 7%, .11); padding: 16px 0; font-size: 15px; }
.wc-block-components-totals-wrapper.slot-wrapper>*>* { padding: 16px 20px !important; }
.wc-block-components-form .wc-block-components-text-input label, .wc-block-components-text-input label { font-size: 0.7em !Important; }
.wc-block-components-address-card address .wc-block-components-address-card__address-section:first-child { font-size: 15px !important; }
.wc-block-components-address-card__address-section { font-size: 15px !important; }
.wc-block-components-address-card__edit { font-size: .675em !important; }
span.wc-block-components-checkbox__label { font-size: 15px !important; }
div#wc-stripe-payment-method-instructions-card { font-size: 15px !important; }
.wc-block-components-form .wc-block-components-checkout-step { margin: 0 0 10px !important; }
.wc-block-checkout__terms.wc-block-checkout__terms--with-separator { padding-top: 10px !important; margin-bottom: 10px !important; }
span.wc-block-components-radio-control__label { font-size: 15px !important; }

/* Login page */
.insta-logo { font-family: 'POPPINS'; font-size: 70px; margin-bottom: 0px; font-weight: 400; text-transform: uppercase; color: #ffffff; }
.insta-form { gap: 0 !important; }
.insta-box {margin: 60px auto;text-align: center;width: 28%;}
.login-box-inner {border: 1px solid #ffffff52;padding: 30px;}
.insta-box h1 {margin-bottom: 50px;}
.insta-footer a { color:#ffffff; }
.insta-form input {margin-bottom: 30px;background-color: transparent;height: 56px;font-family: 'Poppins';color: #fff;}
.insta-form input:focus { outline: none; }
.insta-form button {width: 100%;padding: 10px;font-weight: 400;font-size: 14px;color: #ffffff;background: #3897f0;border: none;border-radius: 6px;cursor: pointer;transition: background .3s;height: 56px;font-size: 16px;font-family: 'Poppins';margin-bottom: 18px;}
.insta-message { margin-bottom: 15px; padding: 10px; border-radius: 6px; font-size: 14px; }
.insta-message.error { background: #fde0e0; color: #a12d2d; }
.insta-message.success { background: #e0f8e0; color: #2d7a2d; }
.login-btn { background-color: #caa76a !important; }
.insta-footer p { color: #caa76a; font-size: 16px; margin-top: 0px; }
.woocommerce-checkout aside.widget-area, .woocommerce-checkout .site-footer { display: none; }
button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained { color: #ffffff; }
.wc-block-checkout__form>div:nth-child(1):before { content: 'Payment Procedure'; font-size: 43px; font-weight: 500; margin-top: 20px; line-height: 30px; display: block; }
.profile-image { margin-bottom: 20px; display: inline-block; position: relative; width: max-content; }
label[for="profile_image"] { margin-left: 0 !important; }
#profilePreview { position:absolute; top:0; left:0; transition: 0.3s opacity; }
.profile-image:hover label[for="profile_image"] { z-index:999 }
.profile-image:hover img#profilePreview { opacity: 0.3; }
@container (min-width: 700px) {
    .wc-block-checkout__actions { padding: 0 0 0px !important; }
}

@media(min-width:767px){
	.add { flex-grow: 6; display: flex; align-items: flex-end; }
	.menu-section { width:100%; }
}
@media (max-width: 768px) {
  .account-form { width: 95%; padding: 30px 15px; gap: 20px; }
  .account-form .title { font-size: 14px; }
  .profile-image img { width: 80px; height: 80px; }
  .account-form form { width: 100%; gap: 20px; }
  .account-form input,
  .account-form textarea { font-size: 14px; }
  textarea { width: 100%; }
  #save-btn { width: 100%; padding: 10px; font-size: 14px; }
  .login-sec-form .left-side { display:none; }
  .insta-box { margin: 60px auto; text-align: center; width: 100%; }
}


/*************************************************************
maaz css
*************************************************************/

.profile-section .header-content, .place-post-sec .page-header {padding-top: 70px;}
.profile-section .post-area {color: #545454;padding-top: 20px;}
.post-upload-body textarea {resize: none;}
.post-upload-page-content .dis-fx {flex-direction: column;padding: 0;gap: 0;}
.post-upload-page-content .main-area-text {padding: 30px 20px 20px;}
.post-upload-page-content .avatar-upload {margin: 0 auto;width: 100%;}
.post-upload-page-content form {max-width: 600px;}
.avatar-upload .avatar-preview {border-radius: 0 !important;}
.comment-box form { margin: 15px 0; }
.sticky-header h1 {padding-top: 10px;}
.sub-section:hover svg path {stroke: #baa16b;}
.home-page-header {max-width: 700px;width: 100%;}
.home-page-header h1 {font-size: 18px;color: var(--font-color);font-family: var(--web-font-family);padding-bottom: 20px;margin-bottom: 30px;border-bottom: 1px solid #70707063;font-weight: 500;padding-left: 10px;padding-right: 10px;}