/*colors: #a9a9a9a9 , rgba(255, 69, 0, 0.9) , rgba(219, 112, 147, 0.8) , rgba(255, 255, 0, 1) */

/*added fonts for website*/
@font-face {
    font-family: vazir;
    src: url("../../fonts/vazir/Vazir-Bold.eot");
    src: url("../../fonts/vazir/Vazir-Bold.ttf") format("ttf"),
      url("../../fonts/vazir/Vazir-Bold.woff") format("woff"),
      url("../../fonts/vazir/Vazir-Bold.woff2") format("woff2");
}
@font-face {
    font-family: bzar;
    src: url("../../fonts/bzar/BZar.eot");
    src: url("../../fonts/bzar/BZar.ttf") format("ttf"),
      url("../../fonts/bzar/BZar.woff") format("woff");
}
@font-face {
    font-family: byas;
    src: url("../../fonts/byas/BYas.eot");
    src: url("../../fonts/byas/BYas.ttf") format("ttf"),
    url("../../fonts/byas/BYas.woff") format("woff");
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-family: "bzar";
    background-color: rgba(255, 255, 0, 1);
    color: black;
    width: 100vw;
    overflow-x: hidden;
}

         /*             RESPONSIVE IN MOBILE -----> 320px           */
@media (min-width: 20rem) {
    /*HEADER*/
    header{
        height: 30vh;
        background-color: black;
    }
    #head1{
        height: 17vh;
        border-bottom: 2px solid darkmagenta;
    }
    /*#head1 span{
        display: none;
    }*/
    #head1 h1{
        color: #ffffff;
        text-align: center;
        font-family: "byas";
        font-size: 34px;
        font-weight: bold;
		line-height: 8vh;
    }
    @media (min-width: 23.4375rem) {
        #head1 h1{
            color: #ffffff;
            text-align: center;
            font-family: "byas";
            font-size: 34px;
            font-weight: bold;
        }
    }
    @media (min-width: 26.5625rem) {
        #head1 h1{
            color: #ffffff;
            text-align: center;
            font-family: "byas";
            font-size: 34px;
            font-weight: bold;
        }
    }
    #head2{
        height: 13vh;
        position: sticky;
        top: 0;
        display: flex;
        /*rgba(255, 255, 0, 1)*/
    }
    #head2 nav{
        width: 70vw;
        float: right;
        margin:5%;
    }
    #head2 nav img{
        background-color: rgba(255, 255, 0, 1);
        width: 50px;
        height: 50px;
        border: 3px solid darkmagenta;
        border-radius: 10%;
        outline: none;
        padding: 1%;
        /*position: relative;*/
        /*transition: all 0.5s ease;*/
    }
    #head2 nav #menubox{
        background-color: rgba(255, 255, 0, 1);
        padding: 7%;
        border: 3px solid darkmagenta;
        border-radius: 10px;
        text-align: left;
        width: 100%;
        /*position: absolute;*/
        transform: translate(0% , -32%);
        /*transition: all 0.5s ease-in;*/
    }
    #head2 nav #menubox img{
        background-color: rgba(255, 255, 0, 1);
        border: 4px solid darkmagenta;
        border-radius: 50%;
        width: 37px;
        height: 37px;
        display: flex;
        float: right;
        margin-top: -3%;
        margin-right: -3%;
    }
    #head2 nav #menubox button{
        padding: 0.25em;
        outline: none;
        color: rgba(255, 255, 0, 1);
        border: 3px solid darkmagenta;
        border-radius: 5px;
        background-color: darkmagenta;
        font-size: 20px;
        width: 100%;
        font-family: "bzar";
        font-weight: bold;
        margin: 3%;
        line-height: 1.5em;
    }
    #head2 nav #menubox button a{
        text-decoration: none;
        color: rgba(255, 255, 0, 1);
        outline: none;
    }
    #head2 nav #menubox button:hover{
        background-color: rgba(255, 255, 0, 1);
        border: 3px solid darkmagenta;
        border-radius: 5px;
        color: darkmagenta;
        outline: none;
    }
    #head2 nav #menubox button a:hover{
        color: darkmagenta;
        cursor: pointer;
       /* outline: none;*/
    }
    #head2 #logo{
        width: 30vw;
        float: left;
		padding-left: 40%;
    }
    #head2 #logo img{
        width: 130px;
        height: 120px;
    }
    #head3{
        display: none;
    }
    /*MAIN SECTION IN HOME PAGE(INDEX.PHP)*/
    /*PART1*/
    .part1{
        width: 100vw;
        margin-top: 1em;
    }
    .main{
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .sec1{
        background-color: rgba(255, 255, 0, 1);
        margin: 5%;
        display: flex;
        padding: 0.5em;
    }
    .sec1 img{
        height: 60px;
        width: 60px;
        border: 2px solid black;
        border-radius: 50%;
        margin-right: 1em;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec1 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 0.25em;
    }
    .sec1 span{
        font-size: 27px;
        font-weight: bold;
        text-align: center;
        line-height: 1.5em;
    }
    @media (min-width: 23.4375rem){
        .sec1{
            margin: 5%;
            padding: 1em;
        }
        .sec1 img{
            height: 60px;
            width: 60px;
        }
        .sec1 span{
            font-size: 25px;
        }
    }
    @media (min-width: 26.5625rem) {
        .sec1 img{
            height: 55px;
            width: 55px;
        }
    }
    .sec1 span a{
        text-decoration: none;
        color: black;
    }
    .sec1 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    .sec2{
        background-color: rgba(255, 255, 0, 1);
        margin: 5%;
        display: flex;
        padding: 0.5em;
    }
    .sec2 img{
        height: 60px;
        width: 60px;
        border: 2px solid black;
        border-radius: 50%;
        margin-right: 1em;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec2 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 0.25em;
    }
    .sec2 span{
        font-size: 27px;
        font-weight: bold;
        text-align: center;
        line-height: 1.5em;
    }
    @media (min-width: 23.4375rem){
        .sec2{
            margin: 5%;
            padding: 1em;
        }
        .sec2 img{
            height: 60px;
            width: 60px;
        }
        .sec2 span{
            font-size: 25px;
        }
    }
    @media (min-width: 26.5625rem) {
        .sec2 img{
            height: 55px;
            width: 55px;
        }
    }
    .sec2 span a{
        text-decoration: none;
        color: black;
    }
    .sec2 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    .sec3{
        background-color: rgba(255, 255, 0, 1);
        margin: 5%;
        display: flex;
        padding: 0.5em;
    }
    .sec3 img{
        height: 60px;
        width: 60px;
        border: 2px solid black;
        border-radius: 50%;
        margin-right: 1em;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec3 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 0.25em;
    }
    .sec3 span{
        font-size: 27px;
        font-weight: bold;
        text-align: center;
        line-height: 1.5em;
    }
    @media (min-width: 23.4375rem){
        .sec3{
            margin: 5%;
            padding: 1em;
        }
        .sec3 img{
            height: 60px;
            width: 60px;
        }
        .sec3 span{
            font-size: 25px;
        }
    }
    .sec3 span a{
        text-decoration: none;
        color: black;
    }
    .sec3 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    .sec4{
        background-color: rgba(255, 255, 0, 1);
        margin: 5%;
        display: flex;
        padding: 0.5em;
    }
    .sec4 img{
        height: 60px;
        width: 60px;
        border: 2px solid black;
        border-radius: 50%;
        margin-right: 1em;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec4 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 0.25em;
    }
    .sec4 span{
        font-size: 27px;
        font-weight: bold;
        text-align: center;
        line-height: 1.5em;
    }
    @media (min-width: 23.4375rem){
        .sec4{
            margin: 5%;
            padding: 1em;
        }
        .sec4 img{
            height: 60px;
            width: 60px;
        }
        .sec4 span{
            font-size: 25px;
        }
    }
    .sec4 span a{
        text-decoration: none;
        color: black;
    }
    .sec4 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    .other{
        padding-top: 1em;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .other h2{
        font-size: 28px;
        color: darkmagenta;
    }
    .other .add {
        width: 90vw; margin: 0 auto;
    }
    .other .div3{
        display: flex;
    }
    .sec5{
        width: 45vw;
        background-color: rgba(255, 255, 0, 1);
        margin: 5%;
        padding: 0.5em;
    }
    .sec5 img{
        height: 60px;
        width: 60px;
        border: 2px solid black;
        border-radius: 50%;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec5 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 0.25em;
    }
    .sec5 span{
        font-size: 27px;
        font-weight: bold;
        text-align: center;
        line-height: 1.5em;
    }
    @media (min-width: 23.4375rem){
        .sec5{
            margin: 5%;
            padding: 1em;
        }
        .sec5 img{
            height: 60px;
            width: 60px;
        }
        .sec5 span{
            font-size: 25px;
        }
    }
    .sec5 span a{
        text-decoration: none;
        color: black;
    }
    .sec5 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    .sec6{
        width: 45vw;
        background-color: rgba(255, 255, 0, 1);
        margin: 5%;
        padding: 0.5em;
    }
    .sec6 img{
        height: 60px;
        width: 60px;
        border: 2px solid black;
        border-radius: 50%;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec6 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 0.5em;
    }
    .sec6 span{
        font-size: 27px;
        font-weight: bold;
        text-align: center;
        line-height: 1.5em;
        padding-top: 1em;
    }
    @media (min-width: 23.4375rem){
        .sec6{
            margin: 5%;
            padding: 1em;
        }
        .sec6 img{
            height: 60px;
            width: 60px;
        }
        .sec6 span{
            font-size: 25px;
        }
    }
    @media (min-width: 26.5625rem){
        .sec6{
            margin: 5%;
            padding-left: 2em;
            padding-right: 2em;
        }
    }
    .sec6 span a{
        text-decoration: none;
        color: black;
    }
    .sec6 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    .other .div4{
        display: flex;
    }
    .sec7{
        width: 45vw;
        background-color: rgba(255, 255, 0, 1);
        margin: 5%;
        padding: 0.5em;
    }
    .sec7 img{
        height: 60px;
        width: 60px;
        border: 2px solid black;
        border-radius: 50%;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec7 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 0.25em;
    }
    .sec7 span{
        font-size: 27px;
        font-weight: bold;
        text-align: center;
        line-height: 1.5em;
        padding-top: 1em;
    }
    @media (min-width: 23.4375rem){
        .sec7{
            margin: 5%;
            padding: 1em;
        }
        .sec7 img{
            height: 60px;
            width: 60px;
        }
        .sec7 span{
            font-size: 25px;
        }
    }
    .sec7 span a{
        text-decoration: none;
        color: black;
    }
    .sec7 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    .sec8{
        width: 45vw;
        background-color: rgba(255, 255, 0, 1);
        margin: 5%;
        padding: 0.5em;
    }
    .sec8 img{
        height: 60px;
        width: 60px;
        border: 2px solid black;
        border-radius: 50%;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec8 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 0.25em;
    }
    .sec8 span{
        font-size: 27px;
        font-weight: bold;
        text-align: center;
        line-height: 1.5em;
        padding-top: 1em;
    }
    @media (min-width: 23.4375rem){
        .sec8{
            margin: 5%;
            padding: 1em;
        }
        .sec8 img{
            height: 60px;
            width: 60px;
        }
        .sec8 span{
            font-size: 25px;
        }
    }
    @media (min-width: 26.5625rem){
        .sec8{
            margin: 5%;
            padding-left: 2em;
            padding-right: 2em;
        }
    }
    .sec8 span a{
        text-decoration: none;
        color: black;
    }
    .sec8 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    hr{
        width: 70%;
        display: block;
        margin: 0 auto;
        border: 1px double darkmagenta;
    }
    .hr{
        width: 70%;
        display: block;
        margin: 0 auto;
        border: 1px double darkmagenta;
    }

    /*PART1-MOBILE*/
    .part1 .part1-mobile{
        width: 100vw;
        border: 2px solid darkmagenta;
        /*border-radius: 30%;*/
        background-color: darkmagenta;
        margin-top: 1em;
        margin-bottom: 1em;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .part1 .part1-mobile h2{
        font-size: 25px;
        font-weight: bold;
        color: rgba(255, 255, 0, 1);
        padding: 0.5em;
        line-height:2em;
    }
    .part1 .part1-mobile img{
        width: 50px;
        height: 50px;
        border: 1px solid rgba(255, 255, 0, 1);
        /*border-radius: 50%;*/
        padding: 0.25em;
    }
    .part1 .part1-mobile img:hover{
        border: 2px solid darkmagenta;
    }
    /*.part1 .part1-mobile img a{
        text-decoration: none;
    }*/
    .part2{
        display: none;
    }
    /*ARTICLES SECTION*/
    .part1 .aside{
        background-color: rgba(255, 255, 0, 1);
        margin-top: 5%;
        margin-bottom: 7%;
        overflow-x: hidden;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .part1 .aside span{
        font-size: 30px;
        font-weight: bold;
        color: darkmagenta;
    }
    .part1 .aside button {
        background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);
        outline: none;
        border: 3px solid darkmagenta;
        border-radius: 5px;
        font-size: 23px;
        width: 87%;
        font-family: "bzar";
        font-weight: bold;
        margin-top: 5%;
        margin-right: 5%;
        margin-left: 5%;
        padding: 2%;
        cursor: pointer;
        line-height: 1.75em;
    }
    /*ARTICLES*/
    .articles h1{
        font-size: 27px;
        font-weight: bold;
        color: darkmagenta;
        margin-top: 10%;
        padding-right: 13%;
        padding-left: 13%;
        text-align: center;
    }
    .articles hr{
        border-style: dashed;
        margin-top: 1em;
        margin-bottom: 1em;
    }
    .articles p{
        font-size: 22px;
        font-weight: bold;
        text-align: justify;
        padding-bottom: 7%;
        padding-right: 7%;
        padding-left: 7%;
        line-height:2em;
    }
    /*MAIN SECTION IN WEB-DESIGN-WORDPRESS PAGE*/
    .web-design{
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .web-design .mobile{
        width: 90vw;
        border-collapse: collapse;
        margin: 5%;
    }
    .web-design .mobile th{
        width: 90vw;
        /*font-family: 'vazir';*/
        font-size: 23px;
        background-color: darkmagenta;
        color: white;
        border: 3px solid darkmagenta;
        padding: 5%;
        font-weight: bold;
    }
    .web-design .mobile td{
        width: 90vw;
        /*font-family: 'vazir';*/
        font-size: 20px;
        font-weight: lighter;
        color: darkmagenta;
        border: 3px solid darkmagenta;
        padding: 5%;
        font-weight: bold;
        line-height: 2em;
    }
    .web-design .more-info1{
        outline: none;
        color: rgba(255, 255, 0, 1);
        background-color: darkmagenta;
        border: 3px solid darkmagenta;
        border-radius: 3px;
        font-size: 17px;
        width: 60%;
        /*font-family: "byas";*/
        font-weight: bold;
        text-align: center;
        padding: 3%;
    }
    .web-design .more-info1:hover{
        outline: none;
        color: darkmagenta;
        background-color: rgba(255, 255, 0, 1);
        border: 3px solid darkmagenta;
        border-radius: 3px;
        font-size: 17px;
        width: 60%;
        !*font-family: "byas";
        font-weight: bold;
        align-items: center;
        justify-content: center;
        padding: 3%;
    }
    .web-design .more-info2{
        outline: none;
        color: rgba(255, 255, 0, 1);
        background-color: darkmagenta;
        border: 3px solid darkmagenta;
        border-radius: 3px;
        font-size: 17px;
        width: 60%;
        /*font-family: "byas";*/
        font-weight: bold;
        align-items: center;
        justify-content: center;
        padding: 3%;
    }
    .web-design .more-info2:hover{
        outline: none;
        color: darkmagenta;
        background-color: rgba(255, 255, 0, 1);
        border: 3px solid darkmagenta;
        border-radius: 3px;
        font-size: 17px;
        width: 60%;
        /*font-family: "byas";*/
        font-weight: bold;
        align-items: center;
        justify-content: center;
        padding: 3%;
    }
    .web-design .more-info3{
        outline: none;
        color: rgba(255, 255, 0, 1);
        background-color: darkmagenta;
        border: 3px solid darkmagenta;
        border-radius: 3px;
        font-size: 17px;
        width: 60%;
        /*font-family: "byas";*/
        font-weight: bold;
        align-items: center;
        justify-content: center;
        padding: 3%;
        margin-bottom: 1em;
    }
    .web-design .more-info3:hover{
        outline: none;
        color: darkmagenta;
        background-color: rgba(255, 255, 0, 1);
        border: 3px solid darkmagenta;
        border-radius: 3px;
        font-size: 17px;
        width: 60%;
        /*font-family: "byas";*/
        font-weight: bold;
        align-items: center;
        justify-content: center;
        padding: 3%;
    }
    .web-design .tabtop{
        display: none;
    }
    /*MAIN SECTION IN admin-instagram PAGE*/
    .admin-instagram{
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .admin-instagram .mobile{
        width: 90vw;
        border-collapse: collapse;
        margin: 5%;
        text-align: center;
    }
    .admin-instagram .mobile th{
        width: 90vw;
        /*font-family: 'vazir';*/
        font-size: 23px;
        background-color: darkmagenta;
        color: white;
        border: 3px solid darkmagenta;
        padding: 5%;
        font-weight: bold;
    }
    .admin-instagram .mobile td{
        width: 90vw;
        /*font-family: 'vazir';*/
        font-size: 21px;
        font-weight: lighter;
        color: darkmagenta;
        border: 3px solid darkmagenta;
        padding: 5%;
        font-weight: bold;
        line-height: 1.75em;
    }
    .admin-instagram .tabtop{
        display: none;
    }
    .admin-instagram h3{
        font-size: 25px;
        font-weight: bold;
        color: darkmagenta;
        padding-right: 1.25em;
        padding-left: 1.25em;
        padding-top: 0.5em;
         line-height:1.5em;
    }
    .admin-instagram ol{
        width: 80%;
        font-size: 22px;
        font-weight: bold;
        color: darkmagenta;
        background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);
        margin: 0.5em auto;
        padding: 1em;
        line-height:1.5em;
    }
    @media (min-width: 23.4375rem){
        .admin-instagram ol{
            width: 75%;
        }
    }
    @media (min-width: 26.5625rem){
        .admin-instagram ol{
            width: 70%;
        }
    }
    .admin-instagram p{
        font-size: 25px;
        font-weight: bold;
        color: darkmagenta;
        padding: 1em;
        line-height: 1.75em;
        text-align: justify; 
    }
    
    /*MAIN SECTION IN PORTFOLIO-US PAGE*/
    .portfolio-us{
        width: 100vw;
        margin-top: 1.5em;
    }
    .portfolio-us h5{
        font-size: 25px;
        font-weight: bold;
        color: darkmagenta;
        text-align: center;
        padding-right: 0.5em;
        padding-left: 0.5em;
        line-height: 1.5em;
    }
    .portfolio-us hr{
        border: 3px double darkmagenta;
        width:50em;
    }
    .portfolio-us .section{
        display: block;
        margin: 0 auto;
    }
    .portfolio-us .section .portfolio{
        width: 75%;
        height: 70%;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-right: 2em;
        margin-left: 2em;
        margin-top: 1em;
        /*border: 1px solid darkmagenta;*/
    }
    @media (min-width: 23.4375rem){
        .portfolio-us .section .portfolio{
            margin-right: 3em;
            margin-left: 3em;
        }
    }
    .portfolio-us .section .portfolio img{
        width: 210px;
        height: 210px;
        border: 2px solid darkmagenta;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }
    @media (min-width: 23.4375rem){
        .portfolio-us .section .portfolio img{
            width: 220px;
            height: 220px;
        }
    }
    @media (min-width: 23.4375rem){
        .portfolio-us .section .portfolio img{
            width: 220px;
            height: 220px;
        }
    }
    .portfolio-us .section .portfolio button {
        width: 60vw;
        font-size: 17px;
        font-weight: bold;
        color: white;
        text-align: center;
        background-color: darkmagenta;
        border: 1px solid darkmagenta;
        margin-top: -0.75em;
        margin-bottom: 1em;
        padding: 0.5em;
        line-height: 2em;
    }
    .portfolio-us .portfolio button a{
        text-decoration: none;
    }
    .portfolio-us hr{
        display: none;
    }
    /*MAIN SECTION IN ABOUT-US PAGE*/
    .about-us{
        width: 100vw;
        margin-top: 1em;
        margin-bottom: 1em;
    }
    .about-us .h2{
        align-items: center;
        justify-content: center;
        padding-right: 1.5em;
        padding-left: 1.5em;
        margin-bottom: 1em;
    }
    .about-us .h2 h2{
        display: inline-block;
        font-size: 20px;
        font-weight: bold;
        color: darkmagenta;
    }
    .about-us .h2 hr{
        display: inline-block;
        color: darkmagenta;
        width: 8.5em;
        border-style: solid;
        border-width: 1.5px;
    }
    @media (min-width: 26.5625rem){
        .about-us .h2 hr{
            display: inline-block;
            color: darkmagenta;
            width: 11.5em;
            border-style: solid;
            border-width: 1.5px;
        }
    }
    @media (min-width: 26.5625rem) {
        .about-us .h2 hr {
            display: inline-block;
            color: darkmagenta;
            width: 15em;
            border-style: solid;
            border-width: 1.5px;
        }
    }
    .about-us p{
        font-size: 20px;
        font-weight: bold;
        text-align: justify;
        margin-top: 0.5em;
        border: none;
        line-height: 2em;
    }
    .about-us .h3{
        justify-content: center;
        align-items: center;
        text-align: center;
        padding-right: 1.5em;
        padding-left: 1.5em;
    }
    .about-us .h3 h3{
        display: inline-block;
        font-size: 20px;
        font-weight: bold;
        color: darkmagenta;
    }
    .about-us .h3 hr{
        display: inline-block;
        color: darkmagenta;
        width: 7.6em;
        border-style: solid;
        border-width: 1.5px;
    }
    @media (min-width: 23.4375rem){
        .about-us .h3 hr{
            width: 10.5em;
        }
    }
    @media (min-width: 26.5625rem) {
        .about-us .h3 hr {
            width: 14em;
        }
    }
    .about-us .h3 button{
        text-align: center;
        font-size: 17px;
        font-weight: bold;
        border: 2px solid darkmagenta;
        background-color: darkmagenta;
        padding: 0.75em;
        margin: 1em;
        justify-content: center;
        align-items: center;
        text-align: center;
        line-height: 1.75em;
        color: white;
        width: 77%;
    }
    /*MAIN SECTION IN CONTACT-US PAGE*/
    .contact-us{
        width: 100vw;
        margin-top: 1em;
        margin-bottom: 1em;
    }
    .contact-us .h2{
        align-items: center;
        justify-content: center;
        padding-right: 1.5em;
        padding-left: 1.5em;
        margin-bottom: 1em;
    }
    .contact-us .h2 h2{
        display: inline-block;
        font-size: 20px;
        font-weight: bold;
        color: darkmagenta;
    }
    .contact-us .h2 hr{
        display: inline-block;
        color: darkmagenta;
        width: 8.5em;
        border-style: solid;
        border-width: 1.5px;
    }
    @media (min-width: 23.4375rem){
        .contact-us .h2 hr{
            display: inline-block;
            color: darkmagenta;
            width: 11.5em;
            border-style: solid;
            border-width: 1.5px;
        }
    }
    @media (min-width: 26.5625rem) {
        .contact-us .h2 hr {
            display: inline-block;
            color: darkmagenta;
            width: 15em;
            border-style: solid;
            border-width: 1.5px;
        }
    }

    /*PART-FOOTER*/
    .part-footer{
        width: 100vw;
    }
    .part-footer #contact{
        position: absolute;
        top: 45px;
        /*right: 0px;*/
        /*bottom: 0px;*/
        /*left: 0px;*/
    }
    .part-footer #contact #h3{
        display: inline-block;
        font-size: 30px;
        font-weight: bold;
        color: rgba(255, 255, 0, 1);
    }
    .part-footer #contact .phone{
        display: inline-block;
        font-size: 35px;
        font-weight: bold;
        color: rgba(255, 255, 0, 1);
        text-decoration: none;
    }
    /*FOOTER*/
    footer {
        width: 100vw;
        background-color: black;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    #footer1{
        display: block;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    #footer1 img{
        margin: 5%;
		width: 230px;
		height: 200px;
    }
    #footer1 h4{
        font-size: 20px;
        color: rgba(255, 255, 0, 1);
        margin-right: 1.75em;
        margin-left: 1.75em;
        text-align: justify;
        line-height: 1.5em;
    }
    #footer1 span1{
        font-size: 26px;
        font-weight: bold;
        color: rgba(255, 255, 0, 1);
    }
    #footer1 li{
        list-style-type: none;
        font-size: 20px;
        background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);
        border:3px solid darkmagenta;
        border-radius: 2px;
        margin: 1.5em;
        text-align: center;
        justify-content: center;
        align-items: center;
        width: 80%;
        padding: 0.5em;
        font-weight: bold;
    }
    #footer1 ul a{
        text-decoration: none;
        color: rgba(255, 255, 0, 1);;
    }
    #footer1 li:hover{
        background-color: rgba(255, 255, 0, 1);
        color: darkmagenta;
    }
    #footer1 span2{
        font-size: 26px;
        font-weight: bold;
        color: rgba(255, 255, 0, 1);
    }
    #footer1 .mobileicon{
        width: 70px;
        height: 70px;
    }
    #footer1 button{
        font-size: 35px;
        font-weight: bold;
        font-family: "bzar";
        width: 90%;
        background-color: darkmagenta;
        padding: 0.25em;
        border:1px solid darkmagenta;
        border-radius: 2px;
        outline: none;
    }
    #footer1 button a{
        text-decoration: none;
        color: rgba(255, 255, 0, 1);
    }
    #footer1 .icon{
        display: flex;
        background-color: black;
        border-color: black;
        align-items: center;
        justify-content: center;
    }
    #footer1 .icon img{
        width: 38px;
        height: 38px;
        margin: 2%;
    }
    #footer1 .icon a{
        text-decoration: none;
        color: rgba(255, 255, 0, 1);
        font-size: 28px;
        font-weight: bold;
    }
    #footer2{
        display: none;
    }
    footer hr{
        width: 100%;
    }
    footer span3{
        text-align: center;
        color: rgba(255, 255, 0, 1);
        font-size: 20px;
        font-weight: bold;
        line-height: 1.5em;

    }
}

                 /*              RESPONSIVE IN TABLET ----> 768px            */
@media (min-width: 48rem) {
    /*HEADER*/
    header{
        height: 45vh;
        background-color: black;
    }
    #head1{
        height: 25vh;
    }
	#head1 span{
		display: none;
	}
    #head1 h1{
        line-height: 25vh;
        color: #ffffff;
        text-align: center;
        font-family: "byas";
        font-size: 45px;
        font-weight: bold;
    }
    #head2{
        height: 20vh;
        background-color: black ;
        padding: 1%;
        display: flex;
        position: sticky;
        top: 0;
        /*rgba(255, 255, 0, 1)*/
    }
    #head2 nav{
        width: 80vw;
        float: right;
        margin: 0.5%;
    }
    #head2 nav img{
        background-color: rgba(255, 255, 0, 1);
        color: rgba(255, 255, 0, 1);
        width: 60px;
        height: 60px;
    }
    #head2 nav #menubox{
        background-color: rgba(255, 255, 0, 1);
        padding: 3%;
        width: 46%;
        transform: translate(0% , -30%);
    }
    #head2 nav #menubox button{
        text-align: center;
        padding: 0.25%;
        margin: 0.5%;
        outline: none;
        color: rgba(255, 255, 0, 1);
        border: 3px solid darkmagenta;
        border-radius: 5px;
        background-color: darkmagenta;
        width: 50%;
        font-size: 18px;
        font-family: "bzar";
        font-weight: bold;
    }
    #head2 nav #menubox button:hover{
        color: darkmagenta;
        border: 3px solid darkmagenta;
        border-radius: 5px;
        background-color: rgba(255, 255, 0, 1);
        cursor: pointer;
        outline: none;
        /*rgba(219, 112, 147, 1);*/
    }
    #head2 #logo{
        width: 20vw;
        float: left;
		padding-left: 25%;
		padding-top: -10%;
    }
    #head2 #logo img{
        width: 160px;
        height: 140px;
    }
    #head3{
        display: none;
    }
    /*MAIN SECTION IN HOME PAGE*/
    /*PART1*/
    .part1{
        width: 100vw;
        display: flex;
        margin-top: 1em;
    }
    .main{
        width: 75vw;
        float: right;
    }
    .div1{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sec1{
        /*width: 50vw;*/
        background-color: rgba(255, 255, 0, 1);
        display: flex;
        margin-right: 0;
        margin-left: 0;
    }
    .sec1 img{
        height: 50px;
        width: 50px;
        border: 2px solid black;
        border-radius: 50%;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec1 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 2%;
    }
    .sec1 span{
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        line-height: 1.5em;
    }
    .sec1 span a{
        text-decoration: none;
        color: black;
    }
    .sec1 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    .div1 hr{
        transform: rotate(90deg);
        width: 20%;
        margin-right: 0;
        margin-left: 0;
    }
    .sec2{
        /*width: 50vw;*/
        background-color: rgba(255, 255, 0, 1);
        display: flex;
        margin-right: 0;
        margin-left: 0;
    }
    .sec2 img{
        height: 50px;
        width: 50px;
        border: 2px solid black;
        border-radius: 50%;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec2 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 2%;
    }
    .sec2 span{
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        line-height: 1.5em;
    }
    .sec2 span a{
        text-decoration: none;
        color: black;
    }
    .sec2 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    .div2{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sec3{
        /*width: 50%;*/
        background-color: rgba(255, 255, 0, 1);
        display: flex;
        margin-right: 0;
        margin-left: 0;
    }
    .sec3 img{
        height: 50px;
        width: 50px;
        border: 2px solid black;
        border-radius: 50%;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec3 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 2%;
    }
    .sec3 span{
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        line-height: 1.5em;
    }
    .sec3 span a{
        text-decoration: none;
        color: black;
    }
    .sec3 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    .div2 hr{
        transform: rotate(90deg);
        width: 20%;
        margin-right: 0;
        margin-left: 0;
    }
    .sec4{
        background-color: rgba(255, 255, 0, 1);
        display: flex;
        margin-right: 0;
        margin-left: 0;
    }
    .sec4 img{
        height: 50px;
        width: 50px;
        border: 2px solid black;
        border-radius: 50%;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec4 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 2%;
    }
    .sec4 span{
        font-size: 23px;
        font-weight: bold;
        text-align: center;
        line-height: 1.5em;
    }
    .sec4 span a{
        text-decoration: none;
        color: black;
    }
    .sec4 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    .other{
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .other h2{
        margin-top: -1em;
        font-size: 30px;
        /*color: darkmagenta;*/
    }
    .other .add {
        display: flex;
    }
    .sec5{
        width: 19vw;
        background-color: rgba(255, 255, 0, 1);
        margin-right: 0;
        margin-left: 0;
    }
    .sec5 img{
        height: 50px;
        width: 50px;
        border: 2px solid black;
        border-radius: 50%;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec5 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 0.25em;
    }
    .sec5 span{
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        line-height: inherit;
    }
    .sec5 span a{
        text-decoration: none;
        color: black;
    }
    .sec5 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    .sec6{
        width: 19vw;
        background-color: rgba(255, 255, 0, 1);
        margin-right: 0;
        margin-left: 0;
    }
    .sec6 img{
        height: 50px;
        width: 50px;
        border: 2px solid black;
        border-radius: 50%;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec6 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 0.25em;
    }
    .sec6 span{
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        line-height: inherit;
    }
    .sec6 span a{
        text-decoration: none;
        color: black;
    }
    .sec6 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    .sec7{
        width: 19vw;
        background-color: rgba(255, 255, 0, 1);
        margin-right: 0;
        margin-left: 0;
    }
    .sec7 img{
        height: 53px;
        width: 53px;
        border: 2px solid black;
        border-radius: 50%;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec7 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 0.25em;
    }
    .sec7 span{
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        line-height: inherit;
    }
    .sec7 span a{
        text-decoration: none;
        color: black;
    }
    .sec7 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    .sec8{
        width: 19vw;
        background-color: rgba(255, 255, 0, 1);
        margin-right: 0;
        margin-left: 0;
    }
    .sec8 img{
        height: 50px;
        width: 50px;
        border: 2px solid black;
        border-radius: 50%;
        /*background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);*/
    }
    .sec8 img:hover{
        border: 3px solid darkmagenta;
        border-radius: 50%;
        padding: 0.25em;
    }
    .sec8 span{
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        line-height: inherit;
    }
    .sec8 span a{
        text-decoration: none;
        color: black;
    }
    .sec8 span a:hover{
        text-decoration: none;
        color: darkmagenta;
    }
    .hr{
        display: none;
    }
    .part1 .part1-mobile{
        display: none;
    }
    .aside{
        width: 25vw;
        float: left;
        background-color: rgba(255, 255, 0, 1);
        border-right: 3px dashed darkmagenta;
        /*border-radius: 5px;*/
        /*box-shadow: 5px 5px 5px darkmagenta;*/
        margin-top: 5%;
        margin-bottom: 7%;
        /*justify-content: center;
        align-items: center;
        text-align: center;*/
        overflow-x: hidden;
    }
    .aside span{
        font-size: 29px;
        font-weight: bold;
        color: darkmagenta;
    }
    .aside button{
        background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);
        outline: none;
        border: 3px solid darkmagenta;
        border-radius: 5px;
        font-size: 20px;
        width: 85%;
        font-family: "bzar";
        font-weight: bold;
        margin: 5%;
        padding: 2%;
    }
    /*ARTICLES SECTION*/
    .articles h1{
         margin-top: 7%;
    }
    .articles p{
        line-height: 2em;
        padding-right: 10%;
        padding-left: 10%;
    }

    /*PART2*/
    .part2 {
        display: block;
        width: 100vw;
        border: 2px groove rgba(255, 255, 0, 1);
        background-color: darkmagenta;
        border-right: 0;
        border-left: 0;
        margin-top: 1em;
        /*margin-bottom: 1em;*/
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .part2 h2{
        font-size: 27px;
        font-weight: bold;
        color: rgba(255, 255, 0, 1);
        padding: 1em;
    }
    .part2 img{
        width: 70px;
        height: 70px;
        border: 1px solid rgba(255, 255, 0, 1);
        /*border-radius: 50%;*/
        padding: 0.25em;
    }
    .part2 img:hover{
        border: 2px solid darkmagenta;
    }

    /*MAIN SECTION IN WEB-DESIGN-WORDPRESS-PAGE*/
    .web-design .mobile{
        display: none;
    }
    .web-design .tabtop{
        border-collapse: collapse;
        display: flex;
        width: 90vw;
        margin: 5%;
        padding-right: 3%;
        padding-left: 3%;
        /*border-collapse: collapse;*/
    }
    .web-design .tabtop th{
        width: 90vw;
        font-size: 23px;
        background-color: darkmagenta;
        color: white;
        padding: 3%;
        border: 3px solid darkmagenta;
    }
    .web-design .tabtop td{
        width: 90vw;
        font-size: 20px;
        font-weight: bold;
        color: darkmagenta;
        padding: 2%;
        border: 3px solid darkmagenta;
    }
    .more-info1{
        display: none;
    }
    .more-info2{
        display: none;
    }
    .more-info3{
        display: none;
    }
    /*MAIN SECTION IN admin-instagram PAGE*/
    .admin-instagram .mobile{
        display: none;
    }
    .admin-instagram .tabtop{
        border-collapse: collapse;
        display: flex;
        width: 90vw;
        margin: 5%;
        padding-right: 3%;
        padding-left: 3%;
        /*border-collapse: collapse;*/
    }
    .admin-instagram .tabtop th{
        width: 90vw;
        font-size: 23px;
        background-color: darkmagenta;
        color: white;
        padding: 3%;
        border: 3px solid darkmagenta;
    }
    .admin-instagram .tabtop td{
        width: 90vw;
        font-size: 20px;
        font-weight: bold;
        color: darkmagenta;
        padding: 2%;
        border: 3px solid darkmagenta;
        text-align: center;
    }
    .admin-instagram h3{
        font-size: 27px;
        margin-top: -0.5em;
    }
    .admin-instagram ol{
        font-size: 23px;
        width: 50%;
    }
    .admin-instagram p{
        font-size: 25px;
        font-weight: bold;
        color: darkmagenta;
        padding-right: 4em;
        padding-left: 4em;
        line-height: 1.75em;
        text-align: justify; 
    }
    /*MAIN SECTION IN PORTFOLIO-US PAGE*/
    .portfolio-us{
        width: 100vw;
        margin-top: 1.5em;
    }
    .portfolio-us h5{
        font-size: 27px;
        margin-top: 1em;
    }
    .portfolio-us hr{
        border: 3px double darkmagenta;
        width:50em;
    }
    .portfolio-us .section{
        display: flex;
        margin-top: 0.5em;
    }
    .portfolio-us .section .portfolio{
        width: 30%;
        height: 70%;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-right: 0;
        margin-left: 0;
    }
    .portfolio-us .section .portfolio img{
        width: 200px;
        height: 200px;
        border: 2px solid darkmagenta;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }
    .portfolio-us .section .portfolio button {
        width: 26vw;
        font-size: 17px;
    }

    /*MAIN SECTION IN ABOUT-US PAGE*/
    .about-us{
        width: 100vw;
        margin-top: 1em;
    }
    .about-us .h2{
        align-items: center;
        justify-content: center;
        padding-right: 3em;
        padding-left: 3em;
    }
    .about-us .h2 h2{
        display: inline-block;
        font-size: 25px;
        font-weight: bold;
        color: darkmagenta;
    }
    .about-us .h2 hr{
        display: inline-block;
        color: darkmagenta;
        width: 31em;
        border-style: solid;
        border-width: 1.5px;
    }
    .about-us p{
        font-size: 20px;
        font-weight: bold;
        text-align: justify;
        margin-top: 0.5em;
        border: none;
    }
    .about-us .h3{
        justify-content: center;
        align-items: center;
        text-align: center;
        padding-right: 3em;
        padding-left: 3em;
    }
    .about-us .h3 h3{
        display: inline-block;
        font-size: 25px;
        font-weight: bold;
        color: darkmagenta;
    }
    .about-us .h3 hr{
        display: inline-block;
        color: darkmagenta;
        width: 30em;
        border-style: solid;
        border-width: 1.5px;
    }
    .about-us .h3 button{
        display: inline-block;
        width: 40%;
        font-size: 20px;
        padding: 0.5em;
        margin: 1em;
        color: white;
    }

    /*PART-FOOTER*/
    .part-footer{
        margin-top: 2em;
    }
    .part-footer #contact{
        top: 50px;
    }
    .part-footer #contact #h3{
        font-size: 30px;
    }
    .part-footer #contact .phone {
        font-size: 35px;
    }
    /*FOOTER*/
    footer{
        width: 100vw;
        background-color: black;
    }
    #footer1{
        display: none;
    }
    #footer2{
        width: 100vw;
        display: flex;
        padding: 1em;
    }
    #footer2 #logo-footer{
        width: 30vw;
        float: right;
        align-items: center;
    }
    #footer2 #logo-footer img{
        margin: 5%;
		width: 230px;
		height: 200px;
    }
    #footer2 #logo-footer h4{
        font-size: 20px;
        color: rgba(255, 255, 0, 1);
        margin-top: -1em;
        font-weight: bold;
        text-align: justify;
    }
    #footer2 #container-footer{
        width: 70vw;
        float: left;
        justify-content: center;
        align-items: center;
        margin-top: 3em;
    }
    #footer2 #container-footer .divide1{
        display: inline-block;
        width: 35vw;
    }
    #footer2 #container-footer .divide1 span1{
        font-size: 30px;
        font-weight: bold;
        color: rgba(255, 255, 0, 1);
    }
    #footer2 #container-footer .divide1 .mobileicon{
        width: 60px;
        height: 60px;
        color: rgba(255, 255, 0, 1);
    }
    #footer2 #container-footer .divide1 button{
        font-size: 30px;
        font-family: "bzar";
        font-weight: bold;
        width: 90%;
        background-color: darkmagenta;
        padding: 0.25em;
        border:1px solid darkmagenta;
        border-radius: 2px;
        outline: none;
    }
    #footer2 #container-footer .divide1 button a{
        text-decoration: none;
        color: rgba(255, 255, 0, 1);
    }
    #footer2 #container-footer .divide1 .icon{
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: black;
        border: 0;
    }
    #footer2 #container-footer .icon img{
        width: 30px;
        height: 30px;
        margin: 2%;
    }
    #footer2 .icon a{
        text-decoration: none;
        color: rgba(255, 255, 0, 1);
        font-size: 28px;
        font-weight: bold;
    }
    #footer2 #container-footer .divide2{
        display: inline-block;
        width: 30vw;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    #footer2 #container-footer .divide2 span2{
        font-size: 30px;
        font-weight: bold;
        color: rgba(255, 255, 0, 1);
    }
    /*#footer2 #container-footer .divide2 ul{
        align-items: center;
        justify-content: center;
    }*/
    #footer2 #container-footer .divide2 ul li{
        list-style-type: none;
        font-size: 18px;
        background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);
        border:3px solid darkmagenta;
        border-radius: 2px;
        margin: 3%;
        text-align: center;
        padding: 1%;
        font-weight: bold;
    }
    #footer2 #container-footer .divide2 ul a{
        text-decoration: none;
    }
    #footer2 #container-footer .divide2 ul li:hover{
        background-color: rgba(255, 255, 0, 1);
        color: darkmagenta;
    }
    footer hr{
        width: 100vw;
    }
    footer span3{
        text-align: center;
        color: rgba(255, 255, 0, 1);
        font-size: 23px;
        font-weight: bold;

    }

}

              /*              RESPONSIVE IN LAPTOP ----> 1024px            */
@media (min-width: 64rem) {
    /*HEADER*/
    header{
        height: 45vh;
        background-color: black;
    }
    #head1{
        height: 25vh;
    }
	#head1 span{
		display: none;
	}
    #head1 h1{
		line-height:25vh;
        color: #ffffff;
        text-align: center;
        font-family: "byas";
        font-size: 45px;
        font-weight: bold;
    }
    #head2{
        display: none;
    }
    #head3{
        height: 20vh;
        background-color: black ;
        padding: 2%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 0;
        /*rgba(255, 255, 0, 1)*/
    }
    #head3 nav{
        width: 80vw;
        float: right;
        margin: 1%;
    }
    #head3 nav button{
        text-align: center;
        padding: 0.5%;
        margin: 0.5%;
        outline: none;
        color: rgba(255, 255, 0, 1);
        border: 3px solid darkmagenta;
        border-radius: 5px;
        background-color: darkmagenta;
        width: 15%;
        font-size: 17px;
        font-family: "bzar";
        font-weight: bold;
    }
    #head3 nav button a{
        outline: none;
        text-decoration: none;
        color: rgba(255, 255, 0, 1);;
    }
    #head3 nav button:hover{
        color: darkmagenta;
        border: 3px solid rgba(255, 255, 0, 1);
        border-radius: 5px;
        background-color: rgba(255, 255, 0, 1);
        cursor: pointer;
        outline: none;
        /*rgba(219, 112, 147, 1);*/
    }
    #head3 nav button a:hover{
        color: darkmagenta;
        cursor: pointer;
    }
    #head3 #logo{
        width: 20vw;
        float: left;
		margin-top: 4%;
		margin-right:10%;
    }
    #head3 #logo img{
        width: 160px;
        height: 140px;
    }
    /*MAIN SECTION IN HOME PAGE(INDEX.PHP)*/
    /*PART1*/
    .sec1 img{
        height: 60px;
        width: 60px;
    }
    .sec1 span {
        font-size: 28px;
        font-weight: bold;
    }
    .div1 hr{
        width: 15%;
    }
    .sec2 img{
        height: 60px;
        width: 60px;
    }
    .sec2 span{
        font-size: 28px;
        font-weight: bold;
    }
    .sec3 img{
        height: 60px;
        width: 60px;
    }
    .sec3 span{
        font-size: 28px;
        font-weight: bold;
    }
    .div2 hr{
        width: 14%;
    }
    .sec4 img{
        height: 60px;
        width: 60px;
    }
    .sec4 span{
        font-size: 28px;
        font-weight: bold;
    }
    .other h2{
        margin-top: -1em;
        font-size: 32px;
    }
    .sec5{
       /* width: 19vw;*/
        background-color: rgba(255, 255, 0, 1);
        margin-right: 0em;
        margin-left: 0em;
        padding-right: 4em;
        padding-left: 4em;
    }
    .sec5 img{
        height: 60px;
        width: 60px;
    }
    .sec5 img:hover{
        padding: 0.35em;
    }
    .sec5 span{
        font-size: 26px;
        font-weight: bold;
    }
    .sec6{
        /*width: 19vw;*/
        background-color: rgba(255, 255, 0, 1);
        margin-right: 0;
        margin-left: 0;
        padding-right: 4em;
        padding-left: 4em;
    }
    .sec6 img{
        height: 60px;
        width: 60px;
    }
    .sec6 img:hover{
        padding: 0.35em;
    }
    .sec6 span{
        font-size: 26px;
        font-weight: bold;
    }
    .sec7{
        /*width: 19vw;*/
        background-color: rgba(255, 255, 0, 1);
        margin-right: 0;
        margin-left: 0;
        padding-right: 4em;
        padding-left: 4em;
    }
    .sec7 img{
        height: 60px;
        width: 60px;
    }
    .sec7 img:hover{
        padding: 0.35em;
    }
    .sec7 span{
        font-size: 26px;
        font-weight: bold;
    }
    .sec8{
        /*width: 19vw;*/
        background-color: rgba(255, 255, 0, 1);
        margin-right: 0;
        margin-left: 0;
        padding-right: 4em;
        padding-left: 4em;
    }
    .sec8 img{
        height: 60px;
        width: 60px;
    }
    .sec8 img:hover{
        padding: 0.35em;
    }
    .sec8 span{
        font-size: 26px;
        font-weight: bold;
    }
    .aside{
        border-right: 3px dashed darkmagenta;
    }
    .aside button {
        font-size: 20px;
    }

    /*PART2*/
    .part2 h2{
        font-size: 30px;
        font-weight: bold;
        color: rgba(255, 255, 0, 1);
        padding: 1em;
    }
    .part2 img{
        width: 70px;
        height: 70px;
        border: 1px solid rgba(255, 255, 0, 1);
        /*border-radius: 50%;*/
        padding: 0.25em;
    }
    .part2 img:hover{
        border: 2px solid darkmagenta;
    }
    /*ARTICLES*/
    .aside span{
        font-size: 30px;
    }
    .aside button{
        font-size: 22px;
    }
    /*ARTICLES SECTION*/
    .articles h1{
        font-size: 33px;
        margin-top: 3%;
    }
    .articles p{
        font-size: 25px;
        line-height: 2em;
        padding-right: 13%;
        padding-left: 13%;
    }

    /*MAIN SECTION IN WEB-DESIGN-WORDPRESS PAGE*/
    .web-design .mobile{
        display: none;
    }
    .web-design .tabtop{
        border-collapse: collapse;
        display: flex;
        width: 90vw;
        margin: 5%;
        padding-right: 3%;
        padding-left: 3%;
    }
    .web-design .tabtop th{
        width: 90vw;
        font-size: 25px;
        background-color: darkmagenta;
        color: white;
        padding: 3%;
        border: 4px solid darkmagenta;

    }
    .web-design .tabtop td{
        width: 90vw;
        font-size: 22px;
        font-weight: bold;
        color: darkmagenta;
        padding: 2%;
        border: 4px solid darkmagenta;
    }
    /*MAIN SECTION IN admin-instagram PAGE*/
    .admin-instagram .mobile{
        display: none;
    }
    .admin-instagram .tabtop{
        border-collapse: collapse;
        display: flex;
        width: 90vw;
        margin: 5%;
        padding-right: 3%;
        padding-left: 3%;
    }
    .admin-instagram .tabtop th{
        width: 90vw;
        font-size: 25px;
        background-color: darkmagenta;
        color: white;
        padding: 3%;
        border: 4px solid darkmagenta;

    }
    .admin-instagram .tabtop td{
        width: 90vw;
        font-size: 22px;
        font-weight: bold;
        color: darkmagenta;
        padding: 2%;
        border: 4px solid darkmagenta;
    }
    .admin-instagram h3{
        font-size: 30px;
        margin-top: -0.5em;
    }
    .admin-instagram ol{
        font-size: 27px;
        width: 45%;
    }

    /*MAIN SECTION IN PORTFOLIO-US PAGE*/
    .portfolio-us h5{
        font-size: 30px;
        margin-top: 1em;
    }
    .portfolio-us hr{
        border: 3px double darkmagenta;
        width:50em;
    }
    .portfolio-us .section .portfolio{
        width: 30%;
        height: 70%;
    }
    .portfolio-us .section .portfolio img{
        width: 230px;
        height: 230px;
    }
    .portfolio-us .section .portfolio button {
        width: 22vw;
        font-size: 18px;
    }
    /*MAIN SECTION IN ABOUT-US PAGE*/
    .about-us{
        width: 100vw;
        margin-top: 1em;
    }
    .about-us .h2{
        align-items: center;
        justify-content: center;
        padding-right: 7em;
        padding-left: 7em;
        margin-bottom: 1.5em;
    }
    .about-us .h2 h2{
        display: inline-block;
        font-size: 28px;
        font-weight: bold;
        color: darkmagenta;
    }
    .about-us .h2 hr{
        display: inline-block;
        color: darkmagenta;
        width: 58em;
        border-style: solid;
        border-width: 1.5px;
    }
    .about-us p{
        font-size: 22px;
        font-weight: bold;
        text-align: justify;
        margin-top: 0.5em;
        border: none;
        padding-right: 1em;
        padding-left: 1em;
    }
    .about-us .h3{
        align-items: center;
        justify-content: center;
        text-align: center;
        padding-right: 7em;
        padding-left: 7em;
        margin-bottom: 1.5em;
    }
    .about-us .h3 h3{
        display: inline-block;
        font-size: 25px;
        font-weight: bold;
        color: darkmagenta;
    }
    .about-us .h3 hr{
        display: inline-block;
        color: darkmagenta;
        width: 58em;
        border-style: solid;
        border-width: 1.5px;
    }
    .about-us .h3 button{
        align-items: center;
        justify-content: center;
        text-align: center;
        display: inline-block;
        width: 40%;
        font-size: 20px;
        padding: 1em;
        margin: 1em;
        color: white;
    }

    /*PART-FOOTER*/
    .part-footer #contact #h3{
        font-size: 30px;
    }
    .part-footer #contact .phone {
        font-size: 35px;
    }
    /*FOOTER*/
    /*#footer2 #container-footer .divide2{
        justify-content: center;
        text-align: center;
    }*/
    #footer2 #logo-footer h4{
        ont-size: 25px;
        font-weight: bold;
        text-align: justify;
        margin-top: -1em;
    }
    #footer2 #container-footer{
        margin-top: 2em;
    }
    #footer2 #container-footer .divide1 span1{
        font-size: 25px;
    }
    #footer2 #container-footer .divide1 .mobileicon{
        width: 50px;
        height: 50px;
        color: rgba(255, 255, 0, 1);
    }
    #footer2 #container-footer .divide1 button{
        font-size: 30px;
        font-weight: bold;
        width: 90%;
    }
    #footer2 #container-footer .divide2 span2{
        font-size: 25px;
    }
    #footer2 #container-footer .divide2 ul li{
        list-style-type: none;
        font-size: 20px;
        background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);
        border:3px solid darkmagenta;
        border-radius: 2px;
        margin: 3%;
        text-align: center;
        padding: 1%;
        font-weight: bold;
        width: 60%;
    }
    #footer2 #container-footer .divide2 ul a{
        text-decoration: none;
    }
    #footer2 #container-footer .divide2 ul li:hover{
        background-color: rgba(255, 255, 0, 1);
        color: darkmagenta;
    }
    #footer2 #container-footer .divide2 ul li{
        margin:0.5em auto;
    }
    footer hr{
        width: 100vw;
    }
    footer span3{
        text-align: center;
        color: rgba(255, 255, 0, 1);
        font-size: 20px;
        font-weight: bold;
    }

}

                    /*            RESPONSIVE IN LAPTOP L ----> 1440px            */
@media (min-width: 90rem) {
    /*HEADER*/
    header{
        height: 45vh;
        background-color: black;
    }
    #head1{
        height: 25vh;
    }
    #head1 span{
        display: none;
    }
    #head1 h1{
		line-height:25vh;
        color: #ffffff;
        text-align: center;
        font-family: "byas";
        font-size: 55px;
        font-weight: bold;
    }
    #head2{
        display: none;
    }
    #head3{
        height: 20vh;
        background-color: black ;
        padding: 2%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 0;
        /*rgba(255, 255, 0, 1)*/
    }
    #head3 nav{
        width: 80vw;
        float: right;
        margin: 1%;
    }
    #head3 nav button{
        text-align: center;
        padding: 0.5%;
        margin: 0.5%;
        outline: none;
        color: rgba(255, 255, 0, 1);
        border: 3px solid darkmagenta;
        border-radius: 5px;
        background-color: darkmagenta;
        width: 15%;
        font-size: 20px;
        font-family: "bzar";
        font-weight: bold;
    }
    #head3 nav button:hover{
        color: darkmagenta;
        border: 3px solid rgba(255, 255, 0, 1);
        border-radius: 5px;
        background-color: rgba(255, 255, 0, 1);
        cursor: pointer;
        outline: none;
        /*rgba(219, 112, 147, 1);*/
    }
    #head3 #logo{
        width: 20vw;
        float: left;
		margin-top: 3%;
    }
    #head3 #logo img{
        width: 180px;
        height: 160px;
    }
    /*MAIN SECTION IN HOME PAGE(INDEX.PHP)*/
    /*PART1*/
    .sec1{
        width: 50vw;
        background-color: rgba(255, 255, 0, 1);
        display: flex;
        padding-right: 6%;
        padding-left: 6%;
    }
    .sec1 img{
        height: 80px;
        width: 80px;
    }
    .sec1 img:hover{
        border: 4px solid darkmagenta;
        padding: 0.35em;
    }
    .sec1 span{
        font-size: 32px;
        font-weight: bold;
    }
    .div1 hr{
        width: 17%;
    }
    .sec2{
        width: 50vw;
        background-color: rgba(255, 255, 0, 1);
        display: flex;
        padding-right: 5.5%;
        padding-left: 5.5%;
    }
    .sec2 img{
        height: 80px;
        width: 80px;
    }
    .sec2 img:hover{
        border: 4px solid darkmagenta;
        padding: 0.35em;
    }
    .sec2 span{
        font-size: 32px;
        font-weight: bold;
    }
    .div2{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sec3{
        width: 50vw;
        background-color: rgba(255, 255, 0, 1);
        display: flex;
        padding-right: 5%;
        padding-left: 5%;
    }
    .sec3 img{
        height: 80px;
        width: 80px;
    }
    .sec3 img:hover{
        border: 4px solid darkmagenta;
        padding: 0.35em;
    }
    .sec3 span{
        font-size: 32px;
        font-weight: bold;
    }
    .div2 hr{
        width: 17%;
    }
    .sec4{
        width: 50vw;
        background-color: rgba(255, 255, 0, 1);
        display: flex;
        padding-right: 5%;
        padding-left: 5%;
    }
    .sec4 img{
        height: 80px;
        width: 80px;
    }
    .sec4 img:hover{
        border: 4px solid darkmagenta;
        padding: 0.35em;
    }
    .sec4 span{
        font-size: 32px;
        font-weight: bold;
    }
    .other h2{
        margin-top: -1em;
        font-size: 36px;
    }
    .sec5{
        /* width: 19vw;*/
        background-color: rgba(255, 255, 0, 1);
        margin-right: 0em;
        margin-left: 0em;
        padding-right: 5em;
        padding-left: 5em;
    }
    .sec5 img{
        height: 80px;
        width: 80px;
    }
    .sec5 img:hover{
        border: 4px solid darkmagenta;
        padding: 0.35em;
    }
    .sec5 span{
        font-size: 30px;
        font-weight: bold;
    }
    .sec6{
        /*width: 19vw;*/
        background-color: rgba(255, 255, 0, 1);
        margin-right: 0;
        margin-left: 0;
        padding-right: 5em;
        padding-left: 5em;
    }
    .sec6 img{
        height: 80px;
        width: 80px;
    }
    .sec6 img:hover{
        border: 4px solid darkmagenta;
        padding: 0.35em;
    }
    .sec6 span{
        font-size: 30px;
        font-weight: bold;
    }
    .sec7{
        /*width: 19vw;*/
        background-color: rgba(255, 255, 0, 1);
        margin-right: 0;
        margin-left: 0;
        padding-right: 5em;
        padding-left: 5em;
    }
    .sec7 img{
        height: 80px;
        width: 80px;
    }
    .sec7 img:hover{
        border: 4px solid darkmagenta;
        padding: 0.35em;
    }
    .sec7 span{
        font-size: 30px;
        font-weight: bold;
    }
    .sec8{
        /*width: 19vw;*/
        background-color: rgba(255, 255, 0, 1);
        margin-right: 0;
        margin-left: 0;
        padding-right: 5em;
        padding-left: 5em;
    }
    .sec8 img{
        height: 80px;
        width: 80px;
    }
    .sec8 img:hover{
        border: 4px solid darkmagenta;
        padding: 0.35em;
    }
    .sec8 span{
        font-size: 30px;
        font-weight: bold;
    }
    .aside{
        border-right: 5px dashed darkmagenta;
    }
    .aside button {
        font-size: 24px;
    }

    /*PART2*/
    .part2 h2{
        font-size: 33px;
        font-weight: bold;
        color: rgba(255, 255, 0, 1);
        padding: 1em;
    }
    .part2 img{
        width: 80px;
        height: 80px;
        border: 1px solid rgba(255, 255, 0, 1);
        /*border-radius: 50%;*/
        padding: 0.25em;
    }
    .part2 img:hover{
        border: 2px solid darkmagenta;
    }
    /*ARTICLES*/
    .aside span{
        font-size: 33px;
    }
    .aside button{
        font-size: 24px;
    }
    /*ARTICLES SECTION*/
    .articles h1{
        font-size: 37px;
    }
    .articles p{
        font-size: 28px;
        line-height: 2em;
    }

    /*MAIN SECTION IN WEB-DESIGN-WORDPRESS PAGE*/
    .web-design .mobile{
        display: none;
    }
    .web-design .tabtop{
        border-collapse: collapse;
        display: flex;
        width: 90vw;
        margin: 5%;
    }
    .web-design .tabtop th{
        width: 90vw;
        font-size: 30px;
        background-color: darkmagenta;
        color: white;
        padding: 3%;
        border: 4px solid darkmagenta;
    }
    .web-design .tabtop td{
        width: 90vw;
        font-size: 27px;
        font-weight: bold;
        color: darkmagenta;
        padding: 2%;
        border: 4px solid darkmagenta;
    }
    /*MAIN SECTION IN admin-instagram PAGE*/
    .admin-instagram .mobile{
        display: none;
    }
    .admin-instagram .tabtop{
        border-collapse: collapse;
        display: flex;
        width: 90vw;
        margin: 5%;
    }
    .admin-instagram .tabtop th{
        width: 90vw;
        font-size: 30px;
        background-color: darkmagenta;
        color: white;
        padding: 3%;
        border: 4px solid darkmagenta;
    }
    .admin-instagram .tabtop td{
        width: 90vw;
        font-size: 27px;
        font-weight: bold;
        color: darkmagenta;
        padding: 2%;
        border: 4px solid darkmagenta;
    }
    .admin-instagram h3{
        font-size: 35px;
        margin-top: -1em;
    }
    .admin-instagram ol{
        font-size: 30px;
        width: 35%;
    }

    /*MAIN SECTION IN PORTFOLIO-US PAGE*/
    .portfolio-us h5{
        font-size: 30px;
        margin-top: 1em;
    }
    .portfolio-us .section .portfolio{
        width: 30%;
        height: 70%;
    }
    .portfolio-us .section .portfolio img{
        width: 260px;
        height: 260px;
    }
    .portfolio-us .section .portfolio button {
        width: 15vw;
        font-size: 18px;
    }
    /*@media (min-width: 160rem){
        .portfolio-us .section .portfolio button{
            width: 10vw;
            font-size: 20px;
        }
    }*/
    /*MAIN SECTION IN ABOUT-US PAGE*/
    .about-us .h2 h2{
        font-size: 28px;
    }
    .about-us .h2 hr{
        width: 62em;
    }
    .about-us .h2 p{
        font-size: 22px;
    }
    .about-us .h3{
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .about-us .h3 h3{
        font-size: 28px;
    }
    .about-us .h3 hr{
        width: 62em;
    }
    .about-us .h3 button{
        align-items: center;
        justify-content: center;
        text-align: center;
        display: inline-block;
        width: 28%;
        font-size: 24px;
        padding: 0.5em;
        margin: 1em;
        color: white;
    }
    /*FOOTER*/
    footer #footer2{
        width: 100vw;
        background-color: black;
    }
    #footer2 #logo-footer img{
        display: block;
		width: 300px;
		height: 250px;
    }
    #footer2 #logo-footer h4{
        font-size: 27px;
        font-weight: bold;
        text-align: justify;
        margin-top: 0;
    }
    #footer2 #container-footer .divide1 span1{
        font-size: 33px;
        color: rgba(255, 255, 0, 1);
        margin: 10%;
        font-weight: bold;
    }
    #footer2 #container-footer .divide1 button{
        font-size: 33px;
        font-weight: bold;
    }
    #footer2 #container-footer .divide1 .icon a{
        font-size: 32px;
        font-weight: bold;
    }
    #footer2 #container-footer .divide2 span2{
        font-size: 33px;
        font-weight: bold;
        color: rgba(255, 255, 0, 1);
    }
    #footer2 #container-footer .divide2 li{
        list-style-type: none;
        font-size: 25px;
        background-color: darkmagenta;
        color: rgba(255, 255, 0, 1);
        border:3px solid darkmagenta;
        border-radius: 2px;
        margin: 2%;
        text-align: center;
        width: 35%;
        padding: 1%;
        font-weight: bold;
    }
    #footer2 #container-footer .divide2 a{
        text-decoration: none;
    }
    #footer2 #container-footer .divide2 li:hover{
        background-color: rgba(255, 255, 0, 1);
        color: darkmagenta;
    }
    #footer2 #container-footer .divide2{
        /*align-items: center;
        justify-content: center;*/
    }
    #footer2 footer hr{
        width: 60%;
    }
    #footer2 footer span3{
        width: 100vw;
        height: 5vh;
        color: rgba(255, 255, 0, 1);
        font-size: 26px;
    }

}