
/*  sourav class  */

@font-face {
    font-family: 'DM Sans Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 1000;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/dm-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }

.myryd_service1{
   margin-top: 60px;
   margin-bottom: 60px;
 }
 
 
.myryd_service{
   background-color: #000!important;
}

 .my_tp{
    padding-block: 50px;
}

    .sub_hd{
        position: relative;
        bottom:15px;
    }

     .sp span {
        color: #fd5622 !important;
    }

   
   .sub_hd .sg::after {
        content: '';
        position: absolute;
        background-color: #fd5622;
        width: 17%;
        height: 3px;
        bottom: -14px;
        left: 50%;
        transform: translate(-50%, -50%);
    }


    .head_para {
        width: 39%;
        margin: 0 auto;
        padding-top: 20px;
    }
    
    .myryd_p{
        font-size: 18px;
        letter-spacing: 1px;
        line-height: 28px;
        color: #ffffff !important;
        font-weight: 400 !important;
        font-family: "Sora", serif !important;
        text-align: center;
    }

    .card_con{
        display:flex;
        flex-direction: row;
        gap:40px;
        margin-top:45px;
        
    }

  .card_con1{
        display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    width: 100%;
   margin-top:45px;
}

     .box{
        position: relative;
        background:#fd5622;
      }


      .box_h5 {
        position: absolute;
        width: 100%;
        background: #000000;
        opacity: 0.812 !important;
        bottom: 0px;
        padding: 20px 0px;
        text-align: center;
    }

    .box_h5 h5 {
        font-size: 25px;
        letter-spacing: 3px;
        line-height: 35px !important;
        color: #ffffff !important;
        font-weight: 400 !important;
        font-family: "Sora", serif !important;
    }

     .box_h5 h5:hover {
        color: #fd5622 !important;
     }

  .box img{
     opacity: 1;
    -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
    }

  .box:hover img {
    opacity: .5;
   }

  .box .custom-img {
    width: 100%;
    height: 600px; 
    object-fit: cover; 
}


.imgg{
    width: 100%;
    height: 600px; 
    object-fit: cover;  
}


@media only screen and (max-width: 1880px) {
    
   }

@media only screen and (max-width: 1780px) {
    .head_para {
        width: 47%;
    }
       
   }

@media only screen and (max-width: 1680px) {
    

     .myryd_p {
        font-size: 17px;
        line-height: 27px;
    }

    .head_para {
        width: 45%;
    }

}

@media only screen and (max-width: 1550px) {
    
     .head_para {
        width: 43%;
    }

   }

@media only screen and (max-width: 1440px) {
    

    .box_h5 h5{
        font-size: 22px;
        letter-spacing: 2px;
        line-height: 32px !important;
    }

    .myryd_p {
        font-size: 16px;
        line-height: 26px;
    }

     .box .custom-img {
        width: 100%;
        height: 500px; 
        object-fit: cover; 
    }
    
  }

 @media only screen and (max-width: 1366px) {
   
   .head_para {
        width: 45%;
    }

   }

@media only screen and (max-width: 1280px) {

   
}

@media only screen and (max-width: 1150px) {

    .head_para {
        width: 52%;
    }

    .box_h5 h5 {
        font-size: 20px;
        letter-spacing: 2px;
        line-height: 30px !important;
    }

    .box .custom-img {
        width: 100%;
        height: 450px; 
      
    }
       
   }

@media only screen and (max-width: 1080px) {
    .head_para {
        width: 55%;
    }
   }
   
   @media only screen and (max-width: 1024px) {
   

    .head_para {
        width: 56%;
    }

    .myryd_p {
        font-size: 14px;
        letter-spacing: 2px;
        line-height: 24px;
    }

    .box_h5 h5{
        font-size: 18px;
       line-height: 28px !important;
    }

   }
   
   @media only screen and (max-width: 991px) {
       
    .imgg{
    height: 500px; 
    }
    
   }
   
   @media only screen and (max-width: 768px) {

    .card_con {
     gap: 15px;
     margin-top: 40px;
    }

    .box .custom-img {
        width: 100%;
        height: 400px; 
      
    }

    .head_para {
        width: 76%;
    }


    .card_con1{
        display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; 
    width: 100%;
   margin-top:45px;

}

.imgg{
    height: 460px; 
    }

}


@media only screen and (max-width: 767px) {
       .my_heding{
        text-align:center!important;
       }

    .card_con{
     flex-direction: column;
    }

    .box .custom-img {
        width: 100%;
        height: 520px; 
    }

.imgg{
height: 650px; 
}

}

 @media only screen and (max-width: 600px) {
   

    .head_para {
        width: 96%;
    }

    .card_con1{
        display: grid;
    grid-template-columns: repeat(1, 1fr); 
   
}

}


@media only screen and (max-width: 520px) {
    
}
   
   @media only screen and (max-width: 480px) {
   

    .myryd_p{
        font-size: 12px;
        letter-spacing: 1px;
        line-height: 20px;
    }

    .box_h5 h5 {
        font-size: 16px;
        letter-spacing: 3px;
        line-height: 26px !important;
    }

    

    .box .custom-img {
        width: 100%;
        height: 450px; 
    }

    .head_para {
        width: 100%;
        padding-top: 12px;
    }

    .imgg{
        height: 460px; 
        }
    }

 @media only screen and (max-width: 430px) {
       
   }
   
 @media only screen and (max-width: 420px) {
       
   }
   
 @media only screen and (max-width: 360px) {

   
}
   