/* banner slides */


.v-scroll {
    -webkit-animation: heroscroll 30s linear infinite;
    animation: heroscroll 30s linear infinite;
}

.scroll2 {
    -webkit-animation: heroscroll2 50s linear infinite;
    animation: heroscroll2 50s linear infinite;
}

.scroll3 {
    -webkit-animation: heroscroll2 30s linear infinite;
    animation: heroscroll2 30s linear infinite;
}

.hero-bg_wrap-col .v-scroll,
.hero-bg_wrap-col .scroll3 {
    animation-direction: reverse;
}

.hero-bg_wrap_slide {
    /* aspect-ratio: 16 / 9; */
    border-radius: 5px;
    overflow: hidden;
}

.hero-bg_wrap_slide img{
    max-width: 100%;
}




@-webkit-keyframes scroll {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    to {
        -webkit-transform: translateX(calc(-100% - 5rem));
        transform: translateX(calc(-100% - 5rem))
    }
}

@keyframes scroll {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    to {
        -webkit-transform: translateX(calc(-100% - 5rem));
        transform: translateX(calc(-100% - 5rem))
    }
}

@-webkit-keyframes heroscroll {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    100% {
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }
}

@keyframes heroscroll {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    100% {
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }
}


@-webkit-keyframes heroscroll2 {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    100% {
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }
}

@keyframes heroscroll2 {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    100% {
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }
}

/* end of banner slides */











html, body, div, ul, ol, li, table, tr, td{padding: 0px; margin: 0px; outline: 0px; border: 0px;  word-wrap: break-word !important; box-sizing: border-box;}
h1, h2, h3, h4 {margin: 0px; padding: 0px;}
body{margin: 0px; padding: 0px;}
[contentEditable=true]:empty:not(:focus):before{ content:attr(data-text); color: #AAAAAA; }
ul{ -webkit-margin-before: 0em; -webkit-margin-after: 0em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 00px;}
a{text-decoration: none !important; color: inherit;}
*{font-family: Calibri, sans-serif; text-shadow: none;}
p{text-align: justify; font-size: 17px; line-height: 140%;}
h2, h3{line-height: 140%;}
div{box-sizing: border-box;}

	.round0{-webkit-border-radius:0px !important;-moz-border-radius:0px !important;-ms-border-radius:0px !important;-o-border-radius:0px !important;border-radius:0px !important;}	
	.round5{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;}	
	.round10{-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px;}	
	.round15{-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px;}	
	.round20{-webkit-border-radius:20px;-moz-border-radius:20px;-ms-border-radius:20px;-o-border-radius:20px;border-radius:20px;}	
	.round25{-webkit-border-radius:25px;-moz-border-radius:25px;-ms-border-radius:25px;-o-border-radius:25px;border-radius:25px;}	
	.round20{-webkit-border-radius:30px;-moz-border-radius:30px;-ms-border-radius:30px;-o-border-radius:30px;border-radius:30px;}	
	.round40{-webkit-border-radius:40px;-moz-border-radius:40px;-ms-border-radius:40px;-o-border-radius:40px;border-radius:40px;}	
	.round50{-webkit-border-radius:50px;-moz-border-radius:50px;-ms-border-radius:50px;-o-border-radius:50px;border-radius:50px;}	
	.round60{-webkit-border-radius:60px;-moz-border-radius:60px;-ms-border-radius:60px;-o-border-radius:60px;border-radius:60px;}	
	.round100{-webkit-border-radius:100px;-moz-border-radius:100px;-ms-border-radius:100px;-o-border-radius:100px;border-radius:100px;}	
	.round120{-webkit-border-radius:120px;-moz-border-radius:120px;-ms-border-radius:120px;-o-border-radius:120px;border-radius:120px;}
	
	.row-full{width: 100%;}
	.take-left{float: left;}
	.take-right{float: right;}
	.clearfix{clear: both; height: 0px; margin: 0px; padding: 0px;}
	.inline{display: inline-block;}
	.left{text-align: left;}
	.right{text-align: right;}
	.centertext{text-align: center;}
	.justify{text-align: justify;}
	.tablevt tr td{vertical-align: top; padding-bottom: 15px}	
	.vm{vertical-align: middle;}	
	.vt{vertical-align: top;}
	
	.slow{-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		transition: all 0.5s ease;}
	
	.breadcrumb > li + li:before {content: "/\00a0"; padding: 0 3px; color: #555555;}
	.breadcrumb li{display: inline-block; font-size: 10px; color: #777777;}
	

.poppin{font-family: "Poppins", sans-serif;}
.poiret{font-family: "Poiret One", sans-serif;}
.sister{font-family: "Love Ya Like A Sister", cursive;}
	
	

/* old phone */
@media screen and (max-width: 259px){	.pconly{display: none !important;}	.notlarge{display: block;}	.large{display: none;}	.container, .containerbig{width: 97%; margin: auto;}
	.take-left, .take-right{float: none;}
	.half, .one-third, .one-fourth, .two-third, .three-fourth{width: 99%; margin: 0px; padding: 0px; border: 0px; display: block;}
}


/* responsive and Menu */
/* mobile css */	
@media screen and (min-width: 260px) and (max-width: 900px){
	.take-left{float: none;}
	.take-right{float: none;}

	
}	
/*less than pc*/
@media screen and (min-width: 901px) and (max-width: 5300px){
	
	
	
}
/* menu ends */




	
/* mobile css */	
@media screen and (min-width: 260px) and (max-width: 900px){
	body{width: 100%; overflow-x: hidden;}
	.mobileonly{}
	.notlarge{display: block;}
	.large{display: none;}
	.pconly{display: none !important;}	
	.container{width: 98%; margin: auto;}	
	.row{width: 95%; margin: auto;}
	.half, .one-third, .one-fourth, .two-third, .three-fourth{width: 99%; margin: 0px; padding: 0px; border: 0px; display: block;}
	
	
	/* main_page_contents */

    .main_page_contents{width: calc(100% - 1px); margin-left: auto;}
    .main_page_contents.home{width: calc(100% - 92px); margin-left: auto; margin-top: 100vh;}
    .main_page_contents .hero_section{position: fixed; width: calc(100% - 92px); top: 0; left: 22px;}
    
    
    
    .hero-bg_wrap-cols {
        grid-column-gap: var(--hero-bg-spacing);
        grid-row-gap: var(--hero-bg-spacing);
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        width: 85%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: absolute;
        top: 0;
        bottom: auto;
        left: 100%;
        right: auto;
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
        transform-origin: top;
    }
    
    .hero-bg_wrap-cols:before{
        position: absolute;
        content: '';
        height: 100%;
        width: calc(100% + 100px);
        background: #f5f5f5;
        top: -100px;
        /* left: -20px; */
    }
	
	
	.specialpackage{font-size: 12px;}
	
	.main_page_contents{height: 55vh; overflow: hidden; background-image: url('../images/bg1.jpeg'); background-size: cover; background-position: left center; background-attachment: fixed;}
	.nothomemain{height: 190px;}
	.main_page_contents:after {
		position: absolute;
		content: '';
		background: url(../images/shape.svg) no-repeat;
		width: 100%;
		height: 180px;
		left: 0;
		right: 0;
		bottom: 0;
		transform: scale(-1);
		z-index: 1000;
	}
	.nothomemain:after {
		position: absolute;
		content: '';
		background: url(../images/shape.svg) no-repeat;
		width: 100%;
		height: 60px;
		left: 0;
		right: 0;
		top: 180px;
		transform: scale(-1);
		z-index: 1000;
	}
	
	.first:before {
		position: absolute;
		content: '';
		background: url(../images/shape.svg) no-repeat;
		width: 100%;
		height: 180px;
		left: 0;
		right: 0;
		bottom: 0;
		transform: scale(-1);
		z-index: 1000;
		top: -180px;
	}
	
	
	h2{font-size: 30px;}
	
	.logo{margin-top: 20px;}
	.logo img{height: 38px;}
	.logo .head1{font-size: 40px; vertical-align: top; top: -5px; position: relative;}
	.logo .sub1{font-size: 12px; margin-top: -5px; margin-left: 1px;}
	
	.summary{margin-top: 10px; width: 70% !important;}
	.summary li{display: inline-block; list-style: none;}
	.summary li a div{display: inline-block; padding: 2px 1px; background: #F7F6E2;  font-size: 12px; box-shadow: 0 0 3px #cccccc; }
	.summary li a div:hover{box-shadow: 0 0 5px #FFF000; border: 1px solid #AAAAAA; background: #5E5D03; color: #FFFFFF;}
	
	.first, .third{ padding: 30px 0px; background: #FFFFFF; z-index: 1000; position: relative; margin-top: -3px;}
	.second{padding: 60px 0px; background: #FFFFFF; z-index: 1000; position: relative;
		background-image: url('../images/bg2.jpeg'); background-position: left center; background-attachment: fixed;
	}
	.forth{padding: 60px 0px; z-index: 1000; position: relative; min-height: 300px;
		background-image: url(''); background-position: left center; background-attachment: fixed;
        background: linear-gradient(145deg, #1eb5d4, #16a085);
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	}
	
	.second:before, .forth:before {
		position: absolute;
		content: '';
		background: url(../images/shape.svg) no-repeat;
		width: 100%;
		height: 273px;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1;
	}
	
	.second:after {
		position: absolute;
		content: '';
		background: url(../images/shape.svg) no-repeat;
		transform: scale(-1);
		width: 100%;
		height: 175px;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	
	
	.button-container {
    text-align: center; margin: 10px 0px 15px 0px;
	}

	.glossy-button {
		background: linear-gradient(145deg, #1eb5d4, #16a085);
		color: white;
		border: none;
		padding: 12px 25px;
		border-radius: 25px;
		font-size: 16px;
		font-weight: bold;
		cursor: pointer;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.5) inset;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
	}
	
	.prod-card .glossy-button {
		background: linear-gradient(145deg, #1eb5d4, #16a085);
		color: white;
		border: none;
		padding: 0px;
		border-radius: 0px;
		font-size: 16px;
		font-weight: bold;
		cursor: pointer;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.5) inset;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.glossy-button::before {
		content: "";
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: rgba(255, 255, 255, 0.4);
		transform: rotate(45deg);
		opacity: 0;
		transition: opacity 0.5s ease, transform 0.5s ease;
		border-radius: 50%;
	}

	.glossy-button:hover::before {
		opacity: 1;
		transform: rotate(45deg) translate(20%, 20%);
	}

	.glossy-button:hover {
		background: linear-gradient(145deg, #16a085, #1eb5d4);
		box-shadow: 0 6px 8px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(255, 255, 255, 0.5) inset;
		transform: scale(1.05);
	}
	
	
	.second h2{margin-top: 50px;}
	
	.prod-card{margin: 4px 2px; background: #FFFFFF; text-align: center; overflow: hidden; -webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;}
	.prod-card .mobuse{display: inline-block; width: calc(100% - 150px); vertical-align: top; height: 90px;}
	.prod-card .img{height: 90px; width: 90px; background: #CCCCCC; background-size: cover; background-position: center center; display: inline-block; }
	.prod-card h3{font-size: 18px; margin: 3px auto 1px auto;}
	.prod-card p{font-size: 10px; margin: 3px 5px; line-height: 10px; height: 35px;}
	.prod-card .button-container{width: 50px; display: inline-block; vertical-align: top; margin: 0px;}
	.allview{display: none;}
	.prod-card .glossy-button{height: 90px; width: 50px; vertical-align: top;}
	
	.user-card{margin: 1px 2px; background: #FFFEEE; text-align: center; overflow: hidden; -webkit-border-radius:50px;-moz-border-radius:50px;-ms-border-radius:50px;-o-border-radius:50px;border-radius:50px;}
	.user-card .img{height: 60px; background: #CCCCCC; background-size: cover; background-position: center center; }
	.user-card h3{font-size: 12px; margin: 0px;}
	
	.third .one-third{width: 30%; display: inline-block; vertical-align: top;}
	
	.brand-card{margin: 5px 2px; background: #FFFEEE; text-align: center; overflow: hidden; -webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px; }
	.brand-card .img{height: 60px; background: #CCCCCC; background-size: 70% auto; background-position: center center; background-repeat: no-repeat; }
	.brand-card h3{font-size: 12px; margin: 5px auto; }
	.forth h3{margin-top: 30px; margin-bottom: 10px; font-size: 18px;}
	.forth p{margin: 5px auto; font-size: 12px;}
	
	
	
	.menubar{position: fixed; top:  0px; left: 0px; width: 100%; z-index: 5000; height: 55px; background: #FFFFFF; box-shadow: 0 0 3px #000000; display: none;}
    .menubar .logo{margin-top: 5px; margin-left: 10px; }
    	.menubar .logo img{height: 45px;}
    	.menubar .logo .head1{font-size: 32px; vertical-align: top;}
    	.menubar .logo .sub1{font-size: 10px; margin-top: -12px; margin-left: 33px; width: 190px;}
    
    
    .square-menu{position: fixed; top: 0px; right:0px; padding: 15px; z-index: 5000; text-align: right;}
    	.square-menu i{font-size: 30px; color: #666666; float: right; margin-left: 10px;}
    	.square-menu a .quicklink{background: none; border: none; padding: 0px; cursor: pointer; font-size: 16px; color: #333333; outline: none; margin: 4px 10px 3px 10px;}
    	#supermenubox{background: rgba(255,255,245,0.9); box-shadow: 0 0 3px 1px #7B93F8; border: 1px solid #7B93F8; padding: 5px; width: 280px; z-index: 5000; margin-top: 41px; display: none;}
    	.topbar{width: 100%; height: 50px; background: rgba(255,255,255,0.9); position: fixed; top: 0px; left: 0px; z-index: 4900; display: block !important;}
    	.topbar2{width: 210px; height: 60px; background: none; position: fixed; top: 0px; left: 0px; z-index: 4950;}
    	.topbar2 p{font-size: 8px; margin: -20px 10px 0px 20px; display: block; width: 270px;}
    	.topbar2 img{height: 27px; margin: 10px;}
    	.inlinelist li{margin: 8px 7px; list-style: none;}

	
	
	
	
	
	
	
	
	
	
}	
/*less than pc*/
@media screen and (min-width: 901px) and (max-width: 1400px){
    
    /* main_page_contents */

    .main_page_contents{width: calc(100% - 1px); margin-left: auto;}
    .main_page_contents.home{width: calc(100% - 92px); margin-left: auto; margin-top: 100vh;}
    .main_page_contents .hero_section{position: fixed; width: calc(100% - 92px); top: 0; left: 92px;}
    
    .hero-bg_wrap-cols {
        grid-column-gap: var(--hero-bg-spacing);
        grid-row-gap: var(--hero-bg-spacing);
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        width: 45%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: absolute;
        top: 0;
        bottom: auto;
        left: 65%;
        right: auto;
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
        transform-origin: top;
    }
    
    .hero-bg_wrap-cols:before{
        position: absolute;
        content: '';
        height: 100%;
        width: calc(100% + 100px);
        background: #f5f5f5;
        top: -100px;
        left: -20px;
    }



	.mobileonly{display: none !important;}	.notlarge{display: block;}	.large{display: block;}	
	.container{width: 95%; max-width: 1200px; margin: auto;}		
	.row{width: 95%; margin: auto; left: -5px; position: relative;}	
	
    .half{width: 49.2%; margin: 0px; padding: 0px; border: 0px; display: inline-block;}
	.one-third{width: 100%; margin: 0px; padding: 0px; border: 0px; display: inline-block;}
	.one-fourth{width: 100%; margin: 0px 1px; padding: 0px; border: 0px; display: inline-block;}
	.two-third{width: 100%; margin: 0px; padding: 0px; border: 0px; display: inline-block;}
	.three-fourth{width: 100%; margin: 0px; padding: 0px; border: 0px; display: inline-block;}
	
	.second .half, .third .half{width: 49.2%; margin: 0px; padding: 0px; border: 0px; display: inline-block;}
	.second .one-third, .third .one-third{width: 33%; margin: 0px; padding: 0px; border: 0px; display: inline-block;}
	.second .one-fourth, .third .onefourth{width: 23.1%; margin: 0px 1px; padding: 0px; border: 0px; display: inline-block;}
	.second .two-third, .third .two-third {width: 66%; margin: 0px; padding: 0px; border: 0px; display: inline-block;}
	.second .three-fourth, .third .three-fourth{width: 76.2%; margin: 0px; padding: 0px; border: 0px; display: inline-block;}
	
	.forth .one-third{width: 100%; margin: 0px; padding: 0px; border: 0px; display: inline-block;}
	.forth .one-fourth{width: 45%; margin: 0px 1px; padding: 0px; border: 0px; display: inline-block;}
	
	.main_page_contents{height: 100vh; overflow: hidden; background-image: url('../images/bg1.jpeg'); background-size: cover; background-position: left center; background-attachment: fixed;}
	.nothomemain{height: 240px;}
	.main_page_contents:after {
		position: absolute;
		content: '';
		background: url(../images/shape.svg) no-repeat;
		width: 100%;
		height: 180px;
		left: 0;
		right: 0;
		bottom: 0;
		transform: scale(-1);
		z-index: 1000;
	}
	.nothomemain:after {
		position: absolute;
		content: '';
		background: url(../images/shape.svg) no-repeat;
		width: 100%;
		height: 180px;
		left: 0;
		right: 0;
		top: 70px;
		transform: scale(-1);
		z-index: 1000;
	}
	
	h2{font-size: 30px;}
	
	.logo{margin-top: 70px;}
	.logo img{height: 100px;}
	.logo .head1{font-size: 65px; vertical-align: top;}
	.logo .sub1{font-size: 18px; margin-top: -30px; margin-left: 79px;}
	
	.summary{margin-top: 15px;}
	.summary li{display: inline-block; list-style: none;}
	.summary li a div{display: inline-block; border: 1px solid #EEEEEE; padding: 5px; margin: 2px; background: #F7F6E2;  font-size: 14px; -webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px; }
	.summary li a div:hover{box-shadow: 0 0 5px #FFF000; border: 1px solid #AAAAAA; background: #5E5D03; color: #FFFFFF;}
	
	.first, .third{ padding: 30px 0px; background: #FFFFFF; z-index: 1000; position: relative; margin-top: -3px;}
	.second{padding: 60px 0px; background: #FFFFFF; z-index: 1000; position: relative;
		background-image: url('../images/bg2.jpeg'); background-position: left center; background-attachment: fixed;
	}
	.forth{padding: 60px 0px; z-index: 1000; position: relative; min-height: 300px;
		background-image: url(''); background-position: left center; background-attachment: fixed;
        background: linear-gradient(145deg, #1eb5d4, #16a085);
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	}
	
	.second:before, .forth:before {
		position: absolute;
		content: '';
		background: url(../images/shape.svg) no-repeat;
		width: 100%;
		height: 273px;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1;
	}
	
	.second:after {
		position: absolute;
		content: '';
		background: url(../images/shape.svg) no-repeat;
		transform: scale(-1);
		width: 100%;
		height: 175px;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	.second h2{margin-top: 50px;}
	
	.prod-card{margin: 5px 2px; background: #FFFFFF; text-align: center; overflow: hidden; -webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px;}
	.prod-card .img{height: 180px; background: #CCCCCC; background-size: cover; background-position: center center; }
	.prod-card h3{font-size: 18px; margin: 5px auto 1px auto;}
	.prod-card p{font-size: 12px; margin: 3px 5px; line-height: 14px; height: 50px;}
	
	.user-card{margin: 1px 2px; background: #FFFEEE; text-align: center; overflow: hidden; -webkit-border-radius:50px;-moz-border-radius:50px;-ms-border-radius:50px;-o-border-radius:50px;border-radius:50px;}
	.user-card .img{height: 60px; background: #CCCCCC; background-size: cover; background-position: center center; }
	.user-card h3{font-size: 12px; margin: 0px;}
	
	.brand-card{margin: 20px 10px; background: #FFFEEE; text-align: center; overflow: hidden; -webkit-border-radius:50px;-moz-border-radius:50px;-ms-border-radius:50px;-o-border-radius:50px;border-radius:50px; }
	.brand-card .img{height: 160px; background: #CCCCCC; background-size: 70% auto; background-position: center center; background-repeat: no-repeat; }
	.brand-card h3{font-size: 27px; margin: 20px auto 20px auto }
	.forth h3{margin-top: 30px; margin-bottom: 10px; font-size: 25px;}
	.forth p{margin: 5px auto;}
	
	.button-container {
    text-align: center; margin: 10px 0px 15px 0px;
	}

	.glossy-button {
		background: linear-gradient(145deg, #1eb5d4, #16a085);
		color: white;
		border: none;
		padding: 12px 25px;
		border-radius: 25px;
		font-size: 16px;
		font-weight: bold;
		cursor: pointer;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.5) inset;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.glossy-button::before {
		content: "";
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: rgba(255, 255, 255, 0.4);
		transform: rotate(45deg);
		opacity: 0;
		transition: opacity 0.5s ease, transform 0.5s ease;
		border-radius: 50%;
	}

	.glossy-button:hover::before {
		opacity: 1;
		transform: rotate(45deg) translate(20%, 20%);
	}

	.glossy-button:hover {
		background: linear-gradient(145deg, #16a085, #1eb5d4);
		box-shadow: 0 6px 8px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(255, 255, 255, 0.5) inset;
		transform: scale(1.05);
	}
	
	
	.menubar{position: fixed; top:  0px; left: 0px; width: 100%; z-index: 5000; height: 55px; background: #FFFFFF; box-shadow: 0 0 3px #000000; display: none;}
    .menubar .logo{margin-top: 5px; margin-left: 50px; }
    	.menubar .logo img{height: 45px;}
    	.menubar .logo .head1{font-size: 32px; vertical-align: top;}
    	.menubar .logo .sub1{font-size: 10px; margin-top: -12px; margin-left: 33px; width: 190px;}
    
    
    .square-menu{position: fixed; top: 0px; right:0px; padding: 15px; z-index: 5000; text-align: right;}
    	.square-menu i{font-size: 30px; color: #666666; float: right; margin-left: 10px;}
    	.square-menu a .quicklink{background: none; border: none; padding: 0px; cursor: pointer; font-size: 16px; color: #333333; outline: none; margin: 4px 10px 3px 10px;}
    	#supermenubox{background: rgba(255,255,245,0.9); box-shadow: 0 0 3px 1px #7B93F8; border: 1px solid #7B93F8; padding: 5px; width: 280px; z-index: 5000; margin-top: 41px; display: none;}
    	.topbar{width: 100%; height: 50px; background: rgba(255,255,255,0.9); position: fixed; top: 0px; left: 0px; z-index: 4900; display: block !important;}
    	.topbar2{width: 210px; height: 60px; background: none; position: fixed; top: 0px; left: 0px; z-index: 4950;}
    	.topbar2 p{font-size: 8px; margin: -20px 10px 0px 20px; display: block; width: 270px;}
    	.topbar2 img{height: 27px; margin: 10px;}
    	.inlinelist li{margin: 8px 7px; list-style: none;}

	
	
	
	
}




/* pc css Full HD */
@media screen and (min-width: 1401px){
    
    /* main_page_contents */

    .main_page_contents{width: calc(100% - 1px); margin-left: auto;}
    .main_page_contents.home{width: calc(100% - 92px); margin-left: auto; margin-top: 100vh;}
    .main_page_contents .hero_section{position: fixed; width: calc(100% - 92px); top: 0; left: 92px;}
    
    .hero-bg_wrap-cols {
        grid-column-gap: var(--hero-bg-spacing);
        grid-row-gap: var(--hero-bg-spacing);
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        width: 45%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: absolute;
        top: 0;
        bottom: auto;
        left: 65%;
        right: auto;
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
        transform-origin: top;
    }
    
    .hero-bg_wrap-cols:before{
        position: absolute;
        content: '';
        height: 100%;
        width: calc(100% + 100px);
        background: #f5f5f5;
        top: -100px;
        left: -20px;
    }


	.mobileonly{display: none !important;}	.notlarge{display: none;}	.large{display: block;}	
	.container{width: 95%; max-width: 1350px; margin: auto;}	
	.row{width: 95%; margin: auto; position: relative;}		

	
	.half{width: 49.2%; margin: 0px; padding: 0px; border: 0px; display: inline-block;}
	.one-third{width: 33%; margin: 0px; padding: 0px; border: 0px; display: inline-block;}
	.one-fourth{width: 23.1%; margin: 0px 1px; padding: 0px; border: 0px; display: inline-block;}
	.two-third{width: 66%; margin: 0px; padding: 0px; border: 0px; display: inline-block;}
	.three-fourth{width: 76.2%; margin: 0px; padding: 0px; border: 0px; display: inline-block;}
	
	.forth .one-third{ margin-left: 50px;}
	
	.main_page_contents{height: 100vh; overflow: hidden; background-image: url('../images/bg1.jpeg'); background-size: cover; background-position: left center; background-attachment: fixed;}
	.nothomemain{height: 300px;}
	.main_page_contents:after {
		position: absolute;
		content: '';
		background: url(../images/shape.svg) no-repeat;
		width: 100%;
		height: 180px;
		left: 0;
		right: 0;
		bottom: 0px;
		transform: scale(-1);
		z-index: 1000;
	}
	.nothomemain:after {
		position: absolute;
		content: '';
		background: url(../images/shape.svg) no-repeat;
		width: 100%;
		height: 180px;
		left: 0;
		right: 0;
		top: 120px;
		transform: scale(-1);
		z-index: 1000;
	}
	
	h2{font-size: 30px;}
	
	.logo{margin-top: 100px;}
	.logo img{height: 120px;}
	.logo .head1{font-size: 75px; vertical-align: top;}
	.logo .sub1{font-size: 20px; margin-top: -40px; margin-left: 79px;}
	
	.summary{margin-top: 50px;}
	.summary li{display: inline-block; list-style: none;}
	.summary li a div{display: inline-block; border: 1px solid #EEEEEE; padding: 7px; margin: 2px; background: #F7F6E2;  -webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px; }
	.summary li a div:hover{box-shadow: 0 0 5px #FFF000; border: 1px solid #AAAAAA; background: #5E5D03; color: #FFFFFF;}
	
	.first, .third{ padding: 30px 0px; background: #FFFFFF; z-index: 1000; position: relative; margin-top: -3px;}
	.second{padding: 60px 0px; background: #FFFFFF; z-index: 1000; position: relative;
		background-image: url('../images/bg2.jpeg'); background-position: left center; background-attachment: fixed;
	}
	.forth{padding: 60px 0px; z-index: 1000; position: relative; min-height: 300px;
		background-image: url(''); background-position: left center; background-attachment: fixed;
        background: linear-gradient(145deg, #1eb5d4, #16a085);
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	}
	
	.second:before, .forth:before {
		position: absolute;
		content: '';
		background: url(../images/shape.svg) no-repeat;
		width: 100%;
		height: 273px;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1;
	}
	
	.second:after {
		position: absolute;
		content: '';
		background: url(../images/shape.svg) no-repeat;
		transform: scale(-1);
		width: 100%;
		height: 175px;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	.second h2{margin-top: 50px;}
	
	.prod-card{margin: 20px 10px; background: #FFFFFF; text-align: center; overflow: hidden; -webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px;}
	.prod-card .img{height: 300px; background: #CCCCCC; background-size: cover; background-position: center center; }
	.prod-card h3{font-size: 22px; margin: 10px auto 1px auto;}
	.prod-card p{font-size: 12px; margin: 3px 10px; line-height: 14px; height: 50px;}
	
	.user-card{margin: 1px 2px; background: #FFFEEE; text-align: center; overflow: hidden; -webkit-border-radius:50px;-moz-border-radius:50px;-ms-border-radius:50px;-o-border-radius:50px;border-radius:50px;}
	.user-card .img{height: 60px; background: #CCCCCC; background-size: cover; background-position: center center; }
	.user-card h3{font-size: 12px; margin: 0px;}
	
	.brand-card{margin: 20px 10px; background: #FFFEEE; text-align: center; overflow: hidden; -webkit-border-radius:50px;-moz-border-radius:50px;-ms-border-radius:50px;-o-border-radius:50px;border-radius:50px; }
	.brand-card .img{height: 200px; background: #CCCCCC; background-size: 80% auto; background-position: center center; background-repeat: no-repeat; }
	.brand-card h3{font-size: 27px; margin: 20px auto 20px auto }
	.forth h3{margin-top: 30px; margin-bottom: 10px; font-size: 25px;}
	.forth p{margin: 5px auto;}
	
	.button-container {
    text-align: center; margin: 10px 0px 15px 0px;
	}

	.glossy-button {
		background: linear-gradient(145deg, #1eb5d4, #16a085);
		color: white;
		border: none;
		padding: 15px 30px;
		border-radius: 25px;
		font-size: 18px;
		font-weight: bold;
		cursor: pointer;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.5) inset;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.glossy-button::before {
		content: "";
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: rgba(255, 255, 255, 0.4);
		transform: rotate(45deg);
		opacity: 0;
		transition: opacity 0.5s ease, transform 0.5s ease;
		border-radius: 50%;
	}

	.glossy-button:hover::before {
		opacity: 1;
		transform: rotate(45deg) translate(20%, 20%);
	}

	.glossy-button:hover {
		background: linear-gradient(145deg, #16a085, #1eb5d4);
		box-shadow: 0 6px 8px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(255, 255, 255, 0.5) inset;
		transform: scale(1.05);
	}
	
	.menubar{position: fixed; top:  0px; left: 0px; width: 100%; z-index: 5000; height: 55px; background: #FFFFFF; box-shadow: 0 0 3px #000000; display: none;}
    .menubar .logo{margin-top: 5px; margin-left: 50px; }
    	.menubar .logo img{height: 45px;}
    	.menubar .logo .head1{font-size: 32px; vertical-align: top;}
    	.menubar .logo .sub1{font-size: 10px; margin-top: -12px; margin-left: 33px; width: 190px;}
    
    
    .square-menu{position: fixed; top: 0px; right:0px; padding: 15px; z-index: 5000; text-align: right;}
    	.square-menu i{font-size: 30px; color: #666666; float: right; margin-left: 10px;}
    	.square-menu a .quicklink{background: none; border: none; padding: 0px; cursor: pointer; font-size: 16px; color: #333333; outline: none; margin: 4px 10px 3px 10px;}
    	#supermenubox{background: rgba(255,255,245,0.9); box-shadow: 0 0 3px 1px #7B93F8; border: 1px solid #7B93F8; padding: 5px; width: 280px; z-index: 5000; margin-top: 41px; display: none;}
    	.topbar{width: 100%; height: 50px; background: rgba(255,255,255,0.9); position: fixed; top: 0px; left: 0px; z-index: 4900; display: block !important;}
    	.topbar2{width: 210px; height: 60px; background: none; position: fixed; top: 0px; left: 0px; z-index: 4950;}
    	.topbar2 p{font-size: 8px; margin: -20px 10px 0px 20px; display: block; width: 270px;}
    	.topbar2 img{height: 27px; margin: 10px;}
    	.inlinelist li{margin: 8px 7px; list-style: none;}

	
	
}


.menudata{display: inline-block; float: right; margin-right: 60px; vertical-align: top;}
.menudata .item{display: inline-block; }
.glossy-button2 {
	/*	background: linear-gradient(145deg, #edfafc, #cccfce); */
		color: #555555;
		border: none;
		padding: 12px 15px;
		border-radius: 0px;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
	/*	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.5) inset; */
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
		height: 55px;
	}

	.glossy-button2::before {
		content: "";
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: rgba(255, 255, 255, 0.4);
		transform: rotate(45deg);
		opacity: 0;
		transition: opacity 0.5s ease, transform 0.5s ease;
		border-radius: 50%;
	}

	.glossy-button2:hover::before {
		opacity: 1;
		transform: rotate(45deg) translate(20%, 20%);
	}

	.glossy-button2:hover {
		background: linear-gradient(145deg, #edfafc, #cccfce);
	/*	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(255, 255, 255, 0.5) inset;
		transform: scale(1.05); */
		color: #000000;
	}