@import './font/font.css'; /* basic fonts, required */

/* the size of fonts */
/* 
    30px -> large
    18px -> medium
    16px -> small
*/
.large-fsize { font-size: 30px; }
.xmedium-fsize { font-size: 20px; }
.medium-fsize { font-size: 18px; }
.small-fsize { font-size: 16px; }
.xsmall-fsize { font-size: 13px; }


:root {
    --darkBlue: #293033;
    --white:    #fff;
    --red:      #d93e41;
    --red2:     #d33235;
    --black:    #000;
}

body.us .filter-white { filter: brightness(0%) invert(1); }
body.us .w-100 { width: 100%; }
body.us .padding-left-remove { padding-left: 0!important; }
body.us .border-bottom-remove { border-bottom: none!important; }
body.us .border-left-remove { border-left: none!important; }
body.us .border-left { border-left: 1px solid #d93e41; }
body.us .bg-white { background-color: var(--white)!important; }

body.us i { display: block; }
body.us i.bakim-onarim-icon { background: url(../img/icons/icon-01.svg) no-repeat; width: 110px; height: 107px; }
body.us i.ek-guvence-icon { background: url(../img/icons/icon-02.svg) no-repeat; width: 110px; height: 107px; }
body.us i.dezenfeksiyon-icon { background: url(../img/icons/icon-03.svg) no-repeat; width: 110px; height: 107px; }
body.us i.arrow { background: url(../img/icons/arrow.png) no-repeat; width: 11px; height: 18px; }
body.us .transform-rotate { transform: rotate(90deg); }
body.us section.first { margin-top: 30px; margin-bottom: 222px; }
body.us section.first p { color: var(--black); font-family: "League Regular"; }

body.us section.second { margin-top: 55px; background-color: #2a3033; padding-bottom: 38px; }
body.us section.second ul { list-style-type: none; margin: 0; padding: 0; }
body.us section.second ul.margin-top-negative { justify-content: space-between; }
@media (min-width:836px){
body.us section.second ul.margin-top-negative {justify-content: space-evenly;}
}
body.us section.second ul.margin-top-negative li { background-color: #f1f1f1; max-width: 300px; width: 100%; cursor: pointer; justify-content: space-between; }
body.us section.second ul.margin-top-negative li a { text-decoration: none; display: block; padding: 40px 0; }
body.us section.second ul.margin-top-negative li i { margin: 0 auto; }
body.us section.second ul.margin-top-negative li p { font-family: "League Bold"; font-size: 30px; color: var(--darkBlue); }

body.us section.second ul.margin-top-negative li.uk-active,
body.us section.second ul.margin-top-negative li:hover { background-color: var(--red); }
body.us section.second ul.margin-top-negative li.uk-active p,
body.us section.second ul.margin-top-negative li:hover p { color: #fff; }
body.us section.second ul.margin-top-negative li.uk-active i,
body.us section.second ul.margin-top-negative li:hover i { filter: brightness(0%) invert(1); }

body.us section.second .margin-top-negative { margin-top: -142px; }

body.us section.second ul.uk-switcher { margin-top: 60px; }
body.us section.second ul.uk-switcher figure { margin-top: 16px; }
body.us section.second ul.uk-switcher ul li.hover p { color: var(--white); font-family: "League Bold"; margin-bottom: 0; font-size: 20px; }
body.us section.second ul.uk-switcher li.uk-active ul li.hover { cursor: pointer; }
body.us section.second ul.uk-switcher li.uk-active ul li.hover a { text-decoration: none; }
body.us section.second ul.uk-switcher li.uk-active ul li.hover figure { position: relative; }
body.us section.second ul.uk-switcher li.uk-active ul li.hover figure div.bg-red { position: absolute; top: 0; left: 0; right: 0; bottom: 0; /*background-color: rgba(217, 62, 65, 0.4);*/ border-radius: 10px; }

body.us section.second ul.uk-switcher li.uk-active ul li.hover.uk-active figure::after,
body.us section.second ul.uk-switcher li.uk-active ul li.hover:hover figure::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; /*background-color: var(--red); border-radius: 9px; height: 17px;*/ border: 6px solid var(--red); top:0; border-radius: 8px; }

body.us section.second ul.uk-switcher li.uk-active ul li.hover.uk-active p,
body.us section.second ul.uk-switcher li.uk-active ul li.hover:hover p { color: var(--red); }
body.us section.second ul.uk-switcher li.uk-active ul li.hover.uk-active figure div.bg-red,
body.us section.second ul.uk-switcher li.uk-active ul li.hover:hover figure div.bg-red { background-color: transparent; }

body.us section.third span.title { font-size: 26px; font-family: "League Bold"; color: var(--red); margin-top: 47px; display: block; }
body.us section.third p { font-size: 18px; font-family: "League Regular"; margin-bottom: 0; }
body.us section.third div.input-wrapper { margin-top: 80px; }
body.us section.third div.input-wrapper form { width: 100%; display: flex; }
body.us section.third div.input-wrapper input.serial-number { border-radius: 20px; background-color: #e8e8e8; border: 1px solid #b4b4b4; height: 68px; width: 100%; max-width: 584px; text-align: center; color: #737373; font-size: 24px; font-family: "League Medium"; }
body.us section.third div.input-wrapper input.serial-number:focus-visible { outline: none; }
body.us section.third div.input-wrapper button.link { line-height: 68px; height: 68px; width: 100%; max-width: 345px; color: #fff; text-decoration: none; font-family: "League Bold"; background: linear-gradient(to right, #d33235, #b5181b); display: block; border-radius: 20px; text-align: center; font-size: 24px; margin-left: 20px; appearance: none; border: none; cursor: pointer; }

body.us section.third div.toggle-wrapper { margin-top: 100px; }
body.us section.third div.toggle-wrapper a { display: block; color: var(--red); font-family: "League Bold"; display: flex; }
body.us section.third div.toggle-wrapper a i { margin-right: 20px; }
body.us section.third div.toggle-wrapper div.item { margin-bottom: 30px; }
body.us section.third div.toggle-wrapper div.item p { padding-left: 34px; font-family: "League Regular"; font-size: 18px; color: #000; }

body.us section.third figure { margin-top: 100px; }
body.us section.third span.img-title { font-size: 30px; font-family: "League Bold"; color: #fff; }
body.us section.third p.img-p { font-size: 20px; color: #fff; font-family: "League Regular"; }
body.us section.third p.img-p:last-child { font-size: 22px; color: #fff; font-family: "League Regular"; }

body.us section.third div.table { margin-top: 55px; margin-bottom: 100px; }
body.us section.third div.table table th { color: #fff; background-color: #e33131; text-align: center; text-transform: capitalize; font-family: "League Bold"; }
body.us section.third div.table table th:first-child { font-size: 41px; font-family: "League Bold"; text-align: left; text-transform: uppercase; }
body.us section.third div.table table th:nth-child(2n - 2) { background-color: #cc2f2f; }
body.us section.third div.table table td { text-align: center; font-size: 14px; color: #000; vertical-align: middle; border-right: 1px solid #d93e41; border-bottom: 1px solid #d93e41; background-color: #f0f0f0; }
body.us section.third div.table table td:first-child { text-align: left; vertical-align: middle; font-family: "League Bold"; font-size: 16px; color: #000; text-transform: uppercase; }
body.us section.third div.table table td:nth-child(2) { text-align: left; }
body.us section.third div.table table td:nth-child(2n - 2) {border-right: 1px solid #d93e41;}
body.us section.third div.table table td table td { font-family: "League Regular"!important; color: #000; font-size: 14px!important; text-transform: capitalize; border-right: none!important; }
body.us section.third div.table table td table td:first-child { border-bottom: 1px solid #d93e41; }

body.us section.third div.table { margin-top: 55px; margin-bottom: 100px; }
body.us section.third div.table-toggle-wrapper div.table table th { color: #fff; background-color: #cc2f2f; text-align: center; text-transform: capitalize; font-family: "League Bold"; font-size: 17px; text-align: center; }
body.us section.third div.table-toggle-wrapper div.table table th:first-child { font-size: 17px; font-family: "League Bold"; text-align: center; text-transform: uppercase; flex: 1; }
body.us section.third div.table-toggle-wrapper div.table table th:nth-child(2n - 2) { background-color: #e33131; }
body.us section.third div.table table td { text-align: center; font-size: 14px; color: #000; vertical-align: middle; border-right: 1px solid #d93e41; border-bottom: 1px solid #d93e41; background-color: #f0f0f0; }
body.us section.third div.table table td:first-child { text-align: left; vertical-align: middle; font-family: "League Bold"; font-size: 16px; color: #000; text-transform: uppercase; }
body.us section.third div.table table td:nth-child(2) { text-align: left; }
body.us section.third div.table table td:nth-child(2n - 2) {border-right: 1px solid #d93e41;}
body.us section.third div.table table td table td { font-family: "League Regular"!important; color: #000; font-size: 14px!important; text-transform: capitalize; border-right: none!important; }
body.us section.third div.table table td table td:first-child { border-bottom: 1px solid #d93e41; }

body.us section.third div.table-toggle-wrapper { margin-top: 141px; }
body.us section.third div.table-toggle-wrapper a { display: block; color: var(--red); font-family: "League Bold"; display: flex; font-size: 21px; }
body.us section.third div.table-toggle-wrapper a:hover { text-decoration: none; }
body.us section.third div.table-toggle-wrapper a i { margin-right: 50px; }
body.us section.third div.table-toggle-wrapper div.item { margin-bottom: 30px; padding: 30px 50px; }
body.us section.third div.table-toggle-wrapper div.bg-grey { background-color: #e4e4e4; margin:0 }
body.us section.third div.table-toggle-wrapper div.bg-dark-grey { background-color: #d9d9d9; margin:0 }
body.us section.third div.table-toggle-wrapper div.bg-darken-grey { background-color: #d1d1d1; margin:0 }
body.us section.third div.table-toggle-wrapper div.item p { padding-left: 34px; font-family: "League Regular"; font-size: 18px; color: #000; }

body.us section.third div.table-toggle-wrapper div.table table { max-width: 977px; width: 100%; margin: 0 auto; }
body.us section.third div.table-toggle-wrapper div.table { margin-bottom: 20px; }
body.us section.third div.package-container { display: flex; margin-top: 50px; justify-content: space-between;}
body.us section.third div.package-container div.packages { display: flex; flex-direction: column; justify-content: center; align-items: center;}
body.us section.third div.package-container div.packages p.package-title { font-family: "League Medium"; color: #333;}
body.us section.third div.package-container div.packages p:nth-child(3) { margin: unset;}
body.us section.third div.package-container div.packages p.package-price { color: #d33235; margin-top: 3px; font-weight: 900; font-family: "League Bold";}
body.us section.third div.package-container div.packages p.package-price span { font-size: 24px;}
body.us section.third div.package-container div.packages .package-divider { border-top: 1px solid #ddd; width: 180px; margin: 3px 0px 0px 0px;}
body.us section.third div.package-container div.packages a.buy-button {  text-decoration: none;  background-color: #d33235;  color: #fff;   width: 140px;
   line-height: 40px;  display: block;  text-align: center;  border-top: 1px solid #d33235;  border-right: 1px solid #d33235;  border-bottom: 1px solid #d33235;  border-left: 1px solid #d33235; border-radius: 15px; margin-top: 20px; font-family: "League Bold";}
body.us section.third div.package-container div.packages a.buy-button:hover {background-color: #d93e41; box-shadow: 0px 0px 4px 4px #d93e413b }
body.us section.third p.package-info-text {margin-top: 30px;}

/* body.us section.second ul.uk-switcher li:hover ul li.hover figure { border: 3px solid var(--red); } */

/* body.us section.second ul.uk-switcher li.uk-active ul li.hover.uk-active figure img {   outline: solid 3px var(--red);  border-radius: 15px; }
body.us section.second ul.uk-switcher li:hover.uk-active ul li:hover figure img { border: 3px solid var(--red); border-radius: 15px; } */

@media screen and (max-width: 1260px) {
    body.us section.second ul.uk-flex li { max-width: 304px; }
}


@media screen and (max-width: 960px) {
    body.us section.second .margin-top-negative { margin-top: -100px }
    body.us section.second ul.uk-flex li { max-width: 200px; padding: 28px 0; }
    body.us section.second ul.uk-flex li a p { font-size: 16px; }
    body.us section.second ul.tab-area li div.uk-flex { justify-content: space-between; }

    body.us section.third p.img-p { font-size: 18px; }

    body.us section.third div.input-wrapper input.serial-number { font-size: 18px; }
    body.us section.third div.input-wrapper button.link { font-size: 18px; }
}


@media screen and (max-width: 835px) {
    body.us section.second ul.uk-flex { justify-content: center; }
    body.us section.second ul.tab-area li div.uk-flex { justify-content: center; }

    body.us section.third span.img-title { font-size: 12px; }
    body.us section.third p.img-p { font-size: 9px; margin-top: 4px; }
    body.us section.third p.img-p:last-child { font-size: 10px; }
    
    body.us section.third div.table table th:first-child { font-size: 14px; }
    body.us section.third div.table table td:first-child { font-size: 11px; }
    body.us section.third div.table table td { font-size: 11px; }

    body.us section.third div.table table td table td { font-size: 11px!important; }

    body.us section.third div.table table th { font-size: 9px; }

    body.us section.third div.table-toggle-wrapper div.table table th:first-child { font-size: 14px; }
    body.us section.third div.table-toggle-wrapper div.table table td:first-child { font-size: 11px; }
    body.us section.third div.table-toggle-wrapper div.table table td { font-size: 11px; }

    body.us section.third div.table-toggle-wrapper div.table table td table td { font-size: 11px!important; }

    body.us section.third div.table-toggle-wrapper div.table table th { font-size: 9px; }
}

body.us section.second ul.uk-flex {
    justify-content: space-around !important
}

@media screen and (max-width: 600px) {
    body.us section.third span.img-title { font-size: 10px; }
    body.us section.third p.img-p { font-size: 7px; }
    body.us section.third p.img-p:last-child { font-size: 9px; }

    body.us section.second ul.uk-flex li { margin-bottom: 10px; }
    body.us section.second ul.margin-top-negative li a { padding: 0; }
	body.us section.third div.package-container { display: flex; margin-top: 50px; justify-content: space-between; flex-direction: column;}
	body.us section.third div.package-container div.packages{ display: flex; flex-direction: column; justify-content: center; align-items: center;}
	body.us section.third div.package-container div.packages:not(:first-child) {margin-top: 30px;}
}

body.us .uk-remove-border { border: none!important; }