/* Mobile view */
@media screen and (min-width:320px) {
    
    /* Begining of hero section */
    .hero-container{
        background-image: url('../src/images/pattern1.webp');
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items: center;
        gap: 2rem;
        width: 100vw;
        height: 100vh;
    }
    
    .hero-container div{
        width: 90%;
        position: relative;
    }

    .hero-img {
        display: none;
    }
    
    .hero-img img{
        width: 100%;
    }
    
    .hero-text-container{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .hero-text-container h1{
        font-size: 2rem;
        margin-bottom: 0rem;
    }

    .hero-text-container h1 span {
        color: #dda823;
        font-weight: 600;
    }

    .hero-text-container p {
        font-size: 1rem;
        color: #808080;
        text-align: justify;
    }
    

    /* End of hero section */


    /* Begin of services section */

    .services-container{
        margin: 2rem 1rem;
    }

    .services-container h3 {
        font-size: 2rem;
    }

    .service-btn{
        width: 12rem;
    }

    .services-card-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        padding: 3rem 0rem;
    }

    .services-card{
        position: relative;
        height: 18rem;
        display: flex;
        flex-direction: column;
        align-items:center;
        text-align: center;
        outline: 1px solid #dda823;
        border-radius: .5rem;
        padding: 1.5rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transition: .3s ease-in;
    }

    .services-card:hover{
        background-color: #dda823;
        color: #ffff;
    }


    .services-card:hover .iconify{
        color: #fff;
    }

    .services-card h3{
        font-size: 1.5rem;
        font-style: italic;
        margin: 1rem 0rem 0rem 0rem;
    }

    .services-card a{
        text-decoration: none;
        color: #dda823;
        cursor: pointer;
    }

    .services-card:hover a{
        color: #ffff;
    }

    /* End of services section*/

    /* Begin of about section */

    .about-section{
        padding: 1rem;
    }

    .about-container{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .about-container p{
        text-align: justify;
    }

    .about-text-area h3 {
        font-size: 2rem;
    }

    .about-inner-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .about-card-container{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2rem;
        margin: 3rem 0rem;
    }

    .about-card-container h3{
        font-size: 1.5rem;
        margin: 0rem;
    }

    .about-card{
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: .5rem;
    }


    .about-icon-card{
        background-color: #f4e0ad;
        padding: 0rem .5rem;
        margin: 1rem 0rem;
        border-radius: .5rem;
        transition: .3s ease-in;
    }

    .about-icon-card:hover {
        background-color: #dda823;
    }

    .about-icon-card:hover .iconify{
        color: #fff;
    }

    .about-img{
        width: 100%;
    }

    /* End of about section */

    /* Begin of choose us section */

    .choose-section{
        display: flex;
        flex-direction: column;
        padding: 1rem 2rem;
    }

    .choose-container{
        display: flex;
        flex-direction: column;
    }

    .choose-text-area h3{
        font-size: 2rem;
    }

    .choose-card-container{
        display: flex;
        flex-direction: column;
        padding: 2rem 0rem;
        gap: 2rem;
    }

    .choose-card-numb{
        color: #dda823;
        font-size: 2rem;
        font-weight: 600;
    }

    .choose-card-text h3{
        font-size: 1.5rem;
    }

    .choose-img{
        width: 100%;
    }

    /* End of choose us section */

    /* Begin of Record section */

    .record-section{
        background-image: url(/src/images/pattern2.webp);
    }

    .record-card-container{
        margin: 1rem 0rem;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }

    .record-card{
        width: 60%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        line-height: .1rem;
        padding: 2rem 4rem;
        border-radius: .4rem;
        border-top: 4px solid #ffff;
        outline: 1px solid #ffff;
        font-weight: 600;
        transition: .3s ease;
    }

    .record-card:hover{
        transform: rotate3d(1, 1, 0, 45deg);
        
    }

    .record-card h3{
        font-size: 2rem;
    }
    


    /* End of Record section */

}


/* Tablet view */
@media screen and (min-width:768px) {

    /* Begining of hero section */
    .hero-img {
        display: block;
    }
    
    .hero-text-container h1{
        font-size: 3rem;
    }
    .hero-text-container p {
        font-size: 1.5rem;
        font-weight: 400;
    }
    
    .hero-text-container button {
        width: 9rem;
        font-size: 1.2rem;
        padding: .9rem;
    }

    /* End of hero section */

    
    /* Begin of services section */

    .services-card-container{
        flex-direction: row;
    }

    .services-card{
        width: 40%;
    }

    .services-text-container{
        padding: 0rem 2rem;
    }

    .services-text-container{
        width: 80%;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4rem;
    }


    /* End of services section*/

    /* Begin of about section */

    .about-text-area{
        padding: 0rem 2rem;
    }

    .about-card{
        width: 45%;
    }

    .about-card-container{
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* End of about section */

    /* Begin of choose section */

    .choose-card{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 2rem;
    }

    /* End of choose section */


    /* Begin of Record section */

    .record-card-container{
        flex-direction: row;
        flex-wrap: wrap;
    }

    .record-card{
        width: 30%;
    }

    .record-card p{
        font-size: 1.5rem;
    }

    /* End of Record section */
}


/* Desktop view */
@media  screen and (min-width: 980px) {

    /* Begining of hero section */
    .hero-container{
        flex-direction: row;
    }

    .hero-img {
        display: block;
    }

    .hero-img img{
        width: 90%;
    }

    .hero-text-container{
        padding: 2rem;
        margin: 0rem;
    }

    .hero-text-container button {
        width: 10rem;
        padding: 1rem;
    }

    /* End of hero section */


    /* Begin of services section */

    .services-text-container{
        padding: 0rem 4rem;
    }

    .services-text-container div{
        width: 50%;
    }

    .services-card{
        width: 25%;
    }

    /* End of services section*/

    /* Begin of about section */

    .about-img{
        width: 70%;
    }

    .about-card-container{
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0rem 2rem;
        justify-content: center;
    }

    .about-text-area{
        padding: 0rem 4rem;
    }

    /* End of about section */

    /* Begin of choose section */

    .choose-section{
        flex-direction: row;
        align-items: center;
    }

    .choose-container, .choose-img{
        width: 50%;
    }

    /* End of choose section */

    /* Begin of record section */

    .record-card{
        width: 20%;    
    }


    /* End of record section */

}