:root {
    /* Primary Colors */
    --color-primary-orange: #EF8354;
    --color-primary-orange-dark: #ef6a31;
    --color-primary-orange-bright: #f1ae92;

    /* Text Colors */
    --color-text-dark: #2D3142;
    --color-text-light: #fff;
    --color-text-near-white: #fffcfc;
    --color-text-gray: #357266;

    /* Background Colors */
    --color-bg-white: #fff;
    --color-bg-light: #f9f9f9;
    --color-bg-lighter: #f3f3f3;
    --color-bg-lightest: #f1f1f1;
    --color-bg-white-transparent: #ffffffc4;

    /* Border & Accent Colors */
    --color-border-dark: #191717;
    --color-border-light: #e0e0e0;
    --color-border-lighter: #BFC0C0;
    --color-border-light-shadow: #f1f1f1;

    /* Dark Overlays */
    --color-overlay-dark: #000000d1;
    --color-overlay-dark-moderate: rgb(1 1 1 / 37%);
    --color-overlay-dark-semi: #14161fb8;

    /* Special Colors */
    --color-footer-bg: #14161f;
    --color-pure-black: #2D3142;
}

*{
    padding:0px;
    margin:0px;
}
body{
    background:url(../images/so-white.png) repeat;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--color-text-dark);
}
h1,h2,h3,h4,h5{
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
h1{
    font-size:55px
}
h2{
    font-size:42px
}
h3{
    font-size:30px
}
h4{
    font-size:22px
}

a{
    text-decoration:none;
    color:inherit;
    transition: all 0.5s ease;
}
a:hover{
    color: var(--color-primary-orange-bright);
}

.readmore{
    border: var(--color-primary-orange) 1px solid;
    padding: 13px 30px;
    border-radius: 200px;
    float: left;
    margin-top: 1em;
    color: var(--color-primary-orange) !important;
}
.readmore:hover{
    background-color: var(--color-primary-orange-bright);
    color: var(--color-bg-light) !important;
}

.clear{
    clear: both;
}

.aligncenter{
    text-align: center;
}
.alignright{
    text-align:right;
}

.container12, header, footer{
    width:100%;
    margin:0 auto;
    padding:0px;
    float:left;
}

article{
    max-width:85%;
    margin:0 auto;
}

/*--header--*/
header{
    padding:1em 0;
}

header .logo{
    width:200px;
    text-align:center;
    margin-top:1em;
    float:left;
}
header .logo img{
    width:100%;
    height:auto;
}

header .navigation{
    float:right;
    width:80%;
    text-align:right;
}

header .navigation ul{
    list-style:none;
    margin-top:1.5em;
}
header .navigation ul li{
    display:inline;
    margin-right:1em;
    position:relative;
}
header .navigation ul li a{
    text-decoration:none;
    color:inherit;
    font-size: .9rem;
    font-weight:400;
    padding: 13px 13px;
}
header .navigation ul li a:hover{
    color: var(--color-primary-orange-bright);
}

header .navigation li.level1.last a{
    background-color: var(--color-primary-orange);
    border-radius: 200px;
    color: var(--color-text-light) !important;
}
header .navigation li.level1.last a:hover{
    background-color: var(--color-primary-orange-bright);
    color: var(--color-text-light) !important;
}

header .navigation nav ul li ul {
    display: none;
    position: absolute;
    background-color: #000000bb;
    margin: 0px;
    padding: 0px;
    width: min-content;
    text-align: left;
    z-index: 3;
    top: 27px;
    left: 0px;
    color:#fff;
}

header .navigation nav ul li:hover ul.dropdown-menu {
    display: block;
}

header .navigation nav ul li ul.dropdown-menu > li {
    position: relative;
    float: none;
    min-width: 281px;
    margin: 0px;
}

header .navigation nav ul.dropdown-menu li > a {
    display: block;
    width: 100%;
    color: #fff;
}


/* Menu Icon */
.hamb{
    cursor: pointer;
    padding: 47px 20px;
    z-index: 10;
    position: absolute;
    right: 3em;
    display:none;

}/* Style label tag */

.hamb-line {
    display: block;
    height: 2px;
    position: relative;
    width: 24px;

} /* Style span tag */

.hamb-line::before{
    border-top: solid 1px var(--white);
    border-bottom: solid 1px var(--white);
    content: '';
    display: block;
    position: absolute;
    transition: all .2s ease-out;
    width: 42px;

}
.hamb-line::before{
    top: 5px;
}
.hamb-line::after{
    top: -5px;
}

.side-menu {
    display: none;
} /* Hide checkbox */


/* Toggle menu icon */
.side-menu:checked ~ .navigation{
    max-height: 100%;
    display: block;
}
.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}

#stage a {
position: absolute;
}
#stage a img {
padding: 10px;
border: 1px solid var(--color-border-lighter);
background: var(--color-bg-white);
}

#stage a:nth-of-type(1) {
animation-name: fader;
animation-delay: 4s;
animation-duration: 1s;
z-index: 20;
}
#stage a:nth-of-type(2) {
z-index: 10;
}
#stage a:nth-of-type(n+3) {
display: none;
}



@keyframes fader {
from { opacity: 1.0; }
to   { opacity: 0.0; }
}

/*--banner--*/
.banner{
    height:max-content;
    margin-bottom:3em;
}
.banner .bannerimg{
    background-size: cover;
    height: 84vh;
    background-position: center;
    position:relative;
}
.banner .bannerimg::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: var(--color-bg-white);
    background: linear-gradient(180deg, rgb(25 28 40 / 75%) 0%, rgb(14 17 21 / 78%) 81%);
}
.banner .bannerimg .bancaption{
    position: absolute;
    top: 40%;
    left: 7em;
    color: var(--color-text-light);
    width: 36%;
}
.banner .bannerimg .bancaption h1{
    font-size: 3rem;
}
.banner .bannerimg .bancaption p{
    font-size: 1.1rem;
    font-weight: 300;
}

.banner .bannervid{
    position: absolute;
    left: auto;
    right: 5em;
    top: 16%;
}
.banner .bannervid iframe{
    width: 46vw;
    height: 64vh;
}

/*--inner banner--*/
.innerbanner{
    background-size: cover;
    background-position: center;
    position:relative;
    margin-bottom:3em;
}
.bannertitle{
    position:absolute;
    top:70%;
    left:50%;
    width: 90%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:#fff;
}
.innerbanner .bannerimg{
    background-size: cover;
    height: 50vh;
    background-position: center;
    position:relative;
}
.innerbanner .bannerimg::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: var(--color-bg-white);
    background: linear-gradient(180deg, rgb(0 0 0 / 59%) 0%, rgb(0 0 0 / 38%) 106%);
}


/*--about--*/
.about{
    margin:3em 0;
}
.about .titlebx{
	display:grid;
    height: 50vh;
    align-content: center;
    padding-right: 3em;
}
.about .cont{
	display:grid;
    align-content: center;
    height: 50vh;
}
.titlebx p{
    color: var(--color-text-gray);
    font-size: 22px;
}

/*--full-width--*/
.fullwidth{
    background-color: var(--color-bg-lightest);
    background-blend-mode: multiply;
}
.fullwidth .imgbx{
    height: 70vh;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    position:relative;
    width: 104%;
}
.fullwidth .contbx{
	display:grid;
    align-content: center;
}
.fullwidth .padding-left-8{
    padding-left: 8em;
}
.fullwidth .padding-right-8{
    padding-right: 8em;
}

.inner .fullwidth{
    margin:3em 0;
}

.inner .fullwidth .contbx{
    padding:3em 0;
}

.contbx li{
    margin-bottom:20px;
}
/*--resources--*/
.resources{
    margin:3em 0;
}
.resources .resourcebx{
    padding: 0 0 48px 0;
    float: left;
    height: 100%;
    background: var(--color-bg-white);
    box-shadow: 0px 2px 11px var(--color-border-light-shadow);
    border-radius: 4px;
}
.resources .resourcebx .imgbx{
    height: 30vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 2em;
}
.resources .resourcebx .cont{
    padding: 0 2em;
}
.resources h2{
    margin-bottom:1em;
}

/*--call to  action--*/
.calltoaction{
    background-color: var(--color-bg-light);
    padding: 3em 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    color: var(--color-text-light);
}
.calltoaction::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: var(--color-overlay-dark-moderate);
}
.calltoaction .maincont{
    height:100%;
    align-content: center;
    position:relative
}
.calltoaction .maincont p{
    font-size: 17px;
}
.calltoaction .actionbx{
    background-color: var(--color-overlay-dark-semi);
    color: var(--color-text-light);
    padding: 2.5em;
    border-radius: 4px;
    height: 100%;
    align-content: baseline;
    position:relative;
	display:grid;
}

/*--missionvision*/
.missionvision{
    margin:3em 0;
}
.missionvision .nopadding{
    padding:0px;
}
.missionvision .imgbx{
    height:70vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position:relative;
}
.missionvision .imgbx::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: var(--color-bg-white);
    background: linear-gradient(180deg, rgb(237 130 84 / 63%) 0%, rgb(26 29 42 / 84%) 81%);
}
.missionvision .imgbx .cont{
    position:absolute;
    top:35vh;
    width:100%;
    padding:0px 5em;
    text-align:center;
    color: var(--color-text-light);
}

/*--intro--*/
.intro{
    margin:0 0 2em 0;
    font-size:20px;
    font-weight:300;
}
/*--langchange--*/
.langchange{
    margin:0 0 3em 0;
}

/*--the team--*/
.theteam{
    margin:3em 0;
}
.theteam .gridbx{
    display: flex;
    flex-wrap: wrap;
    grid-gap: 1em;
    justify-content: center;
    flex-direction: row;
    flex-flow: row wrap;
    align-items: center;
}
.theteam .teambx{
    padding: 0 20px 2em 20px;
    height: 300px;
    border-radius: 4px;
    text-align: center;
    width: 25.33%;
    margin-bottom:2em;
    box-sizing: initial;
}
.theteam .teambx .teamimg{
    background-size: cover;
    background-position: center;
    height:200px;
    width:200px;
    margin: 1em auto;
    border-radius: 200px;
}

/*--prodimage*/
.proddesc{
	margin-bottom:3em;
}
.prodimage{
	text-align:center
}
.prodimage img{
	width:70%;
}
.prodby{
	font-size: 0.8rem;
	color: #ef8354;
}

/*--prodlist--*/
.prodlist{
	margin-bottom:3em;
	display: flex;
	gap:30px;
	justify-content:center;
}
.prodlist .prodbx{
	width:20%;
	margin-bottom:30px;
}
.prodlist .prodimg img{
	width:100%;
	height:238px;
	object-fit:contain;
}
.prodlist .prodbx .cont p{
	font-size:0.8rem;
}

/*--achievements--*/
.achievements{
    margin:3em 0;
}
.achievements .achievebx{
    padding: 0 30px;
    text-align:center;
}
.achievements .achievebx img{
    width:100px;
    margin-bottom: 1em;
    margin-top:1em;
}

/*--stories--*/
.stories{
    margin-bottom:3em;
}
.stories article{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:20px;
    justify-content: center;
    flex-direction: row;
}
.stories article .outer {
    width: 18.33%;
    height: 33vh;
}
.stories article .outer .storybx{
    height: 23vh;
    border-radius: 4px;
    text-align: center;
    width: 100%;
    box-sizing: initial;
    background-size: 106%;
    background-repeat: no-repeat;
    background-position: center
}
.stories article .outer .storytitle{
    width: 100%;
    /* align-content: center; */
    height: 68px;
    background-color: var(--color-bg-white-transparent);
    bottom: 0px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-weight: 700;
    padding: 6px 10px 0px 10px;
    margin-bottom: 3em;
}

/*--story banner --*/
.story .innerbanner .bannerimg {
    height: 27vh;
}

/*-- story title --*/
.story .bannertitle {
    top: 52%;
}
.story .bannertitle h2 {
    letter-spacing: 8px;
    font-size: 27px;
}

.titlebar{
    margin-bottom:2em;
}
.titlebar h4{
    font-size: 1.25rem;
}

/*--sidebarlist--*/
.sidebarlist{
    margin:0 0 3em 0;
}
.sidebarlist ul{
    list-style:none;
    padding:0px;
    margin:0px;
}
.sidebarlist ul li{
    margin-bottom:10px;
    text-align: right;
}
.sidebarlist ul li a{
    font-size: 15px;
    padding: 10px 20px;
    box-sizing: inherit;
    background-color: var(--color-bg-lighter);
    display: block;
    position:relative;
}
.sidebarlist ul li .current{
    font-weight:700;
    background-color: var(--color-primary-orange-bright);
}
.sidebarlist ul li .current:hover{
    color:var(--color-text-light) !important;
}
.sidebarlist ul li a::before{
    position: absolute;
    top: 21px;
    right: 11px;
    width: 4px;
    height: 4px;
    border-bottom: 1px solid var(--color-border-dark);
    border-right: 1px solid var(--color-border-dark);
    content: "";
    transform: rotate(-45deg);
}
.sidebarlist ul li a.current::before{
    border-bottom: 2px solid var(--color-border-dark);
    border-right: 2px solid var(--color-border-dark);
}



.clothart{
    float: left;
    margin-right: 2em;
    margin-bottom: 1em;
    margin-top: 1em;
    width: 311px;
    height: 265px;
    background-size: 113%;
    background-position: center;
}

/*--linkbar--*/
.linkbar{
    margin: 3em 0px;
    float: left;
    width:100%;
}
.linkbar ul{
    margin:0px;
    padding:0px;
}
.linkbar ul li{
    list-style:none;
}
.linkbar li a{
    display: block;
    padding: 14px 34px;
    border:1px solid var(--color-primary-orange);
    color:var(--color-primary-orange);
    width: max-content;
    border-radius: 200px;
}

.sidebarlist #sidemenulist{
    display: none;
}

/*--menu-toggle--*/
.menu-toggle {
    display: none;
}

/*--contact--*/
.contactForm input[type="text"], .contactForm input[type="email"], .contactForm input[type="tel"],.contactForm input[type="url"],select, .contactForm textarea{
    width: 100%;
    padding: 1em;
    margin: .5em 0px;
    border-radius: 5px;
    border: 1px solid var(--color-border-light);
}
.contactForm input[type="checkbox"]{
	width: 20px;
    height: 20px;
}
.contactForm .submit{
    padding: 13px 30px;
    background-color: var(--color-primary-orange-bright);
    border-radius: 200px;
    width: max-content;
    color: var(--color-text-light);
    margin-top: 20px;
    display: flex;
    align-items: baseline;
    column-gap: 30px;
    border: none;
    transition: all 0.5s ease;
}
.contactForm .submit:hover{
    background-color: var(--color-primary-orange-dark);
    color: var(--color-text-light);
}

/*--footer--*/
footer{
    padding:3em 0 1em 0;
    background-color: var(--color-footer-bg);
    color: var(--color-text-light);
}
footer .footlogo{
    width: 225px;
}
footer ul{
    list-style:none;
    padding:0px;
    margin:0px;
}
footer ul li{
  margin:5px 0px;
}
footer .copy{
    margin-top:3em;
    font-size:12px;
}

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 767px)  {
    header {
        padding: 2em 0;
    }
    header .logo {
        margin-left: 0px;
    }

    header .navigation { display: none; flex-direction: column; width: 100%; height: 103vh; position: fixed; background-color: var(--color-overlay-dark); overflow: hidden; top: 0px; left: 0px; z-index: 11;}
    header .navigation .topnav { 
        padding: 0;
        width: 77%;
        float: left;
        margin-top: 5em;
        margin-bottom: 1em;
        flex-direction: column;
        border-bottom: 1px solid var(--color-text-light);
    }
    header .navigation .topnav ul {text-align: left; margin: 2em 0;}
    header .navigation .topnav ul li {display: block; margin-bottom: 0.5em;}
    header .navigation .topnav ul li a { color: var(--color-text-near-white); font-size: 18px;}
    header .navigation .topnav .social{margin-bottom:2em;}
    header .navigation .topnav .social li{ display:inline;}
    header .navigation nav {display: block;  width: 100%;  padding: 0em; margin-top: 5em;}
    header .navigation nav .firstnav{color: var(--color-text-light);}
    header .navigation nav ul { text-align: left;}
    header .navigation nav ul li{display:block; margin-bottom: 0em;}

    header .navigation nav ul li ul {
        position: relative;
        top:auto;
    }
    
    header .navigation nav ul li a {
        font-size: 29px;
        padding: 0.5em 0.8em;
        color: var(--color-text-light);
        float: left;
        width: 100%;
    }
    header .navigation nav ul.dropdown-menu li > a {
        font-size: 20px;
        padding-left: 3em;
    }

    header .navigation .topnav .quickcontacts {text-align: left;}

    /* Menu Icon */
    .hamb {
        cursor: pointer;
        padding: 47px 20px;
        z-index: 12;
        position: absolute;
        right: 0em;
        width: 90px;
        top: 1.5em;
        display: block;
    }

    /* Style label tag */

    .hamb-line {
        display: block;
        height: 2px;
        position: relative;
        width: 24px;
    }

    /* Style span tag */

    .hamb-line::before, .hamb-line::after {
        border-top: solid 1px var(--color-pure-black);
        content: '';
        display: block;
        position: absolute;
        transition: all .2s ease-out;
        width: 42px;
    }

    .hamb-line::before {
        top: 5px;
    }

    .hamb-line::after {
        top: -5px;
    }

    .side-menu {
        display: none;
    }

    /* Hide checkbox */


    /* Toggle menu icon */
    .side-menu:checked ~ .navigation {
        display:block;
    }
    .side-menu:checked ~ .hamb .hamb-line {
        background: transparent;
    }
    .side-menu:checked ~ .hamb .hamb-line::before {
        transform: rotate(-45deg);
        top: 0;
		border:none;
		border-top: 1px solid var(--color-bg-white);
    }
    .side-menu:checked ~ .hamb .hamb-line::after {
        transform: rotate(45deg);
        top: 0;
		border:none;
		border-top: 1px solid var(--color-bg-white);
    }

    .banner .bannerimg .bancaption h1 {
    font-size: 47px;
    }

    .banner .bannerimg .bancaption {
    position: absolute;
    top: 5%;
    left: 2em;
    width: 80%;
    }

    .banner .bannervid {
    position: absolute;
    left: 1em;
    top: 46%;
    width: 90%;
    }
    .banner .bannervid iframe {
    width: 100%;
    height: 37vh;
    }

    .innerbanner .bannertitle h1 {
        font-size: 49px;
    }
    .about {
        margin: 0em 0;
    }

    .about .titlebx {
        height: auto !important;
        padding-right: 3em;
    }
    .about .cont {
        align-content: normal;
        height: auto;
        margin-bottom: 8em;
    }

    .fullwidth {
        padding: 2em 0px;
    }
    .fullwidth .padding-right-8 {
        padding-right: 15px;
        order: 2;
        margin-top: 3em;
    }
    .fullwidth .imgbx {
        height: 50vh;
        width: 100%;
    }
    .fullwidth .padding-left-8 {
        padding-left: 15px;
        margin-top: 3em;
    }

    .resources div:has(.resourcebx) {
        margin-bottom: 3em;
    }

    .calltoaction {
        padding: 5em 0 0 0;
    }
    .calltoaction .maincont {
        margin-bottom: 3em;
        font-weight: 300;
    }
    .calltoaction div:has(.actionbx) {
        margin-bottom: 3em;
    }


    /*--toggle menu--*/
    .sidebarlist {
        margin: 0;
    }
    .sidebarlist ul {
        position: fixed;
        top: 0;
        left: -100%; /* Start off-screen */
        width: 70%;
        height: 100vh;
        background: var(--color-text-light);
        padding: 20px;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        z-index: 1000;
        overflow-y: auto;
        transition: transform 0.3s ease; /* Smooth slide */
    }
    
    .sidebarlist ul.active {
        transform: translateX(142%); /* Slide in */
    }
    
    .menu-toggle {
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        border: none;
        width: max-content;
        z-index: 9;
        cursor: pointer;
        display: block;
        padding: 14px 34px;
        background-color: var(--color-primary-orange);
        border-radius: 200px;
    }
    
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }
    
    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .stories article {
        display: block;
    }
    .stories article .outer {
        width: 100%;
        height: auto;
        margin-bottom: 2em;
    }
    .stories article .outer .storybx {
        height: 35vh;
        background-size: 108%;
    }


    .clothart {
        width: 100%;
        height: 35vh;
    }
    audio{
        margin-bottom: 3em;
    }

        

    footer .footlogo {
        width: 243px;
        margin-bottom: 3em;
    }
    footer .footmenu{
        margin-bottom:2em;
    }

}