phone/*
Template Name: Comp Tech
File: Layout CSS
Author: TemplatesOnWeb
Author URI: https://www.templateonweb.com/
Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>
*/

/*********************center_home****************/
.center_hm{
padding-top:100px;
padding-bottom:100px; 
 }
  /* ─── HERO ─── */
    .hero {
      position: relative;
      width: 100%;
      height: 600px;
      overflow: hidden;
    }

    .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.2s ease-in-out;
      background-size: cover;
      background-position: center;
    }

    .slide.active {
      opacity: 1;
    }

    .slide::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.2) 100%);
    }

    .slide-1 {
      background-image: url('../img/b1.jpg');
    }

    .slide-2 {
      background-image: url('../img/b2.jpg');
    }

    .slide-3 {
      background-image: url('../img/b3.jpg');
    }


    .hero-layout {
      position: relative;
      z-index: 2;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 60px;
      gap: 40px;
    }

    .hero-content {
      flex: 1;
      color: #fff;
      max-width: 520px;
    }

    .slide-badge {
      display: inline-block;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.3);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 5px 16px;
      border-radius: 999px;
      margin-bottom: 20px;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.6s 0.3s, transform 0.6s 0.3s;
    }

    .slide-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 42px;
      font-weight: 800;
      line-height: 1.18;
      margin-bottom: 18px;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.6s 0.5s, transform 0.6s 0.5s;
    }

    .slide-title span {
      color: #f59e0b;
    }

    .slide-desc {
      font-size: 14.5px;
      line-height: 1.75;
      color: rgba(255,255,255,0.82);
      margin-bottom: 32px;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.6s 0.7s, transform 0.6s 0.7s;
    }

    .hero-btns {
      display: flex;
      gap: 14px;
      align-items: center;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.6s 0.9s, transform 0.6s 0.9s;
    }

    .slide.active .slide-badge,
    .slide.active .slide-title,
    .slide.active .slide-desc,
    .slide.active .hero-btns {
      opacity: 1;
      transform: translateY(0);
    }

    .btn-hero-primary {
      padding: 12px 28px;
      border-radius: 999px;
      border: none;
      background: linear-gradient(135deg, #f59e0b, #ef4444);
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 0 18px rgba(239,68,68,0.5);
      transition: box-shadow 0.2s, transform 0.1s;
    }

    .btn-hero-primary:hover {
      box-shadow: 0 0 30px rgba(239,68,68,0.75);
      transform: translateY(-1px);
    }

    .btn-play {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255,255,255,0.12);
      border: 1.5px solid rgba(255,255,255,0.4);
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
      font-weight: 600;
      padding: 10px 22px;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .btn-play:hover {
      background: rgba(255,255,255,0.22);
    }

    .play-icon {
      width: 24px;
      height: 24px;
      background: #f59e0b;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      color: #fff;
    }

    /* ─── FORM ─── */
    .hero-form {
      background: #fff;
      border-radius: 14px;
      padding: 32px 28px;
      width: 320px;
      flex-shrink: 0;
      box-shadow: 0 16px 60px rgba(0,0,0,0.35);
    }

    .form-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 20px;
      font-weight: 800;
      color: #1a1a2e;
      margin-bottom: 4px;
    }

    .form-title span {
      color: #7b1e8b!important;
    }

    .form-sub {
      font-size: 12.5px;
      color: #888;
      margin-bottom: 20px;
    }

    .hero-form input {
      width: 100%;
      padding: 11px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 7px;
      font-family: 'Open Sans', sans-serif;
      font-size: 13px;
      color: #333;
      margin-bottom: 11px;
      outline: none;
      background: #f9fafb;
      transition: border-color 0.2s, background 0.2s;
    }

    .hero-form input:focus {
      border-color: #7c3aed;
      background: #fff;
    }

    .hero-form input::placeholder {
      color: #aaa;
    }

    .btn-submit {
      width: 100%;
      padding: 13px;
      border: none;
      border-radius: 8px;
      background: linear-gradient(135deg, #7b1e8b, #3b82f6);
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      margin-top: 4px;
      letter-spacing: 0.04em;
      transition: opacity 0.2s, transform 0.1s;
    }

    .btn-submit:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }

    /* ─── DOTS ─── */
    .dots {
      position: absolute;
      bottom: 24px;
      left: 60px;
      z-index: 10;
      display: flex;
      gap: 8px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.4);
      cursor: pointer;
      transition: background 0.3s, width 0.3s;
      border: none;
    }

    .dot.active {
      background: #f59e0b;
      width: 26px;
    }

    /* ─── PROGRESS BAR ─── */
    .progress-bar1 {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      width: 0%;
      background: linear-gradient(to right, #f59e0b, #ef4444);
      z-index: 10;
      transition: width 0s linear;
    }

    .progress-bar1.running {
      width: 100%;
      transition: width 4.5s linear;
    }

.center_h1l span a{
 width:80px;
 height:80px;
 line-height:80px;
 }
/*********************center_home_end****************/

/*********************about_h****************/
.about_h1r .progress-bar {
 background: linear-gradient(135deg, #7b1e8b, #3b82f6);
border-radius: 0;
}
.about_h1r .progress {
 background: linear-gradient(135deg, #7b1e8b, #3b82f6);
height: 7px;
overflow: hidden;
border-radius: 0;
}
.about_h1l2{
padding-top:120px;
left:10%; 
 }
.about_h1l2 img{
width:90%;
 }
/*********************about_h_end****************/

/*********************cont_h****************/
.cont_h1r{
margin-top:150px; 
 }
.main_2{
bottom:-90px; 
 }
/*********************cont_h_end****************/

/*********************work_h****************/
#work_h{
margin-top:100px; 
 }

/*********************work_h_end****************/

/*********************proj_h****************/
.proj_h1i2{
width:90%;
left:5%;
bottom:-40px; 
 }
#proj_h{
padding-bottom:80px; 
 }
/*********************proj_h_end****************/

/*********************price****************/
.testim_1i2{
bottom:-110px; 
 }
#testim{
padding-bottom:110px; 
 }
/*********************price_end****************/

@media screen and (max-width : 767px){
.center_h1l{
margin-top:0!important; 
text-align:center;
margin-bottom:20px;
 }
.center_h1l p{
text-align:left;
 }
.center_h1l h1{
text-align:left;
 }
.center_h1l br{
display:none; 
 }
.center_hm {
padding-top: 50px;
padding-bottom: 50px;
}
.about_h1l2{
display:none; 
 }
.about_h1l1 img{
width:100%;
 }


.main_2{
position:static!important; 
 }
.cont_h1r {
margin-top:20px;
}
.cont_h1r p{
text-align:left;
}
#cont_h{
padding-top:30px;
padding-bottom:30px; 
 }
#spec{
padding-top:30px;
 }
.spec_1ril{
padding:20px!important;
 }
#work_h {
margin-top: 0;
}

.proj_h1i2 {
position:static!important;
width:100%;
}
.proj_h1i{
text-align:center;
margin-top:8px;
margin-bottom:8px;  
 }
#proj_h {
padding-bottom: 30px;
}
.testim_1i2{
position:static!important;
margin-top:15px; 
 }
.testim_1i{
margin-top:8px;
margin-bottom:8px;  
 }
.testim_1i1{
padding:20px!important; 
 }
.testim_1i1 p{
text-align:left;
 }
#testim {
padding-bottom: 10px;
}
.blog_h1i{
margin-top:8px;
margin-bottom:8px; 
text-align:center; 
 }
.blog_h1i p{
text-align:left; 
 }
.blog_h1i h5{
text-align:left; 
 }
.blog_h1i2{
padding:10px!important; 
 }
 }

@media (min-width:576px) and (max-width:767px) {

 }
@media (min-width:768px) and (max-width:991px) {
.center_h1l br{
display:none; 
 }
.center_hm {
padding-top: 50px;
padding-bottom: 50px;
}
.about_h1l2{
display:none; 
 }
.about_h1l1 img{
width:100%;
 }
.about_h1r br{
display:none; 
 }
.cont_h1l img{
min-height:650px; 
 }
.proj_h1i2{
padding:10px!important; 
 }
.proj_h1i2 h4{
font-size:16px;
 }
.proj_h1i2 h6{
font-size:14px;
 }

 }

@media (min-width:992px) and (max-width:1200px) {

 }
@media (min-width:1201px) and (max-width:1360px) {

 }