:root {

 /* ===== PRIMARY BRAND COLORS ===== */
 --primary-dark: #0D2440; /* Main Brand Navy */
 --primary-blue: #2E5E99; /* Core Tech Blue */
 --primary-light: #7BA4D0; /* Accent Blue */
 --background-light: #E7F0FA; /* Main Background */

 /* ===== TEXT COLORS ===== */
 --text-dark: #0D2440;
 --text-light: #ffffff;
 --text-muted: #5A6C80;

 /* ===== BUTTON COLORS ===== */
 --btn-primary: var(--primary-blue);
 --btn-primary-hover: var(--primary-light);
 --btn-dark: var(--primary-dark);
 --btn-dark-hover: #163a63;

 /* ===== BORDER COLORS ===== */ 
 --border-light: #d6e2f0;
 --border-dark: #1a3555;

 /* ===== GRADIENTS ===== */
 --gradient-primary: linear-gradient(135deg, #0D2440, #2E5E99);
 --gradient-light: linear-gradient(135deg, #7BA4D0, #E7F0FA);

 /* ===== SHADOWS ===== */
  --shadow-soft: 0 4px 12px rgba(13, 36, 64, 0.08);
 --shadow-medium: 0 6px 18px rgba(13, 36, 64, 0.15);
 --box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);

 /* ===== TYPOGRAPHY ===== */
 --main-font-family: 'Poppins', sans-serif;
 --letter-spacing-one: -0.04em;
 --letter-spacing-two: 0.1em;

 /* ===== UI SETTINGS ===== */
 --border-radius: 10px;
--transition-fast: 0.3s ease;
--transition-smooth: 0.5s ease;

}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.services .main .heading{
    text-align: center;
    position: relative;
background-image: url(banner-thumb-4.webp);
    background-position: top right;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 151px 0 135px;
    z-index: 5;
}
.services .main .heading::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    background-image: url(right.webp);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    height: 100%;
    width: 100%;
}
.services .main .heading h3{
    font-size: 40px;
    color:var(--text-light);
    text-transform: uppercase;
}

/* -----------------------------------menu---------------------------------------------------- */
.services .main .menu{
    padding: 15px 0px 15px 40px;
    background-color: var(--background-light);
}
.services .main .menu a{
    text-decoration: none;
    color:var(--text-dark);
}
.services .main .menu i{
    color: var(--primary-light);
    margin: 0px 8px;
    font-weight: 600;
}
/* ----------------------------------part1------------------------------- */
.services .main .part1{
    background-image: url(service-details-new.jpg);
    padding: 30px 0px;
}
.services .main .part1 .container .art{
    display: flex;
    gap: 20px;
}
.services .main .part1 .container .art .art-left{
    width: 58%;
}
.services .main .part1 .container .art .art-left h3{
    font-size: 45px;
    font-weight: 500;
    color: var(--primary-blue);
        font-family: var(--main-font-family);
    margin: 0px 0px 25px 0px;
}
.services .main .part1 .container .art .art-left p{
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: #3e3e3e;
}
.services .main .part1 .container .art .art-right{
    width: 42%;
    display: flex;
    align-items: center;
     justify-content: end;   
}
.services .main .part1 .container .art .art-right img{
    width: 99%;
}


/* ---------------------------------part2---------------------------------------------------------- */
.services .main .part2{
  /* background:#25245D; */
  background: var(--primary-dark);
    font-family:var(--main-font-family);

}
.services .main .part2 .part2-inner{
      background-image: url(https://www.pixlogix.com/wp-content/themes/Pixlogix/img/service-detail-bg.svg);

}
.services .main .part2 .part2-inner .container .part2-main{
    display: flex;
    gap: 60px;
    padding: 60px 0px;
    align-items: center;
}
.services .main .part2 .part2-inner .container .part2-main .left{
    width: 50%;
}
.services .main .part2 .part2-inner .container .part2-main .left h2{
    color:var(--text-light);
  font-size:48px;
  margin-bottom:20px;
}
.services .main .part2 .part2-inner .container .part2-main .left p{
    color: var(--primary-light);
  line-height:1.7;
}
.services .main .part2 .part2-inner .container .part2-main .left .list-box{
    display: flex;
    margin: 30px 0px;
}
.services .main .part2 .part2-inner .container .part2-main .left .list-box ul{
    width: 50%;
      padding-left: 19px;

}
.services .main .part2 .part2-inner .container .part2-main .left .list-box ul li{
    color:var(--text-light);
  margin-bottom:10px; 
}
.services .main .part2 .part2-inner .container .part2-main .left .review{
     background: var(--background-light);
    display: flex;
}
.services .main .part2 .part2-inner .container .part2-main .left .review .review-left{
    color: var(--primary-dark);
        font-size: 30px;
    width: 80px;
    align-items: center;
    display: flex;
    justify-content: center;
    background: var(--border-light);
}
.services .main .part2 .part2-inner .container .part2-main .left .review .review-right{
    padding: 15px 10px 0px 10px;
}
.services .main .part2 .part2-inner .container .part2-main .left .review .review-right .star i{
    color: var(--primary-light);
    font-size: 20px;
}
.services .main .part2 .part2-inner .container .part2-main .left .review .review-right p{
      color: var(--primary-dark);
    font-size: 18px;
}
.services .main .part2 .part2-inner .container .part2-main .right{
    width: 50%;
}
.services .main .part2 .part2-inner .container .part2-main .right .form-card{
       background: var(--text-light);
  border-radius:30px;
   box-shadow: var(--shadow-medium);
  overflow:hidden;

}
.services .main .part2 .part2-inner .container .part2-main .right .form-card .form-header{
    background:var(--background-light);
  padding:20px 5px;
  text-align:center;
  font-size:26px;
  font-weight:700;
  color:var(--primary-dark);
}
.services .main .part2 .part2-inner .container .part2-main .right .form-card form .sec{
    display: flex;
    gap: 20px;
    padding: 20px 20px 0px 20px;
}
.services .main .part2 .part2-inner .container .part2-main .right .form-card form .last{
    display: block;
}
.services .main .part2 .part2-inner .container .part2-main .right .form-card form .sec .sec-inner{
    width: 50%;
}
.services .main .part2 .part2-inner .container .part2-main .right .form-card form .sec  sup{
   color: var(--primary-light);
   font-size: 16px;
}
.services .main .part2 .part2-inner .container .part2-main .right .form-card form .sec .sec-inner input ,.sec textarea{
    width: 100%;
    margin-top: 10px;
     padding:12px;
   border: 1px solid var(--border-light);
  outline:none;
}
.services .main .part2 .part2-inner .container .part2-main .right .form-card form .sec  textarea{
height: 120px;
}
.services .main .part2 .part2-inner .container .part2-main .right .form-card form .form-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    gap:15px;
  flex-wrap:wrap;
}
.services .main .part2 .part2-inner .container .part2-main .right .form-card form .form-footer .btn{
    background: var(--primary-blue);
  border:none;
  color: var(--text-light);
  padding:12px 28px;
  border-radius:30px;
  font-size:16px;
  display:flex;
  align-items:center;
  gap:8px;
}
.services .main .part2 .part2-inner .container .part2-main .right .form-card form .form-footer .content{
    font-size:15px;
   color: var(--text-muted);
  display:flex;
  align-items:center;
  gap:8px;
}
/* -----------------------------part3----------------------------- */
.services .main .part3{
    display: flex;
}
.services .main .part3 .left{
    width: 40%;
}
.services .main .part3 .left .left-inner{
    position: relative;
    height: 100%;
}
.services .main .part3 .left .left-inner img{
    position: absolute;
    width: 100%;
    height: 100%;
}
.services .main .part3 .left .left-inner h2{
    position: absolute;
    top: 30px;
    left: 55px;
    font-family:var(--main-font-family);
    font-weight: 700;
    color: var(--text-light);
}
.services .main .part3 .left .left-inner h2 span{
    color:var(--primary-light);
}
.services .main .part3 .right{
    width: 60%;
}
.services .main .part3 .right .right-inner {
    background:var(--primary-blue);

}
.services .main .part3 .right .right-inner .box{
    padding: 30px 40px 0px 40px;
    transition:var(--transition-smooth);
    margin-bottom: 10px;
}
.services .main .part3 .right .right-inner .last{
        margin-bottom: 0px;

}
.services .main .part3 .right .right-inner .box:hover{
    background:var(--primary-dark);
}
.services .main .part3 .right .right-inner .box .box-inner{
   border-bottom: 0.5px solid var(--text-light);
}
.services .main .part3 .right .right-inner .box .box-inner h4{
    font-size: 22px;
    color:var(--text-light);
}
.services .main .part3 .right .right-inner .box .box-inner p{
        color: var(--text-light);
line-height: 22px
}


/* -------------------------------------part4------------------------------------------ */

.services .main .part4{
     background: var(--background-light);
    padding: 60px 0px;
}
.services .main .part4 h2{
    font-family:var(--main-font-family);
    font-weight: 500;
    font-size: 43px;
    color: var(--text-dark);
    margin-bottom: 30px;
}
.services .main .part4 .faq .card{
    margin-bottom: 25px;
    border: none;
    border-radius: 30px;
    background: var(--text-light);
    box-shadow: 0px 0px 50px 0 rgba(0, 0, 1, 0.05);
    padding: 20px 30px;
}
.services .main .part4 .faq .card .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
      color: var(--primary-dark);
}
.services .main .part4 .faq .card .top i{
    font-size:18px;
     transition: var(--transition-fast);
}
.services .main .part4 .faq .card.active .top{
       color: var(--primary-light);
}
.services .main .part4 .faq .card.active .top i{
    transform:rotate(180deg);
}
.services .main .part4 .faq .card .top .left{
    width: 85%;

}
.services .main .part4 .faq .card .bottom p{
    font-size: 16px;
     color: var(--text-muted);
}
.services .main .part4 .faq .card .bottom{
    /* display: none; */
    padding-top: 10px;
     max-height:0;
     overflow:hidden;
       transition: max-height var(--transition-smooth);
}

/* ------------------------------------------------part5----------------------------------------- */

.services .main .part5{
    padding: 30px 44px ;
    /* background: var(--background-light); */
}
.services .main .part5 .first-heading{
    display: flex;
    align-items: center;
}
.services .main .part5 .first-heading .underline{
    width: 40px;
    height: 1px;
 background: var(--border-dark);
    margin:-10px 10px 0px 0px;
    
}
.services .main .part5 .first-heading h5{
    color: var(--primary-light);
    font-family:var(--main-font-family);
     font-size: 17px;
             font-weight: bold;
}
.services .main .part5  .second-heading h2{
    font-family:var(--main-font-family);
    color: var(--text-dark);
        font-weight: bold;
        margin: 20px 0px;
}
.services .main .part5 .parent{
    display: grid;
gap: 19px;
/* flex-wrap: wrap; */
grid-template-columns: repeat(5, 1fr);
}
.services .main .part5 .parent .child{
    border: 1px solid var(--border-light);
    padding: 10px;
    border-radius:var(--border-radius);
  background-color: var(--text-light);
    box-shadow: 0 10px 25px 3px rgba(0, 0, 0, .05);
    text-align: center;
}
.services .main .part5 .parent .child .img{
    width: 100%;
    height:230px;
}
.services .main .part5 .parent .child .img img{
    width: 100%;
    height: 100%;
    border-radius:var(--border-radius);
}
.services .main .part5 .parent .child .logo{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: -40px auto 10px auto;
           background: var(--background-light);
    display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  z-index: 10;
}
.services .main .part5 .parent .child .logo i{
    font-size: 30px;
}
.services .main .part5 .parent .child h3{
    font-size: 22px;
 color: var(--primary-dark);
    margin:10px 0px 12px 0px;
    font-weight: 600;
}
.services .main .part5 .parent .child .logo .health{
    color: var(--primary-blue);
}
.services .main .part5 .parent .child .logo .shop{
   color: var(--primary-light);
}
.services .main .part5 .parent .child .logo .travel{
     color: var(--primary-blue);
}
 .services .main .part5 .parent .child .logo .business{
   color: var(--primary-light);
}
.services .main .part5 .parent .child .logo .education{
   color: var(--primary-blue);
}