/*
Theme Name: PORTFOLIO
Author: Romail Anwer
Version: 1.0
*/  


/* ==========================================================================
   0. SVG SIZE ADJUSTMENT & TRANSITION
   ========================================================================== */
.my-dynamic-btn .elementor-button-icon svg {
    width: 12px !important;
    height: 12px !important;
    transition: fill 0.5s ease, stroke 0.5s ease !important;
}


/* ==========================================================================
   1. BASE STYLES FOR DYNAMIC BUTTONS
   ========================================================================== */
.my-dynamic-btn .elementor-button {
    position: relative;
    overflow: hidden !important;
    z-index: 1;
    background-color: #2D32EF !important; /* Default BG Color Blue */
    transition: color 0.5s ease !important;
}

.my-dynamic-btn .elementor-button-text,
.my-dynamic-btn .elementor-button-icon {
    position: relative;
    z-index: 5;
    color: #ffffff !important; /* Default Text/Icon White */
    transition: color 0.5s ease, transform 0.3s ease !important;
}

/* Default state: SVG paths, polylines aur icons ko white rakhna */
.my-dynamic-btn .elementor-button-icon svg path,
.my-dynamic-btn .elementor-button-icon svg polyline,
.my-dynamic-btn .elementor-button-icon svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Dynamic Span Element (Ripple Circle) */
.my-dynamic-btn .btn-ripple-span {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    transition: width 0.7s ease, padding-top 0.7s ease;
    z-index: 2;
    pointer-events: none;
}

/* Hover hone par circle ka phelna */
.my-dynamic-btn:hover .btn-ripple-span {
    width: 300%;
    padding-top: 300%;
}

/* Arrow transition on hover */
.my-dynamic-btn:hover .elementor-button-icon {
    transform: translate(3px, -3px) !important;
}


/* ==========================================================================
   2. BUTTON STYLE 1: LIGHT HOVER (Blue -> Hover White Circle + Black Text)
   Class: my-dynamic-btn btn-light-hover
   ========================================================================== */
.btn-light-hover .btn-ripple-span {
    background: #ffffff; /* White Ripple */
}

/* Hover State: Text and SVG Icons become BLACK */
.btn-light-hover:hover .elementor-button-text,
.btn-light-hover:hover .elementor-button-icon {
    color: #000000 !important;
}

.btn-light-hover:hover .elementor-button-icon svg,
.btn-light-hover:hover .elementor-button-icon svg path,
.btn-light-hover:hover .elementor-button-icon svg polyline {
    fill: #000000 !important;
    stroke: #000000 !important;
}


/* ==========================================================================
   3. BUTTON STYLE 2: DARK HOVER (Blue -> Hover Black Circle + White Text)
   Class: my-dynamic-btn btn-dark-hover
   ========================================================================== */
.btn-dark-hover .btn-ripple-span {
    background: #1a1a1a; /* Black/Dark Ripple */
}

/* Hover State: Text and SVG Icons stay WHITE */
.btn-dark-hover:hover .elementor-button-text,
.btn-dark-hover:hover .elementor-button-icon {
    color: #ffffff !important;
}

.btn-dark-hover:hover .elementor-button-icon svg,
.btn-dark-hover:hover .elementor-button-icon svg path,
.btn-dark-hover:hover .elementor-button-icon svg polyline {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}


/* ==========================================================================
   4. CONTACT FORM 7 CARD & ENTRANCE ANIMATION
   ========================================================================== */
@keyframes formFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rm-form-card {
  background: #FFFFFF;
  border-radius: 18px;
  border: 1px solid #DCE1F5;
  padding: 32px;
  max-width: 520px;
  opacity: 0;
  animation: formFadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 100ms;
}

/* CF7 blank paragraph reset */
.rm-form-card p {
  margin: 0 !important;
}

.rm-form-title {
  font-family: "Plus Jakarta Sans", Sans-serif;
  font-size: 25px;
  font-weight: 500;
  margin: 0 0 22px 0;
  background: linear-gradient(91.16deg, #325FEC 1.74%, #000000 43.71%, #000000 61.62%, #325FEC 102.48%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

.rm-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.rm-field {
  margin-bottom: 18px;
}

.rm-field:last-of-type {
  margin-bottom: 20px;
}

.rm-field label {
  color: #12172E;
  display: block;
  margin-bottom: 7px;
  font-family: "Plus Jakarta Sans", Sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.rm-form-card .wpcf7-form-control-wrap {
  display: block;
}

/* Inputs design */
.rm-form-card input[type="text"],
.rm-form-card input[type="email"],
.rm-form-card textarea {
  width: 100% !important;
  border: 1px solid #DCE1F5 !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-family: "Plus Jakarta Sans", Sans-serif !important;
  font-size: 14px !important;
  color: #12172E !important;
  background: #FAFBFF !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease !important;
}

.rm-form-card input[type="text"]:focus,
.rm-form-card input[type="email"]:focus,
.rm-form-card textarea:focus {
  border-color: #3654F4 !important;
}

.rm-form-card textarea {
  height: 100px !important;
  resize: none !important;
}

/* Form inputs staggered entrance delay setup */
.rm-form-title,
.rm-row-2,
.rm-field,
.form-submit-wrap {
  opacity: 0;
  animation: formFadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.rm-form-title { animation-delay: 250ms; }
.rm-row-2 { animation-delay: 400ms; }
.rm-field:nth-of-type(2) { animation-delay: 550ms; }
.rm-field:nth-of-type(3) { animation-delay: 700ms; }
.form-submit-wrap { animation-delay: 850ms; }


/* ==========================================================================
   5. CF7 SUBMIT BUTTON WITH RIPPLE HOVER (Centering Fixed)
   ========================================================================== */
.form-submit-wrap {
    position: relative;
    display: flex; /* Flexbox centering ke liye */
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px; /* Fixed height taake button perfect shape mein rahe */
    overflow: hidden !important;
    border-radius: 50px !important;
    z-index: 1;
    background-color: #325FEC !important; /* Base Blue color */
    transition: background-color 0.5s ease;
}

.form-submit-wrap input[type="submit"] {
    position: relative;
    width: 100% !important;
    height: 100% !important; /* Wrapper ki height ke barabar */
    background: transparent !important; /* Ripple effect dekhne ke liye */
    color: #ffffff !important;
    border: none !important;
    padding: 0 !important; /* Extra space reset karne ke liye */
    margin: 0 !important;
    border-radius: 50px !important;
    font-family: "Plus Jakarta Sans", Sans-serif !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    cursor: pointer !important;
    z-index: 5;
    transition: color 0.5s ease !important;
    
    /* Perfect text centering inside button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1 !important; 
}

/* Spinner element ko reset karna taake ye alignment kharab na kare */
.form-submit-wrap .wpcf7-spinner {
    position: absolute !important;
    right: 20px !important; /* Isko side par shift kar diya */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 6; /* Button text aur ripple ke upar show hoga */
}

.form-submit-wrap .btn-ripple-span {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 100%;
    background: #000000; /* Black Ripple */
    transform: translate(-50%, -50%);
    transition: width 0.7s ease, padding-top 0.7s ease;
    z-index: 2;
    pointer-events: none;
}

.form-submit-wrap:hover .btn-ripple-span {
    width: 300%;
    padding-top: 300%;
}

.form-submit-wrap:hover input[type="submit"] {
    color: #ffffff !important;
}


/* ==========================================================================
   6. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
.rm-form-card .wpcf7-not-valid-tip {
  color: #E23E3E;
  font-size: 12.5px;
  margin-top: 5px;
}

.rm-form-card .wpcf7-response-output {
  border-radius: 8px;
  font-size: 13.5px;
  margin-top: 16px !important;
}

@media (max-width: 600px) {
  .rm-row-2 {
    grid-template-columns: 1fr;
  }
}