@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {  font-family: 'Google Sans Flex 24pt', system-ui, sans-serif; width:100%; height:100%; --webkit-font-smoothing: antialiased;
font-synthesis: none;
text-rendering: optimizeLegibility;}
ol, ul,li {list-style: none; box-sizing: border-box;}
*{ margin:0; padding:0;}
a{ text-decoration:none; outline:none;}
h6,h5,h4,h3,h2,h1{ margin:0; font-family: 'Google Sans Flex 24pt SemiBold', system-ui, sans-serif;
 font-weight:normal; text-wrap: balance;}
img{ border:none;}
div{display:flow-root; box-sizing: border-box;}
.clear{ clear:both;}
.container{position:relative; margin:0 auto; width:1200px;}
:root{--text-color:#525252; --white-color:#ffffff; --heading-color:#1a1a1a;  --blue:#0a2960;--regular-font:font-family: 'Google Sans Flex 24pt';--yellow-light:#fff9e1;}

/*------Header Section-------*/
header{  width: 100%;  padding: 13px 0; box-sizing: border-box; background: #02081f;   box-shadow: -3px 2px 10px 0px rgba(0, 0, 0, 0.3); position: relative; z-index: 60;}
header .container{display: flex; flex-direction: row; justify-content:space-between; align-items:center; }
#logo{ width:279px; height:82px;}
#logo img, figure img{ width: 100%; height: 100%;}
#mobile_menu, #mobile_drop{display:none;}
.mtoggle{cursor:pointer;float:right;}
ul.dropdown{ z-index:0; position:relative; } 
ul.dropdown li{display:inline-block; zoom: 1;list-style:none; position:relative;}
ul.dropdown li a{ color:var(--white-color);font-size:14px;text-decoration: none;line-height: 32px;padding: 0 6px;display:block; text-transform: uppercase;}
ul.dropdown li a:hover{ color: #e7aa38;}
/*****LEVEL TWO*****/
ul.dropdown ul{ width:207px; visibility: hidden; position: absolute; top: 100%; left: 0; text-align:left; background:#FFF; border:#cecece solid thin; border-radius:10px; padding: 18px; box-sizing:border-box;}
ul.dropdown ul li{ float: none;list-style:none; text-transform:none; letter-spacing:0; margin-bottom: 4px; display:block;}
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a{ border-right: none; width: 100%; display:block; color: #333;height:auto;text-shadow:none!important;background:none; font-weight:normal; line-height:23px; text-transform:capitalize; font-size:14px; padding:0;}
ul.dropdown ul li:hover{ color:var(--yellow-text);}
/*****LEVEL THREE******/
ul.dropdown ul ul{ left: 100%; top:0; }
ul.dropdown ul ul li a{line-height:20px;}
ul.dropdown li:hover > ul{ visibility: visible;}
/*------Header Section End-----*/

/*banner section*/
#banner{ position:relative;    margin-bottom: 15px;}
.rslides {position: relative;list-style: none;overflow: hidden;width: 100%; padding: 0;z-index: 0;}
.rslides li {position: relative;display: none;width: 100%;left: 0;top: 0;}
.rslides img {display: block; height: 100%;width: auto;border: 0;width: 100%;}
.bannercaption {width: 47%; box-sizing: border-box;font-size: 16px;position: absolute; top: 24%; left: 6%; color: var(--white-color); display: flex; flex-direction: column; justify-content: space-between; font-size: 74px; align-items: flex-start; text-transform: capitalize; color: var(--white-color); gap: 30px;}
.bannercaption h1{ line-height: 69px; font-size: 58px;}
.bannercaption p{ color: var(--white-color); line-height: 28px;}
.bannercaption div{ display: flex; flex-direction: row; gap: 29px;}
.primary{ border-radius: 10px; color: var(--white-color); text-align: center; font-size: 16px; padding: 17px 35px; background: #C9851B;
background: linear-gradient(254deg, rgba(201, 133, 27, 1) 0%, rgba(213, 181, 43, 1) 100%);}
.primary:hover{ background: #C9851B;
background: linear-gradient(99deg,rgba(201, 133, 27, 1) 0%, rgba(213, 181, 43, 1) 100%);}
.secondary{ border-radius: 10px; color: var(--white-color); text-align: center; font-size: 16px; padding: 17px 35px; border: var(--white-color) solid thin; background: rgba(0, 0, 0, 0.3);}
.secondary:hover{ background: rgba(0, 0, 0, 0.9);}
/*banner section end*/

/*content part*/
#welcome{ margin: 161px 0;}
#welcome .container{display: flex;  flex-direction: row; justify-content: space-between; gap: 94px;}
#welcome-left{ position: relative;}
#welcome-left div{ position: absolute; bottom: 33px; background:#0a2960 url(../images/location.png) no-repeat left center; border-radius: 10px; border: var(--white-color) solid thin; padding: 25px 30px; font-size: 16px; color: var(--white-color); padding-left: 89px; line-height: 24px; left: 36px; width: 410px;}
#welcome-left div span{ color: #7296d5; display: block;}
#about-content{ display: flex; flex-direction: column; gap: 31px;}
#about-content h1{ font-size: 45px; color: var(--blue);}
#about-content div{ display: flex; flex-direction: column; color: var(--text-color); gap: 35px;}
#about-content p{ font-size: 18px; line-height: 28px;}
#about-content #company-detail{ display: flex; flex-direction: row; gap: 32px; margin: 14px 0 00;}
#mission-cover{ display: flex; flex-direction: row; justify-content: space-between; gap: 17px; }
#mission-cover div{ width: 31%; padding: 50px 55px; box-sizing: border-box; padding-top: 93px; overflow: hidden; position: relative; transition: 0.5s; background-color: #fff9e1; outline: #fee996 solid thin; outline-offset: 15px; color: #4a442a;}
#mission-cover div h4{ font-size: 26px; margin: 0 0 17px 0; font-family: var(--regular-font);}
p{ color: var(--text-color); font-size: 16px; line-height: 26px;}
#mission-cover div p{color: #4a442a;}
#mission-cover div ul li { margin-bottom: 3px; position: relative; text-indent: 20px;}
#mission-cover div ul li::after{ width: 5px; height: 5px; background: #4a442a; border-radius: 100%; left: 0; top: 7px; content: ""; position: absolute;}
#mission-cover div:hover{    box-shadow: 0px 0px 19px 2px rgba(0, 0, 0, 0.2);}
.mission{ background: url(../images/mission.png) no-repeat right top;}
.vision{ background: url(../images/vision.png) no-repeat right top;}
.story{ background: url(../images/value.png) no-repeat right top;}
#what-we-trade{ background: url(../images/wetrade.jpg) no-repeat; background-size: cover; background-attachment: fixed; margin: 151px 0 100px 0; padding: 137px 0;}
#what-we-trade .container{ display: flex; justify-content: flex-end;}
#what-we-trade .container div{ background: #0a2960 url(../images/map.png) no-repeat center; color: var(--white-color); width: 520px; border-radius: 15px; padding: 79px 58px; line-height: 28px; font-size: 16px;}
#what-we-trade .container div h1{ font-size: 36px; margin: 0 0 30px 0;}
#product-list ul{ display:flex; flex-direction: row;  flex-wrap: wrap; gap: 40px; margin: 57px 0 0 0;}
#product-list h1{ text-align: center; font-size: 82px; color: #dddddd; text-transform: uppercase; margin: 50px 0 0 0;}
#product-list li figure{width:372px; position:relative; display: flex; flex-direction: column; text-transform: capitalize; gap: 18px; margin-bottom: 26px;}
.product-img{ width:372px; height:288px; overflow:hidden; position:relative; border-radius:15px;}
.product-img img{-webkit-transition: 0.6s;-moz-transition: 0.6s;-o-transition: 0.6s;-ms-transition: 0.6s;transition: 0.6s; width:100%; height:100%;}
#product-slide li:hover .product-img img{ transform:scale(1.1) rotate(5deg);}
figure:hover img{ transform:scale(1.1) rotate(5deg);}
figcaption{ display: flex; flex-direction: column;  line-height: 23px; color:var(--text-color); font-size: var(--default-fontsize); }
figcaption h3{ font-size: 19px; color: var(--heading-color);}
#keyhilight{ margin: 125px 0 0 0; position: relative;}
#keyhilight:before{ height: 100%; background:#fff9e1; width: 30%; position: absolute; left: 0; top: 0; content: "";}
#keyhilight .container{ display: flex; flex-direction: row;}
#key{  background: #fff9e1; padding: 129px 0; width: 570px;}
#key h1{  font-size: 36px; color: var(--blue); margin: 0 0 40px 0;} 
#key li{ display: flex; flex-direction: row; gap: 15px;  font-family: 'Google Sans Flex 24pt SemiBold'; font-size: 19px; margin: 30px 0 0 0; align-items: center; position: relative; }
#key li i{ color: var(--blue); font-size: 18px;}
#key li span{ position: relative;}
#key li span::after{ content: '';position: absolute;width: 100%;transform: scaleX(0);height: 3px;bottom: 0;left: 0;background-color:var(--blue);transform-origin: bottom right;transition: transform 0.25s ease-out;}
#key li span:hover::after {transform: scaleX(1);transform-origin: bottom left;}
/*content part end*/

/*innerpage content*/
#page-title {padding: 171px 0 128px 0; width: 100%;background: url(../images/pagetitlebg.jpg) no-repeat top center;box-sizing: border-box; display:flex; justify-content: center; background-size: cover;}
#page-title h1 {color: #FFFFFF;font-size: 40px;;text-align: center; text-transform: capitalize; backdrop-filter:blur(5.4px); padding: 12px 33px;}
#content-cover{ font-size: 16px; color: #1e1d1d;  border-top-left-radius: 60px; border-top-right-radius: 60px; background: var(--white-color); padding: 98px 0 0 0; display: flex; flex-direction: column; line-height: 29px;}
#about-desc{ font-size: 22px; clear: both; line-height: 36px;}
#aboutmainimg{  margin: 60px auto; border-radius: 20px; overflow: hidden; line-height: 0; }
#about-desc div{ display: flex; flex-direction: column; width: 590px;}
#about-cnt{ display: flex; flex-direction: row; justify-content: space-between;}
#about-cnt p{ width: 377px; line-height: 27px;}
#content-cover #mission-cover{ margin: 102px 0 0 0;}
#content-cover #product-list li figure{ width: 291px;}
#content-cover #product-list ul{ gap: 11px;}
#content-cover .product-img{ width: 291px; height: 225px;}
#content-cover figcaption h3{ font-size: 17px;}
#pdt-summary{ padding: 33px; background: #fff5c1; margin: 50px 0 0 0; border-radius: 8px;}
#content-cover #keyhilight{ margin: 85px 0 0 0; }
#content-cover #key h1{ font-size: 26px; margin-bottom: 26px;}
#content-cover #key{ padding: 55px 50px; border-radius: 0;}
#content-cover #key li{ margin: 16px 0 0 0; font-size: 17px;}
#content-cover #key li i{ font-size: 17px;}
#whyroyal{ background: url(../images/whyroyal.jpg) no-repeat; display: flex; justify-content: flex-end; padding: 20px 0; background-size: cover; margin: 60px 0 0 0;}
#whyroyal #key{ backdrop-filter: blur(4px); background: rgba(216, 156, 35, 0.8); color: var(--white-color); width: auto;}
#whyroyal #key h1, #whyroyal  #key li i{ color: var(--white-color);}
#whyroyal #key li{ margin-top: 9px;}
 #whyroyal  #key li span::after{ display: none;}
#sustainable{ background: url(../images/sustainable.jpg) no-repeat; height: 377px; display: flex; align-items: flex-end; background-size: cover;}
 #sustainable-cnt{ padding: 30px; background: var(--blue); text-align: center;  width: 500px; color: var(--white-color);}
#founder-cover{ display: flex; justify-content: center;}
#founder-cover div{ width: 970px; padding: 60px; border-radius: 20px; box-shadow: 0px 0px 16px 4px rgba(145, 145, 145, 0.3); position: relative;  padding-left: 151px;}
#founder-cover div i{ font-size: 66px; color: #dbdbdb; transform: scaleX(-1); position: absolute; left: 40px; top: 63px;}
#cnt-top{ display: flex; flex-direction: row; justify-content: space-between;}
#cnt-cover{ background: #0a2960 url(../images/bg-contacts.png) no-repeat center; background-blend-mode:color-burn; width: 50%; padding: 60px 60px; line-height: 24px; color: var(--white-color);}
#cnt-cover span{ font-size: 24px; font-weight: normal; line-height: 41px; text-transform: capitalize; font-size: 19px;}
#cnt-cover h1 a{  color: var(--text-color); margin: 12px 41px 0 0; font-size: 44px; display: inline-block;}
#cnt-cover h1 a svg{ width: 39px; stroke: var(--text-color);}
#cnt-cover h1 a:hover{ text-decoration: underline;}
#mapcnt{ width:50%;  overflow: hidden; float: right;} 
#mapcnt iframe{ width:100%; height:100%;}
.half-box{ width: 850px;  display: flex; flex-direction: column; margin: 68px auto 0 auto;}
.half-box p{ font-size: 21px; line-height: 39px;}
.contact-detailmain{  line-height:24px; font-size:15px; margin:63px 0 0 0; color:#444444;}
.contact-detailmain a{ color:var(--heading-color); display:block;  margin-top: 7px;   font-size: 26px;}
.contact-detailmain a:hover{ text-decoration: underline;}
.contact-detailmain span{ display:block; font-size:15px; margin:8px 0;}
.contact-frm{display:flex; clear:both; flex-direction: row;  position:relative;justify-content:space-between; ; flex-wrap: wrap; margin: 47px 0 0 0;}
.input-container{width: 411px; position: relative; height: 86px;}
.textarea-container{ width: 100%; position: relative; height: 153px; margin: 0 0 26px 0;}
.input-container input, .textarea-container textarea{ width: 100%; border: #d3d3d3 solid thin; padding:19px; box-sizing: border-box; font-family: var(--regular-font); border-radius: 8px; font-size: 15px;}
.textarea-container textarea{ height: 151px; resize: none;}
#rc-imageselect, .g-recaptcha {transform:scale(0.78);-webkit-transform:scale(0.78);transform-origin:0 0;-webkit-transform-origin:0 0;}
.contact-frm span{ color: rgb(255, 0, 0); font-size: 13px;}
.input-container #frmsubmit{background:var(--blue); color:#FFF; padding:17px 0; cursor:pointer; font-size:17px; font-family: 'Google Sans Flex 24pt SemiBold'; border: none; border-radius: 8px; width: 100%;}
.contact-frm #frmsubmit:hover{ background:#0b425a;}
#address-cover{ display: flex; flex-direction: column;}
#address-cover .contact-detailmain{ margin: 50px 0 0 0;  font-size: 16px; color: var(--white-color); }
#address-cover .contact-detailmain a{ font-size: 18px; color: var(--white-color); }
#address-cover .contact-detailmain svg{ width: 36px; stroke: var(--text-color);}
#address-cover .contact-detailmain span{ margin: 8px 0; font-size:19px; font-weight: normal; color:#ffe985; line-height: 20px;}
#imprt-cover{ display: flex; flex-direction: row; justify-content: space-between; gap: 30px; margin: 73px 0;}
#imprt-cover div{ width: 50%;  color: var(--white-color); display: flex; flex-direction: column;}
#imprt-cover div div{ background: var(--blue); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; display: flex; flex-direction: column; padding: 0;
 width: auto; padding: 30px;}
#imprt-cover div img{ width: 100%; line-height: 0;}
#imprt-cover div h1{ font-size: 22px; margin: 18px 0; text-transform: uppercase;}
#imprt-cover div h6{ margin: 30px 0 7px 0; color: #ffe77e;}
#mission-cover div.categorys{ outline: none; background-image: none; width: 33%; padding: 50px 44px; text-align: center;}
#mission-cover div.categorys h5{ font-size: 20px; margin: 20px 0;}
#mission-cover div.categorys:hover{ box-shadow: none;}
#privacy{ display: flex; flex-direction: column; color: var(--text-color);}
#privacy p{ margin: 10px 0;}
#privacy h1{ font-size: 24px; margin:20px 0; color: var(--heading-color);}
#privacy h3{ font-size: 20px; margin: 16px 0 0 0; color: var(--heading-color);}
#privacy ul li{ position: relative; margin-bottom: 19px; padding: 0 0 0 22px; line-height: 25px;}
#privacy ul li::after, #privacy ul ol::after{ content: ""; position: absolute; left: 0; top: 11px; background: var(--blue); width: 5px; height: 5px; border-radius: 100%;}
#privacy ul{ margin: 5px 0;}
#privacy ul ol{ margin-left: 33px; position: relative; padding-left: 20px; margin-bottom: 10px;}
/*innerpage content end*/

/*footer section*/
footer{ background:#0c1431; padding:75px 0 25px 0;   color:#afb7d1; position: relative; line-height: 28px; margin: 132px 0 0 0;}
#footertop{ display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; border-bottom: #313648 solid thin; align-items: center; padding-bottom: 20px; margin-bottom: 63px;}
#footercnt{ display: flex; flex-direction: row;}
#footercnt a{ color: var(--white-color); font-size: 22px; text-decoration: underline; margin: 0 117px 10px;}
#footermailcover{display: flex; flex-direction: column;}
#footercnt span{ color: var(--white-color); font-size: 24px; text-decoration: underline; width: 450px;}
.bottom-contact{ display: flex; flex-direction: row;  justify-content: space-between; font-size: 15px;}
#footer-cnt{ font-size: 16px; width: 500px; color: #afb7d1; line-height: 28px;}
.footer-links h3{ color:#ffffff; font-size:18px; margin-bottom: 19px;}
ul.botomlinks{ list-style:none; padding:0; position:relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 310px; }
ul.botomlinks li a{  color:#afb7d1; font-size:14px; margin: 0 0 3px 0; display: block; width: 150px;}
ul.botomlinks li a:hover{ color: var(--white-color);}
#line{ width:100%; height:1px; background:#313648 ; margin:34px 0; z-index: 300; position: relative;}
#social-top{ display: flex; flex-direction: column;}
#social-top a{ color: var(--footer-textcolor); font-size: 14px;}
#social-top a:hover{color:var(--white-color)}
#copyrt{font-size:14px;   text-align: center;}
/*footer section end*/


@media (max-width:1250px){
.container{ width:992px;}
ul.dropdown, #welcome-left{ display: none;}
#mobile_menu{display:block; color: var(--white-color); font-size: 25px;}
#mobile_drop{display:block;position:relative; margin: 30px 0 0 0;}
#mobile_drop_fix{display:block;padding:20px 0px;}
#mobile_drop_fix ul li{list-style:none;display:block}
#mobile_drop_fix ul li ul li{margin:0 0 0 25px;}
#mobile_drop_fix ul li ul li a{border-bottom:0!important}
#mobile_drop_fix a{display:block;color:#fff;display:block;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;text-decoration:none;padding:7px 0; font-size:16px; text-transform:capitalize;}
#mobile_drop_fix a:hover{-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease; text-decoration: underline;}
.bannercaption{ font-size: 48px; width: 55%;}
.bannercaption h1{ line-height: 52px; font-size: 47px;}
#product-list li figure, .product-img{ width: 304px;}
.product-img{ height: 235px;}
#keyhilight img{ width: 100%;}
#key{ padding: 77px 0;}
#footercnt span{ width: 340px;}
}


@media (max-width:992px){
.container{ width:768px;}
.bannercaption p, #footer-logo{ display: none;}
#mission-cover, #keyhilight .container, #about-cnt{ flex-direction: column;}
#mission-cover div, #key, #footer-cnt, #about-cnt p, #aboutmainimg img, #about-desc, #founder-cover div, .half-box, #mission-cover div.categorys, #imprt-cover div{ width: 100%;}
#mission-cover, #about-cnt{ gap: 31px;}
#product-list li figure, .product-img{ width: 358px;}
.product-img{ height: 277px;}
#footercnt a{ margin: 0 67px;}
.bottom-contact, #imprt-cover{ flex-direction: column; gap: 30px;}
ul.botomlinks{ width: 690px;}
#page-title{ padding: 161px 0 88px 0;}
#content-cover #product-list li figure{ width: 378px;}
#content-cover .product-img{ width: 378px; height: 293px;}
.input-container{ width: 371px;}
}



@media (max-width:768px){
.container{ width:448px;}
#founder-cover div i{ display: none;}
.bannercaption{ width: 100%; padding: 0 30px; box-sizing: border-box; left: 0; text-align: center; align-items: center;}
.primary, .secondary{ padding: 14px 24px;}
.bannercaption div{ gap: 15px;}
.bannercaption h1, #about-content h1{ font-size: 36px; line-height: 36px;}
.primary, .secondary{ font-size: 14px;}
#about-content img, #what-we-trade .container div, ul.botomlinks, #mapcnt, #footercnt span, #cnt-cover, .input-container{ width: 100%;}
#product-list ul{ justify-content: center;}
#footercnt{ flex-direction: column; gap: 25px;}
#footercnt a{ margin: 0;}
#about-desc{ font-size: 18px; line-height: 30px;}
#page-title h1{ font-size: 34px;}
#whyroyal{ padding: 0;}
#sustainable{ background-size: 100%; height: 427px;}
#founder-cover div{ padding-left: 53px;}
#cnt-top{ flex-direction: column;}
#mapcnt{ height: 250px;}
}


@media (max-width:448px){
.container{ width:100%; padding: 0 25px; box-sizing: border-box;}
.bannercaption h1{ font-size: 23px; line-height: 22px;}
.primary, .secondary{ padding: 10px 12px;}
.bannercaption div{ gap: 6px;}
#logo{ width: 219px; height: 64px;}
#welcome{ text-align: center; margin: 90px 0;}
#product-list h1{ margin-top: 0; font-size: 60px;}
#product-list li figure, .product-img, #content-cover .product-img, #content-cover #product-list li figure{ width: 100%;}
.product-img, #content-cover .product-img{ height: auto;}
figcaption h3, #key li{ font-size: 18px;}
#keyhilight{ margin-top: 85px;}
#footercnt a, #footercnt span{ font-size: 22px;}
#page-title{ padding: 101px 0 58px 0;}
#page-title h1{ font-size: 29px;}
#sustainable{ height: 463px;}
#cnt-cover span{ line-height: 32px; font-size: 18px;}
#address-cover .contact-detailmain span{ font-size: 16px;}
#content-cover{ padding-top: 108px;}
}