* {margin:0;padding:0;box-sizing:border-box;font-family:Arial, sans-serif;}
body {background:#0b1a2d;color:white;
background-image: url(../JAY/Socials/Background.jpg);
background-repeat: no-repeat;
background-size: cover;
}

.container {max-width:1100px;
    margin:auto;
    padding:20px;}
.Mhero
{
    display: flex;
    justify-content: center;
     align-items: center;
    width: 100%;;
   
   
}

.hero {background-image: url(../JAY/Socials/socials.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position-y: center;
    background-position-x: center;
    border-color: #ccc;
    border-style: solid;
    border-radius: 45px;
    align-items: center;
    text-align:center;
    padding:60px 20px;
    padding:60px 20px;
    width: 20%, 100%; /* Or any width like 100% */
 
    object-fit: cover; /* Crops the video to fill the square */
}
}




.hero h1 {font-size:32px;}
.hero p {margin:10px 0 20px;font-size:16px;color:#ccc;}
.hero button {background:#00aaff;border:none;padding:12px 25px;border-radius:8px;color:white;cursor:pointer;}

.services {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:30px;}
.card {background:#14263d;padding:15px;border-radius:10px;text-align:center;}

.section-title {text-align:center;margin:40px 0 20px;font-size:20px;}

/*.portfolio {display:flex;overflow-x:auto;gap:15px;padding-bottom:10px;scroll-snap-type:x mandatory;}*/
.portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
}
.portfolio::-webkit-scrollbar {display:none;}

.port-card {min-width:250px;
    background:#fff;
    color:#000;
    border-radius:12px;
    padding:10px;
    scroll-snap-align:center;}
.port-card img {width:100%;border-radius:10px;}

.card
{
justify-content: center;
width: 100%; height: auto;

}

/*video*/
video
{
width: 100%; /* Or any width like 100% */
  aspect-ratio: 1 / 1;
  object-fit: cover; /* Crops the video to fill the square */
}

.tools {display:flex;flex-wrap:wrap;justify-content:center;gap:15px;margin-top:20px;}
.tools img {width:60px;
    height:60px;
    object-fit:contain;
    background:white;
    padding:5px;
    border-radius:10px;}

.contact {text-align:center;margin-top:40px;}
.contact a {color:#00aaff;text-decoration:none;}

/* MOBILE */
@media(max-width:600px){
.hero h1{font-size:24px;}
}