/* root delcarartion */
:root{
    --main-color-pink:#ED017F; 
    --main-color-white:#FFFFFF;
    --main-color-grey:#676767;
    --main-color-black:black; 
    --main-color-grey1:#999999; 
    --main-color-black1:#343434;
    --main-color-black2:#363940; 
    --main-font-black:"Metropolis-Black"; 
    --main-font-bold: "Metropolis-Bold"; 
    --main-font-semi-bold:"Metropolis-SemiBold";
    --main-font-medium:"Metropolis-Medium";

} 
/* universal selector */
*{
    margin: 0; 
    padding: 0; 
    box-sizing: border-box;
} 
/* global declaration */ 
/* full width of website  */ 
.container{
    max-width: 1394px; 
    padding: 0 15px; 
    margin: 0 auto;
}
.row{
    display: flex; 
    flex-wrap: wrap; 
    margin: 0 -15px;
} 
img{
    max-width: 100%; 
    height: auto;
} 
ul,li{
    list-style: none;
}  
html{
  scroll-behavior: smooth;
}
body{
    /* color:var(--main-color-grey1); */
    font-size: 14px; 
    font-family: "Metropolis-Medium"; 
    line-height: 1.7; 
    /* text-align: justify; */
    font-weight: 500;
}

a{
    text-decoration: none;
} 
figure{
    display: block;
}  
  
.cmn-btn{
    color: var(--main-color-white);
    background-color: var(--main-color-pink); 
    padding: 18px 30px;
    display: inline-block; 
    cursor: pointer;
    text-transform: capitalize; 
    border: 3px solid transparent;
} 
.cmn-btn:hover{
    color: var(--main-color-pink); 
    background-color: transparent;
    border: 3px solid var(--main-color-pink);
} 
.cmn-btn1{
        color: var(--main-color-white);
    background-color: var(--main-color-pink); 
    padding: 13px 22px;
    display: inline-block; 
    cursor: pointer; 
      border: 3px solid transparent;
    text-transform: capitalize;
} 
.cmn-btn1:hover{
      color: var(--main-color-pink); 
    background-color: transparent;
    border: 3px solid var(--main-color-pink);
}


/* font face declaration  */

@font-face {
    font-family: "Metropolis";
    src: url(font/metropolis/Metropolis-Regular.otf) format(opentype);
}
@font-face {
    font-family: "Metropolis-Black";
    src: url(font/metropolis/Metropolis-Black.otf) format(opentype);
}
@font-face {
    font-family: "Metropolis-Bold";
    src: url(font/metropolis/Metropolis-Bold.otf)format(opentype);
}
@font-face {
    font-family: "Metropolis-SemiBold";
    src: url(font/metropolis/Metropolis-SemiBold.otf)format(opentype);
} 
@font-face {
    font-family: "Metropolis-Medium";
    src: url(font/metropolis/Metropolis-Medium.otf)format(opentype);
}

/* heading declare global  */ 
h1{
    font-size: 57px; 
    font-family:var(--main-font-black) ; 
    line-height: 1.19; 
    text-transform: capitalize; 
    color:var(--main-color-black) ; 
    font-weight: 900;
      
}  
.cmn-head:hover{
    color: var(--main-color-pink);
    cursor: pointer;
}
h2,.h2-title{
        font-size: 40px;
    font-family: var(--main-font-bold);
    line-height: 1.0;
    font-weight: 700;  
    color: var(--main-color-black);
}
h3,.h3-title{
    font-size: 36px; 
    font-family: var(--main-font-bold); 
    text-transform: capitalize; 
    font-weight: 700;
    line-height: 1.19; 
    color: var(--main-color-black2); 

} 

h4, .h4-title{
font-size: 22px;
     font-family: var(--main-font-bold);
    line-height: 1; 
    font-weight: 700;
  
    color: var(--text-deep-gray);
    text-transform: capitalize;
}
/* gaping declaration  */
.cmn-gap{
    margin-top: 40px;
}   

.cmn-gap1{
    padding-top: 100px ;

}  
.center{
max-width: 600px; 
margin: 0 auto;

} 
.center1{
  text-align: center;
}
.cmn-gap2{
      margin-right: 31px;
} 
.cmn-gap3{
    margin-top: 10px; 
} 
.cmn-gap4{
    margin-top: 37px;
} 
.cmn-gap5{
    margin-top: 18px;
} 
.cmn-gap6{
    margin: 8px 0;
} 
.cmn-gap7{
    margin-top: 67px ;
}
.cmn-gap8{
    margin: 20px 0;
} 
.cmn-gap9{
  margin:80px 0;
}
.cmn-p{
    font-size: 16px; 
    color: var(--main-color-grey1);  
    line-height: 1.3;
    font-weight: 500;
       font-family: var(--main-font-medium);

} 
/* global declaration col */ 
.col20{
  max-width: 20%; 
  flex: 0 0 20%; 
  padding: 0 15px; 
  /* border: solid 3px var(--main-color-black1); */
} 
 .col40{
    margin:80px 0; 
    max-width: 40%;  
    flex: 0 0 40%; 
    padding: 0 15px; 


 }  
 .col60{
    padding: 0 15px; 
    flex: 0 0 60%; 
    max-width: 60%; 
    
 
 }
 .col25{
    max-width: 25%; 
    flex: 0 0 25%; 
    padding:  0 15px;  
   /* border: 3px solid var(--main-color-black1); */
    border-radius: 8px; 
   
  
}     


/* starting navbar */ 
.logo{
    display: block; 
    max-width: 175px;
} 
.navbar{
    display: flex; 
    align-items: center; 
    justify-content: space-between;

}  
.navlinks{
    display: flex; 
    /* margin: 0 auto;   */
    /* justify-content: space-between; */
    align-items: center;

} 
.navbar-links{
    margin: 0 auto;
}
.navlinks li a{
     display: block;
    padding: 0 43px; 
    font-size: 12px;
    text-transform: uppercase; 

    font-size: 12px;
    color: var(--main-color-black);
    transition: 0.3 all ease-in;


 }
 .navlinks li a:hover{
    color: var(--main-color-pink); 
 transform: scale(1.3);
 } 

 .searchbar {
    max-width: 24px; 
    /* margin-left: 12px;  */
   
    color: var(--main-color-pink);
 } 

.hamburger{
      position: absolute;
    display: none;
    cursor: pointer;
    width: 30px;
    height: 25px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

 /* hero section */

 .wrap{
   display: flex; 
   flex-wrap: wrap;
 } 

 .col60-table{
    position: relative;  
       z-index: 1;
 }
 .col60 img{
    /* max-width: 905px;  */
    object-fit: contain;   
     


 } 
 .col60-position{
    position: absolute; 
    z-index: 999;
    margin-right: 19px;
      display: flex;
    align-items: center;
     border-radius: 55px;
    padding: 27px;

    font-size: 16px;
    font-weight: bold;
    line-height: 1.37;

    box-shadow: 4px 4px 58px rgb(0,0,0,0.12);
    text-transform: capitalize;
    cursor: pointer;
    background-color: transparent;
    transition: 0.3s ease all;
    border: 3px solid transparent;
}
.col60-position:hover{
    border: 3px solid var(--main-color-pink);
    color: var(--main-color-black1);
}
 
 .social{
    display: flex; 
    flex-wrap: wrap;
 } 
 
 .social img{
   margin-right: 11px;
 
    max-width: 24px; 


 }    
 .social li a :hover{
  transform: scale(1.3);
 }
 .line{
    max-width: 24px; 
    border: 1px solid #CCCCCC; 
    margin: 0 24px;
 }
 .social p{
  font-size: 17px;
    line-height: 1.29;
    font-weight: 800; 
    color: var(--main-color-black1);
 }
 .social i{
    font-size: 24px; 
    margin-right: 16px;
 }
 .facebook-color{
    color: #4B7FCD;
 } 
 .youtube-color{
    color: #FF0000;
 } 
 .linkedin-color{
    color: #4A71FB;
 } 
 .instagram-color{
    color: #ED017F;
 }

.tag1{
    top: 30px; 
    left: 20px;
}
.tag{
    top: 120px; 
    right: 10px;
}
/* customer experience   */ 
.subheading{
margin-top: 28px ;
/* max-width: 622.42px; ; */
  text-align: center;
} 
 
.experience-table{
  margin-top: 90px;
}

.content-card{
    padding: 24px;
    margin-right: 104px;
}


 
.col25 p{
text-align: justify;  
color: #999999; 

} 
.col25 img{
    max-width: 37px; 
    height: 37px; 
  
} 
/* our service  */ 
.card{
    max-width: 254px;
    flex: 0 0 254px; 
    height: auto; 
    border-radius: 9px; 
    /* border: 4px solid black;   */
    margin-right: 116px; 
    margin: 0 auto;
    
padding: 0 15px;
cursor: pointer;

} 


.card-text{
    max-width: 170px; 
    font-size: 21px; 
    line-height: 1.6; 
    color: var(--main-color-black2); 

} 
.card img{
    object-fit: contain;
}


/* footer section */    






.footer-heading {
    font-size: 18px; 
    
       font-family: var(--main-font-semi-bold); 
       color: var(--main-color-black); 
text-transform: capitalize;
line-height: 1.2; 
 

 
  line-height: 1.2; 
   
 
    
    
}   

.footer-text  { 
    display: inline-block;
 margin-top: 10px;  
 font-size: 14px;
    color: var(--main-color-grey); 
    transition: all 0.3s ease-in;
    text-transform: capitalize; 


} 
.footer-text:hover{
    color: var(--main-color-pink); 
    transform: scale(1.3);
}
.footer-text1{
     
 margin-top: 10px;  
  font-size: 14px;
      color: var(--main-color-grey); 
}

/* media query  */ 
@media (max-width:1200px){
.navlinks{
  padding: 0 20px;
}

 

  /* reduce big margins */
 
.col20
  {
        flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 30px; /* spacing between rows */ 


  }


} 



@media (max-width:992px){
 .hamburger{
    display: flex;
    right: 30%;
}
.hamburger i{
  max-width: 34px;
  height: 34px;
  margin-top: 3px;
  
}
.searchbar{
  margin-left: 16px;
}
.navlinks{
    display: none;
}
  /* banner stack */
  .col40{
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }

  .col60{
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* customer section */
  .col25{
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* fix big spacing */
  .content-card{
    margin-right: 20px;
  }

  /* service cards */
  .card{
    margin: 20px auto;
  }

  /* footer spacing fix */
  
 .col20 {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 15px;
  }



} 

@media (max-width:576px){
  .hamburger{
    display: flex;
    right: 35%;
}
.hamburger i{
  max-width: 34px;
  height: 34px;
  margin-top: 3px;
}
.searchbar{
  margin-right: 16px;
}
  /* columns full width */
  .col40,
  .col60,
  .col25,
  .col90 ,
  .card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* navbar */
  .navbar{
    flex-wrap: nowrap;
  }

  .navbar-links{
    width: 100%;
    margin-top: 15px;
  }

  .navlinks{
    flex-direction: column;
    align-items: flex-start;
  }

  .navlinks li a{
    padding: 10px 0; 
    display: none;
    
  }

.cmn-btn{
        padding: 12px 16px;   /* smaller but still clickable */
    font-size: 14px;      /* better fit */
} 
.cmn-btn1{
     padding: 12px 18px;  /* reduce horizontal space */
    font-size: 14px;
}
  /* banner */
  .col40{
    margin: 40px 0;
    text-align: center;
  }

  .col60{
    margin-top: 20px;
  }

  .col60-position{
    position: static;
    margin-top: 15px;
    padding: 15px;
  }

  /* customer cards */
  .col25{
 max-width: 48%;
    flex: 0 0 48%;
     margin: 20px 0;
  }

  .content-card{
    margin-right: 0;
    padding: 15px;
  }

  /* service cards */
  .card{
    max-width: 48%;
    flex: 0 0 48%;
    margin: 20px 2px;
  }

  /* footer */ 
  .col20{
  margin-left: 6px;
    max-width:100%; 
    flex: 0 0 100%;
  }

}