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

img {
    width: 100%;
}

.container {
    max-width: 1201px;
    margin: 0 auto;
}

.borderDiv {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 20px;
}

.border {
    border: 2px solid gray;
    width: 100px;
    border-radius: 10px;

}

/*
========================================================================
|                                  header                              |
========================================================================
*/


.merryChristmas_1{
    position: relative;
    overflow: hidden;
    
    z-index: 0;
}
.merryChristmas_1{
    width: 100%;
    height: 100px;
    background-image: url('../image/merryChristmas_3.png');
    background-size: cover;
    background-position: center;

}
.merryChristmas_1>div{
    text-align: right;
    width: 100%;
    position: relative;
}
.merryChristmas_1>div>h3{
    position: absolute;
    bottom:10PX;
    right: 15px;
    color: #00818a;
    font-family: 'Poppins', sans-serif;
}

.mes {
    width: 100%;
    color: #00586e;
    padding: 4px;
    

}

.mes>p {
    text-align: end;
    width: 100%;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
}

header {
    width: 100%;
    border-bottom: 3px solid #eeeeee;
    border-bottom-style: dotted;
    position: relative;
    z-index: 99999;
    color: #2a2a2a;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

nav {
    width: 100%;
}

.headerDiv1 {
    flex: 0 0 190px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.headerDiv2 {
    flex: 0 1 570px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    color: rgb(215, 0, 0);
    font-family: 'Poppins', sans-serif;
}

.smartHomeFr {
    background-image: url("../image/SmartHomeFr2.gif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 40px;
    width: 80%;

}

.headerDiv3 {
    flex: 1 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
}

.headerDiv3 p {
    margin: 0;
}

#p1 {
    font-size: 18px;
    font-weight: bold;
    color: #08a9b4;
}

#p2 {
    font-size: 12px;
    color: #969696;
}

.headerDiv4 {
    flex: 0 0 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
.fa-f-n {
    color: #3c5a99;
}
.fa-i-n {
    background-image: linear-gradient(to right, #ff00cc, #3333ff);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
}

.headerDiv4>a>i {
    padding: 0px 5px;
    font-size: 25px;
}

.sandwich {
    display: none;
}

.headerDiv5 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    border-top: 3px solid #eeeeee;
    border-top-style: dotted;
}

.headerDiv5>ul>li {
    list-style: none;
    display: inline-block;
    padding: 3px 20px;
}

.headerDiv5>ul>li>a {
    text-decoration: none;
    color: #2a2a2a;
}

.headerDiv5>ul>li>ul {
    position: absolute;
    margin-top: 3px;
    background-color: #f7f7f7;
    padding-right: 10px;
    transform: rotateX(90deg);
    transform-origin: top;
    transition: 0.5s;
}

.headerDiv5>ul>li>ul>li {
    list-style: none;
    padding: 12px 17px 12px 14px;
    font-family: 'Quicksand', sans-serif;
    border-bottom: 1px solid #e2e2e2;
    transition: 0.5s;
}

.headerDiv5>ul>li>ul>li>a {
    text-decoration: none;
    color: rgb(92, 91, 91);
}

.headerDiv5>ul>li:hover>ul {
    transform: rotateX(0);
}

.headerDiv5>ul>li>ul>li:hover {
    background-color: rgb(255, 255, 255);
    transform: translateX(10px);
}

/*
|-------------------------------headerMedia----------------------------|
*/
@media screen and (min-width:769px) and (max-width: 1024px) {
        .merryChristmas_1>div>h3{
    font-size: 15px;
    color: blue;
    }
    .mes>p {
        font-size: 13px;
        padding: 0px 50px;
    }
    .mes>p {
        font-size: 13px;
        padding: 2px 50px;
    }

    .headerDiv2 {
        flex: 1 0 320px;
        padding: 0px 10px;
    }

    .smartHomeFr {
        width: 100%;
        background-size: 130%;
        height: 100%;
    }

    #p1 {
        font-size: 1.7vw;
    }

    #p2 {
        font-size: 1.6vw;
    }

    .headerDiv5>ul>li {
        padding: 3px 15px;
    }
}

@media screen and (min-width:481px) and (max-width: 768px) {
        .merryChristmas_1>div>h3{
    font-size: 18px;
    }
    .mes>p {
        font-size: 10px;
        padding: 0px 50px;
    }

    .headerDiv1 {
        flex: 1 1 auto;
        padding-bottom: 0;
    }

    .headerDiv1>a>img {
        width: 140px;
    }

    .headerDiv2 {
        flex: 1 1 481px;
        border: none;
        padding: 0px 10px;
        height: 60px;
    }

    .smartHomeFr {
        width: 100%;
        background-size: 75%;
        height: 100%;
    }

    .headerDiv3 {
        border-top: 1px solid #eeeeee;

        flex-direction: row;
    }

    .headerDiv3 .p-left {
        order: 2;
    }

    .headerDiv3 .p-right {
        order: 1;
    }

    .headerDiv4 {
        border-top: 1px solid #eeeeee;

    }

    #p1,
    #p2 {
        font-size: 2.2vw;
    }

    #p1 {
        margin-left: 1vw;
    }

    #p2 {
        width: 23vw;
        margin-left: 14vw;
    }

    .fa-f-n,
    .fa-i-n {

        font-size: 4vw;
    }

    .headerDiv5>ul>li {
        padding: 3px 0.9vw;
        font-size: 2.1vw;
    }
}

@media screen and (min-width:300px) and (max-width: 480px) {
        .merryChristmas_1>div>h3{
    font-size: 15px;
    }
    .mes>p {
        font-size: 9px;
        padding: 0px 10px;
    }

    .headerDiv1 {
        padding: 5px 0 0px 0;
        flex: 1 0 auto;
    }

    .headerDiv1>a>img {
        width: 140px;
        position: relative;
        z-index: 999999999999;
    }

    .headerDiv2 {
        height: 80px;
    }

    .smartHomeFr {
        background-size: 110%;
        height: 100%;
        padding: 0;
        width: 100%;
    }

    .sandwich {
        display: inline-block;
        position: absolute;
        top: 0px;
        text-align: right;
        width: 100%;
        padding: 12px 10px 10px 0;
        font-size: 23px;
    }

    .sandwich>i {
        padding-right: 15px;
    }

    .headerDiv2 {
        padding: 3px 5px;
        font-size: 11px;
        border-bottom: 3px solid #eeeeee;
        border-bottom-style: dotted;
    }

    .headerDiv3 {
        flex-direction: row;
        height: 35px;
    }

    .headerDiv3 .p-left {
        order: 2;
    }

    .headerDiv3 .p-right {
        order: 1;
    }

    #p1 {
        font-size: 12px;
        padding-right: 0;
    }

    #p2 {
        font-size: 12px;
        padding: 0;
        padding-right: 5px;
    }

    .headerDiv4 {
        padding: 0;
        height: 35px;
    }

    .headerDiv4>a>i {
        font-size: 25px;
    }

    .fa-f-n,
    .fa-i-n {
        font-size: 12px;
    }

    .headerDiv5 {
        display: none;
    }

    .headerDiv2 {
        margin: 0;
    }

    header>.container-header>nav {
        width: 30%;
    }

    .sandwich-menu {
        width: 310px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 57px;
        text-align: center;
        font-size: 17px;
        padding: 0 20px 0 20px;
        background-color: white;
    }

    .sandwich-menu>ul {
        border-top: 1px solid rgb(216, 214, 214);
    }

    .sandwich-menu>ul>li {
        list-style: none;
        padding: 7px;
        border-bottom: 1px solid rgb(216, 214, 214);
        position: relative;
    }

    .sandwich-menu>ul>li>a {
        text-decoration: none;
        color: #2a2a2a;
    }

    .sandwich-menu>ul>li>ul {
        padding-top: 10px;
    }

    .sandwich-menu>ul>li>ul>li {
        list-style: none;
        padding: 10px 0;
    }

    .sandwich-menu>ul>li>ul>li>a {
        text-decoration: none;
        font-family: 'Quicksand', sans-serif;
        color: #444444;
    }

    .sandwich-menu>ul>li:hover>a {
        color: rgb(168, 168, 168);
    }

    .sandwich-menu>ul>li:hover>i {
        color: rgb(168, 168, 168);
    }

    .sandwich-menu>ul>li>i {
        color: #444444;
        text-align: end;
        position: absolute;
        right: 0;
        top: 13px
    }

    .sandwich-menu {
        display: none;
        /* Начальное скрытие меню */
    }

    .sandwich-menu.open {
        display: block;
        /* Показываем меню, если есть класс .open */
    }

    .ul1 {
        display: none;
        /* Начальное скрытие подменю */
    }

    .ul1.open {
        display: block;
        /* Показываем подменю ul1, если есть класс .open */
    }
}

/*
========================================================================
|                                   main                               |
========================================================================
*/
.main1 {
    width: 100%;
    margin: 20px 9px;
}

.main1Div2,
.main1Div3,
.main1Div4,
.main1Div5 {
    background-color: gray;
    background-image: radial-gradient(circle, #20b2d6, #2a8caf, #2b6888, #254660, #192839);
    padding: 10px;
}

.main1Div1 {
    background-color: gray;
    background: url('../image/left-banner-image.jpg')50% 0/cover no-repeat;
    border-radius: 8px 0 0 8px;
}

.main1Div3 {
    border-radius: 0 8px 0 0;
}

.main1Div5 {
    border-radius: 0 0 8px 0;
}

.main1 {
    margin: 10px;
    width: 100%;
    display: grid;
    gap: 10px 10px;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;

    grid-template-areas: 'bla brtl brtr'
        'bla brbr brbl';
}

.bla {
    grid-area: bla;
}

.brtl {
    grid-area: brtl;
}

.brtr {
    grid-area: brtr;
}

.brbl {
    grid-area: brbl;
}

.brbr {
    grid-area: brbr;
}



/*
|-------------------------------main1Media----------------------------|
*/
@media screen and (min-width:769px) and (max-width: 1024px) {
    .main1 {
        margin: 10px;
        gap: 10px 10px;
        grid-template-columns: 1.3fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

@media screen and (min-width:481px) and (max-width:768px) {
    .main1 {
        margin: 7px;
        height: 900px;
        gap: 7px 7px;
        grid-template-columns: 1.4fr 1.4fr;
        grid-template-rows: 360px 1fr 1fr;
        grid-template-areas: 'bla  bla'
            'brtl brtr'
            'brbr brbl';
    }

    .main1Div1 {
        border-radius: 8px 8px 0 0;
    }

    .main1Div3 {
        border-radius: 0 0 0 0;
    }

    .main1Div4 {
        border-radius: 0 0 0 8px;
    }

    .main1Div5 {
        border-radius: 0 0 8px 0;
        
    }
    #mainPhov1, #mainPhov2, #mainPhov3{
        font-size: 85%;
    }
    #mainPhov4{
        font-size: 95%;
    }
}

@media screen and (min-width:300px) and (max-width:480px) {

    /* .main1 {
        margin: 7px;
        height: 1500px;
        gap: 7px 7px;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: 'bla'
            'brtl'
            'brtr'
            'brbr'
            'brbl';
    }

    .main1Div1,
    .main1Div2,
    .main1Div3,
    .main1Div4,
    .main1Div5 {
        border-radius: 8px 8px 8px 8px;
    } */
    .main1 {
        margin: 7px;
        /* height: 900px; */
        gap: 7px 7px;
        grid-template-columns: 1.4fr 1.4fr;
        grid-template-rows: 360px 1fr 1fr;
        grid-template-areas: 'bla  bla'
            'brtl brtr'
            'brbr brbl';
    }

    .allTexBoxComp img {
        width: 110px;
    }

    #fs1,
    #fs2,
    #fs3,
    #fs4 {
        font-size: 10px;
    }

    .allTexBoxComp {
        position: relative;
        height: 200px;
    }

    .main1Div2>.hov-cont {
        position: absolute;
        z-index: 10;
        /* top: -30%; */
        margin: 0;
    }

    .main1Div3>.hov-cont {
        position: absolute;
        z-index: 10;
        /* top: -45%; */
        margin: 0;
    }

    .main1Div4>.hov-cont {
        position: absolute;
        z-index: 10;
        /* bottom: -60%; */
        margin: 0;
    }

    #mainPhov1,
    #mainPhov2,
    #mainPhov3,
    #mainPhov4 {

        font-size: 60%;

        margin-bottom: 15px;
    }

    #mainAhov1,
    #mainAhov2,
    #mainAhov3,
    #mainAhov4 {
        font-size: 10px;
        padding: 5px 8px;

    }

    .main1Div1 {
        border-radius: 8px 8px 0 0;
    }

    .main1Div3 {
        border-radius: 0 0 0 0;
    }

    .main1Div4 {
        border-radius: 0 0 0 8px;
    }

    .main1Div5 {
        border-radius: 0 0 8px 0;
    }


}

@media screen and (max-width:299px) {
    body {
        opacity: 0;
        overflow: hidden;
        border: 1px solid blue;
        background-image: url("../image/eror.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 200px;
    }
}

/*
|-------------------------------main1Box----------------------------|
*/


.br-cont-l,
.br-cont-s {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: rgb(255, 255, 255);
    font-family: 'Quicksand', sans-serif;
    padding: 0 15%;
    text-shadow: 1px 1px 1px rgb(0, 48, 51), 0px 0px 1em rgb(0, 2, 2), -0.5px 0.5px 0.01em rgb(0, 65, 54);
}

.br-cont-s {
    text-align: center;
    padding: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.br-cont-l h3 {
    font-size: 300%;
    position: relative;
    top: 30%;
    transform: translateY(-50%);
}

.allTexBoxComp {
    font-size: 13px;
    position: relative;
    top: 0;
}

.br-cont-s>h3 {
    font-size: 18px;
    padding-top: 5%;
}

.br-b1 {
    text-decoration: none;
    color: white;
    font-family: 'Quicksand', sans-serif;
    border: 1px solid white;
    padding: 3% 4%;
    font-size: 15px;
    transition: 0.5s;
    position: relative;
    top: 30%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.256);
}

.br-b1:hover {
    background-color: white;
    color: black;
    text-shadow: 0px 0px 0px rgb(255, 255, 255), 0 0 1em rgb(0, 0, 0), 0 0 0.0em rgb(0, 0, 0);
}

.bndlLogo {
    width: 150px;
    position: relative;
    top: 0;
}

/*
|-------------------------------main1BoxMedia----------------------------|
*/
@media screen and (min-width:769px) and (max-width: 1024px) {
    .br-cont-l h3 {
        font-size: 200%;
    }

    .br-cont-s>h3 {
        font-size: 15px;
    }
}

@media screen and (min-width:481px) and (max-width:768px) {
    .br-cont-l h3 {
        font-size: 240%;
    }
}

@media screen and (min-width:300px) and (max-width:480px) {
    .br-cont-l h3 {
        font-size: 190%;
    }

    .bndlLogo {
        width: 200px;
    }
}

/*
========================================================================
|                               hov-text                               |
========================================================================
*/

.br {
    position: relative;
}

.hov-cont {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3%;
    text-align: center;
    opacity: 0;
    transition: 0.5s;
    padding: 0 8px 0 8px;
}

.hov-text {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Quicksand', sans-serif;
    color: white;
    transition: 1s;
}

.hov-text>h3 {
    font-size: 200%;
}

.hov-text>p {
    font-size: 10.5px;
    margin: 0px 0 10px 0;
    line-height: 1.3;
}

.br-b2 {
    font-size: 9px;
}

.hov-cont:hover {
    background-color: #2a2a2acb;
    opacity: 1;
}

/*
|-------------------------------hovTextMedia----------------------------|
*/

@media screen and (min-width:1025px) and (max-width:1200px) {
    .hov-cont {
        margin: 0;
        padding: 0 4px 0 4px;
    }

    .hov-text>p {
        font-size: 11px;
        margin: 0px 0 7px 0;
    }
}

@media screen and (min-width:769px) and (max-width:1024px) {
    .hov-cont {
        margin: 0;
        padding: 0 4px 0 4px;
    }

    .hov-text>p {
        font-size: 10px;
        margin: 0px 0 7px 0;
    }
}

@media screen and (min-width:481px) and (max-width:768px) {
    .hov-cont {
        padding: 0 10px 0 10px;
    }

    .hov-text>p {
        font-size: 12px;
        margin: 0px 0 20px 0;
    }

    .br-b2 {
        font-size: 12px;
    }
}

@media screen and (min-width:320px) and (max-width:480px) {
    .hov-cont {
        /* margin: 0; */
        padding: 0 10px 0 10px;
    }

    .hov-text>p {
        font-size: 14px;
        margin: 0px 0 20px 0;
    }

    .br-b2 {
        font-size: 12px;
    }
}

/*
========================================================================
|                                Packe                                 |
========================================================================
*/
.package {
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    width: 100%;
    margin: 40px 10px;
    text-align: center;
    /* border: 1px solid #004f52; */
    border-radius: 10px;
    padding: 15px 10px 15px 10px;
    margin-bottom: 0;

}
.package>h2 {
    font-family: 'Quicksand', sans-serif;
    font-size: 28px;
    /* text-align: end; */
    color: #004f52;
    line-height: 1.5em;
}

/* .package {
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    width: 100%;
    margin: 10px;
    display: grid;
    grid-template-columns: 0.9fr 1fr 1fr;
    grid-template-areas: 'pack1 pack2 pack3';
    border: 1px solid #004f52;
    border-radius: 10px;
    padding: 15px 10px 15px 10px;
    margin-bottom: 0;

}

.package1 {
    grid-area: pack1;
}

.package2 {
    grid-area: pack2;
}

.package3 {
    grid-area: pack3;
}

.package1 {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    border-right: 1px solid rgb(201, 201, 201);
    padding: 10px 30px 10px 30px;
}

.package1>h2 {
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    text-align: end;
    color: #004f52;
    line-height: 1.5em;
}

.package2 {
    display: flex;
    justify-content: center;
    border-right: 1px solid rgb(201, 201, 201);
    padding: 15px 20px;
}

.flex-container>p {
    height: 25px;
}

.packNum {
    color: #2b6888;
    font-weight: 600;
}

.packName {
    color: #004f52;
}

.packPrice {
    text-align: end;
    color: rgb(178, 3, 3);
}

.flex-container {
    width: 120px;
    flex-grow: 0;
}

.package3 {
    display: flex;
    justify-content: center;
    align-items: start;
    font-size: 13px;
    font-style: italic;
    color: #017a83;
    line-height: 1.7em;
    padding: 5px 25px 5px 25px;
    align-items: center;

}

.package3>p>span {
    color: rgb(215, 0, 0);
    font-size: 20px;
} */

/*
|-------------------------------PackeMedia----------------------------|
*/


@media screen and (min-width:769px) and (max-width: 1024px) {
    .package>h2 {
        font-family: 'Quicksand', sans-serif;
        font-size: 22px;
    }
}

@media screen and (min-width:481px) and (max-width:768px) {
    .package {
        margin: 10px 10px;    
    }
    .package>h2 {
        font-family: 'Quicksand', sans-serif;
        font-size: 22px;
    }

}

@media screen and (min-width:300px) and (max-width:480px) {
    .package {
        margin: 0px 5x;    
    }
    .package>h2 {
        font-family: 'Quicksand', sans-serif;
        font-size: 17px;
    }

}


/*
========================================================================
|                                Banner                                |
========================================================================
*/

.Collage-Smart-Homes {
    background-image: url("../image/SmartHomeFr2.gif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100px;
}

/*
========================================================================
|                                SmartTable                            |
========================================================================
*/
.con {
    border-radius: 8px;
    margin: 0px 10px 0px 10px;
}

.mainHP-st-1 {
    margin-top: 10px;
    margin: 10px 10px;
    border-radius: 8px;
    box-shadow: -2px 2px 8px rgba(0, 160, 160, 0.432);
    overflow: hidden;
    margin-bottom: 15px;
}

.tbl-cl-1 {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
}

thead {
    background-image: radial-gradient(circle, #20b2d6, #2a8caf, #2b6888, #254660, #192839);
}

th {
    color: white;
}

.lb {
    background-color: #eaf7f8;
}

th,
td {
    padding: 8px;
}

.poss {
    font-weight: bold;
    padding-left: 30px;
}

.desc {
    border-right: 1px solid rgb(230, 230, 230);
}

.details-cell,
.details-cellMob {
    padding: 15px 30px 15px 30px;
    font-size: 12px;
    border-collapse: collapse;
    color: rgb(0, 88, 160);
    text-align: left;
}

.cm {
    font-size: 22px;
    color: #2b6888;
}

table td:nth-last-child(-n+3) {
    text-align: center;
}

#details-cell-st {
    color: #648496;
    text-align: start;
    font-size: 11px;
}

.inf {
    font-size: 18px;
    color: #0000ff;
}

.details-rowMob {
    display: none;
}

.active {
    display: table-row;
}

.tbl-cl-2 {
    border-collapse: collapse;
    width: 100%;
    font-family: 'Poppins', sans-serif;
}

.description-cell>i {
    padding: 0 10px 0 10px;
    color: rgb(1, 98, 143);
    font-size: 20px;
}

#details-cell-st {
    font-size: 12px;
}
.memo_1{
    padding: 10px 10px;
    background-color: #3dd1f7;
    color: white;
    text-align: center;
    font-size: 15px;
}
/*
|-------------------------------MediaSmartTable----------------------------|
*/
@media screen and (min-width:1025px) {
    .tbl-cl-2 {
        display: none;
    }

}

@media screen and (min-width:769px) and (max-width: 1024px) {
    .con {
        border-radius: 10px;
    }

    .mainHP-st-1 {
        border-radius: 10px;
    }

    .tbl-cl-2 {
        display: none;
    }

    .tableTitle {
        padding-right: 5%;
    }

    table {
        font-size: 12px;
    }

    th,
    td {
        padding: 5px;
    }

    .cm {
        font-size: 20px;
    }

    .details-cell {
        padding: 5px 20px;
    }

    .description-cell>i {
        padding: 0 7px 0 7px;
        font-size: 20px;
    }
}

@media screen and (min-width:481px) and (max-width:768px) {
    .con {
        border-radius: 8px;
        margin: 0px 7px;
    }

    .mainHP-st-1 {
        border-radius: 8px;
        margin: 8px 8px;
    }

    .tbl-cl-2 {
        display: none;
    }

    .tbl-cl-1 {
        font-size: 11px;
    }

    th,
    td {
        padding: 3px;
    }

    .cm {
        font-size: 15px;
    }

    .details-cell {
        padding: 5px 5px;
        font-size: 10px;

    }

    #first-column {
        width: 1000px;
    }

    .poss {
        font-weight: 600;
    }

    th {
        font-weight: 10;
    }

    .description-cell>i {
        padding: 0 3px 0 3px;
        font-size: 15px;
    }
    .memo_1{
        padding: 10px 10px;
        font-size: 12px;
    }
}

@media screen and (min-width:300px) and (max-width:480px) {
    .con {
        margin: 0px 7px 0px 7px;
    }

    .tbl-cl-1 {
        display: none;
    }

    .mainHP-st-1 {
        border-radius: 8px;
        margin: 8px 8px;
        width: 100%;
    }

    .tbl-cl-2 {
        font-size: 10.5px;
    }

    .th_decs {
        font-size: 12px;
    }

    th,
    td {
        padding: 3px 1px;
    }

    th {
        font-size: 8.5px;
    }

    .cm {
        font-size: 15px;
    }

    .details-cellMob {
        padding: 0px 5px 5px 5px;
        font-size: 9px;

    }

    .details-cellMob>p,
    .details-cellMob>p>i {
        color: #004f52;
        font-weight: bold;
    }

    .rowMob {
        color: #004f52;

    }

    .poss {
        font-weight: 550;
        padding: 5px 10px;
    }

    .poss>i {
        font-size: 15px;
        padding-left: 3px;
        color: gray;
    }

    th {
        font-weight: 10;
    }

    .inf {
        font-size: 9px;
    }

    .description-cell>i {
        padding: 0 3px 0 3px;
        font-size: 12px;
    }

    .details-cellMob>p {
        text-align: center;

    }

    .details-cellMob>p>i {
        text-align: center;
        font-size: 15px;
        padding-left: 5px;
    }

    .poss>p {
        width: 100%;
        text-align: center;
    }

    .poss>p>i {
        text-align: center;
    }
    .memo_1{
        padding: 10px 10px;
        font-size: 13px;
        font-family: 'Poppins', sans-serif;
    }

}



/*
========================================================================
|                                SmartHome                             |
========================================================================
*/
.main2 {
    margin: 10px 0px;
    width: 100%;
    border-left: 2px solid #eeeeee;
    border-right: 2px solid #eeeeee;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    text-align: justify;
    word-wrap: break-word;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;


    grid-template-areas: 'lb rb'
        'bb bb';
}

.leftBlock {
    grid-area: lb;
}

.rightBlock {
    grid-area: rb;
}

.bottomBlock {
    grid-area: bb;
}

.leftBlock {
    padding: 10px 30px;
    padding-top: 20px;
}

#main2-p-4 {
    padding: 20px 0;
}

#main2-p-4-1 {
    padding: 10px 0;
}

#main2-h1-1 {
    color: #08a9b4;
}

#main2-h2-2 {
    color: #838383;
    padding-bottom: 10px;
}

.rightBlock {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
}

.bottomBlock {
    padding: 0px 50px;
    padding-bottom: 20px;
}

.bottomBlock>ul {
    list-style-type: none;
}

.bottomBlock>ul>li {
    padding: 10px 0px;
}

.main2-bld {
    color: #08a9b4;
    font-weight: bold;
}

/*
|-------------------------------SmartHomeMedia----------------------------|
*/
@media screen and (min-width:769px) and (max-width: 1024px) {
    .main2 {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;

        grid-template-areas: 'lb'
            'rb'
            'bb';
    }

    #main2-h1-1,
    #main2-h2-2 {
        text-align: center;
    }

    .main2 {
        font-size: 14.5px;
    }
}

@media screen and (min-width:481px) and (max-width:768px) {
    .main2 {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;

        grid-template-areas: 'lb'
            'rb'
            'bb';
    }

    .rightBlock {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        overflow: hidden;

    }

    .rightBlock iframe {
        position: absolute;
        top: 0;
        width: 95%;
        height: 100%;
        object-fit: contain;
    }

    #main2-h1-1,
    #main2-h2-2 {
        text-align: center;
    }

    .main2 {
        font-size: 12px;
    }
}

@media screen and (min-width:300px) and (max-width:480px) {
    .main2 {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;

        grid-template-areas: 'lb'
            'rb'
            'bb';
    }

    .rightBlock {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        overflow: hidden;
    }

    .rightBlock iframe {
        position: absolute;
        top: 0;
        width: 95%;
        height: 100%;
        object-fit: contain;
    }

    .leftBlock,
    .bottomBlock {
        padding: 0 7px;
    }

    #main2-p-4 {
        padding: 0;
        font-size: 12px;
    }

    #main2-p-4-1 {
        font-size: 12px;
        margin-bottom: 7px;
    }

    #main2-h1-1 {
        font-size: 17px;
    }

    #main2-h2-2 {
        font-size: 13px;
    }

    #main2-h1-1,
    #main2-h2-2 {
        text-align: center;
    }

    #main2-p-4-1 {
        padding-bottom: 0;
    }

    #main2-p-10 {
        padding-bottom: 7px;
    }

    .bottomBlock>ul>li {
        font-size: 12px;
    }

    #main2-p-10 {
        font-size: 12px;
    }
}

/*
========================================================================
|                                 AboutUs                              |
========================================================================
*/

.main3 {
    margin: 10px 0;
}

.main3-1 {
    font-family: 'Poppins', sans-serif;
    padding: 30px 100px;
    border-left: 2px solid #eeeeee;
    border-right: 2px solid #eeeeee;
}

.main3-1>p {
    padding: 10px 0;
    line-height: 1.8;
    text-align: justify;
}

.main3-scr {
    background-image: url("../image/smartHomeSystemsScreen.gif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 80px;
}

.main3-1>h1 {
    text-align: center;
    color: #02c8d6;
}

/*
|---------------------------------AboutUs------------------------------|
*/
@media screen and (min-width:769px) and (max-width: 1024px) {
    .main3-1 {
        padding: 30px 50px;
    }

    .main3-1>h1 {
        font-size: 20px;
    }

    .main3-1>p {
        font-size: 14px;
    }
}

@media screen and (min-width:481px) and (max-width: 768px) {
    .main3-1 {
        padding: 10px 20px;
    }

    .main3-1>h1 {
        font-size: 17px;
    }

    .main3-1>p {
        font-size: 12px;
    }
}

@media screen and (min-width:300px) and (max-width: 480px) {
    .main3-1 {
        padding: 10px 10px;
    }

    .main3-1>h1 {
        font-size: 17px;
    }

    .main3-1>p {
        font-size: 11px;
    }

    .con {
        height: 50px;
    }
}

/*
========================================================================
|                                  footer                              |
========================================================================
*/
footer {
    background-image: radial-gradient(circle, #20b2d6, #3491b3, #39718f, #36536a, #2c3846);
    font-family: 'Poppins', sans-serif;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 10px 0px;
    bottom: 0;
    width: 100%;

}

.footerDivLeft {
    float: left;
    width: 50%;
    text-align: right;
    padding-right: 10px;
}

.footerDivLeft>h2 {
    font-size: 11px;

}

.footerDivRigth {
    float: right;
    width: 50%;
    font-size: 11px;
    padding-left: 10px;
    border-left: 1px solid white;
}

.footerDivCen {
    clear: both;
    width: 100%;
    text-align: center;

}

.footerDivCen>a {
    color: white;
    font-size: 18px;
    padding: 0px 5px;
}

.footerDivBotton {
    clear: both;
    width: 100%;
    text-align: center;
    padding: 5px 0px;
}

.footerDivBotton>a {
    text-decoration: none;
    list-style: none;
    color: white;
    font-size: 9px;
    padding: 0px 0px;
    padding-right: 8px;
}

.f-a {
    border-right: 1px solid white;
}

.f-l {
    margin-right: 0px;
    margin-left: 0;
}

/* body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    flex: 1;
} */

/*
  |-------------------------------footerMedia----------------------------|
*/

@media screen and (min-width:300px) and (max-width:480px) {
    .footerDivRigth {
        font-size: 9px;
    }

    #em-l {
        font-size: 9px;
    }

    .footerDivCen {
        font-size: 9px;
    }

    .footerDivBotton>a {
        font-size: 9px;
    }

    .futic {
        font-size: 15px;
    }
}

/*
========================================================================
|                                  bundle                              |
========================================================================
*/
.container{
    /* background-color:#def2f3; */
    width: 100%;
}
.conBnd{
    margin-top: 10px;
    height: 70px;
}
.SmBn{
    margin: 10px;
    padding: 0px 40px;
    width: 100%;
    font-family: 'Quicksand', sans-serif;
    border:1px solid #d8d8d8;
    border-radius: 10px;
    /* background-color: #feffff; */

    /* background-color: #00586e; */
    /* background: url('../image/left-banner-image.jpg')50% 0/cover no-repeat; */
    /* background: rgb(227,251,247); */
/* background: linear-gradient(90deg, rgba(227,251,247,1) 0%, rgba(241,255,252,1) 32%, rgba(241,255,252,1) 67%, rgba(227,251,247,1) 100%); */
    /* background-image: radial-gradient(circle, #20b2d6, #3491b3, #39718f, #36536a, #2c3846); */

    /* border: 1px solid black; */
    /* height: 100%; */
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 0.5fr 0.5fr;
    /* grid-template-rows: 1fr 0.5fr 1fr 1fr; */
    grid-template-areas: 
    'blc1 blc1 blc1 blc1'
    'blc2 blc2 blc6 blc6'
    'blc3 blc4 blc6 blc6'
    'blc5 blc5 blc5 blc5';

}
.block1{
    grid-area: blc1;
    color:black;
    /* border: 1px solid black; */
    text-align: center;
    /* display: flex; */
    /* flex-direction: column;
    align-items: center;
    text-align: center; */
    /* border:1px solid #d8d8d8; */
    
}
.block1 h1 {
    /* margin: 0; */
    color: #00586e;
    font-size: 25px;
  }
  
  .block1 p {
    /* margin: 0; */
    margin-top: 10px;
font-size: 15px;
color: #8f8f8f;

  }
.block2{
    grid-area: blc2;
    background-color: #ffffffe3;
    border-top:1px solid #d8d8d8;
    border-left:1px solid #d8d8d8;
    border-bottom:1px solid #d8d8d8;
    background-color: #f7f7f7;

    
}
.block2 h3{
    margin-top: 10px;
    margin-bottom: 0px;
    padding-bottom: 0;
    /* border:1px solid black; */
}
.block2 p{
    color:#666666;
    line-height: 1.8;
    text-indent: 20px;
    text-align: justify;
    font-size: 15px;
    /* border:1px solid black; */

}
.block3{
    grid-area: blc3;
    background-color: #ffffff;
    /* border-top:1px solid #d8d8d8; */
    border-left:1px solid #d8d8d8;
    border-bottom:1px solid #d8d8d8;
    background-color: #f7f7f7;
    font-size: 76%;
}
.block4{
    grid-area: blc4;
    background-color: #ffffff;
    /* border-top:1px solid #d8d8d8; */
    border-left:1px solid #d8d8d8;
    border-bottom:1px solid #d8d8d8;
    background-color: #f7f7f7;
    font-size: 76%;
}
.block3 i, .block4 i{
    color: #0083a4;
    font-weight: bold;
    font-size: 20px;
    padding-right: 10px;
}
.block3 p, .block4 p{
    padding: 3px;
}
.block5{
    grid-area: blc5;
    color:#858484;
font-size: 14px;
    text-align: center;
    line-height: 1.5;
}
.block5 p{
    margin-top: 20px;
    margin-top: 0;
}
.block5 a{
    color:rgba(0, 109, 211, 0.815);
    /* text-decoration: none; */
    font-weight: 600;
}
.block6{
    grid-area: blc6;
    background-color: #e6e6e6;
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    text-align: center;

    /* border: 1px solid black; */

}
.block6Cont{
    
    /* border: 1px solid black; */
}
.block6 img{
    /* margin-top: 30px; */
    /* border: 1px solid black; */

}
.block6 img{
    width: 180px;
    margin-top: 20px;
}
.block6p1{
    /* margin-bottom: 10px; */
    color: #8f8f8f;
    /* border: 1px solid black; */
    margin-top: 40px;

}

.block6p2{
    color: #027d9b;
    font-size: 35px;
    font-weight: bold;
    padding-left: 20px;
    /* border: 1px solid black; */

}
.block6p2Opt{
    margin-top: 20px;
    color: #027d9b;
    font-size: 25px;
    font-weight: bold;
    padding-left: 20px;


}
.block6p2 span{
    font-size: 20px;
    /* border: 1px solid black; */

}

.block6But {
 
    text-decoration: none;
    color: #00586e;
    font-family: 'Quicksand', sans-serif;
    border: 1px solid #00586e;

    padding: 3% 4%;
    font-size: 15px;
    transition: 0.5s;
    /* margin-top: 80px; */
    
    position: relative;
    top: 8%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.256);
    /* border: 1px solid black; */

    
}

.block6p3{
    margin-top: 80px;
    /* border: 1px solid black; */

    font-size: 12px;
}

.block6But:hover {
    background-color: white;
    color: black;
    text-shadow: 0px 0px 0px rgb(255, 255, 255), 0 0 1em rgb(0, 0, 0), 0 0 0.0em rgb(0, 0, 0);
}
.block1, .block2, .block3, .block4, .block5, .block6{
    /* border: 1px solid black; */
    padding: 20px;
    /* width: 100px; */
} 

/*
  |-------------------------------bundleMedia----------------------------|
*/
@media screen and (min-width:769px) and (max-width: 1024px){
    .conBnd{
        margin-top: 10px;
        height: 6   0px;
    }
    .SmBn{
        padding: 0px 30px;
        grid-template-columns: 0.8fr 0.5fr 0.5fr 0.9fr;
        /* grid-template-rows: 1fr 0.5fr 1fr 1fr; */
        grid-template-areas: 
        'blc1 blc1 blc1 blc1'
        'blc2 blc2 blc2  blc6'
        'blc3 blc3 blc4 blc4'
        'blc5 blc5 blc5 blc5';
    }
    .block1 h1 {
        font-size: 20px;
    }
    .block1 p {
        margin-top: 10px;
    font-size: 13.8px;
    }
    .block2 p{
        color:#666666;
        line-height: 1.8;
        text-indent: 20px;
        font-size: 14px;
        
    }
    .block6 img{
        width: 110px;
        margin-top: 0px;
    }
    .block6p1{
        margin-top: 10px;
        font-size: 12px;
    }
    .block6p2{
        font-size: 23px;
        font-weight: bold;
        padding-left: 10px;
        margin-top: 5px;
    }
    .block6p2Opt{
        margin-top: 8px;
        font-size: 18px;
    }
    .block6But {
        padding: 2% 9%;
        font-size: 12px;
        transition: 0.5s;
        top: 5%;  
    }

    .block6p3{
        margin-top: 25px;    
        font-size: 9px;
    }
    .block5{
    font-size: 11px;
    }
    .block5 a{
        font-weight: bold;
    }
}
@media screen and (min-width:481px) and (max-width:768px){
    .conBnd{
        /* margin-top: 10px; */
        height: 50px;
    }
    .SmBn{
        border-radius: 8px;
        margin: 10px 8px; 
        padding: 0px 15px;
        grid-template-columns: 1fr;
        /* grid-template-rows: 1fr 0.5fr 1fr 1fr; */
        grid-template-areas: 
        'blc1'
        'blc2'
        'blc3'
        'blc4'
        'blc6'
        'blc5';
    }
    .block1 h1 {
        font-size: 19px;
    }
    .block1 p {
        margin-top: 10px;
        font-size: 13px;

    }
    .block2{
        padding-bottom: 0px;
        border:0;

    }
    .block2 p{
        font-size: 12px;
        line-height: 1.5;
    }
    .block2 h3{
        margin-top: 30px;
        margin-bottom: 0px;
        padding-bottom: 0;
        font-size: 16px;
        text-align: center;
    }
    .block3{
        padding-left: 20%;
        padding-bottom: 0;
        border:0;
    }
    .block4{
        padding-left: 20%;
        padding-top: 0;
        border:0;
    }




    .block6 img{
        width: 150px;
        margin-top: 0px;
    }
    .block6p1{
        margin-top: 15px;
        font-size: 12px;
    }
    .block6p2{
        font-size: 23px;
        font-weight: bold;
        padding-left: 10px;
        margin-top: 10px;
    }

    .block6But {
        margin-top: 10px;
        padding: 1.5% 7%;
        font-size: 12px;
        transition: 0.5s;
        margin-bottom: 15px;
    }
    .block6p3{
        margin-top: 30px;    
        font-size: 10px;
    }
    .block6p3{
        font-size: 11.4px;
        margin-top: 40px;
    }
    .block5{
        font-size: 12.5px;
    }
}
@media screen and (min-width:300px) and (max-width:480px){
    .conBnd{
        /* margin-top: 10px; */
        height: 35px;
        margin: 5px 5px 0px 5px; 

    }
    .SmBn{
        border-radius: 8px;
        margin: 5px 5px 8px 5px; 
        padding: 0px 0px;
        grid-template-columns: 1fr;
        /* grid-template-rows: 1fr 0.5fr 1fr 1fr; */
        grid-template-areas: 
        'blc1'
        'blc2'
        'blc3'
        'blc4'
        'blc6'
        'blc5';
    }
    .block1 h1 {
        
        font-size: 17px;
    }
    .block1 p {
        margin-top: 8px;
        font-size: 12px;

    }
    .block2{
        border:0;
        padding: 10px;
        padding-bottom: 0px;

    }
    .block2 p{
        font-size: 11px;
        line-height: 1.4;
    }
    .block2 h3{
        margin-top: 20px;
        margin-bottom: 0px;
        padding-bottom: 0;
        font-size: 14px;
        text-align: center;
    }
    .block3, .block4{
        padding-left: 8.5%;
        padding-bottom: 0;
        border:0;
        font-size: 10.5px;
    }
    .block3 i, .block4 i{
        font-size: 13px;
    }
    .block4{
        padding-top: 0;
        border:0;
        padding-bottom: 20px;
    }



    .block6{
        /* margin-top: 0px; */
        /* position:relative; */
    }
    .block6 img{
        width: 120px;
        width: 50%;

        margin-top: 0px;
    }
    .block6p1{
        margin-top: 10px;
        font-size: 12px;
    }
    .block6p2{
        font-size: 23px;
        font-weight: bold;
        padding-left: 15px;
        margin-top: 5px;
        margin-bottom: 15px;
    }
    .block6p2 span{
        font-size: 15px;
    }
    .block6But {
        margin-top: 10px;
        padding: 2% 7%;
        font-size: 12px;
        transition: 0.5s;
        /* position:absolute; */
        /* top: 15%;   */
    }
    .block6p3{
        /* margin-top: 200px;    
        font-size: 10px;
        color:red; */
    }
    .block6p3{
        font-size: 11.4px;
        margin-top: 40px;
    }
    .block5{
        font-size: 11px;
        padding: 8px;

    }
}

/*
========================================================================
|                                  Video                              |
========================================================================
*/
.video-container {
    /* border:2px solid red; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    /* Создаем автоматические колонки, которые автоматически перераспределяются */
    grid-gap: 20px;
    padding: 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
}

.video-container {
    width: 100%;
    /* height: 300px; */
    /* Устанавливаем ширину родительского контейнера (по желанию) */
    max-width: 1201px;
    /* Максимальная ширина контейнера (по желанию) */
    margin: 0 auto;
    /* Центрируем контейнер на странице (по желанию) */
}

.video {
    border: 0.1px solid rgb(224, 224, 224);
    height: 100%;
    padding: 5px;
    background-color: rgb(248, 248, 248);
}

.video>h3 {
    padding: 5px;
    font-size: 13px;
    /* height: 70px; */
}


/*
========================================================================
|                                 contact                              |
========================================================================
*/
.contact {
    margin: 5px 10px 15px 10px;
    display: grid;
    gap: 10px 10px;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    font-family: 'Poppins', sans-serif;

    grid-template-areas: 'c1 c2 c3'
        'c1 c4 c5';

}




.contact1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    grid-area: c1;
    background: url('../image/sx.jpg')50% 0/cover no-repeat;
    overflow: hidden;
    background-position: 50% 50%;
    border-radius: 10px 0 0 10px;
}

.contactText {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 20px;
    background-color: #2b333286;
    padding: 10px 20px;
    border-radius: 5px;
    margin: 30px 30px
}

.contact2 {
    grid-area: c2;
    background-color: #00586e;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}


.cont2TextBox,
.cont2IconBox {
    padding: 20px;
    text-align: center;
}

.cont2TextBox>h3 {
    padding-bottom: 15px;
    color: rgb(206, 205, 205)
}

.contFb,
.contInst,
.contYout {
    color: white;
    font-size: 28px;
    padding: 0 5px;
}

.contact3 {
    border-radius: 0 10px 0 0;
}

.contact3,
.contact4,
.contact5 {

    grid-area: c3;
    background-color: #00586e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cont3IconBox,
.cont4IconBox,
.cont5IconBox {
    border: 3px solid rgb(206, 205, 205);
    /* padding: 20px; */
    height: 80px;
    width: 80px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.cont3TextBox,
.cont4TextBox {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cont3TextBox>h3,
.cont4TextBox>h3 {
    color: rgb(206, 205, 205);
    margin-bottom: 10px;
    text-align: center;


}

.cont3TextBox>p,
.cont4TextBox>a {
    color: white;
    text-align: center;
}

.conLoc,
.conEmail,
.conTel {
    color: white;
    font-size: 30px;
}

.contact4 {

    grid-area: c4;
    background-color: #00586e;


}

.contact5 {
    grid-area: c5;
    background-color: #00586e;
    border-radius: 0 0 10px 0;
}

/*
  |-------------------------------ContactMedia----------------------------|
*/
@media screen and (min-width:769px) and (max-width: 1024px) {

    .contact1 {}

    .contactText {
        font-size: 15px;
    }

    .contactText {
        padding: 10px 10px;
        margin: 15px 15px
    }

    .contact2 {}

    .cont2TextBox>h3 {}

    .cont2TextBox>h3 {
        font-size: 15px;
    }

    .cont2TextBox>p,
    .cont3TextBox>p,
    .cont4TextBox>a {
        font-size: 12px;
    }

    .cont2TextBox,
    .cont2IconBox {
        padding: 20px;
        text-align: center;
    }

    .cont2TextBox>h3,
    .cont3TextBox>h3,
    .cont4TextBox>h3,
    .cont5TextBox>h3 {
        padding-bottom: 15px;
        font-size: 13px;
    }

    .contFb,
    .contInst,
    .contYout {
        font-size: 23px;
        padding: 0 5px;
    }

    .cont3IconBox,
    .cont4IconBox,
    .cont5IconBox {
        height: 50px;
        width: 50px;
    }

    .conLoc,
    .conEmail,
    .conTel {
        font-size: 20px;
    }
}

@media screen and (min-width:481px) and (max-width:768px) {
    .contact {
        margin-bottom: 10px;
        margin-right: 7px;
        margin-left: 7px;

        /* border: 1px solid rgb(255, 0, 0); */
        gap: 7px 7px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 2.1fr 1fr 1fr;
        grid-template-areas: 'c1 c1'
            'c2 c3'
            'c4 c5';
    }

    .contact1 {
        border-radius: 15px 15px 0 0;
        background: url('../image/sx.jpg')-50% 0/cover no-repeat;
        position: relative;
    }

    .contactText {
        position: absolute;
        top: 2%;
        right: 1.5%;
        width: 38%;
        margin: 0;
        padding: 1%;
        border-radius: 25px;
        background-color: #2b2d3321;
        padding: 5px 115px;

    }

    .contactText>p {
        font-size: 70%;
        color: black;
        color: #01727a;
        line-height: 130%;
        /* font-style: italic; */
    }

    .contact2,
    .contact3,
    .contact4,
    .contact5 {
        border-radius: 0 0 0 0;
    }

    .contact3 {
        border-radius: 0 0 0 0;
    }

    .contact4 {
        border-radius: 0 0 0 0;
    }

    .contactText {
        padding: 10px 10px;
        margin: 15px 15px font-size: 13px;
    }

    .cont2TextBox>h3,
    .cont3TextBox>h3,
    .cont4TextBox>h3,
    .cont5TextBox>h3 {
        padding-bottom: 10px;
        font-size: 14px;
    }

    .cont2TextBox>p,
    .cont3TextBox>p,
    .cont4TextBox>a {
        font-size: 11.5px;
    }

    .contFb,
    .contInst,
    .contYout {
        font-size: 23px;
        padding: 0 5px;
    }

    .cont3IconBox,
    .cont4IconBox,
    .cont5IconBox {
        height: 50px;
        width: 50px;
        margin-bottom: 10px;
    }

    .conLoc,
    .conEmail,
    .conTel {
        font-size: 20px;
    }
}

/* @media screen and (min-width:300px) and (max-width:480px) {
    .contact{
        margin-bottom: 10px;
        margin: 7px;
        gap: 10px 10px;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 0.8fr 0.8fr 0.8fr 0.8fr;
        grid-template-areas: 'c1'
                             'c2'
                             'c3'
                             'c4'
                             'c5';
    }

    .contact1{
        border-radius: 15px 15px 0 0;
        background: url('../image/sx.jpg')-50% 0/cover no-repeat;
        position: relative;
        height: 300px;
    }
    .contactText{
        position: absolute;
        top:2%;
        right: 1.5%;
        width: 38%;
        margin: 0;
        padding: 3px;
        border-radius:10px;
        background-color: #2b2d3321;
        padding: 5px 115px;

    }
    .contactText>p{
        font-size: 47%;
        color:black;
        color: #01727a;
        line-height: 140%;
    }
    .contact2,
    .contact3,
    .contact4,
    .contact5{
        border-radius: 0 0 0 0;
    }
    .contact3{
        border-radius: 0 0 0 0;
    }
    .contact4{
        border-radius: 0 0 0 0;
    }
    .contactText{
        padding: 10px 10px;
        margin: 15px 15px
        font-size: 13px;
    }
    .cont2TextBox>h3, .cont3TextBox>h3, .cont4TextBox>h3, .cont5TextBox>h3 {
        padding-bottom: 10px;
        font-size: 18px;
    }
    .cont2TextBox>p,
    .cont3TextBox>p,
    .cont4TextBox>a {
        font-size: 13px;
    }
    .contFb,
    .contInst,
    .contYout {
        font-size: 30px;
        padding: 0 10px;
    }
    .cont3IconBox,
    .cont4IconBox,
    .cont5IconBox{
        height: 55px;
        width: 55px;
        margin-bottom: 20px;
    }
    .conLoc, .conEmail, .conTel{
        font-size: 25px;
    }
} */

@media screen and (min-width:300px) and (max-width:480px) {
    .contact {
        margin-bottom: 7px;
        margin-right: 7px;
        margin-left: 7px;
        height: 700px;
        gap: 5px 5px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 0.6fr 0.6fr;
        grid-template-areas: 'c1 c1'
            'c2 c3'
            'c4 c5';
    }

    .contact1 {
        border-radius: 10px 10px 0 0;
        background: url('../image/sx.jpg')50% 0/cover no-repeat;
        position: relative;
    }

    .contactText {
        position: absolute;
        top: 2%;
        right: 1.5%;
        width: 38%;
        margin: 0;
        padding: 1%;
        border-radius: 25px;
        background-color: #2b2d3321;
        padding: 5px 115px;

    }

    .cont2IconBox {
        margin-top: 10px;
        height: 20px;
        padding: 0;
    }

    .contactText>p {
        font-size: 40%;
        color: black;
        color: #01727a;
        line-height: 130%;


    }

    .contact2,
    .contact3,
    .contact4,
    .contact5 {
        border-radius: 0 0 0 0;
    }

    .cont2TextBox {
        margin: 0;
        padding: 0;
    }

    .contact3 {
        border-radius: 0 0 0 0;
    }

    .contact4 {
        border-radius: 0 0 0 0;
    }

    .contactText {
        padding: 10px 10px;
        margin: 15px 15px font-size: 13px;
    }

    .cont2TextBox>h3,
    .cont3TextBox>h3,
    .cont4TextBox>h3,
    .cont5TextBox>h3 {
        padding-bottom: 5px;
        font-size: 11px;
    }

    .cont2TextBox>p,
    .cont3TextBox>p,
    .cont4TextBox>a {
        font-size: 10px;
        line-height: 1.2;
    }

    .cont2TextBox p {
        font-size: 9px;
        padding: 0 5px;
    }

    .contFb,
    .contInst,
    .contYout {
        font-size: 20px;
        padding: 0 5px;
    }

    .cont3IconBox,
    .cont4IconBox,
    .cont5IconBox {
        height: 40px;
        width: 40px;
        margin-bottom: 10px;
    }

    .conLoc,
    .conEmail,
    .conTel {
        font-size: 17px;
    }
}