/*
Theme Name: Masterly Solutions
Theme URI: https://masterlysolutions.com/
Author: Masterly Solutions
Description: Masterly Solutions theme.
Version: 1.0.0
Text Domain: masterlysolutions
*/

:root { 
  --primary: #4A7AC7; 
  --bs-primary-rgb: 74, 122, 199;
  --secondary: #9B7DBF; 
  --white: #ffffff; 
  --bg-gradient : linear-gradient(135deg, #4A7AC7 0%, #9B7DBF 100%);
  --dark-bg-gradient : linear-gradient(135deg, #1e293b 0%, #334155 100%);
  --light-gardient : linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  --black: #1e293b;
  --grey : #64748b;
  --light-grey : #f8fafc;
  --shadow-rounded: 0 2px 10px rgba(0,0,0,0.05);
  --shadow: 0 4px 20px rgba(74, 122, 199, 0.08);
}

body {background: #f0f0f0; color: var(--black) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;}

a {transition: all 0.3s ease;}

.bg-white-filter{background: rgba(255, 255, 255, 0.2);}
.bg-grey{background-color: var(--light-grey) !important;}
.bg-gardient{background: var(--bg-gradient);}
.light-bg-gardient{background: var(--light-gardient);}
.dark-bg-gradient{background:var(--dark-bg-gradient);}
.text-linear-gardient{background: var(--bg-gradient); -webkit-text-fill-color: transparent; background-clip: text;}
.text-primary{color: var(--primary) !important;}
.text-grey{color: var(--grey) !important;}
.custom-shadow{box-shadow: 0 2px 10px rgba(0,0,0,0.08);}
.shadow-rounded{box-shadow: var(--shadow-rounded) !important;}
.border-transparent{border-color: transparent !important;}
.border-primary{border-color: var(--primary) !important;}
.border-filter{border: 2px solid rgba(255, 255, 255, 0.3);}
.backdrop-filter-blur{backdrop-filter: blur(10px);}

.border-dashed { border-style: dashed !important;}

/* common css */
.btn{transition: all 0.3s ease; font-weight: 700; border-radius: 8px; --bs-btn-padding-y: 0.563rem; --bs-btn-padding-x: 1.625rem;}

.btn.btn-sm {--bs-btn-padding-x: 1.563rem;}
.btn.btn-lg {--bs-btn-padding-x: 2.5rem; --bs-btn-padding-y: 1rem; font-size: 1.063rem;}

.btn-primary { background: var(--bg-gradient) !important; box-shadow: 0 4px 15px rgba(74, 122, 199, 0.3); border-color: transparent !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { box-shadow: 0 8px 25px rgba(74, 122, 199, 0.4);}


.btn-secondary{background-color: var(--white); box-shadow: 0 4px 15px rgba(74, 122, 199, 0.3); border-color: transparent !important; color: var(--primary) !important;  }
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active{background-color: var(--white); box-shadow: 0 10px 30px rgba(255, 255, 255, 0.4);}

.btn-outline-primary{border: 2px solid var(--white); color: var(--white);}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active{background-color: var(--white); color: var(--primary); border: 2px solid var(--white); transform: none; box-shadow: none;}

.btn-link { padding:0; text-decoration:none; color: var(--primary); }
.btn-link:hover {color: var(--secondary); }

.mb-0 p { margin-bottom:0 !important; }

.card{box-shadow: var(--shadow); background-color: var(--white); border: 2px solid #f1f5f9; border-radius: 12px; transition: all 0.3s ease;}
.card.card-hover:hover{transform: translateY(-5px); box-shadow: 0 8px 25px rgba(74, 122, 199, 0.15) !important;}
.card.card-hover-border:hover{transform: translateY(-5px); box-shadow: 0 8px 25px rgba(74, 122, 199, 0.15) !important; border-color: var(--primary);}
.card.card-hover-top-border:hover{transform: translateY(-10px); box-shadow: 0 15px 50px rgba(74, 122, 199, 0.2); border-top-color: var(--primary) !important;}
.card.card-hover-border-end::before{content: '';position: absolute; top: 0; right: 0; width: 80px; height: 80px; background: linear-gradient(135deg, #4A7AC7 0%, #9B7DBF 100%); opacity: 0.05; border-radius: 0 0 0 100%; transition: all 0.3s ease;}
.card.card-hover-border-end:hover{transform: translateY(-10px); box-shadow: 0 15px 50px rgba(74, 122, 199, 0.25);}
.card.card-hover-border-end:hover::before{opacity: 0.1; width: 120px; height: 120px;}
.card.card-hover-border-start:hover{transform: translateX(5px); box-shadow: var(--shadow) !important;}

.nav-tabs .nav-item .nav-link{border: 2px solid #e2e8f0; background-color: var(--white); transition: all 0.3s ease; color: var(--grey); border-top-left-radius: 24px; border-top-right-radius: 24px; padding: 0.45rem 1.2rem;}
.nav-tabs .nav-item .nav-link:hover,.nav-tabs .nav-item .nav-link.active{background-color: var(--primary); color: var(--white); border-color: var(--primary);} 

.custom-nav-tabs {border: none; gap: 10px;}
.custom-nav-tabs .nav-item .nav-link { border-radius: 25px; font-weight: 600; font-size: 0.875rem;}


.rounded-24px{border-radius: 24px;}
.list-style-1 li::before{content: "✓"; position: absolute; left: 0; top: 0;}
.circle-40px {width: 40px; height: 40px; border-radius: 100%;}
.circle-60px{width: 60px; height: 60px;}
.form-control, .form-select{border: 2px solid #e2e8f0;}
.form-control:focus, .form-select:focus {border-color: var(--primary); box-shadow: none;}
.contact-form form p { margin-bottom:0; }
.h-100px { height:100px; }

.letter-spacing{letter-spacing: 1px;}
.fw-800{font-weight: 800;}
.fs-18px{font-size: 1.125rem;}
.fs-14px{font-size: 0.875rem;}
.fs-12px{font-size: 0.75rem;}

.breadcrumb-white {font-size:0.875rem;}
.breadcrumb-white .breadcrumb-item.active { color: var(--bs-white); font-weight: 500;}
.breadcrumb-white .breadcrumb-item+.breadcrumb-item::before { color: var(--bs-white) }
.breadcrumb-white .breadcrumb-item a {color: var(--bs-white); text-decoration:none;}
.breadcrumb-white .breadcrumb-item a:hover {text-shadow: 0 0 3px rgba(255, 255, 255, 0.5), 0 0 5px rgba(255, 255, 255, 0.4);}

.list-style-custom ul { list-style-type:none; padding:0; margin:0; }
.list-style-custom ul li, ul.list-style-custom li  { padding: 6px 0; display: flex; align-items: start; gap: 12px; }
.list-style-custom ul li:before, ul.list-style-custom li:before { content: '✓'; color: #4A7AC7; font-weight: bold; font-size: 1.2rem; flex-shrink: 0;}

.filter-badge {border: 2px solid #e2e8f0; background-color: var(--white); transition: all 0.3s ease; color: var(--grey); padding: 0.45rem 1.2rem; font-weight: 600; font-size: 0.975rem; text-decoration: none; line-height: 1.2;}
.filter-badge:hover, .filter-badge.active {background: linear-gradient(135deg, #4A7AC7 0%, #9B7DBF 100%); color: white; border-color: #4A7AC7;}

.post-content img { max-width:100%; height:auto; }
.wh-44px { width:44px; height:44px; }
.wh-54px { width:54px; height:54px; }

@media (min-width:1200px) {
  .w-xl-80 { width: 80% !important;}
  .custom-nav-tabs { gap: 15px;}
  .list-style-custom ul li, ul.list-style-custom li {padding: 12px 0;}
  .w-xl-50 { width: 50% !important;}
}

/* Common CSS End */

.career-form-body .wpcf7-spinner { display:none; }
.career-form-body textarea { height:100px; }

/*header css */
@media (min-width:1200px) {
  .navbar .nav-item{position: relative;}
  .navbar .nav-item .dropdown-menu{display: block; position: absolute;top: 100%; left: -20px;  opacity: 0; visibility: hidden; transform: translateY(10px);  z-index: 1000; overflow-y: auto;}
  .navbar .dropdown:hover .dropdown-menu{opacity: 1; visibility: visible; transform: translateY(0);}
  .navbar .nav-item.menu-item-has-children:hover > a:after { transform: rotate(180deg);}
  .navbar .nav-link:hover { color: var(--primary) !important; font-weight: 600; }
}
.navbar .nav-link { transition: all 0.3s ease; color: var(--black); font-weight: 600;}
.navbar .nav-link.active, .navbar .current-menu-parent.active > .nav-link { color: var(--primary) !important; font-weight: 600; }
.navbar .nav-item .dropdown-menu{border: none; background: var(--white); min-width: 260px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); border-radius: 12px; padding: 10px 0; transition: all 0.3s ease;}
.navbar .nav-item .dropdown-item { padding: 10px 25px; background-color: transparent; color: var(--black); font-weight: 500;  }
.navbar .nav-item .dropdown-item:hover {color: var(--primary); padding-left: 30px;}
.navbar .nav-item .dropdown-item.active {background-color: var(--bs-dropdown-link-hover-bg); color: var(--primary);}
.navbar .nav-item .dropdown-toggle::after {background-image: url(assets/images/arrow-down.svg); border: none; background-size: 16px; width: 18px; height: 18px; background-repeat:  no-repeat; background-position: center top; vertical-align: top; opacity: .75; position: relative; top: 5px; transition: inherit;}
.navbar .nav-item.menu-item-has-children:hover > a.show:after { transform: rotate(180deg);}

@media (max-width:1199px) {
  .navbar .offcanvas { width:300px; }
  .navbar .nav-link { border-bottom:1px solid var(--bs-light-border-subtle); padding:0.7rem; }
}
.navbar-toggler:focus { box-shadow:none; }

/* banner css */
.banner-bg {
  background: linear-gradient(135deg, #4A7AC7 0%, #9B7DBF 50%, #4A7AC7 100%);
  background-size: 200% 200%;
  position: relative;
  overflow: hidden;
  will-change: background-position;
}

/* Animations added after page load */
.banner-bg.animated {
  animation: gradientShift 15s ease infinite;
}

.banner-bg.animated::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 50%);
  animation: particleFloat 20s ease-in-out infinite;
  pointer-events: none;
}

.banner-bg.animated::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: repeating-linear-gradient(45deg, transparent, transparent 50px, rgba(255,255,255,0.02) 50px, rgba(255,255,255,0.02) 100px);
  animation: gridMove 30s linear infinite;
  pointer-events: none;
}

/* Animations */
@keyframes particleFloat {
  0%, 100% { transform: translate(0,0); }
  33% { transform: translate(30px,-30px); }
  66% { transform: translate(-30px,30px); }
}

@keyframes gridMove {
  0% { transform: translate(0,0); }
  100% { transform: translate(70px,70px); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Blog Pagination */
.pagination-wrapper .screen-reader-text { display:none; }
.pagination-wrapper .pagination { justify-content:center; }
.pagination-wrapper .pagination .nav-links { display:flex; flex-wrap:wrap; gap:10px; }
.pagination-wrapper .pagination .page-numbers, .pagination-wrapper .pagination a {display: inline-block; vertical-align: top; padding: 10px 14px; background: #ccc; line-height: 1.2;   font-size: 14px; color: var(--primary); background-color: #EDF1F9; text-decoration: none; font-weight: 500; border-radius: 5px;}
.pagination-wrapper .pagination a:hover, .pagination-wrapper .pagination .current {color: var(--white); background-color: var(--primary);}

/* technology css */
.technology-details{grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));}

/*footer css */
footer ul li{padding-bottom: 10px;}
.footer a{text-decoration: none; color: var(--white);}
.footer a:hover {color: var(--primary);}

/* Feature Project */
.project-image { height:240px; overflow:hidden; }
.project-image img { width:100%; height:100%; object-fit: cover; }
.project-image img[src$=".svg"] { object-fit: contain;}

/* Banner Rotating Text */
.rotating-text { display: inline-block; position: relative; min-width: 300px; vertical-align: bottom; height: 1.2em;}
.rotating-text span { position: absolute; left: 0; right: 0; opacity: 0; animation: fadeInOut 16s infinite; }

@keyframes fadeInOut {
    0%, 100% { opacity: 0; transform: translateY(20px); }
    6.25%, 18.75% { opacity: 1; transform: translateY(0); }
    25%, 100% { opacity: 0; transform: translateY(-20px); }
}

.rotating-text span:nth-child(1) { animation-delay: 0s; }
.rotating-text span:nth-child(2) { animation-delay: 4s; }
.rotating-text span:nth-child(3) { animation-delay: 8s; }
.rotating-text span:nth-child(4) { animation-delay: 12s; }

/* Banner Dots Animation */
.node { position: absolute; width: 8px; height: 8px; background: rgba(255, 255, 255, 0.4);    border-radius: 50%; box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);}
.node:nth-child(1) { top: 15%; left: 10%; animation: pulse 3s ease-in-out infinite;}
.node:nth-child(2) { top: 25%; right: 15%; animation: pulse 3s ease-in-out 0.5s infinite;}
.node:nth-child(3) { bottom: 20%; left: 20%; animation: pulse 3s ease-in-out 1s infinite;}
.node:nth-child(4) { bottom: 30%; right: 25%; animation: pulse 3s ease-in-out 1.5s infinite;}
.node:nth-child(5) { top: 50%; left: 5%; animation: pulse 3s ease-in-out 2s infinite;}
.node:nth-child(6) { top: 45%; right: 8%; animation: pulse 3s ease-in-out 2.5s infinite; }
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.8;
    }
}

#careerFormModal .wpcf7 form.sent .wpcf7-response-output {
  display: none !important;
}