@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root{
    --primary-color:skyblue;
    --primary-color-dark:#2476da;
        --text-dark:#0a0a0a;
        --text-light:#737373;
          --extra-light:#f3f4f6;
--white:#ffffff;
--max-width:1200px;

        


}

*{
    padding:0;
    margin:0;
    box-sizing:border-box;



}

.sc{
    max-width:var(--max-width);
    margin:auto;
      padding:5rem 1rem;
}

                 .sh{

                    margin-bottom:5px;
                    font-size:2.5rem;
                    font-weight:700;
                    color:var(--text-dark);
                    text-align:center;
                 }
     
                 
        .sd{
            max-width:600px;
            margin-inline:auto;
            color:var(--text-light);
            text-align:center;
        }         


    .btn{
        padding:.75rem 1.5rem;
        outline:none;
        border:none;
        font-size:1rem;
        white-space:nowrap;
        color:var(--white);

        background-color:var(--primary-color);
        border-radius:5rem;
        transition:0.3s;
        cursor:pointer;
    }    

    .btn:hover{



             background-color:var(--primary-color-dark);

    }

   .logo{
    font-size:1.75rem;
    font-weight:800;
    color:var(--text-dark);

    
   }
   
   img{
    display:flex;
    width:100%;

}
a{
      text-decoration:none;
          transition:0.3s;

}

   ul{
    list-style:none;

   }


   html,body{
    scroll-behavior:smooth;
   }

 body{
    font-family:"DM Sans", sans-serif;

 }  


 nav{
    position:fixed;
    isolation:isolate;
    top:0;
    width:100%;
    z-index:9;

 }

    .head{
        padding:1rem;
        width:100%;
        display:flex;
        align-items:center;
        justify-content:space-between;
        background-color:var(--primary-color);


    }

    .navlogo   .l{
        font-size:1.5rem;
        color:var(--white);

    }

    .nb{
        font-size:1.5rem;
        color:var(--white);
        cursor:pointer;
    }

    .nl{
        position:absolute;
        bottom:0;
        left:0;
        
     
        width:100%;
        padding:2rem;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:2rem;
        background-color:var(--primary-color);
        transition: transform .5s;
        z-index:-1;
    }

    .nl.open{
        transform:translateY(100%);

    }

 .nl a{
    font-weight:600;
    color:var(--white);
    white-space:nowrap;

 }   

 .nl a:hover{
    color:var(--text-dark);
 }

 .nb{
    display:none;
 }


 .header{
    margin-top:5rem;
    padding-inline:1rem;
    position:relative;
    isolation:isolate;
    overflow:hidden;

    
 }


 .header::before{
    position:absolute;
    content:"";
    height:100%;
    width:calc(100% - 2rem);
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQim28_aq_JMDSuNuS6zoFfTfBevONXAfvxWNkueAJh_lbLK-qEy6SfphQ&s=10");
    background-position:center center;
    background-size:cover;
    border-radius:3rem;
    z-index:-1;


 }
 .hcon{
    display:grid;
 }

 .hc{
    padding:4rem 1rem;
 }

 .hc p{
    margin-bottom:5px;
    font-size:1rem;
    font-weight:600;
    color:var(--text-dark);
    text-align:center;
 }

.hb{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;


}


     .hb .btn{
        padding:1rem 2rem;
     }

  .hb a{
    padding:9px 13px;
    font-size:1.5rem;
    color:var(--primary-color);
    background-color:var(--white);
    border-radius:100%;
  }   


  .hb a:hover{
    color:var(--white);
    background-color:var(--primary-color);
  }


 .hc h1{
    margin-bottom:2rem;
    font-size:4.5rem;
    font-weight:600;
 }

 .dc :is(.sh.sd){
    text-align:left;
    margin-inline-start:unset;
 }

 .desgrid{
    margin-top:4rem;
    display:grid;
    gap:2rem 1rem;
 }

 .descard  img{
    border-radius:1.5rem;
    box-shadow:5px 5px 20px rgba(0,0,0,0.2);
    width:100%;
    height:450px;
    display:block;
    object-fit:cover;


 }
   

           .dcd{

padding:1rem;
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;




         
}

.dcd h4{
    margin-bottom:5px;
    font-size:1.2rem;
    font-weight:600;
    columns:var(--text-dark);
}


   .dcd p{
    columns:var(--text-light);
   }


       .rating{
        padding:5px 10px;
        font-size:.9rem;
        white-space:nowrap;
        color:var(--white);
        background-color:var(--primary-color);
        border-radius:1rem;
        transition:0.3s
       }


       .descard:hover .rating{
        background-color:var(--primary-color);
       }

       .jg{
        margin-top:2rem;
        display:grid;
        gap:0 1rem;
       }

   .jc{
    position:relative;
    isolation:isolate;
    padding-top:4rem;
    overflow:hidden;
   }    

     .jcb{
        padding:2rem;
        background-color:var(--extra-light);
        border-top-right-radius:1rem;
        border-top-left-radius:1rem;
        
     }


  .jcb span{
    display:inline-block;
    margin-bottom:4rem;
font-size:1.75rem;
color:var(--primary-color);
  }  
  
      .jcb h4{
        font-size:1.2rem;
        font-weight:600;
        color:var(--text-dark);

      }
      .jcc{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        height:100%;
        padding:2rem;
        background-color:var(--primary-color);
        border-top-right-radius: 1rem;
        border-top-left-radius: 1rem;
        transition:0.3s;
      }

  .jc:hover .jcc{
    top:0;

  }    

  .jcc span{
    display:inline-block;
    margin-bottom:1rem;
    padding:7px 9px;
    font-size:1rem;
    color:var(--white);
    border:2px solid var(--white);
    border-radius:100%;

  }
  .jcc h4{
    margin-bottom:1rem;
    font-size:1.2rem;
    font-weight:600;
    color:var(--white);
  }

        .jcc p{
            color:var(--extra-light);

        }
   
        .sc{
            display:grid;
            gap:2rem;
        }
     
        .simg img{
            max-width:500px;
            margin-inline:auto;
            box-shadow:5px 5px 5px 5px rgba(0,0,0,0.2);
            width:100%;
            height:650px;
            object-fit:cover;

        }


   .sc h4{
    margin-bottom:2rem;
    font-size:3.5rem;
    font-weight:600;
    color:var(--text-dark);
    line-height:1.2;
    text-transform: uppercase;

   }  
   
.sc p{
    margin-bottom:1rem;
    color:var(--text-light);
}   

.sc .btn{
    width:100%;
    margin-top:2rem;
    padding:1.5rem;
    font-weight:600;
    color:var(--text-dark);
    background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQim28_aq_JMDSuNuS6zoFfTfBevONXAfvxWNkueAJh_lbLK-qEy6SfphQ&s=10");
    background-size:cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius:5px;
   
}

.bc{
    padding:2rem 1rem;
    text-align:center;
    background-color:var(--extra-light);
    border-radius:2rem;
    box-shadow:5px 5px 20px rgba(0,0,0,0.1);

}


.bc h4{
    font-size:5rem;
    font-weight:500;
    color:var(--primary-color);
}

.bc p{
    color:var(--text-light);
}


.dg{
    margin-top:4rem;
    display:grid;
    gap: 2rem;
}

.dc{
    padding:2rem 1rem;
    text-align:center;
    transition:0.3s;
    border-radius:1rem;

}

.dc:hover{
    box-shadow:5px 5px 20px rgba(0,0,0,0.1);
}

.dc h4{
    max-width:150px;
    margin-inline:auto;
    margin-bottom:1rem;
    font-size:1.2rem;
    font-weight:700;
    color:var(--text-dark);
}

.dc p{
    color:var(--text-light);
}


.dc span{
    display:inline-block;
    margin-bottom:1rem;
    padding:10px 15px;
    font-size:1.5rem;
    color:var(--primary-color);
    background-color:rgba(40 134 255 0.1);
    border-radius:100%;
}

     .swiper{
        margin-top:4rem;
        width:100%;
     }
     .swiper-slide{
        min-width:375px;

     }

     .cc{
        padding:5px;
        background-color:var(--extra-light);
        border-radius:1rem;
        transition:0.3s;
     }

     .cc:hover{
        background-color:var(--primary-color);
     }



         .clientcon{
            padding:1rem;
            background-color:var(--white);
            border-radius:calc(1rem - 5px);
         }

      .clientrat{
        margin-bottom:1rem;
        color:var(--primary-color);
      }   

      .cc p{
        color:var(--text-dark);
      }
      .cd{
        padding:1rem;
        display:flex;
        align-items:center;
        gap:1rem;
      }


    .cd img{
        max-width:50px;
        border-radius:100%;

    }  

    .cd h4{
        font-size:1.1rem;
        font-weight:600;
        color:var(--text-dark);
        transition:0.3s;
    }
    .cc:hover h4{
        color:var(--white);
    }

    .cc h5{
        font-size:1rem;
        font-weight:500;
        color:var(--text-light);
        transition:0.3s;
    }

    .clientrat{
        color:purple;
    }
    .cd:hover h5{
        color:var(--extra-light)
    }

    .footer{
        background-color:var(--extra-light);
    }

    .fotcon{
        display:grid;
        gap:4rem 2rem;
    }

    .footercol p{
        max-width:300px;
        margin-block:2rem;
        color:var(--text-light);
    }

    .fotsoc{
        display:flex;
        align-items:center;
        gap:1rem;
        flex-wrap:wrap;
    }

    .fotsoc a{
        display:inline-block;
        padding:7px 10px;
        font-size:1.25rem;
        color:var(--white);
        background-color:var(--primary-color);
        border-radius:100%;
    }

        .fotsoc a:hover{
            background-color:var(--primary-color-dark);
        }
      

            .footercol h4{
                margin-bottom:2rem;
                font-size:1.2rem;
                font-weight:600;
                color:var(--text-dark);
            }     

            .fl{
                display:grid;
                gap:1rem;

            }
            .fl a{
display:flex;
align-items:Center;
gap:10px;
color:var(--text-light);                
            }

           
            
         .fl a:hover{
            color:var(--primary-color);
         }   
         .fl a span{
            font-size:1.25rem;
         }

         .footercol form{
            display:grid;
            gap:1rem;
         }
         .footercol input{
            padding:.75rem;
            font-size:1rem;
            color:var(--text-dark);
            background-color:var(--white);
            border:1px solid var(--text-light);
            border-radius:5px;

         }

         .footercol input::placeholder{
            color:var(--text-light)
         }

              .footercol .btn{
                border-radius:5px;
              }


.footerb{
    padding:1rem;
    font-size:.9rem;
    color:var(--text-light);
    text-align:center;
}


@media (width > 540px){
    .desgrid{
        grid-template-columns: repeat(2, 1fr);
    }
    .jg{
        grid-template-columns: repeat(2,1fr);
    }

.sc{
    grid-template-columns: repeat(2,1fr);
    align-items:center;
}
.bancon{
    grid-template-columns: repeat(3, 1fr);
    display:grid;

}

.dg{
    grid-template-columns:repeat(2,1fr);
}

.fotcon{
    grid-template-columns: repeat(2,1fr);
}
}



 @media (width > 768px){


    nav{
        position:static;
        padding:2rem 1rem;
        max-width:var(--max-width);
        margin-inline:auto;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:2rem;

    }

.head{
    flex:1;
    padding:0;
    background-color:transparent;

}
.l .logo{
    color:var(--text-dark);

}
.nm{
    display:none;
}

.nl{
    position:static;
    width:fit-content;
    padding:0;
    flex-direction:row;
    background-color:transparent;
    transform:none !important;

}

.nl a{
color:var(--text-dark);    

}
.nl a:hover{
    color:var(--primary-color);
}

.nl li:last-child{
    display:none;
}

.nb{
    flex:1;
    display:flex;
    justify-content:flex-end;
}

.nb  .btn{
    padding: 0.75rem 2rem;
    background-color:var(--text-dark);
}
header{
    margin-top:0;

 }
 .hc{
    display:grid;
    grid-template-columns:minmax(0,1fr) repeat(5, minmax(0, calc(var(--max-width) /5))) minmax(0,1fr);
 }
 .hc{
    grid-column:2/4;
    padding-block:8rem;
 }
 .hc :is(p, h1){
    text-align:center;
 }
 .hb{
    justify-content:flex-start;
 }



     .himg{
        grid-column:4/8;
        position:relative;
        isolation:isolate;
        height:100%;
     }


  .himg img{
    position:absolute;
    top:-40rem;
    left:0;
    height:100%;
    width:unset;
    
  }  
  .himg img{
    position: absolute;
    top: 2rem;
    left: 0;
    width: 100%;
    max-width: 700px;
    height: auto;
} 

.desgrid{
    grid-template-columns: repeat(3, 1fr);
}
.jg{
    grid-template-columns: repeat(3, 1fr);
}

.showcon{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:3rem;
 align-items:center;  
 padding: 6rem 1rem;

}
.bancon{
    grid-template-columns:repeat(3,1fr);
    display:grid;
}
.dg{
    grid-template-columns:repeat(3,1fr);
}

 }

 .seched{
    text-align:center;
    margin-top:3rem;
    color:var(--text-dark);
    font-size:45px;
 }
 .secdes{
    text-align:center;
    color:var(--text-light)
 }