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

html, body{
    scroll-behavior: smooth !important;
    background-color: #fff9f2 !important;
    font-family: 'Aparajita';
}
h1{
    font-family: 'Aparajita';
}
p{
    font-family: sans-serif;
    opacity: 0.5;
    font-size: 15px !important;
}
.upper{
    text-transform: uppercase;
    letter-spacing: 2.53968px;
}
.letter_spacing{
    letter-spacing: 0.1005em;
}
.p{
    text-align: justify;
    font-size: large;
}

.about_button a{
    background-color: black;
    color: white;
}

.about_button a:hover{
    border: 1px solid black;
}

.shaddow{
    border-radius: 2px;
    box-shadow: 0 0 10px gray;
}

.containor{
    display: flex;
    width: 100%;
    height: 450px;
    margin: 3% 0 4%;
}

.category{
    width: 33.33%;
    height: 100%;
    padding: 1%;
}

.ctg1{
    margin-top: -1% !important;
    margin-bottom: 1% !important;
}

.ctg2{
    margin-top: 1% !important;
    margin-bottom: 1% !important;
}

.ctg1 img, .ctg2 img{
    transition: 0.5s;
}

.ctg1:hover img, .ctg2:hover img{
    scale: 1.1;
    border-radius: 10px;
}

.category img{
    transition: 0.5s;
}

.category:hover img{
    scale: 1.1;
    border-radius: 10px;
}

.categoryin{
    width: 100%;
    display: flex;
    margin-bottom: 2%;
}

.service{
    width: 100%;
    padding: 10px 150px;
}

.hr{
    background: linear-gradient(to right, #9e3634, rgb(255, 255, 255));
    /* background: linear-gradient(to right, red , yellow); Standard syntax */
    border: none !important;
    opacity: 1 !important;
}

.col1{
    width: 100%;
    display: flex;
}

.col2{
    width: 50%;
    height: 300px;
    margin: 10px 0;
}

.col2 h1{
    margin-top: 15%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-bottom: 10px;
}
.col2 p{
    margin-top: 15px;
}

.col2 img{
    border: 1px #000000 solid;
    box-shadow: 3px 3px 8px gray;
}

.perfection{
    width: 100%;
    background-color: #000000;
    display: flex;
    padding: 10px 0;
}

.perfectiontitle{
    width: 25%;
    color: #fff;
    margin: auto;
}

.perfectiontitle h1{
    font-family: 'FontAwesome';
    font-size: 50px;
}

.perfectionimg{
    width: 75%;
    display: flex;
}

.colperfection{
    display: block;
    width: 25%;
}
.imgperfection{
    width: 95%;
    padding: 10px 0;
}


.perfct{
    width: 100% !important;
}


/* 
.contact{
    width: 100%;
    margin-bottom: 5px;
} */

.gallery1{
    /* padding-left: 10%; */
    display: flex;
}

.upp{
    text-transform: uppercase;
    letter-spacing: 0.205em;
    font-weight: 400 !important;
    font-style: normal;
}

.upp2{
    text-transform: uppercase;
    letter-spacing: 0.105em;
    font-weight: 400 !important;
    font-style: normal;
}


.gallery {
    --g: 6px; /* the gap */
    display: grid;
    width: 45%; /* the size */
    aspect-ratio: 1;
    grid: auto-flow 1fr/repeat(3,1fr);
    gap: var(--g);
    margin: 5px;
  }
  .gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale();
    cursor: pointer;
    transition: .5s
  }
  .gallery img:hover {
    filter: grayscale(0) contrast(120%);;
  }
  .gallery img:nth-child(2) {
    grid-area: 1/2/span 2/span 2;
    clip-path: polygon(0 0,100% 0,100% 100%,calc(50% + var(--g)/4) 100%,0 calc(50% - var(--g)/4))
  }
  .gallery img:nth-child(3) {
    grid-area: 2/1/span 2/span 2;
    clip-path: polygon(0 0,calc(50% - var(--g)/4) 0,100% calc(50% + var(--g)/4),100% 100%,0 100%);
  }
  
  

@media screen and (min-width: 1500px) {
    .containor{
        height: 550px
    }
}

@media screen and (max-width: 1501px){
    .containor{
        height: 450px;
    }
}

@media screen and (max-width: 1051px){
    .containor{
        height: 350px;
    }
}

@media screen and (max-width: 1001px){
    .containor{
        height: 1200px;
        display: block;
    }
    .col1{
        display: block;
    }
    .col2{
        width: 100%;
    }
    .content{
        height: 150px;
    }

    .gallery1{
        display: block;
        padding-left: 0;
    }
    .gallery{
        width: 95%;
    }
}

.li{
        list-style-image: url(pic/dot2.png);
        text-align: left;
    }
    .containe {
    position: relative;
    font-family: Arial;
    }

    .text-block {
        /* opacity: 0.7; */
    position: absolute;
    top: 20px;
    right: 20px;
    /* background-color: black; */
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    }
    .opacity{
        opacity: 0.6;
    }

    section {
          width: 100%;
          height: 80%;
        }
        #jewelry{
          display: none;
        }
        #stone{
          display: none;
        }

        .careers2{
            display: flex;
        }

        @media screen and (max-width: 1501px){
            iframe{
                width: 85%;
            }
        }

        @media screen and (max-width: 1051px){
            .careers {
                height: 720px;
            }
            .cont{
                margin-left: 0;
            }
            iframe{
                height: 250px;
            }
            .careers{
                width: 90%;
            }
            .careers2{
                display: block;
            }
        }